England Football

Registration Self Welcome 

<div class="registration-self-welcome registration_hide">
    <div class="header">
        <h1>Welcome</h1>
    </div>
    <div class="welcome">
        <div class="title">
            <div class="registration-form-title">
                We need some more details from you before upgrading to an England Supporters Travel Club member.
            </div>
        </div>
        <div class="sub-title">
            <div class="registration-form-sub-title">
                If you are intending on purchasing a junior membership along with your own, please ensure your junior is registered to your account before proceeding by clicking ‘Register Junior’ below.
            </div>
        </div>

        <div class="registration-cta">
            <div class="next-to-step-1">
                <a href="/" class="cta cta--r-primary ">
                    <p>COMPLETE ESTC UPGRADE</p>
                </a>

            </div>
            <div class="register-junior">
                <a href="/" class="cta cta--r-primary ">
                    <p>REGISTER JUNIOR</p>
                </a>

            </div>
            <div class="exit-to-fa-com">
                <a href="/" class="cta cta--r-secondary ">
                    <p>EXIT TO THEFA.COM</p>
                </a>

            </div>
        </div>
    </div>
</div>

No notes defined.

{
  "title": {
    "copy": "We need some more details from you before upgrading to an England Supporters Travel Club member."
  },
  "sub-title": {
    "copy": "If you are intending on purchasing a junior membership along with your own, please ensure your junior is registered to your account before proceeding by clicking ‘Register Junior’ below."
  },
  "btn-1": {
    "copy": "COMPLETE ESTC UPGRADE"
  },
  "btn-2": {
    "copy": "REGISTER JUNIOR"
  },
  "btn-3": {
    "copy": "EXIT TO THEFA.COM"
  }
}
  • Content: 
    import { hideClass } from '../../registration-error/registration-error';
import {
  currentPage,
  hideBackBtn,
  hideStep,
  nevigateToNext,
  onComponentVisible,
  setSteps,
} from '../../registrationUtility';
import { checkAuth } from '../../service';

export default async (currentElement, registerJuniorFlow) => {
  onComponentVisible(currentElement, () => {
    hideStep();
    hideBackBtn();
    setSteps('08');
    currentPage.page = currentElement;
  });

  const authChecked = await checkAuth();

  if (authChecked) {
    currentElement.classList.remove(hideClass);
  }

  const btn1 = currentElement.querySelector('.next-to-step-1');

  btn1.addEventListener('click', async event => {
    event.preventDefault();
    if (btn1.querySelectorAll('.cta--r-primary').length > 0) {
      nevigateToNext(currentElement);
    }
  });

  const registerJunior = currentElement.querySelector('.register-junior .cta');

  registerJunior.addEventListener('click', event => {
    event.preventDefault();
    currentElement.classList.add(hideClass);
    registerJuniorFlow.classList.remove(hideClass);
  });
};
  • URL: /components/raw/registration-self-welcome/registration-self-welcome.js
  • Filesystem Path: src/library/modules/registration/registration-self/registration-self-welcome/registration-self-welcome.js
  • Size: 1.1 KB
  • Content: 
    .registration-self-welcome {
  $cta-container-mt: 40px;
  $cta-gap: 16px;

  margin: 0 auto;
  .welcome {
    margin-top: 24px;

    .registration-cta {
      margin-top: $cta-container-mt;

      .cta--r-disabled,
      .cta--r-secondary,
      .cta--r-primary {
        min-height: 44px;
        font-size: 16px;
      }

      div:not(:first-child) {
        margin-top: $cta-gap;
      }
    }
  }

  .header {
    h1 {
      font-weight: 400;
      font-size: 80px;
      text-align: center;
      font-family: $teams-font;

      @media screen and (max-width: $mq-medium) {
        font-size: 50px;
      }
    }
  }
}
  • URL: /components/raw/registration-self-welcome/registration-self-welcome.scss
  • Filesystem Path: src/library/modules/registration/registration-self/registration-self-welcome/registration-self-welcome.scss
  • Size: 625 Bytes 
<div class="registration-self-welcome registration_hide">
  <div class="header">
    <h1>Welcome</h1>
  </div>
  <div class="welcome">
    <div class="title">
      {{render '@registration-form-title' title }}
    </div>
    <div class="sub-title">
      {{render '@registration-form-sub-title' sub-title}}
    </div>

    <div class="registration-cta">
      <div class="next-to-step-1">
        {{render '@cta--r-primary' btn-1 merge="true"}}
      </div>
      <div class="register-junior">
        {{render '@cta--r-primary' btn-2 merge="true"}}
      </div>
      <div class="exit-to-fa-com">
        {{render '@cta--r-secondary' btn-3 merge="true"}}
      </div>
    </div>
  </div>
</div>