@everymatrix/cashier-page 1.43.1 → 1.43.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/cashier-page",
-  "version": "1.43.1",
+  "version": "1.43.3",
   "main": "index.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e0be02e594f762ecb10851537d8690d5e66f4e5d"
+  "gitHead": "4723f5370b2d6fc913a8cf6770f9f492038e54e8"
 }

package/src/CashierPage.svelte

@@ -7,8 +7,10 @@
   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';
@@ -82,7 +84,7 @@
   let modalErrorMessage: string;
   let title: string;
   let showHeaderBack: string;
-
+  let showSpinner = true;
   const setActiveLanguage = ():void => {
     setLocale(lang);
   }
@@ -111,12 +113,14 @@
   }
 
   const reinitMethod = () => {
-    showMethodDetailsPage = false;
-    selectedPaymentMethod = {} as PaymentMethod;
+     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");
@@ -142,15 +146,6 @@
               if (data.error) {
                 errorMessage = data.error;
               }
-              if (data.ResponseCode === ResponseCode.PlayerSessionIsNotValid) {
-                errorResponseCode = data.ResponseCode;
-                setErrorResponseCode();
-                return;
-              }
-              if (data.ResponseCode === ResponseCode.JwtTokenError) {
-                errorResponseCode = data.ResponseCode;
-                setErrorResponseCode();
-              }
               if (data.ResponseCode !== ResponseCode.Success) {
                 errorResponseCode = data.ResponseCode;
                 setErrorResponseCode();
@@ -160,6 +155,7 @@
               window.postMessage({ type: 'StartSessionCountdown', xPaymentSessionToken }, window.location.href);
             })
             .catch(error => console.log(error))
+            .finally(() => showSpinner = false)
   }
 
   const setTitle = () => {
@@ -179,15 +175,18 @@
   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;
@@ -243,7 +242,6 @@
     getPlayerSession();
   }
 
-
   const closeModal = () => {
     showConfirmModal = false;
   }
@@ -277,17 +275,23 @@
       setErrorResponseCode();
     }
   }
-
   $: endpoint && session && customerid && lang && channel && type && successurl && failurl && cancelurl && getPlayerSession();
   $: clientstyling && customStylingContainer && setClientStyling();
   $: clientstylingurl && customStylingContainer && setClientStylingURL();
   $: lang && setActiveLanguage();
   $: lang && setTitle();
-  $: translationurl && setTranslationUrl();
+  $: 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}
 >
@@ -299,8 +303,8 @@
       <cashier-header class="Header"
               {lang}
               {translationurl}
-              {title}
               {clientstylingurl}
+              {title}
               {clientstyling}
               showbackbutton="{showHeaderBack}"
       >
@@ -324,14 +328,16 @@
           {clientstyling}
     >
       <cashier-error
-              {assetsurl}
-              {translationurl}
-              {clientstylingurl}
-              {clientstyling}
-              {lang}
-              errorcode={modalErrorMessage}
+        {assetsurl}
+        {translationurl}
+        {clientstylingurl}
+        {clientstyling}
+        {lang}
+        errorcode={modalErrorMessage}
       >
