@everymatrix/casino-footer-v2 0.0.362 → 0.0.365

package/index.html

@@ -43,55 +43,8 @@
         padding: 10px 20px;
       }
     </style>
-    <header class="header">
-      <div class="header__logo">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="161"
-          height="132"
-          viewBox="0 0 161 132"
-        >
-          <defs>
-            <linearGradient x1="0%" y1="50%" y2="50%" id="a">
-              <stop stop-color="#2A3B8F" offset="0%" />
-              <stop stop-color="#29ABE2" offset="100%" />
-            </linearGradient>
-            <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="c">
-              <stop stop-color="#B4D44E" offset="0%" />
-              <stop stop-color="#E7F716" offset="100%" />
-            </linearGradient>
-          </defs>
-          <g fill="none" fill-rule="evenodd">
-            <path
-              fill="#166DA5"
-              d="M160.6 65.9l-17.4 29.3-24.4-29.7 24.4-28.9z"
-            />
-            <path
-              fill="#8FDB69"
-              d="M141.3 100.2l-26.5-31.7-15.9 26.6 24.7 36.1z"
-            />
-            <path fill="#166DA5" d="M141 31.4l-26.2 31.8-15.9-26.6L123.6.9z" />
-            <path
-              fill="url(#a)"
-              opacity=".95"
-              d="M61.1 31.4H141L123.4.7H78.7z M114.8 63.3H159l-15.9-26.8H98.8"
-            />
-            <path
-              fill="url(#c)"
-              opacity=".95"
-              d="M141.3 100.3H61l17.6 30.5h45z M114.8 68.4H159l-15.9 26.8H98.8"
-            />
-            <path
-              fill="#010101"
-              d="M78.6 130.8L41 65.8 79.1.8H37.9L.4 65.8l37.5 65z"
-            />
-          </g>
-        </svg>
-      </div>
-      <h1 class="header__name"><span>WEBCOMPONENT:</span> casino-footer-v2</h1>
-    </header>
 <casino-footer-v2
-    endpoint="https://bahcom-stage.everymatrix.com/apijson/en/footer-raw-data?env=stage"
+    endpoint="https://bahcom-stage.everymatrix.com/apijson"
     userendpoint="https://betathome-de-stage-api.stage.norway.everymatrix.com/v1"
     session="d919449f-5f5a-4c6f-92c2-29fb947c3f33"
     userid="4229869"
@@ -104,23 +57,8 @@
     clockenabled="true"
     clocksecondsenabled="true"
     clockcustomformat="LTS"
-    lang="de"
+    lang="en"
   ></casino-footer-v2>
 
-    <casino-footer-v2
-      endpoint="https://bahcom-stage.everymatrix.com/apijson/en/footer-raw-data?env=stage"
-      userendpoint="https://betathome-de-stage-api.stage.norway.everymatrix.com/v1"
-      session="d919449f-5f5a-4c6f-92c2-29fb947c3f33"
-      userid="4229869"
-      lang="en"
-      env="stage"
-      clocktext="Time"
-      clockenabled="true"
-      clocksecondsenabled="true"
-      clockcustomformat="false"
-      languageselectorenabled="true"
-      panicbuttonenabled="true"
-      sessiontimerenabled="true"
-    ></casino-footer-v2>
   </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-footer-v2",
-  "version": "0.0.362",
+  "version": "0.0.365",
   "main": "dist/casino-footer-v2.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "154d1b620474e61bee3507cc52d40bfd33236024"
+  "gitHead": "f4dabfce4df55a591981f327a670cc250a2ed257"
 }

package/src/CasinoFooterV2.svelte

@@ -6,8 +6,8 @@
 
   import { onMount } from 'svelte';
   import moment from 'moment';
-  import { checkSession } from 'rvhelper';
-  import { _, addNewMessages, setLocale } from './i18n';
+  import { checkSession, isMobile } from 'rvhelper';
+  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
   import { CasinoFooterTranslations } from './translations.js'
 
   export let endpoint:string = '';
@@ -30,8 +30,11 @@
   export let userid:string = '';
   export let userendpoint:string = '';
   export let panicbuttonenabled:string = 'true';
-  export let sessiontimerenabled = 'true'; // 'true' to enable, anything to disable
+  export let sessiontimerenabled:string = 'true'; // 'true' to enable, anything to disable
+  export let grouplink:string = 'true';
 
+  let userAgent:string = window.navigator.userAgent;
+  let isOnMobile = isMobile(userAgent);
   let gameVendorsLinksTitle:string = '';
   let gameVendorsRepeater:Array<Object> = [];
   let paymentLinksTitle:string = '';
@@ -74,10 +77,13 @@
 
   let customStylingContainer:HTMLElement;
 
