England Football

Registration Add Relation To Child 

<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">
                <input type="checkbox" value="parent" name="parent">

                <span class="label">Parent</span>

                <span class="checkmark-container">
                    <span class="checkmark"></span>
                </span>
            </label>
            <label class="checkbox checkbox--primary">
                <input type="checkbox" value="carer" name="carer">

                <span class="label">Carer</span>

                <span class="checkmark-container">
                    <span class="checkmark"></span>
                </span>
            </label>
            <label class="checkbox checkbox--primary">
                <input type="checkbox" value="neither" name="neither">

                <span class="label">Neither</span>

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

No notes defined.

{
  "title": {
    "copy": "How are you related to the child?"
  },
  "sub-title": {
    "copy": "The FA is committed to promoting child safety, which is why we ask you to answer this question honestly"
  },
  "btn-1": {
    "copy": "NEXT"
  },
  "relation1": {
    "copy": "Parent",
    "name": "parent",
    "value": "parent"
  },
  "relation2": {
    "copy": "Carer",
    "name": "carer",
    "value": "carer"
  },
  "relation3": {
    "copy": "Neither",
    "name": "neither",
    "value": "neither"
  }
}
  • Content: 
    /* eslint-disable compat/compat */
import {
  currentPage,
  nevigateToNext,
  onComponentVisible,
  setSteps,
  showBackBtn,
  showStep,
} from '../../registrationUtility';
import Validator from '../../validation';

export default currentElement => {
  let relation;
  const checkBoxChangeHandler = (event, checkBoxes, nextBtn) => {
    const { target } = event;

    relation = target.value;
    checkBoxes.forEach(cb => {
      if (cb !== target) {
        // eslint-disable-next-line no-param-reassign
        cb.checked = false;
      }
    });
    Validator.swaapBtn(nextBtn, target.checked);
  };

  const nextBtnHandler = (event, nextBtn) => {
    event.preventDefault();
    if (nextBtn.classList.contains('cta--r-primary')) {
      if (relation === 'neither') {
        currentElement.nextElementSibling.classList.remove('registration_skip');
      }
      event.preventDefault();
      nevigateToNext(currentElement);
    }
  };

  let controller = new AbortController();

  onComponentVisible(currentElement, () => {
    controller.abort('Removing previous event listeners');
    controller = new AbortController();
    showStep('01');
    setSteps('03');
    showBackBtn();
    currentPage.page = currentElement;
    currentElement.nextElementSibling.classList.add('registration_skip');
    const nextBtn = currentElement.querySelector(
      '.registration-add-relation-to-child__next a'
    );

    const containerCheckboxes = currentElement.querySelectorAll(
      `.registration-add-relation-to-child_list-container input[type="checkbox"]`
    );

    nextBtn.addEventListener('click', e => nextBtnHandler(e, nextBtn), {
      signal: controller.signal,
    });

    containerCheckboxes.forEach(checkbox => {
      checkbox.addEventListener(
        'change',
        event => checkBoxChangeHandler(event, containerCheckboxes, nextBtn),
        { signal: controller.signal }
      );
    });
  });
};
  • URL: /components/raw/registration-add-relation-to-child/registration-add-relation-to-child.js
  • Filesystem Path: src/library/modules/registration/registration-self/registration-add-relation-to-child/registration-add-relation-to-child.js
  • Size: 1.9 KB 
<div class="registration-add-relation-to-child registration_hide" data-junior="true">
  <div class="registration-add-relation-to-child__title">
    {{render '@registration-form-title' title}}
  </div>
  <div class="registration-add-relation-to-child__sub-title">
    {{render '@registration-form-sub-title' sub-title}}
  </div>

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

  <div class="registration-add-relation-to-child_list-container">
    <div class="registration-add-relation-to-child_list">
      {{render '@checkbox' relation1 merge="true"}}
      {{render '@checkbox' relation2 merge="true"}}
      {{render '@checkbox' relation3 merge="true"}}
    </div>
  </div>

  <div class="registration-add-relation-to-child__next">
    {{render '@cta--r-disabled' btn-1 merge="true"}}
  </div>
</div>