Registration Junior Details

Ready

HTML
Notes
Context
Assets
View
Info


        
        <div class="registration-junior-details registration_hide">
    <div class="registration-junior-details__title">
        <div class="registration-form-title">
            Now tell us a bit about the junior!
        </div>
    </div>
    <div class="registration-junior-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-junior-details__fields">
        <div class="registration-junior-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" 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-character-length">length-should-be-9characters</span>
                </div>

            </div>
        </div>
        <div class="registration-junior-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" 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-character-length">length-should-be-9characters</span>
                </div>

            </div>
        </div>
        <div class="DateOfBirth untouched-element">
            <div class="registration-text-input-container">
                <label class="registration-text-input-container__label" for=Date of birth>
                    Date of birth
                </label>
                <input class="registration-text-input-container__text-input" type="date" max='9999-12-31' name="Date of birth" id="date_of_birth" autocomplete="bday" placeholder="DD/MM/YYYY" />
                <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-character-length">length-should-be-9characters</span>
                </div>

            </div>
        </div>
        <div class="gender untouched-element">
            <div class="registration-custom-select registration-text-input-container">
                <label class="registration-text-input-container__label registration-custom-select__label" for="Gender">
                    Gender
                </label>
                <select name=Gender id=gender aria-label=Gender>
                    <option disabled selected value="select">Please select</option>
                    <option value="Pakistan">Saab</option>
                    <option value="Srilanka">Mercedes</option>
                    <option value="Nepal">Audi</option>
                </select>
                <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-character-length">length-should-be-9characters</span>
                </div>

            </div>
        </div>
    </div>
    <div class="registration-junior-details__next-to-last-step">
        <a href="/" class="cta cta--r-disabled ">
            <p>NEXT</p>
        </a>

    </div>
</div>

No notes defined.


        
            
            {
  "title": {
    "copy": "Now tell us a bit about the junior!"
  },
  "sub-title": {
    "copy": "Please fill in all fields"
  },
  "input-field-1": {
    "id": "firstName",
    "name": "firstName",
    "placeholder": "First name",
    "autocomplete": "given-name",
    "label": "First name",
    "type": "text"
  },
  "input-field-2": {
    "name": "surname",
    "placeholder": "Surname",
    "label": "Surname",
    "id": "surname",
    "autocomplete": "family-name",
    "type": "text"
  },
  "dateOfBirth": {
    "id": "date_of_birth",
    "name": "Date of birth",
    "ariaLabel": "Date of birth",
    "type": "date",
    "placeholder": "DD/MM/YYYY",
    "label": "Date of birth",
    "autocomplete": "bday",
    "max": "9999-12-31"
  },
  "gender": {
    "copy": "Gender",
    "name": "Gender",
    "id": "gender",
    "ariaLabel": "Gender",
    "placeholder": "Please select"
  },
  "next": {
    "copy": "NEXT"
  }
}

File:

Content:


                                /* eslint-disable compat/compat */
import {
  hideAllError,
  showError,
} from '../../registration-error/registration-error';
import {
  currentPage,
  nevigateToNext,
  newJunior,
  onComponentVisible,
  showBackBtn,
  showStep,
} from '../../registrationUtility';
import Validator from '../../validation';

