@everymatrix/cashier-method-details 1.27.10 → 1.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/cashier-method-details",
-  "version": "1.27.10",
+  "version": "1.28.0",
   "main": "index.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a54060c05663ae9ee398af1cfd3ca75c4701863a"
+  "gitHead": "d291acb27fcd4cf8217ec1c98666c02bfb1aea9f"
 }

package/rollup.config.js

@@ -6,6 +6,7 @@ import livereload from 'rollup-plugin-livereload';
 import { terser } from 'rollup-plugin-terser';
 import sveltePreprocess from 'svelte-preprocess';
 import typescript from '@rollup/plugin-typescript';
+import postcss from 'rollup-plugin-postcss';
 const production = process.env.NODE_ENV === 'production';
 const dev = process.env.NODE_ENV === 'development';
 
@@ -18,6 +19,9 @@ export default {
     file: 'dist/cashier-method-details.js'
   },
   plugins: [
+    postcss({
+      extensions:['.css']
+    }),
     svelte({
       preprocess: sveltePreprocess(),
       compilerOptions: {

package/src/CashierMethodDetails.svelte

@@ -8,8 +8,13 @@
 
   import '@everymatrix/cashier-iframe-redirect';
   import '@everymatrix/cashier-receipt-page';
-  import '@everymatrix/cashier-confirm-modal'
-  import '@everymatrix/cashier-notifications'
+  import '@everymatrix/cashier-confirm-modal';
+  import '@everymatrix/cashier-notifications';
+  import '@everymatrix/cashier-error';
+  import '@everymatrix/cashier-modal';
+  import flatpickr from "flatpickr";
+  import "flatpickr/dist/flatpickr.min.css";
+  import FlatpickrLanguages from "flatpickr/dist/l10n";
 
   import type {PaymentMethod} from "./CashierMethodDetails.types";
   export class PaymentMethodDetails {
@@ -120,6 +125,9 @@
   export let session: string;
   export let lang: string = 'en';
   export let local: string = 'en-US';
+  export let dateformat: string = "d/m/Y";
+  export let timeformat: string = "H:i";
+  export let dateandtimeformat: string = 'd/m/Y H:i';
   export let translationurl: string;
   export let customerid: string;
   export let currency: string;
@@ -151,6 +159,7 @@
   let openedLookup: string | null;
   let clickedElem: HTMLElement;
   let qrCodeContainer: HTMLElement[] = [];
+  let flatpickrEl: HTMLElement[] = [];
   let qrCodeScriptSrc: string = 'https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js';
   let blankPageTarget: string = '_blank';
   let externalLink: string = '';
@@ -165,16 +174,39 @@
   let openLookupTop = false;
   let maxLookupHeight: number;
   let editedAmount: number;
+  let errorResponseCode: string;
 
-  $: endpoint && session && selectedpaymentmethodname && currency && getPaymentDetails();
+  $: endpoint && session && selectedpaymentmethodname && currency && reinitMethod();
   $: clientstyling && customStylingContainer && setClientStyling();
   $: clientstylingurl && customStylingContainer && setClientStylingURL();
   $: lang && setActiveLanguage();
   $: lang && translationurl && setTranslationUrl();
-  $: selectedpaymentmethodname && qrCodeContainer.length && generateQr();
+  $: fields.length && qrCodeContainer.length && generateQr();
+  $: fields.length && flatpickrEl.length && createDatePicker();
   $: innerWidth && onWindowResize();
   $: mobileView.toString() && hideMethodsList();
 
+
+  const reinitMethod = () => {
+    if (flatpickrEl.length) {
+      flatpickrEl.forEach(el => {
+        if (!el) {
+          return;
+        }
+        flatpickr(el, {dateFormat: dateformat}).destroy();
+      })
+    }
+    flatpickrEl = [];
+    fields = [];
+    prepareFields = {};
+    showError = {};
+    fieldValidation = {};
+    qrCodeContainer = [];
+    selectedPaymentMethod = null;
+    errorResponseCode = ''
+    getPaymentDetails();
+  }
+
   const generateQr = () => {
     qrCodeContainer.forEach(elem => {
       if (elem && elem.innerText) {
@@ -188,6 +220,35 @@
       }
     })
   }
+  const createDatePicker = () => {
+    const dateOptions = {
+      [FieldTypes.Time]: {
+        noCalendar: true,
+        enableTime: true,
+        dateFormat: timeformat,
+        time_24hr: timeformat === 'H:i',
+        allowInput: true
+      },
+      [FieldTypes.Date]: {
+        dateFormat: dateformat,
+        allowInput: true,
+        locale: {...FlatpickrLanguages[lang]}
+      },
+      [FieldTypes.DateTime]: {
+        dateFormat: dateandtimeformat,
+        allowInput: true,
+        enableTime: true,
+        time_24hr: timeformat === 'H:i',
+        locale: {...FlatpickrLanguages[lang]}
+      }
+    }
+    flatpickrEl.forEach((el) => {
+      if(!el) {
+        return;
+      }
+      flatpickr(flatpickrEl, dateOptions[el.dataset.type])
+    });
+  }  
   const setActiveLanguage = ():void => {
     setLocale(lang);
   }
@@ -226,17 +287,27 @@
       })
     }
     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 !== 'Success') {
+        errorResponseCode = data.ResponseCode;
+        return;
+      }
       xPaymentSessionToken = data.XPaymentSessionToken;
       selectedPaymentMethod = data.PaymentMethod;
-      showError = {};
-      prepareFields = {};
-      fieldValidation = {};
       editedAmount = amount;
       if (!selectedPaymentMethod.HideAmountField) {
         validateAmount();
       }
       fields = selectedPaymentMethod.Fields && selectedPaymentMethod.Fields.map(field => new PaymentMethodDetails(field));
-      fields.forEach(field => { validateField(field) })
+      fields.forEach(field => {
+        if (field?.defaultValue) {
+          prepareFields[field.name] = field.defaultValue;
+        }
+        validateField(field);
+      })
       hideMethodsList();
     })
   }
