@everymatrix/cashier-method-details 1.29.3 → 1.29.4

package/package.json

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

package/src/CashierMethodDetails.svelte

@@ -15,7 +15,10 @@
   import flatpickr from "flatpickr";
   import "flatpickr/dist/flatpickr.min.css";
   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;
@@ -279,7 +282,19 @@
       if(!el) {
         return;
       }
-        flatpickr(flatpickrEl, {...dateOptions[el.dataset.type], maxDate: el.dataset.maxvalue, minDate: el.dataset.minvalue})
+      const field = JSON.parse(el.dataset.field);
+      flatpickr(el, {...dateOptions[field.type], maxDate: field.maxValue, minDate: field.minValue, defaultDate: field.defaultValue,
+        onReady: (selectedDates, dateStr) => {
+              prepareFields[field.name] = dateStr;
+        },
+        onClose: (selectedDates, dateStr, instance) => {
+          if(!fieldValidation[field.name]) {
+            prepareFields[field.name] = dateStr;
+          } else {
+            prepareFields[field.name] = '';
+          }
+        }
+      })
     });
   }
   const setActiveLanguage = ():void => {
@@ -377,7 +392,10 @@
     window.addEventListener('closeIframe', closeIframe, false);
     window.addEventListener('notificationButtonClick', retryRedirect, false);
     window.addEventListener('closeCashierReceiptPage', closeReceiptPage, false);
-    document.addEventListener('click',closeAllLookups)
+    document.addEventListener('click',closeAllLookups);
+    dayjs.extend(customParseFormat);
+    dayjs.extend(isSameOrBefore);
+    dayjs.extend(isSameOrAfter);
 
     return () => {
       window.removeEventListener('closeModal', closeModal);
@@ -678,6 +696,19 @@
             amountIntError() || amountDecimalError();
   }
 
+  const dateTimeValidation = (field) => {
+    const value = prepareFields[field.name];
+    const format = field.placeholder;
+    const inputValue = dayjs(value, format); 
+    const maxValue = dayjs(field.maxValue, format);
+    const minValue = dayjs(field.minValue, format);
+    if (inputValue.isSameOrBefore(minValue) || inputValue.isSameOrAfter(maxValue)) {
+      fieldValidation[field.name] = $_('invalidFieldError',{ values: { field: field.label }})
+      return;
+    }
+    fieldValidation[field.name] = showField(field) ? (emptyFieldError(field, value) || patternMatchesError(field, value)) : '';
+  }
+
   const validateField = (field) => {
     const value = prepareFields[field.name]
     fieldValidation[field.name] = showField(field) ? (emptyFieldError(field, value) || patternMatchesError(field, value)) : '';    
@@ -763,12 +794,11 @@
                              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}
-                             data-maxvalue={field.maxValue}
-                             data-minvalue={field.minValue}
+                             data-field={JSON.stringify(field)}
                              placeholder={field.placeholder}
-                             on:input={() => { validateField(field) }}
-                             on:change={() => { showError[field.name] = true; validateField(field) }}
+                             on:input={() => { showError[field.name] = true; dateTimeValidation(field) }}
+                             on:change={() => { showError[field.name] = true; dateTimeValidation(field) }}
+                             on:blur={() => { showError[field.name] = true; dateTimeValidation(field) }}
                              bind:this={flatpickrEl[flatpickrEl.length]}
                       >
                     {:else if field.type === FieldTypes.Number || field.type === FieldTypes.Money}
@@ -786,7 +816,7 @@
 
                     {:else if field.type === FieldTypes.Lookup}
                       <div class="CustomSelect">
-                        <div class="Selected" id="{index}" on:click="{(e) => showLookup(e, field.name)}"> {getValueByFieldName(field.values, prepareFields[field.name])}</div>
+                        <div class="Selected" id="{index}" on:click="{(e) => showLookup(e, field.name)}"> <span class="SelectedValue">{getValueByFieldName(field.values, prepareFields[field.name])}</span></div>
                         <div class="OptionList"
                              class:Opened={openedLookup === field.name}
                              class:Top={openLookupTop}
@@ -952,6 +982,8 @@
   .CashierMethodDetails {
     width: 100%;
     height: 100%;
+    container-name: method-details;
+    container-type: inline-size;
   }
   .ReceiptPage {
     background-color: var(--emw--color-gray-transparency-100, rgb(255, 255, 255));
@@ -1256,6 +1288,9 @@
     display: flex;
     align-items: center;
     cursor: pointer;
+    .SelectedValue {
+      max-width: 95%;
+    }
     &:after {
       position: absolute;
       content: "";
@@ -1296,4 +1331,21 @@
       display: block;
     }
   }
+  @container method-details (width < 699px) {
+    .FormLogo .SelectedLogoDescription {
+      font-size: var(--emw--font-size-x-small, 12px);
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    
+    label, input, .Description, .FormLogo .ChangePaymeth {
+      font-size: var(--emw--font-size-x-small, 12px);
+    }
+    .SelectedMethodDescription, .AmountLimits {
+      font-size: var(--emw--font-size-2x-small, 10px);
+    }
+  }
 </style>

package/src/translations.js

@@ -2,8 +2,8 @@ export const TRANSLATIONS = {
   "en": {
     "loading": "Loading...",
     "amountLabel": "Amount",
-    "redirectTitle": "You are redirected to the payment\'s provider page",
-    "redirectMessage": "Please complete your transaction on the payment\'s provider page.",
+    "redirectTitle": "You are redirected to the payment's provider page",
+    "redirectMessage": "Please complete your transaction on the payment's provider page.",
     "backToPayment": "Close",
     "retryText": "Please note that your popup blocker may prevent the payment window from appearing",
     "retryButton": "RETRY",
@@ -23,13 +23,13 @@ export const TRANSLATIONS = {
     "backToMethodList": "BACK TO PAYMENT METHODS",
     "deposit": {
       "makeTxnButton": "DEPOSIT",
-      "confirmText": "You\'re going to deposit {amount} {currency} to your account",
-      "confirmButton": "Ok",
+      "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",
+      "confirmText": "You're going to withdraw {amount} {currency} from your account",
+      "confirmButton": "Ok"
     }
   }
-};
+}