@everymatrix/cashier-methods-list 1.20.11 → 1.22.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/cashier-methods-list",
-  "version": "1.20.11",
+  "version": "1.22.1",
   "main": "index.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d136b207b6b54732d60b088559d888f159073b0a"
+  "gitHead": "d365a5415b2dc80d690d889ddf05b1b22a5469bf"
 }

package/src/CashierMethodItem.types.ts

@@ -4,6 +4,5 @@ export interface PaymentMethod {
   MinLimit: number;
   MaxLimit: number;
   Currency: string;
-  LimitString?: string;
   LogoUrl: string;
 }

package/src/CashierMethodsList.svelte

@@ -10,6 +10,7 @@
   export let session:string;
   export let customerid: string;
   export let currency: string;
+  export let numberofmethodsshown: string;
   export let translationurl:string='';
   export let clientstyling:string = '';
   export let clientstylingurl:string = ''
@@ -22,6 +23,8 @@
   let displayNone:boolean = false;
   let customStylingContainer:HTMLElement;
   let selectedPaymentMethod: string;
+  let methodsButtonToogleText: string = '';
+  let paymentMethodsToShow: PaymentMethod[] = [];
 
   $: endpoint && session && customerid && getMetaData();
   $: lang && setActiveLanguage();
@@ -62,7 +65,6 @@
     headers.append("X-Payment-Session-Token", `${session}`);
     const requestParams:RequestInit = {
       method: "POST",
-      mode: "cors",
       headers: headers,
       body: JSON.stringify({
         "Currency": currency,
@@ -71,9 +73,10 @@
     fetch(url, requestParams).then(res => res.json()).then(data => {
       paymentMethods = data.PaymentMethods.PaymentMethods.map((payMeth) => ({
         ...payMeth,
-        LimitString: setLimit(payMeth),
         LogoUrl: payMeth.Logos && payMeth.Logos[0].LogoUrl ? `https:${payMeth.Logos[0].LogoUrl}` : '',
       }));
+      methodsButtonToogleText = (numberofmethodsshown && +numberofmethodsshown > 0 && paymentMethods.length > +numberofmethodsshown) ? $_('showAll') : '';
+      paymentMethodsToShow = methodsButtonToogleText ? paymentMethods.slice(0, +numberofmethodsshown) : paymentMethods;
     })
   }
 
@@ -91,10 +94,25 @@
       detail: payMeth,
       bubbles: true,
       cancelable: true,
-      composed: true // makes the event jump shadow DOM boundary
+      composed: true
     }));
   }
 
+  const showAllMethodsToggle = () => {
+    paymentMethodsToShow == paymentMethods ? showLessMethods() : showAllMethods()
+  }
+  const showAllMethods = () => {
+    paymentMethodsToShow = paymentMethods;
+    methodsButtonToogleText = $_('showLess');
+  }
+
+  const showLessMethods = () => {
+    paymentMethodsToShow = paymentMethods.slice(0, +numberofmethodsshown);
+    if (selectedPaymentMethod && !paymentMethodsToShow.find(item => item.Name === selectedPaymentMethod)) {
+      paymentMethodsToShow.splice(0, 0, paymentMethods.find(item => item.Name === selectedPaymentMethod));
+    }
+    methodsButtonToogleText = $_('showAll');
+  }
   const setClientStyling = ():void => {
     let sheet = document.createElement('style');
     sheet.innerHTML = clientstyling;
@@ -118,36 +136,30 @@
   }
 
 </script>
