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" data-maxlength="40" 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-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-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" data-maxlength="40" 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-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="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" data-max='2024-12-31' data-min='2010-12-10' 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-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-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",
    "maxlength": 40
  },
  "input-field-2": {
    "name": "surname",
    "placeholder": "Surname",
    "label": "Surname",
    "id": "surname",
    "autocomplete": "family-name",
    "type": "text",
    "maxlength": 40
  },
  "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": "2024-12-31",
    "min": "2010-12-10"
  },
  "next": {
    "copy": "NEXT"
  }
}

File:

Content:


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

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

  const nextBtnClickHandler = (event, nextBtn) => {
    event.preventDefault();
    if (nextBtn.classList.contains('cta--r-primary')) {
      nevigateToNext(currentElement);
    }
  };

  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, maxlength) =>
    Validator.validate([
      () => Validator.required(value),
      () => Validator.alphabetsOnly(value, ' '),
      () => Validator.between(value, 1, maxlength || 255),
    ]);

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

  const isDateOfBirthValid = (value, minDate, maxDate) =>
    Validator.validate([
      () => Validator.required(value),
      () => Validator.dateUnderflow(value, minDate),
      () => Validator.dateOverflow(value, maxDate),
    ]);

  const isFormValid = (
    FirstName,
    FirstNamemaxLen,
    LastName,
    LastNamemaxlen,
    DateOfBirth,
    minDate,
    maxDate
  ) =>
    !isFirstNameValid(FirstName, FirstNamemaxLen) &&
    !isLastNameValid(LastName, LastNamemaxlen) &&
    !isDateOfBirthValid(DateOfBirth, minDate, maxDate);

  const elementInputHandler = (
    nextButton,
    FirstName,
    LastName,
    DateOfBirth
  ) => {
    const isValid = isFormValid(
      FirstName.value,
      FirstName.dataset.maxlength,
      LastName.value,
      LastName.dataset.maxlength,
      DateOfBirth.value,
      DateOfBirth.dataset.min,
      DateOfBirth.dataset.max
    );

    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 dateOfBirthFocusHandler = event => {
    togglePlaceholder(event.target, true);
  };

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

    hideAllError(thisNode.parentElement);
    // eslint-disable-next-line no-debugger
    debugger;
    switch (id) {
      case 'firstName':
        errorMessage = isFirstNameValid(value, thisNode.dataset.maxlength);
        break;
      case 'surname':
        errorMessage = isLastNameValid(value, thisNode.dataset.maxlength);
        break;
      case 'date_of_birth':
        errorMessage = isDateOfBirthValid(value, dataset.min, dataset.max);
        // eslint-disable-next-line no-param-reassign
        currentElement.querySelector(`#${event.target.id}`).value = value;
        togglePlaceholder(thisNode, 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,
      nextBtn,
    ] = currentElement.querySelectorAll(
      '.registration-junior-details__first-name input, .registration-junior-details__surname input, .DateOfBirth input, .registration-junior-details__next-to-last-step .cta'
    );

    togglePlaceholder(DateOfBirth, DateOfBirth.value);

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

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

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

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

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

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

    nextBtn.addEventListener('click', e => nextBtnClickHandler(e, nextBtn), {
      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.2 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>
  <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 (5): @registration-form-title, @registration-form-sub-title, @registration-server-error, @registration-text-input, @cta--r-disabled
Referenced by (1): @registration-new-junior-flow