@everymatrix/player-profile-info 0.0.200 → 0.0.201

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/player-profile-info",
-  "version": "0.0.200",
+  "version": "0.0.201",
   "main": "dist/player-profile-info.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1575292cd20d511a1f4ebe038656d86deab2c7e0"
+  "gitHead": "71051531499cfea745b53a0f7c0a77a252990ae7"
 }

package/src/PlayerProfileInfo.svelte

@@ -3,8 +3,11 @@
 <script lang="typescript">
   import { onMount } from 'svelte';
   import { getDevice } from 'rvhelper';
+  import { _, addNewMessages, setLocale } from './i18n';
+  import { PlayerProfileTranslations } from './translations';
 
   export let endpoint:string = '';
+  export let lang:string = 'en';
 
   let isLoading:boolean = false;
   let userAgent:String = window.navigator.userAgent;
@@ -25,6 +28,9 @@
 
   let showConfirmSave: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
@@ -61,7 +67,7 @@
     currency: "EUR",
     email: "email@here.com",
     firstname: "Joe",
-    gender: "M",
+    userTitles: "M",
     lastname: "Johnson",
     mobile: {prefix: "+00", number: "00000000"},
     postalCode: "i.e.: 465531",
@@ -71,7 +77,7 @@
     username: "Username"
   };
 
-  let {address1, birth, city, country, currency, mobile, email, firstname, gender, language, lastname, postalCode, securityAnswer, securityQuestion, username, consents} = profileDetails;
+  let {address1, birth, city, country, currency, mobile, email, firstname, userTitles, language, lastname, postalCode, securityAnswer, securityQuestion, username, consents} = profileDetails;
 
   const messageHandler = (e:any) => {
     if (e.data) {
@@ -89,7 +95,7 @@
           language = profileDetails.language;
           birth = profileDetails.birth.day + '/' + profileDetails.birth.month + '/' + profileDetails.birth.year;
           currency = profileDetails.currency;
-          gender = profileDetails.gender;
+          userTitles = profileDetails.title;
           country = profileDetails.country;
           // match country code to country name
           selectedCountry = countriesArray.find(country => country.Alpha2Code === profileDetails.country);
@@ -213,6 +219,10 @@
     }
   }
 
+  const initialLoad = () => {
+    setLocale(lang);
+  }
+
   onMount(() => {
     window.addEventListener('message', messageHandler, false);
     return () => {
@@ -220,6 +230,7 @@
     }
   });
 
+  $: lang && initialLoad();
   $: endpoint && getCountriesList();
   $: endpoint && getPhoneCodes();
 </script>
@@ -236,22 +247,22 @@
           <path class="aaa" d="M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z" transform="translate(15 15) rotate(180)"/>
         </g></g>
       </svg>
-      <h2 class="MyAccountCategoryTitleMobile">Profile Info</h2>
+      <h2 class="MyAccountCategoryTitleMobile">{$_('playerProfile.title')}</h2>
     </div>
   {/if}
 
-  <h2 class="MyAccountCategoryTitle {isMobile ? 'MyAccountCategoryTitleNone' : ''}">Profile Info</h2>
+  <h2 class="MyAccountCategoryTitle {isMobile ? 'MyAccountCategoryTitleNone' : ''}">{$_('playerProfile.title')}</h2>
 
   <div class="PlayerNotificationsHeader">
-    <h3>Personal Details</h3>
+    <h3>{$_('playerProfile.personalDetails')}</h3>
   </div>
   <section class="PlayerDetailsContent">
     <div class="PlayerInfoBox">
-      <label>User name:</label>
+      <label>{$_('playerProfile.userName')}</label>
       <input type="text" class="FieldDisabled" value={username} readonly />
     </div>
     <div class="PlayerInfoBox">
