@everymatrix/player-account-controller 1.36.1 → 1.37.1

package/src/PlayerAccountController.svelte

@@ -1,923 +0,0 @@
-<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';
-  import '@everymatrix/player-account-notifications';
-  import '@everymatrix/player-account-timeout';
-  import '@everymatrix/player-account-self-exclusion';
-  import '@everymatrix/player-account-closure';
-  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';
-  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;
-
-  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 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 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;
-      }
-    }
-  }
-
-  async function getAccountMenuDetails(url:URL) {
-    url.searchParams.append('device', deviceSegregationValue)
-    const response = await fetch(url.href);
-    const dataMenuItems = await response.json();
-    return dataMenuItems;
-  }
-
-  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 findPageId = ():void => {
-    menuData.forEach(element => {
-      if (element.path.includes(activepage)) {
-        selected = element.id;
-      }
-    })
-  }
-
-  const getData = ():void => {
-    getAccountMenuDetails(new URL(`${cmsendpoint}/${lang}/profile-menu?env=${env}`))
-      .then((data:any):void => {
-        menuData = data;
-        findPageId();
-        window.postMessage({ type: 'AccountMenuDetails', accountMenuInfo: menuData }, window.location.href);
-    });
-
-    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 initialLoad = ():void => {
-    setDevice()
-    userId = playerid;
-    sessionId = session;
-    getData();
-  }
-
-  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();
-</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 !activepage}
-          <nav class="PlayerAccountMobile">
-            <player-account-menu {endpoint} {session} {playerid} {lang} {userroles} {clientstyling} {clientstylingurl}></player-account-menu>
-            <player-account-notifications customnotif={customnotifications} {clientstyling} {clientstylingurl}></player-account-notifications>
-          </nav>
-        {:else}
-          {#if activepage === widgetPath[0]}
-            <player-profile-info {endpoint} {lang} {countrycode} {clientstyling} {clientstylingurl} {custominputtextswitch}></player-profile-info>
-          {:else if activepage === widgetPath[1]}
-            <player-change-password {simplepasswordvalidation} {lang} {clientstyling} {clientstylingurl}></player-change-password>
-          {:else if activepage === widgetPath[2]}
-            <player-reality-check realitycheck={realityCheckData} {endpoint} {playerid} {session} {lang} {clientstyling} {clientstylingurl}></player-reality-check>
-          {:else if activepage === widgetPath[3]}
-            <player-account-timeout {lang} {operator} {supportemail} {clientstyling} {clientstylingurl}></player-account-timeout>
-          {:else if activepage === widgetPath[4]}
-            <player-account-closure {lang} {clientstyling} {clientstylingurl}></player-account-closure>
-          {:else if activepage === widgetPath[5]}
-            <player-account-gaming-limits use:sendLimitsData {playercurrency} {separatelimits} {clientstyling} {clientstylingurl}></player-account-gaming-limits>
-          {:else if activepage === widgetPath[6]}
-            <player-account-self-exclusion {lang} {operator} {supportemail} {clientstyling} {clientstylingurl}></player-account-self-exclusion>
-          {:else if activepage === widgetPath[7]}
-            <player-active-bonuses {endpoint} {session} {playerid} {lang} {playercurrency} {clientstyling} {clientstylingurl}></player-active-bonuses>
-          {:else if activepage === widgetPath[8]}
-            <player-bonus-history {endpoint} {session} {playerid} {lang} {clientstyling} {clientstylingurl}></player-bonus-history>
-          {:else if activepage === widgetPath[9]}
-            <player-gaming-history {endpoint} {session} {playerid} {lang} {clientstyling} {clientstylingurl} {gmversion}></player-gaming-history>
-          {:else if activepage === widgetPath[10]}
-            <player-deposit {endpoint} {session} {playerid} {lang} {hasdefaultamount} {clientstyling} {clientstylingurl} {playercurrency}></player-deposit>
-          {:else if activepage === widgetPath[11]}
-            <player-withdrawal {endpoint} {session} {playerid} {lang} {hasdefaultamount} {clientstyling} {clientstylingurl} {playercurrency}></player-withdrawal>
-          {:else if activepage === widgetPath[12]}
-            <player-pending-withdrawals {endpoint} {session} {playerid} {lang} {clientstyling} {clientstylingurl}></player-pending-withdrawals>
-          {:else if activepage === widgetPath[13]}
-            <player-transaction-history {endpoint} {session} {playerid} {lang} {clientstyling} {clientstylingurl}></player-transaction-history>
-          {:else if activepage === widgetPath[14]}
-            <player-account-betting-history {endpoint} {session} {playerid} {lang} {clientstyling} {clientstylingurl}></player-account-betting-history>
-          {:else if activepage === 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 activepage === widgetPath[16]}
-            <player-kyc-verification {endpoint} {session} user-id={playerid} language={lang} translation-url={translationurl} client-styling={clientstyling} client-styling-url={clientstylingurl}></player-kyc-verification> 
-          {:else if activepage === widgetPath[17] }
-            <user-deposit-withdrawal {endpoint} type="deposit" channel="Mobile" language={lang} {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} ></user-deposit-withdrawal>
-          {:else if activepage === widgetPath[18] }
-            <user-deposit-withdrawal {endpoint} type="withdraw" channel="Mobile" language={lang} {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}></user-deposit-withdrawal>
-          {:else if activepage === widgetPath[19] }
-            <user-transaction-history endpoint={endpoint} user-id={playerid} session={session} mobile={isMobile} translation-url={translationurl} language={lang}></user-transaction-history>
-          {:else if activepage === widgetPath[20] }
-            <player-account-biometrics {biometricsenabled} {lang} {clientstyling} {clientstylingurl} {translationurl}></player-account-biometrics>
-          {/if}  
-        {/if}
-      {:else}
-        <nav>
-          <player-account-menu {endpoint} {session} {playerid} {lang} selecteditem={selected} {userroles} {clientstyling} {clientstylingurl}></player-account-menu>
-        </nav>
-        <main>
-          {#if activepage === widgetPath[0]}
-            <player-profile-info {endpoint} {lang} {countrycode} {clientstyling} {clientstylingurl} {custominputtextswitch}></player-profile-info>
-          {:else if activepage === widgetPath[1]}
-            <player-change-password {simplepasswordvalidation}{lang} {clientstyling} {clientstylingurl}></player-change-password>
-          {:else if activepage === widgetPath[2]}
-            <player-reality-check realitycheck={realityCheckData} {endpoint} {playerid} {session} {lang} {clientstyling} {clientstylingurl}></player-reality-check>
-          {:else if activepage === widgetPath[3]}
-            <player-account-timeout {lang} {operator} {supportemail} {clientstyling} {clientstylingurl}></player-account-timeout>
-          {:else if activepage === widgetPath[4]}
-            <player-account-closure {lang} {clientstyling} {clientstylingurl}></player-account-closure>
-          {:else if activepage == widgetPath[5]}
-            <player-account-gaming-limits use:sendLimitsData {playercurrency} {separatelimits} {clientstyling} {clientstylingurl}></player-account-gaming-limits>
-          {:else if activepage === widgetPath[6]}
-            <player-account-self-exclusion {lang} {operator}  {supportemail} {clientstyling} {clientstylingurl}></player-account-self-exclusion>
-          {:else if activepage === widgetPath[7]}
-            <player-active-bonuses {endpoint} {session} {playerid} {lang} {playercurrency} {clientstyling} {clientstylingurl}></player-active-bonuses>
-          {:else if activepage === widgetPath[8]}
-            <player-bonus-history {endpoint} {session} {playerid} {lang} {clientstyling} {clientstylingurl}></player-bonus-history>
-          {:else if activepage === widgetPath[9]}
-            <player-gaming-history {endpoint} {session} {playerid} {lang} {clientstyling} {clientstylingurl} {gmversion}></player-gaming-history>
-          {:else if activepage === widgetPath[10]}
-            <player-deposit {endpoint} {session} {playerid} {lang} {hasdefaultamount} {clientstyling} {clientstylingurl} {playercurrency}></player-deposit>
-          {:else if activepage === widgetPath[11]}
-            <player-withdrawal {endpoint} {session} {playerid} {lang} {hasdefaultamount} {clientstyling} {clientstylingurl} {playercurrency}></player-withdrawal>
-          {:else if activepage === widgetPath[12]}
-            <player-pending-withdrawals {endpoint} {session} {playerid} {lang} {clientstyling} {clientstylingurl}></player-pending-withdrawals>
-          {:else if activepage === widgetPath[13]}
-            <player-transaction-history {endpoint} {session} {playerid} {lang} {clientstyling} {clientstylingurl}></player-transaction-history>
-          {:else if activepage === widgetPath[14]}
-            <player-account-betting-history {endpoint} {session} {playerid} {lang} {clientstyling} {clientstylingurl}></player-account-betting-history>
-          {:else if activepage === 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 activepage === widgetPath[16]}
-            <player-kyc-verification {endpoint} {session} user-id={playerid} language={lang} translation-url={translationurl} client-styling={clientstyling} client-styling-url={clientstylingurl}></player-kyc-verification> 
-          {:else if activepage === widgetPath[17] }
-            <user-deposit-withdrawal endpoint={endpoint} type="deposit" channel="Desktop" language={lang} {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}></user-deposit-withdrawal>
-          {:else if activepage === widgetPath[18] }
-            <user-deposit-withdrawal endpoint={endpoint} type="withdraw" channel="Desktop" language={lang} {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}></user-deposit-withdrawal>
-          {:else if activepage === 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} {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;
-    width: 100%;
-    grid-template-areas: "nav  main  aside";
-    grid-template-rows: auto;
-    grid-template-columns: 250px 1fr 230px;
-    background: var(--emfe-w-pam-color-bg, var(--emfe-w-color-gray-50, #F9F8F8));
-    padding-right: 30px;
-    &.PlayerAccountMobilePage {
-      display: block;
-      background: var(--emfe-w-pam-color-bg, var(--emfe-w-color-gray-50, #F9F8F8));
-      padding-right: 0px;
-    }
-  }
-  .PlayerAccountPage > nav {
-    grid-area: nav;
-    color:red;
-    background: var(--emfe-w-pam-color-nav-desktop-bg, var(--emfe-w-color-gray-300, #58586B));
-    &.PlayerAccountMobile {
-      background: var(--emfe-w-pam-color-nav-mobile-bg, var(--emfe-w-color-background, #07072A));
-      color: var(--emfe-w-pam-typography-color-nav-bg, var(--emfe-w-color-contrast, #FFFFFF));
-    }
-  }
-  .PlayerAccountPage > main {
-    grid-area: main;
-  }
-  .PlayerAccountPage > aside {
-    grid-area: aside;
-  }
-</style>