@everymatrix/cashier-method-details 1.29.3 → 1.29.5

package/package.json

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

package/src/CashierMethodDetails.svelte

@@ -15,7 +15,8 @@
   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 type {PaymentMethod} from "./CashierMethodDetails.types";
   export class PaymentMethodDetails {
     name: string;
@@ -279,7 +280,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 +390,8 @@
     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);
 
     return () => {
       window.removeEventListener('closeModal', closeModal);
@@ -678,6 +692,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.isBefore(minValue) || inputValue.isAfter(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)) : '';    
@@ -762,15 +789,19 @@
                              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}
-                             data-maxvalue={field.maxValue}
-                             data-minvalue={field.minValue}
+                    <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={() => { 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]}
                       >
+                      {#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) }}"
@@ -786,7 +817,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}
@@ -946,12 +977,18 @@
     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;
   }
   .ReceiptPage {
     background-color: var(--emw--color-gray-transparency-100, rgb(255, 255, 255));
@@ -1247,6 +1284,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%;
@@ -1256,6 +1306,9 @@
     display: flex;
     align-items: center;
     cursor: pointer;
+    .SelectedValue {
+      max-width: 95%;
+    }
     &:after {
       position: absolute;
       content: "";
@@ -1296,4 +1349,31 @@
       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, .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

@@ -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"
     }
   }
-};
+}