@everymatrix/general-player-register-form-step2 0.0.213 → 0.0.217

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/general-player-register-form-step2",
-  "version": "0.0.213",
+  "version": "0.0.217",
   "main": "dist/general-player-register-form-step2.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0b49e65f747ec6eaac6ca9d4a4e7ee9702980bfc"
+  "gitHead": "eece4cbb47122ec254298d89beb7fdb184124cdc"
 }

package/src/GeneralPlayerRegisterFormStep2.svelte

@@ -1,9 +1,14 @@
 <svelte:options tag={null} />
 
-<script lang="typescript">
+<script lang="ts">
   import { onMount } from "svelte";
+  import moment from 'moment';
+  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
+  import { RegisterFormStep2Translations } from './translations';
 
   export let endpoint:string = '';
+  export let lang:string = '';
+  export let licenseyears:string = '';
 
   let invalidFirstName:boolean = false;
   let invalidLastName:boolean = false;
@@ -17,14 +22,34 @@
   let birthDaySelected:number = birthDays[0];
   let birthMonths:Array<Object> = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
   let birthMonthSelected:number = birthMonths[0];
-  let birthYears:Array<Object> = [1999, 1998, 1997, 1996, 1995, 1994, 1993, 1992, 1991, 1990, 1989, 1988, 1987, 1986, 1985, 1984, 1983, 1982, 1981, 1980, 1979];
-  let birthYearSelected:number = birthYears[0];
+  let birthYears:Array<Object> = [];
+  let birthYearSelected:number;
   let birthPlace:string = '';
   let currencies:Array<Object> = [];
   let currencySelected:string = '';
+  let currentDate:Date = new Date();
+  let minDate:string;
+  let maxDate:string;
 
   let isValid:Boolean = false;
 
+  // setupI18n({ withLocale: 'en', translations: {}});
+
+  Object.keys(RegisterFormStep2Translations).forEach((item:any) => {
+    addNewMessages(item, RegisterFormStep2Translations[item]);
+  });
+
+  const createYearsArray = () => {
+    maxDate = moment(currentDate.setDate(currentDate.getDate())).subtract(parseInt(licenseyears), 'y').format('YYYY');
+    minDate = moment(currentDate.setDate(currentDate.getDate())).subtract(100 + parseInt(licenseyears), 'y').format('YYYY');
+
+    birthYearSelected = parseInt(maxDate);
+
+    for(let i=maxDate; i>=minDate; i--) {
+      birthYears.push(i);
+    }
+  }
+
   const getCurrencies = () => {
     fetch(`${endpoint}/player/operatorSupportedCurrencies`)
       .then((res:any) => res.json())
@@ -130,6 +155,10 @@
     }
   }
 
+  const initialLoad = () => {
+    setLocale(lang);
+  }
+
   onMount(() => {
     window.addEventListener('message', messageHandler, false);
 
@@ -139,17 +168,19 @@
   });
 
   $: endpoint && getCurrencies();
