<div class="registration-address-confirmation registration_hide">
<div class="registration-address-confirmation__title">
<h1 class="registration-form-title">
Your address is required for membership fulfilment and security checks.
</h1>
</div>
<div class="registration-address-confirmation__add-address">
<a role="button" href="/" class="cta cta--r-secondary ">
<p>
Add or update your address</p>
</a>
</div>
<div class="registration-address-confirmation__sub-title">
<h2 class="registration-form-sub-title">
Opens in a new tab. You'll need to return here to continue your renewal
</h2>
</div>
<div class="registration-address-confirmation__checkbox">
<label class="checkbox checkbox--secondary">
<input type="checkbox" name="faPolicy1">
<span class="label">I confirm my address is added and up to date in my account.</span>
<span class="checkmark-container">
<span class="checkmark"></span>
</span>
</label>
</div>
<div class="registration-address-confirmation__next">
<a role="button" href="/" class="cta cta--r-disabled ">
<p>
Continue</p>
</a>
</div>
</div>
No notes defined.
{
"title": {
"copy": "Your address is required for membership fulfilment and security checks."
},
"sub-title": {
"copy": "Opens in a new tab. You'll need to return here to continue your renewal"
},
"next": {
"copy": "Continue"
},
"addAddress": {
"copy": "Add or update your address"
},
"address-confirmation": {
"copy": "I confirm my address is added and up to date in my account.",
"name": "faPolicy1"
}
}
import {
currentPage,
focusBackBtn,
nevigateToNext,
onComponentVisible,
showStep,
} from '../../registrationUtility';
import Validator from '../../validation';
export default currentElement => {
const nextBtnClickHandler = (event, btn) => {
event.preventDefault();
if (btn.classList.contains('cta--r-primary')) {
// currentPage.adultMemberShip = true;
nevigateToNext(currentElement);
}
};
const checkboxChangeHandler = (event, btn) => {
const { checked } = event.target;
Validator.swaapBtn(btn, checked);
};
let controller = new AbortController();
onComponentVisible(currentElement, () => {
controller.abort('Removing previous event listeners');
controller = new AbortController();
focusBackBtn();
if (currentPage.isAdultRegistered === 'false') {
showStep('08');
}
currentPage.page = currentElement;
const [checkbox, btn] = currentElement.querySelectorAll(
'.registration-address-confirmation__checkbox input[type=checkbox], .registration-address-confirmation__next a'
);
Validator.swaapBtn(btn, checkbox.checked);
checkbox.addEventListener(
'change',
event => checkboxChangeHandler(event, btn),
{ signal: controller.signal }
);
btn.addEventListener(
'click',
async event => nextBtnClickHandler(event, btn),
{ signal: controller.signal }
);
});
};
.registration-address-confirmation {
$cta-gap: 16px;
$body-mt: 32px;
$cta-container-mt: 32px;
.registration-address-confirmation__checkbox {
margin-top: $body-mt;
}
.registration-form-sub-title {
margin-top: 12px;
}
&__add-address,
&__next {
margin-top: $cta-container-mt;
a.cta {
text-transform: uppercase;
}
}
&__add-address {
a.cta {
p {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
&::after {
content: '';
display: inline-block;
width: 18px;
height: 18px;
background-image: url('./assets/icons/launch_page.svg');
background-size: contain;
background-repeat: no-repeat;
}
}
&:hover {
p::after {
background-image: url('./assets/icons/launch_page_dark.svg');
}
}
}
}
}
<div class="registration-address-confirmation registration_hide">
<div class="registration-address-confirmation__title">
{{render '@registration-form-title' title}}
</div>
<div class="registration-address-confirmation__add-address">
{{render '@cta--r-secondary' addAddress merge="true"}}
</div>
<div class="registration-address-confirmation__sub-title">
{{render '@registration-form-sub-title' sub-title}}
</div>
<div class="registration-address-confirmation__checkbox">
{{render '@checkbox--secondary' address-confirmation merge="true"}}
</div>
<div class="registration-address-confirmation__next">
{{render '@cta--r-disabled' next merge="true"}}
</div>
</div>