+  setupI18n({ withLocale: 'en', translations: {}});
+
   Object.keys(CasinoFooterTranslations).forEach((item:any) => {
     addNewMessages(item, CasinoFooterTranslations[item]);
   });
 
+
   // needed for session timer
   const setSession = ():void => {
     checkSession(userendpoint, session).then((res:any) => {
@@ -125,7 +131,13 @@
   }
 
   const getCmsData = ():void => {
-    let url:URL = new URL(`${endpoint}/${lang}/footer-raw-data?env=${env}`);
+    let url:URL = new URL(`${endpoint}/${lang}/footer-raw-data`);
+
+    url.searchParams.append('env', env);
+
+    if (grouplink == 'true') {
+      url.searchParams.append('helpLinks_groupby', 'helpLinkCategory');
+    }
 
     isLoading = true;
 
@@ -300,6 +312,7 @@
   {#if headScript}
     <script src={licenseScriptSrc}></script>
   {/if}
+  <link href='http://fonts.googleapis.com/css?family=Roboto Condensed' rel='stylesheet' type='text/css'>
 </svelte:head>
 
 {#if hasErrors}
@@ -310,13 +323,15 @@
   {:else}
 
   <div class="Footer" bind:this={customStylingContainer}>
-    <div class="FooterSide" >
+    <div class="FooterSide {isOnMobile  && isLoggedIn ? 'FooterSideMobile' : ''}">
       <!-- start helper section -->
         {#if helpLinksRepeater}
-          {#if helpLinksTitle}
-          <p class="FooterTitle">{helpLinksTitle}</p>
-          {/if}
-          <casino-footer-section helperflag="1" clientstyling={customStyling} target={target} displaycolumn="true"></casino-footer-section>
+          {#each helpLinksRepeater as category}
+            {#if category.key}
+            <p class="FooterTitle">{category.key}</p>
+            {/if}
+            <casino-footer-section helperflag="1" clientstyling={customStyling} category={category.key} target={target} displaycolumn="true"></casino-footer-section>
+          {/each}
         {/if}
     </div>
 
@@ -349,10 +364,10 @@
       <!-- start panic button -->
       {#if panicbuttonenabled === "true" && isLoggedIn}
         <panic-button
-        customtext = "Hold the button for 3 seconds to take 24 hours instant lock"
-        alternativestyling="true"
-        {lang}
-        {clientstyling}
+          customtext = "Hold the button for 3 seconds to take 24 hours instant lock"
+          alternativestyling="true"
+          {lang}
+          {clientstyling}
         ></panic-button>
       {/if}
       <!-- end panic button -->
@@ -382,9 +397,9 @@
                 <!-- start session timer section -->
 
                 {#if sessiontimerenabled}
-                <div class="sessionTimerContainer">
-                  <span class="SessionText">{$_('casinoFooter.sessionTimer')} {timeString}</span>
-                </div>
+                  <div class="sessionTimerContainer">
+                    <span class="SessionText">{$_('casinoFooter.sessionTimer')} {timeString}</span>
+                  </div>
                 {/if}
                 <!-- end session timer section -->
               </div>
@@ -481,20 +496,29 @@
    position: relative;
   }
 
+  .FooterSideMobile {
+    margin-top: 66px;
+  }
+
   .FooterSide {
+    justify-content: center;
+    height: 100%;
     display: flex;
     flex-direction: column;
     position: absolute;
     background-color: $color-white;
     .FooterTitle {
+      font-family: 'Roboto Condensed';
+      font-weight: 500; 
+      font-size: 12px; 
+      color: #111; 
       text-transform: uppercase;
-      font-size: 12px;
-      font-weight: 600;
-      margin: 24px 13px;
+      margin: 21px 12px;
     }
   }
   .FooterGrid {
     font-weight: 400;
+    height: 100%;
     display: flex;
     padding: 100px 0;
     max-width: 1200px;
@@ -514,11 +538,12 @@
       text-align: center;
       max-width: 1100px;
       p {
+          font-family: 'Roboto'; 
+          font-style: normal; 
+          font-weight: 300; 
+          font-size: 12px; 
+          color: #111;
           text-align: center;
-          &.FooterTitle {
-            font-size: 12px;
-            font-weight: 700;
-          }
       }
      .LicenseDesc {
       flex: 1;
@@ -553,7 +578,6 @@
       flex-direction: column;
       &Side {
         position: relative;
-        margin-top: 66px;
         margin-left: 14px;
       }
       &Grid {

package/src/translations.js

@@ -5,6 +5,12 @@ export const CasinoFooterTranslations = {
       sessionTimer: 'Logged in for',
     }
   },
+  de: {
+    casinoFooter: {
+      timeText: `Time`,
+      sessionTimer: 'Logged in for',
+    }
+  },
   fr: {
     casinoFooter: {
       timeText: `Catégories`,