@everymatrix/player-profile-info 1.0.16 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/player-profile-info",
-  "version": "1.0.16",
+  "version": "1.1.0",
   "main": "dist/player-profile-info.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "526e9d4877d11a6372af0e39b2c9db7c8b640737"
+  "gitHead": "62036ada223f2b4f7b64d99a81ab2229ecba3cf1"
 }

package/src/PlayerProfileInfo.svelte

@@ -13,8 +13,11 @@
   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 = '';
 
+  let customStylingContainer:HTMLElement;
   let isLoading:boolean = true;
   let userAgent:string = window.navigator.userAgent;
   let isMobile:boolean = (getDevice(userAgent) === 'PC') ? false : true;
@@ -396,6 +399,25 @@
     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);
+      });
+  }
+
   onMount(() => {
     window.addEventListener('message', messageHandler, false);
 
@@ -420,173 +442,177 @@
   $: lang && setActiveLanguage();
   $: endpoint && countrycode && getCountriesList();
   $: endpoint && getPhoneCodes();
+  $: clientstylingurl && customStylingContainer && setClientStylingURL();
+  $: clientstyling && customStylingContainer && setClientStyling();
   $: 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}
+<div bind:this={customStylingContainer}>
+  {#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>
+    <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 class="PlayerNotificationsHeader" part="PlayerNotificationsHeader">
+      <h3>{$_('playerProfile.personalDetails')}</h3>
     </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()}/>
+    <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>
-      {#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>
+      <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>
 
-  {#if showEmail || showSMS}
-    <div class="PlayerNotificationsHeader" part="PlayerNotificationsHeader">
-      <h3>{$_('playerProfile.userNotifications')}</h3>
+    <div class="PlayerLocationHeader" part="PlayerLocationHeader">
+      <h3>{$_('playerProfile.locationDetails')}</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}
+    <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="EmailNotification">
-            <input bind:checked={giveConsentEmail} on:change={checkForChanges} type="checkbox" id="EmailNotification" name="Enable Emails" />
+          <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.userEmailNotification')}</span>
+            <span>{$_('playerProfile.userBiometrics')}</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}
+    <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}
-</form>
-{/if}
+</div>
 
 <style lang="scss">