@everymatrix/cashier-method-details 1.24.0 → 1.24.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/cashier-method-details",
-  "version": "1.24.0",
+  "version": "1.24.1",
   "main": "index.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "88308bab2d4819ec71d025befe5d4165e8c092ca"
+  "gitHead": "1028027aa2cfe5775cbb4df0feb2b56d0143d3f6"
 }

package/src/CashierMethodDetails.svelte

@@ -1,4 +1,5 @@
 <svelte:options tag={null} />
+
 <script lang="ts">
   import { onMount } from "svelte";
   import { _, addNewMessages, setupI18n, setLocale } from './i18n';
@@ -9,6 +10,77 @@
   import '@everymatrix/cashier-notifications'
 
   import type {PaymentMethod} from "./CashierMethodDetails.types";
+  export class PaymentMethodDetails {
+    name: string;
+    label: string;
+    description: string;
+    type: number;
+    defaultValue: any;
+    format: string;
+    placeholder: string;
+    displayPlaceholder?: string;
+    isReadonly: boolean;
+    isRequired: boolean;
+    isPrimaryField: boolean;
+    demandUserInput: boolean;
+    autoTrim: boolean;
+    maxValue: string;
+    minValue: string;
+    autoUppercase: boolean;
+    correlationFieldName: string;
+    correlationFieldValue: string[];
+    notEqualToFieldName: string;
+    values: any[];
+    selected: Object;
+    useCopyButton: boolean;
+    inputMask: string[];
+    tags: string;
+    constructor(element: any) {
+      this.correlationFieldName = element.CorrelationFieldName || null;
+      this.correlationFieldValue = element.CorrelationFieldValue && element.CorrelationFieldValue.length > 0 ?
+              element.CorrelationFieldValue.split(',') : [];
+      this.name = element.Name || null;
+      this.label = element.Label || null;
+      this.description = element.Description || null;
+      this.type = element.Type || null;
+      this.defaultValue = this.calcDefaultValue(element);
+      this.format = element.Format || null;
+      this.placeholder = element.Placeholder || null;
+      this.isReadonly = element.IsReadonly || false;
+      this.isRequired = element.IsRequired || false;
+      this.maxValue = element.MaxValue || null;
+      this.minValue = element.MinValue || null;
+      this.isPrimaryField = element.IsPrimaryField || false;
+      this.demandUserInput = element.DemandUserInput || false;
+      this.autoTrim = element.AutoTrim || false;
+      this.autoUppercase = element.AutoUppercase || false;
+      this.notEqualToFieldName = element.NotEqualToFieldName || null;
+      this.values = element.Values;
+      this.useCopyButton = element.UseCopyButton || false;
+      this.inputMask = element.InputMask;
+      this.tags = element.Tags || null;
+    }
+
+    calcDefaultValue(element) {
+      if (this.type === 2) {
+        return element.DefaultValue === 'True';
+      } else {
+        return element.DefaultValue || null;
+      }
+    }
+    get descriptionWithLink(): string {
+      if ((FieldTypes[this.type] === 'Boolean' && this.placeholder) || (FieldTypes[this.type] === 'Link')) {
+        const regex = /{link}/i;
+        const link = this.placeholder || this.defaultValue;
+        const html = `<a href="${link}" target="_blank" rel="noopener noreferrer">${this.label}</a>`;
+        if (this.description.match(regex)) {
+          return this.description.replace(regex, html);
+        }
+        return `${this.description} ${html}`;
+      }
+      return this.description
+    }
+  }
 
   export enum FieldTypes {
     Unknown ='Unknown',
@@ -28,7 +100,7 @@
     Link = 'Link',
     Image = 'Image',
     Html = 'Html',
-    QRCod = 'QRCode'
+    QRCode = 'QR'
   }
   export let endpoint: string;
   export let session: string;
@@ -50,7 +122,7 @@
 
   let xPaymentSessionToken: string;
   let selectedPaymentMethod: PaymentMethod = {} as PaymentMethod;
-  let fields = [];
+  let fields: PaymentMethodDetails[] = [];
   let prepareFields = {};
   let isLoading:boolean = false;
   let isMethodOpen:boolean  = false;
@@ -67,12 +139,31 @@
   let isTranslationLoaded: boolean;
   let openedLookup: number | null;
   let clickedElem: HTMLElement;
