@everymatrix/player-profile-info 1.43.2 → 1.43.4

package/src/PlayerProfileInfo.svelte

@@ -1,111 +1,37 @@
 <svelte:options tag={null} />
 
 <script lang="ts">
-  import { onMount } from 'svelte';
   import { getDevice } from 'rvhelper';
   import { _, addNewMessages, setLocale } from './i18n';
   import { TRANSLATIONS } from './translations';
 
-  export let endpoint:string = '';
+  export let userid:string;
+  export let sessionid:string;
+  export let endpoint:string;
   export let lang:string = 'en';
-  export let countrycode:string = 'IR';
-  export let clientstyling:string = '';
-  export let clientstylingurl:string = '';
-  export let translationurl:string = '';
+  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 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;
-
-  let regexValidators:any = {
-    document: /^(?=.*[a-zA-Z0-9])[a-zA-Z0-9\s]+$/
-  }
-
-  const setTranslationUrl = ():void => {
-
-    let url:string = translationurl;
-
-    fetch(url).then((res:any) => res.json())
-    .then((res) => {
-      Object.keys(res).forEach((item:any):void => {
-        addNewMessages(item, res[item]);
-      });
-    }).catch((err:any) => {
-      console.log(err);
-    });
-  }
-
-  Object.keys(TRANSLATIONS).forEach((item:any) => {
-    addNewMessages(item, TRANSLATIONS[item]);
-  });
-
-  const 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 = {
+  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",
-    country: "i.e.: Ireland",
     currency: "EUR",
     iban: "",
     email: "email@here.com",
@@ -120,68 +46,108 @@
     username: "Username"
   };
 
-  let {address1, birth, city, country, currency, mobile, email, firstname, userTitles, language, lastname, postalCode, securityAnswer, securityQuestion, username, consents, iban} = 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;
-          iban = profileDetails.iban;
-          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;
-          initialValuesArray.city = profileDetails.city;
-          initialValuesArray.mobilePrefix = mobile?.prefix;
-          initialValuesArray.mobileNumber = mobile?.number;
-          initialValuesArray.postalCode = profileDetails.postalCode;
-          initialValuesArray.securityAnswer = profileDetails.securityAnswer;
-          initialValuesArray.securityQuestion = profileDetails.securityQuestion;
-
-        break;
+  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;
 
-        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;
+  const regexValidators:any = {
+    document: /^(?=.*[a-zA-Z0-9])[a-zA-Z0-9\s]+$/
+  }
 
-        case 'ConfirmProfileInfoSave':
-          differencesExist = false;
+  const mediaQuery = window.matchMedia('(min-width: 768px)');
 
