@everymatrix/general-player-register-form-step2 0.0.249 → 0.0.252

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/general-player-register-form-step2",
-  "version": "0.0.249",
+  "version": "0.0.252",
   "main": "dist/general-player-register-form-step2.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "38af455e241b6ef7ccabb2367be2be59e6b24352"
+  "gitHead": "6824e7c03c551fb8c35921b8846fdbbb49f76169"
 }

package/src/GeneralPlayerRegisterFormStep2.svelte

@@ -12,6 +12,7 @@
 
   let invalidFirstName:boolean = false;
   let invalidLastName:boolean = false;
+  let invalidBirthDate:boolean = false;
   let invalidBirthPlace:boolean = false;
 
   let userTitleSelected:string;
@@ -29,6 +30,7 @@
   let currentDate:Date = new Date();
   let minDate:number;
   let maxDate:number;
+  let yearsDifference:string;
 
   let isValid:boolean = false;
   let isLoading:boolean = true;
@@ -50,6 +52,15 @@
     isLoading = false;
   }
 
+  const validateBirthDate = ():void => {
+    if (birthYearSelected && birthMonthSelected && birthDaySelected) {
+      yearsDifference = moment(currentDate.setDate(currentDate.getDate())).diff(moment(`${birthYearSelected}-${birthMonthSelected}-${birthDaySelected}`, 'YYYY-MM-DD'), 'years').toString();
+      invalidBirthDate = (yearsDifference < licenseyears);
+    }
+
+    checkIsValid();
+  }
+
   const getCurrencies = ():void => {
     fetch(`${endpoint}/player/operatorSupportedCurrencies`)
       .then((res:any) => res.json())
@@ -63,7 +74,7 @@
   }
 
   const checkIsValid = ():void => {
-    isValid =  !(invalidFirstName || invalidLastName || invalidBirthPlace);
+    isValid =  !(invalidFirstName || invalidLastName || invalidBirthDate || invalidBirthPlace);
 
     if (userFirstName.length <= 0 || userLastName.length <= 0 || birthPlace.length <= 0 || !userTitleSelected || !birthDaySelected || !birthMonthSelected || !birthYearSelected) {
       isValid = false;
@@ -179,7 +190,7 @@
 <div class="RegisterFormContent" part="RegisterFormContent">
   <div class="UserTitleContainer" part="UserTitleContainer">
     <label for="Title">{$_('registerFormStep2.registerUserTitle')}:<span class="FormRequired" part="FormRequired">*</span></label>
-    <select bind:value={userTitleSelected} on:blur={checkIsValid} id="Title">
+    <select bind:value={userTitleSelected} on:change={checkIsValid} id="Title">
       <option value="" disabled selected>{$_('registerFormStep2.registerUserTitleSelect')}</option>
       <option value="Mr.">{$_('registerFormStep2.registerUserTitleSelectMr')}</option>
       <option value="Mrs.">{$_('registerFormStep2.registerUserTitleSelectMrs')}</option>
@@ -201,21 +212,21 @@
     {/if}
   </div>
   <div class="BirthDateContainer" part="BirthDateContainer">
-    <label for="BirthDate">{$_('registerFormStep2.registerDateOfBirth')}:<span class="FormRequired" part="FormRequired">*</span></label>
+    <label>{$_('registerFormStep2.registerDateOfBirth')}:<span class="FormRequired" part="FormRequired">*</span></label>
     <div class="BirthDateOptions" part="BirthDateOptions">
-      <select bind:value={birthDaySelected} on:blur={checkIsValid} class="BirthDaySelected" part="BirthDaySelected">
+      <select bind:value={birthDaySelected} on:change={validateBirthDate} class="BirthDaySelected" part="BirthDaySelected">
         <option value="" disabled selected>{$_('registerFormStep2.registerBirthDay')}</option>
         {#each birthDays as birthDay}
           <option value={birthDay}>{birthDay}</option>
         {/each}
       </select>
-      <select bind:value={birthMonthSelected} on:blur={checkIsValid} class="BirthMonthSelected" part="BirthMonthSelected">
+      <select bind:value={birthMonthSelected} on:change={validateBirthDate} class="BirthMonthSelected" part="BirthMonthSelected">
         <option value="" disabled selected>{$_('registerFormStep2.registerBirthMonth')}</option>
         {#each birthMonths as birthMonth}
           <option value={birthMonth}>{birthMonth}</option>
         {/each}
       </select>
-      <select bind:value={birthYearSelected} on:blur={checkIsValid} class="BirthYearSelected" part="BirthYearSelected">
+      <select bind:value={birthYearSelected} on:change={validateBirthDate} class="BirthYearSelected" part="BirthYearSelected">
         <option value="" disabled selected>{$_('registerFormStep2.registerBirthYear')}</option>
         {#if !isLoading}
           {#each birthYears as birthYear}
@@ -223,6 +234,9 @@
           {/each}
         {/if}
       </select>
+      {#if invalidBirthDate}
+        <p class="InvalidInput" part="InvalidInput">{$_('registerFormStep2.registerBirthDateError', { values: { licenseyears: licenseyears}})}</p>
+      {/if}
     </div>
   </div>
   <div class="BirthPlaceContainer {invalidBirthPlace ? 'InvalidField' : ''}" part="BirthPlaceContainer {invalidBirthPlace ? 'InvalidField' : ''}">

package/src/translations.js

@@ -15,6 +15,7 @@ export const RegisterFormStep2Translations = {
       registerBirthDay: 'Day',
       registerBirthMonth: 'Month',
       registerBirthYear: 'Year',
+      registerBirthDateError: `The minimum registratione age is {licenseyears} years.`,
       registerBirthPlace: 'Birth Place',
       registerBirthPlaceError: 'Birth place must be at least 1 character long.',
       registerCurrency: 'Currency',
@@ -37,6 +38,7 @@ export const RegisterFormStep2Translations = {
       registerBirthDay: 'Gün',
       registerBirthMonth: 'Ay',
       registerBirthYear: 'Yıl',
+      registerBirthDateError: `Minimum kayıt yaşı {licenseyears} yıllar.`,
       registerBirthPlace: 'Doğum yeri',
       registerBirthPlaceError: 'Doğum yeri en az 1 karakter uzunluğunda olmalıdır.',
       registerCurrency: 'Para birimi',
@@ -59,6 +61,7 @@ export const RegisterFormStep2Translations = {
       registerBirthDay: 'Zi',
       registerBirthMonth: 'Luna',
       registerBirthYear: 'An',
+      registerBirthDateError: `Varsta minima pentru inregistrare este de {licenseyears} ani.`,
       registerBirthPlace: 'Locule nasterii',
       registerBirthPlaceError: 'Locul nasterii trebuie sa contina minim o litera',
       registerCurrency: 'Moneda',