+  let qrCodeContainer: HTMLElement[] = [];
+  let qrCodeScriptSrc: string = 'https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js';
+  let blankPageTarget: string = '_blank';
+  let externalLink: string = '';
+
   $: endpoint && session && selectedpaymentmethodname && currency && getPaymentDetails();
   $: clientstyling && customStylingContainer && setClientStyling();
   $: clientstylingurl && customStylingContainer && setClientStylingURL();
   $: lang && setActiveLanguage();
   $: lang && translationurl && setTranslationUrl();
-
+  $: selectedpaymentmethodname && qrCodeContainer.length && generateQr();
+
+  const generateQr = () => {
+    qrCodeContainer.forEach(elem => {
+      if (elem && elem.innerText) {
+        const url = elem.innerText
+        elem.innerText = ''
+        new QRCode(elem,  {
+          text: url,
+          width: 250,
+          height: 250,
+        });
+      }
+    })
+  }
   const setActiveLanguage = ():void => {
     setLocale(lang);
   }
@@ -113,7 +204,7 @@
     fetch(url, requestParams).then(res => res.json()).then(data => {
       xPaymentSessionToken = data.XPaymentSessionToken;
       selectedPaymentMethod = data.PaymentMethod;
-      fields = selectedPaymentMethod.Fields;
+      fields = selectedPaymentMethod.Fields && selectedPaymentMethod.Fields.map(field => new PaymentMethodDetails(field));
       prepareFields = {};
     })
   }
@@ -238,14 +329,21 @@
     showRetryNotification = false;
   }
 
