@everymatrix/player-account-menu-nd 1.37.5

package/src/PlayerAccountMenu.svelte

@@ -0,0 +1,476 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import { getDevice } from 'rvhelper';
+  import { onMount } from "svelte";
+  import { _, addNewMessages, setLocale } from './i18n';
+  import { TRANSLATIONS } from './translations';
+
+  import '@everymatrix/general-logout';
+
+  export let endpoint:string = '';
+  export let cmsendpoint: string = '';
+  export let env:string = '';
+  export let session:string = '';
+  export let playerid:string = '';
+  export let lang:string = 'en';
+  export let selecteditem:string = '';
+  export let userroles:string = '';
+  export let clientstyling:string = '';
+  export let clientstylingurl:string = '';
+  export let translationurl:string = '';
+  export let activemenuitem:string = '';
+
+  let isLoading:boolean = false;
+
+  let customStylingContainer:HTMLElement;
+  let menuItems:Array<any> = [];
+  let selectedItem:any;
+  let userAgent:string = window.navigator.userAgent;
+  let isMobile:boolean = (getDevice(userAgent) === 'PC') ? false : true;
+  let defaultMenuItemsArray:any = [];
+  let sessionId:string = '';
+
+  let profileUsername:string = '';
+  let profileEmail:string = '';
+
+  const mediaQuery = window.matchMedia('(min-width: 768px)');
+
+  const setTranslationUrl = ():void => {
+    let url:string = translationurl;
+
+    fetch(url).then((res:any) => res.json())
+    .then((res) => {
+      Object.keys(res).forEach((item:any):void => {
+        addNewMessages(item, res[item]);
+      });
+    }).catch((err:any) => {
+      console.error(err);
+    });
+  }
+
+  Object.keys(TRANSLATIONS).forEach((item) => {
+    addNewMessages(item, TRANSLATIONS[item]);
+  });
+
+  const messageHandler = (e:any):void => {
+    if (e.data) {
+      switch(e.data.type) {
+        case 'AccountMenuDetails':
+          availableMenuItemsArray = e.data.accountMenuInfo;
+          break;
+
+        case 'UserSessionID':
+          session = e.data.session;
+          break;
+      }
+    }
+  }
+
+  const setDevice = (): string => {
+    let device = getDevice(userAgent);
+    if (device){
+      if (device === 'PC'){
+        return 'dk';
+      } else if (device === 'iPad' || device === 'iPhone') {
+        return 'mtWeb';
+      } else {
+        return 'mtWeb';
+      }
+    }
+  }
+
+  const getAccountMenu = () => {
+    const url:URL = new URL(`${cmsendpoint}/${lang}/profile-menu?env=${env}`);
+    url.searchParams.append('device', setDevice())
+    fetch(url.href)
+      .then(res => res.json())
+      .then(menuData => {
+
+        menuItems = menuData;
+        setActiveMenuItem();
+      })
+      .catch(err => {
+        console.error('Error getting menu items', err);
+      });
+  }
+
+  const getPlayerInfo = ():void => {
+    let url:URL = new URL(`${endpoint}/v1/player/${playerid}/profile`);
+
+    url.searchParams.append('userRoles', userroles);
+
+    let options = {
+      method: 'GET',
+      headers: {
+        'X-SessionID': session,
+      }
+    };
+
+    fetch(url.href, options)
+      .then((res:any) => res.json())
+      .then((data:any):void => {
+
+        profileUsername = data.username;
+        profileEmail = data.email;
+
+      }, (err:any):void => {
+        console.error(err);
+      });
+  }
+
+  const openAccountSection = (item:any):void => {
+    window.postMessage({ type: 'ChangeAccountPage', page: item}, window.location.href);
+
+    selectedItem = item.id;
+  }
+
+  const logOut = ():void => {
+    window.postMessage({ type: 'LogOut'}, window.location.href);
+  }
+
+  const setActiveMenuItem = () => {
+    selectedItem = menuItems.find((item) => item.path.includes(activemenuitem))?.id;
+  }
+
+  const goToHome = ():void => {
+    window.postMessage({ type: 'GoToHomepage' }, window.location.href);
+  }
+
+  const setActiveLanguage = ():void => {
+    setLocale(lang);
+  }
+
+  const initialLoad = ():void => {
+    getPlayerInfo();
+  }
+
+  const setClientStyling = ():void => {
+    let sheet:HTMLElement = document.createElement('style');
+    sheet.innerHTML = clientstyling;
+    customStylingContainer.appendChild(sheet);
+  }
+
+  const setClientStylingURL = ():void => {
+    let url:URL = new URL(clientstylingurl);
+    let cssFile:HTMLElement = document.createElement('style');
+
+    fetch(url.href)
+      .then((res:any) => res.text())
+      .then((data:any) => {
+        cssFile.innerHTML = data
+
+        setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
+      });
+  }
+
+  onMount(() => {
+    window.addEventListener('message', messageHandler, false);
+    return () => {
+      window.removeEventListener('message', messageHandler);
+    }
+  });
+
+  $: lang && setActiveLanguage();
+  $: endpoint && session && playerid && lang && initialLoad();
+  $: cmsendpoint && lang && env && getAccountMenu();
+  $: activemenuitem && setActiveMenuItem();
+  $: clientstylingurl && customStylingContainer && setClientStylingURL();
+  $: clientstyling && customStylingContainer && setClientStyling();
+  $: translationurl && setTranslationUrl();
+</script>
+
+<div bind:this={customStylingContainer}>
+  {#if isLoading}
+    <div class="ModalLoader"></div>
+  {:else}
+
+  <div class="PlayerAccountMenuContainer {isMobile ? 'PlayerAccountMobileContainer' : ''} {mediaQuery.matches && isMobile ? 'PlayerAccountTabletContainer' : ''}">
+      <div class="PlayerAccountMenuHeader {isMobile ? 'PlayerAccountMenuHeaderMobile' : ''}">
+        {#if isMobile }
+          <div class="PlayerAccountMenuCategoryWrapper">
+            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" on:click={goToHome}><defs><style>.aaa{fill:var(--emfe-w-color-white, #FFFFFF);}</style></defs><g transform="translate(-20 -158)">
+              <g transform="translate(20 158)">
+                <path class="aaa" d="M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z" transform="translate(15 15) rotate(180)"/>
+              </g></g>
+            </svg>
+            <h3 class="PlayerAccountMenuCategoryTitle" on:click={goToHome}>{$_('title')}</h3>
+          </div>
+        {/if}
+        <p class="PlayerAccountMenuUser">{profileUsername}</p>
+        <p class="PlayerAccountMenuEmail">{profileEmail}</p>
+        {#if isMobile}
+        <div class="PlayerAccountLogOutArea">
+          <general-logout {endpoint} {session} buttonlocation="PlayerAccountMenu" {clientstyling} {clientstylingurl}></general-logout>
+        </div>
+        {/if}
+      </div>
+      <div class="PlayerAccountMenuList">
+        {#each menuItems as menuItem}
+          <div  class="PlayerAccountMenuItemBox {(selectedItem === menuItem.id && !isMobile) ? 'PlayerAccountMenuActiveItemBox' : ''}" on:click="{() => openAccountSection(menuItem)}">
+            <p class="PlayerAccountMenuItemWrapper">
+              <img class="PlayerAccountMenuItemIcon {isMobile ? 'PlayerAccountMenuItemIconMobile' : ''}" src={menuItem.img} />
+              <span class="PlayerAccountMenuItemTitle">{menuItem.label}</span>
+            </p>
+          </div>
+        {/each}
+      </div>
+      {#if !isMobile}
+        <div class="PlayerAccountLogOutArea">
+          <general-logout {endpoint} {session} buttonlocation="PlayerAccountMenu" {clientstyling} {clientstylingurl}></general-logout>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+
+<style lang="scss">
+
+
+
+  .PlayerAccountMenuContainer {
+    color: var(--emfe-w-pam-typography-color-nav-bg, var(--emfe-w-color-contrast, #FFFFFF));
+    position: relative;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    padding: 0 15px;
+    .PlayerAccountMenuItemWrapper {
+      margin: 0;
+      word-break: break-all;
+      display: flex;
+      align-items: center;
+      span {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+
+  .PlayerAccountMenuHeader {
+    color: var(--emfe-w-pam-typography-color-nav-bg, var(--emfe-w-color-contrast, #FFFFFF));
+    flex-grow: 0;
+    padding: 30px 20px;
+    .PlayerAccountMenuUser {
+      margin-bottom: 5px;
+      font-size: 18px;
+      color: var(--emfe-w-pam-color-secondary, var(--emfe-w-color-secondary, #E98B10));
+    }
+    .PlayerAccountMenuEmail {
+      font-size: 14px;
+      text-overflow: ellipsis; overflow: hidden ;
+    }
+    p {
+      font-weight: 300;
+    }
+  }
+
+  .PlayerAccountMenuHeaderMobile {
+    color: var(--emfe-w-pam-typography-color-nav-bg, var(--emfe-w-color-contrast, #FFFFFF));
+    }
+
+  .PlayerAccountMenuItemBox {
+    padding: 16px 20px;
+    font-size: 16px;
+    line-height: 16px;
+    display: inline-flex;
+    width: 100%;
+    box-sizing: border-box;
+    align-items: center;
+    border-radius: var(--emw--border-radius-medium, 20px);
+    border: 2px solid transparent;
+    cursor: pointer;
+    transition: all .3s linear;
+    &:hover {
+      transition: all .3s linear;
+      // background: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #23B04E));
+      background: rgba(35, 176, 78, 0.3);
+      border: 2px solid var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #23B04E));
+      border-radius: var(--emw--border-radius-medium, 20px);
+      color: var(--emfe-w-color-white, #FFFFFF);
+    }
+    .PlayerAccountMenuItemTitle {
+      margin-left: 20px;
+    }
+    .PlayerAccountMenuItemIcon {
+      width: 20px;
+      padding-top: unset;
+    }
+    .PlayerAccountMenuItemIconMobile {
+      width: 30px;
+      padding-top: 15px;
+    }
+  }
+
+  .PlayerAccountMenuList {
+  }
+
+  .PlayerAccountMenuList::-webkit-scrollbar {
+    width: 6px;
+  }
+  /* Track */
+  .PlayerAccountMenuList::-webkit-scrollbar-track {
+    background: var(--emfe-w-color-gray-300, #58586B);
+  }
+  /* Handle */
+  .PlayerAccountMenuList::-webkit-scrollbar-thumb {
+    background: var(--emfe-w-color-gray-100, #E6E6E6);
+  }
+
+  .PlayerAccountLogOutArea {
+    background-color: rgba(253, 40, 57, 0.3);
+    color: var(--emfe-w-color-white, #FFFFFF);
+    border-radius: var(--emw--border-radius-medium, 20px);
+    width: 100%;
+    flex-grow: 0;
+  }
+
+  .PlayerAccountMenuActiveItemBox {
+    background: rgba(35, 176, 78, 0.3);
+    color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #23B04E));
+    border: 2px solid var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #23B04E));
+    border-radius: var(--emw--border-radius-medium, 20px);
+    transition: all .3s linear;
+  }
+
+  .PlayerAccountMobileContainer {
+    height: unset;
+    padding: 0;
+    .PlayerAccountMenuCategoryWrapper {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 18px;
+    }
+    .PlayerAccountMenuCategoryTitle {
+      margin: 0;
+      font-weight: 600;
+    }
+
+    .PlayerAccountMenuItemTitle {
+      margin-left: 0;
+      text-transform: capitalize;
+      line-height: 14px;
+    }
+
+    .PlayerAccountMenuEmail {
+      margin: 0;
+    }
+
+    .PlayerAccountMenuList {
+      display: flex;
+	    flex-direction: column;
+      align-items: flex-start;
+      margin: 0px 15px;
+
+      .PlayerAccountMenuItemBox {
+        background: rgba(35, 176, 78, 0.3);
+        color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #23B04E));
+        border: 2px solid var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #23B04E));
+        border-radius: var(--emw--border-radius-medium, 20px); // mobile border
+        height: 60px;
+        margin: 5px 0;
+        align-items: flex-start;
+        position: relative;
+        &.PlayerAccountMenuActiveItemBox {
+          background: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));
+        }
+        .PlayerAccountMenuItemIcon {
+          width: 20px;
+          padding: 0 10px 0 15px;
+        }
+      }
+
+      .PlayerAccountMenuItemBox::after {
+        content: '';
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2215%22 height=%2215%22 viewBox=%220 0 15 15%22%3E%3Cdefs%3E%3Cstyle%3E.aaa%7Bfill:var(--emfe-w-color-white,%20%23FFFFFF);%7D%3C/style%3E%3C/defs%3E%3Cg transform=%22translate(-20%20-158)%22%3E%3Cg transform=%22translate(20%20158)%22%3E%3Cpath class=%22aaa%22 d=%22M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z%22 transform=%22translate(15%2015)%20rotate(180)%22%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
+        background-size: contain;
+        transform: scaleX(-1);
+        background-repeat: no-repeat;
+        position: absolute;
+        right: 15px;
+        top: 22px;
+      }
+
+      .PlayerAccountMenuItemWrapper {
+        display: flex;
+        justify-items: center;
+        align-items: center;
+        flex-flow: row;
+        gap: 6px;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        .PlayerAccountMenuItemTitle {
+          font-size: 16px;
+          line-height: 16px;
+          font-weight: 400;
+          word-break: break-word;
+          text-align: left;
+          color: var(--emfe-w-pam-typography-color-nav-bg, var(--emfe-w-color-contrast, #FFFFFF));
+        }
+      }
+    }
+
+    .PlayerAccountLogOutArea {
+      position: absolute;
+      right: 18px;
+      top: 56px;
+      bottom: unset;
+      background: transparent;
+      width: 48px;
+      border-top: 0;
+      // .PlayerAccountMenuItemBox {
+      //   display: block;
+      //   width: 24px;
+      //   padding: 10px;
+      //   svg {
+      //     width: 24px;
+      //   }
+      // }
+    }
+  }
+
+  .PlayerAccountTabletContainer {
+    .PlayerAccountMenuHeader {
+      padding: 30px 40px;
+    }
+    .PlayerAccountMenuCategoryTitle {
+      font-size: 32px;
+    }
+    .PlayerAccountMenuUser {
+      font-size: 26px;
+      color: var(--emfe-w-pam-color-secondary, var(--emfe-w-color-secondary, #E98B10));
+    }
+    .PlayerAccountMenuEmail {
+      font-size: 20px;
+    }
+    .PlayerAccountMenuList {
+      column-gap: 20px;
+      row-gap: 20px;
+      padding: 0 40px 40px;
+      grid-template-columns: calc(33% - 11px) calc(33% - 11px) calc(33% - 11px);
+      .PlayerAccountMenuItemBox {
+        .PlayerAccountMenuItemIcon {
+          width: 80px;
+        }
+      }
+      .PlayerAccountMenuItemWrapper {
+        gap: 28px;
+        .PlayerAccountMenuItemTitle {
+          font-size: 24px;
+        }
+      }
+    }
+    .PlayerAccountLogOutArea {
+      right: 54px;
+      top: 72px;
+    }
+  }
+</style>

package/src/i18n.js

@@ -0,0 +1,27 @@
+import {
+  dictionary,
+  locale,
+  addMessages,
+  _
+} from 'svelte-i18n';
+
+function setupI18n({ withLocale: _locale, translations }) {
+  locale.subscribe((data) => {
+    if (data == null) {
+      dictionary.set(translations);
+      locale.set(_locale);
+    }
+  }); // maybe we will need this to make sure that the i18n is set up only once
+  /*dictionary.set(translations);
+  locale.set(_locale);*/
+}
+
+function addNewMessages(lang, dict) {
+  addMessages(lang, dict);
+}
+
+function setLocale(_locale) {
+  locale.set(_locale);
+}
+
+export { _, setupI18n, addNewMessages, setLocale };

package/src/index.ts

@@ -0,0 +1,4 @@
+import PlayerAccountMenu from './PlayerAccountMenu.svelte';
+
+!customElements.get('player-account-menu-nd') && customElements.define('player-account-menu-nd', PlayerAccountMenu);
+export default PlayerAccountMenu;

package/src/translations.js

@@ -0,0 +1,32 @@
+export const TRANSLATIONS = {
+  "en": {
+    "title": "My Account"
+  },
+  "zh-hk": {
+    "title": "我的帳戶"
+  },
+  "fr": {
+    "title": "Mon compte"
+  },
+  "tr": {
+    "title": "Hesabım"
+  },
+  "ro": {
+    "title": "Contul meu"
+  },
+  "es": {
+    "title": "Mi Cuenta"
+  },
+  "pt": {
+    "title": "Minha Conta"
+  },
+  "hr": {
+    "title": "Moj račun"
+  },
+  "pt-br": {
+    "title": "Minha conta"
+  },
+  "es-mx": {
+    "title": "Mi cuenta"
+  }
+}

package/stories/PlayerAccountMenu.stories.js

@@ -0,0 +1,13 @@
+import { html } from 'lit-element';
+
+import PlayerAccountMenu from '../src/PlayerAccountMenu';
+
+// This default export determines where your story goes in the story list
+export default {
+  title: 'PlayerAccountMenu',
+};
+
+// 👇 We create a “template” of how args map to rendering
+const PlayerAccountMenu = ({ aProperty }) => html`<player-account-menu></player-account-menu>`;
+
+export const FirstStory = PlayerAccountMenu.bind({});

package/translations/translations.js

@@ -0,0 +1,82 @@
+export const TRANSLATIONS = {
+  en: {
+    myAccount: 'My Account',
+    profileInfo: 'Profile info',
+    accountSecurity: 'Account Security',
+    deposit: 'Deposit',
+    withdrawal: 'Withdrawal',
+    activeBonuses: 'Active bonuses',
+    selfExclusion: 'Self-exclusion',
+    accountClosure: 'Account closure'
+  },
+  de: {
+    myAccount: 'Mein Konto',
+    profileInfo: 'Profil Information',
+    accountSecurity: 'Konto Sicherheit',
+    deposit: 'Anzahlung',
+    withdrawal: 'Rückzug',
+    activeBonuses: 'Aktive Boni',
+    selfExclusion: 'Selbstausschluss',
+    accountClosure: 'Kontoschließung'
+  },
+  it: {
+    myAccount: 'Il mio conto',
+    profileInfo: 'Informazioni sul profilo',
+    accountSecurity: 'Sicurezza dell \'Account',
+    deposit: 'Depositare',
+    withdrawal: 'Ritiro',
+    activeBonuses: 'Bonus attivi',
+    selfExclusion: 'Autoesclusione',
+    accountClosure: 'Chiusura del conto'
+  },
+  fr: {
+    myAccount: 'Mon compte',
+    profileInfo: 'Informations sur le profil',
+    accountSecurity: 'Sécurité du compte',
+    deposit: 'Dépôt',
+    withdrawal: 'Retrait',
+    activeBonuses: 'Bonus actifs',
+    selfExclusion: 'Auto-exclusion',
+    accountClosure: 'La fermeture du compte'
+  },
+  es: {
+    myAccount: 'Mi cuenta',
+    profileInfo: 'Información de perfil',
+    accountSecurity: 'Seguridad de la cuenta',
+    deposit: 'Depositar',
+    withdrawal: 'Retiro',
+    activeBonuses: 'Bonificaciones activas',
+    selfExclusion: 'Autoexclusión',
+    accountClosure: 'Cierre de cuenta'
+  },
+  tr: {
+    myAccount: 'Hesabım',
+    profileInfo: 'Profil bilgisi',
+    accountSecurity: 'hesap Güvenliği',
+    deposit: 'PARA YATIR',
+    withdrawal: 'Para çekme',
+    activeBonuses: 'Aktif bonuslar',
+    selfExclusion: 'Kendini dışlama',
+    accountClosure: 'Hesap kapatma'
+  },
+  ru: {
+    myAccount: 'Мой аккаунт',
+    profileInfo: 'Информация о профиле',
+    accountSecurity: 'Безопасность аккаунта',
+    deposit: 'Депозит',
+    withdrawal: 'Вывод',
+    activeBonuses: 'Активные бонусы',
+    selfExclusion: 'Самоисключение',
+    accountClosure: 'Закрытие счета'
+  },
+  ro: {
+    myAccount: 'Contul meu',
+    profileInfo: 'Informatii despre profil',
+    accountSecurity: 'Securitatea contului',
+    deposit: 'Depunere',
+    withdrawal: 'Retragere',
+    activeBonuses: 'Bonusuri active',
+    selfExclusion: 'Auto-excludere',
+    accountClosure: 'Inchiderea contului'
+  }
+};

package/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+
+  "include": ["src/**/*"],
+  "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
+}