@everymatrix/cashier-method-details 1.34.0 → 1.34.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/cashier-method-details",
-  "version": "1.34.0",
+  "version": "1.34.2",
   "main": "index.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c9ad96fd45d67455a049f61462d8b4523a78ba54"
+  "gitHead": "99004a0501ea8fb9219aac803a986e470f556838"
 }

package/src/CashierMethodDetails.svelte

@@ -17,7 +17,7 @@
   import FlatpickrLanguages from "flatpickr/dist/l10n";
   import dayjs from 'dayjs';
   import customParseFormat from 'dayjs/plugin/customParseFormat';
-  import type {PaymentMethod} from "./CashierMethodDetails.types";
+  import type {DateTimeFormat, PaymentMethod} from "./CashierMethodDetails.types";
   export class PaymentMethodDetails {
     name: string;
     label: string;
@@ -52,12 +52,12 @@
       this.description = element.Description || null;
       this.type = fieldTypeMap.get(element.Type) || null;
       this.defaultValue = this.calcDefaultValue(element);
-      this.format = element.Format || null;
-      this.placeholder = element.Placeholder || null;
+      this.format = this.setPlaceHolderOrFormat(element, FieldParams.Format);
+      this.placeholder = this.setPlaceHolderOrFormat(element, FieldParams.Placeholder);
       this.isReadonly = element.IsReadonly || false;
       this.isRequired = element.IsRequired || false;
-      this.maxValue = element.MaxValue || null;
-      this.minValue = element.MinValue || null;
+      this.maxValue = this.setValue(element, FieldParams.MaxValue);
+      this.minValue = this.setValue(element, FieldParams.MinValue);
       this.isPrimaryField = element.IsPrimaryField || false;
       this.demandUserInput = element.DemandUserInput || false;
       this.autoTrim = element.AutoTrim || false;
@@ -70,12 +70,28 @@
     }
 
     calcDefaultValue(element) {
-      if (this.type === 2) {
+      if (this.type === FieldTypes.Boolean) {
         return element.DefaultValue === 'True';
+      } else if (defaultDateTimeFormatMap.has(element.Type)){
+        return this.setValue(element, FieldParams.DefaultValue)
       } else {
         return element.DefaultValue || null;
       }
     }
+    setPlaceholderOrFormat(element, paramsType) {
+      if (defaultDateTimeFormatMap.has(element.Type) && !dateTimeFormatsMap.get(element.Placeholder)) {
+        return defaultDateTimeFormatMap.get(element.Type)[paramsType];
+      } else {
+        return element[paramsType] || null;
+      }
+    }
+    setValue(element, paramsType: string): string | null {
+      if (defaultDateTimeFormatMap.has(element.Type) && !dateTimeFormatsMap.get(element.Placeholder)) {
+        return dayjs(element[paramsType], element.Placeholder).format(defaultDateTimeFormatMap.get(element.Type).Placeholder)
+      } else {
+        return element[paramsType] || null;
+      }
+    }
     get descriptionWithLink(): string {
       if ((FieldTypes[this.type] === 'Boolean' && this.placeholder) || (FieldTypes[this.type] === 'Link')) {
         const regex = /{link}/i;
@@ -132,6 +148,28 @@
     QRCode = 'QR'
   }
 
+  enum FieldParams {
+    MaxValue = 'MaxValue',
+    MinValue = 'MinValue',
+    DefaultValue = 'DefaultValue',
+    Placeholder = 'Placeholder',
+    Format = 'Format'
+  }
+  
+  const defaultDateTimeFormatMap = new Map<FieldTypes, DateTimeFormat>([
+    [FieldTypes.Date, {Placeholder: 'MM/DD/YYYY', Format: '^\\d{2}\/\\d{2}\/\\d{4}$' }],
+    [FieldTypes.Time, { Placeholder: 'HH:mm', Format: '^\\d{2}:\\d{2}$' }],
+    [FieldTypes.DateTime, {Placeholder: 'MM/DD/YYYY HH:mm', Format: '^\\d{2}\/\\d{2}\/\\d{4} \\d{2}:\\d{2}$'}]
+  ]);
+  const dateTimeFormatsMap = new Map<string, string>([
+    ['MM/DD/YYYY HH:mm', 'm/d/Y H:i'],
+    ['DD.MM.YYYY HH:mm', 'd.m.Y H:i'],
+    ['YYYY-MM-DD',  'Y-m-d'],
+    ['MM/DD/YYYY',  'm/d/Y'],
+    ['DD/MM/YYYY',  'd/m/Y'],
+    ['YYYY.MM.DD',  'Y.m.d'],
+    ['HH:mm',  'H:i']
+  ]);
   const fieldTypeMap = new Map([
     [['Unknown', 0], FieldTypes.Unknown],
     [['Text', 1], FieldTypes.Text],
@@ -157,9 +195,6 @@
   export let playersession: 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;
@@ -228,7 +263,7 @@
         if (!el) {
           return;
         }
-        flatpickr(el, {dateFormat: dateformat}).destroy();
+        flatpickr(el).destroy();
       })
     }
     showReceiptPage = false;
@@ -268,20 +303,15 @@
       [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]}
       }
     }
@@ -290,9 +320,12 @@
         return;
       }
       const field = JSON.parse(el.dataset.field);
-      flatpickr(el, {...dateOptions[field.type], maxDate: field.maxValue, minDate: field.minValue, defaultDate: field.defaultValue,
+      const dateFormat = dateTimeFormatsMap.get(field.placeholder);
+      const timeformat = field.type === FieldTypes.DateTime ? dateTimeFormatsMap.get(field.placeholder.split(' ')[1]) : dateFormat;
+      flatpickr(el, {...dateOptions[field.type], dateFormat: dateFormat, time_24hr: timeformat === 'H:i', maxDate: field.maxValue, minDate: field.minValue, defaultDate: field.defaultValue,
         onReady: (selectedDates, dateStr) => {
-              prepareFields[field.name] = dateStr;
+            prepareFields[field.name] = dateStr;
+            dateTimeValidation(field);
         },
         onClose: (selectedDates, dateStr, instance) => {
           if(!fieldValidation[field.name]) {
@@ -397,7 +430,7 @@
   const messageHandler = (e:any) => {
     if (e.data.type == 'ErrorResponseCode') {
       errorResponseCode = e.data.errorResponseCode;
-      showReceiptPage = e.data.showReceiptPage;
+      showReceiptPage = e.data.showErrorOutsideReceiptPage;
     }
     if (e.data.type == 'ReceiptLoaded') {
       closeIframe()
@@ -930,6 +963,9 @@
                   {endpoint}
                   {customerid}
                   {assetsurl}
+                  showerrors="false"
+                  showclosebutton="true"
+                  showcontactbutton="true"
                   transactionid="{transactionId}"
                   session="{playersession}"
           >

package/src/CashierMethodDetails.types.ts

@@ -61,3 +61,8 @@ export interface PaymentMethodDetails {
     UseCopyButton: boolean;
     InputMask: string[];
 }
+
+export interface DateTimeFormat {
+    Placeholder: string;
+    Format: string;
+}