@everymatrix/cashier-page 1.44.0 → 1.45.0

package/src/CashierPage.svelte

@@ -1,669 +0,0 @@
-<svelte:options tag={null} />
-<script lang="ts">
-  import {onMount} from "svelte";
-  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
-  import {TRANSLATIONS} from './translations';
-
-  import type {PaymentMethod} from "./CashierPage.types";
-  import {TxnChannel, TxnType, ResponseCode} from "./CashierPage.types";
-  import errorSessionImage from  './assets/session-expired-icon.png';
-  import maintenanceImage from  './assets/maintenance.png';
-
-  import '@everymatrix/cashier-header';
-  import '@everymatrix/cashier-spinner';
-  import '@everymatrix/cashier-verifications';
-  import '@everymatrix/cashier-methods-list';
-  import '@everymatrix/cashier-method-details';
-  import '@everymatrix/cashier-error';
-  import '@everymatrix/cashier-modal';
-  import '@everymatrix/cashier-confirm-modal';
-  import '@everymatrix/cashier-iframe-redirect';
-  import '@everymatrix/cashier-session-expiration-modal';
-  import dayjs from 'dayjs';
-  import utc from 'dayjs/plugin/utc';
-  dayjs.extend(utc);
-
-  enum RedirectionModeStringEnum {
-    Default = 'Default',
-    RedirectWithRetry = 'Redirect'
-  }
-
-  const mapReducer = (arr, [keys, val]) => [
-    ...arr,
-    ...(Array.isArray(keys) ? [...keys.map(key => [key, val])] : [[keys, val]]
-    )
-  ];
-  const redirectModeMap = new Map([
-    [['Default', 0], RedirectionModeStringEnum.Default],
-    [['Redirect', 1], RedirectionModeStringEnum.RedirectWithRetry]
-  ].reduce(mapReducer, []));
-
-  export let endpoint: string;
-  export let session: string;
-  export let lang: string = 'en';
-  export let local: string = 'en-US';
-  export let translationurl: string;
-  export let successurl: string;
-  export let failurl: string;
-  export let cancelurl: string;
-  export let customerid: string;
-  export let currency: string;
-  export let amount: number;
-  export let assetsurl: string;
-  export let type: string = TxnType.Deposit;
-  export let channel: string = TxnChannel.Desktop;
-  export let showheader: string = 'true';
-  export let numberofmethodsshown: string;
-  export let clientstyling: string = '';
-  export let clientstylingurl: string = '';
-  export let showsessionexpirationmodal: string = 'true';
-  export let showverifications: string = 'true';
-
-  let xPlayerSessionId: string;
-  let xPaymentSessionToken: string;
-  let xConfirmSessionToken: string;
-  let selectedPaymentMethod: PaymentMethod = {} as PaymentMethod;
-  let formatter = new Intl.NumberFormat(local, {minimumFractionDigits: 2 });
-  let displayNone:boolean = false;
-  let customStylingContainer:HTMLElement;
-  let widgetWidth: number;
-  let mobileView: string;
-  let showConfirmModal:boolean = false;
-  let redirectUrl: string;
-  let windowRedirect: Window;
-  let showRedirectNotification: boolean;
-  let showRetryNotification: boolean;
-  let isProcessingTxn: boolean;
-  let isTranslationLoaded: boolean;
-  let showMethodDetailsPage: boolean = false;
-  let errorMessage: string;
-  let errorResponseCode: string;
-  let confirmAmount: number;
-  let hideAmountField: boolean;
-  let redirectMode: RedirectionModeStringEnum;
-  let modalErrorMessage: string;
-  let title: string;
-  let showHeaderBack: string;
-  let showSpinner = true;
-  const setActiveLanguage = ():void => {
-    setLocale(lang);
-  }
-
-  Object.keys(TRANSLATIONS).forEach((item:any):void => {
-    addNewMessages(item, TRANSLATIONS[item]);
-  });
-
-  if (!translationurl) {
-    isTranslationLoaded = true;
-  }
-  const setTranslationUrl = () => {
-    let url:string = translationurl;
-    if (url) {
-      return  fetch(url).then((res:any) => res.json())
-              .then((res) => {
-                Object.keys(res).forEach((item:any):void => {
-                  addNewMessages(item, res[item]);
-                  isTranslationLoaded = true;
-                });
-              }).catch((err:any) => {
-                isTranslationLoaded = true;
-                console.log(err);
-              });
-    }
-  }
-
-  const reinitMethod = () => {
-     showMethodDetailsPage = false;
-     selectedPaymentMethod = {} as PaymentMethod;
-     setTitle()
-  }
-
-  const getPlayerSession = () => {
-    xPaymentSessionToken = '';
-    showSpinner = true
-    const url:URL = new URL(`${endpoint}/v2/player/${customerid}/payment/GetPaymentSession`);
-    const headers = new Headers();
-    headers.append("accept", "application/json");
-    headers.append("Content-Type", "application/json");
-    headers.append("X-SessionId", `${session}`);
-    headers.append("X-Client-Request-Timestamp", dayjs.utc().format("YYYY-MM-DD HH:mm:ss.SSS"));
-    const requestParams:RequestInit = {
-      method: "POST",
-      mode: "cors",
-      headers: headers,
-      body: JSON.stringify({
-        "Channel": channel,
-        "Type": type,
-        "SuccessUrl": successurl,
-        "CancelUrl": cancelurl,
-        "FailUrl": failurl,
-        "Language": lang,
-      })
-    };
-    fetch(url, requestParams)
-            .then(res => res.json())
-            .then(data => {
-              if (data.error) {
-                errorMessage = data.error;
-              }
-              if (data.ResponseCode !== ResponseCode.Success) {
-                errorResponseCode = data.ResponseCode;
-                setErrorResponseCode();
-                return;
-              }
-              xPaymentSessionToken = data.XPaymentSessionToken;
-              window.postMessage({ type: 'StartSessionCountdown', xPaymentSessionToken }, window.location.href);
-            })
-            .catch(error => console.log(error))
-            .finally(() => showSpinner = false)
-  }
-
-  const setTitle = () => {
-     if (showMethodDetailsPage && isMobileWidth() && !errorResponseCode) {
-       title = selectedPaymentMethod.Label || selectedPaymentMethod.Name;
-       showHeaderBack = 'true'
-     } else {
-       title = `header.${type.toLowerCase()}`
-       showHeaderBack = 'false'
-     }
-  }
-  const setDevice = () => {
-    mobileView = isMobileWidth().toString();
-    setTitle()
-  }
-
-  const isMobileWidth = () => {
-    return widgetWidth < 750
-  }
-
-  const selectPayMeth = (e) => {
-    selectedPaymentMethod.Name = e.detail.Name;
-    selectedPaymentMethod.Label = e.detail.Label
-    showMethodDetailsPage = true;
-    setTitle()
-  }
-
-  const setErrorResponseCode = () => {
-    window.postMessage({type: 'ErrorResponseCode', errorResponseCode}, window.location.href);
-  }
-
-  const setClientStyling = ():void => {
-    let sheet = document.createElement('style');
-    sheet.innerHTML = clientstyling;
-    customStylingContainer.appendChild(sheet);
-  }
-
-  const setClientStylingURL = ():void => {
-    displayNone = true;
-
-    let url:URL = new URL(clientstylingurl);
-    let cssFile:HTMLElement = document.createElement('style');
-
-    fetch(url.href)
-            .then((res:any) => res.text())
-            .then((data:any) => {
-              cssFile.innerHTML = data
-
-              setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
-              setTimeout(() => { displayNone = false; }, 500);
-            });
-  }
-
-  const hideMethodDetails = (e) => {
-    showMethodDetailsPage = !e.detail.hideMethodDetails
-    setTitle()
-  }
-
-  onMount(() => {
-    window.addEventListener('selectPayMeth', selectPayMeth, false);
-    window.addEventListener('hidePaymentDetails', hideMethodDetails, false);
-    window.addEventListener('message', messageHandler, false);
-    window.addEventListener('closeModal', closeModal, false);
-
-    return () => {
-      window.removeEventListener('hidePaymentDetails', hideMethodDetails);
-      window.removeEventListener('selectPayMeth', selectPayMeth);
-      window.removeEventListener('message', messageHandler);
-      window.removeEventListener('closeModal', closeModal);
-    }
-  });
-
-  const preventDefault = (e) => {
-    e.preventDefault();
-  }
-
-  const hideModal = () => {
-    window.postMessage({ type: 'HideCashierModal' }, window.location.href);
-  }
-
-  const renewSession = () => {
-    errorResponseCode = null;
-    setErrorResponseCode();
-    getPlayerSession();
-  }
-
-  const closeModal = () => {
-    showConfirmModal = false;
-  }
-
-  const messageHandler = (e:any) => {
-    if (e.data.type === 'ShowSessionError') {
-      errorMessage = e.data.error;
-    }
-    if (e.data.type === 'ToggleDisableActionOnPage') {
-      isProcessingTxn = e.data.disable;
-    }
-    if (e.data.type === 'ErrorResponseCode') {
-      errorResponseCode = e.data.errorResponseCode;
-      setTitle();
-    }
-    if (e.data.type === 'ShowConfirmModal') {
-      showConfirmModal = e.data.showConfirmModal;
-      confirmAmount = e.data.editedAmount;
-      hideAmountField = e.data.hideAmountField;
-    }
-    if (e.data.type === 'RedirectInfo') {
-      redirectUrl = e.data.redirectUrl;
-      redirectMode = e.data.redirectMode;
-      setTitle();
-    }
-    if (e.data.type === 'ShowCashierModal') {
-      modalErrorMessage = e.data.modalErrorMessage;
-    }
-    if (e.data.type === 'SessionExpired') {
-      errorResponseCode = ResponseCode.JwtTokenError;
-      setErrorResponseCode();
-    }
-  }
-  $: endpoint && session && customerid && lang && channel && type && successurl && failurl && cancelurl && getPlayerSession();
-  $: clientstyling && customStylingContainer && setClientStyling();
-  $: clientstylingurl && customStylingContainer && setClientStylingURL();
-  $: lang && setActiveLanguage();
-  $: lang && setTitle();
-  $: lang && translationurl && setTranslationUrl();
-  $: widgetWidth && setDevice();
-  $: xPaymentSessionToken && reinitMethod();
-</script>
-{#if showSpinner}
-  <cashier-spinner
-    {clientstylingurl}
-    {clientstyling}
-  ></cashier-spinner>
-{/if}
-<div class={showMethodDetailsPage ? "CashierPageWidget BothSections" : "CashierPageWidget"}
-     class:MobileView={mobileView === 'true'}
-     bind:this={customStylingContainer}
-     bind:clientWidth={widgetWidth}
->
-  {#if isProcessingTxn}
-    <div class="DisablePage"></div>
-  {/if}
-  {#if lang && isTranslationLoaded}
-    {#if !!showheader && showheader !== 'false'}
-      <cashier-header class="Header"
-              {lang}
-              {translationurl}
-              {clientstylingurl}
-              {title}
-              {clientstyling}
-              showbackbutton="{showHeaderBack}"
-      >
-      </cashier-header>
-    {/if}
-    {#if redirectUrl && redirectMode === RedirectionModeStringEnum.Default}
-      <div class="IframeRedirect">
-        <cashier-iframe-redirect
-                {lang}
-                {translationurl}
-                {title}
-                {clientstylingurl}
-                {clientstyling}
-                showbackbutton="{showheader}"
-                iframeurl="{redirectUrl}"
-        ></cashier-iframe-redirect>
-      </div>
-    {/if}
-    <cashier-modal
-          {clientstylingurl}
-          {clientstyling}
-    >
-      <cashier-error
-        {assetsurl}
-        {translationurl}
-        {clientstylingurl}
-        {clientstyling}
-        {lang}
-        errorcode={modalErrorMessage}
-      >
-        {#if modalErrorMessage}
-          <button slot="button" class="CashierErrorButton" on:click={hideModal}>{$_('closeModal')}</button>
-        {/if}
-      </cashier-error>
-    </cashier-modal>
-      {#if showsessionexpirationmodal === 'true'}
-         <cashier-session-expiration-modal
-                {assetsurl}
-                {translationurl}
-                {clientstylingurl}
-                {clientstyling}
-                {lang}
-                {local}
-                {endpoint}
-                {currency}
-                {customerid}
-                 selectedpaymentmethodname="{selectedPaymentMethod.Name}"
-         >
-         </cashier-session-expiration-modal>
-      {/if}
-      {#if showConfirmModal}
-        <cashier-confirm-modal
-                {clientstylingurl}
-                {clientstyling}
-        >
-          <span class="CashierConfirmModalText" slot="text">{ confirmAmount && !hideAmountField ? $_(`${type.toLowerCase()}.confirmTextWithAmount`,
-                  { values:{ amount: formatter.format(confirmAmount), currency }}): $_(`${type.toLowerCase()}.confirmText`)}</span>
-          <div slot="confirm">{$_(`${type.toLowerCase()}.confirmButton`)}</div>
-        </cashier-confirm-modal>
-      {/if}
-  {/if}
-  {#if !errorMessage && !errorResponseCode}
-    <div class="CashierPage">
-      {#if !!showverifications && showverifications !== 'false' && mobileView === 'true'}
-        <cashier-verifications class="CashierVerificationsMobile"
-                               {lang}
-                               {translationurl}
-                               {endpoint}
-                               {clientstylingurl}
-                               {clientstyling}
-                               {customerid}
-                               ismobileview="{mobileView}"
-                               session="{xPaymentSessionToken}"
-        ></cashier-verifications>
-      {/if}
-      <div class="CashierMethodListWrapper">
-        {#if !!showverifications && showverifications !== 'false' && mobileView !== 'true'}
-          <cashier-verifications class="CashierVerificationsMethodList"
-            {lang}
-            {translationurl}
-            {endpoint}
-            {clientstylingurl}
-            {clientstyling}
-            {customerid}
-            ismobileview="{mobileView}"
-            session="{xPaymentSessionToken}"
-          ></cashier-verifications>
-        {/if}
-        <cashier-methods-list
-                {lang}
-                {local}
-                {translationurl}
-                {endpoint}
-                {customerid}
-                {currency}
-                {numberofmethodsshown}
-                {clientstylingurl}
-                {clientstyling}
-                {assetsurl}
-                session="{xPaymentSessionToken}"
-                ismobileview="{mobileView}"
-        ></cashier-methods-list>
-      </div>
-      <div class="CashierMethodDetailsWrapper">
-        <cashier-method-details
-                {lang}
-                {local}
-                {translationurl}
-                {endpoint}
-                {customerid}
-                {currency}
-                {amount}
-                {assetsurl}
-                {type}
-                {clientstylingurl}
-                {clientstyling}
-                ismobileview="{mobileView}"
-                selectedpaymentmethodname="{selectedPaymentMethod.Name}"
-                session="{xPaymentSessionToken}"
-                playersession="{session}"
-        ></cashier-method-details>
-      </div>
-    </div>
-    {:else}
-    <cashier-error
-          {lang}
-          {assetsurl}
-          {translationurl}
-          {clientstylingurl}
-          {clientstyling}
-          hidebuttons= {errorResponseCode !== ResponseCode.JwtTokenError}
-          errorcode={errorResponseCode}
-    >
-      {#if !errorResponseCode}
-        <span slot="text">{errorMessage}</span>
-      {/if}
-      {#if errorResponseCode === ResponseCode.JwtTokenError}
-        <div slot="icon">
-          {#if assetsurl}
-            <img src="{`${assetsurl}/session-expired-icon.png`}" width="300px" alt="error">
-          {:else}
-            <img src={errorSessionImage}  width="300px" alt="error">
-          {/if}
-        </div>
-        <span slot="title">{$_('sessionExpiredTitle')}</span>
-        <span slot="text">{$_('sessionExpiredText')}</span>
-        <button slot="button" class="CashierErrorButton" on:click={renewSession}>{$_('continueSession')}</button>
-      {/if}
-      {#if errorResponseCode === ResponseCode.Maintenance}
-        <div slot="icon">
-          {#if assetsurl}
-            <img src="{`${assetsurl}/maintenance.png`}" width="300px" alt="error">
-          {:else}
-            <img src={maintenanceImage}  width="300px" alt="error">
-          {/if}
-        </div>
-        <span slot="title">{$_('maintenanceTitle')}</span>
-        <span slot="text">{$_('maintenanceText')}</span>
-      {/if}
-    </cashier-error>
-  {/if}
-</div>
-
-
-<style lang="scss">
-  @keyframes loading-spinner {
-    from {
-      transform: rotate(0deg)
-    }
-    to {
-      transform: rotate(360deg)
-    }
-  }
-  @mixin container-height {
-    height: 100%;
-    overflow: auto;
-    box-sizing: border-box;
-    scrollbar-gutter: stable both-edges;
-  }
-  .DisablePage {
-    container-type: inline-size;
-    container-name: confirm-modal;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    z-index: 4;
-    top: 0;
-    left: 0;
-    background-color: transparent;
-  }
-  .CashierPageWidget {
-    container-type: inline-size;
-    container-name: deposit-page;
-    height: 100%;
-    position: relative;
-    box-sizing: border-box;
-    .CashierMethodDetailsWrapper {
-      display: none;
-    }
-    &:has(.Header) {
-      border-radius: 6px;
-      border: 1px solid var(--mmw--color-grey-105, #E8E9EB);
-      box-sizing: border-box;
-      .IframeRedirect {
-        border-radius: 6px;
-      }
-      .Content, .CashierPage, .DisablePage {
-        height: calc(100% - var(--mmw--header-height, 32px));
-      }
-      .DisablePage {
-        top: var(--mmw--header-height, 32px);
-      }
-      cashier-error {
-        height: calc(100% - 32px);
-      }
-    }
-  }
-  .CashierVerificationsMobile {
-    display: none;
-  }
-  .CashierVerificationsMethodList {
-    display: block;
-    border-radius: var(--mmw--border-radius-medium-plus, 6px);
-  }
-  .Content {
-    height: 100%;
-    position: relative;
-  }
-  .CashierMethodListWrapper {
-    @include container-height;
-    padding: var(--emw--spacing-large, 20px) var(--emw--spacing-x-small, 10px) var(--emw--spacing-small, 12px) var(--emw--spacing-x-small, 10px);
-    width: 50%;
-    display: flex;
-    flex-direction: column;
-    &::-webkit-scrollbar {
-      border-right: none;
-    }
-  }
-  .BothSections {
-    .CashierMethodDetailsWrapper {
-      @include container-height;
-      padding: var(--emw--spacing-large, 20px) var(--emw--spacing-x-small, 10px) var(--emw--spacing-small, 12px) var(--emw--spacing-x-small, 10px);
-      display: block;
-      transition: all 1s;
-      width: 50%;
-      justify-content: center;
-      position: relative;
-    }
-    .CashierMethodListWrapper {
-      &::-webkit-scrollbar {
-        border-right: 1px solid var(--emw--color-gray-100, #E0E0E0 );
-      }
-    }
-  }
-  .CashierPage {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    height: inherit;
-  }
-
-  cashier-method-details {
-    width: 0;
-  }
-  cashier-iframe-redirect {
-    height: inherit;
-    width: inherit;
-  }
-  cashier-error {
-    height: inherit;
-  }
-
-  .IframeRedirect {
-    display: flex;
-    position: absolute;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    z-index: 4;
-    top: 0;
-    left: 0;
-    background-color: var(--emw--color-white, #FFF);
-  }
-
-  .CashierConfirmModalText {
-    color: var(--mmw--color-grey-10, #111);
-    font-size: var(--emw--font-size-small, 14px);
-  }
-
-
-  .CashierErrorButton {
-    width: 100%;
-    height: 36px;
-    color: var(--emw--color-white, #FFF);
-    text-align: center;
-    cursor: pointer;
-    font-size: var(--emw--font-size-x-small, 12px);
-    font-style: normal;
-    font-weight: var(--emw--font-weight-semibold, 500);
-    font-family: inherit;
-    line-height: 36px;
-    border: none;
-    border-radius: var(--emw--border-radius-medium, 4px);
-    background: var(--emw--color-primary, #7EC51E);
-    &:hover {
-      background: var(--mmw--color-main-button-hover, #71B11B);
-    }
-    &:active {
-      background: var(--mmw--color-main-button-active, #5C950F);
-    }
-  }
-  .MobileView {
-    .CashierVerificationsMobile {
-      display: block;
-    }
-    .CashierVerificationsMethodList {
-      display: none;
-    }
-    &.BothSections .CashierMethodListWrapper {
-      display: none;
-    }
-  }
-
-  @container deposit-page (max-width:750px) {
-    .CashierPage, .BothSections .CashierPage {
-      flex-direction: column;
-      justify-content: flex-start;
-      gap: 0;
-      cashier-methods-list, cashier-method-details, .CashierMethodDetailsWrapper {
-        width: 100%;
-        height: 100%;
-      }
-    }
-    cashier-method-details {
-      display: none;
-    }
-    .BothSections cashier-method-details {
-      display: flex;
-    }
-    .BothSections .CashierMethodListWrapper {
-      display: none;
-    }
-    .CashierMethodListWrapper {
-      width: 100%;
-    }
-  }
-  ::-webkit-scrollbar {
-    width: 4px;
-  }
-  ::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  ::-webkit-scrollbar-thumb {
-    background: var(--mmw--color-grey-105, #E8E9EB);
-  }
-  ::-webkit-scrollbar-thumb:hover {
-    background: var(--mmw--color-grey-290, #666);
-  }
-
-</style>