@everymatrix/casino-header-controller 1.22.10 → 1.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-header-controller",
-  "version": "1.22.10",
+  "version": "1.23.0",
   "main": "dist/casino-header-controller.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -37,5 +37,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "38495c8b7fed86d85f3362fe6419369936e0a28a"
+  "gitHead": "e1f96f1273bd4af5ca8e311c90006f51ca00a642"
 }

package/src/CasinoHeaderController.svelte

@@ -9,6 +9,8 @@
   import '@everymatrix/casino-slider';
   import '@everymatrix/casino-hamburger-menu';
   import '@everymatrix/player-account-balance-modal';
+  import '@everymatrix/player-deposit';
+
   import everymatrixLogo from './images/everymatrix-logo-white.png';
 
   export let session:string = '';
@@ -25,6 +27,9 @@
   export let countryflagheader:string = 'false';
   export let displaybalanceoption:string = 'All';
   export let countryflaghamburger:string = 'false';
+  export let shortcashierenabled:string = '';
+  export let hasdefaultamount:string = '';
+  export let playercurrency: string ='';
 
   export let actionevent:string = '';
 
@@ -91,7 +96,8 @@
   let language:string = '';
   let languagesArray:Array<string> = [];
   let hamburgerMenuActive:boolean = false;
-  let logoPath:string = '';
+  let logoPath:string = ''; 
+  let shortCashierActivated:boolean = false;
 
   const menuAction = (data: any) => {
     switch (data) {
@@ -100,7 +106,7 @@
         window.postMessage({type: 'OpenLoginRegisterModal', transition: 'Login' }, window.location.href);
 
         //Analytics event
-        if(typeof gtag == 'function'){
+        if (typeof gtag == 'function'){
           gtag('event', 'OpenLoginModal', {
             'context': 'HeaderController'
           });
@@ -112,7 +118,7 @@
         window.postMessage({type: 'OpenLoginRegisterModal', transition: 'Register'}, window.location.href);
 
         //Analytics event
-        if(typeof gtag == 'function'){
+        if (typeof gtag == 'function'){
           gtag('event', 'OpenRegisterModal', {
             'context': 'HeaderController'
           });
@@ -128,10 +134,15 @@
         break;
 
       case 'deposit':
-        window.postMessage({type: 'GoToDeposit'}, window.location.href);
+        if (shortcashierenabled) {
+          shortCashierActivated = true;
+          window.postMessage({ type: 'DisableScroll' }, window.location.href);
+        } else {
+          window.postMessage({type: 'GoToDeposit'}, window.location.href);
+        }
 
         //Analytics event
-        if(typeof gtag == 'function'){
+        if (typeof gtag == 'function'){
           gtag('event', 'GoToDeposit', {
             'context': 'HeaderController'
           });
@@ -173,6 +184,19 @@
           createCMSUrls();
           getHeaderMenusData(headerURL);
           break;
+
+        case 'OpenShortCashier':
+          menuAction('deposit');
+          break;
+        
+        case 'RequestHeaderHeight':
+          window.postMessage({ type: 'HeaderHeight', headerHeight: customStylingContainer.clientHeight }, window.location.href);
+          break;
+      }
+      switch(e.data.redirect) {
+        case 'mm-wm-hc-init-deposit-quick':
+          closeShortCashier();
+          break;
       }
     }
   }
@@ -182,6 +206,12 @@
     sessionID = session;
   }
 
+  const closeShortCashier = (event?) => {
+    shortCashierActivated = false;
+    window.postMessage({ type: 'EnableScroll' }, window.location.href);
+    event.stopPropagation();
+  }
+
   const createCMSUrls = () => {
     headerURL = new URL(`${cmsendpoint}/${selectedLanguage.toLowerCase()}/menu`)
     hamburgerURL = new URL(`${cmsendpoint}/${selectedLanguage.toLowerCase()}/hamburger-menu`);
@@ -266,6 +296,7 @@
 
   const getHeaderMenusData = (url:any):Promise<any> => {
     isLoading = true;
+  
     return new Promise((resolve, reject) => {
       fetch(url)
         .then((res: any) => res.json())
@@ -403,7 +434,33 @@
         <div class="HeaderTopActions" part="HeaderTopActions">
           <div class="HeaderItemsMenu PrimaryMenu" part="HeaderItemsMenu PrimaryMenu">
             <player-account-balance-modal {session} {userid} {endpoint} {lang} {clientstyling} {clientstylingurl} {customlocaleidentifier} {gmversion} {displaybalanceoption} {currencyseparator} {currencydecimal} {currencyprecision} />
-            <div class="Item ItemDeposit" part="Item ItemDeposit" on:click={() => menuAction('deposit')}>{$_('deposit')}</div>
+            <div>
+              <div class="Item ItemDeposit" part="Item ItemDeposit" on:click={() => menuAction('deposit')}>{$_('deposit')}</div>
+              {#if shortCashierActivated}
+                <div class="ShortCashierWindow" on:click={(event) => closeShortCashier(event)}></div>
+                <div class="ShortCashierContainerWrapperMobile">
+                  <div class="ShortCashierContainerMobile">
+                    <div class="ClosePopUpButtonShortCashier" on:click={(event) => closeShortCashier(event)}>
+                      <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
+                        <line x1="2" y1="2" x2="18" y2="18" stroke="black" stroke-width="2"/>
+                        <line x1="18" y1="2" x2="2" y2="18" stroke="black" stroke-width="2"/>
+                      </svg>
+                    </div>
+                    <player-deposit
+                      {endpoint}
+                      {session}
+                      playerid={userid}
+                      {lang}
+                      {hasdefaultamount}
+                      {playercurrency}
+                      {shortcashierenabled}
+                      {clientstyling}
+                      {clientstylingurl}
+                    ></player-deposit>
+                  </div>
+                </div>
+              {/if}
+            </div>
             <div class="Item ItemAccount" part="Item ItemAccount" on:click={() => menuAction('myaccount')}>
               <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16.429" viewBox="0 0 15 16.429">
                 <defs>
@@ -456,7 +513,33 @@
         <div class="HeaderTopActions">
           <div class="HeaderItemsMenu PrimaryMenu">
             <player-account-balance-modal {session} {userid} {endpoint} {lang} {clientstyling} {clientstylingurl} {customlocaleidentifier} {gmversion} {displaybalanceoption} {currencyseparator} {currencydecimal} {currencyprecision}/>
-            <div class="Item ItemDeposit" part="Item ItemDeposit" on:click={() => menuAction('deposit')}>{$_('deposit')}</div>
+            <div>
+              <div class="Item ItemDeposit" part="Item ItemDeposit" on:click={() => menuAction('deposit')}>{$_('deposit')}</div>
+              {#if shortCashierActivated}
+                <div class="ShortCashierWindow" on:click={(event) => closeShortCashier(event)}></div>
+                <div class="ShortCashierContainerWrapper">
+                  <div class="ShortCashierContainer">
+                    <div class="ClosePopUpButtonShortCashier" on:click={(event) => closeShortCashier(event)}>
+                      <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
+                        <line x1="2" y1="2" x2="18" y2="18" stroke="black" stroke-width="2"/>
+                        <line x1="18" y1="2" x2="2" y2="18" stroke="black" stroke-width="2"/>
+                      </svg>
+                    </div>
+                    <player-deposit
+                      {endpoint}
+                      {session}
+                      playerid={userid}
+                      {lang}
+                      {hasdefaultamount}
+                      {playercurrency}
+                      {shortcashierenabled}
+                      {clientstyling}
+                      {clientstylingurl}
+                    ></player-deposit>
+                  </div>
+                </div>
+              {/if}
+            </div>
             <div class="Item ItemAccount" part="Item ItemAccount" on:click={() => menuAction('myaccount')}>
               <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16.429" viewBox="0 0 15 16.429">
                 <defs>
@@ -656,6 +739,22 @@
     font-family: inherit;
   }
 
+  @keyframes ModalBounce {
+    0% {
+      opacity: 0;
+      transform: translateY(20px); 
+    }
+    50% {
+      transform: translateY(-6px);
+      opacity: 0.8;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+
   input,
   textarea,
   button {font-family: inherit}
@@ -672,6 +771,88 @@
   display: inline-block;
 }
 
+.ClosePopUpButtonShortCashier{
+  margin-left: auto;
+  cursor: pointer;
+  svg {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+}
+
+.ShortCashierWindow{
+  background-color: rgba(0, 0, 0, 0.7);
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 16;
+}
+
+.ShortCashierContainerWrapper{
+  position: relative;
+  animation: ModalBounce .5s forwards;
+  z-index: 17;
+  right: 60%;
+}
+.ShortCashierContainer{
+  background-color: var(--emfe-w-color-white, #FFFFFF);
+  position: absolute;
+  width: 360px;
+  top: 16px;
+  transform: translateX(-60%);
+  box-shadow: 0px 30px 30px var(--emfe-w-header-color-primary, var(--emfe-w-color-primary, #D0046C));
+  border-radius: 5px;
+  z-index: 17;
+  box-shadow: 0px 5px 20px 0px #191919;
+  &:before {
+      content: "";
+    background: var(--emfe-w-color-white, #FFFFFF);
+    clip-path: polygon(50% 0, 0% 100%, 100% 100%);
+    position: absolute;
+    top: -8px;
+    left: 84%;
+    width: 25px;
+    height: 10px;
+    transform: translateX(-50%);
+    z-index: 1;
+  } 
+}
+
+.ShortCashierContainerWrapperMobile{
+  position: relative;
+  animation: ModalBounce .5s forwards;
+  right: 110%;
+  z-index: 17;
+}
+.ShortCashierContainerMobile {
+  background-color: var(--emfe-w-color-white, #FFFFFF);
+  position: absolute;
+  width: 80vw;
+  top: 14px;
+  left: 50%;
+  transform: translateX(-60%);
+  padding: 10px;
+  box-shadow: 0px 30px 30px var(--emfe-w-header-color-primary, var(--emfe-w-color-primary, #D0046C));
+  border-radius: 5px;
+  z-index: 17;
+  box-shadow: 0px 5px 20px 0px #191919;
+  &:before {
+    content: "";
+    background: var(--emfe-w-color-white, #FFFFFF);
+    clip-path: polygon(50% 0, 0% 100%, 100% 100%);
+    position: absolute;
+    top: -8px;
+    left: 84%;
+    width: 25px;
+    height: 10px;
+    transform: translateX(-50%);
+    z-index: 1;
+  }
+}
+
 .SelectedOption,
 .OptionList {
   border: 1px solid var(--emfe-w-header-color-primary);