@everymatrix/cashier-method-details 1.43.1 → 1.43.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/cashier-method-details",
-  "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/CashierMethodDetails.svelte

@@ -120,7 +120,8 @@
   enum ResponseCode {
     PlayerSessionIsNotValid = 'PlayerSessionIsNotValid',
     Success = 'Success',
-    JwtTokenError = 'JwtTokenError'
+    JwtTokenError = 'JwtTokenError',
+    Maintenance = 'Maintenance'
   }
 
   const VISIBLE_FIELD_TYPES: string[] = 'Text,Number,Money,Boolean,Lookup,Date,Time,DateTime,Password,Label,Link,QRCode'.split(',');
@@ -218,13 +219,11 @@
   let selectedPaymentMethod: PaymentMethod = {} as PaymentMethod;
   let fields: PaymentMethodDetails[] = [];
   let prepareFields = {};
-  let isLoading:boolean = false;
-  let isMethodOpen:boolean  = false;
-  let displayNone:boolean = false;
-  let customStylingContainer:HTMLElement;
+  let displayNone: boolean = false;
+  let customStylingContainer: HTMLElement;
   let prepareRequest;
-  let showConfirmModal:boolean = false;
-  let showReceiptPage:boolean = false;
+  let showConfirmModal: boolean = false;
+  let showReceiptPage: boolean = false;
   let redirectUrl: string;
   let windowRedirect: Window;
   let showRedirectNotification: boolean;
@@ -239,9 +238,7 @@
   let qrCodeScriptSrc: string = 'https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js';
   let blankPageTarget: string = '_blank';
   let externalLink: string = '';
-  let mobileView:boolean = false;
-  let userAgent:string = window.navigator.userAgent;
-  let mediaQuery = window.matchMedia('(max-width: 750px)');
+  let mobileView: boolean = false;
   let innerWidth: number;
   let formatter = new Intl.NumberFormat(local, {minimumFractionDigits: 2 });
   let amountError = '';
@@ -254,7 +251,8 @@
   let isDisabled: boolean;
   let showErrorModal = false;
   let transactionId = '';
-  let showSpinner: boolean = true;
+  let showSpinner: boolean = false;
+
   $: endpoint && session && selectedpaymentmethodname && currency && reinitMethod();
   $: clientstyling && customStylingContainer && setClientStyling();
   $: clientstylingurl && customStylingContainer && setClientStylingURL();
@@ -264,7 +262,6 @@
   $: fields.length && qrCodeContainer.length && generateQr();
   $: fields.length && flatpickrEl.length && createDatePicker();
 
-
   const reinitMethod = () => {
     if (flatpickrEl.length) {
       flatpickrEl.forEach(el => {
@@ -347,9 +344,11 @@
       })
     });
   }
+
   const setActiveLanguage = ():void => {
     setLocale(lang);
   }
+
   const setTranslationUrl = () => {
     let url:string = translationurl;
     if (url) {
@@ -370,6 +369,7 @@
   });
 
   const getPaymentDetails = () => {
+    showSpinner = true;
     const url:URL = new URL(`${endpoint}/v1/player/${customerid}/payment/GetPaymentMethod`);
     const headers = new Headers();
     headers.append("accept", "application/json");
@@ -390,18 +390,13 @@
         window.postMessage({type: 'ShowSessionError', error: data.error}, window.location.href)
         return;
       }
