@everymatrix/general-player-register-form-step2 1.44.0 → 1.45.0

package/src/GeneralPlayerRegisterFormStep2.svelte

@@ -1,578 +0,0 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { onMount } from "svelte";
-  import moment from 'moment';
-  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
-  import { TRANSLATIONS } from './translations';
-
-  export let endpoint:string = '';
-  export let lang:string = '';
-  export let licenseyears:string = '';
-  // Possible disabled fields = ['fistName', 'lastName', 'birthDate', 'birthPlace'];
-  export let disabledfields:string = '';
-  export let defaultoptions:string = '';
-  export let personalidlength:string = '';
-  export let clientstyling:string = '';
-  export let clientstylingurl:string = '';
-  export let translationurl:string = '';
-
-  let invalidFirstName:boolean = false;
-  let invalidLastName:boolean = false;
-  let invalidBirthDate:boolean = false;
-  let invalidBirthPlace:boolean = false;
-  let invalidPersonalId:boolean = false;
-
-  let firstNameFocus:boolean = false;
-  let lastNameFocus:boolean = false;
-  let birthDateFocus:boolean = false;
-  let birthplaceFocus:boolean = false;
-  let personalIdFocus: boolean = false;
-
-  let disabledFieldsList:Array<string>;
-
-  let userTitleSelected:string = '';
-  let userFirstName:string = '';
-  let userLastName:string = '';
-  let birthDays:Array<Object> = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31];
-  let birthDaySelected:number;
-  let birthMonths:Array<Object> = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
-  let birthMonthSelected:number;
-  let birthYears:Array<Object> = [];
-  let birthYearSelected:number;
-  let birthPlace:string = '';
-  let currencies:Array<Object> = [];
-  let currencySelected:any = '';
-  let personalId:string = '';
-  let currentDate:Date = new Date();
-  let minDate:number;
-  let maxDate:number;
-  let yearsDifference:string;
-
-  let isValid:boolean = false;
-  let isLoading:boolean = true;
-
-  let customStylingContainer:HTMLElement;
-  let displayNone:boolean = false;
-
-  // 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(TRANSLATIONS).forEach((item:any) => {
-    addNewMessages(item, TRANSLATIONS[item]);
-  });
-
-  const createYearsArray = ():void => {
-    maxDate = parseInt(moment(currentDate.setDate(currentDate.getDate())).subtract(parseInt(licenseyears, 10), 'y').format('YYYY'));
-    minDate = parseInt(moment(currentDate.setDate(currentDate.getDate())).subtract(100 + parseInt(licenseyears, 10), 'y').format('YYYY'));
-
-    for (let i = maxDate; i >= minDate; i--) {
-      birthYears.push(i);
-    }
-
-    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}/v1/player/operatorSupportedCurrencies`)
-      .then((res:any) => res.json())
-      .then(data => {
-        currencies = data.currencies;
-
-        if (!currencySelected) {
-          currencySelected = currencies[0];
-        }
-      });
-  }
-
-  const checkIsValid = ():void => {
-    isValid =  !(invalidFirstName || invalidLastName || invalidBirthDate || invalidBirthPlace || invalidPersonalId);
-
-    if (userFirstName.length <= 0 || userLastName.length <= 0 || birthPlace.length <= 0 || personalId.length <= 0 || !userTitleSelected || !birthDaySelected || !birthMonthSelected || !birthYearSelected) {
-      isValid = false;
-    }
-  }
-
-  const checkName = (name:string):boolean => {
-    if (name && name.length >=2 && name.length <= 50) {
-      return true;
-    }
-
-    return false;
-  }
-
-  const validateUserFirstName = ():void => {
-    invalidFirstName = !checkName(userFirstName);
-
-    checkIsValid();
-  }
-
-  const validateUserLastName = ():void => {
-    invalidLastName = !checkName(userLastName);
-
-    checkIsValid();
-  }
-
-  const checkBirthPlace = ():boolean => {
-    if (birthPlace && birthPlace.length <= 120) {
-      return true;
-    }
-
-    return false;
-  }
-
-  const validateBirthPlace = ():void => {
-    invalidBirthPlace = !checkBirthPlace();
-
-    checkIsValid();
-  }
-
-  const checkPersonalId = ():boolean => {
-    if (personalId && personalId.length === Number(personalidlength) && /^\d+$/.test(personalId)){
-      return true
-    }
-
-    return false;
-  }
-
-  const validatePersonalId = ():void => {
-    invalidPersonalId = !checkPersonalId();
-
-    checkIsValid();
-  }
-
-  const goNext = (e):void => {
-    e.preventDefault();
-    let registerStepTwoData = {
-      userTitleSelected,
-      userFirstName,
-      userLastName,
-      birthDaySelected,
-      birthMonthSelected,
-      birthYearSelected,
-      birthPlace,
-      personalId,
-      currencySelected
-    };
-
-    window.postMessage({ type: 'RegisterStepTwo', registerStepTwoData }, window.location.href);
-  }
-
-  const goBack = ():void => {
-    let registerStepTwoData = {
-      userTitleSelected,
-      userFirstName,
-      userLastName,
-      birthDaySelected,
-      birthMonthSelected,
-      birthYearSelected,
-      birthPlace,
-      personalId,
-      currencySelected
-    };
-
-    window.postMessage({ type: 'GoBackStepTwo', registerStepTwoData }, window.location.href);
-  }
-
-  const messageHandler = (e:any):void => {
-    if (e.data) {
-      switch(e.data.type) {
-        case 'StepTwoDataBackup':
-          userTitleSelected = e.data.userData.title;
-          userFirstName = e.data.userData.firstname;
-          userLastName = e.data.userData.lastname;
-          birthDaySelected = e.data.userData.birth.day;
-          birthMonthSelected = e.data.userData.birth.month;
-          birthYearSelected = e.data.userData.birth.year;
-          birthPlace = e.data.userData.birthPlace;
-          currencySelected = e.data.userData.currency;
-          personalId = e.data.userData.personalId;
-          checkIsValid();
-          break;
-      }
-    }
-  }
-
-  const formatDisabledFields = ():void => {
-    disabledFieldsList = disabledfields.split(',');
-
-    if (disabledFieldsList.indexOf('firstName') >= 0) {
-      userFirstName = 'dummy first name';
-      invalidFirstName = false;
-    } 
-
-    if (disabledFieldsList.indexOf('lastName') >= 0) {
-      userLastName = 'dummy last name';
-      invalidLastName = false;
-    }
-
-    if (disabledFieldsList.indexOf('birthPlace') >= 0) {
-      birthPlace = 'dummy birth place';
-      invalidBirthPlace = false;
-    }
-
-    if (disabledFieldsList.indexOf('personalId') >= 0) {
-      personalId = 'dummy personal id';
-      invalidPersonalId = false;
-    }
-
-    if (disabledFieldsList.indexOf('birthDate') >= 0) {
-      invalidBirthDate = false;
-    }
-
-    if(disabledFieldsList.indexOf('title') >= 0){
-      userTitleSelected = 'Mr.';
-    }
-
-    if(disabledFieldsList.indexOf('currency') >= 0){
-      currencySelected = 'CDF';
-    }
-  }
-
-  const setActiveLanguage = ():void => {
-    setLocale(lang);
-  }
-
-  const setClientStyling = ():void => {
-    let sheet = document.createElement('style');
-    sheet.innerHTML = clientstyling;
-    customStylingContainer.appendChild(sheet);
-  }
-
-  const setClientStylingURL = ():void => {
-    displayNone = true;
-
-    let url:URL = new URL(clientstylingurl);
-    let cssFile:HTMLElement = document.createElement('style');
-
-    fetch(url.href)
-      .then((res:any) => res.text())
-      .then((data:any) => {
-        cssFile.innerHTML = data
-
-        setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
-        setTimeout(() => { displayNone = false; }, 500);
-      });
-  }
-
-  onMount(() => {
-    window.addEventListener('message', messageHandler, false);
-
-    return () => {
-      window.removeEventListener('message', messageHandler);
-    }
-  });
-
-  $: endpoint && getCurrencies();
-  $: lang && setActiveLanguage();
-  $: licenseyears && createYearsArray();
-  $: disabledfields && formatDisabledFields();
-  $: clientstyling && customStylingContainer && setClientStyling();
-  $: clientstylingurl && customStylingContainer && setClientStylingURL();
-  $: translationurl && setTranslationUrl();
-</script>
-
-<div bind:this={customStylingContainer}> 
-  <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:var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #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>
-      {$_('registerBackButton')}
-    </button>
-  </div>
-  <form class="RegisterFormContent">
-    {#if !(disabledFieldsList?.indexOf('title') >= 0)}
-    <div class="UserTitleContainer">
-      <label for="Title">{$_('registerUserTitle')}:<span class="FormRequired">*</span></label>
-      <select bind:value={userTitleSelected} on:change={checkIsValid} id="Title">
-        <option value="" disabled selected>{$_('registerUserTitleSelect')}</option>
-        <option value="Mr.">{$_('registerUserTitleSelectMr')}</option>
-        <option value="Mrs.">{$_('registerUserTitleSelectMrs')}</option>
-        <option value="Ms.">{$_('registerUserTitleSelectMs')}</option>
-      </select>
-    </div>
-    {/if}
-    {#if !(disabledFieldsList?.indexOf('firstName') >= 0)}
-    <div class="FirstNameContainer {invalidFirstName && !firstNameFocus ? 'InvalidField' : ''}">
-      <label for="FirstName">{$_('registerFirstName')}:<span class="FormRequired">*</span></label>
-      <input bind:value={userFirstName} on:keyup={validateUserFirstName} on:focus={() => firstNameFocus = true} on:keyup={() => firstNameFocus = false} type="text" id="FirstName" />
-      {#if invalidFirstName}
-        <p class="InvalidInput">{$_('registerFirstNameError')}</p>
-      {/if}
-    </div>
-    {/if}
-    {#if !(disabledFieldsList?.indexOf('lastName') >= 0)}
-    <div class="LastNameContainer {invalidLastName && !lastNameFocus ? 'InvalidField' : ''}">
-      <label for="LastName">{$_('registerLastName')}:<span class="FormRequired">*</span></label>
-      <input bind:value={userLastName} on:keyup={validateUserLastName} on:focus={() => lastNameFocus = true} on:blur={() => lastNameFocus = false} type="text" id="LastName" />
-      {#if invalidLastName}
-        <p class="InvalidInput">{$_('registerLastNameError')}</p>
-      {/if}
-    </div>
-    {/if}
-    {#if !(disabledFieldsList?.indexOf('birthDate') >= 0)}
-    <div class="BirthDateContainer">
-      <label>{$_('registerDateOfBirth')}:<span class="FormRequired">*</span></label>
-      <div class="BirthDateOptions">
-        <select bind:value={birthDaySelected} on:change={validateBirthDate} class="BirthDaySelected">
-          <option value="" disabled selected>{$_('registerBirthDay')}</option>
-          {#each birthDays as birthDay}
-            <option value={birthDay}>{birthDay}</option>
-          {/each}
-        </select>
-        <select bind:value={birthMonthSelected} on:change={validateBirthDate} class="BirthMonthSelected">
-          <option value="" disabled selected>{$_('registerBirthMonth')}</option>
-          {#each birthMonths as birthMonth}
-            <option value={birthMonth}>{birthMonth}</option>
-          {/each}
-        </select>
-        <select bind:value={birthYearSelected} on:change={validateBirthDate} class="BirthYearSelected">
-          <option value="" disabled selected>{$_('registerBirthYear')}</option>
-          {#if !isLoading}
-            {#each birthYears as birthYear}
-              <option value={birthYear}>{birthYear}</option>
-            {/each}
-          {/if}
-        </select>
-        {#if invalidBirthDate}
-          <p class="InvalidInput">{$_('registerBirthDateError', { values: { licenseyears: licenseyears}})}</p>
-        {/if}
-      </div>
-    </div>
-    {/if}
-    {#if !(disabledFieldsList?.indexOf('birthPlace') >= 0)}
-    <div class="BirthPlaceContainer {invalidBirthPlace && !birthplaceFocus ? 'InvalidField' : ''}">
-      <label for="BirthPlace">{$_('registerBirthPlace')}:<span class="FormRequired">*</span></label>
-      <input bind:value={birthPlace} on:keyup={validateBirthPlace} on:focus={() => birthplaceFocus = true} on:blur={() => birthplaceFocus = false} type="text" id="BirthPlace" />
-      {#if invalidBirthPlace}
-        <p class="InvalidInput">{$_('registerBirthPlaceError')}</p>
-      {/if}
-    </div>
-    {/if}
-    {#if !(disabledFieldsList?.indexOf('personalId') >= 0)}
-      <div class="PersonalIdContainer {invalidPersonalId && !personalIdFocus ? 'InvalidField' : ''}">
-        <label for="PersonalId">{$_('registerPersonalId')}:<span class="FormRequired">*</span></label>
-        <input bind:value={personalId} on:keyup={validatePersonalId} on:focus={() => personalIdFocus = true} on:blur={() => personalIdFocus = false} type="text" id="PersonalId" />
-        {#if invalidPersonalId}
-          {#if !(/^\d+$/.test(personalId))}
-            <p class="InvalidInput">{$_('registerPersonalIdCharacters')}</p>
-          {:else}
-            <p class="InvalidInput">{$_('registerPersonalIdLength')}</p>
-          {/if}
-        {/if}
-      </div>
-    {/if}
-    {#if !(disabledFieldsList?.indexOf('currency') >= 0)}
-    <div class="CurrencyContainer {disabledFieldsList?.indexOf('currency') >= 0 ? 'Hidden' : ''}">
-      <label for="Currency">{$_('registerCurrency')}:<span class="FormRequired">*</span></label>
-      <select bind:value={currencySelected} id="Currency">
-        {#each currencies as currency}
-          <option value={currency}>{currency}</option>
-        {/each}
-      </select>
-    </div>
-    {/if}
-    <button class="RegisterStepNext" disabled={!isValid} on:click={(e) => goNext(e)}>{$_('registerNext')}</button>
-  </form>
-</div>
-
-<style lang="scss">
-
-  .BackButton {
-    display: inline-flex;
-    color: var(--emfe-w-registration-typography, var(--emfe-w-color-contrast, #07072A));
-    height: 15px;
-    border-radius: 5px;
-    border: none;
-    background: transparent;
-    padding: 0;
-    text-transform: uppercase;
-    font-size: 22px;
-    cursor: pointer;
-    margin-bottom: 30px;
-    svg {
-      width: 20px;
-      height: 20px;
-      margin-right: 24px;
-      fill: var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));
-    }
-  }
-
-  .UserTitleContainer,
-  .CurrencyContainer {
-    label {
-      font-size: 14px;
-      font-weight: 300;
-      padding-bottom: 5px;
-
-    }
-
-    select {
-      width: 100%;
-      height: 44px;
-      border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
-      border-radius: 5px;
-      box-sizing: border-box;
-      padding: 5px 15px;
-      font-size: 16px;
-      line-height: 18px;
-      -webkit-appearance: none;
-      -moz-appearance: none;
-      appearance: none;
-      background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat var(--emfe-w-color-white, #FFFFFF);
-      background-position: calc(100% - 0.75rem) center;
-
-      &:focus, :focus-within, :focus-visible, :visited {
-        border: 1px solid var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));
-        box-shadow: 0 0 0 1pt var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));
-      }
-    }
-  }
-
-  .UserTitleContainer,
-  .FirstNameContainer,
-  .LastNameContainer,
-  .BirthDateContainer,
-  .BirthPlaceContainer,
-  .PersonalIdContainer,
-  .CurrencyContainer {
-    color: var(--emfe-w-registration-contrast, var(--emfe-w-color-gray-300, #58586B));
-    display: flex;
-    flex-direction: column;
-    padding-bottom: 30px;
-    position: relative;
-
-    label {
-      font-size: 14px;
-      font-weight: 300;
-      padding-bottom: 5px;
-    }
-
-    input, select {
-      width: 100%;
-      height: 44px;
-      border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
-      border-radius: 5px;
-      box-sizing: border-box;
-      padding: 5px 15px;
-      font-size: 16px;
-      line-height: 18px;
-    }
-
-    &.InvalidField {
-      input {
-        border: 1px solid var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));
-        background: var(--emfe-w-color-pale, #FBECF4);
-        color: var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));
-      }
-    }
-
-    &.Hidden {
-      display: none;
-    }
-  }
-
-  .BirthDateOptions {
-    display: flex;
-    gap: 10px;
-
-    .BirthDaySelected {
-      width: 30%;
-      -webkit-appearance: none;
-      -moz-appearance: none;
-      appearance: none;
-      background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat var(--emfe-w-color-white, #FFFFFF);
-      background-position: calc(100% - 0.75rem) center;
-
-      &:focus, :focus-within, :focus-visible, :visited {
-        border: 1px solid var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));
-        box-shadow: 0 0 0 1pt var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));
-      }
-    }
-
-    .BirthMonthSelected {
-      width: 30%;
-      -webkit-appearance: none;
-      -moz-appearance: none;
-      appearance: none;
-      background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat var(--emfe-w-color-white, #FFFFFF);
-      background-position: calc(100% - 0.75rem) center;
-
-      &:focus, :focus-within, :focus-visible, :visited {
-        border: 1px solid var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));
-        box-shadow: 0 0 0 1pt var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));
-      }
-    }
-
-    .BirthYearSelected {
-      width: 40%;
-      -webkit-appearance: none;
-      -moz-appearance: none;
-      appearance: none;
-      background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat var(--emfe-w-color-white, #FFFFFF);
-      background-position: calc(100% - 0.75rem) center;
-
-      &:focus, :focus-within, :focus-visible, :visited {
-        border: 1px solid var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));
-        box-shadow: 0 0 0 1pt var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));
-      }
-    }
-  }
-
-  .FormRequired {
-    color: var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839));
-  }
-
-  .InvalidInput {
-    color: var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
-    font-size: 10px;
-    position: absolute;
-    bottom: -3px;
-    line-height: 10px;
-  }
-
-  .ErrorMessage {
-    margin: 0 0 15px 0;
-    font-size: 12px;
-    color: var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
-  }
-
-  .RegisterStepNext {
-    color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
-    background: var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));
-    border: 1px solid var(--emfe-w-registration-color-primary, 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;
-    &[disabled] {
-      background: var(--emfe-w-color-gray-100, #E6E6E6);
-      border: 1px solid var(--emfe-w-color-gray-150, #828282);
-      cursor: not-allowed;
-    }
-  }
-</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 GeneralPlayerRegisterFormStep2 from './GeneralPlayerRegisterFormStep2.svelte';
-
-!customElements.get('general-player-register-form-step2') && customElements.define('general-player-register-form-step2', GeneralPlayerRegisterFormStep2);
-export default GeneralPlayerRegisterFormStep2;