@everymatrix/general-player-register-form-step3-nd 1.43.4 → 1.45.0

package/src/GeneralPlayerRegisterFormStep3Nd.svelte

@@ -1,780 +0,0 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { onMount } from "svelte";
-  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
-  import { TRANSLATIONS } from './translations';
-
-  export let userconsentsexist:string = 'false';
-  export let termsconditions:string = 'false';
-  export let smsoffers:string = 'false';
-  export let emailmarketing:string = 'false';
-  export let endpoint:string = '';
-  export let captchakey:string = '';
-  export let lang:string = '';
-
-  // Possible disabled fields = ['address', 'postalCode', 'mobile', 'city', 'country', 'nationality'];
-  export let disabledfields:string = '';
-  export let defaultoptions:string = '';
-  export let clientstyling:string = '';
-  export let clientstylingurl:string = '';
-  export let translationurl:string = '';
-
-  let invalidAddress:boolean;
-  let invalidPostalCode:boolean;
-  let invalidMobile:boolean;
-  let invalidCity:boolean;
-  let invalidNationality:boolean;
-
-  let addressFocus:boolean = false;
-  let postalCodeFocus:boolean = false;
-  let mobileFocus:boolean = false;
-  let cityFocus:boolean = false;
-
-  let disabledFieldsList:Array<string>;
-  let defaultOptionsList:Array<string>;
-
-  let showError:boolean = false;
-  let error:string = '';
-
-  let address:string = '';
-  let postalCode:string = '';
-  let city:string = '';
-  let countries:Array<Object> = [];
-  let countrySelected:string = '';
-  let nationalities:Array<Object> = [];
-  let nationalitySelected:string = '';
-  let mobile:string = '';
-  let mobilePrefixes:Array<Object> = [];
-  let mobilePrefixSelected:string = '';
-  let consentOffers:boolean = false;
-  let consentOffersSms:boolean = false;
-  let consentOffersEmail:boolean = false;
-  let consentTerms:boolean = false;
-
-  let isValid:boolean = false;
-  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]);
-  });
-
-  let textTC = $_('registerTermsConditions');
-
-  const getCountriesList = ():void => {
-    fetch(`${endpoint}/v1/player/countries`)
-      .then((res:any) => res.json())
-      .then((countryList:any) => {
-        fetch(`${endpoint}/v1/player/operatorSupportedCountries`).then((res:any) => {
-          if (res.status >= 300) {
-            return new Error('Error while fetching the supported countries');
-          }
-
-          return res.json();
-        })
-        .then((supportedCountries:any) => {
-          countries = countryList.countries.filter((item:any) => {
-            return supportedCountries.countries.indexOf(item.Alpha2Code) >= 0;
-          });
-          if (!countrySelected) {
-            countrySelected = countries[0].Alpha2Code;
-          }
-          nationalities = countryList.countries;
-          if (!nationalitySelected) {
-            nationalitySelected = nationalities.filter((item:any) => supportedCountries.countries.indexOf(item.Alpha2Code) >= 0)[0].Alpha2Code;
-          }
-        });
-      });
-  }
-
-  const getPhoneCodes = ():void => {
-    fetch(`${endpoint}/v1/player/phonecodes`)
-      .then((res:any) => res.json())
-      .then(data => {
-        mobilePrefixes = data.phoneCodes;
-        if (!mobilePrefixSelected) {
-          mobilePrefixSelected = mobilePrefixes[0].Prefix;
-        }
-      });
-  }
-
-  const checkIsValid = ():void => {
-    isValid =  !(invalidAddress || invalidPostalCode || invalidCity || invalidMobile || showError || (userconsentsexist === 'true' && (termsconditions === 'true' && !consentTerms)));
-
-    if (address.length <= 0 || postalCode.length <= 0 || city.length <= 0 || mobile.length <= 0) {
-      isValid = false;
-    }
-  }
-
-  const checkAddress = ():boolean => {
-    if (address && address.length <= 100) {
-      return true;
-    }
-
-    return false;
-  }
-
-  const validateAddress = ():void => {
-    invalidAddress = !checkAddress();
-    checkIsValid();
-  }
-
-  const checkPostalCode = ():boolean => {
-    if (postalCode && postalCode.length <= 20) {
-      return true;
-    }
-
-    return false;
-  }
-
-  const validatePostalCode = ():void => {
-    invalidPostalCode = !checkPostalCode();
-    checkIsValid();
-  }
-
-  const checkCity = ():boolean => {
-    if (city && city.length <= 50) {
-      return true;
-    }
-
-    return false;
-  }
-
-  const validateCity = ():void => {
-    invalidCity = !checkCity();
-    checkIsValid();
-  }
-
-  const checkMobile = ():boolean => {
-    if (mobile && mobile.length >= 5 && mobile.length <= 12) {
-      return true;
-    }
-
-    return false;
-  }
-
-  const validateMobile = ():void => {
-    invalidMobile = !checkMobile();
-    checkIsValid();
-  }
-
-  const toggleOffers = (data:string):void => {
-    switch(data) {
-      case "GeneralOffers":
-        if (consentOffers === false) {
-          consentOffers = true;
-          consentOffersSms = true;
-          consentOffersEmail = true;
-        } else {
-          consentOffers = false;
-          consentOffersSms = false;
-          consentOffersEmail = false;
-        }
-      break;
-
-      case "SmsOffers":
-        if (consentOffersSms === false) {
-          consentOffersSms = true;
-          consentOffers = true;
-        } else {
-          consentOffersSms = false;
-        }
-        uncheckOffers();
-      break;
-
-      case "EmailOffers":
-        if (consentOffersEmail === false) {
-          consentOffersEmail = true;
-          consentOffers = true;
-        } else {
-          consentOffersEmail = false;
-        }
-        uncheckOffers();
-      break;
-    }
-  }
-
-  const uncheckOffers = ():void => {
-    if (!consentOffersSms && !consentOffersEmail) {
-      consentOffers = false;
-    }
-  }
-
-  const toggleTerms = ():void => {
-    if (consentTerms === false) {
-      consentTerms = true;
-    } else {
-      consentTerms = false;
-    }
-
-    checkIsValid();
-  }
-
-  const doRecaptcha = ():Promise<string> => {
-    return new Promise((resolve, reject) => {
-      grecaptcha.ready(() => {
-        grecaptcha.execute(captchakey, { action: "submit" }).then((token:string) => {
-          resolve(token);
-        });
-      });
-    });
-  }
-
-  const goNext = (e):void => {
-    e.preventDefault();
-    let registerStepThreeData = {};
-
-    doRecaptcha().then((token:string) => {
-      registerStepThreeData = {
-        address,
-        postalCode,
-        city,
-        countrySelected,
-        nationalitySelected,
-        mobilePrefixSelected,
-        mobile,
-        consentOffersSms,
-        consentOffersEmail,
-        consentTerms,
-        consentOffers,
-        token
-      }
-
-      window.postMessage({ type: 'RegisterStepThree', registerStepThreeData }, window.location.href);
-    });
-  }
-
-  const goBack = ():void => {
-    let registerStepThreeData = {
-      address,
-      postalCode,
-      city,
-      countrySelected,
-      nationalitySelected,
-      mobilePrefixSelected,
-      mobile,
-      consentOffersSms,
-      consentOffersEmail,
-      consentTerms,
-      consentOffers,
-      
-    }
-
-    window.postMessage({ type: 'GoBackStepThree', registerStepThreeData }, window.location.href);
-  }
-
-  const messageHandler = (e:any):void => {
-    if (e.data) {
-      switch(e.data.type) {
-        case 'StepThreeDataBackup':
-          address = e.data.userData.address1;
-          postalCode = e.data.userData.postalCode;
-          city = e.data.userData.city;
-          countrySelected = e.data.userData.country;
-          nationalitySelected = e.data.userData.nationality;
-          mobilePrefixSelected = e.data.userData.mobile.prefix;
-          mobile = e.data.userData.mobile.number;
-          consentOffersSms = e.data.userData.userConsents.sms;
-          consentOffersEmail = e.data.userData.userConsents.emailmarketing;
-          consentTerms = e.data.userData.userConsents.termsandconditions;
-          checkIsValid();
-          break;
-
-        case 'ShowRegistrationError':
-          showError = e.data.showError;
-          error = e.data.error;
-      }
-    }
-  }
-
-  const formatDisabledFields = ():void => {
-    disabledFieldsList = disabledfields.split(',');
-
-    if (disabledFieldsList.indexOf('address') >= 0) {
-      invalidAddress = false;
-      address = 'dummy address';
-    }
-
-    if (disabledFieldsList.indexOf('postalCode') >= 0) {
-      invalidPostalCode = false;
-      postalCode = '000000';
-    }
-
-    if (disabledFieldsList.indexOf('mobile') >= 0) {
-      invalidMobile = false;
-      mobile = '1234123412';
-      mobilePrefixSelected = '000';
-    }
-
-    if (disabledFieldsList.indexOf('city') >= 0) {
-      invalidCity = false;
-      city = 'dummy city';
-    }
-
-    if (disabledFieldsList.indexOf('country') >= 0) {
-      countrySelected = 'dummy country';
-    }
-
-    if (disabledFieldsList.indexOf('nationality') >= 0) {
-      invalidNationality = false;
-      nationalitySelected = 'dummy nationality';
-    }
-  }
-
-  const applyDefaultOptions = ():void =>{
-    defaultOptionsList = defaultoptions.split(',');
-
-    if (defaultOptionsList.indexOf('consentsTerms') >= 0) {
-      consentTerms = true;
-    }
-
-    if (defaultOptionsList.indexOf('consentsOffers') >= 0) {
-      consentOffers = true;
-      consentOffersSms = true;
-      consentOffersEmail = true;
-    }
-    
-    defaultOptionsList.forEach(e => {
-      if(e.includes('phonePrefix')){
-        mobilePrefixSelected = e.split(':')[1].toString();
-      }
-    });
-  }
-
-  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 && getCountriesList();
-  $: endpoint && getPhoneCodes();
-  $: lang && setActiveLanguage();
-  $: disabledfields && formatDisabledFields();
-  $: defaultoptions && applyDefaultOptions();
-  $: clientstyling && customStylingContainer && setClientStyling();
-  $: clientstylingurl && customStylingContainer && setClientStylingURL();
-  $: translationurl && setTranslationUrl();
-</script>
-
-<svelte:head>
-  {#if captchakey}
-    <script src="//www.google.com/recaptcha/api.js?render={captchakey}" async defer></script>
-  {/if}
-</svelte:head>
-
-
-
-<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(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));}</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">
-    <div class="AddressPostalCodeContainer">
-      <div class="AddressContainer {invalidAddress && !addressFocus ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('address') >= 0 ? 'Hidden' : ''}">
-        <label for="Address">{$_('registerAddress')}:<span class="FormRequired">*</span></label>
-        <input bind:value={address} on:keyup={validateAddress} on:focus={() => addressFocus = true} on:blur={() => addressFocus = false} type="text" id="Address" />
-        {#if invalidAddress}
-          <p class="InvalidInput">{$_('registerAddressError')}</p>
-        {/if}
-      </div>
-      <div class="PostalCodeContainer {invalidPostalCode && !postalCodeFocus ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('postalCode') >= 0 ? 'Hidden' : ''}">
-        <label for="PostalCode">{$_('registerPostalCode')}:<span class="FormRequired">*</span></label>
-        <input bind:value={postalCode} on:keyup={validatePostalCode} on:focus={() => postalCodeFocus = true} on:blur={() => postalCodeFocus = false} type="text" id="PostalCode" />
-        {#if invalidPostalCode}
-          <p class="InvalidInput">{$_('registerPostalCodeError')}</p>
-        {/if}
-      </div>
-    </div>
-    <div class="CityContainer {invalidCity && cityFocus ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('city') >= 0 ? 'Hidden' : ''}">
-      <label for="City">{$_('registerCity')}:<span class="FormRequired">*</span></label>
-      <input bind:value={city} on:keyup={validateCity} on:focus={() => cityFocus = true} on:blur={() => cityFocus = false} type="text" id="City" />
-      {#if invalidCity}
-        <p class="InvalidInput">{$_('registerCityError')}</p>
-      {/if}
-    </div>
-    <div class="CountryContainer {disabledFieldsList?.indexOf('country') >= 0 ? 'Hidden' : ''}">
-      <label for="Country">{$_('registerCountry')}:<span class="FormRequired">*</span></label>
-      <select bind:value={countrySelected} id="Country">
-        {#each countries as country}
-          <option value={country.Alpha2Code}>{country.Name}</option>
-        {/each}
-      </select>
-    </div>
-    <div class="NationalityContainer {disabledFieldsList?.indexOf('nationality') >= 0 ? 'Hidden' : ''}">
-      <label for="Nationality">{$_('registerNationality')}:<span class="FormRequired">*</span></label>
-      <select bind:value={nationalitySelected} id="Nationality">
-        {#each nationalities as nationality}
-          <option value={nationality.Alpha2Code}>{nationality.Name}</option>
-        {/each}
-      </select>
-    </div>
-    <div class="MobileContainer {invalidMobile && !mobileFocus ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('mobile') >= 0 ? 'Hidden' : ''}">
-      <label for="Mobile">{$_('registerMobile')}:<span class="FormRequired">*</span></label>
-      <div class="MobileWrapper">
-        <select bind:value={mobilePrefixSelected} class="MobilePrefixSelected">
-          {#each mobilePrefixes as mobilePrefix}
-            <option value={mobilePrefix.Prefix}>{mobilePrefix.Prefix}</option>
-          {/each}
-        </select>
-        <input bind:value={mobile} on:keyup={validateMobile} on:focus={() => mobileFocus = true} on:blur={() => mobileFocus = false} type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" id="Mobile" class="MobileInput"/>
-      </div>
-      {#if invalidMobile}
-        <p class="InvalidInput">{$_('registerMobileError')}</p>
-      {/if}
-    </div>
-    {#if userconsentsexist === 'true'}
-      {#if smsoffers === 'true' || emailmarketing === 'true'}
-        <div class="OffersContainer">
-          <label class="Offers">
-            {$_('registerUserConsents')}
-            <input type="Checkbox" checked="{consentOffers}" on:click={() => toggleOffers("GeneralOffers")}>
-            <span class="Checkmark"></span>
-          </label>
-          <div class="OffersMethodsWrapper">
-            {#if smsoffers === 'true'}
-              <label class="OffersMethod">
-                {$_('registerUserConsentsSMS')}
-                <input type="Checkbox" checked="{consentOffersSms}" on:click={() => toggleOffers("SmsOffers")}>
-                <span class="Checkmark"></span>
-              </label>
-            {/if}
-            {#if emailmarketing === 'true'}
-              <label class="OffersMethod">
-                {$_('registerUserConsentsEmail')}
-                <input type="Checkbox" checked="{consentOffersEmail}" on:click={() => toggleOffers("EmailOffers")}>
-                <span class="Checkmark"></span>
-              </label>
-            {/if}
-          </div>
-        </div>
-      {/if}
-      {#if termsconditions === 'true'}
-        <div class="AgeContainer">
-          <label class="AgeConsent">
-            <span>{@html textTC}</span>
-            <input type="Checkbox" checked="{consentTerms}" on:click={() => toggleTerms()}>
-            <span class="Checkmark"></span>
-          </label>
-        </div>
-        {#if !consentTerms}
-          <div class="NotificationContainer">
-            <p>{$_('registerTermsConditionsError')}</p>
-          </div>
-        {/if}
-      {/if}
-    {/if}
-    <div class="g-recaptcha" data-sitekey="{captchakey}" />
-      <button
-      class="RegisterStepNext"
-      disabled={!isValid}
-      on:click={(e) => goNext(e)}>
-      {$_('registerOpenAccount')}
-      </button>
-  </form>
-  {#if showError}
-    <div>
-      <p class="RegisterError">{error}</p>
-    </div>
-  {/if}
-</div>
-
-<style lang="scss">
-
-  input, select {
-      font-family: inherit;
-    }
-
-
-  .BackButton {
-    display: inline-flex;
-    color: var(--emw--registration-contrast, var(--emw--color-typography-cotrast, #444444));
-    height: 15px;
-    border-radius: var(--emw--border-radius-small, 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: 20px;
-      fill: var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));
-    }
-  }
-
-  .AddressPostalCodeContainer {
-    display: flex;
-    gap: 16px;
-  }
-
-  .CountryContainer {
-    label {
-      font-size: var(--emw--font-size-small, 14px);
-      font-weight: var(--emw--font-weight-light, 300);
-      padding-bottom: 5px;
-    }
-
-
-
-    select {
-      width: 100%;
-      height: 44px;
-      border: 1px solid var(--emw--color-gray-100, #E6E6E6);
-      border-radius: var(--emw--border-radius-medium, 15px);
-      box-sizing: border-box;
-      padding: 5px 15px;
-      font-size: var(--emw--font-size-medium, 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(--emw--color-white, #FFFFFF);
-      background-position: calc(100% - 0.75rem) center;
-
-      &:focus, :focus-within, :focus-visible, :visited {
-        border: 1px solid var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));
-        box-shadow: 0 0 0 1pt var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));
-      }
-    }
-  }
-
-
-  .AddressContainer,
-  .PostalCodeContainer,
-  .CityContainer,
-  .CountryContainer,
-  .NationalityContainer,
-  .MobileContainer {
-    color: var(--emw--registration-contrast, var(--emw--color-typography-cotrast, #444444));
-    display: flex;
-    flex-direction: column;
-    padding-bottom: 30px;
-    position: relative;
-
-    label {
-      font-size: var(--emw--font-size-small, 14px);
-      font-weight: var(--emw--font-weight-light, 300);
-      padding-bottom: 5px;
-    }
-
-    input, select {
-      width: 100%;
-      height: 44px;
-      border-radius: var(--emw--border-radius-medium, 15px);
-      border: 1px solid var(--emfe-w-registration-contrast, var(--emfe-w-color-gray-300, #58586B));
-      box-sizing: border-box;
-      padding: 5px 15px;
-      font-size: var(--emw--font-size-medium, 16px);
-      line-height: 18px;
-      &:focus {
-        border: 2px solid var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));
-        outline: none;
-      }
-    }
-
-    &.InvalidField {
-      input {
-        border: 1px solid var(--emw--color-error, #ed0909);
-        background: var(--emw--color-pale, #FBECF4);
-        color: var(--emw--registration-contrast, var(--emw--color-typography-cotrast, #444444));
-      }
-    }
-
-    &.Hidden {
-      display: none;
-    }
-  }
-
-  .AddressContainer {
-    width: 65%;
-  }
-
-  .PostalCodeContainer {
-    width: 35%;
-  }
-
-  .MobileWrapper {
-    display: flex;
-    gap: 16px;
-    .MobilePrefixSelected {
-      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(--emw--color-white, #FFFFFF);
-      background-position: calc(100% - 0.75rem) center;
-
-      &:focus, :focus-within, :focus-visible, :visited {
-        border: 1px solid var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));
-        box-shadow: 0 0 0 1pt var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));
-      }
-
-    }
-    .MobileInput {
-      width: 70%;
-
-    }
-  }
-
-  .grecaptcha-badge { opacity:0;}
-
-  .FormRequired {
-    color: var(--emw--color-secondary, #E1A749);
-  }
-
-  .InvalidInput {
-    color: var(--emw--color-error, #ed0909);
-    font-size: 10px;
-    line-height: 10px;
-  }
-
-  .ErrorMessage {
-    margin: 0 0 15px 0;
-    font-size: var(--emw--font-size-x-small, 12px);
-    color: var(--emw--color-error, #ed0909);
-  }
-
-  .OffersMethodsWrapper {
-    padding-left: 32px;
-  }
-
-  .Offers,
-  .OffersMethod,
-  .AgeConsent {
-    display: block;
-    position: relative;
-    padding: 5px 0 0 35px;
-    margin-bottom: 16px;
-    font-size: var(--emw--font-size-medium, 16px);
-    user-select: none;
-    line-height: 18px;
-
-    label {
-      font-size: var(--emw--font-size-medium, 16px);
-      cursor: pointer;
-    }
-
-    input {
-      position: absolute;
-      opacity: 0;
-      cursor: pointer;
-      height: 0;
-      width: 0;
-    }
-
-    .Checkmark {
-      position: absolute;
-      top: 0;
-      left: 0;
-      height: 25px;
-      width: 25px;
-      background-color: var(--emw--color-gray-100, #E6E6E6);
-      border-radius: 50%;
-    }
-
-    input:checked ~ .Checkmark {
-      background-color: var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));
-    }
-
-    .Checkmark:after {
-      content: "";
-      position: absolute;
-      display: none;
-      left: 9px;
-      top: 5px;
-      width: 5px;
-      height: 10px;
-      border: solid white;
-      border-width: 0 3px 3px 0;
-      transform: rotate(45deg);
-    }
-
-    input:checked ~ .Checkmark:after {
-      display: block;
-    }
-  }
-
-  .NotificationContainer {
-    margin-top: 32px;
-    p {
-      color: var(--emw--categories-color-secondary, var(--emw--color-secondary, #E1A749));
-      font-size: var(--emw--font-size-small, 14px);
-    }
-  }
-
-  .RegisterError {
-    color: var(--emw--color-error, #ed0909);
-    font-size: var(--emw--font-size-medium, 16px);
-    line-height: 18px;
-  }
-
-  .RegisterStepNext {
-    background-image: linear-gradient(to bottom, color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, black 20%), var(--emw--color-primary, #22B04E), color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, white 30%));
-    border: 2px solid var(--emw--button-border-color, #0E5924);
-    border-radius: var(--emw--button-border-radius, 50px);
-    color: var(--emfe-w-button-typography, var(--emw--button-text-color, #FFFFFF));
-    width: 100%;
-    height: 60px;
-    padding: 0;
-    text-transform: uppercase;
-    font-size: var(--emw--font-size-medium, 16px);
-    cursor: pointer;
-    margin-top: 24px;
-    &[disabled] {
-      background: var(--emw--color-gray-100, #E6E6E6);
-      border: 1px solid var(--emw--color-gray-100, #E6E6E6);
-      cursor: not-allowed;
-    }
-  }
-</style>