@@ -333,12 +404,30 @@
       })
     }
     fetch(url, requestParams).then((res) => res.json()).then(data => {
+      if (data.error) {
+        postMessage({type: 'ShowSessionError', error: data.error}, window.location.href)
+        return;
+      }
+      if (data.ResponseCode !== 'Success') {
+        errorResponseCode = data.ResponseCode
+        isProcessingTxn = false;
+        showModal()
+        return;
+      }
       xPaymentSessionToken = data.XPaymentSessionToken;
       isProcessingTxn = false;
       showConfirmModal = true;
     })
   }
 
+  const showModal = () => {
+    window.postMessage({ type: 'ShowCashierModal' }, window.location.href)
+  }
+
+  const hideModal = () => {
+    window.postMessage({ type: 'HideCashierModal' }, window.location.href)
+  }
+
   const backToMethodList = () => {
     dispatchEvent(new CustomEvent('backToMethodList', {
       bubbles: true,
@@ -387,6 +476,12 @@
       })
     }
     fetch(url, requestParams).then((res) => res.json()).then(data => {
+      if (data.ResponseCode !== 'Success') {
+        errorResponseCode = data.ResponseCode;
+        isProcessingTxn = false;
+        showModal();
+        return;
+      }
       xPaymentSessionToken = data.XPaymentSessionToken;
       redirectUrl = data.RedirectUrl;
       redirectMode = data.RedirectionMode;
@@ -478,7 +573,7 @@
   }
 
   const amountIntError = ():string => {
-    if (selectedPaymentMethod.IsIntegerAmount && !Number.isInteger(amount)) {
+    if (selectedPaymentMethod.IsIntegerAmount && !Number.isInteger(editedAmount)) {
       return $_('amountIntError')
     }
     return ''
@@ -492,7 +587,7 @@
   }
 
   const patternMatchesError = (field, value):string => {
-    if (field.format && !value.toString().match(field.format)) {
+    if (field.format && value && !value.toString().match(field.format)) {
       return $_('invalidFieldError',{ values: { field: field.label }})
     }
     return ''
@@ -593,7 +688,14 @@
                              placeholder="{field.placeholder}"
                              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}
+                             data-type={field.type}
+                             placeholder={field.placeholder}
+                             on:input={() => { validateField(field) }}
+                             on:blur={() => { showError[field.name] = true; validateField(field) }}
+                             bind:this={flatpickrEl[flatpickrEl.length]}
+                      >
                     {: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) }}"
@@ -696,7 +798,18 @@
         </div>
       {/if}
     </div>
-    {/if}
+  {:else if errorResponseCode}
+    <cashier-error
+            {assetsurl}
+            {translationurl}
+            {clientstylingurl}
+            {clientstyling}
+            hidebuttons="{!mobileView || ''}"
+            errorcode={errorResponseCode}
+    >
+      <div slot="button" class="ModalButton" on:click={backToMethodList}>{$_('backToMethodList')}</div>
+    </cashier-error>
+  {/if}
   {#if redirectUrl && redirectMode === RedirectionModeStringEnum.Default}
     <div class="IframeRedirect">
       <cashier-iframe-redirect
@@ -713,6 +826,17 @@
       <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>
 
 
@@ -750,7 +874,6 @@
   input[type=number] {
     -moz-appearance: textfield;
   }
-
   .MethodsDetails {
     position: relative;
     display: flex;
@@ -915,6 +1038,8 @@
     line-height: var(--emw--size-small, 14px);
     color: var(--emw--color-black, #111);
     padding: 0 15px;
+    font-style: inherit;
+    font-family: inherit;
     &:focus {
       outline: none;
     }

package/src/translations.js

@@ -19,6 +19,8 @@ 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",