@everymatrix/general-player-register-form 0.0.214 → 0.0.218

package/package.json

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

package/src/GeneralPlayerRegisterForm.svelte

@@ -1,27 +1,34 @@
 <svelte:options tag={null} />
 
-<script lang="typescript">
+<script lang="ts">
   import { getDevice } from 'rvhelper';
   import { onMount } from "svelte";
+  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
+  import { RegisterFormTranslations } from './translations';
+
+  // Native bridge
+  import { isNative, call as callNative, registerEventListener as registerNativeEventListener } from 'js-native-bridge';
 
   import '@everymatrix/general-player-register-form-step1';
   import '@everymatrix/general-player-register-form-step2';
   import '@everymatrix/general-player-register-form-step3';
 
   export let endpoint:string = '';
-  export let cmsendpoint:any = '';
+  export let cmsendpoint:string = '';
   export let imagedesktop:string = '';
   export let playerid:string = '';
   export let session:string = '';
   export let trackedanalyticsdata:string = '';
   export let captchakey:string = '';
+  export let lang:string = '';
+  export let licenseyears:string = '';
 
   let isLoading:boolean = false;
 
-  let showRegisterStepOne:Boolean = true;
-  let showRegisterStepTwo:Boolean = false;
-  let showRegisterStepThree:Boolean = false;
-  let showConfirmation:Boolean = false;
+  let showRegisterStepOne:boolean = true;
+  let showRegisterStepTwo:boolean = false;
+  let showRegisterStepThree:boolean = false;
+  let showConfirmation:boolean = false;
   let cmsData:any;
   let showError:boolean = false;
 
@@ -30,18 +37,34 @@
   let accountCreationMessage:string = '';
   let image:Object = {};
 
-  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;
 
+  // @TODO typescript model type for userData
   let userData:any = {};
-  let stepTwoVisited:Boolean = false;
-  let stepThreeVisited:Boolean = false;
-  let userconsentsexist:Boolean = false;
+  let stepTwoVisited:boolean = false;
+  let stepThreeVisited:boolean = false;
+  let userconsentsexist:boolean = false;
   let error:string = '';
 
   let scrollSteps:HTMLElement;
 
