@everymatrix/cashier-page 1.27.8 → 1.28.0

package/index.html

@@ -18,7 +18,8 @@
     .header__logo svg { height: 50px; width: 50px; margin-right: 5px; }
     .header__name { color: #fff; }
     .header__name span { margin-right: 10px; font-weight: bold; }
-    .webcomponent { padding: 10px 20px; }
+    .webcomponent { padding: 10px 20px; height: calc(100svh - 150px); overflow-y:hidden; }
+     cashier-page { height: inherit; }
   </style>
   <header class="header">
     <div class="header__logo">
@@ -35,15 +36,18 @@
               local="en-US"
               channel="Desktop"
               type="Deposit"
-              session="a5265576-27de-4d68-bd8a-43a18c05a8f2"
+              session="2155bc46-0457-4137-8c90-59354b7449bd"
               translationurl="https://static.everymatrix.com/mmstage/translations/1995/mm-localization-en.json"
               assetsurl="https://static.everymatrix.com/mmstage/cashier/operator-assets/1995"
               endpoint="https://api-stage-odeonbet-norway.apiopp.com/"
               merchantid="1995"
               customerid="6246443"
-              currency="TRY"
-              amount="66.51"
+              currency="EUR"
+              amount="20"
               numberofmethodsshown="1"
+              dateformat = "d/m/Y"
+              timeformat = 'H:i'
+              dateandtimeformat = 'd/m/Y H:i'
       >
       </cashier-page>
   </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/cashier-page",
-  "version": "1.27.8",
+  "version": "1.28.0",
   "main": "index.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a253879627bd33dff3289ee4f53fbe05a7bfaad0"
+  "gitHead": "d291acb27fcd4cf8217ec1c98666c02bfb1aea9f"
 }

package/rollup.config.js

@@ -6,6 +6,7 @@ import livereload from 'rollup-plugin-livereload';
 import { terser } from 'rollup-plugin-terser';
 import sveltePreprocess from 'svelte-preprocess';
 import typescript from '@rollup/plugin-typescript';
+import postcss from 'rollup-plugin-postcss';
 const production = process.env.NODE_ENV === 'production';
 const dev = process.env.NODE_ENV === 'development';
 
