@everymatrix/cashier-method-details 1.24.4 → 1.24.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/cashier-method-details",
-  "version": "1.24.4",
+  "version": "1.24.6",
   "main": "index.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6b5a6d6584217df74f6dfeed6858faa39a7f971d"
+  "gitHead": "83c764a2fd7fd527c06d72f0a539fde3c531bd49"
 }

package/src/CashierMethodDetails.svelte

@@ -2,6 +2,7 @@
 
 <script lang="ts">
   import { onMount } from "svelte";
+  import { isMobile } from 'rvhelper';
   import { _, addNewMessages, setupI18n, setLocale } from './i18n';
   import { TRANSLATIONS } from './translations';
 
@@ -143,6 +144,10 @@
   let qrCodeScriptSrc: string = 'https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js';
   let blankPageTarget: string = '_blank';
   let externalLink: string = '';
+  let mobileView:boolean = false;
+  let userAgent:string = window.navigator.userAgent;
+  let mediaQuery = window.matchMedia('(max-width: 750px)');
+  let innerWidth: number;
 
   $: endpoint && session && selectedpaymentmethodname && currency && getPaymentDetails();
   $: clientstyling && customStylingContainer && setClientStyling();
@@ -150,7 +155,8 @@
   $: lang && setActiveLanguage();
   $: lang && translationurl && setTranslationUrl();
   $: selectedpaymentmethodname && qrCodeContainer.length && generateQr();
-
+  $: innerWidth && onWindowResize();
+  $: mobileView.toString() && hideMethodsList()
   const generateQr = () => {
     qrCodeContainer.forEach(elem => {
       if (elem && elem.innerText) {
@@ -206,6 +212,7 @@
       selectedPaymentMethod = data.PaymentMethod;
       fields = selectedPaymentMethod.Fields && selectedPaymentMethod.Fields.map(field => new PaymentMethodDetails(field));
       prepareFields = {};
+      hideMethodsList();
     })
   }
 
@@ -231,6 +238,10 @@
             });
   }
 
+  const onWindowResize = () => {
+    mobileView = isMobile(userAgent) || mediaQuery.matches
+  }
+
   onMount(() => {
     window.addEventListener('closeModal', closeModal, false);
     window.addEventListener('confirmModal', confirmTxn, false);
@@ -244,7 +255,6 @@
       window.removeEventListener('closeIframe', closeIframe);
       window.removeEventListener('notificationButtonClick', retryRedirect);
     }
-
   });
 
   const closeAllLookups = (e) => {
@@ -289,6 +299,33 @@
       showConfirmModal = true;
     })
   }
+
+  const backToMethodList = () => {
+    dispatchEvent(new CustomEvent('backToMethodList', {
+      bubbles: true,
+      cancelable: true,
+      composed: true
+    }));
+    hidePaymentDetails()
+  }
+
+  const hidePaymentDetails = () => {
+    dispatchEvent(new CustomEvent('hidePaymentDetails', {
+      detail: { hideMethodDetails: mobileView },
+      bubbles: true,
+      cancelable: true,
+      composed: true
+    }));
+  }
+
+  const hideMethodsList = () => {
+    dispatchEvent(new CustomEvent('hideMethodsList', {
+      detail: { hideMethodsList: mobileView },
+      bubbles: true,
+      cancelable: true,
+      composed: true
+    }));
+  }
   const closeIframe = () => {
     redirectUrl = null;
   }
@@ -341,10 +378,11 @@
   }
 
 </script>
+<svelte:window bind:innerWidth={innerWidth} />
 <svelte:head>
   <script src={qrCodeScriptSrc}></script>
 </svelte:head>
-<div class="CashierMethodDetails">
+<div class="CashierMethodDetails" bind:this={customStylingContainer}>
   {#if isTranslationLoaded && selectedPaymentMethod.Name}
     <div class="MethodsDetails">
       <form on:submit|preventDefault={prepareTxn}>
@@ -356,6 +394,9 @@
             <div class="SelectedLogoDescription">
               {selectedPaymentMethod.Label}
             </div>
+            {#if mobileView}
+              <div on:click={() => backToMethodList()} class="ChangePaymeth">{$_('change')}</div>
+            {/if}
           </div>
           {#if !selectedPaymentMethod.HideAmountField}
           <div class="Amount">
@@ -530,6 +571,13 @@
         max-width: 56px;
       }
     }
+    .ChangePaymeth {
+      margin-left: auto;
+      cursor: pointer;
+      color: var(--emw--color-black, #111);
+      font-size: var(--emw--font-size-small, 14px);
+      text-decoration-line: underline;
+    }
   }
   .RedirectionNotification {
     height: 100%;

package/src/translations.js

@@ -13,6 +13,7 @@ export const TRANSLATIONS = {
     "processingButton": "Processing...",
     "generalMin": "Min",
     "generalMax": "Max",
-    "amountPlaceholder": "0.00"
+    "amountPlaceholder": "0.00",
+    "change": "Change"
   },
 };