@everymatrix/player-profile-info 0.0.199 → 0.0.203

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/player-profile-info",
-  "version": "0.0.199",
+  "version": "0.0.203",
   "main": "dist/player-profile-info.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "92884caad124fb581a2825d771ad76a424b2c98c"
+  "gitHead": "31d7d9eeef7e68b954b83fb3dde25db05d8edf74"
 }

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;
@@ -23,8 +26,15 @@
   let prefixesArray:Array<Object> = [];
   let countriesArray:Array<Object> = []
 
+  let invalidCity:string = '';
+  let invalidPostalCode:string = '';
+  let invalidAddress:string = '';
+
   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 +71,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 +81,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 +99,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);
@@ -153,7 +163,7 @@
   let isValid:Boolean = false;
 
   const checkIsValid = () => {
-    if (playerQuestion.length <= 0 || playerAnswer.length <= 0 ||  !playerCity.value ||  !playerAddress.value ||  !playerPostalCode.value ||  playerMobileNumber.length <= 0) {
+    if (playerQuestion.length <= 0 || playerAnswer.length <= 0 ||  invalidCity ||  invalidAddress ||  invalidPostalCode ||  playerMobileNumber.length <= 0) {
       isValid = false;
     }
     else {
@@ -161,6 +171,45 @@
     }
   }
 
+  const checkCity = () => {
+    if(playerCity.value && playerCity.value.length <= 50) {
+      return true;
+    }
+
+    return false;
+  }
+
+  const validateCity = () => {
+    invalidCity = !checkCity();
+    checkIsValid();
+  }
+
+  const checkPostalCode = () => {
+    if(playerPostalCode.value && playerPostalCode.value.length <= 20) {
+      return true;
+    }
+
+    return false;
+  }
+
+  const validatePostalCode = () => {
+    invalidPostalCode = !checkPostalCode();
+    checkIsValid();
+  }
+
+  const checkAddress = () => {
+    if(playerAddress.value && playerAddress.value.length <= 100) {
+      return true;
+    }
+
+    return false;
+  }
+
+  const validateAddress = () => {
+    invalidAddress = !checkAddress();
+    checkIsValid();
+  }
+
   const updatePlayerInfo = () => {
     if (differencesExist == true && isValid == true) {
       window.postMessage({ type: 'UpdatePlayerInfo', provisionalArray }, window.location.href);
@@ -213,6 +262,10 @@
     }
   }
 
+  const initialLoad = () => {
+    setLocale(lang);
+  }
+
   onMount(() => {
     window.addEventListener('message', messageHandler, false);
     return () => {
@@ -220,6 +273,7 @@
     }
   });
 
+  $: lang && initialLoad();
   $: endpoint && getCountriesList();
   $: endpoint && getPhoneCodes();
 </script>
@@ -236,22 +290,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 +320,95 @@
       </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>
-    <input bind:this={playerCity} type="text" on:keyup={() => checkForChanges()} placeholder={noPlayerData ? city : ''} value={noPlayerData ? '' : initialValuesArray.city} />
+    <div class="PlayerInfoBox {invalidCity ? 'InvalidField' : ''}">
+      <label>{$_('playerProfile.userCity')}</label>
+      <input bind:this={playerCity} type="text" on:blur={validateCity} on:keyup={() => checkForChanges()} placeholder={noPlayerData ? city : ''} value={noPlayerData ? '' : initialValuesArray.city} />
+      {#if invalidCity}
+        <p class="InvalidInput">City must be at least 1 character long and 50 characters maximum.</p>
+      {/if}
     </div>
-    <div class="PlayerInfoBox">
-      <label>Address:</label>
-    <input bind:this={playerAddress} placeholder={address1} type="text" on:keyup={() => checkForChanges()} value={noPlayerData ? '' : initialValuesArray.address} />
+    <div class="PlayerInfoBox {invalidAddress ? 'InvalidField' : ''}">
+      <label>{$_('playerProfile.userAddress')}</label>
+    <input bind:this={playerAddress} placeholder={address1} type="text" on:blur={validateAddress} on:keyup={() => checkForChanges()} value={noPlayerData ? '' : initialValuesArray.address} />
+      {#if invalidAddress}
+        <p class="InvalidInput">Address must be at least 1 character long and 100 characters maximum.</p>
+      {/if}
     </div>
-    <div class="PlayerInfoBox">
-      <label>Postal Code:</label>
-      <input bind:this={playerPostalCode} type="number" on:keyup={() => checkForChanges()} placeholder={noPlayerData ? postalCode : ''} value={noPlayerData ? '' : initialValuesArray.postalCode} />
+    <div class="PlayerInfoBox {invalidPostalCode ? 'InvalidField' : ''}">
+      <label>{$_('playerProfile.userPostalCode')}</label>
+      <input bind:this={playerPostalCode} type="number" on:blur={validatePostalCode} on:keyup={() => checkForChanges()} placeholder={noPlayerData ? postalCode : ''} value={noPlayerData ? '' : initialValuesArray.postalCode} />
+      {#if invalidPostalCode}
+        <p class="InvalidInput">Postal Code must be at least 1 character long and 20 characters maximum.</p>
+      {/if}
     </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>
@@ -436,6 +499,22 @@
         box-shadow: 0 0 0 1pt #D0046C;
       }
     }
+
+    &.InvalidField {
+      input {
+        border: 1px solid #FD2839;
+        background: #FFF1F1;
+        color: #FD2839;
+      }
+    }
+
+    .InvalidInput {
+      color: #FD2839;
+      font-size: 10px;
+      line-height: 10px;
+    }
+
+
     .FieldDisabled {
       opacity: 0.5;
     }

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: `Informații profil`,
+      personalDetails: `Detalii Personale`,
+      userName: `Nume utilizator:`,
+      userPhone: `Telefon:`,
+      userEmail: `E-mail:`,
+      securityQuestion: `Întrebare securitate:`,
+      firstName: `Prenume:`,
+      securityAnswer: `Răspuns securitate:`,
+      lastName: `Nume:`,
+      dateOfBirth: `Data nașterii:`,
+      currency: `Monedă:`,
+      userTitle: `Titlu:`,
+      locationDetails: `Detalii de Localizare`,
+      userCountry: `Țară:`,
+      userCity: `Oraș:`,
+      userAddress: `Adresă:`,
+      userPostalCode: `Cod poștal:`,
+      userNotifications: `Notificări`,
+      userSMSNotification: `Activează notificări prin SMS`,
+      userEmailNotification: `Activează notificări prin E-mail`,
+      userProfileSaveChanges: `Salvează`,
+      userProfileConfirmationMessage: `Modificările au fost salvate!`
+    }
+  }
+};