@everymatrix/cashier-method-details 1.43.2 → 1.43.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/cashier-method-details",
-  "version": "1.43.2",
+  "version": "1.43.4",
   "main": "index.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0477411e57fe6c3eda8ff28059aa540dcada8ae0"
+  "gitHead": "8464c47cb49b4ffa1c9debfac3a7dfc3097cf57a"
 }

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,8 +251,10 @@
   let isDisabled: boolean;
   let showErrorModal = false;
   let transactionId = '';
-  let showSpinner: boolean = true;
-  $: endpoint && session && selectedpaymentmethodname && currency && reinitMethod();
+  let showSpinner: boolean = false;
+  let abortController = new AbortController();
+
+  $: endpoint && session && selectedpaymentmethodname && currency && initMethod();
   $: clientstyling && customStylingContainer && setClientStyling();
   $: clientstylingurl && customStylingContainer && setClientStylingURL();
   $: lang && setActiveLanguage();
@@ -264,8 +263,7 @@
   $: fields.length && qrCodeContainer.length && generateQr();
   $: fields.length && flatpickrEl.length && createDatePicker();
 
-
-  const reinitMethod = () => {
+  const initMethod = () => {
     if (flatpickrEl.length) {
       flatpickrEl.forEach(el => {
         if (!el) {
@@ -308,6 +306,12 @@
     })
   }
 
+  const reinitMethod = (e) => {
+    if (abortController?.signal?.aborted && selectedpaymentmethodname === e.detail.Name) {
+      initMethod()
+    }
+  }
+
   const createDatePicker = () => {
     const dateOptions = {
       [FieldTypes.Time]: {
@@ -347,9 +351,11 @@
       })
     });
   }
+
   const setActiveLanguage = ():void => {
     setLocale(lang);
   }
+
   const setTranslationUrl = () => {
     let url:string = translationurl;
     if (url) {
@@ -370,6 +376,10 @@
   });
 
   const getPaymentDetails = () => {
+    abortPaymentFetch();
+    abortController = new AbortController();
+    const signal = abortController.signal;
+    showSpinner = true;
     const url:URL = new URL(`${endpoint}/v1/player/${customerid}/payment/GetPaymentMethod`);
     const headers = new Headers();
     headers.append("accept", "application/json");
@@ -386,46 +396,53 @@
       })
     }
     fetch(url, requestParams).then(res => res.json()).then(data => {
-      if (data.error) {
-        window.postMessage({type: 'ShowSessionError', error: data.error}, window.location.href)
-        return;
-      }
-      if (data.ResponseCode === ResponseCode.PlayerSessionIsNotValid) {
-        errorResponseCode = data.ResponseCode;
+      if (!signal.aborted) {
+        if (data.error) {
+          window.postMessage({type: 'ShowSessionError', error: data.error}, window.location.href)
+          return;
+        }
+        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;
+        }
+        xPaymentSessionToken = data.XPaymentSessionToken;
+        selectedPaymentMethod = data.PaymentMethod;
+        editedAmount = Number(amount);
+        if (!selectedPaymentMethod.HideAmountField) {
+          validateAmount();
+        } else {
+          amountError = '';
+        }
+        fields = selectedPaymentMethod.Fields && selectedPaymentMethod.Fields.map(field => new PaymentMethodDetails(field));
+        fields.forEach(field => {
+          if (field?.defaultValue) {
+            prepareFields[field.name] = field.defaultValue;
+          }
+          validateField(field);
+        })
+        setConfirmModalInfo();
         setErrorResponseCode();
-        return;
-      }
-
-      if (data.ResponseCode === ResponseCode.JwtTokenError) {
-        errorResponseCode = data.ResponseCode;
-        setErrorResponseCode();
-        return;
+        hideMethodsList();
+        window.postMessage({
+          type: 'StartSessionCountdown',
+          xPaymentSessionToken,
+          selectedPaymentMethodName: selectedpaymentmethodname
+        }, window.location.href);
       }
+    }).finally(() => { showSpinner = signal.aborted })
+  }
 
-      if (data.ResponseCode !== ResponseCode.Success) {
-        errorResponseCode = data.ResponseCode;
-        return;
-      }
-      xPaymentSessionToken = data.XPaymentSessionToken;
-      selectedPaymentMethod = data.PaymentMethod;
-      editedAmount = Number(amount);
-      if (!selectedPaymentMethod.HideAmountField) {
-        validateAmount();
-      } else {
-        amountError = '';
-      }
-      fields = selectedPaymentMethod.Fields && selectedPaymentMethod.Fields.map(field => new PaymentMethodDetails(field));
-      fields.forEach(field => {
-        if (field?.defaultValue) {
-          prepareFields[field.name] = field.defaultValue;
-        }
-        validateField(field);
-      })
-      setConfirmModalInfo();
-      setErrorResponseCode();
-      hideMethodsList();
-      window.postMessage({ type: 'StartSessionCountdown', xPaymentSessionToken, selectedPaymentMethodName: selectedpaymentmethodname }, window.location.href);
-    }).finally(() => showSpinner = false)
+  const abortPaymentFetch = ():void => {
+    if (abortController) {
+      abortController.abort();
+    }
   }
 
   const setClientStyling = ():void => {
@@ -471,6 +488,7 @@
     window.addEventListener('confirmModal', confirmTxn, false);
     window.addEventListener('closeIframe', closeIframe, false);
     window.addEventListener('notificationButtonClick', retryRedirect, false);
+    window.addEventListener('selectPayMeth', reinitMethod, false)
     document.addEventListener('click',closeAllLookups);
     window.addEventListener('message', messageHandler, false);
     dayjs.extend(customParseFormat);
@@ -480,6 +498,7 @@
       window.removeEventListener('confirmModal', confirmTxn);
       window.removeEventListener('closeIframe', closeIframe);
       window.removeEventListener('notificationButtonClick', retryRedirect);
+      window.removeEventListener('selectPayMeth', reinitMethod, false)
       window.removeEventListener('message', messageHandler);
     }
   });
@@ -546,23 +565,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 +590,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,
@@ -601,6 +618,9 @@
   }
 
   const hidePaymentDetails = () => {
+    if (showSpinner) {
+      abortPaymentFetch()
+    }
     dispatchEvent(new CustomEvent('hidePaymentDetails', {
       detail: { hideMethodDetails: mobileView },
       bubbles: true,
@@ -617,14 +637,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 +665,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;
@@ -807,6 +824,12 @@
     return ''
   }
 
+  const keydownHandler = (event: KeyboardEvent) => {
+    const invalidKeys = ['+','-','e','E'];
+    if (invalidKeys.includes(event.key)) {
+      event.preventDefault();
+    }
+  }
   const validateAmount = () => {
     amountError = emptyAmountError() || minAmountError() ||
             maxAmountError() || amountMultiplierError() ||
@@ -879,6 +902,7 @@
                   <input type="number"
                          bind:value={editedAmount}
                          on:input={() => validateAmount()}
+                         on:keydown={(event) => keydownHandler(event)}
                          on:blur={() => {showError['amount'] = true; validateAmount()}}
                          placeholder="{$_('amountPlaceholder')}"
                   >
@@ -1048,7 +1072,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 +1357,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 +1438,7 @@
         display: block;
       }
     }
-}
+  }
   .DateInput {
     position: relative;
     .MobileDateInput {
@@ -1449,7 +1494,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);