@everymatrix/cashier-method-details 1.29.4 → 1.29.6

package/package.json

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

package/src/CashierMethodDetails.svelte

@@ -17,8 +17,6 @@
   import FlatpickrLanguages from "flatpickr/dist/l10n";
   import dayjs from 'dayjs';
   import customParseFormat from 'dayjs/plugin/customParseFormat';
-  import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
-  import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
   import type {PaymentMethod} from "./CashierMethodDetails.types";
   export class PaymentMethodDetails {
     name: string;
@@ -164,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;
@@ -209,6 +207,7 @@
   let editedAmount: number;
   let errorResponseCode: string;
   let isDisabled: boolean;
+  let showErrorModal = false;
 
   $: endpoint && session && selectedpaymentmethodname && currency && reinitMethod();
   $: clientstyling && customStylingContainer && setClientStyling();
@@ -238,7 +237,9 @@
     fieldValidation = {};
     qrCodeContainer = [];
     selectedPaymentMethod = null;
-    errorResponseCode = ''
+    errorResponseCode = '';
+    showErrorModal = false;
+    setErrorResponseCode();
     getPaymentDetails();
   }
 
@@ -341,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();
       }
@@ -356,6 +358,8 @@
         }
         validateField(field);
       })
+      setConfirmModalInfo();
+      setErrorResponseCode();
       hideMethodsList();
     })
   }
@@ -386,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);
@@ -393,9 +404,8 @@
     window.addEventListener('notificationButtonClick', retryRedirect, false);
     window.addEventListener('closeCashierReceiptPage', closeReceiptPage, false);
     document.addEventListener('click',closeAllLookups);
+    window.addEventListener('message', messageHandler, false);
     dayjs.extend(customParseFormat);
-    dayjs.extend(isSameOrBefore);
-    dayjs.extend(isSameOrAfter);
 
     return () => {
       window.removeEventListener('closeModal', closeModal);
@@ -403,6 +413,7 @@
       window.removeEventListener('closeIframe', closeIframe);
       window.removeEventListener('notificationButtonClick', retryRedirect);
       window.removeEventListener('closeCashierReceiptPage', closeReceiptPage);
+      window.removeEventListener('message', messageHandler);
     }
   });
 
@@ -470,6 +481,7 @@
       if (data.ResponseCode !== 'Success') {
         errorResponseCode = data.ResponseCode
         isProcessingTxn = false;
+        setErrorResponseCode();
         toggleDisableActionOnPage();
         showModal()
         return;
@@ -477,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,
@@ -522,6 +540,7 @@
   const closeIframe = () => {
     redirectUrl = null;
     showReceiptPage = true;
+    setRedirectInfo();
   }
   const closeModal = () => {
     showConfirmModal = false;
@@ -545,6 +564,7 @@
       if (data.ResponseCode !== 'Success') {
         errorResponseCode = data.ResponseCode;
         isProcessingTxn = false;
+        toggleDisableActionOnPage();
         showModal();
         return;
       }
@@ -553,6 +573,7 @@
       redirectMode = redirectModeMap.get(data.RedirectionMode);
       isProcessingTxn = false;
       toggleDisableActionOnPage();
+      setRedirectInfo();
       if (!redirectUrl) {
         showReceiptPage = true;
       }
@@ -569,6 +590,7 @@
     windowRedirect = window.open(redirectUrl, '_blank');
     showRedirectNotification = true;
     showRetryNotification = false;
+    setRedirectInfo();
   }
 
   const closeReceiptPage = () => {
@@ -702,7 +724,7 @@
     const inputValue = dayjs(value, format); 
     const maxValue = dayjs(field.maxValue, format);
     const minValue = dayjs(field.minValue, format);
-    if (inputValue.isSameOrBefore(minValue) || inputValue.isSameOrAfter(maxValue)) {
+    if (inputValue.isBefore(minValue) || inputValue.isAfter(maxValue)) {
       fieldValidation[field.name] = $_('invalidFieldError',{ values: { field: field.label }})
       return;
     }
@@ -727,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">
@@ -793,7 +815,8 @@
                              on:input="{() => { validateField(field) }}"
                              on:blur="{() => { showError[field.name] = true; validateField(field) }}">
                     {:else if field.type === FieldTypes.Time || field.type === FieldTypes.Date || field.type === FieldTypes.DateTime}
-                      <input type="text" bind:value={ prepareFields[field.name] } pattern={field.format}
+                    <div class="DateInput">
+                      <input class="DateTimePicker" type="text" bind:value={ prepareFields[field.name] } pattern={field.format}
                              data-field={JSON.stringify(field)}
                              placeholder={field.placeholder}
                              on:input={() => { showError[field.name] = true; dateTimeValidation(field) }}
@@ -801,6 +824,10 @@
                              on:blur={() => { showError[field.name] = true; dateTimeValidation(field) }}
                              bind:this={flatpickrEl[flatpickrEl.length]}
                       >
+                      {#if isMobile(userAgent)}
+                      <div class="MobileDateInput">{prepareFields[field.name]}</div>
+                      {/if}
+                    </div>
                     {:else if field.type === FieldTypes.Number || field.type === FieldTypes.Money}
                       <input type="number" placeholder="{field.placeholder}" bind:value={prepareFields[field.name]}
                              on:input="{() => { validateField(field) }}"
@@ -903,7 +930,7 @@
         </div>
       {/if}
     </div>
-  {:else if errorResponseCode}
+  {#if errorResponseCode && !showErrorModal}
     <cashier-error
             {assetsurl}
             {translationurl}
@@ -915,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>
 
 
@@ -976,12 +977,16 @@
     margin: 0;
   }
 
+  input::-webkit-date-and-time-value {
+    visibility: hidden;
+  }
+  
   input[type=number] {
     -moz-appearance: textfield;
   }
   .CashierMethodDetails {
     width: 100%;
-    height: 100%;
+    height: inherit;
     container-name: method-details;
     container-type: inline-size;
   }
@@ -1083,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 ;
@@ -1279,6 +1268,19 @@
         display: block;
       }
     }
+}
+  .DateInput {
+    position: relative;
+  }
+  .MobileDateInput {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);    
+    left: 15px;
+  }
+  .DateTimePicker {
+    width: -webkit-fill-available;
+    width: -moz-available;
   }
   .CustomSelect {
     width: 100%;
@@ -1341,11 +1343,21 @@
       text-overflow: ellipsis;
     }
     
-    label, input, .Description, .FormLogo .ChangePaymeth {
+    label, input, .Description, .FormLogo .ChangePaymeth, .OptionList div {
       font-size: var(--emw--font-size-x-small, 12px);
     }
     .SelectedMethodDescription, .AmountLimits {
       font-size: var(--emw--font-size-2x-small, 10px);
     }
-  }
+
+    .DateTimePicker {
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      font-size: inherit;
+      background: none;
+      width: -webkit-fill-available;
+      font-size: 0;
+      width: -moz-available;
+    }
+}
 </style>

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"
-    }
   }
 }