England Football

Registration Add Junior Option 

<div class="registration-add-junior-option registration_hide">
    <div class="registration-add-junior-option__title">
        <div class="registration-form-title">
            Are you planning on signing up junior members as part of this payment?
        </div>
    </div>

    <div class="sub-title">
        <div class="registration-form-sub-title">
            This image doesn’t meet our standards. Please resubmit or retake a photo that meets our guidelines
        </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-junior-option__yes">
        <a href="/" class="cta cta--r-primary ">
            <p>Yes, I will be adding junior members</p>
        </a>

    </div>

    <div class="registration-add-junior-option__no">
        <a href="/" class="cta cta--r-secondary ">
            <p>No, I will only sign myself up</p>
        </a>

    </div>
</div>

No notes defined.

{
  "title": {
    "copy": "Are you planning on signing up junior members as part of this payment?"
  },
  "sub-title": {
    "copy": "This image doesn’t meet our standards. Please resubmit or retake a photo that meets our guidelines"
  },
  "adding_junior_members": {
    "copy": "Yes, I will be adding junior members"
  },
  "only_sign_myself": {
    "copy": "No, I will only sign myself up"
  }
}
  • Content: 
    import {
  currentPage,
  nevigateToNext,
  onComponentVisible,
  showStep,
} from '../../registrationUtility';

export default currentElement => {
  const [addingJuniorMembers, onlySignMyself] = currentElement.querySelectorAll(
    '.registration-add-junior-option__yes .cta--r-primary, .registration-add-junior-option__no .cta--r-secondary'
  );

  onComponentVisible(currentElement, () => {
    showStep('05');
    // clear selected junior for terms and comndition
    currentPage.selectJuniors = [];

    currentElement.nextElementSibling.classList.add('registration_skip');
    currentPage.page = currentElement;
  });

  onlySignMyself.addEventListener(
    'click',
    event => {
      event.preventDefault();
      nevigateToNext(currentElement);
    },
    false
  );

  addingJuniorMembers.addEventListener(
    'click',
    event => {
      event.preventDefault();
      currentElement.nextElementSibling.classList.remove('registration_skip');
      nevigateToNext(currentElement);
    },
    false
  );
};
  • URL: /components/raw/registration-add-junior-option/registration-add-junior-option.js
  • Filesystem Path: src/library/modules/registration/registration-self/registration-add-junior-option/registration-add-junior-option.js
  • Size: 1 KB
  • Content: 
    .registration-add-junior-option {
  $cta-container-mt: 40px;
  $cta-gap: 24px;
  $body-mt: 32px;

  .registration-add-junior-option__yes {
    margin-top: $cta-container-mt;
  }

  .registration-add-junior-option__no {
    margin-top: $cta-gap;
  }

  .cta--r-disabled,
  .cta--r-secondary,
  .cta--r-primary {
    min-height: 44px;
    font-size: 16px;
  }
}
  • URL: /components/raw/registration-add-junior-option/registration-add-junior-option.scss
  • Filesystem Path: src/library/modules/registration/registration-self/registration-add-junior-option/registration-add-junior-option.scss
  • Size: 360 Bytes 
<div class="registration-add-junior-option registration_hide">
    <div class="registration-add-junior-option__title">
        {{render '@registration-form-title' title}}
    </div>

    <div class="sub-title">
        {{render '@registration-form-sub-title' sub-title}}
    </div>
  {{!-- adding error --}}
    {{render '@registration-server-error'}}

    <div class="registration-add-junior-option__yes">
        {{render '@cta--r-primary' adding_junior_members merge="true"}}
    </div>

    <div class="registration-add-junior-option__no">
        {{render '@cta--r-secondary' only_sign_myself merge="true"}}
    </div>
</div>