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

package/src/GeneralPlayerRegisterFormNd.svelte

@@ -0,0 +1,613 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import { getDevice } from 'rvhelper';
+  import { onMount } from "svelte";
+  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
+  import { TRANSLATIONS } from './translations';
+
+  import '@everymatrix/general-player-register-form-nd-step1';
+  import '@everymatrix/general-player-register-form-nd-step2';
+  import '@everymatrix/general-player-register-form-nd-step3';
+  import '@everymatrix/general-player-sms-verification-form';
+
+  export let endpoint:string = '';
+  export let cmsendpoint:string = '';
+  export let env:string = '';
+  export let session:string = '';
+  export let trackedanalyticsdata:string = '';
+  export let captchakey:string = '';
+  export let lang:string = 'en';
+  export let licenseyears:string = '';
+  export let disabledfields:string = '';
+  export let defaultoptions:string = '';
+  export let dummydata:string = '';
+  export let smsverification = 'false';
+  export let simplepasswordvalidation:string = 'false';
+  export let userroles:string = '';
+  export let clientstyling:string = '';
+  export let clientstylingurl:string = '';
+  export let translationurl:string = '';
+  export let savecredentials:string = '';
+  export let custominputtextswitch:string = 'false';
+  export let personalidlength:string = '13';
+
+  let customStylingContainer:HTMLElement;
+  let displayNone:boolean = false;
+
+  let isLoading:boolean = false;
+
+  let disabledFieldsList:Array<string> = [];
+  let defaultOptionsList: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;
+
+  // @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(TRANSLATIONS).forEach((item:any) => {
+    addNewMessages(item, TRANSLATIONS[item]);
+  });
+
+  const verifyUserConsents = ():void => {
+    fetch(`${endpoint}/v1/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', 'mtWeb');  // replace with ios when we will have a native ios up for this
+      } 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();
+  }
+
+  const retrieveDefaultData = (field: string) => {
+    let result;
+    defaultOptionsList.forEach(e => {
+      if(e.includes(field)) {
+        result = e.split(':')[1].toString();
+      }
+    });
+    return result;
+  }
+
+
+  // @TODO data typescript
+  const createData = (step:string, data:any):void => {
+    defaultOptionsList = defaultoptions.split(',');
+
+    if (step === 'RegisterStepOne') {
+      userData.email = disabledFieldsList.indexOf('email') >= 0 ? retrieveDefaultData('email') ?? 'dummy@dummy.com' : data.userEmail;
+      userData.username = disabledFieldsList.indexOf('username') >= 0 ? retrieveDefaultData('username') ?? 'dummyUsername' : data.userValue;
+      userData.password = disabledFieldsList.indexOf('password') >= 0 ? retrieveDefaultData('password') ?? 'dummyPassword01!' : data.userPassword;
+      userData.securityQuestion = disabledFieldsList.indexOf('securityQuestion') >= 0 ? retrieveDefaultData('securityQuestion') ?? 'dummy question' : data.securityQuestion;
+      userData.securityAnswer = disabledFieldsList.indexOf('securityAnswer') >= 0 ? retrieveDefaultData('securityAnswer') ?? 'dummy answer' : data.securityAnswer;
+      userData.promoCode = disabledFieldsList.indexOf('promoCode') >= 0 ? retrieveDefaultData('promoCode') ?? '' : data.promoCode;
+    }
+    if (step === 'RegisterStepTwo') {
+      userData.title = data.userTitleSelected;
+      userData.firstname = disabledFieldsList.indexOf('firstName') >= 0 ? retrieveDefaultData('firstName') ?? 'dummy first name' : data.userFirstName;
+      userData.lastname = disabledFieldsList.indexOf('lastName') >= 0 ? retrieveDefaultData('lastName') ?? '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 ? retrieveDefaultData('birthPlace') ?? 'ngenge' : data.birthPlace;
+      userData.currency = retrieveDefaultData('currency') ?? data.currencySelected;
+      if (!(disabledFieldsList?.indexOf('personalId') >= 0)) {
+        userData.personalId = data.personalId ?? retrieveDefaultData('personalId') ?? 'dummy personal id';
+      }
+    }
+    if (step === 'RegisterStepThree') {
+      userData.address1 = disabledFieldsList.indexOf('address') >= 0 ? retrieveDefaultData('address') ?? 'dummy address' : data.address;
+      userData.postalCode = disabledFieldsList.indexOf('postalCode') >= 0 ? retrieveDefaultData('postalCode') ?? '000000' : data.postalCode;
+      userData.city = disabledFieldsList.indexOf('city') >= 0 ? retrieveDefaultData('city') ?? 'dummy city' : data.city;
+      userData.country = disabledFieldsList.indexOf('country') >= 0 ? retrieveDefaultData('country') ?? 'dummy country' : data.countrySelected;
+      userData.nationality = disabledFieldsList.indexOf('nationality') >= 0 ? retrieveDefaultData('nationality') ?? 'dummy nationality' : data.nationalitySelected;
+      if (disabledFieldsList.indexOf('mobile') >= 0) {
+        userData.mobile = {
+          prefix:  retrieveDefaultData('phonePrefix') ?? '0040',
+          number: '1234123412'
+        };
+      } else {
+        userData.mobile = {};
+        userData.mobile.prefix = retrieveDefaultData('phonePrefix') ?? data.mobilePrefixSelected;
+        userData.mobile.number = data.mobile;
+        number = `${data.mobilePrefixSelected}${data.mobile}`
+      }
+
+      userData.userConsents = {};
+      // analytics data
+      userData.affiliateMarker = userData.promoCode ? userData.promoCode : 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 => {
+    //Analytics event
+    if(typeof gtag == 'function'){
+      gtag('event', 'Register', {
+        'context': 'GeneralPlayerRegisterForm'
+      });
+    } 
+  }
+
+  // @TODO typescript data model for userData
+  const sendData = async (userData:any):Promise<any> => {
+    userData.language = lang;
+
+    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}/v1/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) => {
+    localStorage.setItem('smsTimer', JSON.stringify(Math.floor(Date.now() / 1000)));
+    try {
+      const res = await fetch(`${endpoint}/v1/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);
+  }
+
+  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 && verifyUserConsents();
+$: cmsendpoint && lang && env && userroles && getCmsData();
+$: playerid && session;
+$: lang && setActiveLanguage();
+$: disabledfields && formatDisabledFields();
+$: clientstyling && customStylingContainer && setClientStyling();
+$: clientstylingurl && customStylingContainer && setClientStylingURL();
+$: translationurl && setTranslationUrl();
+</script>
+<div bind:this={customStylingContainer}>
+  {#if isLoading}
+    <div class="ModalLoader"></div>
+  {:else}
+    <div class="RegisterFormWrapper">
+      <div class="RegisterFormContainer {isMobile ? 'RegisterFormContainerMobile' : ''}">
+        {#if showRegisterStepOne || showRegisterStepTwo || showRegisterStepThree}
+          <div class="RegisterSteps" bind:this={scrollSteps}>
+            <div class="RegisterFirstStepDash {showRegisterStepOne || (!showRegisterStepOne && showRegisterStepTwo) || (!showRegisterStepOne && !showRegisterStepTwo && showRegisterStepThree) ? 'RegisterStepDashColor' : ''}"></div>
+            <div class="RegisterSecondStepDash {showRegisterStepTwo || (!showRegisterStepOne && !showRegisterStepTwo && showRegisterStepThree) ? 'RegisterStepDashColor' : ''}"></div>
+            <div class="RegisterThirdStepDash {showRegisterStepThree ? 'RegisterStepDashColor' : ''}"></div>
+          </div>
+        {/if}
+        {#if showRegisterStepOne}
+          <div class="RegisterFormStep1">
+            <general-player-register-form-nd-step1 {lang} {disabledfields} {defaultoptions} {dummydata} {custominputtextswitch} {simplepasswordvalidation} {clientstyling} {clientstylingurl} {savecredentials}  {translationurl}/>
+          </div>
+        {/if}
+        {#if showRegisterStepTwo}
+          <div class="RegisterFormStep2">
+            <general-player-register-form-nd-step2 {endpoint} {lang} {licenseyears} {disabledfields} {defaultoptions} {dummydata} {personalidlength} {clientstyling} {clientstylingurl} {translationurl}/>
+          </div>
+        {/if}
+        {#if showRegisterStepThree}
+          <div class="RegisterFormStep3">
+            <general-player-register-form-nd-step3 {userconsentsexist} {termsconditions} {smsoffers} {emailmarketing} {endpoint} {captchakey} {lang} {defaultoptions} {disabledfields} {dummydata} {clientstyling} {clientstylingurl} {translationurl}/>
+          </div>
+        {/if}
+        {#if smsverification && showSmsVerification}
+          {#if !smsSendApiFailed}
+            <general-player-sms-verification-form
+              {endpoint}
+              {session}
+              {number}
+              {playerid}
+              tokenid={smstokenid}
+              {clientstyling}
+              {clientstylingurl}
+              >
+            </general-player-sms-verification-form>
+          {:else}
+            <p class="SMSErrorText">{$_('error')}</p>
+          {/if}
+        {:else if smsSendApiFailed}
+          <!-- this case is valid only until NW fixes the internal error on the /player/sms/token which reproduces aprox 1/5 cases. was added as to avoid empty screen due to untreated error -->
+          <p class="SMSErrorText">{$_('error')}</p>
+        {/if}
+        {#if showConfirmation}
+          <div class="RegisterConfirmation">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.95 51"><defs><style>.a{fill:#var(--emw--color-valid, var(--emw--color-green, #48952a));}</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">{accountCreationTitle}</h2>
+            <p class="RegisterConfirmationSubtitle">{accountCreationSubTitle}</p>
+            <p class="RegisterConfirmationNote">{accountCreationMessage}</p>
+            <button class="RegisterConfirmationGoToLogin" on:click={switchToLogin}>{$_('goToLoginButton')}</button>
+          </div>
+        {/if}
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+
+
+  .RegisterFormWrapper {
+    background: var(--emw--registration-color-bg, var(--emw--color-gray-50, #F9F8F8));
+    border-radius: 15px;
+  }
+
+  .RegisterFormContainer {
+    padding: 25px;
+    height: 404px;
+    overflow-y: auto;
+    scrollbar-color: var(--emw--color-gray-100, #E6E6E6) var(--emw--color-gray-50, #F9F8F8);
+    scrollbar-width: thin;
+    &.RegisterFormContainerMobile {
+      padding: 40px 20px;
+      height: 65vh;
+      overflow-y: scroll;
+    }
+  }
+
+  .RegisterFormContainer::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  /* Track */
+  .RegisterFormContainer::-webkit-scrollbar-track {
+    background: var(--emw--color-gray-50, #F9F8F8);
+  }
+
+  /* Handle */
+  .RegisterFormContainer::-webkit-scrollbar-thumb {
+    background: var(--emw--color-gray-100, #E6E6E6);
+  }
+
+  .RegisterSteps {
+    display: flex;
+    gap: 10px;
+    padding: 20px 0 30px;
+  }
+
+  .RegisterFirstStepDash,
+  .RegisterSecondStepDash,
+  .RegisterThirdStepDash {
+    width: 50px;
+    height: 2px;
+    background-color: var(--emw--color-gray-100, #E6E6E6);
+  }
+
+  .RegisterStepDashColor {
+    background-color: var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));
+  }
+
+  .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));
+    font-family: var(--emw--button-typography);
+    width: 100%;
+    height: 60px;
+    padding: 0;
+    text-transform: uppercase;
+    font-size: var(--emw--font-size-medium, 16px);
+    cursor: pointer;
+    margin-top: 24px;
+  }
+
+  .SMSErrorText {
+    height: 80%;
+    display: flex;
+    align-items: center;
+  }
+
+  .RegisterConfirmation {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    margin-top: 60px;
+    svg {
+      width: 74px;
+    }
+    .RegisterConfirmationTitle {
+      color: var(--emw--color-valid, var(--emw--color-valid, #48952a));
+      font-size: 24px;
+      font-weight: var(--emw--font-weight-normal, 400);
+      text-transform: uppercase;
+      margin-bottom: 0;
+    }
+    .RegisterConfirmationSubtitle {
+      color: var(--emw--registration-contrast, var(--emw--color-typography-cotrast, #444444));
+      font-size: var(--emw--font-size-medium, 16px);
+      line-height: 19px;
+      margin-bottom: 24px;
+    }
+    .RegisterConfirmationNote {
+      color: var(--emw--registration-contrast, var(--emw--color-typography-cotrast, #444444));
+      font-size: var(--emw--font-size-medium, 16px);
+      line-height: 22px;
+    }
+  }
+
+  .RegisterConfirmationGoToLogin {
+    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;
+  }
+</style>

package/src/i18n.js

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

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

package/src/translations.js

@@ -0,0 +1,42 @@
+export const TRANSLATIONS = {
+  "en": {
+    "goToLoginButton": "Go To Login",
+    "error": "We encountered an issue. Please go to Login to receive your SMS code."
+  },
+  "zhs": {
+    "goToLoginButton": "去登錄",
+    "error": "我们遇到了一个问题。请转到登录以接收您的短信代码"
+  },
+  "fr": {
+    "goToLoginButton": "Aller à la connexion",
+    "error": "Nous avons rencontré un problème. Veuillez vous connecter pour recevoir votre code SMS."
+  },
+  "tr": {
+    "goToLoginButton": "Giriş Yap'a Git",
+    "error": "Bir sorunla karşılaştık. SMS kodunuzu almak için lütfen Giriş kısmına gidin."
+  },
+  "ro": {
+    "goToLoginButton": "Catre Autentificare",
+    "error": "Am întâmpinat o problemă. Vă rugăm să accesați Login pentru a primi codul SMS."
+  },
+  "es": {
+    "goToLoginButton": "Ir a Inicio de Sesión",
+    "error": "Encontramos un problema. Vaya a Iniciar sesión para recibir su código SMS."
+  },
+  "pt": {
+    "goToLoginButton": "Ir para o Login",
+    "error": "Encontramos um problema. Vá para Login para receber seu código SMS."
+  },
+  "hr": {
+    "goToLoginButton": "Idi na Prijava",
+    "error": "Naišli smo problem. Idite na Prijava kako biste primili svoj SMS kod."
+  },
+  "pt-br": {
+    "goToLoginButton": "Ir ao início da sessão",
+    "error": "Descobrimos um problema. Por favor, vá ao início da sessão para receber seu código SMS."
+  },
+  "es-mx": {
+    "goToLoginButton": "Ir a inicio de sesión",
+    "error": "Encontramos un problema. Por favor vaya al inicio de sesión para recibir su código SMS."
+  }
+}