@everymatrix/cashier-method-details 1.29.5 → 1.29.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/cashier-method-details",
-  "version": "1.29.5",
+  "version": "1.29.6",
   "main": "index.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f2e3f1edbe2a15979fd224f987ea52d179bb95f0"
+  "gitHead": "a67714e03295f6cdb76990ce33c8baeec7819b9f"
 }

package/src/CashierMethodDetails.svelte

@@ -162,7 +162,7 @@
   export let translationurl: string;
   export let customerid: string;
   export let currency: string;
-  export let amount: number;
+  export let amount: string;
   export let assetsurl: string;
   export let type: string = TxnType.Deposit;
   export let selectedpaymentmethodname: string;
@@ -207,6 +207,7 @@
   let editedAmount: number;
   let errorResponseCode: string;
   let isDisabled: boolean;
+  let showErrorModal = false;
 
   $: endpoint && session && selectedpaymentmethodname && currency && reinitMethod();
   $: clientstyling && customStylingContainer && setClientStyling();
@@ -236,7 +237,9 @@
     fieldValidation = {};
     qrCodeContainer = [];
     selectedPaymentMethod = null;
-    errorResponseCode = ''
+    errorResponseCode = '';
+    showErrorModal = false;
+    setErrorResponseCode();
     getPaymentDetails();
   }
 
@@ -339,11 +342,12 @@
       }
       if (data.ResponseCode !== 'Success') {
         errorResponseCode = data.ResponseCode;
+        setErrorResponseCode();
         return;
       }
       xPaymentSessionToken = data.XPaymentSessionToken;
       selectedPaymentMethod = data.PaymentMethod;
-      editedAmount = amount;
+      editedAmount = Number(amount);
       if (!selectedPaymentMethod.HideAmountField) {
         validateAmount();
       }
@@ -354,6 +358,8 @@
         }
         validateField(field);
       })
+      setConfirmModalInfo();
+      setErrorResponseCode();
       hideMethodsList();
     })
   }
@@ -384,6 +390,13 @@
     mobileView = isMobile(userAgent) || mediaQuery.matches
   }
 
+  const messageHandler = (e:any) => {
+    if (e.data.type == 'ErrorResponseCode') {
+      errorResponseCode = e.data.errorResponseCode;
+      showReceiptPage = e.data.showReceiptPage;
+    }
+  }
+
   onMount(() => {
     window.addEventListener('closeModal', closeModal, false);
     window.addEventListener('confirmModal', confirmTxn, false);
@@ -391,6 +404,7 @@
     window.addEventListener('notificationButtonClick', retryRedirect, false);
     window.addEventListener('closeCashierReceiptPage', closeReceiptPage, false);
     document.addEventListener('click',closeAllLookups);
+    window.addEventListener('message', messageHandler, false);
     dayjs.extend(customParseFormat);
 
     return () => {
@@ -399,6 +413,7 @@
       window.removeEventListener('closeIframe', closeIframe);
       window.removeEventListener('notificationButtonClick', retryRedirect);
       window.removeEventListener('closeCashierReceiptPage', closeReceiptPage);
+      window.removeEventListener('message', messageHandler);
     }
   });
 
@@ -466,6 +481,7 @@
       if (data.ResponseCode !== 'Success') {
         errorResponseCode = data.ResponseCode
         isProcessingTxn = false;
+        setErrorResponseCode();
         toggleDisableActionOnPage();
         showModal()
         return;
@@ -473,18 +489,24 @@
       xPaymentSessionToken = data.XPaymentSessionToken;
       isProcessingTxn = false;
       showConfirmModal = true;
+      setConfirmModalInfo();
       toggleDisableActionOnPage();
     })
   }
 
+  const  setErrorResponseCode = () => {
+    window.postMessage({type: 'ErrorResponseCode', errorResponseCode});
+  }
+  const setConfirmModalInfo = () => {
+    window.postMessage({type:'ShowConfirmModal', showConfirmModal, editedAmount});
+  }
+  const setRedirectInfo = () => {
+    window.postMessage({type: 'RedirectInfo', redirectMode, redirectUrl});
+  }
   const showModal = () => {
+    showErrorModal = true;
     window.postMessage({ type: 'ShowCashierModal' }, window.location.href)
   }