-  const showField = (field) => {
-    return !field.CorrelationFieldName || (field.CorrelationFieldName && prepareFields[field.CorrelationFieldName] === field.CorrelationFieldValue)
+  const openUrlInNewTab = (url) => {
+    if (!url) {
+      return
+    }
+    window.postMessage({ type: 'NavigateTo', path: url, target: blankPageTarget || null, externalLink: externalLink || false }, window.location.href);
   }
 
+  const showField = (field) => {
+    return !field.correlationFieldName || (field.correlationFieldName && prepareFields[field.correlationFieldName] === field.correlationFieldValue)
+  }
 
 </script>
-
-
+<svelte:head>
+  <script src={qrCodeScriptSrc}></script>
+</svelte:head>
 <div class="CashierMethodDetails">
   {#if isTranslationLoaded && selectedPaymentMethod.Name}
     <div class="MethodsDetails">
@@ -284,39 +382,53 @@
         </div>
           {#each fields as field, index}
             {#if showField(field)}
-              <div class="FieldWrapper" class:Hidden={field.Type === FieldTypes.Hidden}>
+              <div class="FieldWrapper" class:Hidden={field.type === FieldTypes.Hidden}>
               <label>
-                <span class:Required={field.IsRequired}>{field.Label}</span>
-                {#if field.Description && field.Description !== field.Label}
-                  <span class="Description">{field.Description}</span>
+                {#if field.label && field.type !== FieldTypes.Link && field.type !== FieldTypes.Boolean}
+                  <span class:Required={field.isRequired}>{field.label}</span>
+                {/if}
+                {#if field.description && field.description !== field.label && field.type !== FieldTypes.QRCode && field.type !== FieldTypes.Boolean  && field.type !== FieldTypes.Link}
+                  <span class="Description">{field.description}</span>
                 {/if}
-                {#if field.Type === FieldTypes.Text}
-                  <input type="text" bind:value={prepareFields[field.Name]} placeholder="{field.Placeholder}">
+                {#if field.type === FieldTypes.Text}
+                  <input type="text" bind:value={prepareFields[field.name]} placeholder="{field.placeholder}">
 
-                {:else if field.Type === FieldTypes.Number || field.Type === FieldTypes.Money}
-                  <input type="number" placeholder="{field.Placeholder}" bind:value={prepareFields[field.Name]}>
+                {:else if field.type === FieldTypes.Number || field.type === FieldTypes.Money}
+                  <input type="number" placeholder="{field.placeholder}" bind:value={prepareFields[field.name]}>
 
-                {:else if field.Type === FieldTypes.Password}
-                  <input type="password" bind:value={prepareFields[field.Name]} placeholder="{field.Placeholder}">
+                {:else if field.type === FieldTypes.Password}
+                  <input type="password" bind:value={prepareFields[field.name]} placeholder="{field.placeholder}">
 
-                {:else if field.Type === FieldTypes.Hidden}
-                  <input type="hidden" bind:value={prepareFields[field.Name]} placeholder="{field.Placeholder}">
+                {:else if field.type === FieldTypes.Hidden}
+                  <input type="hidden" bind:value={prepareFields[field.name]} placeholder="{field.placeholder}">
 
-                {:else if field.Type === FieldTypes.Lookup}
+                {:else if field.type === FieldTypes.Lookup}
                   <div class="CustomSelect">
-                    <div class="Selected" id="{index}" on:click="{(e) => showLookup(e,index)}">{prepareFields[field.Name] || ''}</div>
+                    <div class="Selected" id="{index}" on:click="{(e) => showLookup(e,index)}">{prepareFields[field.name] || ''}</div>
                     <div class="OptionList" class:Opened={openedLookup === index}>
-                      {#each field.Values as value}
-                        <div on:click="{() => {prepareFields[field.Name] = value.Name; fields = fields}}">
-                          <span>{value.Value}</span>
+                      {#each field.values as value}
+                        <div on:click="{() => {prepareFields[field.name] = value.name; fields = fields}}">
+                          <span>{value.value}</span>
                         </div>
                       {/each}
                     </div>
                   </div>
-                {:else if field.Type === FieldTypes.Boolean}
-                  <input type="checkbox" bind:value={prepareFields[field.Name]} placeholder="{field.Placeholder}">
+                {:else if field.type === FieldTypes.Boolean}
+                  <div class="Checkbox">
+                    <input type="checkbox" bind:value={prepareFields[field.name]} placeholder="{field.placeholder}">
+                    <span class="Checkmark"></span>
+                    <span class="Description">{@html field.descriptionWithLink}</span>
+                  </div>
+                {:else if field.type === FieldTypes.QRCode}
+                  <div class="QRCode" on:click={() => {openUrlInNewTab(field.description)}}>
+                    <div bind:this={qrCodeContainer[qrCodeContainer.length]}>{field.defaultValue}</div>
+                  </div>
+                {:else if field.type === FieldTypes.Link}
+                  <span>{@html field.descriptionWithLink}</span>
+                {:else if field.type === FieldTypes.Label}
+                  <span class="Label"></span>
                 {:else}
-                  <input type="text" bind:value={prepareFields[field.Name]} placeholder="{field.Placeholder}">
+                  <input type="text" bind:value={prepareFields[field.name]} placeholder="{field.placeholder}">
                 {/if}
               </label>
               </div>
@@ -486,6 +598,10 @@
     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
     padding: 0 15px 15px;
     margin-bottom: 10px;
+    &:has(.QRCode, .Label) {
+      box-shadow: none;
+      background: transparent;
+    }
     &.Hidden {
       height: 0;
       visibility: hidden;
@@ -547,6 +663,67 @@
       animation: loading-spinner 1s linear infinite
     }
   }
+  .QRCode {
+    width: 250px;
+    margin: auto;
+  }
+  .Checkbox {
+    display: flex;
+    position: relative;
+    margin-top: 12px;
+
+    .Description {
+      margin: 0 0 0 20px;
+      cursor: pointer;
+      line-height:  var( --emw--font-size-medium, 16px);
+    }
+
+    .Checkmark {
+      position: absolute;
+      top: 2px;
+      left: 0;
+      height: 12px;
+      width: 12px;
+      border: 1px solid var(--emw--color-gray-100, #E8E9EB);
+      border-radius: var(--emw--border-radius-medium, 4px);
+      background-color: var(--emw--color-white, #FFF);
+      cursor: pointer;
+
+      &:after {
+        content: "";
+        position: absolute;
+        display: none;
+      }
+
+      &:after {
+        left: 4px;
+        top: 0;
+        width: 2px;
+        height: 8px;
+        border: solid var(--emw--color-white, #FFF);
+        border-width: 0 2px 2px 0;
+        -webkit-transform: rotate(45deg);
+        -ms-transform: rotate(45deg);
+        transform: rotate(45deg);
+      }
+    }
+    input {
+      position: absolute;
+      opacity: 0;
+      cursor: pointer;
+      height: 0;
+      width: 0;
+
+      &:checked ~ .Checkmark {
+        background-color: var(--emw--color-primary, #7EC51E);
+        border-color: var(--emw--color-primary, #7EC51E);
+      }
+
+      &:checked ~ .Checkmark:after {
+        display: block;
+      }
+    }
+  }
   .CustomSelect {
     width: 100%;
     position: relative;