@everymatrix/player-profile-info 1.0.16 → 1.0.70

package/src/PlayerProfileInfo.svelte

@@ -1,980 +0,0 @@
-<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';
-  export let translationUrl:string = '';
-
-  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;
-
-  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(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();
-  $: translationUrl && setTranslationUrl();
-</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>