-
-<div class="CashierMethodItem">
-  {#each paymentMethods as payMeth, index}
-  <div class="SelectorWrapper" on:click={() => selectPayMeth(payMeth)}
-       class:checked="{selectedPaymentMethod === payMeth.Name}" on:keyup={() => {}}>
-    <div class="LogoSelector">
+<div>
+  <div class="CashierMethodList">
+    {#each paymentMethodsToShow as payMeth, index}
+    <div class="SelectorWrapper" on:click={() => selectPayMeth(payMeth)}
+         class:checked="{selectedPaymentMethod === payMeth.Name}" on:keyup={() => {}}>
       <div class="MethodLogo">
         <img src={payMeth.LogoUrl} alt={payMeth.Label} />
       </div>
-      <div class="MethodInfo">
-        <div class="MethodTitle">
-          <span>{payMeth.Label || payMeth.Name}</span>
-        </div>
-        <div class="MethodLimits">
-          <span class="Limits">{payMeth.LimitString}</span>
-        </div>
+      <div class="MethodTitle">
+        <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>
       </div>
     </div>
-    <div class="RadioButtonSelector">
-      <input type=radio id={index} name="radioGroup"
-             bind:group={paymethnames} value={payMeth.Name}>
-      <label for={index}></label>
-    </div>
+      {/each}
   </div>
-    {/each}
+  {#if methodsButtonToogleText}
+   <div class="ShowAllButton" on:click={() => showAllMethodsToggle()}>{methodsButtonToogleText}</div>
+  {/if}
 </div>
-
 <style lang="scss">
 
-
   *,
   *::before,
   *::after {
@@ -158,120 +170,86 @@
     outline: none;
     box-sizing: border-box;
   }
-  .CashierMethodItem {
+  .CashierMethodList {
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    background: var(--emw--color-background, #FFF);
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.10);
+    width: 100%;
+    border-radius: var(--emw--border-radius-large, 6px);
     .SelectorWrapper {
       display: flex;
       flex-direction: row;
       align-items: center;
-      justify-content: space-between;
+      justify-content: left;
       cursor: pointer;
       position: relative;
-      height: 71px;
-      width: 390px;
-      background: var(--mm-selector-background-color, #F8F9FA);
-      box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
+      height: 52px;
       box-sizing: border-box;
-      border-radius: 5px;
-      padding: 1% 1% 1% 2%;
-      .LogoSelector {
-        width: calc(100% - 19px);
-        overflow: hidden;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: flex-start;
+      border-bottom: 1px solid var(--emw--color-gray-100, #E8E9EB);
+      padding: 0 12px;
+      &:first-child {
+        border-radius: var(--emw--border-radius-large, 6px) var(--emw--border-radius-large, 6px) 0 0;
       }
-      .MethodLogo {
-        margin-right: 19px;
-        width: 82px;
-        height: 47px;
-        border: 1px solid var(--mm-selector-label-color, #CED4DA);
-        box-sizing: content-box;
-        border-radius: 2px;
-        img {
-          width: inherit;
-          height: inherit;
-        }
-      }
-      .MethodInfo {
-        display: flex;
-        flex-direction: column;
-        width: calc(100% - 70px);
-        gap: 8px;
-      }
-      .MethodLimits {
-        height: 16px;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        .Limits {
-          max-width: 100%;
-          white-space: nowrap;
-          font-size: 14px;
-          color: var(--mm-selector-limits-color, #495057);
-          font-weight: 400;
-          font-style: normal;
-        }
-      }
-      .RadioButtonSelector {
-        position: static;
-        height: 30px;
-        width: 30px;
-        input {
-          height: 0;
-          width: revert;
-          padding: 0;
-          border: none;
-          display: none;
-        }
-        label {
-          pointer-events: none;
-          position: relative;
-          cursor: pointer;
-          line-height: 20px;
-          display: block;
-          color: var(--mm-selector-label-color, #CED4DA);
-        }
-        label::before {
-          left: 0;
-          content: "";
-          position: absolute;
-          top: 0;
-          width: 30px;
-          height: 30px;
-          border: 3px solid var(--mm-selector-label-color, #CED4DA);
-          border-radius: 100%;
-          background: var(--emfe-w-color-white, #FFFFFF);
-          box-sizing: border-box;
-        }
-        label::after {
-          left: 6px;
-          opacity: 1;
-          content: "";
-          width: 18px;
-          height: 18px;
-          background: var(--mm-selector-color-selected, #388D79);
-          position: absolute;
-          top: 6px;
-          border-radius: 100%;
-          transition: all 0.2s ease;
-        }
+      &:last-child {
+        border-radius: 0 0 var(--emw--border-radius-large, 6px) var(--emw--border-radius-large, 6px);
       }
       &.checked {
-        border: 1px solid var(--mm-selector-color-selected, #388D79);
-        input + label:after {
-          opacity: 1;
-        }
+        background: var(--emw--color-background-secondary, #F9F9F9);
+      }
+    }
+    .MethodLogo {
+      margin-right: 7px;
+      width: 56px;
+      height: 32px;
+      background: var(--emw--color-background, #FFF);
+      border: 1px solid var(--emw--color-gray-100, #E8E9EB);
+      border-radius: var(--emw--border-radius-large, 6px);
+      overflow: hidden;
+      img {
+        width: inherit;
+        height: inherit;
       }
-      &:not(.checked) {
-        input + label:after {
-          opacity: 0;
-        }
+    }
+    .MethodTitle {
+      color: var(--emw--color-black, #111);
+      font-size: var(--emw--font-size-small, 14px);
+      word-break: break-all;
+      font-feature-settings: 'numr' on;
+    }
+    .MethodLimits {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      margin-left: auto;
+      .Limits {
+        max-width: 100%;
+        white-space: nowrap;
+        font-size: var(--emw--font-size-2x-small, 11px);
+        line-height: var(--emw--size-small, 14px);
+        color: var(--emw--color-gray-300, #666);
+        font-weight: var(--emw--font-weight-normal, 400);
+        font-style: normal;
       }
     }
   }
+  .ShowAllButton {
+    cursor: pointer;
+    color: var(--emw--color-primary, #292929);
+    text-align: center;
+    font-size: var(--emw--font-size-x-small, 12px);
+    font-style: normal;
+    font-weight: var(--emw--font-weight-semibold, 500);
+    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;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 80%;
+  }
 
 </style>

package/src/translations.js

@@ -1,7 +1,9 @@
 export const TRANSLATIONS = {
   "en": {
     "generalMin": "Min",
-    "generalMax": "Max"
+    "generalMax": "Max",
+    "showAll": "Show All",
+    "showLess": "Show Less",
   },
   "uk": {
     "generalMin": "Мін",