@everymatrix/cashier-method-details 1.43.3 → 1.44.0

package/package.json

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

package/src/CashierMethodDetails.svelte

@@ -252,8 +252,9 @@
   let showErrorModal = false;
   let transactionId = '';
   let showSpinner: boolean = false;
+  let abortController = new AbortController();
 
-  $: endpoint && session && selectedpaymentmethodname && currency && reinitMethod();
+  $: endpoint && session && selectedpaymentmethodname && currency && initMethod();
   $: clientstyling && customStylingContainer && setClientStyling();
   $: clientstylingurl && customStylingContainer && setClientStylingURL();
   $: lang && setActiveLanguage();
@@ -262,7 +263,7 @@
   $: fields.length && qrCodeContainer.length && generateQr();
   $: fields.length && flatpickrEl.length && createDatePicker();
 
-  const reinitMethod = () => {
+  const initMethod = () => {
     if (flatpickrEl.length) {
       flatpickrEl.forEach(el => {
         if (!el) {
@@ -305,6 +306,12 @@
     })
   }
 
+  const reinitMethod = (e) => {
+    if (abortController?.signal?.aborted && selectedpaymentmethodname === e.detail.Name) {
+      initMethod()
+    }
+  }
+
   const createDatePicker = () => {
     const dateOptions = {
       [FieldTypes.Time]: {
@@ -369,6 +376,9 @@
   });
 
   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();
@@ -386,41 +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
-        || data.ResponseCode === ResponseCode.Maintenance
-        || data.ResponseCode === ResponseCode.JwtTokenError) {
-        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.Success) {
-        errorResponseCode = data.ResponseCode;
-        return;
+        hideMethodsList();
+        window.postMessage({
+          type: 'StartSessionCountdown',
+          xPaymentSessionToken,
+          selectedPaymentMethodName: selectedpaymentmethodname
+        }, window.location.href);
       }
-      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)
+    }).finally(() => { showSpinner = signal.aborted })
+  }
+
+  const abortPaymentFetch = ():void => {
+    if (abortController) {
+      abortController.abort();
+    }
   }
 
   const setClientStyling = ():void => {
@@ -466,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);
@@ -475,6 +498,7 @@
       window.removeEventListener('confirmModal', confirmTxn);
       window.removeEventListener('closeIframe', closeIframe);
       window.removeEventListener('notificationButtonClick', retryRedirect);
+      window.removeEventListener('selectPayMeth', reinitMethod, false)
       window.removeEventListener('message', messageHandler);
     }
   });
@@ -594,6 +618,9 @@
   }
 
   const hidePaymentDetails = () => {
+    if (showSpinner) {
+      abortPaymentFetch()
+    }
     dispatchEvent(new CustomEvent('hidePaymentDetails', {
       detail: { hideMethodDetails: mobileView },
       bubbles: true,
@@ -797,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() ||
@@ -869,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')}"
                   >