@everymatrix/general-player-register-form 0.0.118 → 0.0.122

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/general-player-register-form",
-  "version": "0.0.118",
+  "version": "0.0.122",
   "main": "index.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2b3a5975cb7b7356688a245141561f45cc075eaa"
+  "gitHead": "974bc1c7b1767d96828ec1b85d35e27a622c9a63"
 }

package/src/GeneralPlayerRegisterForm.svelte

@@ -1,33 +1,184 @@
 <svelte:options tag={null} />
 
 <script lang="typescript">
+  import { getDevice } from 'rvhelper';
+  import { onMount } from "svelte";
+
+  import '@everymatrix/general-player-register-form-step1';
+  import '@everymatrix/general-player-register-form-step2';
+  import '@everymatrix/general-player-register-form-step3';
+
   let isLoading:boolean = false;
+
+  let showRegisterStep1:Boolean = true;
+  let showRegisterStep2:Boolean = false;
+  let showRegisterStep3:Boolean = false;
+  let showConfirmation:Boolean = false;
+
+  let profileUrl = 'https://demo-api.stage.norway.everymatrix.com/v1/player/';
+  let userAgent:String = window.navigator.userAgent;
+  let isMobile = (getDevice(userAgent) === 'PC') ? false : true;
+
+  let userData:any = {};
+  let step2Visited:Boolean = false;
+  let step3Visited:Boolean = false;
+
+  export let playerid;
+  export let session;
+
+  const createData = (step:string, data:any) => {
+    if (step === 'Step1') {
+      userData.email = data.userEmail;
+      userData.username = data.userValue;
+      userData.password = data.userPassword;
+      userData.securityQuestion = data.securityQuestion;
+      userData.securityAnswer = data.securityAnswer;
+    }
+    if (step === 'Step2') {
+      userData.gender = data.userGenderSelected;
+      userData.firstname = data.userFirstName;
+      userData.lastname = data.userLastName;
+      userData.birth = {};
+      userData.birth.day = data.birthDaySelected;
+      userData.birth.month = data.birthMonthSelected;
+      userData.birth.year = data.birthYearSelected;
+      userData.currency = data.currencySelected;
+    }
+    if (step === 'Step3') {
+      userData.address1 = data.address;
+      userData.postalCode = data.postalCode;
+      userData.country = data.countrySelected;
+      userData.mobile = {};
+      userData.mobile.prefix = data.mobilePrefixSelected;
+      userData.mobile.number = data.mobile;
+      userData.userConsents = {};
+      userData.userConsents.additionalProp1 = data.consentOffersSms;
+      userData.userConsents.additionalProp2 = data.consentOffersEmail;
+      userData.userConsents.additionalProp3 = data.consentTerms;
+    }
+  }
+
+  const messageHandler = (e:any) => {
+    if (e.data) {
+      switch(e.data.type) {
+        case 'Step1':
+          createData('Step1', e.data.Step1Data);
+          showRegisterStep1 = false;
+          showRegisterStep2 = true;
+          if (step2Visited == false) {
+            step2Visited = true;
+          } else {
+            window.postMessage({ type: 'Step2DataBackup', userData }, window.location.href);
+          }
+          break;
+
+        case 'Step2':
+          createData('Step2', e.data.Step2Data);
+          showRegisterStep2 = false;
+          showRegisterStep3 = true;
+          if (step3Visited == false) {
+            step3Visited = true;
+          } else {
+            window.postMessage({ type: 'Step3DataBackup', userData }, window.location.href);
+          }
+          break;
+
+        case 'Step3':
+          createData('Step3', e.data.Step3Data);
+          showRegisterStep3 = false;
+          getData(userData);
+          break;
+
+        case 'GoBackStep2':
+          createData('Step2', e.data.Step2Data);
+          showRegisterStep1 = true;
+          showRegisterStep2 = false;
+          window.postMessage({ type: 'Step1DataBackup', userData }, window.location.href);
+          break;
+
+        case 'GoBackStep3':
+          createData('Step3', e.data.Step3Data);
+          showRegisterStep2 = true;
+          showRegisterStep3 = false;
+          window.postMessage({ type: 'Step2DataBackup', userData }, window.location.href);
+          break;
+
+        default:
+          // do nothing
+          break;
+      }
+    }
+  }
+
+  const getData = (userData:any) => {
+    let sendRegistrationData = {
+      method: "PUT",
+      headers: {
+        'g-recaptcha-response': "",
+        'Content-Type': "application/json",
+        'Accept': 'application/json',
+      },
+      body: JSON.stringify(userData)
+    };
+    fetch(`${profileUrl}/register`, sendRegistrationData)
+    .then((res:any) => {
+      if (res.status == 200) {
+        showConfirmation = true;
+      } else {
+        console.error('Error on registration');
+      }
+    });
+  }
+
+
+  onMount(() => {
+    window.addEventListener('message', messageHandler, false);
+
+    return () => {
+      window.removeEventListener('message', messageHandler);
+    }
+  });
+
+$: playerid && session;
 </script>
 
 {#if isLoading}
   <div class="ModalLoader"></div>
 {:else}
-  <p>Register form content here</p>
+  <div class="RegisterFormWrapper">
+    {#if !isMobile}
+      <div class="RegisterFormImage"></div>
+    {/if}
+    <div class="RegisterFormContainer {isMobile ? 'RegisterFormContainerMobile' : ''}">
+      {#if showRegisterStep1}
+        <div class="RegisterFormStep1">
+          <general-player-register-form-step1 />
+        </div>
+      {/if}
+      {#if showRegisterStep2}
+        <div class="RegisterFormStep2">
+          <general-player-register-form-step2 />
+        </div>
+      {/if}
+      {#if showRegisterStep3}
+        <div class="RegisterFormStep3">
+          <general-player-register-form-step3 />
+        </div>
+      {/if}
+      {#if showConfirmation}
+        <div class="RegisterConfirmation">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.95 51"><defs><style>.a{fill:#16ce16;}</style></defs><path class="a" d="M29.325,51,0,21.675l5.95-5.95,23.375,22.95L68,0l5.95,5.95Z"/></svg>
+          <h2 class="RegisterConfirmationTitle">Success!</h2>
+          <p class="RegisterConfirmationSubtitle">The process has been completed successfully.<br/>Please follow the instructions in the email we just sent you.</p>
+          <p class="RegisterConfirmationNote">In case you don't receive the email with the instructions on how to recover your password within the next 1-2 minutes, you can get in touch with us via phone, email or Live Chat.</p>
+          <p class="RegisterConfirmationNote">Some free email providers (hotmail or yahoo) might place the email in the Junk or Trash folder, so you might need to check there to retrieve it</p>
+        </div>
+      {/if}
+    </div>
+  </div>
 {/if}
 
 <style lang="scss">
-  *,
-  *::before,
-  *::after {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    text-decoration: none;
-    outline: none;
-    box-sizing: border-box;
-    font-family: "Helvetica Neue", "Helvetica", sans-serif;
-  }
-
-  .general-player-register-form {
-    background: #000;
-    color: #fff;
-  }
-
   //This function does a multiplication
   // in order to work with px the
   // same way as working with em
@@ -35,4 +186,62 @@
     $multiplicator: 16px;
     @return $value * $multiplicator;
   }
+
+  .RegisterFormWrapper {
+    background: #F9F8F8;
+    display: inline-flex;
+    width: 100%;
+  }
+
+  .RegisterFormImage,
+  .RegisterFormContainer {
+    flex: 1 1 100%;
+    padding: ttp(3.125);
+    &.RegisterFormContainerMobile {
+      padding: ttp(0.625);
+    }
+  }
+
+  .RegisterStepNext {
+    color: #fff;
+    background: #D0046C;
+    border: 1px solid #D0046C;
+    border-radius: 5px;
+    width: 100%;
+    height: ttp(3.75);
+    padding: 0;
+    text-transform: uppercase;
+    font-size: ttp(1.125);
+    cursor: pointer;
+    margin-top: ttp(1.5);
+  }
+
+  .RegisterConfirmation {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    svg {
+      width: ttp(4.625);
+    }
+    .RegisterConfirmationTitle {
+      color: #16CE16;
+      font-size: ttp(1.5);
+      font-weight: 400;
+      text-transform: uppercase;
+      margin-bottom: 0;
+    }
+    .RegisterConfirmationSubtitle {
+      color: #58586B;
+      font-size: ttp(1);
+      line-height: ttp(1.2);
+      margin-bottom: ttp(1.5);
+    }
+    .RegisterConfirmationNote {
+      color: #000000;
+      font-size: ttp(1.1);
+      line-height: ttp(1.4);
+    }
+  }
 </style>