@everymatrix/cashier-methods-list 1.25.0 → 1.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/cashier-methods-list",
-  "version": "1.25.0",
+  "version": "1.27.0",
   "main": "index.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "668756b576877a7c33679408591fa2b7f93e0f37"
+  "gitHead": "f6ec9c7a552b5acad22390148d440b8050572424"
 }

package/src/CashierMethodsList.svelte

@@ -6,6 +6,7 @@
   import {createEventDispatcher, onMount} from "svelte";
 
   export let lang:string = 'en';
+  export let local:string = 'en-US';
   export let endpoint:string;
   export let session:string;
   export let customerid: string;
@@ -26,6 +27,7 @@
   let methodsButtonToggleText: string = '';
   let paymentMethodsToShow: PaymentMethod[] = [];
   let showMerchantList: boolean = true;
+  let formatter = new Intl.NumberFormat(local, {minimumFractionDigits: 2 });
 
   $: endpoint && session && customerid && getMetaData();
   $: lang && setActiveLanguage();
@@ -73,21 +75,13 @@
     fetch(url, requestParams).then(res => res.json()).then(data => {
       paymentMethods = data.PaymentMethods.PaymentMethods.map((payMeth) => ({
         ...payMeth,
-        LogoUrl: payMeth.Logos && payMeth.Logos[0].LogoUrl ? `https:${payMeth.Logos[0].LogoUrl}` : '',
+        LogoUrl: payMeth.Logos && payMeth.Logos.length && payMeth.Logos[0].LogoUrl ? `https:${payMeth.Logos[0].LogoUrl}` : '',
       }));
       methodsButtonToggleText = (numberofmethodsshown && +numberofmethodsshown > 0 && paymentMethods.length > +numberofmethodsshown) ? $_('showAll') : '';
       paymentMethodsToShow = methodsButtonToggleText ? paymentMethods.slice(0, +numberofmethodsshown) : paymentMethods;
     })
   }
 
-  const setLimit = (payMeth): string => {
-    const minLabel = $_('generalMin');
-    const maxLabel = $_('generalMax');
-    const min = payMeth.DisplayCurrency.MinAmountLimit ? `${minLabel}: ${payMeth.DisplayCurrency.MinAmountLimit} ${payMeth.DisplayCurrency.Name}` : '';
-    const max = payMeth.DisplayCurrency.MaxAmountLimit ? `${maxLabel}: ${payMeth.DisplayCurrency.MaxAmountLimit} ${payMeth.DisplayCurrency.Name}` : '';
-    return `${min} ${payMeth.DisplayCurrency.MinAmountLimit && payMeth.DisplayCurrency.MaxAmountLimit ? '/' : ''} ${max}`;
-  }
-
   const selectPayMeth = (payMeth: PaymentMethod): void => {
     selectedPaymentMethod = payMeth.Name;
     dispatchEvent(new CustomEvent('selectPayMeth', {
@@ -169,8 +163,8 @@
         <span>{payMeth.Label || payMeth.Name}</span>
       </div>
       <div class="MethodLimits">
-        <span class="Limits">{$_('generalMin')} {payMeth.DisplayCurrency.MinAmountLimit} {payMeth.DisplayCurrency.Name}</span>
-        <span class="Limits">{$_('generalMax')} {payMeth.DisplayCurrency.MaxAmountLimit} {payMeth.DisplayCurrency.Name}</span>
+        <span class="Limits">{$_('generalMin')} {formatter.format(payMeth.DisplayCurrency.MinAmountLimit)} {payMeth.DisplayCurrency.Name}</span>
+        <span class="Limits">{$_('generalMax')} {formatter.format(payMeth.DisplayCurrency.MaxAmountLimit)} {payMeth.DisplayCurrency.Name}</span>
       </div>
     </div>
       {/each}
@@ -257,13 +251,13 @@
   }
   .ShowAllButton {
     cursor: pointer;
-    color: var(--emw--color-primary, #292929);
+    color: var(--emw--color-gray-300, #666);
     text-align: center;
     font-size: var(--emw--font-size-x-small, 12px);
     font-style: normal;
     font-weight: var(--emw--font-weight-semibold, 500);
+    background: var(--emw--color-gray-150, #F7F8FA);
     line-height: normal;
-    text-transform: uppercase;
     border: 1px solid var(--emw--color-gray-100, #E8E9EB);
     border-radius: var(--emw--border-radius-medium, 4px);
     margin: 12px auto;
@@ -272,6 +266,9 @@
     align-items: center;
     justify-content: center;
     width: 80%;
+    &:hover {
+      background: var(--emw--color-background, #FFF);
+    }
   }
 
 </style>

package/src/translations.js

@@ -2,11 +2,17 @@ export const TRANSLATIONS = {
   "en": {
     "generalMin": "Min",
     "generalMax": "Max",
-    "showAll": "Show All",
-    "showLess": "Show Less",
+    "showAll": "SHOW ALL",
+    "showLess": "SHOW LESS",
   },
   "uk": {
     "generalMin": "Мін",
     "generalMax": "Макс"
+  },
+  "hr": {
+    "generalMin": "Minimalno",
+    "generalMax": "Maksimalno",
+    "showAll": "Pokaži sve",
+    "showLess": "Prikaži manje"
   }
-};
+}