@everymatrix/cashier-page 1.35.0 → 1.36.1

package/index.html

@@ -36,7 +36,7 @@
               local="en-US"
               channel="Desktop"
               type="Deposit"
-              session="b54930b8-1e79-496b-bb20-ac07d5098e39"
+              session="935b0211-7b3d-4454-8b0a-f8e66099c18f"
               translationurl="https://static.everymatrix.com/mmstage/translations/1995/mm-localization-en.json"
               assetsurl="https://static.everymatrix.com/mmstage/cashier/operator-assets/1995"
               endpoint="https://odeonbet-api.stage.norway.mazeday.com"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/cashier-page",
-  "version": "1.35.0",
+  "version": "1.36.1",
   "main": "index.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cad27ef6706d0e17f1eda3810fee31f1ec373fa9"
+  "gitHead": "5ffc382ef56d1d1736e48fec65bba06fbdadc8cf"
 }

package/src/CashierPage.svelte

@@ -1,12 +1,13 @@
 <svelte:options tag={null} />
 <script lang="ts">
   import {onMount} from "svelte";
-  import {_, addNewMessages, setLocale} from './i18n';
+  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
   import {TRANSLATIONS} from './translations';
 
   import type {PaymentMethod} from "./CashierPage.types";
   import {TxnChannel, TxnType, ResponseCode} from "./CashierPage.types";
 
+  import '@everymatrix/cashier-header';
   import '@everymatrix/cashier-methods-list';
   import '@everymatrix/cashier-method-details';
   import '@everymatrix/cashier-error';
@@ -43,6 +44,7 @@
   export let assetsurl: string;
   export let type: string = TxnType.Deposit;
   export let channel: string = TxnChannel.Desktop;
+  export let showheader: string = 'true';
   export let numberofmethodsshown: string;
   export let clientstyling:string = '';
   export let clientstylingurl:string = ''
@@ -75,13 +77,9 @@
   let hideAmountField: boolean;
   let redirectMode: RedirectionModeStringEnum;
   let modalErrorMessage: string;
+  let title: string;
+  let showHeaderBack: string;
 
-  $: endpoint && session && customerid && lang && channel && type && successurl && failurl && cancelurl && getPlayerSession();
-  $: clientstyling && customStylingContainer && setClientStyling();
-  $: clientstylingurl && customStylingContainer && setClientStylingURL();
-  $: lang && setActiveLanguage();
-  $: lang && translationurl && setTranslationUrl();
-  $: widgetWidth && setDevice();
   const setActiveLanguage = ():void => {
     setLocale(lang);
   }
@@ -150,12 +148,28 @@
             .catch(error => console.log(error))
   }
 
