@everymatrix/player-profile-info 0.0.367 → 0.0.369

package/src/PlayerProfileInfo.svelte

@@ -1,965 +1,965 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import { getDevice } from 'rvhelper';
-  import { _, addNewMessages, setLocale } from './i18n';
-  import { PlayerProfileTranslations } from './translations';
-
-  // Native bridge
-  import { isNative, call as callNative, registerEventListener as registerNativeEventListener } from 'js-native-bridge';
-
-
-  export let endpoint:string = '';
-  export let lang:string = 'en';
-  export let countrycode:string = 'IR';
-
-  let isLoading:boolean = true;
-  let userAgent:string = window.navigator.userAgent;
-  let isMobile:boolean = (getDevice(userAgent) === 'PC') ? false : true;
-  let noPlayerData:boolean = true;
-
-  let playerPostalCode:HTMLElement, playerAddress:HTMLElement, playerCity:HTMLElement;
-  let giveConsentSMS:boolean = false;
-  let giveConsentEmail:boolean = false;
-  let biometricsSelection:boolean = false;
-  let playerQuestion:string = '';
-  let playerAnswer:string = '';
-  let playerPrefix:string = '';
-  let playerMobileNumber:string = '';
-  let differencesExist:boolean = false;
-  let selectedCountry:Object = { Name: 'I.e Ireland'};
-  let prefixesArray:Array<Object> = [];
-  let countriesArray:Array<Object> = []
-
-  let profileConsent:Array<Object> = [];
-  let showEmail:boolean = false;
-  let showSMS:boolean = false;
-  let consentArray:any = { items: [] };
-
-  let isValid:boolean = false;
-
-  let invalidCity:string = '';
-  let invalidPostalCode:string = '';
-  let invalidAddress:string = '';
-  let invalidSecurityQuestion:boolean = false;
-  let invalidSecurityAnswer:boolean = false;
-  let invalidMobile:boolean;
-
-  let showConfirmSave:boolean = false;
-
-  // Native bridge
-  let isOnNative:boolean = false;
-
-  Object.keys(PlayerProfileTranslations).forEach((item:any) => {
-    addNewMessages(item, PlayerProfileTranslations[item]);
-  });
-
-  const mediaQuery = window.matchMedia('(min-width: 768px)');
-
-  // needed to keep track of data changes
-  let provisionalArray:any = {
-    address1: '',
-    address2: '',
-    city: '',
-    acceptNewsEmail: false,
-    acceptSMSOffers : false,
-    country: '',
-    mobile: {prefix: '', number: ''},
-    postalCode: '',
-    securityAnswer: '',
-    securityQuestion: '',
-  }
-
-  // needed to keep track of data changes
-  let initialValuesArray:any = {
-    acceptNewsEmail: false,
-    acceptSMSOffers : false,
-    address: '',
-    city: '',
-    mobileNumber: '',
-    mobilePrefix: '',
-    postalCode: '',
-    securityAnswer: '',
-    securityQuestion: ''
-  }
-
-  // placeholder field values
-  let profileDetails:any = {
-    address1: "i.e.: Glanmire Rd.",
-    birth: '01/01/1990',
-    city: "i.e.: Cork",
-    country: "i.e.: Ireland",
-    currency: "EUR",
-    email: "email@here.com",
-    firstname: "Joe",
-    userTitles: "M",
-    lastname: "Johnson",
-    mobile: {prefix: "+00", number: "00000000"},
-    postalCode: "i.e.: 465531",
-    securityAnswer: "i.e.: Jerry",
-    securityQuestion: "i.e.: Pet name?",
-    title: "",
-    username: "Username"
-  };
-
-  let {address1, birth, city, country, currency, mobile, email, firstname, userTitles, language, lastname, postalCode, securityAnswer, securityQuestion, username, consents} = profileDetails;
-
-  const messageHandler = (e:any):void => {
-    if (e.data) {
-      switch(e.data.type) {
-        case 'ProfileDetailsData':
-          noPlayerData = false;
-          profileDetails = e.data.profileDetails;
-
-          // readonly field values
-          username = profileDetails.username;
-          mobile = profileDetails.mobile;
-          email = profileDetails.email;
-          firstname = profileDetails.firstname;
-          lastname = profileDetails.lastname;
-          language = profileDetails.language;
-          birth = profileDetails.birth?.day + '/' + profileDetails.birth?.month + '/' + profileDetails.birth?.year;
-          currency = profileDetails.currency;
-          userTitles = profileDetails.title;
-
-          // editable field values used for bindings
-          playerQuestion = profileDetails.securityQuestion;
-          playerAnswer = profileDetails.securityAnswer;
-          playerPrefix = profileDetails.mobile?.prefix;
-          playerMobileNumber = profileDetails.mobile?.number;
-
-          // set values for the initial editable values object
-          initialValuesArray = {
-            address: profileDetails.address1,
-            city: profileDetails.city,
-            mobilePrefix: mobile?.prefix,
-            mobileNumber: mobile?.number,
-            postalCode: profileDetails.postalCode,
-            securityAnswer: profileDetails.securityAnswer,
-            securityQuestion: profileDetails.securityQuestion,
-          }
-        break;
-
-        case 'ProfileConsentData':
-          profileConsent = e.data.consent.items;
-          if (Array.isArray(profileConsent)) {
-            profileConsent.forEach((item) => {
-              if (item.tagCode == 'emailmarketing') {
-                showEmail = true;
-                giveConsentEmail = item.status == 'Accepted';
-                initialValuesArray.acceptNewsEmail = giveConsentEmail;
-              } else if (item.tagCode == 'sms') {
-                showSMS = true;
-                giveConsentSMS = item.status == 'Accepted';
-                initialValuesArray.acceptSMSOffers = giveConsentSMS;
-              }
-            });
-          }
-        break;
-
-        case 'ConfirmProfileInfoSave':
-          if (isOnNative) {
-            registerNativeEventListener(
-              'BIOMETRICS_ENABLED',
-              (biometricsEnabled) => {
-                if (biometricsEnabled !== biometricsSelection) {
-                  biometricsSelection = biometricsEnabled;
-                }
-              },
-            );
-
-            const methodFound = callNative(
-              biometricsSelection ? 'ENABLE_BIOMETRICS' : 'DISABLE_BIOMETRICS',
-            );
-
-            if (!methodFound) {
-              // Nothing to do here yet
-            }
-          }
-
-          differencesExist = false;
-
-          showConfirmMessage();
-          break;
-      }
-    }
-  }
-
-  const getCountriesList = ():void => {
-    fetch(`${endpoint}/player/countries`)
-      .then((res:any) => {
-        if (res.status >= 300) {
-          return new Error('Error while fetching the countries');
-        }
-
-        return res.json();
-      })
-      .then((countryList:any) => {
-        fetch(`${endpoint}/player/operatorSupportedCountries`).then((res:any) => {
-          if (res.status >= 300) {
-            return new Error('Error while fetching the supported countries');
-          }
-
-          return res.json();
-        })
-        .then((supportedCountries:any) => {
-          countriesArray = countryList.countries.filter((item:any) => {
-            return supportedCountries.countries.indexOf(item.Alpha2Code) >= 0;
-          });
-
-          selectedCountry = countriesArray.find((country:any) => country.Alpha2Code === countrycode) || { Name: 'I.E. Ireland'};
-          isLoading = false;
-        });
-      });
-  }
-
-  const getPhoneCodes = ():void => {
-    fetch(`${endpoint}/player/phonecodes`)
-      .then((res:any) => res.json())
-      .then(data => {
-        prefixesArray = data.phoneCodes;
-      });
-  }
-
-  const showConfirmMessage = ():void => {
-    showConfirmSave = true;
-    setTimeout(() => {showConfirmSave = false;}, 3000);
-  }
-
-
-  const checkIsValid = ():void => {
-    if (invalidSecurityQuestion || invalidSecurityAnswer ||  invalidCity ||  invalidAddress ||  invalidPostalCode ||  invalidMobile) {
-      isValid = false;
-    }
-    else {
-      isValid = true;
-    }
-  }
-
-  const checkMobile = ():boolean => {
-    if(playerMobileNumber && playerMobileNumber.length >= 5 && playerMobileNumber.length <= 30) {
-      return true;
-    }
-
-    return false;
-  }
-
-  const validateMobile = ():void => {
-    invalidMobile = !checkMobile();
-    checkIsValid();
-  }
-
-  const checkSecurityQuestion = ():boolean => {
-    if (playerQuestion && playerQuestion.length <= 120) {
-      return true;
-    }
-
-    return false;
-  }
-
-  const validateSecurityQuestion = ():void => {
-    invalidSecurityQuestion = !checkSecurityQuestion();
-    checkIsValid();
-  }
-
-  const checkSecurityAnswer = ():boolean => {
-    if (playerAnswer && playerAnswer.length <= 120) {
-      return true;
-    }
-
-    return false;
-  }
-
-  const validateSecurityAnswer = ():void => {
-    invalidSecurityAnswer = !checkSecurityAnswer();
-    checkIsValid();
-  }
-
-  const checkCity = ():boolean => {
-    if (playerCity.value && playerCity.value.length <= 50) {
-      return true;
-    }
-
-    return false;
-  }
-
-  const validateCity = ():void => {
-    invalidCity = !checkCity();
-    checkIsValid();
-  }
-
-  const checkPostalCode = ():boolean => {
-    if (playerPostalCode.value && playerPostalCode.value.length <= 20) {
-      return true;
-    }
-
-    return false;
-  }
-
-  const validatePostalCode = ():void => {
-    invalidPostalCode = !checkPostalCode();
-    checkIsValid();
-  }
-
-  const checkAddress = ():boolean => {
-    if(playerAddress.value && playerAddress.value.length <= 100) {
-      return true;
-    }
-
-    return false;
-  }
-
-  const validateAddress = ():void => {
-    invalidAddress = !checkAddress();
-    checkIsValid();
-  }
-
-  const updatePlayerInfo = (e):void => {
-    e.preventDefault();
-    if (differencesExist == true && isValid == true) {
-      window.postMessage({ type: 'UpdatePlayerInfo', provisionalArray }, window.location.href);
-      window.postMessage({ type: 'UpdatePlayerConsent', consentArray }, window.location.href);
-    }
-  }
-
-  const toggleScreen = ():void => {
-    window.postMessage({type: 'PlayerAccountMenuActive', isMobile}, window.location.href);
-  }
-
-  const checkForChanges = ():void => {
-    provisionalArray = {
-      acceptNewsEmail: giveConsentEmail,
-      acceptSMSOffers: giveConsentSMS,
-      address: playerAddress.value,
-      city: playerCity.value,
-      mobileNumber: playerMobileNumber,
-      mobilePrefix: playerPrefix,
-      postalCode: playerPostalCode.value,
-      securityAnswer: playerAnswer,
-      securityQuestion: playerQuestion,
-    }
-
-    checkEquality(provisionalArray, initialValuesArray);
-    consentData();
-    checkIsValid();
-  }
-
-  const consentData = ():void => {
-    consentArray = { items: [] };
-    if (showSMS) {
-      consentArray.items.push({'tagCode': 'sms', 'status': giveConsentSMS ? 'Accepted' : 'Denied'})
-    }
-
-    if (showEmail) {
-      consentArray.items.push({'tagCode': 'emailmarketing', 'status': giveConsentEmail ? 'Accepted' : 'Denied'})
-    }
-  }
-
-  const resetPlayerInfo = ():void => {
-    playerAddress.value = initialValuesArray.address;
-    playerCity.value = initialValuesArray.city;
-    giveConsentEmail = initialValuesArray.acceptNewsEmail;
-    giveConsentSMS = initialValuesArray.acceptSMSOffers;
-    playerPrefix = initialValuesArray.mobilePrefix;
-    playerMobileNumber = initialValuesArray.mobileNumber;
-    playerPostalCode.value = initialValuesArray.postalCode;
-    playerAnswer = initialValuesArray.securityAnswer;
-    playerQuestion = initialValuesArray.securityQuestion;
-
-    toggleScreen();
-  }
-
-  const checkEquality = (a, b):void => {
-    if(JSON.stringify(a) === JSON.stringify(b)) {
-      differencesExist = false;
-    } else {
-      differencesExist = true;
-    }
-  }
-
-  const setActiveLanguage = ():void => {
-    setLocale(lang);
-  }
-
-  onMount(() => {
-    window.addEventListener('message', messageHandler, false);
-
-    isOnNative = !!isNative(userAgent);
-
-    if (isOnNative) {
-      registerNativeEventListener(
-        'BIOMETRICS_ENABLED',
-        (biometricsEnabled) => {
-          biometricsSelection = !!biometricsEnabled
-        },
-      );
-
-      callNative('BIOMETRICS_ENABLED');
-    }
-
-    return () => {
-      window.removeEventListener('message', messageHandler);
-    }
-  });
-
-  $: lang && setActiveLanguage();
-  $: endpoint && countrycode && getCountriesList();
-  $: endpoint && getPhoneCodes();
-</script>
-
-{#if isLoading}
-  <div class="ModalLoader" part="ModalLoader"></div>
-{:else}
-<form class="PlayerInfoWrapper {isMobile ? 'PlayerInfoWrapperMobile' : ''} {mediaQuery.matches && isMobile ? 'PlayerInfoWrapperTablet' : ''}" part="PlayerInfoWrapper {isMobile ? 'PlayerInfoWrapperMobile' : ''} {mediaQuery.matches && isMobile ? 'PlayerInfoWrapperTablet' : ''}">
-
-  {#if isMobile}
-    <div class="MenuReturnButton" part="MenuReturnButton" on:click={() => toggleScreen()}>
-      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><defs><style>.aaa{fill:var(--emfe-w-color-primary, #D0046C);}</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>
-      <h2 class="MyAccountCategoryTitleMobile" part="MyAccountCategoryTitleMobile">{$_('playerProfile.title')}</h2>
-    </div>
-  {/if}
-
-  <h2 class="MyAccountCategoryTitle {isMobile ? 'MyAccountCategoryTitleNone' : ''}" part="MyAccountCategoryTitle {isMobile ? 'MyAccountCategoryTitleNone' : ''}">{$_('playerProfile.title')}</h2>
-
-  <div class="PlayerNotificationsHeader" part="PlayerNotificationsHeader">
-    <h3>{$_('playerProfile.personalDetails')}</h3>
-  </div>
-  <section class="PlayerDetailsContent" part="PlayerDetailsContent">
-    <div class="PlayerInfoBox" part="PlayerInfoBox">
-      <label>{$_('playerProfile.userName')}</label>
-      <input type="text" class="FieldDisabled" part="FieldDisabled" value={username} readonly />
-    </div>
-    <div class="PlayerInfoBox {invalidMobile ? 'InvalidField' : ''}" part="PlayerInfoBox {invalidMobile ? 'InvalidField' : ''}">
-      <label>{$_('playerProfile.userPhone')}</label>
-      <div class="PlayerPhoneNumber" part="PlayerPhoneNumber">
-        <select bind:value={playerPrefix} on:change={() => checkForChanges()}>
-          {#each prefixesArray as pref}
-            {#if pref.Prefix === initialValuesArray.mobiePrefix}
-              <option selected>{pref.Prefix}</option>
-            {:else}
-              <option>{pref.Prefix}</option>
-            {/if}
-          {/each}
-        </select>
-      <input bind:value={playerMobileNumber} on:keyup={validateMobile} type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" placeholder={noPlayerData ? mobile.number : ''} on:keyup={() => checkForChanges()}/>
-      </div>
-      {#if invalidMobile}
-        <p class="InvalidInput" part="InvalidInput">{$_('playerProfile.userPhoneError')}</p>
-      {/if}
-    </div>
-    <div class="PlayerInfoBox  {invalidSecurityQuestion ? 'InvalidField' : ''}" part="PlayerInfoBox  {invalidSecurityQuestion ? 'InvalidField' : ''}">
-      <label>{$_('playerProfile.securityQuestion')}</label>
-      <input type="text" bind:value={playerQuestion} on:keyup={() => checkForChanges()} on:blur={validateSecurityQuestion} placeholder={noPlayerData ? securityQuestion : ''} />
-      {#if invalidSecurityQuestion}
-        <p class="InvalidInput" part="InvalidInput">{$_('playerProfile.securityQuestionError')}</p>
-      {/if}
-    </div>
-    <div class="PlayerInfoBox {invalidSecurityAnswer ? 'InvalidField' : ''}" part="PlayerInfoBox {invalidSecurityAnswer ? 'InvalidField' : ''}">
-      <label>{$_('playerProfile.securityAnswer')}</label>
-      <input type="text" bind:value={playerAnswer} on:keyup={() => checkForChanges()} on:blur={validateSecurityAnswer} placeholder={noPlayerData ? securityAnswer : ''} />
-      {#if invalidSecurityAnswer}
-        <p class="InvalidInput" part="InvalidInput">{$_('playerProfile.securityAnswerError')}</p>
-      {/if}
-    </div>
-    <div class="PlayerInfoBox" part="PlayerInfoBox">
-      <label>{$_('playerProfile.userEmail')}</label>
-      <input type="email" class="FieldDisabled" part="FieldDisabled" value={email} readonly />
-    </div>
-    <div class="PlayerInfoBox" part="PlayerInfoBox">
-      <label>{$_('playerProfile.dateOfBirth')}</label>
-      <input type="text" class="FieldDisabled" part="FieldDisabled" value={birth} readonly />
-    </div>
-    <div class="PlayerInfoBox" part="PlayerInfoBox">
-      <label>{$_('playerProfile.firstName')}</label>
-      <input type="text" class="FieldDisabled" part="FieldDisabled" value={firstname} readonly />
-    </div>
-    <div class="PlayerInfoBox" part="PlayerInfoBox">
-      <label>{$_('playerProfile.lastName')}</label>
-      <input type="text" class="FieldDisabled" part="FieldDisabled" value={lastname} readonly />
-    </div>
-    <div class="PlayerInfoBox" part="PlayerInfoBox">
-      <label>{$_('playerProfile.userTitle')}</label>
-      <input type="text" class="FieldDisabled" part="FieldDisabled" value={userTitles} readonly />
-    </div>
-    <div class="PlayerInfoBox" part="PlayerInfoBox">
-      <label>{$_('playerProfile.currency')}</label>
-      <input type="text" class="FieldDisabled" part="FieldDisabled" value={currency} readonly />
-    </div>
-  </section>
-
-  <div class="PlayerLocationHeader" part="PlayerLocationHeader">
-    <h3>{$_('playerProfile.locationDetails')}</h3>
-  </div>
-  <section class="PlayerLocationContent" part="PlayerLocationContent">
-    <div class="PlayerInfoBox" part="PlayerInfoBox">
-      <label>{$_('playerProfile.userCountry')}</label>
-      <input type="text" class="PlayerCountry FieldDisabled" part="PlayerCountry FieldDisabled" placeholder={countrycode} value={selectedCountry.Name} readonly />
-    </div>
-    <div class="PlayerInfoBox {invalidCity ? 'InvalidField' : ''}" part="PlayerInfoBox {invalidCity ? 'InvalidField' : ''}">
-      <label>{$_('playerProfile.userCity')}</label>
-      <input bind:this={playerCity} type="text" on:blur={validateCity} on:keyup={() => checkForChanges()} placeholder={noPlayerData ? city : ''} value={noPlayerData ? '' : initialValuesArray.city} />
-      {#if invalidCity}
-        <p class="InvalidInput" part="InvalidInput">{$_('playerProfile.userCityError')}</p>
-      {/if}
-    </div>
-    <div class="PlayerInfoBox {invalidAddress ? 'InvalidField' : ''}" part="PlayerInfoBox {invalidAddress ? 'InvalidField' : ''}">
-      <label>{$_('playerProfile.userAddress')}</label>
-    <input bind:this={playerAddress} placeholder={address1} type="text" on:blur={validateAddress} on:keyup={() => checkForChanges()} value={noPlayerData ? '' : initialValuesArray.address} />
-      {#if invalidAddress}
-        <p class="InvalidInput" part="InvalidInput">{$_('playerProfile.userAddressError')}</p>
-      {/if}
-    </div>
-    <div class="PlayerInfoBox {invalidPostalCode ? 'InvalidField' : ''}" part="PlayerInfoBox {invalidPostalCode ? 'InvalidField' : ''}">
-      <label>{$_('playerProfile.userPostalCode')}</label>
-      <input bind:this={playerPostalCode} type="text" on:blur={validatePostalCode} on:keyup={() => checkForChanges()} placeholder={noPlayerData ? postalCode : ''} value={noPlayerData ? '' : initialValuesArray.postalCode} />
-      {#if invalidPostalCode}
-        <p class="InvalidInput" part="InvalidInput">{$_('playerProfile.userPostalCodeError')}</p>
-      {/if}
-    </div>
-  </section>
-
-  {#if showEmail || showSMS}
-    <div class="PlayerNotificationsHeader" part="PlayerNotificationsHeader">
-      <h3>{$_('playerProfile.userNotifications')}</h3>
-    </div>
-    <section class="PlayerNotificationsCheckboxArea" part="PlayerNotificationsCheckboxArea">
-      {#if showSMS}
-        <div class="PlayerNotificationBox" part="PlayerNotificationBox">
-          <label for="SMSNotification">
-            <input bind:checked={giveConsentSMS}  on:change={checkForChanges} type="checkbox" id="SMSNotification" name="Enable SMS notifications" />
-            <span class="Checkmark" part="Checkmark"></span>
-            <span>{$_('playerProfile.userSMSNotification')}</span>
-          </label>
-        </div>
-      {/if}
-      {#if showEmail}
-        <div class="PlayerNotificationBox" part="PlayerNotificationBox">
-          <label for="EmailNotification">
-            <input bind:checked={giveConsentEmail} on:change={checkForChanges} type="checkbox" id="EmailNotification" name="Enable Emails" />
-            <span class="Checkmark" part="Checkmark"></span>
-            <span>{$_('playerProfile.userEmailNotification')}</span>
-          </label>
-        </div>
-      {/if}
-    </section>
-  {/if}
-  {#if isOnNative}
-    <div class="PlayerNotificationsHeader" part="PlayerNotificationsHeader">
-      <h3>{$_('playerProfile.userAppSettings')}</h3>
-    </div>
-    <section class="PlayerNotificationsCheckboxArea" part="PlayerNotificationsCheckboxArea">
-      <div class="PlayerNotificationBox" part="PlayerNotificationBox">
-        <label for="Biometrics">
-          <input bind:checked={biometricsSelection} on:change={checkForChanges} type="checkbox" id="BiometricsEnabled" name="Biometric Enabled" />
-          <span class="Checkmark" part="Checkmark"></span>
-          <span>{$_('playerProfile.userBiometrics')}</span>
-        </label>
-      </div>
-    </section>
-  {/if}
-  <section class="PlayerDetailsButtonsArea {isMobile ? 'PlayerDetailsButtonsAreaMobile' : ''}" part="PlayerDetailsButtonsArea {isMobile ? 'PlayerDetailsButtonsAreaMobile' : ''}">
-    <button class="PlayerDetailsSaveButton {differencesExist  && isValid ? '' : 'PlayerButtonDisabled'}" part="PlayerDetailsSaveButton {differencesExist  && isValid ? '' : 'PlayerButtonDisabled'}" on:click={(e) => updatePlayerInfo(e)}>{$_('playerProfile.userProfileSaveChanges')}</button>
-  </section>
-  {#if showConfirmSave}
-    <section class="PlayerDetailsConfirmSave" part="PlayerDetailsConfirmSave">
-      <p class="PlayerDetailsConfirmSaveText" part="PlayerDetailsConfirmSaveText">{$_('playerProfile.userProfileConfirmationMessage')}</p>
-    </section>
-  {/if}
-</form>
-{/if}
-
-<style lang="scss">
-
-  :host {
-    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
-  }
-
-  .MyAccountCategoryTitle {
-    font-size: 26px;
-    color: var(--emfe-w-color-primary, #D0046C);
-    font-weight: 400;
-  }
-
-  .MyAccountCategoryTitleMobile {
-    font-size: 16px;
-    color: var(--emfe-w-color-primary, #D0046C);
-  }
-
-  .MyAccountCategoryTitleNone {
-    display: none;
-  }
-
-  .PlayerInfoWrapper {
-    color: var(--emfe-w-color-contrast, #07072A);
-    background: var(--emfe-w-color-gray-50, #F9F8F8);
-    padding: 50px;
-    max-width: 760px;
-  }
-
-  .PlayerNotificationsHeader, .PlayerDetailsHeader, .PlayerLocationHeader {
-    h3 {
-      font-size: 16px;
-      color: var(--emfe-w-color-primary, #D0046C);
-      text-transform: capitalize;
-      font-weight: 400;
-    }
-  }
-
-  .PlayerDetailsContent {
-    display: grid;
-    grid-column-gap: 50px;
-    grid-row-gap: 24px;
-    grid-template-rows: auto;
-    grid-template-columns: 1fr 1fr;
-    padding-bottom: 30px;
-  }
-
-  .MenuReturnButton{
-    color: var(--emfe-w-color-gray-300, #58586B);
-    display: inline-flex;
-    align-items: center;
-    column-gap: 10px;
-    margin-bottom: 10px;
-  }
-
-  .PlayerInfoBox {
-    display: flex;
-    flex-direction: column;
-    label {
-      font-size: 14px;
-      font-weight: 300;
-      margin-bottom: 10px;
-    }
-    input {
-      font-size: 14px;
-      font-weight: 300;
-      color: var(--emfe-w-color-contrast, #07072A);
-      padding: 10px;
-      line-height: 16px;
-      background: var(--emfe-w-color-white, #FFFFFF);
-      border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
-      border-radius: 5px;
-      outline: none;
-      transition-duration: 0.3s;
-      &:focus, :focus-within, :focus-visible, :visited {
-        border: 1px solid var(--emfe-w-color-primary, #D0046C);
-        box-shadow: 0 0 0 1pt var(--emfe-w-color-primary, #D0046C);
-      }
-    }
-
-    &.InvalidField {
-      input {
-        border: 1px solid var(--emfe-w-color-error, #FD2839);
-        background: var(--emfe-w-color-primary-50, #FBECF4);
-        color: var(--emfe-w-color-error, #FD2839);
-      }
-    }
-
-    .InvalidInput {
-      color: var(--emfe-w-color-error, #FD2839);
-      font-size: 10px;
-      line-height: 10px;
-    }
-
-
-    .FieldDisabled {
-      opacity: 0.5;
-    }
-    .PlayerPhoneNumber {
-      display: grid;
-      grid-template-columns: 2fr 4fr;
-      column-gap: 10px;
-      position: relative;
-    }
-    select {
-      font-size: 14px;
-      font-weight: 300;
-      padding: 10px;
-      color: var(--emfe-w-color-contrast, #07072A);
-      border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
-      border-radius: 5px;
-      outline: none;
-      transition-duration: 0.3s;
-      -webkit-appearance: none;
-      -moz-appearance: none;
-      appearance: none;
-      background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat var(--emfe-w-color-white, #FFFFFF);
-      background-position: calc(100% - 0.75rem) center;
-      &:focus, :focus-within, :focus-visible, :visited {
-        border: 1px solid var(--emfe-w-color-primary, #D0046C);
-        box-shadow: 0 0 0 1pt var(--emfe-w-color-primary, #D0046C);
-      }
-    }
-    /* Chrome, Safari, Edge, Opera */
-    input::-webkit-outer-spin-button,
-    input::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-
-    /* Firefox */
-    input[type=number] {
-      -moz-appearance: textfield;
-    }
-  }
-
-  .PlayerLocationContent {
-    display: grid;
-    grid-column-gap: 50px;
-    grid-row-gap: 24px;
-    grid-template-rows: auto;
-    grid-template-columns: 1fr 1fr;
-    padding-bottom: 30px;
-  }
-
-  .PlayerNotificationBox {
-    &:first-child {
-      margin-bottom: 10px;
-    }
-    label {
-      display: inline-flex;
-      position: relative;
-      align-items: center;
-      span {
-        font-size: 14px;
-        font-weight: 300;
-      }
-      input {
-        height: 20px;
-        width: 20px;
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        -o-appearance: none;
-        appearance: none;
-        border-radius: 50px;
-        outline: none;
-        transition-duration: 0.3s;
-        background-color: var(--emfe-w-color-gray-100, #E6E6E6);
-        cursor: pointer;
-        margin-right: 10px;
-      }
-      input:checked {
-        background-color: var(--emfe-w-color-primary, #D0046C);
-      }
-      .Checkmark {
-        left: 10px;
-        top: 7px;
-        width: 4px;
-        height: 8px;
-        border: solid white;
-        border-width: 0 2px 2px 0;
-        -webkit-transform: rotate(45deg);
-        -ms-transform: rotate(45deg);
-        transform: rotate(45deg);
-        position: absolute;
-      }
-    }
-  }
-
-  .PlayerDetailsButtonsArea {
-    grid-column-gap: 10px;
-    grid-template-rows: auto;
-    grid-template-columns: 1fr;
-    margin-top: 20px;
-    width: 50%;
-
-    .PlayerDetailsSaveButton, .PlayerDetailsCancelButton {
-      cursor: pointer;
-      border-radius: 5px;
-      width: 100%;
-      height: 50px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 16px;
-      color: var(--emfe-w-color-contrast, #07072A);
-      text-transform: uppercase;
-      transition-duration: 0.3s;
-      box-sizing: border-box;
-    }
-    .PlayerDetailsSaveButton {
-      background: var(--emfe-w-color-primary, #D0046C);
-      border: 1px solid var(--emfe-w-color-primary, #D0046C);
-      color: var(--emfe-w-color-white, #FFFFFF);
-      &:active {
-        background: var(--emfe-w-color-primary-600, #99034F);
-      }
-      &.PlayerButtonDisabled {
-        opacity: 0.3;
-        cursor: not-allowed;
-      }
-    }
-
-    .PlayerDetailsCancelButton {
-      background: transparent;
-      border: 1px solid var(--emfe-w-color-gray-300, #58586B);
-      &:active {
-        background: var(--emfe-w-color-primary-600, #99034F);
-      }
-      &.PlayerButtonDisabled {
-        background: transparent;
-        border: 1px solid var(--emfe-w-color-gray-300, #58586B);
-        cursor: not-allowed;
-        opacity: 0.6;
-      }
-    }
-    &.PlayerDetailsButtonsAreaMobile {
-      width: 100%;
-      grid-template-columns: 1fr 1fr;
-      .PlayerDetailsSaveButton, .PlayerDetailsCancelButton {
-        height: 40px;
-        font-size: 12px;
-      }
-    }
-  }
-
-  .PlayerNotificationsCheckboxArea {
-    padding-bottom: 30px;
-  }
-
-  .PlayerInfoWrapperMobile {
-    padding: 20px 15px;
-    background: var(--emfe-w-color-gray-50, #F9F8F8);
-    max-width: unset;
-    .PlayerDetailsContent {
-      grid-template-columns: 1fr;
-    }
-    .PlayerNotificationsHeader, .PlayerDetailsHeader, .PlayerLocationHeader {
-      h3 {
-        color: var(--emfe-w-color-primary, #D0046C);
-        font-size: 14px;
-        font-weight: 400;
-      }
-    }
-    .PlayerInfoBox {
-      label {
-        color: var(--emfe-w-color-gray-300, #58586B);
-        font-size: 12px;
-        font-weight: 400;
-      }
-      input {
-        color: var(--emfe-w-color-gray-300, #58586B);
-        font-size: 12px;
-        font-weight: 300;
-      }
-      select {
-        color: var(--emfe-w-color-gray-300, #58586B);
-      }
-    }
-    .PlayerLocationContent {
-      grid-template-columns: 1fr;
-    }
-    .PlayerNotificationsCheckboxArea {
-      .PlayerNotificationBox {
-        label {
-            color: var(--emfe-w-color-contrast, #07072A);
-            font-size: 12px;
-            font-weight: 300;
-        }
-      }
-    }
-    .PlayerDetailsButtonsArea {
-      grid-column-gap: 10px;
-    }
-    .PlayerDetailsSaveButton, .PlayerDetailsCancelButton {
-      font-size: 12px;
-      height: 40px;
-      color: var(--emfe-w-color-white, #FFFFFF);
-      &.PlayerButtonDisabled {
-        color: var(--emfe-w-color-gray-300, #58586B);
-      }
-    }
-    .PlayerDetailsCancelButton {
-      color: var(--emfe-w-color-gray-300, #58586B);
-    }
-  }
-
-  .PlayerInfoWrapperTablet {
-    padding: 40px 25% 40px 25%;
-    .PlayerDetailsContent {
-      grid-row-gap: 20px;
-    }
-    .MenuReturnButton {
-      margin-bottom: 30px;
-      span {
-        font-size: 20px;
-      }
-    }
-    .PlayerDetailsHeader, .PlayerLocationHeader, .PlayerNotificationsHeader {
-      h3 {
-        font-size: 24px;
-      }
-    }
-    .PlayerInfoBox {
-      label {
-        font-size: 20px;
-      }
-      input {
-        height: 30px;
-        font-size: 20px;
-        line-height: 30px;
-      }
-      select {
-        font-size: 20px;
-      }
-      .TogglePasswordVisibility {
-        width: 30px;
-        top: 26px;
-      }
-      .InvalidInput {
-        font-size: 16px;
-        bottom: - 50px;
-      }
-      &:last-child {
-        .InvalidInput {
-          font-size: 16px;
-          bottom: -50px;
-        }
-      }
-    }
-    .PlayerDetailsButtonsArea {
-      grid-column-gap: 40px;
-      .PlayerDetailsSaveButton, .PlayerDetailsCancelButton {
-        font-size: 20px;
-        height: 56px;
-      }
-      .PlayerDetailsSaveButton {
-        color: var(--emfe-w-color-white, #FFFFFF);
-        &.PlayerButtonDisabled {
-          color: var(--emfe-w-color-gray-300, #58586B);
-        }
-      }
-    }
-    .PlayerNotificationBox {
-      label {
-        span {
-          font-size: 20px;
-        }
-        input {
-          height: 26px;
-          width: 26px;
-        }
-        .Checkmark {
-          left: 50px;
-          top: 9px;
-        }
-      }
-    }
-  }
-  .PlayerDetailsConfirmSave {
-    background: var(--emfe-w-color-green, #48952a);
-    color: var(--emfe-w-color-white, #FFFFFF);
-    padding: 16px;
-    border-radius: 5px;
-    margin-top: 16px;
-    .PlayerDetailsConfirmSaveText {
-      padding: 0;
-      margin: 0;
-    }
-  }
-</style>
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { getDevice } from 'rvhelper';
+  import { _, addNewMessages, setLocale } from './i18n';
+  import { PlayerProfileTranslations } from './translations';
+
+  // Native bridge
+  import { isNative, call as callNative, registerEventListener as registerNativeEventListener } from 'js-native-bridge';
+
+
+  export let endpoint:string = '';
+  export let lang:string = 'en';
+  export let countrycode:string = 'IR';
+
+  let isLoading:boolean = true;
+  let userAgent:string = window.navigator.userAgent;
+  let isMobile:boolean = (getDevice(userAgent) === 'PC') ? false : true;
+  let noPlayerData:boolean = true;
+
+  let playerPostalCode:HTMLElement, playerAddress:HTMLElement, playerCity:HTMLElement;
+  let giveConsentSMS:boolean = false;
+  let giveConsentEmail:boolean = false;
+  let biometricsSelection:boolean = false;
+  let playerQuestion:string = '';
+  let playerAnswer:string = '';
+  let playerPrefix:string = '';
+  let playerMobileNumber:string = '';
+  let differencesExist:boolean = false;
+  let selectedCountry:Object = { Name: 'I.e Ireland'};
+  let prefixesArray:Array<Object> = [];
+  let countriesArray:Array<Object> = []
+
+  let profileConsent:Array<Object> = [];
+  let showEmail:boolean = false;
+  let showSMS:boolean = false;
+  let consentArray:any = { items: [] };
+
+  let isValid:boolean = false;
+
+  let invalidCity:string = '';
+  let invalidPostalCode:string = '';
+  let invalidAddress:string = '';
+  let invalidSecurityQuestion:boolean = false;
+  let invalidSecurityAnswer:boolean = false;
+  let invalidMobile:boolean;
+
+  let showConfirmSave:boolean = false;
+
+  // Native bridge
+  let isOnNative:boolean = false;
+
+  Object.keys(PlayerProfileTranslations).forEach((item:any) => {
+    addNewMessages(item, PlayerProfileTranslations[item]);
+  });
+
+  const mediaQuery = window.matchMedia('(min-width: 768px)');
+
+  // needed to keep track of data changes
+  let provisionalArray:any = {
+    address1: '',
+    address2: '',
+    city: '',
+    acceptNewsEmail: false,
+    acceptSMSOffers : false,
+    country: '',
+    mobile: {prefix: '', number: ''},
+    postalCode: '',
+    securityAnswer: '',
+    securityQuestion: '',
+  }
+
+  // needed to keep track of data changes
+  let initialValuesArray:any = {
+    acceptNewsEmail: false,
+    acceptSMSOffers : false,
+    address: '',
+    city: '',
+    mobileNumber: '',
+    mobilePrefix: '',
+    postalCode: '',
+    securityAnswer: '',
+    securityQuestion: ''
+  }
+
+  // placeholder field values
+  let profileDetails:any = {
+    address1: "i.e.: Glanmire Rd.",
+    birth: '01/01/1990',
+    city: "i.e.: Cork",
+    country: "i.e.: Ireland",
+    currency: "EUR",
+    email: "email@here.com",
+    firstname: "Joe",
+    userTitles: "M",
+    lastname: "Johnson",
+    mobile: {prefix: "+00", number: "00000000"},
+    postalCode: "i.e.: 465531",
+    securityAnswer: "i.e.: Jerry",
+    securityQuestion: "i.e.: Pet name?",
+    title: "",
+    username: "Username"
+  };
+
+  let {address1, birth, city, country, currency, mobile, email, firstname, userTitles, language, lastname, postalCode, securityAnswer, securityQuestion, username, consents} = profileDetails;
+
+  const messageHandler = (e:any):void => {
+    if (e.data) {
+      switch(e.data.type) {
+        case 'ProfileDetailsData':
+          noPlayerData = false;
+          profileDetails = e.data.profileDetails;
+
+          // readonly field values
+          username = profileDetails.username;
+          mobile = profileDetails.mobile;
+          email = profileDetails.email;
+          firstname = profileDetails.firstname;
+          lastname = profileDetails.lastname;
+          language = profileDetails.language;
+          birth = profileDetails.birth?.day + '/' + profileDetails.birth?.month + '/' + profileDetails.birth?.year;
+          currency = profileDetails.currency;
+          userTitles = profileDetails.title;
+
+          // editable field values used for bindings
+          playerQuestion = profileDetails.securityQuestion;
+          playerAnswer = profileDetails.securityAnswer;
+          playerPrefix = profileDetails.mobile?.prefix;
+          playerMobileNumber = profileDetails.mobile?.number;
+
+          // set values for the initial editable values object
+          initialValuesArray = {
+            address: profileDetails.address1,
+            city: profileDetails.city,
+            mobilePrefix: mobile?.prefix,
+            mobileNumber: mobile?.number,
+            postalCode: profileDetails.postalCode,
+            securityAnswer: profileDetails.securityAnswer,
+            securityQuestion: profileDetails.securityQuestion,
+          }
+        break;
+
+        case 'ProfileConsentData':
+          profileConsent = e.data.consent.items;
+          if (Array.isArray(profileConsent)) {
+            profileConsent.forEach((item) => {
+              if (item.tagCode == 'emailmarketing') {
+                showEmail = true;
+                giveConsentEmail = item.status == 'Accepted';
+                initialValuesArray.acceptNewsEmail = giveConsentEmail;
+              } else if (item.tagCode == 'sms') {
+                showSMS = true;
+                giveConsentSMS = item.status == 'Accepted';
+                initialValuesArray.acceptSMSOffers = giveConsentSMS;
+              }
+            });
+          }
+        break;
+
+        case 'ConfirmProfileInfoSave':
+          if (isOnNative) {
+            registerNativeEventListener(
+              'BIOMETRICS_ENABLED',
+              (biometricsEnabled) => {
+                if (biometricsEnabled !== biometricsSelection) {
+                  biometricsSelection = biometricsEnabled;
+                }
+              },
+            );
+
+            const methodFound = callNative(
+              biometricsSelection ? 'ENABLE_BIOMETRICS' : 'DISABLE_BIOMETRICS',
+            );
+
+            if (!methodFound) {
+              // Nothing to do here yet
+            }
+          }
+
+          differencesExist = false;
+
+          showConfirmMessage();
+          break;
+      }
+    }
+  }
+
+  const getCountriesList = ():void => {
+    fetch(`${endpoint}/player/countries`)
+      .then((res:any) => {
+        if (res.status >= 300) {
+          return new Error('Error while fetching the countries');
+        }
+
+        return res.json();
+      })
+      .then((countryList:any) => {
+        fetch(`${endpoint}/player/operatorSupportedCountries`).then((res:any) => {
+          if (res.status >= 300) {
+            return new Error('Error while fetching the supported countries');
+          }
+
+          return res.json();
+        })
+        .then((supportedCountries:any) => {
+          countriesArray = countryList.countries.filter((item:any) => {
+            return supportedCountries.countries.indexOf(item.Alpha2Code) >= 0;
+          });
+
+          selectedCountry = countriesArray.find((country:any) => country.Alpha2Code === countrycode) || { Name: 'I.E. Ireland'};
+          isLoading = false;
+        });
+      });
+  }
+
+  const getPhoneCodes = ():void => {
+    fetch(`${endpoint}/player/phonecodes`)
+      .then((res:any) => res.json())
+      .then(data => {
+        prefixesArray = data.phoneCodes;
+      });
+  }
+
+  const showConfirmMessage = ():void => {
+    showConfirmSave = true;
+    setTimeout(() => {showConfirmSave = false;}, 3000);
+  }
+
+
+  const checkIsValid = ():void => {
+    if (invalidSecurityQuestion || invalidSecurityAnswer ||  invalidCity ||  invalidAddress ||  invalidPostalCode ||  invalidMobile) {
+      isValid = false;
+    }
+    else {
+      isValid = true;
+    }
+  }
+
+  const checkMobile = ():boolean => {
+    if(playerMobileNumber && playerMobileNumber.length >= 5 && playerMobileNumber.length <= 30) {
+      return true;
+    }
+
+    return false;
+  }
+
+  const validateMobile = ():void => {
+    invalidMobile = !checkMobile();
+    checkIsValid();
+  }
+
+  const checkSecurityQuestion = ():boolean => {
+    if (playerQuestion && playerQuestion.length <= 120) {
+      return true;
+    }
+
+    return false;
+  }
+
+  const validateSecurityQuestion = ():void => {
+    invalidSecurityQuestion = !checkSecurityQuestion();
+    checkIsValid();
+  }
+
+  const checkSecurityAnswer = ():boolean => {
+    if (playerAnswer && playerAnswer.length <= 120) {
+      return true;
+    }
+
+    return false;
+  }
+
+  const validateSecurityAnswer = ():void => {
+    invalidSecurityAnswer = !checkSecurityAnswer();
+    checkIsValid();
+  }
+
+  const checkCity = ():boolean => {
+    if (playerCity.value && playerCity.value.length <= 50) {
+      return true;
+    }
+
+    return false;
+  }
+
+  const validateCity = ():void => {
+    invalidCity = !checkCity();
+    checkIsValid();
+  }
+
+  const checkPostalCode = ():boolean => {
+    if (playerPostalCode.value && playerPostalCode.value.length <= 20) {
+      return true;
+    }
+
+    return false;
+  }
+
+  const validatePostalCode = ():void => {
+    invalidPostalCode = !checkPostalCode();
+    checkIsValid();
+  }
+
+  const checkAddress = ():boolean => {
+    if(playerAddress.value && playerAddress.value.length <= 100) {
+      return true;
+    }
+
+    return false;
+  }
+
+  const validateAddress = ():void => {
+    invalidAddress = !checkAddress();
+    checkIsValid();
+  }
+
+  const updatePlayerInfo = (e):void => {
+    e.preventDefault();
+    if (differencesExist == true && isValid == true) {
+      window.postMessage({ type: 'UpdatePlayerInfo', provisionalArray }, window.location.href);
+      window.postMessage({ type: 'UpdatePlayerConsent', consentArray }, window.location.href);
+    }
+  }
+
+  const toggleScreen = ():void => {
+    window.postMessage({type: 'PlayerAccountMenuActive', isMobile}, window.location.href);
+  }
+
+  const checkForChanges = ():void => {
+    provisionalArray = {
+      acceptNewsEmail: giveConsentEmail,
+      acceptSMSOffers: giveConsentSMS,
+      address: playerAddress.value,
+      city: playerCity.value,
+      mobileNumber: playerMobileNumber,
+      mobilePrefix: playerPrefix,
+      postalCode: playerPostalCode.value,
+      securityAnswer: playerAnswer,
+      securityQuestion: playerQuestion,
+    }
+
+    checkEquality(provisionalArray, initialValuesArray);
+    consentData();
+    checkIsValid();
+  }
+
+  const consentData = ():void => {
+    consentArray = { items: [] };
+    if (showSMS) {
+      consentArray.items.push({'tagCode': 'sms', 'status': giveConsentSMS ? 'Accepted' : 'Denied'})
+    }
+
+    if (showEmail) {
+      consentArray.items.push({'tagCode': 'emailmarketing', 'status': giveConsentEmail ? 'Accepted' : 'Denied'})
+    }
+  }
+
+  const resetPlayerInfo = ():void => {
+    playerAddress.value = initialValuesArray.address;
+    playerCity.value = initialValuesArray.city;
+    giveConsentEmail = initialValuesArray.acceptNewsEmail;
+    giveConsentSMS = initialValuesArray.acceptSMSOffers;
+    playerPrefix = initialValuesArray.mobilePrefix;
+    playerMobileNumber = initialValuesArray.mobileNumber;
+    playerPostalCode.value = initialValuesArray.postalCode;
+    playerAnswer = initialValuesArray.securityAnswer;
+    playerQuestion = initialValuesArray.securityQuestion;
+
+    toggleScreen();
+  }
+
+  const checkEquality = (a, b):void => {
+    if(JSON.stringify(a) === JSON.stringify(b)) {
+      differencesExist = false;
+    } else {
+      differencesExist = true;
+    }
+  }
+
+  const setActiveLanguage = ():void => {
+    setLocale(lang);
+  }
+
+  onMount(() => {
+    window.addEventListener('message', messageHandler, false);
+
+    isOnNative = !!isNative(userAgent);
+
+    if (isOnNative) {
+      registerNativeEventListener(
+        'BIOMETRICS_ENABLED',
+        (biometricsEnabled) => {
+          biometricsSelection = !!biometricsEnabled
+        },
+      );
+
+      callNative('BIOMETRICS_ENABLED');
+    }
+
+    return () => {
+      window.removeEventListener('message', messageHandler);
+    }
+  });
+
+  $: lang && setActiveLanguage();
+  $: endpoint && countrycode && getCountriesList();
+  $: endpoint && getPhoneCodes();
+</script>
+
+{#if isLoading}
+  <div class="ModalLoader" part="ModalLoader"></div>
+{:else}
+<form class="PlayerInfoWrapper {isMobile ? 'PlayerInfoWrapperMobile' : ''} {mediaQuery.matches && isMobile ? 'PlayerInfoWrapperTablet' : ''}" part="PlayerInfoWrapper {isMobile ? 'PlayerInfoWrapperMobile' : ''} {mediaQuery.matches && isMobile ? 'PlayerInfoWrapperTablet' : ''}">
+
+  {#if isMobile}
+    <div class="MenuReturnButton" part="MenuReturnButton" on:click={() => toggleScreen()}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><defs><style>.aaa{fill:var(--emfe-w-color-primary, #D0046C);}</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>
+      <h2 class="MyAccountCategoryTitleMobile" part="MyAccountCategoryTitleMobile">{$_('playerProfile.title')}</h2>
+    </div>
+  {/if}
+
+  <h2 class="MyAccountCategoryTitle {isMobile ? 'MyAccountCategoryTitleNone' : ''}" part="MyAccountCategoryTitle {isMobile ? 'MyAccountCategoryTitleNone' : ''}">{$_('playerProfile.title')}</h2>
+
+  <div class="PlayerNotificationsHeader" part="PlayerNotificationsHeader">
+    <h3>{$_('playerProfile.personalDetails')}</h3>
+  </div>
+  <section class="PlayerDetailsContent" part="PlayerDetailsContent">
+    <div class="PlayerInfoBox" part="PlayerInfoBox">
+      <label>{$_('playerProfile.userName')}</label>
+      <input type="text" class="FieldDisabled" part="FieldDisabled" value={username} readonly />
+    </div>
+    <div class="PlayerInfoBox {invalidMobile ? 'InvalidField' : ''}" part="PlayerInfoBox {invalidMobile ? 'InvalidField' : ''}">
+      <label>{$_('playerProfile.userPhone')}</label>
+      <div class="PlayerPhoneNumber" part="PlayerPhoneNumber">
+        <select bind:value={playerPrefix} on:change={() => checkForChanges()}>
+          {#each prefixesArray as pref}
+            {#if pref.Prefix === initialValuesArray.mobiePrefix}
+              <option selected>{pref.Prefix}</option>
+            {:else}
+              <option>{pref.Prefix}</option>
+            {/if}
+          {/each}
+        </select>
+      <input bind:value={playerMobileNumber} on:keyup={validateMobile} type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" placeholder={noPlayerData ? mobile.number : ''} on:keyup={() => checkForChanges()}/>
+      </div>
+      {#if invalidMobile}
+        <p class="InvalidInput" part="InvalidInput">{$_('playerProfile.userPhoneError')}</p>
+      {/if}
+    </div>
+    <div class="PlayerInfoBox  {invalidSecurityQuestion ? 'InvalidField' : ''}" part="PlayerInfoBox  {invalidSecurityQuestion ? 'InvalidField' : ''}">
+      <label>{$_('playerProfile.securityQuestion')}</label>
+      <input type="text" bind:value={playerQuestion} on:keyup={() => checkForChanges()} on:blur={validateSecurityQuestion} placeholder={noPlayerData ? securityQuestion : ''} />
+      {#if invalidSecurityQuestion}
+        <p class="InvalidInput" part="InvalidInput">{$_('playerProfile.securityQuestionError')}</p>
+      {/if}
+    </div>
+    <div class="PlayerInfoBox {invalidSecurityAnswer ? 'InvalidField' : ''}" part="PlayerInfoBox {invalidSecurityAnswer ? 'InvalidField' : ''}">
+      <label>{$_('playerProfile.securityAnswer')}</label>
+      <input type="text" bind:value={playerAnswer} on:keyup={() => checkForChanges()} on:blur={validateSecurityAnswer} placeholder={noPlayerData ? securityAnswer : ''} />
+      {#if invalidSecurityAnswer}
+        <p class="InvalidInput" part="InvalidInput">{$_('playerProfile.securityAnswerError')}</p>
+      {/if}
+    </div>
+    <div class="PlayerInfoBox" part="PlayerInfoBox">
+      <label>{$_('playerProfile.userEmail')}</label>
+      <input type="email" class="FieldDisabled" part="FieldDisabled" value={email} readonly />
+    </div>
+    <div class="PlayerInfoBox" part="PlayerInfoBox">
+      <label>{$_('playerProfile.dateOfBirth')}</label>
+      <input type="text" class="FieldDisabled" part="FieldDisabled" value={birth} readonly />
+    </div>
+    <div class="PlayerInfoBox" part="PlayerInfoBox">
+      <label>{$_('playerProfile.firstName')}</label>
+      <input type="text" class="FieldDisabled" part="FieldDisabled" value={firstname} readonly />
+    </div>
+    <div class="PlayerInfoBox" part="PlayerInfoBox">
+      <label>{$_('playerProfile.lastName')}</label>
+      <input type="text" class="FieldDisabled" part="FieldDisabled" value={lastname} readonly />
+    </div>
+    <div class="PlayerInfoBox" part="PlayerInfoBox">
+      <label>{$_('playerProfile.userTitle')}</label>
+      <input type="text" class="FieldDisabled" part="FieldDisabled" value={userTitles} readonly />
+    </div>
+    <div class="PlayerInfoBox" part="PlayerInfoBox">
+      <label>{$_('playerProfile.currency')}</label>
+      <input type="text" class="FieldDisabled" part="FieldDisabled" value={currency} readonly />
+    </div>
+  </section>
+
+  <div class="PlayerLocationHeader" part="PlayerLocationHeader">
+    <h3>{$_('playerProfile.locationDetails')}</h3>
+  </div>
+  <section class="PlayerLocationContent" part="PlayerLocationContent">
+    <div class="PlayerInfoBox" part="PlayerInfoBox">
+      <label>{$_('playerProfile.userCountry')}</label>
+      <input type="text" class="PlayerCountry FieldDisabled" part="PlayerCountry FieldDisabled" placeholder={countrycode} value={selectedCountry.Name} readonly />
+    </div>
+    <div class="PlayerInfoBox {invalidCity ? 'InvalidField' : ''}" part="PlayerInfoBox {invalidCity ? 'InvalidField' : ''}">
+      <label>{$_('playerProfile.userCity')}</label>
+      <input bind:this={playerCity} type="text" on:blur={validateCity} on:keyup={() => checkForChanges()} placeholder={noPlayerData ? city : ''} value={noPlayerData ? '' : initialValuesArray.city} />
+      {#if invalidCity}
+        <p class="InvalidInput" part="InvalidInput">{$_('playerProfile.userCityError')}</p>
+      {/if}
+    </div>
+    <div class="PlayerInfoBox {invalidAddress ? 'InvalidField' : ''}" part="PlayerInfoBox {invalidAddress ? 'InvalidField' : ''}">
+      <label>{$_('playerProfile.userAddress')}</label>
+    <input bind:this={playerAddress} placeholder={address1} type="text" on:blur={validateAddress} on:keyup={() => checkForChanges()} value={noPlayerData ? '' : initialValuesArray.address} />
+      {#if invalidAddress}
+        <p class="InvalidInput" part="InvalidInput">{$_('playerProfile.userAddressError')}</p>
+      {/if}
+    </div>
+    <div class="PlayerInfoBox {invalidPostalCode ? 'InvalidField' : ''}" part="PlayerInfoBox {invalidPostalCode ? 'InvalidField' : ''}">
+      <label>{$_('playerProfile.userPostalCode')}</label>
+      <input bind:this={playerPostalCode} type="text" on:blur={validatePostalCode} on:keyup={() => checkForChanges()} placeholder={noPlayerData ? postalCode : ''} value={noPlayerData ? '' : initialValuesArray.postalCode} />
+      {#if invalidPostalCode}
+        <p class="InvalidInput" part="InvalidInput">{$_('playerProfile.userPostalCodeError')}</p>
+      {/if}
+    </div>
+  </section>
+
+  {#if showEmail || showSMS}
+    <div class="PlayerNotificationsHeader" part="PlayerNotificationsHeader">
+      <h3>{$_('playerProfile.userNotifications')}</h3>
+    </div>
+    <section class="PlayerNotificationsCheckboxArea" part="PlayerNotificationsCheckboxArea">
+      {#if showSMS}
+        <div class="PlayerNotificationBox" part="PlayerNotificationBox">
+          <label for="SMSNotification">
+            <input bind:checked={giveConsentSMS}  on:change={checkForChanges} type="checkbox" id="SMSNotification" name="Enable SMS notifications" />
+            <span class="Checkmark" part="Checkmark"></span>
+            <span>{$_('playerProfile.userSMSNotification')}</span>
+          </label>
+        </div>
+      {/if}
+      {#if showEmail}
+        <div class="PlayerNotificationBox" part="PlayerNotificationBox">
+          <label for="EmailNotification">
+            <input bind:checked={giveConsentEmail} on:change={checkForChanges} type="checkbox" id="EmailNotification" name="Enable Emails" />
+            <span class="Checkmark" part="Checkmark"></span>
+            <span>{$_('playerProfile.userEmailNotification')}</span>
+          </label>
+        </div>
+      {/if}
+    </section>
+  {/if}
+  {#if isOnNative}
+    <div class="PlayerNotificationsHeader" part="PlayerNotificationsHeader">
+      <h3>{$_('playerProfile.userAppSettings')}</h3>
+    </div>
+    <section class="PlayerNotificationsCheckboxArea" part="PlayerNotificationsCheckboxArea">
+      <div class="PlayerNotificationBox" part="PlayerNotificationBox">
+        <label for="Biometrics">
+          <input bind:checked={biometricsSelection} on:change={checkForChanges} type="checkbox" id="BiometricsEnabled" name="Biometric Enabled" />
+          <span class="Checkmark" part="Checkmark"></span>
+          <span>{$_('playerProfile.userBiometrics')}</span>
+        </label>
+      </div>
+    </section>
+  {/if}
+  <section class="PlayerDetailsButtonsArea {isMobile ? 'PlayerDetailsButtonsAreaMobile' : ''}" part="PlayerDetailsButtonsArea {isMobile ? 'PlayerDetailsButtonsAreaMobile' : ''}">
+    <button class="PlayerDetailsSaveButton {differencesExist  && isValid ? '' : 'PlayerButtonDisabled'}" part="PlayerDetailsSaveButton {differencesExist  && isValid ? '' : 'PlayerButtonDisabled'}" on:click={(e) => updatePlayerInfo(e)}>{$_('playerProfile.userProfileSaveChanges')}</button>
+  </section>
+  {#if showConfirmSave}
+    <section class="PlayerDetailsConfirmSave" part="PlayerDetailsConfirmSave">
+      <p class="PlayerDetailsConfirmSaveText" part="PlayerDetailsConfirmSaveText">{$_('playerProfile.userProfileConfirmationMessage')}</p>
+    </section>
+  {/if}
+</form>
+{/if}
+
+<style lang="scss">
+
+  :host {
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  }
+
+  .MyAccountCategoryTitle {
+    font-size: 26px;
+    color: var(--emfe-w-color-primary, #D0046C);
+    font-weight: 400;
+  }
+
+  .MyAccountCategoryTitleMobile {
+    font-size: 16px;
+    color: var(--emfe-w-color-primary, #D0046C);
+  }
+
+  .MyAccountCategoryTitleNone {
+    display: none;
+  }
+
+  .PlayerInfoWrapper {
+    color: var(--emfe-w-color-contrast, #07072A);
+    background: var(--emfe-w-color-gray-50, #F9F8F8);
+    padding: 50px;
+    max-width: 760px;
+  }
+
+  .PlayerNotificationsHeader, .PlayerDetailsHeader, .PlayerLocationHeader {
+    h3 {
+      font-size: 16px;
+      color: var(--emfe-w-color-primary, #D0046C);
+      text-transform: capitalize;
+      font-weight: 400;
+    }
+  }
+
+  .PlayerDetailsContent {
+    display: grid;
+    grid-column-gap: 50px;
+    grid-row-gap: 24px;
+    grid-template-rows: auto;
+    grid-template-columns: 1fr 1fr;
+    padding-bottom: 30px;
+  }
+
+  .MenuReturnButton{
+    color: var(--emfe-w-color-gray-300, #58586B);
+    display: inline-flex;
+    align-items: center;
+    column-gap: 10px;
+    margin-bottom: 10px;
+  }
+
+  .PlayerInfoBox {
+    display: flex;
+    flex-direction: column;
+    label {
+      font-size: 14px;
+      font-weight: 300;
+      margin-bottom: 10px;
+    }
+    input {
+      font-size: 14px;
+      font-weight: 300;
+      color: var(--emfe-w-color-contrast, #07072A);
+      padding: 10px;
+      line-height: 16px;
+      background: var(--emfe-w-color-white, #FFFFFF);
+      border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
+      border-radius: 5px;
+      outline: none;
+      transition-duration: 0.3s;
+      &:focus, :focus-within, :focus-visible, :visited {
+        border: 1px solid var(--emfe-w-color-primary, #D0046C);
+        box-shadow: 0 0 0 1pt var(--emfe-w-color-primary, #D0046C);
+      }
+    }
+
+    &.InvalidField {
+      input {
+        border: 1px solid var(--emfe-w-color-error, #FD2839);
+        background: var(--emfe-w-color-primary-50, #FBECF4);
+        color: var(--emfe-w-color-error, #FD2839);
+      }
+    }
+
+    .InvalidInput {
+      color: var(--emfe-w-color-error, #FD2839);
+      font-size: 10px;
+      line-height: 10px;
+    }
+
+
+    .FieldDisabled {
+      opacity: 0.5;
+    }
+    .PlayerPhoneNumber {
+      display: grid;
+      grid-template-columns: 2fr 4fr;
+      column-gap: 10px;
+      position: relative;
+    }
+    select {
+      font-size: 14px;
+      font-weight: 300;
+      padding: 10px;
+      color: var(--emfe-w-color-contrast, #07072A);
+      border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
+      border-radius: 5px;
+      outline: none;
+      transition-duration: 0.3s;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat var(--emfe-w-color-white, #FFFFFF);
+      background-position: calc(100% - 0.75rem) center;
+      &:focus, :focus-within, :focus-visible, :visited {
+        border: 1px solid var(--emfe-w-color-primary, #D0046C);
+        box-shadow: 0 0 0 1pt var(--emfe-w-color-primary, #D0046C);
+      }
+    }
+    /* Chrome, Safari, Edge, Opera */
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    /* Firefox */
+    input[type=number] {
+      -moz-appearance: textfield;
+    }
+  }
+
+  .PlayerLocationContent {
+    display: grid;
+    grid-column-gap: 50px;
+    grid-row-gap: 24px;
+    grid-template-rows: auto;
+    grid-template-columns: 1fr 1fr;
+    padding-bottom: 30px;
+  }
+
+  .PlayerNotificationBox {
+    &:first-child {
+      margin-bottom: 10px;
+    }
+    label {
+      display: inline-flex;
+      position: relative;
+      align-items: center;
+      span {
+        font-size: 14px;
+        font-weight: 300;
+      }
+      input {
+        height: 20px;
+        width: 20px;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        -o-appearance: none;
+        appearance: none;
+        border-radius: 50px;
+        outline: none;
+        transition-duration: 0.3s;
+        background-color: var(--emfe-w-color-gray-100, #E6E6E6);
+        cursor: pointer;
+        margin-right: 10px;
+      }
+      input:checked {
+        background-color: var(--emfe-w-color-primary, #D0046C);
+      }
+      .Checkmark {
+        left: 10px;
+        top: 7px;
+        width: 4px;
+        height: 8px;
+        border: solid white;
+        border-width: 0 2px 2px 0;
+        -webkit-transform: rotate(45deg);
+        -ms-transform: rotate(45deg);
+        transform: rotate(45deg);
+        position: absolute;
+      }
+    }
+  }
+
+  .PlayerDetailsButtonsArea {
+    grid-column-gap: 10px;
+    grid-template-rows: auto;
+    grid-template-columns: 1fr;
+    margin-top: 20px;
+    width: 50%;
+
+    .PlayerDetailsSaveButton, .PlayerDetailsCancelButton {
+      cursor: pointer;
+      border-radius: 5px;
+      width: 100%;
+      height: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
+      color: var(--emfe-w-color-contrast, #07072A);
+      text-transform: uppercase;
+      transition-duration: 0.3s;
+      box-sizing: border-box;
+    }
+    .PlayerDetailsSaveButton {
+      background: var(--emfe-w-color-primary, #D0046C);
+      border: 1px solid var(--emfe-w-color-primary, #D0046C);
+      color: var(--emfe-w-color-white, #FFFFFF);
+      &:active {
+        background: var(--emfe-w-color-primary-600, #99034F);
+      }
+      &.PlayerButtonDisabled {
+        opacity: 0.3;
+        cursor: not-allowed;
+      }
+    }
+
+    .PlayerDetailsCancelButton {
+      background: transparent;
+      border: 1px solid var(--emfe-w-color-gray-300, #58586B);
+      &:active {
+        background: var(--emfe-w-color-primary-600, #99034F);
+      }
+      &.PlayerButtonDisabled {
+        background: transparent;
+        border: 1px solid var(--emfe-w-color-gray-300, #58586B);
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+    }
+    &.PlayerDetailsButtonsAreaMobile {
+      width: 100%;
+      grid-template-columns: 1fr 1fr;
+      .PlayerDetailsSaveButton, .PlayerDetailsCancelButton {
+        height: 40px;
+        font-size: 12px;
+      }
+    }
+  }
+
+  .PlayerNotificationsCheckboxArea {
+    padding-bottom: 30px;
+  }
+
+  .PlayerInfoWrapperMobile {
+    padding: 20px 15px;
+    background: var(--emfe-w-color-gray-50, #F9F8F8);
+    max-width: unset;
+    .PlayerDetailsContent {
+      grid-template-columns: 1fr;
+    }
+    .PlayerNotificationsHeader, .PlayerDetailsHeader, .PlayerLocationHeader {
+      h3 {
+        color: var(--emfe-w-color-primary, #D0046C);
+        font-size: 14px;
+        font-weight: 400;
+      }
+    }
+    .PlayerInfoBox {
+      label {
+        color: var(--emfe-w-color-gray-300, #58586B);
+        font-size: 12px;
+        font-weight: 400;
+      }
+      input {
+        color: var(--emfe-w-color-gray-300, #58586B);
+        font-size: 12px;
+        font-weight: 300;
+      }
+      select {
+        color: var(--emfe-w-color-gray-300, #58586B);
+      }
+    }
+    .PlayerLocationContent {
+      grid-template-columns: 1fr;
+    }
+    .PlayerNotificationsCheckboxArea {
+      .PlayerNotificationBox {
+        label {
+            color: var(--emfe-w-color-contrast, #07072A);
+            font-size: 12px;
+            font-weight: 300;
+        }
+      }
+    }
+    .PlayerDetailsButtonsArea {
+      grid-column-gap: 10px;
+    }
+    .PlayerDetailsSaveButton, .PlayerDetailsCancelButton {
+      font-size: 12px;
+      height: 40px;
+      color: var(--emfe-w-color-white, #FFFFFF);
+      &.PlayerButtonDisabled {
+        color: var(--emfe-w-color-gray-300, #58586B);
+      }
+    }
+    .PlayerDetailsCancelButton {
+      color: var(--emfe-w-color-gray-300, #58586B);
+    }
+  }
+
+  .PlayerInfoWrapperTablet {
+    padding: 40px 25% 40px 25%;
+    .PlayerDetailsContent {
+      grid-row-gap: 20px;
+    }
+    .MenuReturnButton {
+      margin-bottom: 30px;
+      span {
+        font-size: 20px;
+      }
+    }
+    .PlayerDetailsHeader, .PlayerLocationHeader, .PlayerNotificationsHeader {
+      h3 {
+        font-size: 24px;
+      }
+    }
+    .PlayerInfoBox {
+      label {
+        font-size: 20px;
+      }
+      input {
+        height: 30px;
+        font-size: 20px;
+        line-height: 30px;
+      }
+      select {
+        font-size: 20px;
+      }
+      .TogglePasswordVisibility {
+        width: 30px;
+        top: 26px;
+      }
+      .InvalidInput {
+        font-size: 16px;
+        bottom: - 50px;
+      }
+      &:last-child {
+        .InvalidInput {
+          font-size: 16px;
+          bottom: -50px;
+        }
+      }
+    }
+    .PlayerDetailsButtonsArea {
+      grid-column-gap: 40px;
+      .PlayerDetailsSaveButton, .PlayerDetailsCancelButton {
+        font-size: 20px;
+        height: 56px;
+      }
+      .PlayerDetailsSaveButton {
+        color: var(--emfe-w-color-white, #FFFFFF);
+        &.PlayerButtonDisabled {
+          color: var(--emfe-w-color-gray-300, #58586B);
+        }
+      }
+    }
+    .PlayerNotificationBox {
+      label {
+        span {
+          font-size: 20px;
+        }
+        input {
+          height: 26px;
+          width: 26px;
+        }
+        .Checkmark {
+          left: 50px;
+          top: 9px;
+        }
+      }
+    }
+  }
+  .PlayerDetailsConfirmSave {
+    background: var(--emfe-w-color-green, #48952a);
+    color: var(--emfe-w-color-white, #FFFFFF);
+    padding: 16px;
+    border-radius: 5px;
+    margin-top: 16px;
+    .PlayerDetailsConfirmSaveText {
+      padding: 0;
+      margin: 0;
+    }
+  }
+</style>