-
-  const hideModal = () => {
-    window.postMessage({ type: 'HideCashierModal' }, window.location.href)
-  }
-
   const backToMethodList = () => {
     dispatchEvent(new CustomEvent('backToMethodList', {
       bubbles: true,
@@ -518,6 +540,7 @@
   const closeIframe = () => {
     redirectUrl = null;
     showReceiptPage = true;
+    setRedirectInfo();
   }
   const closeModal = () => {
     showConfirmModal = false;
@@ -541,6 +564,7 @@
       if (data.ResponseCode !== 'Success') {
         errorResponseCode = data.ResponseCode;
         isProcessingTxn = false;
+        toggleDisableActionOnPage();
         showModal();
         return;
       }
@@ -549,6 +573,7 @@
       redirectMode = redirectModeMap.get(data.RedirectionMode);
       isProcessingTxn = false;
       toggleDisableActionOnPage();
+      setRedirectInfo();
       if (!redirectUrl) {
         showReceiptPage = true;
       }
@@ -565,6 +590,7 @@
     windowRedirect = window.open(redirectUrl, '_blank');
     showRedirectNotification = true;
     showRetryNotification = false;
+    setRedirectInfo();
   }
 
   const closeReceiptPage = () => {
@@ -723,7 +749,7 @@
 <div class="CashierMethodDetails" bind:this={customStylingContainer}>
   {#if selectedPaymentMethod?.Name}
     <div class="MethodsDetails">
-      {#if !showReceiptPage}
+      {#if !showReceiptPage && !errorResponseCode || (errorResponseCode && showErrorModal)}
         <form on:submit|preventDefault={prepareTxn} novalidate>
           <div class="FieldWrapper">
             <div class="FormLogo">
@@ -904,7 +930,7 @@
         </div>
       {/if}
     </div>
-  {:else if errorResponseCode}
+  {#if errorResponseCode && !showErrorModal}
     <cashier-error
             {assetsurl}
             {translationurl}
@@ -916,33 +942,7 @@
       <div slot="button" class="ModalButton" on:click={backToMethodList}>{$_('backToMethodList')}</div>
     </cashier-error>
   {/if}
-  {#if redirectUrl && redirectMode === RedirectionModeStringEnum.Default}
-    <div class="IframeRedirect">
-      <cashier-iframe-redirect
-              lang="{lang}"
-              translationurl="{translationurl}"
-              iframeurl="{redirectUrl}"
-      ></cashier-iframe-redirect>
-    </div>
-  {/if}
-  {#if showConfirmModal}
-    <cashier-confirm-modal>
-      <span slot="text">{$_(`${type.toLowerCase()}.confirmText`,
-              { values: !selectedPaymentMethod.HideAmountField ? { amount: formatter.format(editedAmount ?? 0), currency } : {amount: '', currency: ''}})}</span>
-      <div slot="confirm">{$_(`${type.toLowerCase()}.confirmButton`)}</div>
-    </cashier-confirm-modal>
   {/if}
-  <cashier-modal>
-    <cashier-error
-            {assetsurl}
-            {translationurl}
-            {clientstylingurl}
-            {clientstyling}
-            errorcode={errorResponseCode}
-    >
-      <div slot="button" class="ModalButton" on:click={hideModal}>{$_('closeModal')}</div>
-    </cashier-error>
-  </cashier-modal>
 </div>
 
 
@@ -1088,22 +1088,6 @@
       text-transform: none;
     }
   }
-  cashier-iframe-redirect {
-    height: inherit;
-    width: inherit;
-  }
-  .IframeRedirect {
-    display: flex;
-    position: absolute;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    z-index: 100;
-    top: 0;
-    left: 0;
-    background-color: var(--emw--color-white, #FFF);
-  }
   .FieldWrapper, label{
     display: flex;
     flex-direction: column ;

package/src/translations.js

@@ -19,17 +19,6 @@ export const TRANSLATIONS = {
     "amountIntError": "Amount should be integer value",
     "amountDecimalError": "Amount should have 2 or less digits after decimal point",
     "invalidFieldError": "{field} is invalid",
-    "closeModal": "CLOSE",
     "backToMethodList": "BACK TO PAYMENT METHODS",
-    "deposit": {
-      "makeTxnButton": "DEPOSIT",
-      "confirmText": "You're going to deposit {amount} {currency} to your account",
-      "confirmButton": "Ok"
-    },
-    "withdraw": {
-      "makeTxnButton": "WITHDRAW",
-      "confirmText": "You're going to withdraw {amount} {currency} from your account",
-      "confirmButton": "Ok"
-    }
   }
 }