-      if (data.ResponseCode === ResponseCode.PlayerSessionIsNotValid) {
-        errorResponseCode = data.ResponseCode;
-        setErrorResponseCode();
-        return;
-      }
-
-      if (data.ResponseCode === ResponseCode.JwtTokenError) {
+      if (data.ResponseCode === ResponseCode.PlayerSessionIsNotValid
+        || data.ResponseCode === ResponseCode.Maintenance
+        || data.ResponseCode === ResponseCode.JwtTokenError) {
         errorResponseCode = data.ResponseCode;
         setErrorResponseCode();
         return;
       }
-
       if (data.ResponseCode !== ResponseCode.Success) {
         errorResponseCode = data.ResponseCode;
         return;
@@ -546,23 +541,17 @@
         postMessage({type: 'ShowSessionError', error: data.error}, window.location.href)
         return;
       }
-      if (data.ResponseCode === ResponseCode.PlayerSessionIsNotValid) {
-        errorResponseCode = data.ResponseCode
-        setErrorResponseCode();
-        return;
-      }
-
-      if (data.ResponseCode === ResponseCode.JwtTokenError) {
-        errorResponseCode = data.ResponseCode
-        setErrorResponseCode();
-        return;
-      }
-
       if (data.ResponseCode !== ResponseCode.Success) {
         errorResponseCode = data.ResponseCode
         isProcessingTxn = false;
         toggleDisableActionOnPage();
-        showModal()
+        if (data.ResponseCode === ResponseCode.PlayerSessionIsNotValid
+          || data.ResponseCode === ResponseCode.Maintenance
+          || data.ResponseCode === ResponseCode.JwtTokenError) {
+          setErrorResponseCode();
+        } else {
+          showModal()
+        }
         return;
       }
       xPaymentSessionToken = data.XPaymentSessionToken;
@@ -577,16 +566,20 @@
   const  setErrorResponseCode = () => {
     window.postMessage({type: 'ErrorResponseCode', errorResponseCode}, window.location.href);
   }
+
   const setConfirmModalInfo = () => {
     window.postMessage({type:'ShowConfirmModal', showConfirmModal, editedAmount, hideAmountField: selectedPaymentMethod.HideAmountField}, window.location.href);
   }
+
   const setRedirectInfo = () => {
     window.postMessage({type: 'RedirectInfo', redirectMode, redirectUrl}, window.location.href);
   }
+
   const showModal = () => {
     showErrorModal = true;
     window.postMessage({ type: 'ShowCashierModal', modalErrorMessage: errorResponseCode}, window.location.href)
   }
+
   const backToMethodList = () => {
     dispatchEvent(new CustomEvent('backToMethodList', {
       bubbles: true,
@@ -617,14 +610,17 @@
       composed: true
     }));
   }
+
   const closeIframe = () => {
     redirectUrl = null;
     showReceiptPage = true;
     setRedirectInfo();
   }
+
   const closeModal = () => {
     showConfirmModal = false;
   }
+
   const confirmTxn = () => {
     isProcessingTxn = true;
     const url:URL = new URL(`${endpoint}/v1/player/${customerid}/payment/GetPaymentConfirm`);
@@ -642,23 +638,17 @@
       })
     }
     fetch(url, requestParams).then((res) => res.json()).then(data => {
-      if(data.ResponseCode === ResponseCode.PlayerSessionIsNotValid) {
-        errorResponseCode = data.ResponseCode
-        setErrorResponseCode();
-        return;
-      }
-
-      if(data.ResponseCode === ResponseCode.JwtTokenError) {
-        errorResponseCode = data.ResponseCode
-        setErrorResponseCode();
-        return;
-      }
-
       if (data.ResponseCode !== ResponseCode.Success) {
-        errorResponseCode = data.ResponseCode;
+        errorResponseCode = data.ResponseCode
         isProcessingTxn = false;
         toggleDisableActionOnPage();
-        showModal();
+        if (data.ResponseCode === ResponseCode.PlayerSessionIsNotValid
+          || data.ResponseCode === ResponseCode.Maintenance
+          || data.ResponseCode === ResponseCode.JwtTokenError) {
+          setErrorResponseCode();
+        } else {
+          showModal()
+        }
         return;
       }
       xPaymentSessionToken = data.XPaymentSessionToken;
@@ -1048,7 +1038,7 @@
             hidebuttons="{`${!mobileView}`}"
             errorcode={errorResponseCode}
     >
-      <div slot="button" class="ModalButton" on:click={backToMethodList}>{$_('backToMethodList')}</div>
+      <button slot="button" class="CashierErrorButton" on:click={backToMethodList}>{$_('backToMethodList')}</button>
     </cashier-error>
   {/if}
 </div>
@@ -1333,6 +1323,27 @@
       background: var(--mmw--color-main-button-hover, #71B11B);
     }
   }
+  .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);
+    }
+  }
   .QRCode {
     width: 250px;
     margin: auto;
@@ -1393,7 +1404,7 @@
         display: block;
       }
     }
-}
+  }
   .DateInput {
     position: relative;
     .MobileDateInput {
@@ -1449,7 +1460,7 @@
     position: absolute;
     left: 0;
     right: 0;
-    z-index: 99;
+    z-index: 3;
     background-color: var(--emw--color-white, #fff);
     border: 1px solid var(--mmw--color-grey-105, #E8E9EB);
     border-radius: var(--emw--border-radius-medium, 4px);