@everymatrix/general-player-register-form-step3 0.0.129 → 0.0.133

package/src/GeneralPlayerRegisterFormStep3.svelte

@@ -5,14 +5,18 @@
 
   let invalidAddress:string = '';
   let invalidPostalCode:string = '';
-  let invalidMobile:string= '';
+  let invalidMobile:string = '';
+  let invalidCity:string = '';
+  let invalidNationality:string = '';
 
   let address:string = '';
   let postalCode:string = '';
-  let countries:Array<Object> = ['Romania', 'Greece', 'Turkey'];
+  let city:string = '';
+  let countries:Array<Object> = ['RO'];
   let countrySelected:string = countries[0];
+  let nationality:string = '';
   let mobile:string = '';
-  let mobilePrefixes:Array<Object> = ['+1', '+30', '+40'];
+  let mobilePrefixes:Array<Object> = ['+40'];
   let mobilePrefixSelected:string = mobilePrefixes[0];
   let consentOffers:Boolean = false;
   let consentOffersSms:Boolean = false;
@@ -21,15 +25,17 @@
 
   let isValid:Boolean = false;
 
+  const captchaKey = '6Lc7w8YcAAAAAEMHc_VNN9bqfVnILoUOHSHyZ0yn';
+
   const checkIsValid = () => {
-    isValid =  !(invalidAddress || invalidPostalCode || invalidMobile);
-    if (address.length <= 0 || postalCode.length <= 0 || mobile.length <= 0 || consentTerms == false) {
+    isValid =  !(invalidAddress || invalidPostalCode || invalidCity || invalidNationality || invalidMobile);
+    if (address.length <= 0 || postalCode.length <= 0 || city.length <= 0 || nationality.length <= 0 || mobile.length <= 0 || consentTerms == false) {
       isValid = false;
     }
   }
 
   const checkAddress = () => {
-    if(address) {
+    if(address && address.length <= 100) {
       return true;
     }
 
@@ -42,7 +48,7 @@
   }
 
   const checkPostalCode = () => {
-    if(postalCode) {
+    if(postalCode && postalCode.length <= 20) {
       return true;
     }
 
@@ -54,8 +60,34 @@
     checkIsValid();
   }
 
+  const checkCity = () => {
+    if(city && city.length <= 50) {
+      return true;
+    }
+
+    return false;
+  }
+
+  const validateCity = () => {
+    invalidCity = !checkCity();
+    checkIsValid();
+  }
+
+  const checkNationality = () => {
+    if(nationality) {
+      return true;
+    }
+
+    return false;
+  }
+
+  const validateNationality = () => {
+    invalidNationality = !checkNationality();
+    checkIsValid();
+  }
+
   const checkMobile = () => {
-    if(mobile) {
+    if(mobile && mobile.length >= 5 && mobile.length <= 30) {
       return true;
     }
 
@@ -102,41 +134,64 @@
     checkIsValid();
   }
 
+  const doRecaptcha = () => {
+    return new Promise((resolve, reject) => {
+      grecaptcha.ready(() => {
+        grecaptcha.execute(captchaKey, { action: "submit" }).then((token) => {
+          resolve(token);
+        });
+      });
+    });
+  }
+
   const goNext = () => {
-    let Step3Data = {
-      address,
-      postalCode,
-      countrySelected,
-      mobilePrefixSelected,
-      mobile,
-      consentOffersSms,
-      consentOffersEmail,
-      consentTerms
-    }
-    window.postMessage({ type: 'Step3', Step3Data }, window.location.href);
+    let registerStepThreeData = {};
+
+    doRecaptcha().then((token) => {
+      registerStepThreeData = {
+        address,
+        postalCode,
+        city,
+        countrySelected,
+        nationality,
+        mobilePrefixSelected,
+        mobile,
+        consentOffersSms,
+        consentOffersEmail,
+        consentTerms,
+        token
+      }
+
+      window.postMessage({ type: 'RegisterStepThree', registerStepThreeData }, window.location.href);
+    });
   }
 
   const goBack = () => {
-    let Step3Data = {
+    let registerStepThreeData = {
       address,
       postalCode,
+      city,
       countrySelected,
+      nationality,
       mobilePrefixSelected,
       mobile,
       consentOffersSms,
       consentOffersEmail,
       consentTerms
     }
-    window.postMessage({ type: 'GoBackStep3', Step3Data }, window.location.href);
+
+    window.postMessage({ type: 'GoBackStepThree', registerStepThreeData }, window.location.href);
   }
 
   const messageHandler = (e:any) => {
     if (e.data) {
       switch(e.data.type) {
-        case 'Step3DataBackup':
+        case 'StepThreeDataBackup':
           address = e.data.userData.address1;
           postalCode = e.data.userData.postalCode;
+          city = e.data.userData.city;
           countrySelected = e.data.userData.country;
+          nationality = e.data.userData.nationality;
           mobilePrefixSelected = e.data.userData.mobile.prefix;
           mobile = e.data.userData.mobile.number;
           consentOffersSms = e.data.userData.userConsents.additionalProp1;
@@ -161,6 +216,12 @@
   });
 </script>
 
+<svelte:head>
+  <script src="//www.google.com/recaptcha/api.js?render={captchaKey}" async defer></script>
+</svelte:head>
+
+<div class="g-recaptcha" data-sitekey="{captchaKey}" />
+
 <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>
@@ -173,17 +234,24 @@
       <label for="Address">Address:<span class="FormRequired">*</span></label>
       <input bind:value={address} on:blur={validateAddress} type="text" id="Address" />
       {#if invalidAddress}
-        <p class="InvalidInput">Address must be at least 1 character long.</p>
+        <p class="InvalidInput">Address must be at least 1 character long and 100 characters maximum.</p>
       {/if}
     </div>
     <div class="PostalCodeContainer {invalidPostalCode ? 'InvalidField' : ''}">
       <label for="PostalCode">Postal Code:<span class="FormRequired">*</span></label>
       <input bind:value={postalCode} on:blur={validatePostalCode} type="text" id="PostalCode" />
       {#if invalidPostalCode}
-        <p class="InvalidInput">Postal Code must be at least 1 character long.</p>
+        <p class="InvalidInput">Postal Code must be at least 1 character long and 20 characters maximum.</p>
       {/if}
     </div>
   </div>
+  <div class="CityContainer {invalidCity ? 'InvalidField' : ''}">
+    <label for="City">City:<span class="FormRequired">*</span></label>
+    <input bind:value={city} on:blur={validateCity} type="text" id="City" />
+    {#if invalidCity}
+      <p class="InvalidInput">City must be at least 1 character long and 50 characters maximum.</p>
+    {/if}
+  </div>
   <div class="CountryContainer">
     <label for="Country">Country:<span class="FormRequired">*</span></label>
     <select bind:value={countrySelected} id="Country">
@@ -192,6 +260,13 @@
       {/each}
     </select>
   </div>
+  <div class="NationalityContainer {invalidNationality ? 'InvalidField' : ''}">
+    <label for="Nationality">Nationality:<span class="FormRequired">*</span></label>
+    <input bind:value={nationality} on:blur={validateNationality} type="text" id="Nationality" />
+    {#if invalidNationality}
+      <p class="InvalidInput">Nationality must be at least 1 character long.</p>
+    {/if}
+  </div>
   <div class="MobileContainer {invalidMobile ? 'InvalidField' : ''}">
     <label for="Mobile">Mobile:<span class="FormRequired">*</span></label>
     <div class="MobileWrapper">
@@ -202,7 +277,7 @@
       </select>
       <input bind:value={mobile} on:blur={validateMobile} type="text" id="Mobile" class="MobileInput" />
       {#if invalidMobile}
-        <p class="InvalidInput">Mobile must be at least 1 character long.</p>
+        <p class="InvalidInput">Mobile must be at least 5 character long and 20 characters maximum.</p>
       {/if}
     </div>
   </div>
@@ -234,7 +309,7 @@
     </div>
   {/if}
 </div>
-<button class="RegisterStepNext" disabled={!isValid} on:click={goNext}>Next</button>
+<button class="RegisterStepNext" disabled={!isValid} on:click={goNext}>Open Account</button>
 
 <style lang="scss">
   //This function does a multiplication
@@ -273,7 +348,9 @@
 
   .AddressContainer,
   .PostalCodeContainer,
+  .CityContainer,
   .CountryContainer,
+  .NationalityContainer,
   .MobileContainer {
     color: #58586B;
     display: flex;