@everymatrix/cashier-method-details 1.27.5 → 1.27.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/cashier-method-details",
-  "version": "1.27.5",
+  "version": "1.27.7",
   "main": "index.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8155a0b8b58289a1253d06ffabea74af8bbd932e"
+  "gitHead": "3f35682fb79fe589569c214127888b75fb556be4"
 }

package/src/CashierMethodDetails.svelte

@@ -12,12 +12,11 @@
   import '@everymatrix/cashier-notifications'
 
   import type {PaymentMethod} from "./CashierMethodDetails.types";
-  import {number} from "svelte-i18n";
   export class PaymentMethodDetails {
     name: string;
     label: string;
     description: string;
-    type: number;
+    type: string;
     defaultValue: any;
     format: string;
     placeholder: string;
@@ -85,7 +84,19 @@
     }
   }
 
-  export enum FieldTypes {
+  enum TxnType {
+    Deposit='Deposit',
+    Withdraw='Withdraw'
+  }
+
+  const VISIBLE_FIELD_TYPES: string[] = 'Text,Number,Money,Boolean,Lookup,Date,Time,DateTime,Password,Label,Link,QRCode'.split(',');
+
+  enum RedirectionModeStringEnum {
+    Default = 'Default',
+    RedirectWithRetry = 'Redirect'
+  }
+
+  enum FieldTypes {
     Unknown ='Unknown',
     Text ='Text',
     Boolean ='Boolean',
@@ -119,18 +130,6 @@
   export let clientstyling:string = '';
   export let clientstylingurl:string = ''
 
-  export enum TxnType {
-    Deposit='Deposit',
-    Withdraw='Withdraw'
-  }
-
-  const VISIBLE_FIELD_TYPES: string[] =
-          'Text,Number,Money,Boolean,Lookup,Date,Time,DateTime,Password,Label,Link,QRCode'.split(',');
-  export enum RedirectionModeStringEnum {
-    Default = 'Default',
-    RedirectWithRetry = 'Redirect'
-  }
-
   let xPaymentSessionToken: string;
   let selectedPaymentMethod: PaymentMethod = {} as PaymentMethod;
   let fields: PaymentMethodDetails[] = [];
@@ -165,6 +164,7 @@
   let fieldValidation = {};
   let openLookupTop = false;
   let maxLookupHeight: number;
+  let editedAmount: number;
 
   $: endpoint && session && selectedpaymentmethodname && currency && getPaymentDetails();
   $: clientstyling && customStylingContainer && setClientStyling();
@@ -231,7 +231,10 @@
       showError = {};
       prepareFields = {};
       fieldValidation = {};
-      validateAmount();
+      editedAmount = amount;
+      if (!selectedPaymentMethod.HideAmountField) {
+        validateAmount();
+      }
       fields = selectedPaymentMethod.Fields && selectedPaymentMethod.Fields.map(field => new PaymentMethodDetails(field));
       fields.forEach(field => { validateField(field) })
       hideMethodsList();
@@ -322,7 +325,7 @@
         "XPaymentSessionToken": xPaymentSessionToken,
         "Transaction": {
           "PaymentMethod": selectedPaymentMethod.Name,
-          "Amount": amount,
+          "Amount": editedAmount,
           "Currency": currency,
           "CustomFields": prepareFields
         },
@@ -433,14 +436,14 @@
   }
 
   const emptyAmountError = ():string => {
-    if (!amount) {
+    if (!editedAmount) {
       return $_('errorEmptyField')
     }
     return ''
   }
 
   const minAmountError = () => {
-    if (selectedPaymentMethod.DisplayCurrency.MinAmountLimit > amount) {
+    if (selectedPaymentMethod.DisplayCurrency.MinAmountLimit > editedAmount) {
       return $_('minAmountError', {
         values: {
           amount: formatter.format(selectedPaymentMethod.DisplayCurrency.MinAmountLimit),
@@ -452,7 +455,7 @@
   }
 
   const maxAmountError = () => {
-    if (selectedPaymentMethod.DisplayCurrency.MaxAmountLimit < amount) {
+    if (selectedPaymentMethod.DisplayCurrency.MaxAmountLimit < editedAmount) {
       return $_('maxAmountError', {
         values: {
           amount: formatter.format(selectedPaymentMethod.DisplayCurrency.MaxAmountLimit),
@@ -464,7 +467,7 @@
   }
 
   const amountMultiplierError = () => {
-    if (selectedPaymentMethod.AmountMultiplier && (amount % selectedPaymentMethod.AmountMultiplier !== 0)) {
+    if (selectedPaymentMethod.AmountMultiplier && (editedAmount % selectedPaymentMethod.AmountMultiplier !== 0)) {
       return $_('amountMultiplierError', {
         values: {
           multiplier: selectedPaymentMethod.AmountMultiplier
@@ -482,7 +485,7 @@
   }
 
   const amountDecimalError = ():string => {
-    if (Number(amount).toFixed(2) != amount) {
+    if (Number(editedAmount).toFixed(2) != +editedAmount) {
       return $_('amountDecimalError')
     }
     return ''
@@ -496,7 +499,7 @@
   }
 
   const emptyFieldError = (field, value):string => {
-    if (field.isRequired && (!value || !value.toString().trim())) {
+    if (typeof value !== 'boolean' && field.isRequired && (!value || !value.toString().trim())) {
       return $_('errorEmptyField')
     }
     return ''
@@ -526,11 +529,11 @@
   {#if selectedPaymentMethod?.Name}
     <div class="MethodsDetails">
       {#if !showReceiptPage}
-        <form on:submit|preventDefault={prepareTxn}>
+        <form on:submit|preventDefault={prepareTxn} novalidate>
           <div class="FieldWrapper">
             <div class="FormLogo">
               <div class="SelectedLogoWrapper">
-                <img src={selectedPaymentMethod.Logos[0].LogoUrl} alt={selectedPaymentMethod.Label} />
+                <img src={selectedPaymentMethod.Logos[0] && selectedPaymentMethod.Logos[0].LogoUrl} alt={selectedPaymentMethod.Label} />
               </div>
               <div class="SelectedLogoDescription">
                 {selectedPaymentMethod.Label}
@@ -552,7 +555,7 @@
                 </span>
                 {#if selectedPaymentMethod.IsAmountConfigurable}
                   <input type="number"
-                         bind:value={amount}
+                         bind:value={editedAmount}
                          on:input={() => validateAmount()}
                          on:blur={() => {showError['amount'] = true; validateAmount()}}
                          placeholder="{$_('amountPlaceholder')}"
@@ -625,7 +628,7 @@
                                on:change="{() => { showError[field.name] = true; validateField(field) }}"
                         >
                         <span class="Checkmark"></span>
-                        <span class="Description">{@html field.descriptionWithLink}</span>
+                        <span class="Description" class:Required={field.isRequired}>{@html field.descriptionWithLink}</span>
                       </div>
                     {:else if field.type === FieldTypes.QRCode}
                       <div class="QRCode" on:click={() => {openUrlInNewTab(field.description)}}>
@@ -649,7 +652,9 @@
                 <path fill-rule="evenodd" clip-rule="evenodd" d="M7.51564 0.574496C6.49714 0.733152 5.5928 1.46162 5.21164 2.43037C5.01714 2.92471 4.98674 3.24368 4.98671 4.78987L4.98668 5.99306L4.55336 6.00671C4.20693 6.01762 4.08258 6.03221 3.93336 6.07946C3.43136 6.23846 3.00318 6.58293 2.73943 7.04C2.70133 7.106 2.63639 7.256 2.59508 7.37334L2.52002 7.58665V13.9067L2.59268 14.12C2.6993 14.4331 2.83849 14.6518 3.09336 14.9067C3.34821 15.1615 3.56693 15.3007 3.88002 15.4073L4.09336 15.48H11.9067L12.12 15.4073C12.4331 15.3007 12.6518 15.1615 12.9067 14.9067C13.1616 14.6518 13.3007 14.4331 13.4074 14.12L13.48 13.9067V7.58665L13.405 7.37334C13.1846 6.74712 12.6999 6.27875 12.0667 6.08C11.9191 6.03371 11.7891 6.0184 11.4467 6.00696L11.0134 5.99253L11.0133 4.78959C11.0133 4.128 11.0008 3.45465 10.9855 3.29334C10.9257 2.66268 10.7188 2.13556 10.3497 1.67368C9.66549 0.817589 8.6023 0.405214 7.51564 0.574496ZM8.46436 1.58665C9.01596 1.7035 9.52999 2.11659 9.79758 2.65809C9.98521 3.03771 9.98202 3.00646 9.99305 4.58L10.003 6H5.99702L6.00699 4.58C6.01802 3.00646 6.01483 3.03771 6.20246 2.65809C6.31793 2.42446 6.43799 2.26065 6.61818 2.09103C6.89043 1.83468 7.21371 1.65496 7.52352 1.58775C7.74977 1.53865 8.23518 1.53809 8.46436 1.58665ZM11.9201 7.0955C12.0975 7.17871 12.2992 7.37412 12.3874 7.54806C12.4231 7.61846 12.465 7.75796 12.4805 7.85803C12.4993 7.97978 12.5061 8.97962 12.501 10.88L12.4934 13.72L12.4082 13.8997C12.26 14.2127 12.0016 14.419 11.6821 14.4796C11.4864 14.5167 4.51364 14.5167 4.31793 14.4796C3.99843 14.419 3.74008 14.2127 3.59183 13.8997L3.50668 13.72L3.49905 10.88C3.49393 8.97728 3.50074 7.97987 3.51964 7.85778C3.57627 7.49218 3.79218 7.21543 4.12918 7.0765L4.28002 7.01431L8.02668 7.0205L11.7734 7.02665L11.9201 7.0955Z" fill="white"/>
               </svg>
               {$_(`${type.toLowerCase()}.makeTxnButton`)}
-              <span class="ButtonAmount">{formatter.format(amount)} {currency}</span>
+              {#if !selectedPaymentMethod.HideAmountField}
+                <span class="ButtonAmount">{formatter.format(editedAmount ?? 0)} {currency}</span>
+              {/if}
             </button>
           {:else}
             <button class="PrimaryButton">
@@ -703,7 +708,8 @@
   {/if}
   {#if showConfirmModal}
     <cashier-confirm-modal>
-      <span slot="text">{$_(`${type.toLowerCase()}.confirmText`)} {formatter.format(amount)} {currency} ?</span>
+      <span slot="text">{$_(`${type.toLowerCase()}.confirmText`,
+              { values: !selectedPaymentMethod.HideAmountField ? { amount: formatter.format(editedAmount ?? 0), currency } : {amount: '', currency: ''}})}</span>
       <div slot="confirm">{$_(`${type.toLowerCase()}.confirmButton`)}</div>
     </cashier-confirm-modal>
   {/if}
@@ -793,6 +799,7 @@
     font-size: var(--emw--font-size-x-small, 12px);
     margin: 10px 0 5px;
     line-height: var(--emw--font-size-x-small, 12px);
+    white-space: pre-line;
   }
   .RedirectionNotification {
     height: 100%;
@@ -871,6 +878,9 @@
       margin: 0;
       padding: 0;
     }
+    &.Invalid:has(.Checkbox) {
+      border: 1px solid var(--emw--color-error, #FE0101);
+    }
   }
   .Alert {
     display: none;
@@ -945,12 +955,16 @@
     align-items: center;
     justify-content: center;
     gap: 5px;
+    &:has(.ButtonSpinner),
+    &:has(.ButtonSpinner):hover,
+    &:active {
+      background: var(--emw--color-active, #5C950F);
+    }
     .ButtonAmount {
       font-weight: 600;
     }
     .ButtonSpinner {
       animation: loading-spinner 1s linear infinite;
-      background: var(--emw--color-active, #5C950F);
     }
     &[disabled] {
       background: var(--emw--color-disabled, #99999980);
@@ -960,9 +974,6 @@
     &:hover {
       background: var(--emw--color-hover, #71B11B);
     }
-    &:active {
-      background: var(--emw--color-active, #5C950F);
-    }
   }
   .QRCode {
     width: 250px;

package/src/CashierMethodDetails.types.ts

@@ -12,8 +12,8 @@ export interface PaymentMethod {
     AmountMultiplier: number;
     RedirectionMode: Number;
     DisplayCurrency: PaymentMethodCurrencyConfig;
-    Currencies: Array<PaymentMethodCurrencyConfig>;
-    Fields: Array<PaymentMethodDetails>;
+    Currencies: PaymentMethodCurrencyConfig[];
+    Fields: PaymentMethodDetails[];
     Account: any;
     Logos: any;
     PredefinedAmounts: number[];
@@ -32,7 +32,7 @@ export interface PaymentMethodCurrencyConfig {
     Name: string;
     Label: string;
     Description: string;
-    Amounts: Array<number>;
+    Amounts: number[];
     MinAmountLimit: number;
     MaxAmountLimit: number;
 }
@@ -61,31 +61,3 @@ export interface PaymentMethodDetails {
     UseCopyButton: boolean;
     InputMask: string[];
 }
-
-export const FIELD_TYPES = {
-    0: 'Unknown',
-    1: 'Text',
-    2: 'Boolean',
-    3: 'Number',
-    4: 'Money',
-    5: 'DateTime',
-    6: 'Lookup',
-    7: 'IpAddress',
-    8: 'Date',
-    9: 'Time',
-    10: 'LookupCollection',
-    11: 'Hidden',
-    12: 'Label',
-    13: 'Password',
-    14: 'Link',
-    15: 'Image',
-    19: 'Html',
-    20: 'QRCode'
-};
-export const VISIBLE_FIELD_TYPES: string[] =
-    'Text,Number,Money,Boolean,Lookup,Date,Time,DateTime,Password,Label,Link,QRCode'.split(',');
-
-export enum RedirectionModeStringEnum {
-    Default = 'Default',
-    RedirectWithRetry = 'Redirect'
-}

package/src/translations.js

@@ -21,12 +21,12 @@ export const TRANSLATIONS = {
     "invalidFieldError": "{field} is invalid",
     "deposit": {
       "makeTxnButton": "DEPOSIT",
-      "confirmText": "Are you sure you want to deposit?",
+      "confirmText": "You\'re going to deposit {amount} {currency} to your account",
       "confirmButton": "Ok",
     },
     "withdraw": {
       "makeTxnButton": "WITHDRAW",
-      "confirmText": "Are you sure you want to withdraw?",
+      "confirmText": "You\'re going to withdraw {amount} {currency} from your account",
       "confirmButton": "Ok",
     }
   }