England Football

Registration Add Junior Member 

<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>

No notes defined.

{
  "title": {
    "copy": "Add Junior members to your account"
  },
  "sub-title": {
    "copy": "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."
  },
  "btn-1": {
    "copy": "ADD JUNIOR"
  },
  "btn-2": {
    "copy": "BACK"
  },
  "sub-title-warning": {
    "copy": "Youve reached the maximum number of five juniors added to your account"
  },
  "registration-mem-secondary": {
    "heading-key": "Adult Membership details",
    "info-key": "Gareth Young",
    "info-value": "DOB: 02/02/2002"
  }
}
  • Content: 
    /* eslint-disable compat/compat */
import { hideClass } from '../../registration-error/registration-error';

import {
  hideBackBtn,
  hideStep,
  nevigateToNext,
  onComponentVisible,
} from '../../registrationUtility';

export default (currentElement, welcomeElement) => {
  const addingJuniorHandler = event => {
    event.preventDefault();
    nevigateToNext(currentElement);
  };
  const backBtnHandler = event => {
    event.preventDefault();
    currentElement.classList.add(hideClass);
    currentElement.parentElement.classList.add(hideClass);
    welcomeElement.classList.remove(hideClass);
  };

  let controller = new AbortController();

  onComponentVisible(currentElement, () => {
    hideStep();
    hideBackBtn();
    controller.abort('Removing previous event listeners');
    controller = new AbortController();
    const [
      warningSubTitle,
      addingJunior,
      backBtn,
    ] = currentElement.querySelectorAll(
      '.sub-title-warning, .registration-add-junior-member__addjunior a, .registration-add-junior-member__back a'
    );

    const addedJuniors = currentElement.querySelectorAll(
      '.registration-member .detail .info'
    );

    if (addedJuniors <= 5) {
      addingJunior.classList.remove(hideClass);
      warningSubTitle.classList.add(hideClass);
    } else {
      warningSubTitle.classList.remove(hideClass);
      addingJunior.classList.add(hideClass);
    }

    addingJunior.addEventListener('click', addingJuniorHandler, {
      signal: controller.signal,
    });
    backBtn.addEventListener('click', backBtnHandler, {
      signal: controller.signal,
    });
  });
};
  • URL: /components/raw/registration-add-junior-member/registration-add-junior-member.js
  • Filesystem Path: src/library/modules/registration/registration-self/registration-add-junior-member/registration-add-junior-member.js
  • Size: 1.6 KB
  • Content: 
    .registration-add-junior-member {
  $cta-container-mt: 40px;
  $cta-gap: 24px;
  $body-mt: 32px;

  .registration-member-container {
    margin-top: $body-mt;
  }

  .sub-title-warning .registration-form-sub-title {
    font-weight: 700;
    color: white;
  }

  .cta-container {
    margin-top: $cta-container-mt;
    .cta--r-secondary,
    .cta--r-primary {
      min-height: 44px;
      font-size: 16px;
    }

    div:not(:first-child) {
      margin-top: $cta-gap;
    }
  }
}
  • URL: /components/raw/registration-add-junior-member/registration-add-junior-member.scss
  • Filesystem Path: src/library/modules/registration/registration-self/registration-add-junior-member/registration-add-junior-member.scss
  • Size: 482 Bytes 
<div class="registration-add-junior-member registration_hide">
    <div class="registration-add-junior-member__title">
        {{render '@registration-form-title' title}}
    </div>

    <div class="sub-title-warning registration_hide">
        {{render '@registration-form-sub-title' sub-title-warning sub-title}}
    </div>

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

    {{render '@registration-server-error'}}

    <div class="registration-member-container">
        {{render '@registration-member--secondary' registration-mem-secondary merge="true"}}
    </div>

    <div class="cta-container">
        <div class="registration-add-junior-member__addjunior">
            {{render '@cta--r-primary' btn-1 merge="true"}}
        </div>

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