@everymatrix/player-profile-info 0.0.214 → 0.0.218

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/player-profile-info",
-  "version": "0.0.214",
+  "version": "0.0.218",
   "main": "dist/player-profile-info.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "504c889b442d1a70906bdb23ddaef68e256963b6"
+  "gitHead": "ae78406d20c106f1d3c352c0e97189a7bdffacfb"
 }

package/src/PlayerProfileInfo.svelte

@@ -1,22 +1,27 @@
 <svelte:options tag={null} />
 
-<script lang="typescript">
+<script lang="ts">
   import { onMount } from 'svelte';
   import { getDevice } from 'rvhelper';
   import { _, addNewMessages, setLocale } from './i18n';
   import { PlayerProfileTranslations } from './translations';
 
+  // Native bridge
+  import { isNative, call as callNative, registerEventListener as registerNativeEventListener } from 'js-native-bridge';
+
+
   export let endpoint:string = '';
   export let lang:string = 'en';
 
   let isLoading:boolean = false;
-  let userAgent:String = window.navigator.userAgent;
-  let isMobile = (getDevice(userAgent) === 'PC') ? false : 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 = '';
@@ -26,15 +31,24 @@
   let prefixesArray:Array<Object> = [];
   let countriesArray:Array<Object> = []
 
+  let isValid:boolean = false;
+
   let invalidCity:string = '';
   let invalidPostalCode:string = '';
   let invalidAddress:string = '';
+  let invalidSecurityQuestion:boolean = false;
+  let invalidSecurityAnswer:boolean = false;
+  let invalidMobile:boolean;
 
   let showConfirmSave:boolean = false;
 
+  // Native bridge
+  let isOnNative:boolean = false;
+
   Object.keys(PlayerProfileTranslations).forEach((item:any) => {
     addNewMessages(item, PlayerProfileTranslations[item]);
   });
+
   const mediaQuery = window.matchMedia('(min-width: 768px)');
 
   // needed to keep track of data changes
@@ -49,6 +63,7 @@
     securityAnswer: '',
     securityQuestion: '',
   }
+
   // needed to keep track of data changes
   let initialValuesArray:any = {
     acceptNewsEmail: false,
@@ -61,6 +76,7 @@
     securityAnswer: '',
     securityQuestion: ''
   }
