@everymatrix/cashier-methods-list 1.24.4 → 1.24.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/cashier-methods-list",
-  "version": "1.24.4",
+  "version": "1.24.5",
   "main": "index.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6b5a6d6584217df74f6dfeed6858faa39a7f971d"
+  "gitHead": "9f40283344cfa9ed2c6a61b7a0c27af586f19c3b"
 }

package/src/CashierMethodsList.svelte

@@ -3,7 +3,7 @@
   import { _, addNewMessages, setLocale } from './i18n';
   import { TRANSLATIONS } from './translations';
   import type { PaymentMethod } from './CashierMethodItem.types';
-  import {createEventDispatcher} from "svelte";
+  import {createEventDispatcher, onMount} from "svelte";
 
   export let lang:string = 'en';
   export let endpoint:string;
@@ -23,8 +23,9 @@
   let displayNone:boolean = false;
   let customStylingContainer:HTMLElement;
   let selectedPaymentMethod: string;
-  let methodsButtonToogleText: string = '';
+  let methodsButtonToggleText: string = '';
   let paymentMethodsToShow: PaymentMethod[] = [];
+  let showMerchantList: boolean = true;
 
   $: endpoint && session && customerid && getMetaData();
   $: lang && setActiveLanguage();
@@ -74,8 +75,8 @@
         ...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;
+      methodsButtonToggleText = (numberofmethodsshown && +numberofmethodsshown > 0 && paymentMethods.length > +numberofmethodsshown) ? $_('showAll') : '';
+      paymentMethodsToShow = methodsButtonToggleText ? paymentMethods.slice(0, +numberofmethodsshown) : paymentMethods;
     })
   }
 
@@ -102,7 +103,7 @@
   }
   const showAllMethods = () => {
     paymentMethodsToShow = paymentMethods;
-    methodsButtonToogleText = $_('showLess');
+    methodsButtonToggleText = $_('showLess');
   }
 
   const showLessMethods = () => {
@@ -110,8 +111,17 @@
     if (selectedPaymentMethod && !paymentMethodsToShow.find(item => item.Name === selectedPaymentMethod)) {
       paymentMethodsToShow.splice(0, 0, paymentMethods.find(item => item.Name === selectedPaymentMethod));
     }
-    methodsButtonToogleText = $_('showAll');
+    methodsButtonToggleText = $_('showAll');
   }
+
+  const showMethodList = () => {
+    showMerchantList = true;
+  }
+
+  const hideMethodList = (e) => {
+    showMerchantList = !e.detail.hideMethodsList;
+  }
+
   const setClientStyling = ():void => {
     let sheet = document.createElement('style');
     sheet.innerHTML = clientstyling;
@@ -134,8 +144,20 @@
             });
   }
 
+  onMount(() => {
+    window.addEventListener('backToMethodList', showMethodList, false);
+    window.addEventListener('hideMethodsList', hideMethodList, false);
+
+    return () => {
+      window.removeEventListener('backToMethodList', showMethodList);
+      window.removeEventListener('paymentMethodLoaded', hideMethodList);
+    }
+  });
+
 </script>
-<div>
+
+{#if showMerchantList }
+<div class="CashierMethodListWidget" bind:this={customStylingContainer}>
   <div class="CashierMethodList">
     {#each paymentMethodsToShow as payMeth, index}
     <div class="SelectorWrapper" on:click={() => selectPayMeth(payMeth)}
@@ -153,10 +175,11 @@
     </div>
       {/each}
   </div>
-  {#if methodsButtonToogleText}
-   <div class="ShowAllButton" on:click={() => showAllMethodsToggle()}>{methodsButtonToogleText}</div>
+  {#if methodsButtonToggleText}
+   <div class="ShowAllButton" on:click={() => showAllMethodsToggle()}>{methodsButtonToggleText}</div>
   {/if}
 </div>
+{/if}
 <style lang="scss">
 
   *,