@everymatrix/player-profile-info 1.44.0 → 1.45.0

package/src/PlayerProfileInfo.svelte

@@ -1,992 +0,0 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { getDevice } from 'rvhelper';
-  import { _, addNewMessages, setLocale } from './i18n';
-  import { TRANSLATIONS } from './translations';
-
-  export let userid:string;
-  export let sessionid:string;
-  export let endpoint:string;
-  export let lang:string = 'en';
-  export let clientstyling:string;
-  export let clientstylingurl:string;
-  export let translationurl:string;
-  export let custominputtextswitch:string = 'false';
-
-  let customStylingContainer:HTMLElement;
-  let isLoading:boolean = true;
-  let noPlayerData:boolean = true;
-  const isMobile:boolean = (getDevice(window.navigator.userAgent) === 'PC') ? false : true;
-
-  let prefixesArray:Array<Record<string, string>> = null;
-  let countriesArray:Array<Record<string, string>> = null;
-  let profileInfo:Record<string, any> = null;
-  let profileConsent:Array<Record<string, string>> = null;
-
-  let initialConsentValues:string;
-  let initialEditableValues:string;
-  const updatedEditableValues:Record<string, any> = {};
-  const readOnlyValues:Record<string, string> = {};
-  const defaultValues:any = {
-    address1: "i.e.: Glanmire Rd.",
-    birth: '01/01/1990',
-    city: "i.e.: Cork",
-    currency: "EUR",
-    iban: "",
-    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 hasProfileInfoChanged:boolean = false;
-  let hasProfileConsentChanged:boolean = false;
-  let isValid:boolean = true;
-  let isCityValid:boolean = true;
-  let isPostalCodeValid:boolean = true;
-  let isAddressValid:boolean = true;
-  let isSecurityQuestionValid:boolean = true;
-  let isSecurityAnswerValid:boolean = true;
-  let isMobileValid:boolean = true;
-  let showConfirmSave:boolean = false;
-
-  const regexValidators:any = {
-    document: /^(?=.*[a-zA-Z0-9])[a-zA-Z0-9\s]+$/
-  }
-
-  const mediaQuery = window.matchMedia('(min-width: 768px)');
-
-  const safeStringify = (obj:Record<string, any>):string => {
-    try { return JSON.stringify(obj); } catch { return null; }
-  }
-
-  const initPlayerInfoFields = ():void => {
-    readOnlyValues.username =    profileInfo.username;
-    readOnlyValues.mobile =      profileInfo.mobile;
-    readOnlyValues.email =       profileInfo.email;
-    readOnlyValues.firstname =   profileInfo.firstname;
-    readOnlyValues.lastname =    profileInfo.lastname;
-    readOnlyValues.language =    profileInfo.language;
-    readOnlyValues.birth =       profileInfo.birth?.day + '/' + profileInfo.birth?.month + '/' + profileInfo.birth?.year;
-    readOnlyValues.currency =    profileInfo.currency;
-    readOnlyValues.iban =        profileInfo.iban;
-    readOnlyValues.userTitles =  profileInfo.title;
-    readOnlyValues.countryCode = profileInfo.country;
-    readOnlyValues.countryName = countriesArray.find((country:any) => country.Alpha2Code === profileInfo.country)?.Name || 'I.E. Ireland';
-
-    updatedEditableValues.address1 =         profileInfo.address1;
-    updatedEditableValues.city =             profileInfo.city;
-    updatedEditableValues.mobile =           {};
-    updatedEditableValues.mobile.prefix =    profileInfo.mobile?.prefix;
-    updatedEditableValues.mobile.number =    profileInfo.mobile?.number;
-    updatedEditableValues.postalCode =       profileInfo.postalCode;
-    updatedEditableValues.securityAnswer =   profileInfo.securityAnswer;
-    updatedEditableValues.securityQuestion = profileInfo.securityQuestion;
-
-    if (Array.isArray(profileConsent)) {
-      profileConsent.forEach((item) => {
-        if (item.tagCode === 'emailmarketing') {
-          updatedEditableValues.acceptNewsEmail = item.status === 'Accepted';
-        } else if (item.tagCode === 'sms') {
-          updatedEditableValues.acceptSMSOffers = item.status === 'Accepted';
-        }
-      });
-    }
-
-    initialEditableValues = safeStringify(updatedEditableValues);
-    initialConsentValues = safeStringify(new Object({
-        acceptNewsEmail: updatedEditableValues.acceptNewsEmail,
-        acceptSMSOffers: updatedEditableValues.acceptSMSOffers
-      }));
-    
-    noPlayerData = false;
-    isLoading = false;
-  }
-
-  const getUserProfileInfo = ():void => {
-    const url:URL = new URL(`${endpoint}/v1/player/${userid}/profile`);
-    const headers:HeadersInit = new Headers();
-
-    headers.append('X-SessionID', sessionid);
-
-    const options:RequestInit = {
-      method: "GET",
-      headers: headers
-    };
-
-    fetch(url.href, options)
-      .then((res:any) => { return res.json(); })
-      .then((data:any) => {
-        profileInfo = data;
-      }, (err:any) => {
-        console.error(err);
-      });
-  }
-
-  const getUserProfileConsent = ():void => {
-    const url:URL = new URL(`${endpoint}/v1/player/${userid}/consent`);
-    const headers:HeadersInit = new Headers();
-
-    headers.append('X-SessionID', sessionid);
-
-    const options = {
-      method: "GET",
-      headers: headers
-    };
-
-    fetch(url.href, options)
-      .then((res:any) => { return res.json(); })
-      .then((data:any) => {
-        profileConsent = data.items;
-      }, (err:any) => {
-        console.error(err);
-      });
-  }
-
-  const getCountriesList = ():void => {
-    fetch(`${endpoint}/v1/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}/v1/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;
-          });
-        });
-      });
-  }
-  
-  const getPhoneCodes = ():void => {
-    fetch(`${endpoint}/v1/player/phonecodes`)
-      .then((res:any) => res.json())
-      .then(data => {
-        prefixesArray = data.phoneCodes;
-      });
-  }
-
-  const validateAllFields = ():void => {
-    isValid = false;
-    if (isSecurityQuestionValid && isSecurityAnswerValid && isCityValid && isAddressValid && isPostalCodeValid && isMobileValid) {
-      isValid = true;
-    }
-  }
-
-  const checkForChanges = ():void => {
-    hasProfileInfoChanged = safeStringify(updatedEditableValues) !== initialConsentValues;
-  }
-
-  const checkForConsentChanges = ():void => {
-    const c = new Object({
-      acceptNewsEmail: updatedEditableValues.acceptNewsEmail,
-      acceptSMSOffers: updatedEditableValues.acceptSMSOffers
-    });
-    hasProfileConsentChanged = safeStringify(c) !== initialConsentValues;
-  }
-
-  const validateAndCheckForChanges = (key:string):void => {
-    switch (key) {
-      case 'mobileNumber':
-        isMobileValid = false;
-        if(updatedEditableValues.mobile.number && updatedEditableValues.mobile.number.length >= 5 && updatedEditableValues.mobile.number.length <= 12) {
-          isMobileValid = true;
-        }
-        break;
-
-      case 'city':
-        isCityValid = false;
-        if (updatedEditableValues.city && updatedEditableValues.city.length <= 50) {
-          isCityValid = true;
-        }
-        break;
-
-      case 'postalCode':
-        isPostalCodeValid = false;
-        if (updatedEditableValues.postalCode && updatedEditableValues.postalCode.length <= 20) {
-          isPostalCodeValid = true;
-        }
-        break;
-
-      case 'address':
-        isAddressValid = false;
-        if(updatedEditableValues.address1 && updatedEditableValues.address1.length <= 100) {
-          isAddressValid = true;
-        }
-        break;
-
-      case 'securityQuestion':
-        isSecurityQuestionValid = false;
-        if (updatedEditableValues.securityQuestion) 
-          switch(custominputtextswitch) {
-            case 'true':
-              if (regexValidators.document.test(updatedEditableValues.securityQuestion) && updatedEditableValues.securityQuestion.length <= 50) {
-                isSecurityQuestionValid = true;
-              }
-              break;
-
-            case 'false':
-              if (updatedEditableValues.securityQuestion && updatedEditableValues.securityQuestion.length <= 120) {
-                isSecurityQuestionValid = true;
-              }
-              break;
-          }
-        break;
-
-      case 'securityAnswer':
-        isSecurityAnswerValid = false;
-        if (updatedEditableValues.securityAnswer)
-          switch(custominputtextswitch) {
-            case 'true':
-              if (regexValidators.document.test(updatedEditableValues.securityAnswer) && updatedEditableValues.securityAnswer.length <= 50) {
-                isSecurityAnswerValid = true;
-              }
-              break;
-
-            case 'false':
-              if (updatedEditableValues.securityAnswer && updatedEditableValues.securityAnswer.length <= 120) {
-                isSecurityAnswerValid = true;
-              }
-              break;
-          }
-        break;
-
-      case 'acceptSMSOffers':
-        checkForConsentChanges();
-        break;
-
-      case 'acceptNewsEmail':
-        checkForConsentChanges();
-        break;
-
-    }
-    checkForChanges();
-    validateAllFields();
-  }
-  
-  const showSuccessMessage = ():void => {
-    showConfirmSave = true;
-    setTimeout(() => {showConfirmSave = false;}, 3000);
-    window.postMessage({ type: 'WidgetNotification', data: {type: 'success', message: $_('profileUpdateSuccess')}}, window.location.href);
-  }
-
-  const showErrorMessage = ():void => {
-    window.postMessage({ type: 'WidgetNotification', data: {type: 'error', message: $_('userProfileUpdateError')}}, window.location.href);
-  }
-
-  const updatePlayerInfoAndConsent = (e:any):void => {
-    e.preventDefault();
-
-    if (hasProfileInfoChanged && !hasProfileConsentChanged && isValid) {
-      updateProfileInfo().then((success:boolean) => {
-        if (success) {
-          getUserProfileInfo();
-          showSuccessMessage();
-        }
-      }); 
-      return;
-    }
-    if (hasProfileInfoChanged && hasProfileConsentChanged && isValid) {
-      updateProfileInfo();
-      updateProfileConsent();
-
-      Promise.all([updateProfileInfo(), updateProfileConsent()]).then((success:Array<boolean>) => {
-        if (success[0] && success[1]) {
-          getUserProfileInfo();
-          getUserProfileConsent();
-          showSuccessMessage();
-          hasProfileInfoChanged = false;
-          hasProfileConsentChanged = false;
-        } else {
-          showErrorMessage();
-        }
-      });
-      return;  
-    }
-  }
-
-  const updateProfileInfo = async ():Promise<boolean> => {
-
-    const url:URL = new URL(`${endpoint}/v1/player/${userid}/profile`);
-    const headers:HeadersInit = new Headers();
-
-    headers.append('X-SessionID', sessionid);
-    headers.append('Content-Type', 'application/json');
-    headers.append('Accept', 'application/json');
-
-    const body = safeStringify(updatedEditableValues);
-    if (body === null) {
-      return false;
-    }
-    
-    let options:RequestInit = {
-      method: "POST",
-      headers: headers,
-      body: body
-    };
-
-    return await fetch(url.href, options).then((res:any) => res.status == 200, (err) => {console.error(err); return false});
-  }
-
-  const updateProfileConsent = async ():Promise<boolean> => {
-    const updatedProfileConsent = [
-      {tagCode: 'sms', status: (updatedEditableValues.acceptSMSOffers ? 'Accepted' : 'Denied')}, 
-      {tagCode: 'emailmarketing', status: (updatedEditableValues.acceptNewsEmail ? 'Accepted' : 'Denied')}
-    ];
-
-    const url:URL = new URL(`${endpoint}/v1/player/${userid}/consent`);
-    const headers:HeadersInit = new Headers();
-
-    headers.append('X-SessionID', sessionid);
-    headers.append('Content-Type', 'application/json');
-    headers.append('Accept', 'application/json');
-
-    const body = safeStringify({items: updatedProfileConsent});
-    if (body === null) {
-      return false;
-    }
-
-    const options:RequestInit = {
-      method: "POST",
-      headers: headers,
-      body: body
-    };
-
-    return await fetch(url.href, options).then((res:any) => res.status == 200, (err) => {console.error(err); return false});
-  }
-
-  const toggleScreen = ():void => {
-    window.postMessage({type: 'PlayerAccountMenuActive', isMobile}, window.location.href);
-  }
-
-  const setActiveLanguage = ():void => {
-    setLocale(lang);
-  }
-
-  const setClientStyling = ():void => {
-    let sheet:HTMLElement = document.createElement('style');
-    sheet.innerHTML = clientstyling;
-    customStylingContainer.appendChild(sheet);
-  }
-
-  const setClientStylingURL = ():void => {
-    let url:URL = new URL(clientstylingurl);
-    let cssFile:HTMLElement = document.createElement('style');
-
-    fetch(url.href)
-      .then((res:any) => res.text())
-      .then((data:any) => {
-        cssFile.innerHTML = data
-
-        setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
-      });
-  }
-
-  const setTranslationUrl = ():void => {
-    const url:string = translationurl;
-
-    fetch(url).then((res:any) => res.json())
-    .then((res) => {
-      Object.keys(res).forEach((item:any):void => {
-        addNewMessages(item, res[item]);
-      });
-    }).catch((err:any) => {
-      console.log(err);
-    });
-  }
-
-  Object.keys(TRANSLATIONS).forEach((item:any) => {
-    addNewMessages(item, TRANSLATIONS[item]);
-  });
-
-  $: endpoint && userid && sessionid && getUserProfileInfo();
-  $: endpoint && userid && sessionid && getUserProfileConsent();
-  $: endpoint && getCountriesList();
-  $: endpoint && getPhoneCodes();
-  $: profileInfo && profileConsent && countriesArray && initPlayerInfoFields();
-  $: lang && setActiveLanguage();
-  $: clientstylingurl && customStylingContainer && setClientStylingURL();
-  $: clientstyling && customStylingContainer && setClientStyling();
-  $: translationurl && setTranslationUrl();
-</script>
-
-<div bind:this={customStylingContainer}>
-  {#if isLoading}
-    <div class="ModalLoader"></div>
-  {:else}
-  <form class="PlayerInfoWrapper {isMobile ? 'PlayerInfoWrapperMobile' : ''} {mediaQuery.matches && isMobile ? 'PlayerInfoWrapperTablet' : ''}">
-
-    {#if isMobile}
-      <div class="MenuReturnButton" on:click={toggleScreen} on:keyup={null}>
-        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><defs><style>.aaa{fill:var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));}</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">{$_('titleProfileInfo')}</h2>
-      </div>
-    {/if}
-
-    <h2 class="MyAccountCategoryTitle {isMobile ? 'MyAccountCategoryTitleNone' : ''}">{$_('titleProfileInfo')}</h2>
-
-    <div class="PlayerNotificationsHeader">
-      <h3>{$_('personalDetails')}</h3>
-    </div>
-    <section class="PlayerDetailsContent">
-      <div class="PlayerInfoBox">
-        <p>{$_('userName')}</p>
-        <input type="text" class="FieldDisabled" value={readOnlyValues.username} readonly />
-      </div>
-      <div class="PlayerInfoBox {isMobileValid ? '' : 'InvalidField'}">
-        <p>{$_('userPhone')}</p>
-        <div class="PlayerPhoneNumber">
-          <select bind:value={updatedEditableValues.mobile.prefix} on:change={checkForChanges}>
-            {#each prefixesArray as pref}
-              {#if pref.Prefix === updatedEditableValues.mobile.prefix}
-                <option selected>{pref.Prefix}</option>
-              {:else}
-                <option>{pref.Prefix}</option>
-              {/if}
-            {/each}
-          </select>
-        <input type="text" bind:value={updatedEditableValues.mobile.number} on:keyup={() => validateAndCheckForChanges('mobileNumber')} on:input={updatedEditableValues.mobile.number = updatedEditableValues.mobile.number.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1')} placeholder={defaultValues.mobile.number}/>
-        </div>
-        {#if !isMobileValid}
-          <p class="InvalidInput">{$_('userPhoneError')}</p>
-        {/if}
-      </div>
-      <div class="PlayerInfoBox  {isSecurityQuestionValid ? '' : 'InvalidField'}">
-        <label for="SecurityQuestion">{custominputtextswitch == 'true' ? $_('profileSecurityQuestion2') : $_('profileSecurityQuestion')}:<span class="FormRequired">*</span></label>
-        <input id="SecurityQuestion" type="text" bind:value={updatedEditableValues.securityQuestion} on:keyup={() => validateAndCheckForChanges('securityQuestion')} placeholder={defaultValues.securityQuestion} />
-        {#if !isSecurityQuestionValid}
-          <p class="InvalidInput">{custominputtextswitch == 'true' ? $_('profileSecurityQuestionError2') : $_('profileSecurityQuestionError')}</p>
-        {/if}
-      </div>
-      <div class="PlayerInfoBox {isSecurityAnswerValid ? '' : 'InvalidField'}">
-        <label for="SecurityAnswer">{custominputtextswitch == 'true' ? $_('profileSecurityAnswer2') : $_('profileSecurityAnswer')}:<span class="FormRequired">*</span></label>
-        <input id="SecurityAnswer" type="text" bind:value={updatedEditableValues.securityAnswer} on:keyup={() => validateAndCheckForChanges('securityAnswer')} placeholder={defaultValues.securityAnswer} />
-        {#if !isSecurityAnswerValid}
-          <p class="InvalidInput">{custominputtextswitch == 'true' ? $_('profileSecurityAnswerError2') : $_('profileSecurityAnswerError')}</p>
-        {/if}
-      </div>
-      <div class="PlayerInfoBox">
-        <label for="UserEmail">{$_('userEmail')}</label>
-        <input id="UserEmail" type="email" class="FieldDisabled" value={readOnlyValues.email} readonly />
-      </div>
-      <div class="PlayerInfoBox">
-        <label for="DateOfBirth">{$_('dateOfBirth')}</label>
-        <input id="DateOfBirth" type="text" class="FieldDisabled" value={readOnlyValues.birth} readonly />
-      </div>
-      <div class="PlayerInfoBox">
-        <label for="FirstName">{$_('firstName')}</label>
-        <input id="FirstName" type="text" class="FieldDisabled" value={readOnlyValues.firstname} readonly />
-      </div>
-      <div class="PlayerInfoBox">
-        <label for="LastName">{$_('lastName')}</label>
-        <input id="LastName" type="text" class="FieldDisabled" value={readOnlyValues.lastname} readonly />
-      </div>
-      <div class="PlayerInfoBox">
-        <label for="UserTitle">{$_('userTitle')}</label>
-        <input id="UserTitle" type="text" class="FieldDisabled" value={readOnlyValues.userTitles} readonly />
-      </div>
-      <div class="PlayerInfoBox">
-        <label for="Currrency">{$_('currency')}</label>
-        <input id="Currency" type="text" class="FieldDisabled" value={readOnlyValues.currency} readonly />
-      </div>
-      {#if readOnlyValues.iban}
-        <div class="PlayerInfoBox">
-          <label for="Iban">{$_('iban')}</label>
-          <input id="Iban" type="text" class="FieldDisabled" value={readOnlyValues.iban} readonly />
-        </div>
-      {/if}
-    </section>
-
-    <div class="PlayerLocationHeader">
-      <h3>{$_('locationDetails')}</h3>
-    </div>
-    <section class="PlayerLocationContent">
-      <div class="PlayerInfoBox">
-        <label for="UserCountry">{$_('userCountry')}</label>
-        <input id="UserCountry" type="text" class="PlayerCountry FieldDisabled"  value={readOnlyValues.countryName} placeholder={readOnlyValues.countryCode} readonly />
-      </div>
-      <div class="PlayerInfoBox {isCityValid ? '' : 'InvalidField'}">
-        <label for="UserCity">{$_('userCity')}</label>
-        <input id="UserCity" type="text" bind:value={updatedEditableValues.city}  on:keyup={() => validateAndCheckForChanges('city')} placeholder={defaultValues.city}/>
-        {#if !isCityValid}
-          <p class="InvalidInput">{$_('userCityError')}</p>
-        {/if}
-      </div>
-      <div class="PlayerInfoBox {isAddressValid ? '' : 'InvalidField'}">
-        <label for="UserAdress">{$_('userAddress')}</label>
-        <input id="UserAdress" type="text" bind:value={updatedEditableValues.address1}  on:keyup={() => validateAndCheckForChanges('address')} placeholder={defaultValues.adress}/>
-          {#if !isAddressValid}
-            <p class="InvalidInput">{$_('userAddressError')}</p>
-          {/if}
-      </div>
-      <div class="PlayerInfoBox {isPostalCodeValid ? '' : 'InvalidField'}">
-        <label for="UserPostalCode">{$_('userPostalCode')}</label>
-        <input id="UserPostalCode" type="text" bind:value={updatedEditableValues.postalCode}  on:keyup={() => validateAndCheckForChanges('postalCode')} placeholder={defaultValues.postalCode}/>
-        {#if !isPostalCodeValid}
-          <p class="InvalidInput">{$_('userPostalCodeError')}</p>
-        {/if}
-      </div>
-    </section>
-
-    {#if updatedEditableValues.acceptSMSOffers !== undefined || updatedEditableValues.acceptNewsEmail !== undefined}
-      <div class="PlayerNotificationsHeader">
-        <h3>{$_('userNotifications')}</h3>
-      </div>
-      <section class="PlayerNotificationsCheckboxArea">
-        {#if updatedEditableValues.acceptSMSOffers !== undefined}
-          <div class="PlayerNotificationBox">
-            <label for="SMSNotification">
-              <input bind:checked={updatedEditableValues.acceptSMSOffers}  on:change={() => validateAndCheckForChanges('acceptSMSOffers')} type="checkbox" id="SMSNotification" name="Enable SMS notifications" />
-              <span class="Checkmark"></span>
-              <span>{$_('userSMSNotification')}</span>
-            </label>
-          </div>
-        {/if}
-        {#if updatedEditableValues.acceptNewsEmail !== undefined}
-          <div class="PlayerNotificationBox">
-            <label for="EmailNotification">
-              <input bind:checked={updatedEditableValues.acceptNewsEmail} on:change={() => validateAndCheckForChanges('acceptNewsEmail')} type="checkbox" id="EmailNotification" name="Enable Emails" />
-              <span class="Checkmark"></span>
-              <span>{$_('userEmailNotification')}</span>
-            </label>
-          </div>
-        {/if}
-      </section>
-    {/if}
-    <section class="PlayerDetailsButtonsArea {isMobile ? 'PlayerDetailsButtonsAreaMobile' : ''}" >
-      <button class="PlayerDetailsSaveButton {hasProfileInfoChanged && isValid ? '' : 'PlayerButtonDisabled'}" on:click={updatePlayerInfoAndConsent}>{$_('userProfileSaveChanges')}</button>
-    </section>
-    {#if showConfirmSave}
-      <section class="PlayerDetailsConfirmSave">
-        <p class="PlayerDetailsConfirmSaveText">{$_('userProfileConfirmationMessage')}</p>
-      </section>
-    {/if}
-  </form>
-  {/if}
-</div>
-
-<style lang="scss">
-
-  button {
-    font-family: var(--emw--button-typography);
-  }
-
-  input, select, option {
-    font-family: inherit;
-  }
-
-
-  .MyAccountCategoryTitle {
-    font-size: var(--emw--font-size-x-large, 26px);
-    color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
-    font-weight: var(--emw--font-weight-semibold, 500);
-  }
-
-  .MyAccountCategoryTitleMobile {
-    font-size: var(--emw--size-standard, 16px);
-    color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
-  }
-
-  .MyAccountCategoryTitleNone {
-    display: none;
-  }
-
-  .PlayerInfoWrapper {
-    color: var(--emw--pam-typography, var(--emw-color-contrast, #07072A));
-    background: var(--emw-color-pale, var(--emw--color-gray-50, #F1F1F1));
-    padding: 50px;
-    height: 100%;
-    border-radius: 20px;
-  }
-
-  .PlayerNotificationsHeader, .PlayerDetailsHeader, .PlayerLocationHeader {
-    h3 {
-      font-size: var(--emw--size-standard, 16px);
-      color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
-      text-transform: capitalize;
-      font-weight: var(--emw--font-weight-semibold, 500);
-    }
-  }
-
-  .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(--emw-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: var(--emw--size-small, 14px);
-      font-weight: var(--emw--font-weight-semibold, 500);
-      margin-bottom: 10px;
-    }
-    input {
-      font-size: var(--emw--size-small, 14px);
-      font-weight: var(--emw--font-weight-light, 300);
-      color: var(--emw--pam-contrast, var(--emw-color-contrast, #07072A));
-      padding: 10px;
-      line-height: 16px;
-      background: var(--emw-color-white, #FFFFFF);
-      outline: none;
-      transition-duration: 0.3s;
-      border: 1px solid var(--emw--color-gray-100, #353535);
-      border-radius: 10px;
-
-      &:focus, :focus-within, :focus-visible, :visited {
-        border: 1px solid var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
-        box-shadow: 0 0 0 1pt var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
-      }
-    }
-
-    &.InvalidField {
-      input {
-        border: 1px solid var(--emw-color-error, var(--emw-color-red, #FD2839));
-        background: var(--emw-color-pale, #FBECF4);
-        color: var(--emw-color-error, var(--emw-color-red, #FD2839));
-      }
-    }
-
-    .InvalidInput {
-      color: var(--emw-color-error, var(--emw-color-red, #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: var(--emw--size-small, 14px);
-      font-weight: var(--emw--font-weight-light, 300);
-      padding: 10px;
-      color: var(--emw--pam-contrast, var(--emw-color-contrast, #07072A));
-      border: 1px solid var(--emw--color-gray-100, #353535);
-      border-radius: 10px;
-      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(--emw-color-white, #FFFFFF);
-      background-position: calc(100% - 0.75rem) center;
-      &:focus, :focus-within, :focus-visible, :visited {
-        border: 1px solid var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
-        box-shadow: 0 0 0 1pt var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
-      }
-    }
-    /* 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;
-      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: var(--emw--size-small, 14px);
-        font-weight: var(--emw--font-weight-light, 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(--emw-color-gray-100, #E6E6E6);
-        cursor: pointer;
-        margin-right: 10px;
-      }
-      input:checked {
-        background-color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
-      }
-      .Checkmark {
-        left: 10px;
-        top: 7px;
-        width: 4px;
-        height: 8px;
-        border: solid var(--emw-color-white, #FFFFFF);
-        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;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: var(--emw--size-standard, 16px);
-      color: var(--emw--pam-contrast, var(--emw-color-contrast, #07072A));
-      text-transform: uppercase;
-      transition-duration: 0.3s;
-      box-sizing: border-box;
-      max-width: 400px;
-      min-width: 200px;
-    }
-    .PlayerDetailsSaveButton {
-      background-image: linear-gradient(to bottom, color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, black 20%), var(--emw--color-primary, #22B04E), color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, white 30%));
-      border: 2px solid var(--emw--button-border-color, #0E5924);
-      color: var(--emw--button-text-color, #FFFFFF);
-      border-radius: var(--emw--button-border-radius, 50px);
-      max-width: 400px;
-      min-width: 200px;
-      padding: 13px 0;
-      width: 100%;
-
-      &:active {
-        background: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
-      }
-      &.PlayerButtonDisabled {
-        opacity: 0.3;
-        cursor: not-allowed;
-      }
-    }
-
-    .PlayerDetailsCancelButton {
-      background: transparent;
-      border: 1px solid var(--emw-color-gray-300, #58586B);
-      &:active {
-        background: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
-      }
-      &.PlayerButtonDisabled {
-        background: transparent;
-        border: 1px solid var(--emw-color-gray-300, #58586B);
-        cursor: not-allowed;
-        opacity: 0.6;
-      }
-    }
-    &.PlayerDetailsButtonsAreaMobile {
-      width: 100%;
-      grid-template-columns: 1fr 1fr;
-      .PlayerDetailsSaveButton, .PlayerDetailsCancelButton {
-        height: 40px;
-        font-size: var(--emw--size-x-small, 12px);
-      }
-    }
-  }
-
-  .PlayerNotificationsCheckboxArea {
-    padding-bottom: 30px;
-  }
-
-  .PlayerInfoWrapperMobile {
-    padding: 20px 15px;
-    background: var(--emw-color-gray-50, #F9F8F8);
-    max-width: unset;
-    border-radius: 0;
-    .PlayerDetailsContent {
-      grid-template-columns: 1fr;
-    }
-    .PlayerNotificationsHeader, .PlayerDetailsHeader, .PlayerLocationHeader {
-      h3 {
-        color: ar(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
-        font-size: var(--emw--size-small, 14px);
-        font-weight: var(--emw--font-weight-semibold, 500);
-      }
-    }
-    .PlayerInfoBox {
-      label {
-        color: var(--emw-color-gray-300, #58586B);
-        font-size: var(--emw--size-x-small, 12px);
-        font-weight: var(-emw--font-weight-normal, 400);
-      }
-      input {
-        color: var(--emw-color-gray-300, #58586B);
-        font-size: var(--emw--size-x-small, 12px);
-        font-weight: var(--emw--font-weight-light, 300);
-      }
-      select {
-        color: var(--emw-color-gray-300, #58586B);
-      }
-    }
-    .PlayerLocationContent {
-      grid-template-columns: 1fr;
-    }
-    .PlayerNotificationsCheckboxArea {
-      .PlayerNotificationBox {
-        label {
-            color: var(--emw--pam-typography, var(--emw-color-contrast, #07072A));
-            font-size: var(--emw--size-x-small, 12px);
-            font-weight: var(--emw--font-weight-light, 300);
-        }
-      }
-    }
-    .PlayerDetailsButtonsArea {
-      grid-column-gap: 10px;
-    }
-    .PlayerDetailsSaveButton, .PlayerDetailsCancelButton {
-      font-size: var(--emw--size-x-small, 12px);
-      height: 40px;
-      color: var(--emw-button-typography, var(--emw-color-white, #FFFFFF));
-      &.PlayerButtonDisabled {
-        color: var(--emw-color-gray-300, #58586B);
-      }
-    }
-    .PlayerDetailsCancelButton {
-      color: var(--emw-color-gray-300, #58586B);
-    }
-  }
-
-  .PlayerInfoWrapperTablet {
-    padding: 40px 25% 40px 25%;
-    .PlayerDetailsContent {
-      grid-row-gap: 20px;
-    }
-    .MenuReturnButton {
-      margin-bottom: 30px;
-      span {
-        font-size: var(--emw--font-size-large, 20px);
-      }
-    }
-    .PlayerDetailsHeader, .PlayerLocationHeader, .PlayerNotificationsHeader {
-      h3 {
-        font-size: 24px;
-      }
-    }
-    .PlayerInfoBox {
-      label {
-        font-size: var(--emw--font-size-large, 20px);
-      }
-      input {
-        height: 30px;
-        font-size: var(--emw--font-size-large, 20px);
-        line-height: 30px;
-      }
-      select {
-        font-size: var(--emw--font-size-large, 20px);
-      }
-      .TogglePasswordVisibility {
-        width: 30px;
-        top: 26px;
-      }
-      .InvalidInput {
-        font-size: var(--emw--size-standard, 16px);
-        bottom: - 50px;
-      }
-      &:last-child {
-        .InvalidInput {
-          font-size: var(--emw--size-standard, 16px);
-          bottom: -50px;
-        }
-      }
-    }
-    .PlayerDetailsButtonsArea {
-      font-family: var(--emw--button-typography);
-      grid-column-gap: 40px;
-      .PlayerDetailsSaveButton, .PlayerDetailsCancelButton {
-        font-size: var(--emw--font-size-large, 20px);
-        height: 56px;
-      }
-      .PlayerDetailsSaveButton {
-        color: var(--emw-button-typography, var(--emw-color-white, #FFFFFF));
-        &.PlayerButtonDisabled {
-          color: var(--emw-color-gray-300, #58586B);
-        }
-      }
-    }
-    .PlayerNotificationBox {
-      label {
-        span {
-          font-size: var(--emw--font-size-large, 20px);
-        }
-        input {
-          height: 26px;
-          width: 26px;
-        }
-        .Checkmark {
-          left: 50px;
-          top: 9px;
-        }
-      }
-    }
-  }
-  .PlayerDetailsConfirmSave {
-    background: var(--emw-color-valid, var(--emw-color-green, #48952a));
-    color: var(--emw-button-typography, var(--emw-color-white, #FFFFFF));
-    padding: 16px;
-    border-radius: 5px;
-    margin-top: 16px;
-    .PlayerDetailsConfirmSaveText {
-      padding: 0;
-      margin: 0;
-    }
-  }
-</style>