-      <label>Phone:</label>
+      <label>{$_('playerProfile.userPhone')}</label>
       <div class="PlayerPhoneNumber">
         <select bind:value={playerPrefix} on:change={() => checkForChanges()}>
           {#each prefixesArray as pref}
@@ -266,86 +277,86 @@
       </div>
     </div>
     <div class="PlayerInfoBox">
-      <label>Email:</label>
+      <label>{$_('playerProfile.userEmail')}</label>
       <input type="email" class="FieldDisabled" value={email} readonly />
     </div>
     <div class="PlayerInfoBox">
-      <label>Security Question:</label>
+      <label>{$_('playerProfile.securityQuestion')}</label>
       <input type="text" bind:value={playerQuestion} on:keyup={() => checkForChanges()} placeholder={noPlayerData ? securityQuestion : ''} />
     </div>
     <div class="PlayerInfoBox">
-      <label>First name:</label>
+      <label>{$_('playerProfile.firstName')}</label>
       <input type="text" class="FieldDisabled" value={firstname} readonly />
     </div>
     <div class="PlayerInfoBox">
-      <label>Security Answer:</label>
+      <label>{$_('playerProfile.securityAnswer')}</label>
       <input type="text" bind:value={playerAnswer} on:keyup={() => checkForChanges()} placeholder={noPlayerData ? securityAnswer : ''} />
     </div>
     <div class="PlayerInfoBox">
-      <label>Last Name:</label>
+      <label>{$_('playerProfile.lastName')}</label>
       <input type="text" class="FieldDisabled" value={lastname} readonly />
     </div>
     <div class="PlayerInfoBox">
-      <label>Date of birth:</label>
+      <label>{$_('playerProfile.dateOfBirth')}</label>
     <input type="text" class="FieldDisabled" value={birth} readonly />
     </div>
     <div class="PlayerInfoBox">
-      <label>Currency:</label>
+      <label>{$_('playerProfile.currency')}</label>
       <input type="text" class="FieldDisabled" value={currency} readonly />
     </div>
     <div class="PlayerInfoBox">
-      <label>Title:</label>
-      <input type="text" class="FieldDisabled" value={gender} readonly />
+      <label>{$_('playerProfile.userTitle')}</label>
+      <input type="text" class="FieldDisabled" value={userTitles} readonly />
     </div>
   </section>
 
   <div class="PlayerLocationHeader">
-    <h3>Location Details</h3>
+    <h3>{$_('playerProfile.locationDetails')}</h3>
   </div>
   <section class="PlayerLocationContent">
     <div class="PlayerInfoBox">
-      <label>Country:</label>
+      <label>{$_('playerProfile.userCountry')}</label>
       <input type="text" class="PlayerCountry FieldDisabled" placeholder={country} value={selectedCountry.Name} readonly />
     </div>
     <div class="PlayerInfoBox">
-      <label>City:</label>
+      <label>{$_('playerProfile.userCity')}</label>
     <input bind:this={playerCity} type="text" on:keyup={() => checkForChanges()} placeholder={noPlayerData ? city : ''} value={noPlayerData ? '' : initialValuesArray.city} />
     </div>
     <div class="PlayerInfoBox">
-      <label>Address:</label>
+      <label>{$_('playerProfile.userAddress')}</label>
     <input bind:this={playerAddress} placeholder={address1} type="text" on:keyup={() => checkForChanges()} value={noPlayerData ? '' : initialValuesArray.address} />
     </div>
     <div class="PlayerInfoBox">
-      <label>Postal Code:</label>
+      <label>{$_('playerProfile.userPostalCode')}</label>
       <input bind:this={playerPostalCode} type="number" on:keyup={() => checkForChanges()} placeholder={noPlayerData ? postalCode : ''} value={noPlayerData ? '' : initialValuesArray.postalCode} />
     </div>
   </section>
 
   <div class="PlayerNotificationsHeader">
-    <h3>Notifications</h3>
+    <h3>{$_('playerProfile.userNotifications')}</h3>
   </div>
   <section class="PlayerNotificationsCheckboxArea">
     <div class="PlayerNotificationBox">
       <label for="SMSNotification">
         <input bind:checked={giveConsentSMS}  on:change={checkForChanges} type="checkbox" id="SMSNotification" name="Enable SMS notifications" />
         <span class="Checkmark"></span>
-        <span>Enable SMS notifications</span>
+        <span>{$_('playerProfile.userSMSNotification')}</span>
       </label>
     </div>
     <div class="PlayerNotificationBox">
       <label for="EmailNotification">
         <input bind:checked={giveConsentEmail} on:change={checkForChanges} type="checkbox" id="EmailNotification" name="Enable Emails" />
         <span class="Checkmark"></span>
-        <span>Enable Emails</span>
+        <span>{$_('playerProfile.userEmailNotification')}</span>
       </label>
     </div>
   </section>
   <section class="PlayerDetailsButtonsArea {isMobile ? 'PlayerDetailsButtonsAreaMobile' : ''}">
-    <div class="PlayerDetailsSaveButton {differencesExist  && isValid ? '' : 'PlayerButtonDisabled'}" on:click={() => updatePlayerInfo()}>Save Changes</div>
+    <div class="PlayerDetailsSaveButton {differencesExist  && isValid ? '' : 'PlayerButtonDisabled'}" on:click={() => updatePlayerInfo()}>{$_('playerProfile.userProfileSaveChanges')}</div>
   </section>
   {#if showConfirmSave}
     <section class="PlayerDetailsConfirmSave">
-      <p class="PlayerDetailsConfirmSaveText">Your changes have been saved!</p>
+      <p class="PlayerDetailsConfirmSaveText">{$_('playerProfile.userProfileConfirmationMessage')}</p>
     </section>
   {/if}
 </form>

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,54 @@
+export const PlayerProfileTranslations = {
+  en: {
+    playerProfile: {
+      title: `Profile Info`,
+      personalDetails: `Personal Details`,
+      userName: `User name:`,
+      userPhone: `Phone:`,
+      userEmail: `Email:`,
+      securityQuestion: `Security Question:`,
+      firstName: `First name:`,
+      securityAnswer: `Security Answer:`,
+      lastName: `Last Name:`,
+      dateOfBirth: `Date of birth:`,
+      currency: `Currency:`,
+      userTitle: `Title:`,
+      locationDetails: `Location Details`,
+      userCountry: `Country:`,
+      userCity: `City:`,
+      userAddress: `Address:`,
+      userPostalCode: `Postal Code:`,
+      userNotifications: `Notifications`,
+      userSMSNotification: `Enable SMS notifications`,
+      userEmailNotification: `Enable Emails`,
+      userProfileSaveChanges: `Save Changes`,
+      userProfileConfirmationMessage: `Your changes have been saved!`
+    }
+  },
+  ro: {
+    playerProfile: {
+      title: `Profile Info`,
+      personalDetails: `Personal Details`,
+      userName: `User name:`,
+      userPhone: `Phone:`,
+      userEmail: `Email:`,
+      securityQuestion: `Security Question:`,
+      firstName: `First name:`,
+      securityAnswer: `Security Answer:`,
+      lastName: `Last Name:`,
+      dateOfBirth: `Date of birth:`,
+      currency: `Currency:`,
+      userTitle: `Title:`,
+      locationDetails: `Location Details`,
+      userCountry: `Country:`,
+      userCity: `City:`,
+      userAddress: `Address:`,
+      userPostalCode: `Postal Code:`,
+      userNotifications: `Notifications`,
+      userSMSNotification: `Enable SMS notifications`,
+      userEmailNotification: `Enable Emails`,
+      userProfileSaveChanges: `Save Changes`,
+      userProfileConfirmationMessage: `Your changes have been saved!`
+    }
+  }
+};