+  $: lang && initialLoad();
+  $: licenseyears && createYearsArray();
 </script>
 
 <div class="RegisterFormHeader">
   <button class="BackButton" on:click={goBack}>
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.a{fill:#d0046c;}</style></defs><path class="a" d="M12,0,9.818,2.182l8.26,8.26H0v3.117H18.078l-8.26,8.26L12,24,24,12Z" transform="translate(24 24) rotate(180)"/></svg>
-    Back
+    {$_('registerFormStep2.registerBackButton')}
   </button>
 </div>
 <div class="RegisterFormContent">
   <div class="UserTitleContainer">
-    <label for="Title">Title:<span class="FormRequired">*</span></label>
+    <label for="Title">{$_('registerFormStep2.registerUserTitle')}:<span class="FormRequired">*</span></label>
     <select bind:value={userTitleSelected} id="Title">
       {#each userTitles as userTitle}
         <option value="{userTitle}">{userTitle}</option>
@@ -157,21 +188,21 @@
     </select>
   </div>
   <div class="FirstNameContainer {invalidFirstName ? 'InvalidField' : ''}">
-    <label for="FirstName">First Name:<span class="FormRequired">*</span></label>
+    <label for="FirstName">{$_('registerFormStep2.registerFirstName')}:<span class="FormRequired">*</span></label>
     <input bind:value={userFirstName} on:blur={validateUserFirstName} type="text" id="FirstName" />
     {#if invalidFirstName}
-      <p class="InvalidInput">First name must be at least 2 characters long and contain no special characters.</p>
+      <p class="InvalidInput">{$_('registerFormStep2.registerFirstNameError')}</p>
     {/if}
   </div>
   <div class="LastNameContainer {invalidLastName ? 'InvalidField' : ''}">
-    <label for="LastName">Last Name:<span class="FormRequired">*</span></label>
+    <label for="LastName">{$_('registerFormStep2.registerLastName')}:<span class="FormRequired">*</span></label>
     <input bind:value={userLastName} on:blur={validateUserLastName} type="text" id="LastName" />
     {#if invalidLastName}
-      <p class="InvalidInput">Last name must be at least 2 characters long and contain no special characters.</p>
+      <p class="InvalidInput">{$_('registerFormStep2.registerLastNameError')}</p>
     {/if}
   </div>
   <div class="BirthDateContainer">
-    <label for="BirthDate">Date of Birth:<span class="FormRequired">*</span></label>
+    <label for="BirthDate">{$_('registerFormStep2.registerDateOfBirth')}:<span class="FormRequired">*</span></label>
     <div class="BirthDateOptions">
       <select bind:value={birthDaySelected} class="BirthDaySelected">
         {#each birthDays as birthDay}
@@ -191,14 +222,14 @@
     </div>
   </div>
   <div class="BirthPlaceContainer {invalidBirthPlace ? 'InvalidField' : ''}">
-    <label for="BirthPlace">Birth Place:<span class="FormRequired">*</span></label>
+    <label for="BirthPlace">{$_('registerFormStep2.registerBirthPlace')}:<span class="FormRequired">*</span></label>
     <input bind:value={birthPlace} on:keyup={validateBirthPlace} type="text" id="BirthPlace" />
     {#if invalidBirthPlace}
-      <p class="InvalidInput">Birth place must be at least 1 character long.</p>
+      <p class="InvalidInput">{$_('registerFormStep2.registerBirthPlaceError')}</p>
     {/if}
   </div>
   <div class="CurrencyContainer">
-    <label for="Currency">Currency:<span class="FormRequired">*</span></label>
+    <label for="Currency">{$_('registerFormStep2.registerCurrency')}:<span class="FormRequired">*</span></label>
     <select bind:value={currencySelected} id="Currency">
       {#each currencies as currency}
         <option value={currency}>{currency}</option>
@@ -206,7 +237,7 @@
     </select>
   </div>
 </div>
-<button class="RegisterStepNext" disabled={!isValid} on:click={goNext}>Next</button>
+<button class="RegisterStepNext" disabled={!isValid} on:click={goNext}>{$_('registerFormStep2.registerNext')}</button>
 
 <style lang="scss">
   //This function does a multiplication

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,47 @@
+export const RegisterFormStep2Translations = {
+  en: {
+    registerFormStep2: {
+      registerBackButton: 'Back',
+      registerUserTitle: 'Title',
+      registerFirstName: 'First Name',
+      registerFirstNameError: 'First name must be at least 2 characters long and contain no special characters.',
+      registerLastName: 'Last Name',
+      registerLastNameError: 'Last name must be at least 2 characters long and contain no special characters.',
+      registerDateOfBirth: 'Date of Birth',
+      registerBirthPlace: 'Birth Place',
+      registerBirthPlaceError: 'Birth place must be at least 1 character long.',
+      registerCurrency: 'Currency',
+      registerNext: 'Next'
+    }
+  },
+  tr: {
+    registerFormStep2: {
+      registerBackButton: 'Geri',
+      registerUserTitle: 'Başlık',
+      registerFirstName: 'İlk adı',
+      registerFirstNameError: 'Ad en az 2 karakter uzunluğunda olmalı ve özel karakter içermemelidir.',
+      registerLastName: 'Soyadı',
+      registerLastNameError: 'Soyadı en az 2 karakter uzunluğunda olmalı ve özel karakter içermemelidir.',
+      registerDateOfBirth: 'Doğum tarihi',
+      registerBirthPlace: 'Doğum yeri',
+      registerBirthPlaceError: 'Doğum yeri en az 1 karakter uzunluğunda olmalıdır.',
+      registerCurrency: 'Para birimi',
+      registerNext: 'Sonraki'
+    }
+  },
+  ro: {
+    registerFormStep2: {
+      registerBackButton: 'Inapoi',
+      registerUserTitle: 'Titlu',
+      registerFirstName: 'Prenume',
+      registerFirstNameError: 'Prenumele trebuie sa fie de minim 2 litere si sa nu contina caractere speciale.',
+      registerLastName: 'Nume',
+      registerLastNameError: 'Numele trebuie sa fie de minim 2 litere si sa nu contina caractere speciale',
+      registerDateOfBirth: 'Data Nasterii',
+      registerBirthPlace: 'Locule nasterii',
+      registerBirthPlaceError: 'Locul nasterii trebuie sa contina minim o litera',
+      registerCurrency: 'Moneda',
+      registerNext: 'Urmatorul'
+    }
+  },
+};