Registration Personal Details

Ready

HTML
Notes
Context
Assets
View
Info


        
        <div class="registration-personal-details registration_hide">
    <div class="registration-personal-details__title">
        <div class="registration-form-title">
            Now tell us a bit about yourself!
        </div>
    </div>
    <div class="registration-personal-details__sub-title">
        <div class="registration-form-sub-title">
            Please fill in all fields
        </div>
    </div>

    <div class="registration-error registration-server-error registration_hide" role="alert">
        <span class="registration-error-message">sitecore api error</span>
    </div>

    <div class="registration-personal-details__fields">
        <div class="registration-personal-details__first-name">
            <div class="registration-text-input-container">
                <label class="registration-text-input-container__label" for=firstName>
                    First name
                </label>
                <input class="registration-text-input-container__text-input" type="text" disabled name="firstName" id="firstName" autocomplete="given-name" placeholder="First name" />
                <div class="registration-error registration_hide" role="alert">
                    <span class="registration-error-message registration_hide" id="invalid-b2c-contact-number">invalid-b2c-contact-number</span>
                    <span class="registration-error-message registration_hide" id="invalid-input-required">Requird</span>
                    <span class="registration-error-message registration_hide" id="invalid-input-length">invalid-length</span>
                    <span class="registration-error-message registration_hide" id="invalid-input-alphabets-only">alphabets-only</span>
                    <span class="registration-error-message registration_hide" id="invalid-input-alphanumeric">alpha numeric</span>
                    <span class="registration-error-message registration_hide" id="invalid-input-underflow">A junior account cannot be 16 years old or above</span>
                    <span class="registration-error-message registration_hide" id="invalid-input-overflow">A junior account cannot be 16 years old or above</span>
                    <span class="registration-error-message registration_hide" id="invalid-character-length">length-should-be-9characters</span>
                </div>

            </div>
        </div>
        <div class="registration-personal-details__surname">
            <div class="registration-text-input-container">
                <label class="registration-text-input-container__label" for=surname>
                    Surname
                </label>
                <input class="registration-text-input-container__text-input" type="text" disabled name="surname" id="surname" autocomplete="family-name" placeholder="Surname" />
                <div class="registration-error registration_hide" role="alert">
                    <span class="registration-error-message registration_hide" id="invalid-b2c-contact-number">invalid-b2c-contact-number</span>
                    <span class="registration-error-message registration_hide" id="invalid-input-required">Requird</span>
                    <span class="registration-error-message registration_hide" id="invalid-input-length">invalid-length</span>
                    <span class="registration-error-message registration_hide" id="invalid-input-alphabets-only">alphabets-only</span>
                    <span class="registration-error-message registration_hide" id="invalid-input-alphanumeric">alpha numeric</span>
                    <span class="registration-error-message registration_hide" id="invalid-input-underflow">A junior account cannot be 16 years old or above</span>
                    <span class="registration-error-message registration_hide" id="invalid-input-overflow">A junior account cannot be 16 years old or above</span>
                    <span class="registration-error-message registration_hide" id="invalid-character-length">length-should-be-9characters</span>
                </div>

            </div>
        </div>
        <div class="registration-personal-details__contact-number">
            <div class="registration-text-input-container">
                <label class="registration-text-input-container__label" for=contactNumber>
                    Contact Numbe
                </label>
                <input class="registration-text-input-container__text-input" type="tel" name="contactNumber" id="contactNumber" autocomplete="tel" placeholder="Contact Numbe" />
                <div class="registration-error registration_hide" role="alert">
                    <span class="registration-error-message registration_hide" id="invalid-b2c-contact-number">invalid-b2c-contact-number</span>
                    <span class="registration-error-message registration_hide" id="invalid-input-required">Requird</span>
                    <span class="registration-error-message registration_hide" id="invalid-input-length">invalid-length</span>
                    <span class="registration-error-message registration_hide" id="invalid-input-alphabets-only">alphabets-only</span>
                    <span class="registration-error-message registration_hide" id="invalid-input-alphanumeric">alpha numeric</span>
                    <span class="registration-error-message registration_hide" id="invalid-input-underflow">A junior account cannot be 16 years old or above</span>
                    <span class="registration-error-message registration_hide" id="invalid-input-overflow">A junior account cannot be 16 years old or above</span>
                    <span class="registration-error-message registration_hide" id="invalid-character-length">length-should-be-9characters</span>
                </div>

            </div>
        </div>
    </div>
    <div class="registration-personal-details__next-to-photo-upload">
        <a href="/" class="cta cta--r-disabled ">
            <p>NEXT</p>
        </a>

    </div>
</div>

No notes defined.


        
            
            {
  "title": {
    "copy": "Now tell us a bit about yourself!"
  },
  "sub-title": {
    "copy": "Please fill in all fields"
  },
  "input-field-1": {
    "disabled": "disabled",
    "id": "firstName",
    "name": "firstName",
    "placeholder": "First name",
    "autocomplete": "given-name",
    "label": "First name",
    "type": "text"
  },
  "input-field-2": {
    "disabled": "disabled",
    "name": "surname",
    "placeholder": "Surname",
    "label": "Surname",
    "id": "surname",
    "autocomplete": "family-name",
    "type": "text"
  },
  "input-field-3": {
    "name": "contactNumber",
    "id": "contactNumber",
    "placeholder": "Contact Numbe",
    "type": "tel",
    "autocomplete": "tel",
    "label": "Contact Numbe",
    "ariaLabel": "Contact Numbe"
  },
  "next": {
    "copy": "NEXT"
  }
}

File:

