@everymatrix/cashier-page 1.42.0 → 1.43.1

package/package.json

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

package/src/CashierPage.svelte

@@ -17,12 +17,15 @@
   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]]
@@ -57,17 +60,12 @@
   let xPlayerSessionId: string;
   let xPaymentSessionToken: string;
   let xConfirmSessionToken: string;
-  let paymentMethods: PaymentMethod[] = [];
   let selectedPaymentMethod: PaymentMethod = {} as PaymentMethod;
   let formatter = new Intl.NumberFormat(local, {minimumFractionDigits: 2 });
-  let fields = {};
-  let isLoading:boolean = false;
-  let isMethodOpen:boolean  = false;
   let displayNone:boolean = false;
   let customStylingContainer:HTMLElement;
   let widgetWidth: number;
   let mobileView: string;
-  let prepareRequest;
   let showConfirmModal:boolean = false;
   let redirectUrl: string;
   let windowRedirect: Window;
@@ -111,12 +109,20 @@
               });
     }
   }
+
+  const reinitMethod = () => {
+    showMethodDetailsPage = false;
+    selectedPaymentMethod = {} as PaymentMethod;
+  }
+
   const getPlayerSession = () => {
+    xPaymentSessionToken = '';
     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",
@@ -151,7 +157,6 @@
                 return;
               }
               xPaymentSessionToken = data.XPaymentSessionToken;
-              isLoading = false;
               window.postMessage({ type: 'StartSessionCountdown', xPaymentSessionToken }, window.location.href);
             })
             .catch(error => console.log(error))
@@ -280,6 +285,7 @@
   $: lang && setTitle();
   $: translationurl && setTranslationUrl();
   $: widgetWidth && setDevice();
+  $: xPaymentSessionToken && reinitMethod();
 </script>
 <div class={showMethodDetailsPage ? "CashierPageWidget BothSections" : "CashierPageWidget"}
      bind:this={customStylingContainer}
@@ -313,7 +319,10 @@
         ></cashier-iframe-redirect>
       </div>
     {/if}
-    <cashier-modal>
+    <cashier-modal
+          {clientstylingurl}
+          {clientstyling}
+    >
       <cashier-error
               {assetsurl}
               {translationurl}
@@ -345,7 +354,7 @@
                 {clientstylingurl}
                 {clientstyling}
         >
-          <span slot="text">{ confirmAmount && !hideAmountField ? $_(`${type.toLowerCase()}.confirmTextWithAmount`,
+          <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>
@@ -353,16 +362,29 @@
   {/if}
   {#if !errorMessage && !errorResponseCode}
     <div class="CashierPage">
+      {#if !!showverifications && showverifications !== 'false'}
+        <cashier-verifications class="CashierVerificationsMobile"
+                               {lang}
+                               {translationurl}
+                               {endpoint}
+                               {clientstylingurl}
+                               {clientstyling}
+                               {customerid}
+                               ismobileview="{mobileView}"
+                               session="{xPaymentSessionToken}"
+        ></cashier-verifications>
+      {/if}
       <div class="CashierMethodListWrapper">
         {#if !!showverifications && showverifications !== 'false'}
-          <cashier-verifications
-                  {lang}
-                  {translationurl}
-                  {endpoint}
-                  {clientstylingurl}
-                  {clientstyling}
-                  {customerid}
-                  session="{xPaymentSessionToken}"
+          <cashier-verifications class="CashierVerificationsMethodList"
+            {lang}
+            {translationurl}
+            {endpoint}
+            {clientstylingurl}
+            {clientstyling}
+            {customerid}
+            ismobileview="{mobileView}"
+            session="{xPaymentSessionToken}"
           ></cashier-verifications>
         {/if}
         <cashier-methods-list
@@ -480,6 +502,13 @@
       }
     }
   }
+  .CashierVerificationsMobile {
+    display: none;
+  }
+  .CashierVerificationsMethodList {
+    display: block;
+    border-radius: var(--mmw--border-radius-medium-plus, 6px);
+  }
   .Content {
     height: 100%;
     position: relative;
@@ -488,6 +517,8 @@
     @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;
     }
@@ -495,10 +526,12 @@
   .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 {
@@ -533,7 +566,19 @@
     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);
+  }
+
   @container deposit-page (max-width:750px) {
+    .CashierVerificationsMobile {
+      display: block;
+    }
+    .CashierVerificationsMethodList {
+      display: none;
+    }
     .CashierPage, .BothSections .CashierPage {
       flex-direction: column;
       justify-content: flex-start;