<div class="registration-new-junior-flow registration_hide">
<div class="registration-add-junior-member registration_hide">
<div class="registration-add-junior-member__title">
<div class="registration-form-title">
Add Junior members to your account
</div>
</div>
<div class="sub-title-warning registration_hide">
<div class="registration-form-sub-title">
Youve reached the maximum number of five juniors added to your account
</div>
</div>
<div class="sub-title">
<div class="registration-form-sub-title">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 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-member-container">
<div class="registration-member registration-member--secondary">
<div class="bar"></div>
<div class="container">
<div class="heading">
<span class="heading__key">Adult Membership details</span>
<span class="heading__value">J£105.00</span>
</div>
<div class="detail">
<div class="info info-header registration_hide">
<span class="info__key"></span>
<span class="info__value"></span>
</div>
<div class="info">
<span class="info__key">Gareth Young</span>
<span class="info__value">DOB: 02/02/2002</span>
</div>
</div>
</div>
</div>
</div>
<div class="cta-container">
<div class="registration-add-junior-member__addjunior">
<a href="/" class="cta cta--r-primary ">
<p>ADD JUNIOR</p>
</a>
</div>
<div class="registration-add-junior-member__back">
<a href="/" class="cta cta--r-secondary ">
<p>BACK</p>
</a>
</div>
</div>
</div>
<div class="registration-add-relation-to-child registration_hide" data-junior="true">
<div class="registration-add-relation-to-child__title">
<div class="registration-form-title">
How are you related to the child?
</div>
</div>
<div class="registration-add-relation-to-child__sub-title">
<div class="registration-form-sub-title">
The FA is committed to promoting child safety, which is why we ask you to answer this question honestly
</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-add-relation-to-child_list-container">
<div class="registration-add-relation-to-child_list">
<label class="checkbox checkbox--primary">
<span class="label">Parent</span>
<input type="checkbox" value="parent" name="parent">
<span class="checkmark-container">
<span class="checkmark"></span>
</span>
</label>
<label class="checkbox checkbox--primary">
<span class="label">Carer</span>
<input type="checkbox" value="carer" name="carer">
<span class="checkmark-container">
<span class="checkmark"></span>
</span>
</label>
<label class="checkbox checkbox--primary">
<span class="label">Neither</span>
<input type="checkbox" value="neither" name="neither">
<span class="checkmark-container">
<span class="checkmark"></span>
</span>
</label>
</div>
</div>
<div class="registration-add-relation-to-child__next">
<a href="/" class="cta cta--r-disabled ">
<p>NEXT</p>
</a>
</div>
</div>
<div class="registration-error-junior-page registration_skip registration_hide">
<div class="registration-error-junior-page__title">
<div class="registration-form-title">
Sorry, you must be a parent ot legal guardian in order to add a youth to your profile
</div>
</div>
<div class="registration-error-junior-page__back">
<a href="/" class="cta cta--r-primary ">
<p>ADD ANOTHER JUNIOR</p>
</a>
</div>
</div>
<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>
<div class="registration-junior-last-step registration_hide">
<div class="registration-junior-last-step__title">
<div class="registration-form-title">
Last step...
</div>
</div>
<div class="registration-junior-last-step__sub-title">
<div class="registration-form-sub-title">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<div class="registration-junior-last-step__checkbox">
<label class="checkbox checkbox--secondary">
<span class="label">I agree to the Terms and Conditions and Privacy Policy</span>
<input type="checkbox" name="faPolicy1">
<span class="checkmark-container">
<span class="checkmark"></span>
</span>
</label>
</div>
<div class="registration-junior-last-step__next">
<a href="/" class="cta cta--r-disabled ">
<p>NEXT</p>
</a>
</div>
</div>
</div>
No notes defined.
/* No context defined. */
import { onComponentVisible } from '../../registrationUtility';
import registrationAddJuniorMember from '../registration-add-junior-member/registration-add-junior-member';
import registrationAddRelationToChild from '../registration-add-relation-to-child/registration-add-relation-to-child';
import registrationErrorJuniorPage from '../registration-error-junior-page/registration-error-junior-page';
import registrationJuniorDetails from '../registration-junior-details/registration-junior-details';
import registrationJuniorLastStep from '../registration-junior-last-step/registration-junior-last-step';
export default (currentElement, welcomeElement) => {
onComponentVisible(currentElement, () => {
const addingJunior = currentElement.querySelector(
'.registration-add-junior-member'
);
if (addingJunior) {
registrationAddJuniorMember(addingJunior, welcomeElement);
}
const addRelation = currentElement.querySelector(
'.registration-add-relation-to-child'
);
if (addRelation) {
registrationAddRelationToChild(addRelation);
}
const juniorErrorPage = currentElement.querySelector(
'.registration-error-junior-page'
);
if (juniorErrorPage) {
registrationErrorJuniorPage(juniorErrorPage, addingJunior);
}
const juniorDetails = currentElement.querySelector(
'.registration-junior-details'
);
if (juniorDetails) {
registrationJuniorDetails(juniorDetails);
}
const juniorLastStep = currentElement.querySelector(
'.registration-junior-last-step'
);
if (juniorLastStep) {
registrationJuniorLastStep(juniorLastStep, addingJunior);
}
currentElement.firstElementChild.classList.remove('registration_hide');
});
};
<div class="registration-new-junior-flow registration_hide">
{{render '@registration-add-junior-member'}}
{{render '@registration-add-relation-to-child'}}
{{render '@registration-error-junior-page'}}
{{render '@registration-junior-details'}}
{{render '@registration-junior-last-step'}}
</div>