+
   // placeholder field values
   let profileDetails:any = {
     address1: "i.e.: Glanmire Rd.",
@@ -83,7 +99,7 @@
 
   let {address1, birth, city, country, currency, mobile, email, firstname, userTitles, language, lastname, postalCode, securityAnswer, securityQuestion, username, consents} = profileDetails;
 
-  const messageHandler = (e:any) => {
+  const messageHandler = (e:any):void => {
     if (e.data) {
       switch(e.data.type) {
         case 'ProfileDetailsData':
@@ -124,22 +140,37 @@
             securityAnswer: profileDetails.securityAnswer,
             securityQuestion: profileDetails.securityQuestion,
           }
-
         break;
 
         case 'ConfirmProfileInfoSave':
+          if (isOnNative) {
+            registerNativeEventListener(
+              'BIOMETRICS_ENABLED',
+              (biometricsEnabled) => {
+                if (biometricsEnabled !== biometricsSelection) {
+                  biometricsSelection = biometricsEnabled;
+                }
+              },
+            );
+
+            const methodFound = callNative(
+              biometricsSelection ? 'ENABLE_BIOMETRICS' : 'DISABLE_BIOMETRICS',
+            );
+
+            if (!methodFound) {
+              // Nothing to do here yet
+            }
+          }
+
           differencesExist = false;
-          showConfirmMessage();
-        break;
 
-        default:
-        // do nothing
-        break;
+          showConfirmMessage();
+          break;
       }
     }
   }
 
-  const getCountriesList = () => {
+  const getCountriesList = ():void => {
     fetch(`${endpoint}/player/countries`)
       .then((res:any) => res.json())
       .then(data => {
@@ -147,7 +178,7 @@
       });
   }
 
-  const getPhoneCodes = () => {
+  const getPhoneCodes = ():void => {
     fetch(`${endpoint}/player/phonecodes`)
       .then((res:any) => res.json())
       .then(data => {
@@ -155,15 +186,14 @@
       });
   }
 
-  const showConfirmMessage = () => {
+  const showConfirmMessage = ():void => {
     showConfirmSave = true;
     setTimeout(() => {showConfirmSave = false;}, 3000);
   }
 
-  let isValid:Boolean = false;
 
-  const checkIsValid = () => {
-    if (playerQuestion.length <= 0 || playerAnswer.length <= 0 ||  invalidCity ||  invalidAddress ||  invalidPostalCode ||  playerMobileNumber.length <= 0) {
+  const checkIsValid = ():void => {
+    if (invalidSecurityQuestion || invalidSecurityAnswer ||  invalidCity ||  invalidAddress ||  invalidPostalCode ||  invalidMobile) {
       isValid = false;
     }
     else {
@@ -171,33 +201,72 @@
     }
   }
 
-  const checkCity = () => {
-    if(playerCity.value && playerCity.value.length <= 50) {
+  const checkMobile = ():boolean => {
+    if(playerMobileNumber && playerMobileNumber.length >= 5 && playerMobileNumber.length <= 30) {
+      return true;
+    }
+
+    return false;
+  }
+
+  const validateMobile = ():void => {
+    invalidMobile = !checkMobile();
+    checkIsValid();
+  }
+
+  const checkSecurityQuestion = ():boolean => {
+    if (playerQuestion && playerQuestion.length <= 120) {
+      return true;
+    }
+
+    return false;
+  }
+
+  const validateSecurityQuestion = ():void => {
+    invalidSecurityQuestion = !checkSecurityQuestion();
+    checkIsValid();
+  }
+
+  const checkSecurityAnswer = ():boolean => {
+    if (playerAnswer && playerAnswer.length <= 120) {
+      return true;
+    }
+
+    return false;
+  }
+
+  const validateSecurityAnswer = ():void => {
+    invalidSecurityAnswer = !checkSecurityAnswer();
+    checkIsValid();
+  }
+
+  const checkCity = ():boolean => {
+    if (playerCity.value && playerCity.value.length <= 50) {
       return true;
     }
 
     return false;
   }
 
-  const validateCity = () => {
+  const validateCity = ():void => {
     invalidCity = !checkCity();
     checkIsValid();
   }
 
-  const checkPostalCode = () => {
-    if(playerPostalCode.value && playerPostalCode.value.length <= 20) {
+  const checkPostalCode = ():boolean => {
+    if (playerPostalCode.value && playerPostalCode.value.length <= 20) {
       return true;
     }
 
     return false;
   }
 
-  const validatePostalCode = () => {
+  const validatePostalCode = ():void => {
     invalidPostalCode = !checkPostalCode();
     checkIsValid();
   }
 
-  const checkAddress = () => {
+  const checkAddress = ():boolean => {
     if(playerAddress.value && playerAddress.value.length <= 100) {
       return true;
     }
@@ -205,23 +274,22 @@
     return false;
   }
 
-  const validateAddress = () => {
+  const validateAddress = ():void => {
     invalidAddress = !checkAddress();
     checkIsValid();
   }
 
-  const updatePlayerInfo = () => {
+  const updatePlayerInfo = ():void => {
     if (differencesExist == true && isValid == true) {
       window.postMessage({ type: 'UpdatePlayerInfo', provisionalArray }, window.location.href);
     }
   }
 
-  const toggleScreen = () => {
+  const toggleScreen = ():void => {
     window.postMessage({ type: 'ReturnToMenu' }, window.location.href);
   }
 
-  const checkForChanges = () => {
-
+  const checkForChanges = ():void => {
     provisionalArray = {
       acceptNewsEmail: giveConsentEmail,
       acceptSMSOffers: giveConsentSMS,
@@ -238,9 +306,7 @@
     checkIsValid();
   }
 
-  const resetPlayerInfo = () => {
-    // provisionalArray = initialValuesArray;
-
+  const resetPlayerInfo = ():void => {
     playerAddress.value = initialValuesArray.address;
     playerCity.value = initialValuesArray.city;
     giveConsentEmail = initialValuesArray.acceptNewsEmail;
@@ -254,7 +320,7 @@
     toggleScreen();
   }
 
-  const checkEquality = (a, b) => {
+  const checkEquality = (a, b):void => {
     if(JSON.stringify(a) === JSON.stringify(b)) {
       differencesExist = false;
     } else {
@@ -262,18 +328,32 @@
     }
   }
 
-  const initialLoad = () => {
+  const setActiveLanguage = ():void => {
     setLocale(lang);
   }
 
   onMount(() => {
     window.addEventListener('message', messageHandler, false);
+
+    isOnNative = !!isNative(userAgent);
+
+    if (isOnNative) {
+      registerNativeEventListener(
+        'BIOMETRICS_ENABLED',
+        (biometricsEnabled) => {
+          biometricsSelection = !!biometricsEnabled
+        },
+      );
+
+      callNative('BIOMETRICS_ENABLED');
+    }
+
     return () => {
       window.removeEventListener('message', messageHandler);
     }
   });
 
-  $: lang && initialLoad();
+  $: lang && setActiveLanguage();
   $: endpoint && getCountriesList();
   $: endpoint && getPhoneCodes();
 </script>
@@ -304,7 +384,7 @@
       <label>{$_('playerProfile.userName')}</label>
       <input type="text" class="FieldDisabled" value={username} readonly />
     </div>
-    <div class="PlayerInfoBox">
+    <div class="PlayerInfoBox {invalidMobile ? 'InvalidField' : ''}">
       <label>{$_('playerProfile.userPhone')}</label>
       <div class="PlayerPhoneNumber">
         <select bind:value={playerPrefix} on:change={() => checkForChanges()}>
@@ -316,41 +396,50 @@
             {/if}
           {/each}
         </select>
-      <input bind:value={playerMobileNumber} 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 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">{$_('playerProfile.userPhoneError')}</p>
+      {/if}
+    </div>
+    <div class="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">{$_('playerProfile.securityQuestionError')}</p>
+      {/if}
+    </div>
+    <div class="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">{$_('playerProfile.securityAnswerError')}</p>
+      {/if}
     </div>
     <div class="PlayerInfoBox">
       <label>{$_('playerProfile.userEmail')}</label>
       <input type="email" class="FieldDisabled" value={email} readonly />
     </div>
     <div class="PlayerInfoBox">
-      <label>{$_('playerProfile.securityQuestion')}</label>
-      <input type="text" bind:value={playerQuestion} on:keyup={() => checkForChanges()} placeholder={noPlayerData ? securityQuestion : ''} />
+      <label>{$_('playerProfile.dateOfBirth')}</label>
+      <input type="text" class="FieldDisabled" value={birth} readonly />
     </div>
     <div class="PlayerInfoBox">
       <label>{$_('playerProfile.firstName')}</label>
       <input type="text" class="FieldDisabled" value={firstname} readonly />
     </div>
-    <div class="PlayerInfoBox">
-      <label>{$_('playerProfile.securityAnswer')}</label>
-      <input type="text" bind:value={playerAnswer} on:keyup={() => checkForChanges()} placeholder={noPlayerData ? securityAnswer : ''} />
-    </div>
     <div class="PlayerInfoBox">
       <label>{$_('playerProfile.lastName')}</label>
       <input type="text" class="FieldDisabled" value={lastname} readonly />
     </div>
     <div class="PlayerInfoBox">
-      <label>{$_('playerProfile.dateOfBirth')}</label>
-    <input type="text" class="FieldDisabled" value={birth} readonly />
+      <label>{$_('playerProfile.userTitle')}</label>
+      <input type="text" class="FieldDisabled" value={userTitles} readonly />
     </div>
     <div class="PlayerInfoBox">
       <label>{$_('playerProfile.currency')}</label>
       <input type="text" class="FieldDisabled" value={currency} readonly />
     </div>
-    <div class="PlayerInfoBox">
-      <label>{$_('playerProfile.userTitle')}</label>
-      <input type="text" class="FieldDisabled" value={userTitles} readonly />
-    </div>
   </section>
 
   <div class="PlayerLocationHeader">
@@ -365,21 +454,21 @@
       <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">City must be at least 1 character long and 50 characters maximum.</p>
+        <p class="InvalidInput">{$_('playerProfile.userCityError')}</p>
       {/if}
     </div>
     <div class="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">Address must be at least 1 character long and 100 characters maximum.</p>
+        <p class="InvalidInput">{$_('playerProfile.userAddressError')}</p>
       {/if}
     </div>
     <div class="PlayerInfoBox {invalidPostalCode ? 'InvalidField' : ''}">
       <label>{$_('playerProfile.userPostalCode')}</label>
       <input bind:this={playerPostalCode} type="number" on:blur={validatePostalCode} on:keyup={() => checkForChanges()} placeholder={noPlayerData ? postalCode : ''} value={noPlayerData ? '' : initialValuesArray.postalCode} />
       {#if invalidPostalCode}
-        <p class="InvalidInput">Postal Code must be at least 1 character long and 20 characters maximum.</p>
+        <p class="InvalidInput">{$_('playerProfile.userPostalCodeError')}</p>
       {/if}
     </div>
   </section>
@@ -403,6 +492,20 @@
       </label>
     </div>
   </section>
+  {#if isOnNative}
+    <div class="PlayerNotificationsHeader">
+      <h3>{$_('playerProfile.userAppSettings')}</h3>
+    </div>
+    <section class="PlayerNotificationsCheckboxArea">
+      <div class="PlayerNotificationBox">
+        <label for="Biometrics">
+          <input bind:checked={biometricsSelection} on:change={checkForChanges} type="checkbox" id="BiometricsEnabled" name="Biometric Enabled" />
+          <span class="Checkmark"></span>
+          <span>{$_('playerProfile.userBiometrics')}</span>
+        </label>
+      </div>
+    </section>
+  {/if}
   <section class="PlayerDetailsButtonsArea {isMobile ? 'PlayerDetailsButtonsAreaMobile' : ''}">
     <div class="PlayerDetailsSaveButton {differencesExist  && isValid ? '' : 'PlayerButtonDisabled'}" on:click={() => updatePlayerInfo()}>{$_('playerProfile.userProfileSaveChanges')}</div>
   </section>

package/src/translations.js

@@ -5,10 +5,13 @@ export const PlayerProfileTranslations = {
       personalDetails: `Personal Details`,
       userName: `User name:`,
       userPhone: `Phone:`,
+      userPhoneError: 'Mobile must be at least 5 character long and 20 characters maximum.',
       userEmail: `Email:`,
       securityQuestion: `Security Question:`,
+      securityQuestionError: 'Security question must be at least 1 character long and maximum 120 characters.',
       firstName: `First name:`,
       securityAnswer: `Security Answer:`,
+      securityAnswerError: 'Security answer must be at least 1 character long and maximum 120 characters.',
       lastName: `Last Name:`,
       dateOfBirth: `Date of birth:`,
       currency: `Currency:`,
@@ -16,10 +19,15 @@ export const PlayerProfileTranslations = {
       locationDetails: `Location Details`,
       userCountry: `Country:`,
       userCity: `City:`,
+      userCityError: 'City must be at least 1 character long and 50 characters maximum.',
       userAddress: `Address:`,
+      userAddressError: 'Address must be at least 1 character long and 100 characters maximum.',
       userPostalCode: `Postal Code:`,
+      userPostalCodeError: 'Postal Code must be at least 1 character long and 20 characters maximum.',
       userNotifications: `Notifications`,
+      userAppSettings: `Biometrics`,
       userSMSNotification: `Enable SMS notifications`,
+      userBiometrics: `Enable biometrics`,
       userEmailNotification: `Enable Emails`,
       userProfileSaveChanges: `Save Changes`,
       userProfileConfirmationMessage: `Your changes have been saved!`
@@ -31,24 +39,62 @@ export const PlayerProfileTranslations = {
       personalDetails: `Detalii Personale`,
       userName: `Nume utilizator:`,
       userPhone: `Telefon:`,
+      userPhoneError: 'Telefon-ul trebuie să aibă cel puțin 5 caractere și maximum 20 de caractere.',
       userEmail: `E-mail:`,
       securityQuestion: `Întrebare securitate:`,
+      securityQuestionError: 'Întrebarea de securitate trebuie să aibă cel puțin 1 caracter și maximum 120 de caractere.',
       firstName: `Prenume:`,
       securityAnswer: `Răspuns securitate:`,
+      securityAnswerError: 'Security answer must be at least 1 character long and maximum 120 characters.',
       lastName: `Nume:`,
       dateOfBirth: `Data nașterii:`,
       currency: `Monedă:`,
       userTitle: `Titlu:`,
       locationDetails: `Detalii de Localizare`,
       userCountry: `Țară:`,
+      userCityError: 'Orașul trebuie să aibă cel puțin 1 caracter și maximum 50 de caractere.',
       userCity: `Oraș:`,
       userAddress: `Adresă:`,
+      userAddressError: 'Address must be at least 1 character long and 100 characters maximum.',
       userPostalCode: `Cod poștal:`,
+      userPostalCodeError: 'Codul poștal trebuie să aibă cel puțin 1 caracter și maximum 20 de caractere.',
       userNotifications: `Notificări`,
       userSMSNotification: `Activează notificări prin SMS`,
       userEmailNotification: `Activează notificări prin E-mail`,
       userProfileSaveChanges: `Salvează`,
       userProfileConfirmationMessage: `Modificările au fost salvate!`
     }
+  },
+  tr: {
+    playerProfile: {
+      title: `Profil bilgisi`,
+      personalDetails: `Kişisel detaylar`,
+      userName: `Kullanıcı adı:`,
+      userPhone: `Telefon:`,
+      userPhoneError: 'Mobil en az 5 karakter uzunluğunda ve en fazla 20 karakter olmalıdır.',
+      userEmail: `E-posta:`,
+      securityQuestion: `Güvenlik Sorusu:`,
+      securityQuestionError: 'Güvenlik sorusu en az 1, en fazla 120 karakter uzunluğunda olmalıdır.',
+      firstName: `First name:`,
+      securityAnswer: `İlk adı:`,
+      securityAnswerError: 'Güvenlik cevabı en az 1 karakter uzunluğunda ve en fazla 120 karakter olmalıdır.',
+      lastName: `Soyadı:`,
+      dateOfBirth: `Doğum tarihi:`,
+      currency: `Para birimi:`,
+      userTitle: `Başlık:`,
+      locationDetails: `Konum Ayrıntıları`,
+      userCountry: `Ülke:`,
+      userCity: `Şehir:`,
+      userCityError: 'Şehir en az 1 karakter uzunluğunda ve en fazla 50 karakter olmalıdır.',
+      userAddress: `Adres:`,
+      userAddressError: 'Adres en az 1 karakter uzunluğunda ve en fazla 100 karakter olmalıdır.',
+      userPostalCode: `Posta kodu:`,
+      userPostalCodeError: 'Posta Kodu en az 1 karakter uzunluğunda ve en fazla 20 karakter olmalıdır.',
+      userNotifications: `Bildirimler`,
+      userSMSNotification: `SMS bildirimlerini etkinleştir`,
+      userEmailNotification: `E-postaları Etkinleştir`,
+      userProfileSaveChanges: `Değişiklikleri Kaydet`,
+      userProfileConfirmationMessage: `Değişiklikleriniz kaydedildi!`
+    }
   }
 };