Registration Container

Ready

HTML
Notes
Context
Assets
View
Info


        
        <div class="registration-container">
    <div id="camera_host"></div>
    <div class="registration-container__header">
        <div class="back-icon-container registration_hide">
            <i class="back-icon" tabindex="0" role="button" aria-label="back registration journey"></i> <span class="back-text">BACK</span>
        </div>
        <i class="close-icon" tabindex="0" role="button" aria-label="close registration journey"></i>
    </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>
    <div 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>
    </div>

    <div id="modalPopup" class="registration-modal">
        <div class="registration-modal-content-details">
            <h2>Are you sure you want to remove junior ?</h2>
            <p>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?</p>
            <div class="btn-container">
                <a class="btn-quit" href="" style="text-decoration: none;">QUIT</a>
                <button class="btn-cancel">CANCEL</button>
            </div>
        </div>
    </div>
</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';

export default parentElement => {
  const containerCloseIcon = parentElement.querySelector(
    '.registration-container__header > .close-icon'
  );
  const modal = document.getElementById('modalPopup');
  // eslint-disable-next-line no-unused-vars
  const cancelBtn = document.querySelector('.btn-cancel');

  const backBtn = backBtnElement;

  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;
      }
      nevigateToPrevious(currentElement);
      sessionStorage.setItem(BACKCLICKED, true);
    }
  });

  // eslint-disable-next-line func-names
  containerCloseIcon.onclick = function() {
    modal.style.display = 'flex';
  };
  // eslint-disable-next-line func-names
  cancelBtn.onclick = function() {
    modal.style.display = 'none';
  };
};

URL: /components/raw/registration-container/registration-container.js
Filesystem Path: src/library/layouts/registration-container/registration-container.js
Size: 1.5 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;

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

    .back-icon,
    .close-icon {
      margin: $close-icon-y $close-icon-right $close-icon-y auto;
      height: $close-icon-height;
      width: $close-icon-width;
      cursor: pointer;
      background-size: contain;
      background-image: url('./assets/example-content/close.svg');
      transition: all 0.2s ease-in-out;
    }

    .close-icon:hover {
      transform: scale(1.25);
    }

    .back-icon-container {
      display: flex;
      align-items: center;
      width: 77px;
      height: 44px;
      margin-top: 6.5px;

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

    .back-icon-container:hover {
      .back-icon {
        background-image: url('./assets/example-content/arrow_back_hover.svg');
      }
      .back-text {
        color: white;
        font-weight: 700;
      }
    }
  }

  &__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: 6.3 KB


        <div class="registration-container">
  <div id="camera_host"></div>
  <div class="registration-container__header">
    <div class="back-icon-container registration_hide">
      <i class="back-icon" tabindex="0" role="button" aria-label="back registration journey"></i> <span class="back-text">BACK</span>
    </div>
    <i class="close-icon" tabindex="0" role="button" aria-label="close registration journey"></i>
  </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 id="modalPopup" class="registration-modal">
    <div class="registration-modal-content-details">
      <h2>Are you sure you want to remove junior ?</h2>
      <p>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?</p>
      <div class="btn-container">
        <a class="btn-quit" href="" style="text-decoration: none;">QUIT</a>
        <button class="btn-cancel">CANCEL</button>
      </div>
    </div>
  </div>
</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