-          showConfirmMessage();
-          break;
-      }
+  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 => {
@@ -190,7 +156,6 @@
         if (res.status >= 300) {
           return new Error('Error while fetching the countries');
         }
-
         return res.json();
       })
       .then((countryList:any) => {
@@ -198,20 +163,16 @@
           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}/v1/player/phonecodes`)
       .then((res:any) => res.json())
@@ -220,182 +181,197 @@
       });
   }
 
-  const showConfirmMessage = ():void => {
-    showConfirmSave = true;
-    setTimeout(() => {showConfirmSave = false;}, 3000);
-  }
-
-
-  const checkIsValid = ():void => {
-    if (invalidSecurityQuestion || invalidSecurityAnswer ||  invalidCity ||  invalidAddress ||  invalidPostalCode ||  invalidMobile) {
-      isValid = false;
-    }
-    else {
+  const validateAllFields = ():void => {
+    isValid = false;
+    if (isSecurityQuestionValid && isSecurityAnswerValid && isCityValid && isAddressValid && isPostalCodeValid && isMobileValid) {
       isValid = true;
     }
   }
 
-  const checkMobile = ():boolean => {
-    if(playerMobileNumber && playerMobileNumber.length >= 5 && playerMobileNumber.length <= 12) {
-      return true;
-    }
-
-    return false;
+  const checkForChanges = ():void => {
+    hasProfileInfoChanged = safeStringify(updatedEditableValues) !== initialConsentValues;
   }
 
-  const validateMobile = ():void => {
-    invalidMobile = !checkMobile();
-    checkIsValid();
+  const checkForConsentChanges = ():void => {
+    const c = new Object({
+      acceptNewsEmail: updatedEditableValues.acceptNewsEmail,
+      acceptSMSOffers: updatedEditableValues.acceptSMSOffers
+    });
+    hasProfileConsentChanged = safeStringify(c) !== initialConsentValues;
   }
 
-  const checkSecurityQuestion = ():boolean => {
-    if (securityQuestion)
-    switch(custominputtextswitch) {
-      case 'true':
-        if (regexValidators.document.test(securityQuestion) && securityQuestion.length <= 50) {
-          return true;
+  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 'false':
-        if (securityQuestion && securityQuestion.length <= 120) {
-          return true;
+      case 'city':
+        isCityValid = false;
+        if (updatedEditableValues.city && updatedEditableValues.city.length <= 50) {
+          isCityValid = true;
         }
         break;
-    }
-
-    return false;
-  }
-
-  const validateSecurityQuestion = ():void => {
-    invalidSecurityQuestion = !checkSecurityQuestion();
-    checkIsValid();
-  }
 
-  const checkSecurityAnswer = ():boolean => {
-    if (securityAnswer)
-    switch(custominputtextswitch) {
-      case 'true':
-        if (regexValidators.document.test(securityAnswer) && securityAnswer.length <= 50) {
-          return true;
+      case 'postalCode':
+        isPostalCodeValid = false;
+        if (updatedEditableValues.postalCode && updatedEditableValues.postalCode.length <= 20) {
+          isPostalCodeValid = true;
         }
         break;
 
-      case 'false':
-        if (securityAnswer && securityAnswer.length <= 120) {
-          return true;
+      case 'address':
+        isAddressValid = false;
+        if(updatedEditableValues.address1 && updatedEditableValues.address1.length <= 100) {
+          isAddressValid = true;
         }
         break;
-    }
-
-    return false;
-  }
 
-  const validateSecurityAnswer = ():void => {
-    invalidSecurityAnswer = !checkSecurityAnswer();
-    checkIsValid();
-  }
-
-  const checkCity = ():boolean => {
-    if (playerCity.value && playerCity.value.length <= 50) {
-      return true;
-    }
+      case 'securityQuestion':
+        isSecurityQuestionValid = false;
+        if (updatedEditableValues.securityQuestion) 
+          switch(custominputtextswitch) {
+            case 'true':
+              if (regexValidators.document.test(updatedEditableValues.securityQuestion) && updatedEditableValues.securityQuestion.length <= 50) {
+                isSecurityQuestionValid = true;
+              }
+              break;
 
-    return false;
-  }
+            case 'false':
+              if (updatedEditableValues.securityQuestion && updatedEditableValues.securityQuestion.length <= 120) {
+                isSecurityQuestionValid = true;
+              }
+              break;
+          }
+        break;
 
-  const validateCity = ():void => {
-    invalidCity = !checkCity();
-    checkIsValid();
-  }
+      case 'securityAnswer':
+        isSecurityAnswerValid = false;
+        if (updatedEditableValues.securityAnswer)
+          switch(custominputtextswitch) {
+            case 'true':
+              if (regexValidators.document.test(updatedEditableValues.securityAnswer) && updatedEditableValues.securityAnswer.length <= 50) {
+                isSecurityAnswerValid = true;
+              }
+              break;
 
-  const checkPostalCode = ():boolean => {
-    if (playerPostalCode.value && playerPostalCode.value.length <= 20) {
-      return true;
-    }
+            case 'false':
+              if (updatedEditableValues.securityAnswer && updatedEditableValues.securityAnswer.length <= 120) {
+                isSecurityAnswerValid = true;
+              }
+              break;
+          }
+        break;
 
-    return false;
-  }
+      case 'acceptSMSOffers':
+        checkForConsentChanges();
+        break;
 
-  const validatePostalCode = ():void => {
-    invalidPostalCode = !checkPostalCode();
-    checkIsValid();
-  }
+      case 'acceptNewsEmail':
+        checkForConsentChanges();
+        break;
 
-  const checkAddress = ():boolean => {
-    if(playerAddress.value && playerAddress.value.length <= 100) {
-      return true;
     }
-
-    return false;
+    checkForChanges();
+    validateAllFields();
+  }
+  
+  const showSuccessMessage = ():void => {
+    showConfirmSave = true;
+    setTimeout(() => {showConfirmSave = false;}, 3000);
+    window.postMessage({ type: 'WidgetNotification', data: {type: 'success', message: $_('profileUpdateSuccess')}}, window.location.href);
   }
 
-  const validateAddress = ():void => {
-    invalidAddress = !checkAddress();
-    checkIsValid();
+  const showErrorMessage = ():void => {
+    window.postMessage({ type: 'WidgetNotification', data: {type: 'error', message: $_('userProfileUpdateError')}}, window.location.href);
   }
 
-  const updatePlayerInfo = (e):void => {
+  const updatePlayerInfoAndConsent = (e:any):void => {
     e.preventDefault();
-    if (differencesExist == true && isValid == true) {
-      window.postMessage({ type: 'UpdatePlayerInfo', provisionalArray }, window.location.href);
-      window.postMessage({ type: 'UpdatePlayerConsent', consentArray }, window.location.href);
+
+    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 toggleScreen = ():void => {
-    window.postMessage({type: 'PlayerAccountMenuActive', isMobile}, window.location.href);
-  }
+  const updateProfileInfo = async ():Promise<boolean> => {
 
-  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,
+    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
+    };
 
-    checkEquality(provisionalArray, initialValuesArray);
-    consentData();
-    checkIsValid();
+    return await fetch(url.href, options).then((res:any) => res.status == 200, (err) => {console.error(err); return false});
   }
 
-  const consentData = ():void => {
-    consentArray = { items: [] };
-    if (showSMS) {
-      consentArray.items.push({'tagCode': 'sms', 'status': giveConsentSMS ? 'Accepted' : 'Denied'})
-    }
+  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');
 
-    if (showEmail) {
-      consentArray.items.push({'tagCode': 'emailmarketing', 'status': giveConsentEmail ? 'Accepted' : 'Denied'})
+    const body = safeStringify({items: updatedProfileConsent});
+    if (body === null) {
+      return false;
     }
-  }
 
-  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;
+    const options:RequestInit = {
+      method: "POST",
+      headers: headers,
+      body: body
+    };
 
-    toggleScreen();
+    return await fetch(url.href, options).then((res:any) => res.status == 200, (err) => {console.error(err); return false});
   }
 
-  const checkEquality = (a, b):void => {
-    if(JSON.stringify(a) === JSON.stringify(b)) {
-      differencesExist = false;
-    } else {
-      differencesExist = true;
-    }
+  const toggleScreen = ():void => {
+    window.postMessage({type: 'PlayerAccountMenuActive', isMobile}, window.location.href);
   }
 
   const setActiveLanguage = ():void => {
@@ -421,18 +397,29 @@
       });
   }
 
-  onMount(() => {
+  const setTranslationUrl = ():void => {
+    const url:string = translationurl;
 
-    window.addEventListener('message', messageHandler, false);
+    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);
+    });
+  }
 
-    return () => {
-      window.removeEventListener('message', messageHandler);
-    }
+  Object.keys(TRANSLATIONS).forEach((item:any) => {
+    addNewMessages(item, TRANSLATIONS[item]);
   });
 
-  $: lang && setActiveLanguage();
-  $: endpoint && countrycode && getCountriesList();
+  $: 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();
@@ -445,7 +432,7 @@
   <form class="PlayerInfoWrapper {isMobile ? 'PlayerInfoWrapperMobile' : ''} {mediaQuery.matches && isMobile ? 'PlayerInfoWrapperTablet' : ''}">
 
     {#if isMobile}
-      <div class="MenuReturnButton" on:click={() => toggleScreen()}>
+      <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)"/>
@@ -462,69 +449,69 @@
     </div>
     <section class="PlayerDetailsContent">
       <div class="PlayerInfoBox">
-        <label>{$_('userName')}</label>
-        <input type="text" class="FieldDisabled" value={username} readonly />
+        <p>{$_('userName')}</p>
+        <input type="text" class="FieldDisabled" value={readOnlyValues.username} readonly />
       </div>
-      <div class="PlayerInfoBox {invalidMobile ? 'InvalidField' : ''}">
-        <label>{$_('userPhone')}</label>
+      <div class="PlayerInfoBox {isMobileValid ? '' : 'InvalidField'}">
+        <p>{$_('userPhone')}</p>
         <div class="PlayerPhoneNumber">
-          <select bind:value={playerPrefix} on:change={() => checkForChanges()}>
+          <select bind:value={updatedEditableValues.mobile.prefix} on:change={checkForChanges}>
             {#each prefixesArray as pref}
-              {#if pref.Prefix === initialValuesArray.mobiePrefix}
+              {#if pref.Prefix === updatedEditableValues.mobile.prefix}
                 <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()}/>
+        <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 invalidMobile}
+        {#if !isMobileValid}
           <p class="InvalidInput">{$_('userPhoneError')}</p>
         {/if}
       </div>
-      <div class="PlayerInfoBox  {invalidSecurityQuestion ? 'InvalidField' : ''}">
+      <div class="PlayerInfoBox  {isSecurityQuestionValid ? '' : 'InvalidField'}">
         <label for="SecurityQuestion">{custominputtextswitch == 'true' ? $_('profileSecurityQuestion2') : $_('profileSecurityQuestion')}:<span class="FormRequired">*</span></label>
-        <input type="text" bind:value={playerQuestion} on:keyup={() => checkForChanges()} on:blur={validateSecurityQuestion} placeholder={noPlayerData ? securityQuestion : ''} />
-        {#if invalidSecurityQuestion}
+        <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 {invalidSecurityAnswer ? 'InvalidField' : ''}">
+      <div class="PlayerInfoBox {isSecurityAnswerValid ? '' : 'InvalidField'}">
         <label for="SecurityAnswer">{custominputtextswitch == 'true' ? $_('profileSecurityAnswer2') : $_('profileSecurityAnswer')}:<span class="FormRequired">*</span></label>
-        <input type="text" bind:value={playerAnswer} on:keyup={() => checkForChanges()} on:blur={validateSecurityAnswer} placeholder={noPlayerData ? securityAnswer : ''} />
-        {#if invalidSecurityAnswer}
+        <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>{$_('userEmail')}</label>
-        <input type="email" class="FieldDisabled" value={email} readonly />
+        <label for="UserEmail">{$_('userEmail')}</label>
+        <input id="UserEmail" type="email" class="FieldDisabled" value={readOnlyValues.email} readonly />
       </div>
       <div class="PlayerInfoBox">
-        <label>{$_('dateOfBirth')}</label>
-        <input type="text" class="FieldDisabled" value={birth} readonly />
+        <label for="DateOfBirth">{$_('dateOfBirth')}</label>
+        <input id="DateOfBirth" type="text" class="FieldDisabled" value={readOnlyValues.birth} readonly />
       </div>
       <div class="PlayerInfoBox">
-        <label>{$_('firstName')}</label>
-        <input type="text" class="FieldDisabled" value={firstname} readonly />
+        <label for="FirstName">{$_('firstName')}</label>
+        <input id="FirstName" type="text" class="FieldDisabled" value={readOnlyValues.firstname} readonly />
       </div>
       <div class="PlayerInfoBox">
-        <label>{$_('lastName')}</label>
-        <input type="text" class="FieldDisabled" value={lastname} readonly />
+        <label for="LastName">{$_('lastName')}</label>
+        <input id="LastName" type="text" class="FieldDisabled" value={readOnlyValues.lastname} readonly />
       </div>
       <div class="PlayerInfoBox">
-        <label>{$_('userTitle')}</label>
-        <input type="text" class="FieldDisabled" value={userTitles} readonly />
+        <label for="UserTitle">{$_('userTitle')}</label>
+        <input id="UserTitle" type="text" class="FieldDisabled" value={readOnlyValues.userTitles} readonly />
       </div>
       <div class="PlayerInfoBox">
-        <label>{$_('currency')}</label>
-        <input type="text" class="FieldDisabled" value={currency} readonly />
+        <label for="Currrency">{$_('currency')}</label>
+        <input id="Currency" type="text" class="FieldDisabled" value={readOnlyValues.currency} readonly />
       </div>
-      {#if iban}
+      {#if readOnlyValues.iban}
         <div class="PlayerInfoBox">
-          <label>{$_('iban')}</label>
-          <input type="text" class="FieldDisabled" value={iban} readonly />
+          <label for="Iban">{$_('iban')}</label>
+          <input id="Iban" type="text" class="FieldDisabled" value={readOnlyValues.iban} readonly />
         </div>
       {/if}
     </section>
@@ -534,50 +521,50 @@
     </div>
     <section class="PlayerLocationContent">
       <div class="PlayerInfoBox">
-        <label>{$_('userCountry')}</label>
-        <input type="text" class="PlayerCountry FieldDisabled" placeholder={countrycode} value={selectedCountry.Name} readonly />
+        <label for="UserCountry">{$_('userCountry')}</label>
+        <input id="UserCountry" type="text" class="PlayerCountry FieldDisabled"  value={readOnlyValues.countryName} placeholder={readOnlyValues.countryCode} readonly />
       </div>
-      <div class="PlayerInfoBox {invalidCity ? 'InvalidField' : ''}">
-        <label>{$_('userCity')}</label>
-        <input bind:this={playerCity} type="text" on:blur={validateCity} on:keyup={() => checkForChanges()} placeholder={noPlayerData ? city : ''} value={noPlayerData ? '' : initialValuesArray.city} />
-        {#if invalidCity}
+      <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 {invalidAddress ? 'InvalidField' : ''}">
-        <label>{$_('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">{$_('userAddressError')}</p>
-        {/if}
+      <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 {invalidPostalCode ? 'InvalidField' : ''}">
-        <label>{$_('userPostalCode')}</label>
-        <input bind:this={playerPostalCode} type="text" on:blur={validatePostalCode} on:keyup={() => checkForChanges()} placeholder={noPlayerData ? postalCode : ''} value={noPlayerData ? '' : initialValuesArray.postalCode} />
-        {#if invalidPostalCode}
+      <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 showEmail || showSMS}
+    {#if updatedEditableValues.acceptSMSOffers !== undefined || updatedEditableValues.acceptNewsEmail !== undefined}
       <div class="PlayerNotificationsHeader">
         <h3>{$_('userNotifications')}</h3>
       </div>
       <section class="PlayerNotificationsCheckboxArea">
-        {#if showSMS}
+        {#if updatedEditableValues.acceptSMSOffers !== undefined}
           <div class="PlayerNotificationBox">
             <label for="SMSNotification">
-              <input bind:checked={giveConsentSMS}  on:change={checkForChanges} type="checkbox" id="SMSNotification" name="Enable SMS notifications" />
+              <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 showEmail}
+        {#if updatedEditableValues.acceptNewsEmail !== undefined}
           <div class="PlayerNotificationBox">
             <label for="EmailNotification">
-              <input bind:checked={giveConsentEmail} on:change={checkForChanges} type="checkbox" id="EmailNotification" name="Enable Emails" />
+              <input bind:checked={updatedEditableValues.acceptNewsEmail} on:change={() => validateAndCheckForChanges('acceptNewsEmail')} type="checkbox" id="EmailNotification" name="Enable Emails" />
               <span class="Checkmark"></span>
               <span>{$_('userEmailNotification')}</span>
             </label>
@@ -586,7 +573,7 @@
       </section>
     {/if}
     <section class="PlayerDetailsButtonsArea {isMobile ? 'PlayerDetailsButtonsAreaMobile' : ''}" >
-      <button class="PlayerDetailsSaveButton {differencesExist  && isValid ? '' : 'PlayerButtonDisabled'}" on:click={(e) => updatePlayerInfo(e)}>{$_('userProfileSaveChanges')}</button>
+      <button class="PlayerDetailsSaveButton {hasProfileInfoChanged && isValid ? '' : 'PlayerButtonDisabled'}" on:click={updatePlayerInfoAndConsent}>{$_('userProfileSaveChanges')}</button>
     </section>
     {#if showConfirmSave}
       <section class="PlayerDetailsConfirmSave">
@@ -599,7 +586,6 @@
 
 <style lang="scss">
 
-
   button {
     font-family: var(--emw--button-typography);
   }
@@ -628,7 +614,7 @@
     color: var(--emw--pam-typography, var(--emw-color-contrast, #07072A));
     background: var(--emw-color-pale, var(--emw--color-gray-50, #F1F1F1));
     padding: 50px;
-    max-width: 760px;
+    height: 100%;
     border-radius: 20px;
   }
 
@@ -737,6 +723,7 @@
     /* Firefox */
     input[type=number] {
       -moz-appearance: textfield;
+      appearance: textfield;
     }
   }
 
@@ -803,8 +790,6 @@
     .PlayerDetailsSaveButton, .PlayerDetailsCancelButton {
       cursor: pointer;
       border-radius: 5px;
-      width: 100%;
-      height: 50px;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -813,12 +798,19 @@
       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));
       }
@@ -859,6 +851,7 @@
     padding: 20px 15px;
     background: var(--emw-color-gray-50, #F9F8F8);
     max-width: unset;
+    border-radius: 0;
     .PlayerDetailsContent {
       grid-template-columns: 1fr;
     }