Registration Container

Ready

HTML
Notes
Context
Assets
View
Info


        
        <div class="registration-container" data-modal-title='Test Are you sure you want quit' data-modal-subtitle='Subtitle for cross icon' data-modal-primary='QUIT' data-modal-secondary='cross Cancel'>
    <div id="camera_host"></div>
    <div class="registration-container__header">
        <button class="back-icon-container registration_hide" aria-label="back registration journey">
            <i class="back-icon"></i> <span class="back-text">BACK</span>
        </button>
        <button class="close-icon-container" aria-label="close registration journey">
            <i class="close-icon"></i>
        </button>
    </div>
    <div class="registration-container__body">
        <div class="registration-loader registration_hide">
            <img id="registration-loader-logo" src="/assets/example-content/loading_with_logo.gif" loading="lazy" alt="loading" />
        </div>
        <div class="form-container">
            Registration container
        </div>
    </div>
    <div class="registration-container__footer">
        <i class="footer-logo"></i>
    </div>
    <dialog class="registration-confirm-modal">
        <!-- Modal content -->
        <div class="registration-confirm-modal__content">
            <div class="registration-confirm-modal__header">
                <div class="registration-form-title">
                    Are you sure?
                </div>
            </div>
            <div class="registration-confirm-modal__body">
                <div class="registration-form-sub-title">
                    If you don’t want to register now you can come back at any time.
                </div>
            </div>
            <div class="registration-confirm-modal__footer">
                <a href="/" class="cta cta--r-primary ">
                    <p>Leave</p>
                </a>

                <a href="/" class="cta cta--r-secondary ">
                    <p>Cancel</p>
                </a>

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

No notes defined.


        
            
            {
  "popup-title": {
    "copy": "Are you sure you want to remove junior?"
  },
  "popup-para": {
    "copy": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum iste optio fugit totam mollitia? Quisquam impedit, provident ipsa fuga vel aspernatur ipsam unde labore quasi doloremque ea harum, amet possimus?"
  },
  "quit-button": {
    "copy": "QUIT"
  },
  "cancel-button": {
    "copy": "CANCEL"
  }
}

File:

Content:


                                import { hideClass } from '../../modules/registration/registration-error/registration-error';
import {
  BACKCLICKED,
  backBtnElement,
  currentPage,
  nevigateToPrevious,
} from '../../modules/registration/registrationUtility';

import {
  setDialogTitle,
  setDialogSubTitle,
  setConfirmDialogPrimaryCtaText,
  setConfirmDialogSecondaryCtaText,
} from '../../modules/registration/registration-confirm-modal/registration-confirm-modal';

export default parentElement => {
  const backBtn = backBtnElement;
  const closeBtn = parentElement.querySelector('.close-icon-container');
  const model = parentElement.querySelector('.registration-confirm-modal');

  closeBtn.addEventListener('click', () => {
    setDialogTitle(parentElement.getAttribute('data-modal-title'));
    setDialogSubTitle(parentElement.getAttribute('data-modal-subtitle'));
    setConfirmDialogPrimaryCtaText(
      parentElement.getAttribute('data-modal-primary')
    );
    setConfirmDialogSecondaryCtaText(
      parentElement.getAttribute('data-modal-secondary')
    );
    model.showModal();
  });

  backBtn.addEventListener('click', event => {
    event.preventDefault();
    if (!currentPage.isLoading) {
      let currentElement = currentPage.page;

      if (
        currentElement.classList.contains('registration-passport-details') ||
        currentElement.classList.contains(
          'registration-passport-details-cloned'
        )
      ) {
        currentElement.classList.add(hideClass);
        currentElement = currentElement.previousElementSibling;
      }
      if (currentElement.classList.contains('registration-select-junior')) {
        currentElement = currentElement.parentElement;
        currentElement.classList.add('registration_skip');
        if (currentPage.isAdultRegistered === 'true') {
          currentElement = document.querySelector(
            '.registration-privacy-policy'
          );
          currentPage.page.parentElement.classList.add(hideClass);
        }
      }
      nevigateToPrevious(currentElement);
      sessionStorage.setItem(BACKCLICKED, true);
    }
  });
};