@@ -18,6 +19,9 @@ export default {
     file: 'dist/cashier-page.js'
   },
   plugins: [
+    postcss({
+      extensions:['.css']
+    }),
     svelte({
       preprocess: sveltePreprocess(),
       compilerOptions: {

package/src/CashierPage.svelte

@@ -9,11 +9,15 @@
 
   import '@everymatrix/cashier-methods-list';
   import '@everymatrix/cashier-method-details';
+  import '@everymatrix/cashier-error';
 
   export let endpoint: string;
   export let session: string;
   export let lang: string = 'en';
   export let local: string = 'en-US';
+  export let dateformat: string = "d/m/Y";
+  export let timeformat: string = "H:i";
+  export let dateandtimeformat: string = 'd/m/Y H:i';
   export let translationurl: string;
   export let customerid: string;
   export let currency: string;
@@ -47,6 +51,7 @@
   let isProcessingTxn: boolean;
   let isTranslationLoaded: boolean;
   let showMethodDetailsPage: boolean = false;
+  let errorMessage: string;
 
   $: endpoint && session && customerid && lang && channel && type && getPlayerSession();
   $: clientstyling && customStylingContainer && setClientStyling();
@@ -94,13 +99,17 @@
         "CancelUrl": cancelUrl,
         "FailUrl": failUrl,
         "Language": lang,
-        "ProductType": "Casino"
       })
     };
-    fetch(url, requestParams).then(res => res.json()).then(data => {
-      xPaymentSessionToken = data.XPaymentSessionToken;
-      isLoading = false;
-    })
+    fetch(url, requestParams)
+            .then(res => res.json())
+            .then(data => {
+              if (data.error) {
+                errorMessage = data.error
+              }
+              xPaymentSessionToken = data.XPaymentSessionToken;
+              isLoading = false;
+            })
   }
 
   const selectPayMeth = (e) => {
@@ -137,13 +146,25 @@
   onMount(() => {
     window.addEventListener('selectPayMeth', selectPayMeth, false);
     window.addEventListener('hidePaymentDetails', hideMethodDetails, false);
+    window.addEventListener('message', messageHandler, false);
 
     return () => {
       window.removeEventListener('hidePaymentDetails', hideMethodDetails);
       window.removeEventListener('selectPayMeth', selectPayMeth);
+      window.removeEventListener('message', messageHandler);
     }
   });
 
+  const preventDefault = (e) => {
+    e.preventDefault();
+  }
+
+  const messageHandler = (e:any) => {
+    if (e.data.type == 'ShowSessionError') {
+      errorMessage = e.data.error
+    }
+  }
+
 </script>
 
 
@@ -151,10 +172,9 @@
   {#if lang}
     <div class="Header">{ $_(`header.${type.toLowerCase()}`)}</div>
   {/if}
-  <div class="CashierPage">
-    {#if isLoading}
-      <p class="Message">{$_('loading')}</p>
-    {:else}
+  {#if !errorMessage}
+    <div class="CashierPage">
+    <div class="CashierMethodListWrapper">
       <cashier-methods-list
               {lang}
               {local}
@@ -163,23 +183,42 @@
               {customerid}
               {currency}
               {numberofmethodsshown}
+              {clientstylingurl}
+              {clientstyling}
               session="{xPaymentSessionToken}"
       ></cashier-methods-list>
-    {/if}
-    <cashier-method-details
-            {lang}
-            {local}
-            {translationurl}
-            {endpoint}
-            {customerid}
-            {currency}
-            {amount}
-            {assetsurl}
-            {type}
-            selectedpaymentmethodname="{selectedPaymentMethod.Name}"
-            session="{xPaymentSessionToken}"
-    ></cashier-method-details>
-  </div>
+    </div>
+      <cashier-method-details
+              {lang}
+              {local}
+              {timeformat}
+              {dateformat}
+              {dateandtimeformat}
+              {translationurl}
+              {endpoint}
+              {customerid}
+              {currency}
+              {amount}
+              {assetsurl}
+              {type}
+              {clientstylingurl}
+              {clientstyling}
+              selectedpaymentmethodname="{selectedPaymentMethod.Name}"
+              session="{xPaymentSessionToken}"
+      ></cashier-method-details>
+    </div>
+    {:else}
+    <cashier-error
+          {lang}
+          {assetsurl}
+          {translationurl}
+          {clientstylingurl}
+          {clientstyling}
+          hidebuttons="true"
+    >
+      <span slot="text">{errorMessage}</span>
+    </cashier-error>
+  {/if}
 </div>
 
 
@@ -192,19 +231,24 @@
       transform: rotate(360deg)
     }
   }
+  @mixin container-height {
+    height: calc(100% - 44px);
+    overflow: auto;
+    padding: 7px 12px 12px 12px;
+    box-sizing: border-box;
+  }
   .CashierPageWidget {
     container-type: inline-size;
     container-name: deposit-page;
+    height: inherit;
   }
   .BothSections {
     .Header {
       transition: all 1s;
       width: 100%;
     }
-    .CashierPage {
-      gap: 23px;
-    }
     cashier-method-details {
+      @include container-height;
       transition: all 1s;
       width: 50%;
     }
@@ -224,10 +268,15 @@
     display: flex;
     flex-direction: row;
     justify-content: center;
+    height: inherit;
   }
-  cashier-methods-list {
+  .CashierMethodListWrapper {
+    @include container-height;
     width: 50%;
-  }
+    &::-webkit-scrollbar {
+      border-right: 1px solid var(--emw--color-gray-100, #E0E0E0 );
+    }
+  } 
   cashier-method-details {
     width: 0;
   }
@@ -248,8 +297,24 @@
     .BothSections cashier-method-details {
       display: flex;
     }
-    .BothSections cashier-methods-list {
+    .BothSections .CashierMethodListWrapper {
       display: none;
     }
+    .CashierMethodListWrapper {
+      width: 100%;
+    }
+  }
+  ::-webkit-scrollbar {
+    width: 4px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
   }
+  ::-webkit-scrollbar-thumb {
+    background: var(--emw--color-gray-100, #E8E9EB);
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--emw--color-gray-300, #666);
+  }
+
 </style>