-  const verifyUserConsents = () => {
+  // Native bridge
+  let isOnNative:boolean = false;
+
+  // @TODO typescript model for loginFields
+  let loginFields:any = {
+    username: '',
+    password: '',
+  };
+
+  // setupI18n({ withLocale: 'en', translations: {}});
+
+  Object.keys(RegisterFormTranslations).forEach((item:any) => {
+    addNewMessages(item, RegisterFormTranslations[item]);
+  });
+
+  const verifyUserConsents = ():void => {
     fetch(`${endpoint}/player/consentRequirements`)
       .then((res:any) => res.json())
       .then(data => {
@@ -53,15 +76,17 @@
       });
   }
 
-  const getCmsData = () => {
-    fetch(cmsendpoint)
+  const getCmsData = ():void => {
+    let url:URL = new URL(`${cmsendpoint}${lang}/login-register-content`);
+
+    fetch(url.href)
       .then((res: any) => res.json())
       .then((data: any) => {
-        cmsData = data.REGULAR_REGISTRATION[0];
+        cmsData = data.registerData;
 
-        accountCreationTitle = cmsData.congrats;
-        accountCreationSubTitle = cmsData.accCreated;
-        accountCreationMessage = cmsData.accCreatedMsg;
+        accountCreationTitle = cmsData.title;
+        accountCreationSubTitle = cmsData.subtitle;
+        accountCreationMessage = cmsData.content;
 
       })
       .catch((err: any) => {
@@ -69,11 +94,12 @@
       });
   };
 
-  const scrollTop = () => {
+  const scrollTop = ():void => {
     scrollSteps.scrollIntoView();
   }
 
-  const createData = (step:string, data:any) => {
+  // @TODO data typescript
+  const createData = (step:string, data:any):void => {
     if (step === 'RegisterStepOne') {
       userData.email = data.userEmail;
       userData.username = data.userValue;
@@ -105,16 +131,17 @@
       // analytics data
       userData.affiliateMarker = trackedanalyticsdata;
 
-      if(userconsentsexist) {
+      if (userconsentsexist) {
         userData.userConsents.additionalProp1 = data.consentOffersSms;
         userData.userConsents.additionalProp2 = data.consentOffersEmail;
         userData.userConsents.additionalProp3 = data.consentTerms;
       }
+
       userData.token = data.token;
     }
   }
 
-  const messageHandler = (e:any) => {
+  const messageHandler = (e:any):void => {
     if (e.data) {
       switch(e.data.type) {
         case 'RegisterStepOne':
@@ -169,8 +196,26 @@
     }
   }
 
-  const sendData = async (userData:any) => {
+  const handlePostRegister = ():void => {
+    if (isOnNative) {
+      registerNativeEventListener(
+        'BIOMETRICS_ENABLED',
+        () => {
+        },
+      );
 
+      const { username, password } = loginFields;
+
+      const methodFound = callNative('ENABLE_BIOMETRICS', { username, password });
+
+      if (!methodFound) {
+        // Nothing to do here
+      }
+    }
+  }
+
+  // @TODO typescript data model for userData
+  const sendData = async (userData:any):Promise<any> => {
     let sendRegistrationData = {
       method: "PUT",
       headers: {
@@ -187,29 +232,45 @@
     if (response.ok) {
       showRegisterStepThree = false;
       showConfirmation = true;
+
+
+      loginFields = {
+        username: userData.username,
+        password: userData.password
+      };
+
+      handlePostRegister();
     } else {
-      // Parsing GMCore message 'cuz it's stupid and it doesn't know how to send error messages in 2021 ffs
+      // Parsing GMCore message 'cuz it's stupid and it doesn't know how to send error messages in 2021...2022 already ffs
+      // I really hope this piece of code won't survive long enough so that the years above will reach 2025 or something ... like, for real, please ... some real errors? plox ...
       error = data.error.substring(data.error.indexOf('errorMessage') + 13, data.error.length);
       showError = true;
       window.postMessage({ type: "ShowRegistrationError", showError, error }, window.location.href);
     }
   }
 
-  const switchToLogin = () => {
+  const switchToLogin = ():void => {
     window.postMessage({ type: "ToLogin" }, window.location.href);
   }
 
+  const setActiveLanguage = ():void => {
+    setLocale(lang);
+  }
+
   onMount(() => {
-    verifyUserConsents();
-    getCmsData();
     window.addEventListener('message', messageHandler, false);
 
+    verifyUserConsents();
+    isOnNative = !!isNative(userAgent);
+
     return () => {
       window.removeEventListener('message', messageHandler);
     }
   });
 
+$: cmsendpoint && getCmsData();
 $: playerid && session;
+$: lang && setActiveLanguage();
 </script>
 
 {#if isLoading}
@@ -229,17 +290,17 @@ $: playerid && session;
       {/if}
       {#if showRegisterStepOne}
         <div class="RegisterFormStep1">
-          <general-player-register-form-step1 />
+          <general-player-register-form-step1 {lang} />
         </div>
       {/if}
       {#if showRegisterStepTwo}
         <div class="RegisterFormStep2">
-          <general-player-register-form-step2 {endpoint} />
+          <general-player-register-form-step2 {endpoint} {lang} {licenseyears} />
         </div>
       {/if}
       {#if showRegisterStepThree}
         <div class="RegisterFormStep3">
-          <general-player-register-form-step3 {userconsentsexist} {endpoint} {captchakey} />
+          <general-player-register-form-step3 {userconsentsexist} {endpoint} {captchakey} {lang} />
         </div>
       {/if}
       {#if showConfirmation}
@@ -248,7 +309,7 @@ $: playerid && session;
           <h2 class="RegisterConfirmationTitle">{accountCreationTitle}</h2>
           <p class="RegisterConfirmationSubtitle">{accountCreationSubTitle}</p>
           <p class="RegisterConfirmationNote">{accountCreationMessage}</p>
-          <button class="RegisterConfirmationGoToLogin" on:click={switchToLogin}>Go To Login</button>
+          <button class="RegisterConfirmationGoToLogin" on:click={switchToLogin}>{$_('registerForm.goToLoginButton')}</button>
         </div>
       {/if}
     </div>
@@ -289,7 +350,7 @@ $: playerid && session;
     scrollbar-color: #cfcfcf #f1f1f1;
     scrollbar-width: thin;
     &.RegisterFormContainerMobile {
-      padding: ttp(0.625);
+      padding: 40px 20px;;
       height: auto;
       overflow-y: initial;
     }
@@ -311,15 +372,15 @@ $: playerid && session;
 
   .RegisterSteps {
     display: flex;
-    gap: ttp(0.625);
-    padding: ttp(0.625) 0 ttp(1.875);
+    gap: 10px;
+    padding: 20px 0 30px;
   }
 
   .RegisterFirstStepDash,
   .RegisterSecondStepDash,
   .RegisterThirdStepDash {
-    width: ttp(3.125);
-    height: ttp(0.25);
+    width: 50px;
+    height: 2px;
     background-color: #D1D1D1;
   }
 

package/src/i18n.js

@@ -0,0 +1,27 @@
+import {
+  dictionary,
+  locale,
+  addMessages,
+  _
+} from 'svelte-i18n';
+
+function setupI18n({ withLocale: _locale, translations }) {
+  locale.subscribe((data) => {
+    if (data == null) {
+      dictionary.set(translations);
+      locale.set(_locale);
+    }
+  }); // maybe we will need this to make sure that the i18n is set up only once
+  /*dictionary.set(translations);
+  locale.set(_locale);*/
+}
+
+function addNewMessages(lang, dict) {
+  addMessages(lang, dict);
+}
+
+function setLocale(_locale) {
+  locale.set(_locale);
+}
+
+export { _, setupI18n, addNewMessages, setLocale };

package/src/translations.js

@@ -0,0 +1,17 @@
+export const RegisterFormTranslations = {
+  en: {
+    registerForm: {
+      goToLoginButton: 'Go To Login',
+    }
+  },
+  tr: {
+    registerForm: {
+      goToLoginButton: 'Giriş Yap',
+    }
+  },
+  ro: {
+    registerForm: {
+      goToLoginButton: 'Catre Autentificare',
+    }
+  },
+};