URL: /components/raw/registration-container/registration-container.js
Filesystem Path: src/library/layouts/registration-container/registration-container.js
Size: 2.1 KB

Content:


                                $border-radius: 16px;
$width: 1000px;
$height: 800px;
$containe-height: 593px;
$margin-y: 112px;
$margin-mobile-y: 40px;
$margin-mobile-x: 20px;

// close icon
$close-icon-y: 22px;
$close-icon-right: 22px;
$close-icon-height: 16px;
$close-icon-width: 16px;

// footer image
$footer-image-width: 155px;
$footer-image-height: 64.58px;
$footer-bottom: 50px;

.registration-container {
  background-color: $crest-blue;
  border-radius: $border-radius;
  width: $width;
  min-height: $height;
  margin: $margin-y auto;
  display: flex;
  flex-direction: column;
  position: relative;

  &__header {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .close-icon-container {
      margin-left: auto;
      height: 44px;
      width: 44px;
      margin-top: 12px;
      margin-right: 12px;
      border-radius: 2px;
      background-color: transparent;
      border: 0;

      .close-icon {
        background-size: contain;
        background-image: url('./assets/example-content/close.svg');
        transition: all 0.2s ease-in-out;
        height: $close-icon-height;
        width: $close-icon-width;
        display: block;
        margin: auto;

        &:hover {
          transform: scale(1.25);
        }
      }

      &:focus-visible {
        outline: none;
        background-color: $yellow1;
        border: 1px solid $black1;
        color: $black1;

        .close-icon {
          background-image: url('./assets/example-content/close-icon-black.svg');
        }
      }
    }

    .back-icon-container {
      display: flex;
      align-items: center;
      height: 44px;
      margin: 12px;
      border-radius: 2px;
      background-color: transparent;
      border: 0;

      .back-icon,
      .back-text {
        margin: 16px 0;
      }

      .back-text {
        color: $light-blue;
        font-family: $registration-font;
        font-size: 16px;
        font-weight: 400;
        margin-right: 16px;
        cursor: pointer;
      }

      .back-icon {
        margin-right: 8px;
        display: block;
        margin-left: 16px;
        height: 11px;
        width: 11px;
        background-image: url('./assets/example-content/arrow_back.svg');
      }

      &:hover {
        .back-icon {
          background-image: url('./assets/example-content/arrow_back_hover.svg');
        }

        .back-text {
          color: white;
          font-weight: 700;
        }
      }

      &:focus-visible {
        outline: none;
        background-color: $yellow1;
        border: 1px solid $black1;
        color: $black1;

        .back-text {
          color: $black1;
        }

        .back-icon {
          background-image: url('./assets/example-content/arrow_black_back.svg');
        }
      }
    }
  }

  &__body {
    flex: 1;
    width: 100%;
    // margin-top: 15px;
    display: flex;
    overflow-y: auto;
    position: relative;
  }

  &__footer {
    width: 100%;

    .footer-logo {
      display: block;
      width: $footer-image-width;
      height: $footer-image-height;
      background-image: url('./assets/example-content/logo-name.png');
      background-size: contain;
      margin: 40px auto;
      background-repeat: no-repeat;

      @media screen and (max-width: $mq-medium) {
        width: 130px;
        height: 54px;
      }
    }
  }

  @media screen and (max-width: $mq-medium) {
    margin: $margin-mobile-y auto;
    width: calc(100% - 40px);
  }

  #camera_host {
    background-color: $crest-blue;
    position: absolute;
    z-index: 2;
    border-radius: 16px;

    .registration__camera {
      .video_container {
        position: relative;

        #video {
          width: 1000px;
        }

        #camera_close_btn {
          position: absolute;
          top: 16px;
          right: 16px;
          background-image: url('./assets/example-content/camera_close.svg');
          height: 44px;
          width: 44px;
          background-size: inherit;
          background-repeat: no-repeat;
          background-position: center;
          border-radius: 2px;
          padding: 0;
          z-index: 1;
          border: none;

          &:hover {
            transform: scale(1.1);
          }
        }
      }

      #capturebtn {
        width: 375px;
        margin: auto;
        margin-top: 3px;
      }
    }
  }

  .registration-modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: $light-black;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  .registration-modal-content-details {
    background-color: $white;
    padding: 24px;
    border: 1px solid $light-red1;
    width: 90%;
    max-height: 80vh;
    max-width: 600px;
    text-align: left;
    top: 288px;
    left: 416px;
    overflow-y: auto;
    border-radius: 8px 8px 8px 8px;
    box-sizing: border-box;
  }

  .registration-modal-content-details h2 {
    margin-bottom: 24px;
    color: $dark-black;
    font-family: $registration-font;
    font-size: 26px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -0.01em;
    text-align: left;
  }

  .registration-modal-content-details p {
    color: $dark-black;
    margin-bottom: 40px;
    font-family: $registration-font;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
  }

  .registration-modal-content-details .btn-container {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 20px;
    border-radius: 2px;
    border: 1px;
  }

  .registration-modal-content-details .btn-container button {
    width: 100%;
    padding: 10px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
    color: $white;
    transition: background-color 0.3s, color 0.3s, border 0.3s;
  }

  .registration-modal-content-details .btn-container a {
    width: 100%;
    padding: 10px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
    color: $white;
    transition: background-color 0.3s, color 0.3s, border 0.3s;
  }

  .registration-modal-content-details .btn-quit {
    background-color: $red-rj;
    font-family: $registration-font;
    font-size: 16px;
    font-weight: 700;
    line-height: 26px;
    letter-spacing: -0.01em;
    text-align: center;
  }

  .registration-modal-content-details .btn-cancel {
    background-color: $blue-accent6;
    font-family: $registration-font;
    font-size: 16px;
    font-weight: 700;
    line-height: 26px;
    letter-spacing: -0.01em;
    text-align: center;
  }

  .registration-modal-content-details .btn-quit:hover {
    background-color: $white;
    color: $blue;
    border: 1px solid $blue;
  }

  .registration-modal-content-details .btn-cancel:hover {
    background-color: $white;
    color: $blue;
    border: 1px solid $blue;
  }
}