Content:


                                import {
  hideAllError,
  showError,
} from '../../registration-error/registration-error';
import {
  showServerError,
  hideServerError,
} from '../../registration-server-error/registration-server-error';
import {
  currentPage,
  nevigateToNext,
  onComponentVisible,
  showBackBtn,
  showStep,
} from '../../registrationUtility';
import {
  POST,
  UpdatePersonalDetailsPath,
  UpdatePersonalDetailsPayload,
  getAuth,
} from '../../service';
import Validator from '../../validation';

export default personalDetails => {
  // eslint-disable-next-line prettier/prettier
  const nextToPhotoUpload = personalDetails.querySelector(
    '.registration-personal-details__next-to-photo-upload a'
  );

  const contactNumber = personalDetails.querySelector(
    '.registration-personal-details__contact-number .registration-text-input-container__text-input'
  );
  const firstName = personalDetails.querySelector(
    '.registration-personal-details__first-name .registration-text-input-container__text-input'
  );
  const lastName = personalDetails.querySelector(
    '.registration-personal-details__surname .registration-text-input-container__text-input'
  );

  onComponentVisible(personalDetails, () => {
    Validator.swaapBtn(nextToPhotoUpload, contactNumber.value);
    showStep('02');
    showBackBtn();
    currentPage.page = personalDetails;
  });

  nextToPhotoUpload.addEventListener('click', async event => {
    event.preventDefault();
    if (nextToPhotoUpload.classList.contains('cta--r-primary')) {
      hideServerError(personalDetails);

      contactNumber.parentElement.classList.remove('error');
      const res = await POST(UpdatePersonalDetailsPath, {
        ...UpdatePersonalDetailsPayload,
        fancode: getAuth().fanCode,
        FirstName: firstName.value,
        LastName: lastName.value,
        ContactNumber: contactNumber.value,
      });

      if (!res.success) {
        showServerError(personalDetails, res.error);
      } else {
        nevigateToNext(personalDetails);
      }
    }
  });

  contactNumber.addEventListener('blur', () => {
    hideAllError(contactNumber.parentElement);
    const errorMessage = Validator.validate([
      () => Validator.required(contactNumber.value),
      () => Validator.b2cContactNumber(contactNumber.value),
      () => Validator.between(contactNumber.value, 0, 15),
    ]);

    if (errorMessage) {
      showError(contactNumber.parentElement, errorMessage);
    } else {
      contactNumber.parentElement.classList.remove('error');
      hideAllError(contactNumber.parentElement);
    }
  });

  contactNumber.addEventListener('keyup', () => {
    const errorMessage = Validator.validate([
      () => Validator.required(contactNumber.value),
      () => Validator.b2cContactNumber(contactNumber.value),
      () => Validator.between(contactNumber.value, 0, 15),
    ]);

    if (errorMessage) {
      Validator.swaapBtn(nextToPhotoUpload, false);
    } else {
      Validator.swaapBtn(nextToPhotoUpload, true);
    }
  });

  contactNumber.addEventListener('change', () => {
    const errorMessage = Validator.validate([
      () => Validator.required(contactNumber.value),
      () => Validator.b2cContactNumber(contactNumber.value),
      () => Validator.between(contactNumber.value, 0, 15),
    ]);

    if (errorMessage) {
      Validator.swaapBtn(nextToPhotoUpload, false);
    } else {
      Validator.swaapBtn(nextToPhotoUpload, true);
    }
  });

  contactNumber.addEventListener('keydown', event => {
    if (!Validator.isB2cContactNumber(event.key)) {
      event.preventDefault();
    }
  });
};

URL: /components/raw/registration-personal-details/registration-personal-details.js
Filesystem Path: src/library/modules/registration/registration-self/registration-personal-details/registration-personal-details.js
Size: 3.6 KB

Content:


                                .registration-personal-details {
  $cta-container-mt: 40px;
  $body-mt: 32px;

  &__fields {
    margin-top: $body-mt;
  }
  &__next-to-photo-upload {
    margin-top: $cta-container-mt;
    .cta--r-disabled,
    .cta--r-primary {
      min-height: 44px;
      font-size: 16px;
    }
  }

  &__surname {
    margin: 16px 0;
  }
}

URL: /components/raw/registration-personal-details/registration-personal-details.scss
Filesystem Path: src/library/modules/registration/registration-self/registration-personal-details/registration-personal-details.scss
Size: 329 Bytes


        {{!-- adding registration_hide --}}
<div class="registration-personal-details registration_hide">
  <div class="registration-personal-details__title">
    {{render '@registration-form-title' title}}
  </div>
  <div class="registration-personal-details__sub-title">
    {{render '@registration-form-sub-title' sub-title}}
  </div>

  {{!-- adding error --}}
  {{render '@registration-server-error'}}

  <div class="registration-personal-details__fields">
    <div class="registration-personal-details__first-name">
      {{render '@registration-text-input' input-field-1 merge="true"}}
    </div>
    <div class="registration-personal-details__surname">
      {{render '@registration-text-input' input-field-2 merge="true"}}
    </div>
    <div class="registration-personal-details__contact-number">
      {{render '@registration-text-input' input-field-3 merge="true"}}
    </div>
  </div>
  <div class="registration-personal-details__next-to-photo-upload">
    {{render '@cta--r-disabled' next merge="true"}}
  </div>
</div>

Handle: @registration-personal-details
Preview:
- With layout
- Component only
Filesystem Path: src/library/modules/registration/registration-self/registration-personal-details/registration-personal-details.hbs
References (5): @registration-form-title, @registration-form-sub-title, @registration-server-error, @registration-text-input, @cta--r-disabled
Referenced by (1): @registration-self-steps-container