@everymatrix/general-player-register-form 0.0.212 → 0.0.216

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/general-player-register-form",
-  "version": "0.0.212",
+  "version": "0.0.216",
   "main": "dist/general-player-register-form.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "899faeb0029947feb81828796644ba54ec467e1d"
+  "gitHead": "f79846c393d362de102942d0410087389246073b"
 }

package/src/GeneralPlayerRegisterForm.svelte

@@ -1,8 +1,10 @@
 <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';
 
   import '@everymatrix/general-player-register-form-step1';
   import '@everymatrix/general-player-register-form-step2';
@@ -15,6 +17,7 @@
   export let session:string = '';
   export let trackedanalyticsdata:string = '';
   export let captchakey:string = '';
+  export let lang:string = '';
 
   let isLoading:boolean = false;
 
@@ -41,6 +44,12 @@
 
   let scrollSteps:HTMLElement;
 
+  // setupI18n({ withLocale: 'en', translations: {}});
+
+  Object.keys(RegisterFormTranslations).forEach((item:any) => {
+    addNewMessages(item, RegisterFormTranslations[item]);
+  });
+
   const verifyUserConsents = () => {
     fetch(`${endpoint}/player/consentRequirements`)
       .then((res:any) => res.json())
@@ -199,6 +208,10 @@
     window.postMessage({ type: "ToLogin" }, window.location.href);
   }
 
+  const initialLoad = () => {
+    setLocale(lang);
+  }
+
   onMount(() => {
     verifyUserConsents();
     getCmsData();
@@ -210,6 +223,7 @@
   });
 
 $: playerid && session;
+$: lang && initialLoad();
 </script>
 
 {#if isLoading}
@@ -229,17 +243,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} />
         </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 +262,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>

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',
+    }
+  },
+};