<div class="registration-junior-flow registration_skip registration_hide">
<div class="registration-select-junior registration_hide" data-junior="true">
<div class="registration-personal-details__title">
<div class="registration-form-title">
Who will be joining?
</div>
</div>
<div class="registration-personal-details__sub-title">
<div class="registration-form-sub-title">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do abore et dolore magna aliqexercitation commodo consequat.
</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-select-junior_list-container">
<div class="registration-select-junior__selectAll-container">
<a href="/" class="registration-select-junior__selectAll">Select all</a>
</div>
<div class="registration-select-junior_list">
<label class="checkbox checkbox--with-dob">
<input type="checkbox" data-fan="67890" name="junior1" data-name="Ram" data-individual-id="RAMA">
<div class="dob-label-container">
<span class="label">Will Young</span>
<p class="dob-label">DOB:08/08/1995</p>
</div>
<span class="checkmark-container">
<span class="checkmark"></span>
</span>
</label>
<label class="checkbox checkbox--with-dob">
<input type="checkbox" data-fan="98765" name="junior2" data-name="Ravan" data-individual-id="RAVANA">
<div class="dob-label-container">
<span class="label">Gareth Gates</span>
<p class="dob-label">DOB:08/08/1995</p>
</div>
<span class="checkmark-container">
<span class="checkmark"></span>
</span>
</label>
<label class="checkbox checkbox--with-dob">
<input type="checkbox" data-fan="67890" name="junior1" data-name="Ram" data-individual-id="RAMA">
<div class="dob-label-container">
<span class="label">Will Young</span>
<p class="dob-label">DOB:08/08/1995</p>
</div>
<span class="checkmark-container">
<span class="checkmark"></span>
</span>
</label>
<label class="checkbox checkbox--with-dob">
<input type="checkbox" data-fan="98765" name="junior2" data-name="Ravan" data-individual-id="RAVANA">
<div class="dob-label-container">
<span class="label">Gareth Gates</span>
<p class="dob-label">DOB:08/08/1995</p>
</div>
<span class="checkmark-container">
<span class="checkmark"></span>
</span>
</label>
<label class="checkbox checkbox--with-dob">
<input type="checkbox" data-fan="98765" name="junior2" data-name="Ravan" data-individual-id="RAVANA">
<div class="dob-label-container">
<span class="label">Gareth Gates</span>
<p class="dob-label">DOB:08/08/1995</p>
</div>
<span class="checkmark-container">
<span class="checkmark"></span>
</span>
</label>
</div>
</div>
<div class="cta-container">
<div class="registration-select-junior__next">
<a href="/" class="cta cta--r-disabled " id="btnTakePhoto">
<p>NEXT</p>
</a>
</div>
<div class="registration-select-junior__add">
<a href="/" class="cta cta--r-disabled " id="btnTakePhoto">
<p>Add New</p>
</a>
</div>
</div>
</div>
<div class="registration-upload-passport registration_hide">
<div class="title">
<div class="registration-form-title">
Please upload a photo of your passport photo page
</div>
</div>
<div class="sub-title">
<div class="registration-form-sub-title">
This should be a JPEG format and no larger than 1.5MB file size. Please ensure that the scan has no reflections and that all information is clearly readable.
</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-upload-passport__image-container" data-face="Image does not contain the correct amount of faces. Please upload a new photo." data-racy="Image moderation has detected possibly racy content. Please upload a new photo." data-adult="Image moderation has detected possibly adult content. Please upload a new photo.">
<img data-allowedSize="5" data-placeholderImage="/assets/example-content/passport.svg" alt="registration passport" class="img" src="/assets/example-content/passport.svg" id="registration-upload-passport__img" loading="lazy" />
</div>
<div class="cta">
<div class="registration-upload-passport__upload-passport-photo">
<a href="/" class="cta cta--r-primary ">
<p>UPLOAD FROM FILES</p>
</a>
</div>
<div class="registration-upload-passport__take-passport-photo-click" data-take-photo="Take photo" data-take-photo-error="Your devices camera is not supported. Please upload a picture of your passport.">
<a href="/" class="cta cta--r-secondary ">
<p>TAKE PHOTO</p>
</a>
</div>
</div>
</div>
<div class="registration-passport-details registration_hide">
<div class="title">
<div class="registration-form-title">
Passport uploaded successfully
</div>
</div>
<div class="sub-title">
<div class="registration-form-sub-title">
Please enter your passport information below
</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="passport">
<img src="/assets/example-content/rectangleGuideline.svg" alt="rectangleGuideline">
</div>
<div class="form-fields">
<div class="place-of-birth">
<div class="registration-text-input-container">
<label class="registration-text-input-container__label" for=placeOfBirth>
Place of birth
</label>
<input class="registration-text-input-container__text-input" data-maxlength="50" type="text" name="placeOfBirth" id="placeOfBirth" autocomplete="address-level1" placeholder="Place of birth (City or town)" />
<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="passport-number">
<div class="registration-text-input-container">
<label class="registration-text-input-container__label" for=passportNumber>
Passport number
</label>
<input class="registration-text-input-container__text-input" type="text" name="passportNumber" id="passportNumber" autocomplete="off" placeholder="Passport number" />
<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="passport-expiry untouched-element">
<div class="registration-text-input-container">
<label class="registration-text-input-container__label" for=passportExpiry>
Passport Expiry
</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="passportExpiry" id="passportExpiry" autocomplete="bday" placeholder="Passport Expiry" />
<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="nationality untouched-element">
<div class="registration-custom-select registration-text-input-container">
<label class="registration-text-input-container__label registration-custom-select__label" for="nationality">
Nationality
</label>
<select name=nationality id=nationality aria-label=Nationality>
<option disabled selected value="select">Nationality</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-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="cta">
<div class="next-to-step-5">
<a href="/" class="cta cta--r-disabled " id="nextBtn">
<p>NEXT</p>
</a>
</div>
<div class="next-to-step-3">
<a href="/" class="cta cta--r-secondary " id="uploadNewPhoto">
<p>UPLOAD NEW PHOTO (OPTIONAL)</p>
</a>
</div>
</div>
</div>
</div>
<div class="registration-upload-profile registration_hide">
<div class="title">
<div class="registration-form-title">
Please upload a profile photo
</div>
</div>
<div class="sub-title">
<div class="registration-form-sub-title" data-instruction1="This should be a JPEG format and no larger than 1.5MB file size. Please ensure that the scan has no reflections and that all information is clearly readable." data-instruction2="Please resize and edit until you’re happy" data-instruction3="title 3">
This should be a JPEG format and no larger than 1.5MB file size. Please ensure that the scan has no reflections and that all information is clearly readable.
</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-upload-profile__image-container" data-face="Image does not contain the correct amount of faces. Please upload a new photo." data-racy="Image moderation has detected possibly racy content. Please upload a new photo." data-adult="Image moderation has detected possibly adult content. Please upload a new photo.">
<img data-allowedSize="5" data-placeholderImage="/assets/example-content/account_box.svg" alt="registration passport" class="registration-upload-profile__img" src="/assets/example-content/account_box.svg" id="rregistration-upload-profile__img" />
</div>
<div class="cta registration-image-upload-btn-container">
<div class="registration-upload-profile__upload-profile-photo">
<a href="/" class="cta cta--r-primary " id="btnUploadPhoto">
<p>UPLOAD FROM FILES</p>
</a>
</div>
<div class="registration-upload-profile__take-profile-photo-click" data-take-photo="Take photo" data-take-photo-error="Your devices camera is not supported. Please upload your profile picture.">
<a href="/" class="cta cta--r-secondary " id="btnTakePhoto">
<p>TAKE PHOTO</p>
</a>
</div>
</div>
<div class="cta registration-image-crop-btn-container registration_hide">
<div class="registration-image-crop-zoom-container">
<span class="registration-image-crop-zoom-label">ZOOM</span>
<div id="cropme-slider"></div>
</div>
<div class="registration-image-crop-rotate-container">
<span class="registration-image-crop-rotate-label">ROTATE</span>
<div id="cropme-rotation-slider"></div>
</div>
<div class="registration-upload-profile__next_btn">
<a href="/" class="cta cta--r-primary " id="nextBtn">
<p>NEXT</p>
</a>
</div>
<div class="registration-upload-profile__take-new-photo">
<a href="/" class="cta cta--r-secondary " id="uploadNewPhoto">
<p>UPLOAD NEW PHOTO (OPTIONAL)</p>
</a>
</div>
</div>
</div>
</div>
No notes defined.
/* No context defined. */
import { hideClass } from '../../registration-error/registration-error';
import { BACKCLICKED, onComponentVisible } from '../../registrationUtility';
import registrationSelectJunior from '../registration-select-junior/registration-select-junior';
export default currentElement => {
const selectJunior = currentElement.querySelector(
'.registration-select-junior'
);
const newRegisreation = document.querySelector(
'.registration-new-junior-flow'
);
if (selectJunior) {
registrationSelectJunior(selectJunior, newRegisreation);
}
onComponentVisible(currentElement, () => {
const isBackClicked = sessionStorage.getItem(BACKCLICKED);
if (isBackClicked === 'true') {
currentElement.lastElementChild.classList.remove(hideClass);
} else {
currentElement.firstElementChild.classList.remove(hideClass);
}
});
};
<div class="registration-junior-flow registration_skip registration_hide">
{{render '@registration-select-junior'}}
{{render '@registration-upload-passport'}}
{{render '@registration-passport-details'}}
{{render '@registration-upload-profile'}}
</div>