export default currentElement => {
  const juniorDetails = {};
  const untouched = 'untouched-element';

  const nextBtnClickHandler = event => {
    event.preventDefault();
    newJunior.FirstName = juniorDetails.FirstName;
    newJunior.LastName = juniorDetails.LastName;
    newJunior.Gender = juniorDetails.gender;
    newJunior.DateOfBirth = juniorDetails.DateOfBirth;

    nevigateToNext(currentElement);
  };

  const inputChnageHandler = event => {
    const { id, value } = event.target;

    switch (id) {
      case '#gender':
        juniorDetails.gender = value;
        break;

      case '#date_of_birth':
        juniorDetails.DateOfBirth = value;
        break;

      default:
        break;
    }
  };

  const keydownEventHandler = event => {
    const { key, target } = event;
    const { id } = target;

    switch (id) {
      case 'firstName':
        if (!Validator.isAlphabets(key, [' '])) {
          event.preventDefault();
        }
        break;
      case 'surname':
        if (!Validator.isAlphabets(key, [' '])) {
          event.preventDefault();
        }
        break;
      default:
        break;
    }
  };

  const isFirstNameValid = value =>
    Validator.validate([
      () => Validator.required(value),
      () => Validator.alphabetsOnly(value, ' '),
      () => Validator.between(value, 1, 255),
    ]);

  const isLastNameValid = value =>
    Validator.validate([
      () => Validator.required(value),
      () => Validator.alphabetsOnly(value, ' '),
      () => Validator.between(value, 1, 255),
    ]);

  const isDateOfBirthValid = value =>
    Validator.validate([() => Validator.required(value)]);

  const isGenderValid = value =>
    Validator.validate([
      () => Validator.required(value === 'select' ? '' : value),
    ]);

  const isFormValid = (FirstName, LastName, DateOfBirth, gender) =>
    !isFirstNameValid(FirstName) &&
    !isLastNameValid(LastName) &&
    !isDateOfBirthValid(DateOfBirth) &&
    !isGenderValid(gender);

  const elementInputHandler = (
    nextButton,
    FirstName,
    LastName,
    DateOfBirth,
    gender
  ) => {
    const isValid = isFormValid(
      FirstName.value,
      LastName.value,
      DateOfBirth.value,
      gender.value
    );

    Validator.swaapBtn(nextButton, isValid);
  };

  const togglePlaceholder = (element, boolVal) => {
    const parentEle = element.parentElement.parentElement;

    if (boolVal) {
      parentEle.classList.remove(untouched);
    } else {
      parentEle.classList.add(untouched);
    }
  };

  const inputPickerFieldHandler = event => {
    const { target } = event;
    const { value } = target;

    togglePlaceholder(target, value && value !== 'select');
  };

  const dateOfBirthFocusHandler = event => {
    togglePlaceholder(event.target, true);
  };

  const elementBlurHandler = event => {
    event.preventDefault();
    const thisNode = event.target;
    const { id, value } = thisNode;
    let errorMessage;

    hideAllError(thisNode.parentElement);
    switch (id) {
      case 'firstName':
        errorMessage = isFirstNameValid(value);
        break;
      case 'surname':
        errorMessage = isLastNameValid(value);
        break;
      case 'date_of_birth':
        errorMessage = isDateOfBirthValid(value);
        togglePlaceholder(thisNode, !errorMessage);
        if (errorMessage) {
          thisNode.value = '';
        }
        break;
      case 'gender':
        errorMessage = isGenderValid(value);
        break;
      default:
        break;
    }
    if (errorMessage) {
      showError(thisNode.parentElement, errorMessage);
    }
    // return errorMessage;
  };

  let controller = new AbortController();

  onComponentVisible(currentElement, () => {
    controller.abort('Removing previous event listeners');
    controller = new AbortController();
    showStep('02');
    showBackBtn();
    currentPage.page = currentElement;

    const [
      fName,
      lName,
      DateOfBirth,
      gender,
      nextBtn,
    ] = currentElement.querySelectorAll(
      '.registration-junior-details__first-name input, .registration-junior-details__surname input, .DateOfBirth input, .gender select, .registration-junior-details__next-to-last-step .cta'
    );

    juniorDetails.FirstName = fName.value;
    juniorDetails.LastName = lName.value;

    const textFields = [fName, lName];
    const pickerField = [gender];
    const inputElements = [DateOfBirth, ...textFields, ...pickerField];

    DateOfBirth.addEventListener('keydown', dateOfBirthFocusHandler, {
      signal: controller.signal,
    });

    inputElements.forEach(element => {
      element.addEventListener('blur', elementBlurHandler, {
        signal: controller.signal,
      });

      element.addEventListener(
        'input',
        () => elementInputHandler(nextBtn, fName, lName, DateOfBirth, gender),
        {
          signal: controller.signal,
        }
      );
    });

    textFields.forEach(element => {
      element.addEventListener('keydown', keydownEventHandler, {
        signal: controller.signal,
      });
    });

    pickerField.forEach(element => {
      element.addEventListener('input', inputPickerFieldHandler, {
        signal: controller.signal,
      });
    });

    inputElements.forEach(item => {
      item.addEventListener('change', event => inputChnageHandler(event), {
        signal: controller.signal,
      });
    });

    nextBtn.addEventListener('click', nextBtnClickHandler, {
      signal: controller.signal,
    });
  });
};

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

Content:


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

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

  .DateOfBirth,
  .gender {
    margin-top: 16px;
  }

  .DateOfBirth {
    @media screen and (max-width: $mq-medium) {
      input {
        appearance: none;

        --webkit-appearance: none;
        &::-webkit-date-and-time-value {
          text-align: left;
        }
      }
    }
  }

  &__surname {
    margin: 16px 0;
  }
  .DateOfBirth.untouched-element,
  .gender.untouched-element {
    input,
    select {
      color: #80a7cf;
    }
  }
}

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


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

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

  <div class="registration-junior-details__fields">
    <div class="registration-junior-details__first-name">
      {{render '@registration-text-input' input-field-1 merge="true"}}
    </div>
    <div class="registration-junior-details__surname">
      {{render '@registration-text-input' input-field-2 merge="true"}}
    </div>
    <div class="DateOfBirth untouched-element">
      {{render '@registration-text-input' dateOfBirth merge="true"}}
    </div>
    <div class="gender untouched-element">
      {{render '@custom-input-select' gender merge="true"}}
    </div>
  </div>
  <div class="registration-junior-details__next-to-last-step">
    {{render '@cta--r-disabled' next merge="true"}}
  </div>
</div>

Handle: @registration-junior-details
Preview:
- With layout
- Component only
Filesystem Path: src/library/modules/registration/registration-self/registration-junior-details/registration-junior-details.hbs
References (6): @registration-form-title, @registration-form-sub-title, @registration-server-error, @registration-text-input, @custom-input-select, @cta--r-disabled
Referenced by (1): @registration-new-junior-flow