@everymatrix/player-account-controller-nd 1.37.5

package/src/PlayerAccountController.svelte

@@ -0,0 +1,919 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import { onMount, tick } from 'svelte';
+  import { getDevice } from 'rvhelper';
+  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
+  import { TRANSLATIONS } from './translations';
+
+  import '@everymatrix/player-account-menu-nd';
+  import '@everymatrix/player-account-notifications';
+  import '@everymatrix/player-account-timeout';
+  import '@everymatrix/player-account-self-exclusion-nd';
+  import '@everymatrix/player-account-closure-nd';
+  import '@everymatrix/player-account-gaming-limits';
+  import '@everymatrix/player-active-bonuses';
+  import '@everymatrix/player-profile-info';
+  import '@everymatrix/player-change-password';
+  import '@everymatrix/player-reality-check';
+  import '@everymatrix/player-bonus-history';
+  import '@everymatrix/player-deposit';
+  import '@everymatrix/player-withdrawal';
+  import '@everymatrix/player-pending-withdrawals';
+  import '@everymatrix/player-transaction-history';
+  import '@everymatrix/player-gaming-history';
+  import '@everymatrix/player-account-betting-history';
+  import '@everymatrix/player-account-gaming-limits-wrapper-2-nd';
+  import '@everymatrix/player-account-biometrics';
+
+  export let cmsendpoint:string = '';
+  export let env:string = '';
+  export let customnotifications:string = '';
+  export let playerid:string = '';
+  export let session:string = '';
+  export let endpoint:string = '';
+  export let lang:string = '';
+  export let operator:string = 'Everymatrix';
+  export let supportemail:string = '';
+  export let separatelimits:string = 'true';
+  export let hasdefaultamount:string = 'false';
+  export let userroles:string = '';
+  export let simplepasswordvalidation:string = 'false';
+  export let tablabels:string = '';
+  export let historyenabled:string = '';
+  export let deletelimit:string = '';
+  export let limitsamount:string = '';
+  export let limitsperiods:string = '';
+  export let numberofentries:string = '';
+  export let customcurrencysymbols:string = '';
+  export let currency:string = '';
+  export let apiversion:string = '';
+  export let clientstyling:string = '';
+  export let clientstylingurl:string = '';
+  export let translationurl:string = '';
+  export let custominputtextswitch:string = 'false'; // used by playzonbet for switching input field texts and validation for register and player profile widgets: security question, answer, error messages and validation
+  export let gmversion:string = '';
+  export let producttype:string = '';
+  export let successurl:string = '';
+  export let failurl:string = '';
+  export let cancelurl:string = '';
+  export let sportsurl:string = '';
+  export let casinourl:string = '';
+  export let contacturl:string = '';
+  export let homeurl:string = '';
+  export let depositurl:string = '';
+  export let showcashierbonus:string = '';
+  export let biometricsenabled:string = 'false';
+  export let activepage:string = '';
+
+  setupI18n({ withLocale: 'en', translations: {}});
+
+  let customStylingContainer:HTMLElement;
+  let isLoading:boolean = false;
+  let userAgent:string = window.navigator.userAgent;
+  let isMobile:boolean = (getDevice(userAgent) === 'PC') ? false : true;
+  let menuData:any = [];
+  let notificationsData:any = [];
+  let userId:string = '';
+  let sessionId:string = '';
+  let countrycode:string = '';
+  let playercurrency: string = null;
+  // limits variables
+  let deviceSegregationValue: string = '';
+  let playerlimits: any = {};
+  let depositlimit:any;
+  let wageringlimit:any;
+  let losslimit:any;
+  let timelimit:any;
+  let showsuccessnotification:boolean = false;
+  let showdeletenotification:boolean = false;
+  let realityCheckData:any;
+  let storedRealityCheck:string = '';
+  let errorPasswordChanged:string = '';
+  let showErrorPasswordChanged:boolean = false;
+  let selected:string;
+  let ChangePasswordEvent: CustomEvent;
+  let activeMenuItem:string = '/profile-info';
+
+  const widgetPath = ['/profile-info',
+                      '/change-password',
+                      '/reality-check',
+                      '/timeout',
+                      '/account-closure',
+                      '/gaming-limits',
+                      '/self-exclusion',
+                      '/active-bonuses',
+                      '/bonus-history',
+                      '/gaming-history',
+                      '/deposit',
+                      '/withdrawal',
+                      '/pending-withdrawals',
+                      '/transaction-history',
+                      '/betting-history',
+                      '/limits',
+                      '/account-verification',
+                      '/cashier-deposit',
+                      '/cashier-withdrawal',
+                      '/transactions-history',
+                      '/biometrics'];
+
+  const initialLoad = ():void => {
+    setDevice();
+
+    userId = playerid;
+    sessionId = session;
+
+    getData(); //For now we will let it here until we move all the datas to other widgets
+    setActivePage();
+  }
+
+  const setDevice = ():void => {
+    let device = getDevice(userAgent);
+
+    if (device){
+      if (device === 'PC'){
+        deviceSegregationValue = 'dk';
+      } else if (device === 'iPad' || device === 'iPhone') {
+        deviceSegregationValue = 'mtWeb'; // replace with ios when we will have a native ios up for this
+      } else {
+        deviceSegregationValue = 'mtWeb';
+      }
+    }
+  }
+
+  const setActivePage = ():void => {
+    if(!activepage && !isMobile) { activepage = widgetPath[0]; }
+
+    activeMenuItem = activepage;
+  }
+
+  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.log(err);
+    });
+  }
+
+  Object.keys(TRANSLATIONS).forEach((item:any) => {
+    addNewMessages(item, TRANSLATIONS[item]);
+  }
+);
+
+  const messageHandler = (e:any):void => {
+    let url:URL;
+    if (e.data) {
+      switch(e.data.type) {
+        case 'AccountMenuDetails':
+          // @TODO open after launch event is triggered from CMS menu
+          // @TODO what is dis?
+          break;
+
+        case 'ChangeAccountPage':
+          activepage = e.data.page.path;
+
+          if(activepage == '/profile-info') {
+            getUserProfileInfo();
+            getUserProfileConsent();
+          }
+
+          if(activepage == '/deposit'){
+            //Analytics event
+            if(typeof gtag == 'function'){
+              gtag('event', 'GoToDeposit', {
+                'context': 'PlayerAccountController'
+              });
+            }
+          }
+
+          if(activepage == '/withdrawal'){
+            //Analytics event
+            if(typeof gtag == 'function'){
+              gtag('event', 'GoToWithdrawal', {
+                'context': 'PlayerAccountController'
+              });
+            }
+          }
+          break;
+
+        case 'PlayerAccountMenuActive':
+        case 'GoToPreviousRoute':
+          if (e.data.isMobile) {
+            activepage = '';
+            initialLoad();
+          }
+          break;
+
+        case 'UpdatePlayerInfo':
+          let profileData = e.data.provisionalArray;
+          let sentData = {
+            mobile: {
+              prefix: profileData.mobilePrefix,
+              number: profileData.mobileNumber
+            },
+            address1: profileData.address,
+            city: profileData.city,
+            postalCode: profileData.postalCode,
+            securityQuestion: profileData.securityQuestion,
+            securityAnswer: profileData.securityAnswer,
+          };
+
+          url = new URL(`${endpoint}/v1/player/${userId}/profile`);
+
+          let options = {
+            method: "POST",
+            headers: {
+              'X-SessionID': sessionId,
+              'Content-Type': "application/json",
+              'Accept': 'application/json',
+            },
+            body: JSON.stringify(sentData)
+          };
+
+          fetch(url.href, options)
+            .then((res:any) => {
+              if (res.status == 200) {
+                window.postMessage({ type: 'WidgetNotification', data: {
+                  type: 'success',
+                  message: $_('profileUpdateSuccess')
+                }}, window.location.href);
+                window.postMessage({ type: 'ConfirmProfileInfoSave' }, window.location.href);
+              }
+            });
+          break;
+
+        case 'UpdatePlayerConsent':
+          url = new URL(`${endpoint}/v1/player/${userId}/consent`);
+
+          let optionsConsent = {
+            method: "POST",
+            headers: {
+              'X-SessionID': sessionId,
+              'Content-Type': "application/json",
+              'Accept': 'application/json',
+            },
+            body: JSON.stringify(e.data.consentArray)
+          };
+
+          fetch(url.href, optionsConsent)
+            .then((res:any) => {
+              if (res.status == 200) {
+                window.postMessage({ type: 'ConfirmProfileInfoSave' }, window.location.href);
+              }
+            });
+          break;
+
+        case 'ChangePassword':
+          sendChangePassword(e.data.userCurrentPassword, e.data.userNewPassword);
+          break;
+
+        case 'SetPlayerAccountTimeout':
+          url = new URL(`/v2/player/${userId}/limits${gmversion === 'gm16' ? '/session' : ''}`, endpoint);
+
+          let timeoutValue = e.data.timeoutSelected;
+
+          let dataTimeout = {
+            coolOff: {
+              period: timeoutValue
+            }
+          };
+          let setTimeout = {
+            method: "PUT",
+            headers: {
+              'X-SessionID': sessionId,
+              'Content-Type': "application/json",
+              'Accept': 'application/json',
+            },
+            body: JSON.stringify(dataTimeout)
+          };
+
+          fetch(url.href, setTimeout)
+            .then((res:any) => {
+              if (res.status == 200) {
+                window.postMessage({ type: 'WidgetNotification', data: {
+                  type: 'success',
+                  message: $_('timeoutSuccess')
+                }}, window.location.href);
+                window.postMessage({ type: 'LogoutSuccessfull' }, window.location.href);
+              } else {
+                throw new Error('Failed to fetch')
+              }
+            }).catch((err) => console.error(err))
+          break;
+
+        case 'SetSelfExclusion':
+          url = new URL(`/v2/player/${userId}/limits${gmversion === 'gm16' ? '/session' : ''}`, endpoint);
+
+          let selfExclusionPeriod = e.data.selfExclusionPeriod;
+          let selfExclusionExpiryDate = e.data.selfExclusionExpiryDate;
+
+          let dataSelfExclusion = {
+            selfExclusion: {
+              period: selfExclusionPeriod,
+              expiryDate: selfExclusionExpiryDate,
+              selfExclusionReason: 'UserRequest',
+            }
+          };
+          let setSelfExclusion = {
+            method: "PUT",
+            headers: {
+              'X-SessionID': sessionId,
+              'Content-Type': "application/json",
+              'Accept': 'application/json',
+            },
+            body: JSON.stringify(dataSelfExclusion)
+          };
+
+          fetch(url.href, setSelfExclusion)
+            .then((res:any):void => {
+              if (res.status == 200) {
+                window.postMessage({ type: 'WidgetNotification', data: {
+                  type: 'success',
+                  message: $_('selfExclusionSuccess')
+                }}, window.location.href);
+                window.postMessage({ type: 'LogoutSuccessfull'}, window.location.href);
+              } else {
+                // ERROR
+              }
+            });
+          break;
+
+        case 'AccountClosure':
+          url = new URL(`/v2/player/${userId}/limits${gmversion === 'gm16' ? '/session' : ''}`, endpoint)
+
+          let accountClosureData = 'UserRequest';
+          let accountClosureSelection = {
+            selfExclusion: {
+              period: "SelfExclusionPermanent",
+              sendNotificationEmail: true,
+              selfExclusionReason: accountClosureData
+            }
+          };
+
+          let optionsAccountClosure = {
+            method: "PUT",
+            headers: {
+              'X-SessionID': sessionId,
+              'Content-Type': "application/json",
+              'Accept': 'application/json',
+            },
+            body: JSON.stringify(accountClosureSelection)
+          };
+
+          fetch(url.href, optionsAccountClosure)
+            .then((res:any):void => {
+              if (res.status == 200) {
+                window.postMessage({ type: 'WidgetNotification', data: {
+                  type: 'success',
+                  message: $_('accountClosureSuccess')
+                }}, window.location.href);
+                window.postMessage({ type: 'LogoutSuccessfull'}, window.location.href);
+              } else {
+                // ERROR
+              }
+            });
+          break;
+
+        case 'UserSessionID':
+          sessionId = e.data.session;
+          userId = e.data.userid;
+
+          getData();
+          break;
+
+        case 'PlayerAccountGamingLimitsUpdate':
+          url = new URL(`/v2/player/${userId}/limits`, endpoint);
+
+          let limitsData = e.data.payload;
+          let optionsEditLimits = {
+            method: "PUT",
+            headers: {
+              'X-SessionID': sessionId,
+              'Content-Type': "application/json",
+              'Accept': 'application/json',
+            },
+            body: JSON.stringify(limitsData)
+          };
+
+          fetch(url.href, optionsEditLimits)
+            .then((res:any):void => {
+              if (res.status == 200) {
+                showsuccessnotification = true;
+
+                window.postMessage({ type: 'WidgetNotification', data: {
+                  type: 'success',
+                  message: $_('limitsUpdateSuccess')
+                }}, window.location.href);
+                getGamingLimits(new URL(`/v2/player/${userId}/limits`, endpoint));
+              } else {
+                // ERROR
+              }
+            });
+          break;
+
+        case 'PlayerAccountGamingLimitDelete':
+          let limitsDeleteData:any = e.data.limit ? e.data.limit : {};
+          let deletedPeriodLimit:any;
+
+          if (Array.isArray(limitsDeleteData)) {
+            deletedPeriodLimit = limitsDeleteData.map((item) => item.period);
+          } else {
+            deletedPeriodLimit = limitsDeleteData.period;
+          }
+          let limitsCategoryTitle = e.data.name;
+          let limitName:string = '';
+
+          switch (limitsCategoryTitle) {
+            case 'depositLimits':
+              limitName = 'deposit';
+              break;
+
+            case 'cumulativeSessionLimits':
+              limitName = 'cumulativeSession';
+              break;
+
+            case 'wageringLimit':
+              limitName = 'wagering';
+              break;
+
+            case 'lossLimit':
+              limitName = 'loss';
+              break;
+          }
+
+          let deleteOptions = {
+            method: "DELETE",
+            headers: {
+              'X-SessionID': sessionId,
+            },
+            body: JSON.stringify(limitsDeleteData)
+          };
+
+          url = new URL(`/v2/player/${userId}/limits/${limitName}`, endpoint)
+
+          //if single limit send string
+          if (Array.isArray(deletedPeriodLimit)) {
+            deletedPeriodLimit.forEach((item) => {
+              url.searchParams.append('periods', item);
+            });
+          } else {
+            url.searchParams.append('periods', deletedPeriodLimit);
+          }
+
+          fetch(url.href, deleteOptions)
+            .then((res:any):void => {
+              if (res.status == 200) {
+                showdeletenotification = true;
+                window.postMessage({ type: 'WidgetNotification', data: {
+                  type: 'success',
+                  message: $_('limitsDeleteSuccess')
+                }}, window.location.href);
+              } else {
+                // ERROR
+              }
+            }).then((res:any):void => {
+              getGamingLimits(new URL(`/v2/player/${userId}/limits`, endpoint));
+            });
+
+
+          break;
+
+        case 'GamingLimitsConfirmChanges':
+          getGamingLimits(new URL(`/v2/player/${userId}/limits`, endpoint));
+          break;
+
+        case 'CancelGamingLimitsChanges':
+          getGamingLimits(new URL(`/v2/player/${userId}/limits`, endpoint));
+          break;
+
+        case 'SubmittedRealityCheck':
+          setRealityCheckValue(e.data.realityCheckUpdatedValue);
+          break;
+      }
+    }
+  }
+
+  const getNotificationsDetails = (url:URL):void => {
+
+    url.searchParams.append('userRoles', userroles);
+    url.searchParams.append('device', deviceSegregationValue)
+
+    fetch(url.href)
+      .then((res:any) => res.json())
+      .then((data:any):void => {
+        if(data.length) {
+          notificationsData = data[0].children;
+          window.postMessage({ type: 'NotificationsDetails', notificationsInfo: notificationsData }, window.location.href);
+        }
+      }, (err:any):void => {
+        console.error(err);
+      });
+  }
+
+  const getUserProfileInfo = ():void => {
+    let url:URL = new URL(`${endpoint}/v1/player/${userId}/profile`);
+    let options = {
+      method: "GET",
+      headers: {
+        'X-SessionID': sessionId,
+      }
+    };
+
+    fetch(url.href, options)
+      .then((res:any) => { return res.json(); })
+      .then((data:any) => {
+        countrycode = data.country;
+        playercurrency = data.currency;
+
+        window.postMessage({ type: 'ProfileDetailsData', profileDetails: data }, window.location.href);
+      }, (err:any) => {
+        console.error(err);
+      });
+  }
+
+  const getUserProfileConsent = ():void => {
+    let url:URL = new URL(`${endpoint}/v1/player/${userId}/consent`);
+    let options = {
+      method: "GET",
+      headers: {
+        'X-SessionID': sessionId,
+      }
+    };
+
+    fetch(url.href, options)
+      .then((res:any) => { return res.json(); })
+      .then((data:any) => {
+        window.postMessage({ type: 'ProfileConsentData', consent: data }, window.location.href);
+      }, (err:any) => {
+        console.error(err);
+      });
+  }
+
+  const sendChangePassword = async (playerCurrentPassword:string, playerNewPassword:string) => {
+    let url:URL = new URL(`${endpoint}/v1/player/${userId}/password`)
+    let data = {
+      currentPassword: playerCurrentPassword,
+      newPassword: playerNewPassword
+    };
+    let optionsChangePassword = {
+      method: "POST",
+      headers: {
+        'X-SessionID': sessionId,
+        'Content-Type': "application/json",
+        'Accept': 'application/json',
+      },
+      body: JSON.stringify(data)
+    };
+
+    let response:any = await fetch(url.href, optionsChangePassword);
+
+    if (response.ok) {
+      window.postMessage({ type: 'PasswordChangedSuccessfully' }, window.location.href);
+      window.postMessage({ type: 'WidgetNotification', data: {
+        type: 'success',
+        message: $_('passwordChangedSuccess')
+      }}, window.location.href);
+
+      ChangePasswordEvent = new CustomEvent('ChangePassword', { detail: { userPassword: data.newPassword }});
+      window.dispatchEvent(ChangePasswordEvent);
+
+    } else {
+      let dataResponse:any = await response.json();
+      // Parsing GMCore message 'cuz it's stupid and it doesn't know how to send error messages in 2021 ffs
+      errorPasswordChanged = dataResponse.error.substring(dataResponse.error.indexOf('errorMessage') + 13, dataResponse.error.length);
+      showErrorPasswordChanged = true;
+      window.postMessage({ type: "ShowPasswordChangedError", showErrorPasswordChanged, errorPasswordChanged }, window.location.href);
+      window.postMessage({ type: 'WidgetNotification', data: {
+        type: 'error',
+        message: errorPasswordChanged
+      }}, window.location.href);
+    }
+  }
+
+  const getRealityCheckData = (url:URL):void => {
+    let options = {
+      method: 'GET',
+      headers: {
+        'X-SessionID': sessionId,
+      }
+    }
+    fetch(url.href, options)
+      .then((res:any) => { return res.json(); })
+      .then((data:any) => {
+        realityCheckData = data.UserRealityCheckValue;
+      }, (err:any) => {
+        console.error(err);
+      });
+  }
+
+  const setRealityCheckValue = (updatedData:string):void => {
+    let url:URL = new URL(`${endpoint}/v1/player/${userId}/realitycheck`);
+
+    if (updatedData) {
+      storedRealityCheck = updatedData;
+    }
+
+    let optionsRealityCheck = {
+      method: "POST",
+      headers: {
+        'X-SessionID': sessionId,
+        'Content-Type': "application/json",
+        'Accept': 'application/json',
+        'realityCheckValue': parseInt(storedRealityCheck, 10)
+      }
+    };
+
+    fetch(url.href, optionsRealityCheck)
+      .then((res:any) => {
+        if (res.status == 200) {
+          getRealityCheckData(new URL(`${endpoint}/v1/player/${playerid}/realitycheck`));
+          window.postMessage({ type: 'RealityCheckValueUpdated' }, window.location.href);
+          window.postMessage({ type: 'WidgetNotification', data: {
+            type: 'success',
+            message: $_('realityCheckSuccess')
+          }}, window.location.href);
+        }
+      }, (err:any) => {
+        console.error(err);
+      });
+  }
+
+  const getGamingLimits = (url:URL):void => {
+    if (showsuccessnotification === true) {
+      setTimeout(() => {showsuccessnotification = false; }, 3000);
+    } else if(showdeletenotification === true) {
+      setTimeout(() => {showdeletenotification = false; }, 3000);
+    }
+
+    let options = {
+      method: "GET",
+      headers: {
+        'X-SessionID': sessionId,
+      }
+    };
+
+    fetch(url.href, options)
+      .then((res:any) => res.json())
+      .then((data:any):void => {
+        playerlimits = data;
+        // add name property for info boxes
+        if (Object.keys(playerlimits).length !== 0) {
+          depositlimit = playerlimits.depositLimits ?? [];
+          wageringlimit = playerlimits.wageringLimits ?? [];
+          losslimit = playerlimits.lossLimits ?? [];
+
+          if (playerlimits.hasOwnProperty('cumulativeSessionLimits')) {
+            timelimit = playerlimits.timeLimit;
+            timelimit = playerlimits.cumulativeSessionLimits.map((item) => {
+              item.amount = item.minutes;
+              return item;
+            });
+          } else {
+            timelimit = [];
+          }
+
+          window.postMessage({ type: 'PlayerLimitsData', limits: {
+            playercurrency,
+            depositlimit,
+            wageringlimit,
+            losslimit,
+            timelimit,
+            showsuccessnotification,
+            showdeletenotification,
+            lang,
+          }}, window.location.href);
+
+        } else {
+          depositlimit = [];
+          wageringlimit = [];
+          losslimit = [];
+          timelimit = [];
+        }
+
+        tick();
+      }, (err:any) => {
+        console.error(err);
+      });
+  }
+
+  const getData = ():void => {
+    getNotificationsDetails(new URL(`${cmsendpoint}/${lang}/support-information?env=${env}`));
+    getUserProfileInfo();
+    getUserProfileConsent();
+    getRealityCheckData(new URL(`${endpoint}/v1/player/${playerid}/realitycheck`));
+  }
+
+  const setActiveLanguage = ():void => {
+    setLocale(lang);
+  }
+
+  const sendLimitsData = (e:any):void => {
+    getGamingLimits(new URL(`/v2/player/${userId}/limits`, endpoint));
+  }
+
+  const setClientStyling = ():void => {
+    let sheet = 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();
+  $: cmsendpoint && endpoint && customnotifications && playerid && session && lang && env && userroles && initialLoad();
+  $: depositlimit && wageringlimit && losslimit && timelimit;
+  $: clientstyling && customStylingContainer && setClientStyling();
+  $: clientstylingurl && customStylingContainer && setClientStylingURL();
+  $: translationurl && setTranslationUrl();
+  $: activepage && setActivePage();
+</script>
+
+<svelte:head>
+  <script type="module" src="https://unpkg.com/@everymatrix/user-deposit-withdrawal"></script>
+  <script type="module" src="https://unpkg.com/@everymatrix/player-kyc-verification"></script>
+  <script type="module" src="https://unpkg.com/@everymatrix/user-transaction-history"></script>
+</svelte:head>
+
+<div bind:this={customStylingContainer}>
+
+  {#if isLoading}
+    <div class="ModalLoader"></div>
+  {:else}
+    <section class="PlayerAccountPage {isMobile ? 'PlayerAccountMobilePage' : ''}">
+      {#if isMobile}
+        {#if !activeMenuItem}
+          <nav class="PlayerAccountMobile">
+            <player-account-menu {endpoint} {session} {playerid} {lang} {translationurl} {userroles} {clientstyling} {clientstylingurl}></player-account-menu>
+            <player-account-notifications customnotif={customnotifications} {translationurl} {clientstyling} {clientstylingurl}></player-account-notifications>
+          </nav>
+        {:else}
+          {#if activeMenuItem === widgetPath[0]}
+            <player-profile-info {endpoint} {lang} {countrycode} {translationurl} {clientstyling} {clientstylingurl} {custominputtextswitch}></player-profile-info>
+          {:else if activeMenuItem === widgetPath[1]}
+            <player-change-password {simplepasswordvalidation} {translationurl} {lang} {clientstyling} {clientstylingurl}></player-change-password>
+          {:else if activeMenuItem === widgetPath[2]}
+            <player-reality-check realitycheck={realityCheckData} {endpoint} {translationurl} {playerid} {session} {lang} {clientstyling} {clientstylingurl}></player-reality-check>
+          {:else if activeMenuItem === widgetPath[3]}
+            <player-account-timeout {lang} {operator} {supportemail} {translationurl} {clientstyling} {clientstylingurl}></player-account-timeout>
+          {:else if activeMenuItem === widgetPath[4]}
+            <player-account-closure {lang} {clientstyling} {clientstylingurl} {translationurl}></player-account-closure>
+          {:else if activeMenuItem === widgetPath[5]}
+            <player-account-gaming-limits use:sendLimitsData {playercurrency} {separatelimits} {translationurl} {clientstyling} {clientstylingurl}></player-account-gaming-limits>
+          {:else if activeMenuItem === widgetPath[6]}
+            <player-account-self-exclusion {lang} {operator} {supportemail} {clientstyling} {clientstylingurl} {translationurl}></player-account-self-exclusion>
+          {:else if activeMenuItem === widgetPath[7]}
+            <player-active-bonuses {endpoint} {session} {playerid} {lang} {translationurl} {playercurrency} {clientstyling} {clientstylingurl}></player-active-bonuses>
+          {:else if activeMenuItem === widgetPath[8]}
+            <player-bonus-history {endpoint} {session} {playerid} {lang} {translationurl} {clientstyling} {clientstylingurl}></player-bonus-history>
+          {:else if activeMenuItem === widgetPath[9]}
+            <player-gaming-history {endpoint} {session} {playerid} {lang} {translationurl} {clientstyling} {clientstylingurl} {gmversion}></player-gaming-history>
+          {:else if activeMenuItem === widgetPath[10]}
+            <player-deposit {endpoint} {session} {playerid} {lang} {hasdefaultamount} {translationurl} {clientstyling} {clientstylingurl} {playercurrency}></player-deposit>
+          {:else if activeMenuItem === widgetPath[11]}
+            <player-withdrawal {endpoint} {session} {playerid} {lang} {hasdefaultamount} {translationurl} {clientstyling} {clientstylingurl} {playercurrency}></player-withdrawal>
+          {:else if activeMenuItem === widgetPath[12]}
+            <player-pending-withdrawals {endpoint} {session} {playerid} {lang} {translationurl} {clientstyling} {clientstylingurl}></player-pending-withdrawals>
+          {:else if activeMenuItem === widgetPath[13]}
+            <player-transaction-history {endpoint} {session} {playerid} {lang} {translationurl} {clientstyling} {clientstylingurl}></player-transaction-history>
+          {:else if activeMenuItem === widgetPath[14]}
+            <player-account-betting-history {endpoint} {session} {playerid} {lang} {translationurl} {clientstyling} {clientstylingurl}></player-account-betting-history>
+          {:else if activeMenuItem === widgetPath[15]}
+            <player-account-gaming-limits-wrapper-2 {endpoint} userid={playerid} {session} {lang} {tablabels} {historyenabled} {deletelimit} {limitsamount} {limitsperiods} {numberofentries} {customcurrencysymbols} {currency} {apiversion} {translationurl} {clientstyling} {clientstylingurl}></player-account-gaming-limits-wrapper-2>
+          {:else if activeMenuItem === widgetPath[16]}
+            <player-kyc-verification {endpoint} {session} user-id={playerid} language={lang} kyc-title={kyctitle} description={kycdescription} translation-url={translationurl} client-styling={clientstyling} client-styling-url={clientstylingurl}></player-kyc-verification>
+          {:else if activeMenuItem === widgetPath[17] }
+            <user-deposit-withdrawal {endpoint} type="deposit" channel="Mobile" language={lang} {translationurl} {currency} show-bonus-selection-input={showcashierbonus} product-type={producttype} user-id={playerid} {session}  success-url={'https://' + window.location.hostname + '/' + lang + successurl} cancel-url={'https://' + window.location.hostname + '/' + lang + cancelurl} fail-url={'https://' + window.location.hostname + '/' + lang + failurl} sports-url={'https://' + window.location.hostname + '/' + lang + sportsurl} casino-url={'https://' + window.location.hostname + '/' + lang + casinourl} contact-url={'https://' + window.location.hostname + '/' + lang + contacturl} home-url={'https://' + window.location.hostname + '/' + lang + homeurl} deposit-url={'https://' + window.location.hostname + '/' + lang + depositurl}  client-styling={clientstyling} client-styling-url={clientstylingurl}></user-deposit-withdrawal>
+          {:else if activeMenuItem === widgetPath[18] }
+            <user-deposit-withdrawal {endpoint} type="withdraw" channel="Mobile" language={lang} {translationurl} {currency} show-bonus-selection-input={showcashierbonus} product-type={producttype} user-id={playerid} {session}  success-url={'https://' + window.location.hostname + '/' + lang + successurl} cancel-url={'https://' + window.location.hostname + '/' + lang + cancelurl} fail-url={'https://' + window.location.hostname + '/' + lang + failurl} sports-url={'https://' + window.location.hostname + '/' + lang + sportsurl} casino-url={'https://' + window.location.hostname + '/' + lang + casinourl} contact-url={'https://' + window.location.hostname + '/' + lang + contacturl} home-url={'https://' + window.location.hostname + '/' + lang + homeurl} deposit-url={'https://' + window.location.hostname + '/' + lang + depositurl}  client-styling={clientstyling} client-styling-url={clientstylingurl}></user-deposit-withdrawal>
+          {:else if activeMenuItem === widgetPath[19] }
+            <user-transaction-history endpoint={endpoint} user-id={playerid} session={session} mobile={isMobile} translation-url={translationurl} language={lang}></user-transaction-history>
+          {:else if activeMenuItem === widgetPath[20] }
+            <player-account-biometrics {biometricsenabled} {lang} {clientstyling} {clientstylingurl} {translationurl}></player-account-biometrics>
+          {/if}
+        {/if}
+      {:else}
+        <nav>
+          <player-account-menu {endpoint} {session} {playerid} {lang} {env} activemenuitem={activeMenuItem}  {cmsendpoint} selecteditem={selected} {userroles} {clientstyling} {clientstylingurl}></player-account-menu>
+        </nav>
+        <main>
+          {#if activeMenuItem === widgetPath[0]}
+            <player-profile-info {endpoint} {lang} {countrycode} {translationurl} {clientstyling} {clientstylingurl} {custominputtextswitch}></player-profile-info>
+          {:else if activeMenuItem === widgetPath[1]}
+            <player-change-password {simplepasswordvalidation}{lang} {translationurl}  {clientstyling} {clientstylingurl}></player-change-password>
+          {:else if activeMenuItem === widgetPath[2]}
+            <player-reality-check realitycheck={realityCheckData} {endpoint} {translationurl} {playerid} {session} {lang} {clientstyling} {clientstylingurl}></player-reality-check>
+          {:else if activeMenuItem === widgetPath[3]}
+            <player-account-timeout {lang} {operator} {supportemail} {translationurl} {clientstyling} {clientstylingurl}></player-account-timeout>
+          {:else if activeMenuItem === widgetPath[4]}
+            <player-account-closure {lang} {clientstyling} {translationurl} {clientstylingurl}></player-account-closure>
+          {:else if activeMenuItem == widgetPath[5]}
+            <player-account-gaming-limits use:sendLimitsData {playercurrency} {translationurl} {separatelimits} {clientstyling} {clientstylingurl}></player-account-gaming-limits>
+          {:else if activeMenuItem === widgetPath[6]}
+            <player-account-self-exclusion {lang} {operator}  {supportemail} {translationurl} {clientstyling} {clientstylingurl}></player-account-self-exclusion>
+          {:else if activeMenuItem === widgetPath[7]}
+            <player-active-bonuses {endpoint} {session} {playerid} {lang} {translationurl} {playercurrency} {clientstyling} {clientstylingurl}></player-active-bonuses>
+          {:else if activeMenuItem === widgetPath[8]}
+            <player-bonus-history {endpoint} {session} {playerid} {lang} {translationurl} {clientstyling} {clientstylingurl}></player-bonus-history>
+          {:else if activeMenuItem === widgetPath[9]}
+            <player-gaming-history {endpoint} {session} {playerid} {lang} {translationurl} {clientstyling} {clientstylingurl} {gmversion}></player-gaming-history>
+          {:else if activeMenuItem === widgetPath[10]}
+            <player-deposit {endpoint} {session} {playerid} {lang} {hasdefaultamount} {translationurl} {clientstyling} {clientstylingurl} {playercurrency}></player-deposit>
+          {:else if activeMenuItem === widgetPath[11]}
+            <player-withdrawal {endpoint} {session} {playerid} {lang} {hasdefaultamount} {translationurl} {clientstyling} {clientstylingurl} {playercurrency}></player-withdrawal>
+          {:else if activeMenuItem === widgetPath[12]}
+            <player-pending-withdrawals {endpoint} {session} {playerid} {lang} {translationurl} {clientstyling} {clientstylingurl}></player-pending-withdrawals>
+          {:else if activeMenuItem === widgetPath[13]}
+            <player-transaction-history {endpoint} {session} {playerid} {lang} {translationurl} {clientstyling} {clientstylingurl}></player-transaction-history>
+          {:else if activeMenuItem === widgetPath[14]}
+            <player-account-betting-history {endpoint} {session} {playerid} {lang} {translationurl} {clientstyling} {clientstylingurl}></player-account-betting-history>
+          {:else if activeMenuItem === widgetPath[15]}
+            <player-account-gaming-limits-wrapper-2 {endpoint} userid={playerid} {session} {tablabels} {lang} {historyenabled} {deletelimit} {limitsamount} {limitsperiods} {numberofentries} {customcurrencysymbols} {currency} {apiversion} {translationurl} {clientstyling} {clientstylingurl}></player-account-gaming-limits-wrapper-2>
+          {:else if activeMenuItem === widgetPath[16]}
+            <player-kyc-verification {endpoint} {session} user-id={playerid} language={lang} translation-url={translationurl} kyc-title={kyctitle} description={kycdescription} client-styling={clientstyling} client-styling-url={clientstylingurl}></player-kyc-verification>
+          {:else if activeMenuItem === widgetPath[17] }
+            <user-deposit-withdrawal endpoint={endpoint} type="deposit" channel="Desktop" language={lang} {translationurl} {currency} show-bonus-selection-input={showcashierbonus} product-type={producttype} user-id={playerid} {session} success-url={'https://' + window.location.hostname + '/' + lang + successurl} cancel-url={'https://' + window.location.hostname + '/' + lang + cancelurl} fail-url={'https://' + window.location.hostname + '/' + lang + failurl} sports-url={'https://' + window.location.hostname + '/' + lang + sportsurl} casino-url={'https://' + window.location.hostname + '/' + lang + casinourl} contact-url={'https://' + window.location.hostname + '/' + lang + contacturl} home-url={'https://' + window.location.hostname + '/' + lang + homeurl} deposit-url={'https://' + window.location.hostname + '/' + lang + depositurl} client-styling={clientstyling} client-styling-url={clientstylingurl}></user-deposit-withdrawal>
+          {:else if activeMenuItem === widgetPath[18] }
+            <user-deposit-withdrawal endpoint={endpoint} type="withdraw" channel="Desktop" language={lang} {translationurl} {currency} show-bonus-selection-input={showcashierbonus} product-type={producttype} user-id={playerid} {session} success-url={'https://' + window.location.hostname + '/' + lang + successurl} cancel-url={'https://' + window.location.hostname + '/' + lang + cancelurl} fail-url={'https://' + window.location.hostname + '/' + lang + failurl} sports-url={'https://' + window.location.hostname + '/' + lang + sportsurl} casino-url={'https://' + window.location.hostname + '/' + lang + casinourl} contact-url={'https://' + window.location.hostname + '/' + lang + contacturl} home-url={'https://' + window.location.hostname + '/' + lang + homeurl} deposit-url={'https://' + window.location.hostname + '/' + lang + depositurl} client-styling={clientstyling} client-styling-url={clientstylingurl}></user-deposit-withdrawal>
+          {:else if activeMenuItem === widgetPath[19] }
+            <user-transaction-history endpoint={endpoint} user-id={playerid} session={session} mobile={isMobile} translation-url={translationurl} language={lang}></user-transaction-history>
+          {/if}
+        </main>
+        <aside>
+          <player-account-notifications customnotif={customnotifications} {translationurl} {clientstyling} {clientstylingurl}></player-account-notifications>
+        </aside>
+      {/if}
+    </section>
+  {/if}
+</div>
+
+<style lang="scss">
+  *, *::before, *::after, body {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  .PlayerAccountPage {
+    display: grid;
+    gap: 10px;
+    width: 100%;
+    grid-template-areas: "nav  main  aside";
+    grid-template-rows: auto;
+    grid-template-columns: 300px 1fr 300px;
+    background: var(--emfe-w-pam-color-bg, var(--emfe-w-color-gray-50, #F9F8F8));
+    // padding-right: 30px;
+    &.PlayerAccountMobilePage {
+      display: block;
+      background: linear-gradient(to right, var(--emw--color-primary-variant, #184026), var(--emw--color-secondary-variant, #013E5C));
+      padding-right: 0px;
+    }
+  }
+  .PlayerAccountPage > nav {
+    grid-area: nav;
+    background: linear-gradient(to right, var(--emw--color-primary-variant, #184026), var(--emw--color-secondary-variant, #013E5C));
+    // border: 5px solid transparent;
+    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.3);
+    background-clip: padding-box;
+    border-radius: var(--emw--border-radius-medium, 20px);
+    &.PlayerAccountMobile {
+      background: linear-gradient(to right, var(--emw--color-primary-variant, #184026), var(--emw--color-secondary-variant, #013E5C));
+      color: var(--emfe-w-pam-typography-color-nav-bg, var(--emfe-w-color-contrast, #FFFFFF));
+      border-radius: 0px;
+      padding: 0;
+    }
+  }
+  .PlayerAccountPage > main {
+    grid-area: main;
+  }
+  .PlayerAccountPage > aside {
+    grid-area: aside;
+    background: linear-gradient(to bottom, var(--emw--color-primary-variant, #184026), var(--emw--color-aside-pam-variant, #453D68));
+    border-radius: var(--emw--border-radius-medium, 20px);
+    padding: 15px;
+  }
+</style>
+