+  const setTitle = () => {
+     if (showMethodDetailsPage && isMobileWidth() && !errorResponseCode) {
+       title = selectedPaymentMethod.Label || selectedPaymentMethod.Name;
+       showHeaderBack = 'true'
+     } else {
+       title = `header.${type.toLowerCase()}`
+       showHeaderBack = 'false'
+     }
+  }
   const setDevice = () => {
-    mobileView = (widgetWidth < 750).toString();
+    mobileView = isMobileWidth().toString();
+    setTitle()
+  }
+
+  const isMobileWidth = () => {
+    return widgetWidth < 750
   }
   const selectPayMeth = (e) => {
     selectedPaymentMethod.Name = e.detail.Name;
+    selectedPaymentMethod.Label = e.detail.Label
     showMethodDetailsPage = true;
+    setTitle()
   }
   const setErrorResponseCode = () => {
     window.postMessage({type: 'ErrorResponseCode', errorResponseCode}, window.location.href);
@@ -184,6 +198,7 @@
 
   const hideMethodDetails = (e) => {
     showMethodDetailsPage = !e.detail.hideMethodDetails
+    setTitle()
   }
 
   onMount(() => {
@@ -214,13 +229,14 @@
 
   const messageHandler = (e:any) => {
     if (e.data.type === 'ShowSessionError') {
-      errorMessage = e.data.error
+      errorMessage = e.data.error;
     }
     if (e.data.type === 'ToggleDisableActionOnPage') {
-      isProcessingTxn = e.data.disable
+      isProcessingTxn = e.data.disable;
     }
     if (e.data.type === 'ErrorResponseCode') {
       errorResponseCode = e.data.errorResponseCode;
+      setTitle();
     }
     if (e.data.type === 'ShowConfirmModal') {
       showConfirmModal = e.data.showConfirmModal;
@@ -229,13 +245,21 @@
     }
     if (e.data.type === 'RedirectInfo') {
       redirectUrl = e.data.redirectUrl;
-      redirectMode = e.data.redirectMode;    
+      redirectMode = e.data.redirectMode;
+      setTitle();
     }
     if (e.data.type === 'ShowCashierModal') {
       modalErrorMessage = e.data.modalErrorMessage;
     }
   }
 
+  $: endpoint && session && customerid && lang && channel && type && successurl && failurl && cancelurl && getPlayerSession();
+  $: clientstyling && customStylingContainer && setClientStyling();
+  $: clientstylingurl && customStylingContainer && setClientStylingURL();
+  $: lang && setActiveLanguage();
+  $: lang && setTitle();
+  $: translationurl && setTranslationUrl();
+  $: widgetWidth && setDevice();
 </script>
 <div class={showMethodDetailsPage ? "CashierPageWidget BothSections" : "CashierPageWidget"}
      bind:this={customStylingContainer}
@@ -245,12 +269,26 @@
     <div class="DisablePage"></div>
   {/if}
   {#if lang}
-    <div class="Header">{ $_(`header.${type.toLowerCase()}`)}</div>
+    {#if !!showheader && showheader !== 'false'}
+      <cashier-header class="Header"
+              {lang}
+              {translationurl}
+              {title}
+              {clientstylingurl}
+              {clientstyling}
+              showbackbutton="{showHeaderBack}"
+      >
+      </cashier-header>
+    {/if}
     {#if redirectUrl && redirectMode === RedirectionModeStringEnum.Default}
       <div class="IframeRedirect">
         <cashier-iframe-redirect
-                lang="{lang}"
-                translationurl="{translationurl}"
+                {lang}
+                {translationurl}
+                {title}
+                {clientstylingurl}
+                {clientstyling}
+                showbackbutton="{showheader}"
                 iframeurl="{redirectUrl}"
         ></cashier-iframe-redirect>
       </div>
@@ -265,9 +303,12 @@
       >
       <div slot="button" class="ModalButton" on:click={hideModal}>{$_('closeModal')}</div>
       </cashier-error>
-    </cashier-modal>  
+    </cashier-modal>
     {#if showConfirmModal}
-    <cashier-confirm-modal>
+    <cashier-confirm-modal
+              {clientstylingurl}
+              {clientstyling}
+    >
       <span slot="text">{ confirmAmount && !hideAmountField ? $_(`${type.toLowerCase()}.confirmTextWithAmount`,
               { values:{ amount: formatter.format(confirmAmount), currency }}): $_(`${type.toLowerCase()}.confirmText`)}</span>
       <div slot="confirm">{$_(`${type.toLowerCase()}.confirmButton`)}</div>
@@ -289,6 +330,7 @@
                 {clientstyling}
                 {assetsurl}
                 session="{xPaymentSessionToken}"
+                ismobileview="{mobileView}"
         ></cashier-methods-list>
       </div>
       <div class="CashierMethodDetailsWrapper">
@@ -312,7 +354,7 @@
       </div>
     </div>
     {:else}
-    <cashier-error
+    <cashier-error class="Error"
           {lang}
           {assetsurl}
           {translationurl}
@@ -339,10 +381,10 @@
     }
   }
   @mixin container-height {
-    height: calc(100% - 66px);
+    height: 100%;
     overflow: auto;
-    padding: var(--emw--spacing-x-small, 7px) var(--emw--spacing-small, 12px) var(--emw--spacing-small, 12px) var(--emw--spacing-small, 12px);
     box-sizing: border-box;
+    scrollbar-gutter: stable both-edges;
   }
   .DisablePage {
     container-type: inline-size;
@@ -360,15 +402,35 @@
     container-name: deposit-page;
     height: inherit;
     position: relative;
+    box-sizing: border-box;
     .CashierMethodDetailsWrapper {
       display: none;
     }
+    &:has(.Header) {
+      border-radius: 6px;
+      border: 1px solid var(--mmw--color-grey-105, #E8E9EB);
+      box-sizing: border-box;
+      .Content, .CashierPage, .DisablePage {
+        height: calc(100% - var(--mmw--header-height, 32px));
+      }
+      .DisablePage {
+        top: var(--mmw--header-height, 32px);
+      }
+    }
   }
-  .BothSections {
-    .Header {
-      transition: all 1s;
-      width: 100%;
+  .Content {
+    height: 100%;
+    position: relative;
+  }
+  .CashierMethodListWrapper {
+    @include container-height;
+    padding: var(--emw--spacing-large, 20px) var(--emw--spacing-x-small, 10px) var(--emw--spacing-small, 12px) var(--emw--spacing-x-small, 10px);
+    width: 50%;
+    &::-webkit-scrollbar {
+      border-right: none;
     }
+  }
+  .BothSections {
     .CashierMethodDetailsWrapper {
       @include container-height;
       display: block;
@@ -376,16 +438,11 @@
       width: 50%;
       justify-content: center;
     }
-  }
-  .Header {
-    width: 50%;
-    display: flex;
-    margin: auto;
-    padding: var(--emw--spacing-medium, 15px) 0;
-    font-size: var(--emw--font-size-small, 14px);
-    font-weight: bold;
-    color: var(--mmw--color-grey-10, #111);
-    line-height:  var(--emw--font-size-small, 14px);
+    .CashierMethodListWrapper {
+      &::-webkit-scrollbar {
+        border-right: 1px solid var(--emw--color-gray-100, #E0E0E0 );
+      }
+    }
   }
   .CashierPage {
     position: relative;
@@ -394,13 +451,7 @@
     justify-content: center;
     height: inherit;
   }
-  .CashierMethodListWrapper {
-    @include container-height;
-    width: 50%;
-    &::-webkit-scrollbar {
-      border-right: 1px solid var(--emw--color-gray-100, #E0E0E0 );
-    }
-  }
+
   cashier-method-details {
     width: 0;
   }
@@ -421,15 +472,13 @@
     background-color: var(--emw--color-white, #FFF);
   }
   @container deposit-page (max-width:750px) {
-    .Header {
-      width: 100%;
-    }
     .CashierPage, .BothSections .CashierPage {
       flex-direction: column;
       justify-content: flex-start;
       gap: 0;
       cashier-methods-list, cashier-method-details, .CashierMethodDetailsWrapper {
         width: 100%;
+        height: 100%;
       }
     }
     cashier-method-details {

package/src/translations.js

@@ -2,10 +2,6 @@ export const TRANSLATIONS = {
   "en": {
     "loading": "Loading...",
     "closeModal": "CLOSE",
-    "header": {
-      "deposit": "Deposit",
-      "withdraw": "Withdraw"
-    },
     "deposit": {
       "makeTxnButton": "DEPOSIT",
       "confirmText": "You're going to deposit to your account",
@@ -25,5 +21,25 @@ export const TRANSLATIONS = {
       "deposit": "Uplata",
       "withdraw": "Povlačenje"
     }
+  },
+  "tr": {
+    "loading": "Yükleniyor...",
+    "closeModal": "KAPAT",
+    "header": {
+      "deposit": "Yatır",
+      "withdraw": "Çek"
+    },
+    "deposit": {
+      "makeTxnButton": "YATIR",
+      "confirmText": "Hesabınıza yatırıyorsunuz",
+      "confirmTextWithAmount": "Hesabınıza {amount} {currency} yatırıyorsunuz",
+      "confirmButton": "Tamam"
+    },
+    "withdraw": {
+      "makeTxnButton": "ÇEK",
+      "confirmText": "Hesabınızdan çekiyorsunuz",
+      "confirmTextWithAmount": "Hesabınıza {amount} {currency} yatırıyorsunuz",
+      "confirmButton": "Tamam"
+    }
   }
-}
+};