@everymatrix/player-profile-info 0.0.215 → 0.0.219

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/player-profile-info",
-  "version": "0.0.215",
+  "version": "0.0.219",
   "main": "dist/player-profile-info.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9c9f7a9e6a715010e0746e271e930d92e64e16d2"
+  "gitHead": "b1dd26e91c542c1d18b2f2d8f1dbb391eb2330ee"
 }

package/src/PlayerProfileInfo.svelte

@@ -6,17 +6,22 @@
   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,19 +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: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
@@ -53,6 +63,7 @@
     securityAnswer: '',
     securityQuestion: '',
   }
+
   // needed to keep track of data changes
   let initialValuesArray:any = {
     acceptNewsEmail: false,
@@ -65,6 +76,7 @@
     securityAnswer: '',
     securityQuestion: ''
   }
+
   // placeholder field values
   let profileDetails:any = {
     address1: "i.e.: Glanmire Rd.",
@@ -87,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':
@@ -128,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 => {
@@ -151,7 +178,7 @@
       });
   }
 
-  const getPhoneCodes = () => {
+  const getPhoneCodes = ():void => {
     fetch(`${endpoint}/player/phonecodes`)
       .then((res:any) => res.json())
       .then(data => {
@@ -159,14 +186,13 @@
       });
   }
 
-  const showConfirmMessage = () => {
+  const showConfirmMessage = ():void => {
     showConfirmSave = true;
     setTimeout(() => {showConfirmSave = false;}, 3000);
   }
 
-  let isValid:Boolean = false;
 
-  const checkIsValid = () => {
+  const checkIsValid = ():void => {
     if (invalidSecurityQuestion || invalidSecurityAnswer ||  invalidCity ||  invalidAddress ||  invalidPostalCode ||  invalidMobile) {
       isValid = false;
     }
@@ -175,7 +201,7 @@
     }
   }
 
-  const checkMobile = () => {
+  const checkMobile = ():boolean => {
     if(playerMobileNumber && playerMobileNumber.length >= 5 && playerMobileNumber.length <= 30) {
       return true;
     }
@@ -183,12 +209,12 @@
     return false;
   }
 
-  const validateMobile = () => {
+  const validateMobile = ():void => {
     invalidMobile = !checkMobile();
     checkIsValid();
   }
 
-  const checkSecurityQuestion = () => {
+  const checkSecurityQuestion = ():boolean => {
     if (playerQuestion && playerQuestion.length <= 120) {
       return true;
     }
@@ -196,12 +222,12 @@
     return false;
   }
 
-  const validateSecurityQuestion = () => {
+  const validateSecurityQuestion = ():void => {
     invalidSecurityQuestion = !checkSecurityQuestion();
     checkIsValid();
   }
 
-  const checkSecurityAnswer = () => {
+  const checkSecurityAnswer = ():boolean => {
     if (playerAnswer && playerAnswer.length <= 120) {
       return true;
     }
@@ -209,38 +235,38 @@
     return false;
   }
 
-  const validateSecurityAnswer = () => {
+  const validateSecurityAnswer = ():void => {
     invalidSecurityAnswer = !checkSecurityAnswer();
     checkIsValid();
   }
 
-  const checkCity = () => {
-    if(playerCity.value && playerCity.value.length <= 50) {
+  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;
     }
@@ -248,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,
@@ -281,9 +306,7 @@
     checkIsValid();
   }
 
-  const resetPlayerInfo = () => {
-    // provisionalArray = initialValuesArray;
-
+  const resetPlayerInfo = ():void => {
     playerAddress.value = initialValuesArray.address;
     playerCity.value = initialValuesArray.city;
     giveConsentEmail = initialValuesArray.acceptNewsEmail;
@@ -297,7 +320,7 @@
     toggleScreen();
   }
 
-  const checkEquality = (a, b) => {
+  const checkEquality = (a, b):void => {
     if(JSON.stringify(a) === JSON.stringify(b)) {
       differencesExist = false;
     } else {
@@ -305,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>
@@ -455,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

@@ -25,7 +25,9 @@ export const PlayerProfileTranslations = {
       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!`