@everymatrix/general-player-register-form 1.0.15 → 1.0.69

package/src/GeneralPlayerRegisterForm.svelte

@@ -1,590 +0,0 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { getDevice } from 'rvhelper';
-  import { onMount } from "svelte";
-  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
-  import { RegisterFormTranslations } from './translations';
-
-  // Native bridge
-  import { isNative, call as callNative, registerEventListener as registerNativeEventListener } from 'js-native-bridge';
-
-  import '@everymatrix/general-player-register-form-step1';
-  import '@everymatrix/general-player-register-form-step2';
-  import '@everymatrix/general-player-register-form-step3';
-  import '@everymatrix/general-player-sms-verification-form';
-
-  export let endpoint:string = '';
-  export let cmsendpoint:string = '';
-  export let env:string = '';
-  export let imagedesktop:string = '';
-  export let session:string = '';
-  export let trackedanalyticsdata:string = '';
-  export let captchakey:string = '';
-  export let lang:string = '';
-  export let licenseyears:string = '';
-  export let disabledfields:string = '';
-  export let dummydata:string = '';
-  export let smsverification = 'false';
-  export let simplepasswordvalidation:string = 'false';
-  export let userroles:string = '';
-  export let translationUrl:string = '';
-
-  let isLoading:boolean = false;
-
-  let disabledFieldsList:Array<string> = [];
-
-  let playerid:string = '';
-  let showRegisterStepOne:boolean = true;
-  let showRegisterStepTwo:boolean = false;
-  let showRegisterStepThree:boolean = false;
-  let showSmsVerification: boolean = false;
-  let showConfirmation:boolean = false;
-  let cmsData:any;
-  let showError:boolean = false;
-
-  let accountCreationTitle:string = '';
-  let accountCreationSubTitle:string = '';
-  let accountCreationMessage:string = '';
-  let image:Object = {};
-
-  let userAgent:string = window.navigator.userAgent;
-  let isMobile:boolean = (getDevice(userAgent) === 'PC') ? false : true;
-
-  // @TODO typescript model type for userData
-  let userData:any = {};
-  let stepTwoVisited:boolean = false;
-  let stepThreeVisited:boolean = false;
-  let userconsentsexist:string = 'false';
-  let termsconditions:string = 'false';
-  let smsoffers:string = 'false';
-  let emailmarketing:string = 'false';
-  let error:string = '';
-  let smsTemplate: string = 'Please use this code {0} to activate your account';
-  let smstokenid;
-  let smsSendApiFailed = false;
-  let number;
-
-  let scrollSteps:HTMLElement;
-
-  // Native bridge
-  let isOnNative:boolean = false;
-
-  // @TODO typescript model for loginFields
-  let loginFields:any = {
-    username: '',
-    password: '',
-  };
-
-  // setupI18n({ withLocale: 'en', translations: {}});
-
-  const setTranslationUrl = ():void => {
-    let url:string = translationUrl;
-
-    fetch(url).then((res:any) => res.json())
-    .then((res) => {
-      Object.keys(res).forEach((item:any):void => {
-        addNewMessages(item, res[item]);
-      });
-    }).catch((err:any) => {
-      console.log(err);
-    });
-  }
-
-  Object.keys(RegisterFormTranslations).forEach((item:any) => {
-    addNewMessages(item, RegisterFormTranslations[item]);
-  });
-
-  const verifyUserConsents = ():void => {
-    fetch(`${endpoint}/player/consentRequirements`)
-      .then((res:any) => res.json())
-      .then(data => {
-        if(data.items.length > 0) {
-          userconsentsexist = 'true';
-          data.items.forEach((item) => {
-            switch(item.tagCode) {
-              case 'termsandconditions':
-                termsconditions = 'true';
-              break;
-
-              case 'sms':
-                smsoffers = 'true';
-              break;
-
-              case 'emailmarketing':
-                emailmarketing = 'true';
-              break;
-            }
-          });
-        } else {
-          userconsentsexist = 'false';
-        }
-      });
-  }
-
-  const getCmsData = ():void => {
-    let url:URL = new URL(`${cmsendpoint}/${lang}/login-register-content?env=${env}`);
-
-    let device = getDevice(userAgent)
-
-    if(device){
-      if(device === 'PC'){
-        url.searchParams.append('device', 'dk')
-      } else if(device === 'iPad' || device === 'iPhone') {
-        url.searchParams.append('device', 'ios')
-      } else {
-        url.searchParams.append('device', 'mtWeb')
-      }
-    }
-
-    fetch(url.href)
-      .then((res: any) => res.json())
-      .then((data: any) => {
-        cmsData = data.registerData;
-
-        accountCreationTitle = cmsData.title;
-        accountCreationSubTitle = cmsData.subtitle;
-        accountCreationMessage = cmsData.content;
-
-      })
-      .catch((err: any) => {
-        console.error(err);
-      });
-  };
-
-  const scrollTop = ():void => {
-    scrollSteps.scrollIntoView();
-  }
-
-  // @TODO data typescript
-  const createData = (step:string, data:any):void => {
-    if (step === 'RegisterStepOne') {
-      userData.email = disabledFieldsList.indexOf('email') >= 0 ? 'dummy@dummy.com' : data.userEmail;
-      userData.username = disabledFieldsList.indexOf('username') >= 0 ? 'dummyUsername' : data.userValue;
-      userData.password = disabledFieldsList.indexOf('password') >= 0 ? 'dummyPassword01!' : data.userPassword;
-      userData.securityQuestion = disabledFieldsList.indexOf('securityQuestion') >= 0 ? 'dummy question' : data.securityQuestion;
-      userData.securityAnswer = disabledFieldsList.indexOf('securityAnswer') >= 0 ? 'dummy answer' : data.securityAnswer;
-    }
-    if (step === 'RegisterStepTwo') {
-      userData.title = data.userTitleSelected;
-      userData.firstname = disabledFieldsList.indexOf('firstName') >= 0 ? 'dummy first name' : data.userFirstName;
-      userData.lastname = disabledFieldsList.indexOf('lastName') >= 0 ? 'dummy last name' : data.userLastName;
-      if (disabledFieldsList.indexOf('birthDate') >= 0) {
-        userData.birth = {
-          day: 1,
-          month: 1,
-          year: 2000
-        };
-      } else {
-        userData.birth = {};
-        userData.birth.day = data.birthDaySelected;
-        userData.birth.month = data.birthMonthSelected;
-        userData.birth.year = data.birthYearSelected;
-      }
-      userData.birthPlace = disabledFieldsList.indexOf('birthPlace') >= 0 ? 'ngenge' : data.birthPlace;
-      userData.currency = data.currencySelected;
-    }
-    if (step === 'RegisterStepThree') {
-      userData.address1 = disabledFieldsList.indexOf('address') >= 0 ? 'dummy address' : data.address;
-      userData.postalCode = disabledFieldsList.indexOf('postalCode') >= 0 ? '000000' : data.postalCode;
-      userData.city = disabledFieldsList.indexOf('city') >= 0 ? 'dummy city' : data.city;
-      userData.country = disabledFieldsList.indexOf('country') >= 0 ? 'dummy country' : data.countrySelected;
-      userData.nationality = disabledFieldsList.indexOf('nationality') >= 0 ? 'dummy nationality' : data.nationalitySelected;
-      if (disabledFieldsList.indexOf('mobile') >= 0) {
-        userData.mobile = {
-          prefix: '0040',
-          number: '1234123412'
-        };
-      } else {
-        userData.mobile = {};
-        userData.mobile.prefix = data.mobilePrefixSelected;
-        userData.mobile.number = data.mobile;
-        number = `${data.mobilePrefixSelected}${data.mobile}`
-      }
-
-      userData.userConsents = {};
-      // analytics data
-      userData.affiliateMarker = trackedanalyticsdata;
-
-      if (userconsentsexist == 'true') {
-        userData.userConsents.sms = data.consentOffersSms;
-        userData.userConsents.emailmarketing = data.consentOffersEmail;
-        userData.userConsents.termsandconditions = data.consentTerms;
-      }
-
-      userData.token = data.token;
-    }
-  }
-
-  const messageHandler = (e:any):void => {
-    if (e.data) {
-      switch(e.data.type) {
-        case 'RegisterStepOne':
-          createData('RegisterStepOne', e.data.registerStepOneData);
-          scrollTop();
-          showRegisterStepOne = false;
-          showRegisterStepTwo = true;
-          if (stepTwoVisited == false) {
-            stepTwoVisited = true;
-          } else {
-            window.postMessage({ type: 'StepTwoDataBackup', userData }, window.location.href);
-          }
-          break;
-
-        case 'RegisterStepTwo':
-          createData('RegisterStepTwo', e.data.registerStepTwoData);
-          scrollTop();
-          showRegisterStepTwo = false;
-          showRegisterStepThree = true;
-          if (stepThreeVisited == false) {
-            stepThreeVisited = true;
-          } else {
-            window.postMessage({ type: 'StepThreeDataBackup', userData }, window.location.href);
-          }
-          break;
-
-        case 'RegisterStepThree':
-          createData('RegisterStepThree', e.data.registerStepThreeData);
-          sendData(userData);
-          break;
-
-        case 'SmsHasBeenValidated':
-          showConfirmation = true;
-          showSmsVerification = false;
-          break;
-
-        case 'GoBackStepTwo':
-          createData('RegisterStepTwo', e.data.registerStepTwoData);
-          scrollTop();
-          showRegisterStepOne = true;
-          showRegisterStepTwo = false;
-          window.postMessage({ type: 'StepOneDataBackup', userData }, window.location.href);
-          break;
-
-        case 'GoBackStepThree':
-          createData('RegisterStepThree', e.data.registerStepThreeData);
-          scrollTop();
-          showRegisterStepTwo = true;
-          showRegisterStepThree = false;
-          window.postMessage({ type: 'StepTwoDataBackup', userData }, window.location.href);
-          break;
-
-        default:
-          // do nothing
-          break;
-      }
-    }
-  }
-
-  const handlePostRegister = ():void => {
-    if (isOnNative) {
-      registerNativeEventListener(
-        'BIOMETRICS_ENABLED',
-        () => {
-        },
-      );
-
-      const { username, password } = loginFields;
-
-      const methodFound = callNative('ENABLE_BIOMETRICS', { username, password });
-
-      if (!methodFound) {
-        // Nothing to do here
-      }
-    }
-
-    //Analytics event
-    if(typeof gtag == 'function'){
-      gtag('event', 'Register', {
-        'context': 'GeneralPlayerRegisterForm'
-      });
-    } 
-  }
-
-  // @TODO typescript data model for userData
-  const sendData = async (userData:any):Promise<any> => {
-    let sendRegistrationData = {
-      method: "PUT",
-      headers: {
-        'g-recaptcha-response': userData.token,
-        'Content-Type': "application/json",
-        'Accept': 'application/json',
-      },
-      body: JSON.stringify(userData)
-    };
-
-    let response:any = await fetch(`${endpoint}/player/register`, sendRegistrationData);
-    let data:any = await response.json();
-
-    if (response.ok) {
-      showRegisterStepThree = false;
-      if(smsverification === 'false') {
-        showConfirmation = true;
-      } else {
-        playerid = data.id;
-        sendSmsToken(userData, data.id);
-      }
-
-      loginFields = {
-        username: userData.username,
-        password: userData.password
-      };
-
-      handlePostRegister();
-    } else {
-      // Parsing GMCore message 'cuz it's stupid and it doesn't know how to send error messages in 2021...2022 already ffs
-      // I really hope this piece of code won't survive long enough so that the years above will reach 2025 or something ... like, for real, please ... some real errors? plox ...
-      error = data.error.substring(data.error.indexOf('errorMessage') + 13, data.error.length);
-      showError = true;
-      window.postMessage({ type: "ShowRegistrationError", showError, error }, window.location.href);
-    }
-  }
-
-  const sendSmsToken = async (userData, playerId) => {
-    try {
-      const res = await fetch(`${endpoint}/player/sms/token`,{
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          accept: 'application/json',
-        },
-        body: JSON.stringify(
-          {
-            userId: playerId,
-            messageTemplate: smsTemplate,
-            destination: `${userData.mobile.prefix}${userData.mobile.number}`,
-          }
-        ),
-      });
-
-      const data = await res.json();
-
-      if(res.ok) {
-        smstokenid = data.id;
-        let smsMaxValidations = data.maxValidationAttempts;
-        showSmsVerification = true;
-        smsSendApiFailed = false;
-      } else {
-        smsSendApiFailed = true;
-        throw new Error("Failed to fetch");
-      }
-    } catch(err) {
-      smsSendApiFailed = true;
-      console.error(err);
-    }
-  }
-
-  const formatDisabledFields = ():void => {
-    disabledFieldsList = disabledfields.split(',');
-  }
-
-  const switchToLogin = ():void => {
-    window.postMessage({ type: "ToLogin" }, window.location.href);
-  }
-
-  const setActiveLanguage = ():void => {
-    setLocale(lang);
-  }
-
-  onMount(() => {
-    window.addEventListener('message', messageHandler, false);
-
-    verifyUserConsents();
-    isOnNative = !!isNative(userAgent);
-
-    return () => {
-      window.removeEventListener('message', messageHandler);
-    }
-  });
-
-$: cmsendpoint && lang && env && userroles && getCmsData();
-$: playerid && session;
-$: lang && setActiveLanguage();
-$: disabledfields && formatDisabledFields();
-$: translationUrl && setTranslationUrl();
-</script>
-
-{#if isLoading}
-  <div class="ModalLoader" part="ModalLoader"></div>
-{:else}
-  <div class="RegisterFormWrapper" part="RegisterFormWrapper">
-    {#if !isMobile}
-      <div class="RegisterFormImage" part="RegisterFormImage" style="background-image: url('{imagedesktop}')"></div>
-    {/if}
-    <div class="RegisterFormContainer {isMobile ? 'RegisterFormContainerMobile' : ''}" part="RegisterFormContainer {isMobile ? 'RegisterFormContainerMobile' : ''}">
-      {#if showRegisterStepOne || showRegisterStepTwo || showRegisterStepThree}
-        <div class="RegisterSteps" part="RegisterSteps" bind:this={scrollSteps}>
-          <div class="RegisterFirstStepDash {showRegisterStepOne || (!showRegisterStepOne && showRegisterStepTwo) || (!showRegisterStepOne && !showRegisterStepTwo && showRegisterStepThree) ? 'RegisterStepDashColor' : ''}"
-          part="RegisterFirstStepDash {showRegisterStepOne || (!showRegisterStepOne && showRegisterStepTwo) || (!showRegisterStepOne && !showRegisterStepTwo && showRegisterStepThree) ? 'RegisterStepDashColor' : ''}"></div>
-          <div class="RegisterSecondStepDash {showRegisterStepTwo || (!showRegisterStepOne && !showRegisterStepTwo && showRegisterStepThree) ? 'RegisterStepDashColor' : ''}"
-          part="RegisterSecondStepDash {showRegisterStepTwo || (!showRegisterStepOne && !showRegisterStepTwo && showRegisterStepThree) ? 'RegisterStepDashColor' : ''}"></div>
-          <div class="RegisterThirdStepDash {showRegisterStepThree ? 'RegisterStepDashColor' : ''}" part="RegisterThirdStepDash {showRegisterStepThree ? 'RegisterStepDashColor' : ''}"></div>
-        </div>
-      {/if}
-      {#if showRegisterStepOne}
-        <div class="RegisterFormStep1" part="RegisterFormStep1">
-          <general-player-register-form-step1 {lang} {disabledfields} {dummydata} {simplepasswordvalidation} />
-        </div>
-      {/if}
-      {#if showRegisterStepTwo}
-        <div class="RegisterFormStep2" part="RegisterFormStep2">
-          <general-player-register-form-step2 {endpoint} {lang} {licenseyears} {disabledfields} {dummydata} />
-        </div>
-      {/if}
-      {#if showRegisterStepThree}
-        <div class="RegisterFormStep3" part="RegisterFormStep3">
-          <general-player-register-form-step3 {userconsentsexist} {termsconditions} {smsoffers} {emailmarketing} {endpoint} {captchakey} {lang} {disabledfields} {dummydata} />
-        </div>
-      {/if}
-      {#if smsverification && showSmsVerification}
-        {#if !smsSendApiFailed}
-          <general-player-sms-verification-form
-            {endpoint}
-            {session}
-            {number}
-            {playerid}
-            tokenid={smstokenid}>
-          </general-player-sms-verification-form>
-        {:else}
-          <p>
-            We encountered an issue sending the sms to your number,
-            you can verify your number while loging in
-          </p>
-        {/if}
-      {/if}
-      {#if showConfirmation}
-        <div class="RegisterConfirmation" part="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" part="RegisterConfirmationTitle">{accountCreationTitle}</h2>
-          <p class="RegisterConfirmationSubtitle" part="RegisterConfirmationSubtitle">{accountCreationSubTitle}</p>
-          <p class="RegisterConfirmationNote" part="RegisterConfirmationNote">{accountCreationMessage}</p>
-          <button class="RegisterConfirmationGoToLogin" part="RegisterConfirmationGoToLogin" on:click={switchToLogin}>{$_('registerForm.goToLoginButton')}</button>
-        </div>
-      {/if}
-    </div>
-  </div>
-{/if}
-
-<style lang="scss">
-
-  :host {
-    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
-  }
-
-  .RegisterFormWrapper {
-    background: var(--emfe-w-color-gray-50, #F9F8F8);
-    display: inline-flex;
-    width: 100%;
-  }
-
-  .RegisterFormImage {
-    background-position: center;
-    background-size: cover;
-    background-repeat: no-repeat;
-    flex: 1 1 100%;
-  }
-
-  .RegisterFormContainer {
-    flex: 1 1 100%;
-    padding: 25px;
-    height: 404px;
-    overflow-y: auto;
-    scrollbar-color: var(--emfe-w-color-gray-100, #E6E6E6) var(--emfe-w-color-gray-50, #F9F8F8);
-    scrollbar-width: thin;
-    &.RegisterFormContainerMobile {
-      padding: 40px 20px;
-      height: auto;
-      overflow-y: initial;
-    }
-  }
-
-  .RegisterFormContainer::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  /* Track */
-  .RegisterFormContainer::-webkit-scrollbar-track {
-    background: var(--emfe-w-color-gray-50, #F9F8F8);
-  }
-
-  /* Handle */
-  .RegisterFormContainer::-webkit-scrollbar-thumb {
-    background: var(--emfe-w-color-gray-100, #E6E6E6);
-  }
-
-  .RegisterSteps {
-    display: flex;
-    gap: 10px;
-    padding: 20px 0 30px;
-  }
-
-  .RegisterFirstStepDash,
-  .RegisterSecondStepDash,
-  .RegisterThirdStepDash {
-    width: 50px;
-    height: 2px;
-    background-color: var(--emfe-w-color-gray-100, #E6E6E6);
-  }
-
-  .RegisterStepDashColor {
-    background-color: var(--emfe-w-color-primary, #D0046C);
-  }
-
-  .RegisterStepNext {
-    color: var(--emfe-w-color-white, #FFFFFF);
-    background: var(--emfe-w-color-primary, #D0046C);
-    border: 1px solid var(--emfe-w-color-primary, #D0046C);
-    border-radius: 5px;
-    width: 100%;
-    height: 60px;
-    padding: 0;
-    text-transform: uppercase;
-    font-size: 18px;
-    cursor: pointer;
-    margin-top: 24px;
-  }
-
-  .RegisterConfirmation {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    margin-top: 60px;
-    svg {
-      width: 74px;
-    }
-    .RegisterConfirmationTitle {
-      color: var(--emfe-w-color-green, #48952a);
-      font-size: 24px;
-      font-weight: 400;
-      text-transform: uppercase;
-      margin-bottom: 0;
-    }
-    .RegisterConfirmationSubtitle {
-      color: var(--emfe-w-color-gray-300, #58586B);
-      font-size: 16px;
-      line-height: 19px;
-      margin-bottom: 24px;
-    }
-    .RegisterConfirmationNote {
-      color: var(--emfe-w-color-black, #000000);
-      font-size: 18px;
-      line-height: 22px;
-    }
-  }
-
-  .RegisterConfirmationGoToLogin {
-    color: var(--emfe-w-color-white, #FFFFFF);
-    background: var(--emfe-w-color-primary, #D0046C);
-    border: 1px solid var(--emfe-w-color-primary, #D0046C);
-    border-radius: 5px;
-    width: 100%;
-    height: 60px;
-    padding: 0;
-    text-transform: uppercase;
-    font-size: 18px;
-    cursor: pointer;
-    margin-top: 24px;
-  }
-</style>

package/src/i18n.js

@@ -1,27 +0,0 @@
-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/index.ts

@@ -1,4 +0,0 @@
-import GeneralPlayerRegisterForm from './GeneralPlayerRegisterForm.svelte';
-
-!customElements.get('general-player-register-form') && customElements.define('general-player-register-form', GeneralPlayerRegisterForm);
-export default GeneralPlayerRegisterForm;

package/src/translations.js

@@ -1,37 +0,0 @@
-export const RegisterFormTranslations = {
-  en: {
-    registerForm: {
-      goToLoginButton: 'Go To Login',
-    }
-  },
-  zhs: {
-    registerForm: {
-      goToLoginButton: '去登錄',
-    }
-  },
-  fr: {
-    registerForm: {
-      goToLoginButton: 'Aller à la connexion',
-    }
-  },
-  tr: {
-    registerForm: {
-      goToLoginButton: 'Giriş Yap',
-    }
-  },
-  ro: {
-    registerForm: {
-      goToLoginButton: 'Catre Autentificare',
-    }
-  },
-  es: {
-    registerForm: {
-      goToLoginButton: 'Ir a Iniciar sesión',
-    }
-  },
-  pt: {
-    registerForm: {
-      goToLoginButton: 'Ir para o Login',
-    }
-  },
-};

package/stories/GeneralPlayerRegisterForm.stories.js

@@ -1,13 +0,0 @@
-import { html } from 'lit-element';
-
-import GeneralPlayerRegisterForm from '../src/GeneralPlayerRegisterForm';
-
-// This default export determines where your story goes in the story list
-export default {
-  title: 'GeneralPlayerRegisterForm',
-};
-
-// 👇 We create a “template” of how args map to rendering
-const GeneralPlayerRegisterForm = ({ aProperty }) => html`<general-player-register-form></general-player-register-form>`;
-
-export const FirstStory = GeneralPlayerRegisterForm.bind({});

package/tsconfig.json

@@ -1,6 +0,0 @@
-{
-  "extends": "@tsconfig/svelte/tsconfig.json",
-
-  "include": ["src/**/*"],
-  "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
-}