-      <div slot="button" class="ModalButton" on:click={hideModal}>{$_('closeModal')}</div>
+        {#if modalErrorMessage}
+          <button slot="button" class="CashierErrorButton" on:click={hideModal}>{$_('closeModal')}</button>
+        {/if}
       </cashier-error>
     </cashier-modal>
       {#if showsessionexpirationmodal === 'true'}
@@ -362,7 +368,7 @@
   {/if}
   {#if !errorMessage && !errorResponseCode}
     <div class="CashierPage">
-      {#if !!showverifications && showverifications !== 'false'}
+      {#if !!showverifications && showverifications !== 'false' && mobileView === 'true'}
         <cashier-verifications class="CashierVerificationsMobile"
                                {lang}
                                {translationurl}
@@ -375,7 +381,7 @@
         ></cashier-verifications>
       {/if}
       <div class="CashierMethodListWrapper">
-        {#if !!showverifications && showverifications !== 'false'}
+        {#if !!showverifications && showverifications !== 'false' && mobileView !== 'true'}
           <cashier-verifications class="CashierVerificationsMethodList"
             {lang}
             {translationurl}
@@ -423,7 +429,7 @@
       </div>
     </div>
     {:else}
-    <cashier-error class="Error"
+    <cashier-error
           {lang}
           {assetsurl}
           {translationurl}
@@ -445,7 +451,18 @@
         </div>
         <span slot="title">{$_('sessionExpiredTitle')}</span>
         <span slot="text">{$_('sessionExpiredText')}</span>
-        <div slot="button" class="CashierErrorButton" on:click={renewSession}>{$_('continueSession')}</div>
+        <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}
@@ -473,7 +490,7 @@
     position: absolute;
     width: 100%;
     height: 100%;
-    z-index: 100;
+    z-index: 4;
     top: 0;
     left: 0;
     background-color: transparent;
@@ -481,7 +498,7 @@
   .CashierPageWidget {
     container-type: inline-size;
     container-name: deposit-page;
-    height: inherit;
+    height: 100%;
     position: relative;
     box-sizing: border-box;
     .CashierMethodDetailsWrapper {
@@ -500,6 +517,9 @@
       .DisablePage {
         top: var(--mmw--header-height, 32px);
       }
+      cashier-error {
+        height: calc(100% - 32px);
+      }
     }
   }
   .CashierVerificationsMobile {
@@ -554,6 +574,10 @@
     height: inherit;
     width: inherit;
   }
+  cashier-error {
+    height: inherit;
+  }
+
   .IframeRedirect {
     display: flex;
     position: absolute;
@@ -561,7 +585,7 @@
     justify-content: center;
     width: 100%;
     height: 100%;
-    z-index: 100;
+    z-index: 4;
     top: 0;
     left: 0;
     background-color: var(--emw--color-white, #FFF);
@@ -572,13 +596,41 @@
     font-size: var(--emw--font-size-small, 14px);
   }
 
-  @container deposit-page (max-width:750px) {
+
+  .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;

package/src/CashierPage.types.ts

@@ -76,5 +76,6 @@ export enum TxnChannel {
 export enum ResponseCode {
     PlayerSessionIsNotValid ='PlayerSessionIsNotValid',
     Success = 'Success',
-    JwtTokenError = 'JwtTokenError'
+    JwtTokenError = 'JwtTokenError',
+    Maintenance = 'Maintenance'
 }

package/src/translations.js

@@ -5,6 +5,8 @@ export const TRANSLATIONS = {
     "continueSession": "CONTINUE",
     "sessionExpiredTitle": "Session Expired!",
     "sessionExpiredText": "Your session has ended. We apologize for any inconvenience. Please click the button to continue.",
+    "maintenanceText": "Payment Methods are currently closed for scheduled maintenance.",
+    "maintenanceTitle": "We’ll Be Back Soon",
     "deposit": {
       "makeTxnButton": "DEPOSIT",
       "confirmText": "You're going to deposit to your account",
@@ -24,6 +26,8 @@ export const TRANSLATIONS = {
     "continueSession": "CONTINUE",
     "sessionExpiredTitle": "Session Expired!",
     "sessionExpiredText": "Your session has ended. We apologize for any inconvenience. Please click the button to continue.",
+    "maintenanceText": "We are down for a scheduled maintenance and expect to be back online in a few minutes",
+    "maintenanceTitle": "We’ll Be Back Soon",
     "header": {
       "deposit": "Uplata",
       "withdraw": "Povlačenje"
@@ -45,8 +49,10 @@ export const TRANSLATIONS = {
     "loading": "Yükleniyor...",
     "closeModal": "KAPAT",
     "continueSession": "Devam et",
-    "sessionExpiredTitle": "Session Expired!",
-    "sessionExpiredText": "Your session has ended. We apologize for any inconvenience. Please click the button to continue.",
+    "sessionExpiredTitle": "Oturumun Süresi Doldu!",
+    "sessionExpiredText": 'Oturumunuz sona erdi. Herhangi bir rahatsızlıktan dolayı özür dileriz. Devam etmek için lütfen butona tıklayın.',
+    "maintenanceText": "Ödeme Yöntemleri planlanmış bakım nedeniyle şu anda kapalı.",
+    "maintenanceTitle": "Yakında Geri Döneceğiz",
     "header": {
       "deposit": "Yatır",
       "withdraw": "Çek"