@media screen and (min-width: $mq-medium) {
  .registration-container {
    .registration-modal {
      .registration-modal-content-details {
        .btn-container {
          flex-direction: row;
        }
      }
    }
  }
}

@media screen and (min-width: $mq-medium) {
  .registration-container {
    .registration-self-steps-container {
      max-height: $containe-height;
    }
  }
}

URL: /components/raw/registration-container/registration-container.scss
Filesystem Path: src/library/layouts/registration-container/registration-container.scss
Size: 7.3 KB


        <div class="registration-container" data-modal-title='Test Are you sure you want quit' data-modal-subtitle='Subtitle for cross icon' data-modal-primary='QUIT' data-modal-secondary='cross Cancel'>
  <div id="camera_host"></div>
  <div class="registration-container__header">
    <button class="back-icon-container registration_hide"
      aria-label="back registration journey">
      <i class="back-icon"></i> <span class="back-text">BACK</span>
    </button>
    <button class="close-icon-container" aria-label="close registration journey">
      <i class="close-icon"></i>
    </button>
  </div>
  <div class="registration-container__body">
    {{render '@registration-loader'}}
    <div class="form-container">
      {{#> @partial-block}}
      Registration container
      {{/ @partial-block}}
    </div>
  </div>
  <div class="registration-container__footer">
    <i class="footer-logo"></i>
  </div>
  {{render '@registration-confirm-modal'}}
</div>

Handle: @registration-container
Preview:
- With layout
- Component only
Filesystem Path: src/library/layouts/registration-container/registration-container.hbs
References (2): @registration-loader, @registration-confirm-modal
Referenced by (2): @registration-page, @registration-payment-confirmation-page