@everymatrix/general-player-register-form-step3-nd 1.37.4

package/src/GeneralPlayerRegisterFormStep3Nd.svelte

@@ -0,0 +1,780 @@
+<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>