supplier-registration.html

{% extends "layout.html" %}

{% block pageTitle %}
  Register Your Company - Supplier Portal
{% endblock %}



{% block beforeContent %}

{% endblock %}

{% block content %}
  <div class="nhsuk-grid-row">
    <div class="nhsuk-grid-column-two-thirds">
      
      <h1 class="nhsuk-heading-xl">Register Your Company</h1>
      <p class="nhsuk-body-l">Join the NHS supplier passporting system</p>

      <form class="form" action="/supplier/register-success" method="post">

        {# Company Information #}
        <h2 class="nhsuk-heading-l">Company Information</h2>

        {{ input({
          label: {
            text: "Company Name",
            classes: "nhsuk-label--m"
          },
          id: "company-name",
          name: "companyName",
          autocomplete: "organization"
        }) }}

        <div class="nhsuk-grid-row">
          <div class="nhsuk-grid-column-one-half">
            {{ input({
              label: {
                text: "Company Number"
              },
              hint: {
                text: "e.g., 12345678"
              },
              id: "company-number",
              name: "companyNumber",
              classes: "nhsuk-input--width-10"
            }) }}
          </div>
          <div class="nhsuk-grid-column-one-half">
            {{ select({
              id: "company-type",
              name: "companyType",
              label: {
                text: "Company Type"
              },
              items: [
                {
                  value: "",
                  text: "Select type"
                },
                {
                  value: "manufacturer",
                  text: "Manufacturer"
                },
                {
                  value: "distributor",
                  text: "Distributor"
                },
                {
                  value: "sme",
                  text: "SME / Startup"
                },
                {
                  value: "large-enterprise",
                  text: "Large Enterprise"
                }
              ]
            }) }}
          </div>
        </div>

        {# Product Categories #}
        <h2 class="nhsuk-heading-l nhsuk-!-margin-top-6">Product Categories</h2>
        <p class="nhsuk-body">Select all that apply to your products</p>

        {{ checkboxes({
          name: "productCategories",
          fieldset: {
            legend: {
              text: "Select product categories",
              isPageHeading: false,
              classes: "nhsuk-visually-hidden"
            }
          },
          items: [
            {
              value: "diagnostic-imaging",
              text: "Diagnostic Imaging"
            },
            {
              value: "surgical-instruments",
              text: "Surgical Instruments"
            },
            {
              value: "patient-monitoring",
              text: "Patient Monitoring"
            },
            {
              value: "cardiac-devices",
              text: "Cardiac Devices"
            },
            {
              value: "respiratory-equipment",
              text: "Respiratory Equipment"
            },
            {
              value: "laboratory-equipment",
              text: "Laboratory Equipment"
            },
            {
              value: "infusion-devices",
              text: "Infusion Devices"
            },
            {
              value: "digital-health",
              text: "Digital Health"
            }
          ]
        }) }}

        {# Primary Contact #}
        <h2 class="nhsuk-heading-l nhsuk-!-margin-top-6">Primary Contact</h2>

        {{ input({
          label: {
            text: "Contact Name",
            classes: "nhsuk-label--m"
          },
          id: "contact-name",
          name: "contactName",
          autocomplete: "name"
        }) }}

        {{ input({
          label: {
            text: "Email Address",
            classes: "nhsuk-label--m"
          },
          id: "email",
          name: "email",
          type: "email",
          autocomplete: "email",
          spellcheck: false
        }) }}

        {{ input({
          label: {
            text: "Phone Number",
            classes: "nhsuk-label--m"
          },
          hint: {
            text: "e.g., +44 20 1234 5678"
          },
          id: "phone",
          name: "phone",
          type: "tel",
          autocomplete: "tel",
          classes: "nhsuk-input--width-20"
        }) }}

        {# Account Security #}
        <h2 class="nhsuk-heading-l nhsuk-!-margin-top-6">Account Security</h2>

        {{ input({
          label: {
            text: "Password",
            classes: "nhsuk-label--m"
          },
          hint: {
            text: "Must be at least 8 characters with uppercase, lowercase, and numbers"
          },
          id: "password",
          name: "password",
          type: "password",
          autocomplete: "new-password"
        }) }}

        {{ input({
          label: {
            text: "Confirm Password",
            classes: "nhsuk-label--m"
          },
          id: "confirm-password",
          name: "confirmPassword",
          type: "password",
          autocomplete: "new-password"
        }) }}

        {# Terms and Conditions #}
        <div class="nhsuk-!-margin-top-6">
          {{ checkboxes({
            name: "acceptTerms",
            items: [
              {
                value: "yes",
                text: "I confirm that I am authorized to register this company on Compass, and I agree to the Terms of Service and Data Processing Agreement. I understand that submitted information will be visible to NHS procurement teams.",
                hint: {
                  text: "You must accept the terms to continue"
                }
              }
            ]
          }) }}
        </div>

        <div class="nhsuk-button-group nhsuk-!-margin-top-6">
          {{ button({
            text: "Create Account"
          }) }}
          <a class="nhsuk-link" href="/supplier/login">Already have an account?</a>
        </div>

      </form>

    </div>
  </div>
{% endblock %}