@everymatrix/general-registration 1.10.16 → 1.10.17

package/dist/cjs/checkbox-input_11.cjs.entry.js

@@ -7,18 +7,15 @@ const index = require('./index-a69a5278.js');
 const DEFAULT_LANGUAGE$1 = 'en';
 const SUPPORTED_LANGUAGES$1 = ['ro', 'en'];
 const TRANSLATIONS$1 = {
-  en: {
-    dateError: 'The selected date should be between {min} and {max}',
-    numberLengthError: 'The number should be between {min} and {max}',
-    lengthError: `The length should be between {minLength} and {maxLength}`,
-    requiredError: 'This input is required.',
-    nextButton: 'Next',
-    backButton: 'Back',
-    doneButton: 'Done'
+  "en": {
+    "dateError": 'The selected date should be between {min} and {max}',
+    "numberLengthError": 'The number should be between {min} and {max}',
+    "lengthError": `The length should be between {minLength} and {maxLength}`,
+    "requiredError": 'This input is required.',
   },
-  ro: {
-    lengthError: `Cuvântul introdus este prea scurt. {minLength} and {maxLength}`,
-    requiredError: 'Acest câmp este obligatoriu.'
+  "ro": {
+    "lengthError": `Cuvântul introdus este prea scurt. {minLength} and {maxLength}`,
+    "requiredError": 'Acest câmp este obligatoriu.'
   }
 };
 const translate$2 = (key, customLang, values) => {
@@ -80,8 +77,6 @@ const CheckboxInput = class {
       this.limitStylingAppends = true;
     }
     // end custom styling area
-  }
-  componentDidLoad() {
     if (this.defaultValue) {
       this.value = this.defaultValue;
       this.valueHandler({ name: this.name, value: this.value });
@@ -102,8 +97,11 @@ const CheckboxInput = class {
       return translate$2('requiredError', this.language);
     }
   }
+  renderLabel() {
+    return (index.h("label", { class: 'checkbox__label', htmlFor: `${this.name}__input` }, index.h("div", { innerHTML: `${this.displayName} ${this.validation.mandatory ? '*' : ''}` })));
+  }
   render() {
-    return index.h("div", { class: 'checkbox__wrapper', ref: el => this.stylingContainer = el }, index.h("input", { type: "checkbox", id: `${this.name}__input`, ref: (el) => this.inputReference = el, name: this.name, checked: this.defaultValue == "true", readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), index.h("label", { class: 'checkbox__label', htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), index.h("small", { class: 'checkbox__error-message' }, this.errorMessage));
+    return index.h("div", { class: 'checkbox__wrapper', ref: el => this.stylingContainer = el }, index.h("input", { type: "checkbox", id: `${this.name}__input`, ref: (el) => this.inputReference = el, name: this.name, checked: this.defaultValue == "true", readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), this.renderLabel(), index.h("small", { class: 'checkbox__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -23097,14 +23095,14 @@ const DateInput = class {
       this.limitStylingAppends = true;
     }
     // end custom styling area
-  }
-  componentDidLoad() {
-    this.inputReference = this.element.shadowRoot.querySelector('input');
     if (this.defaultValue) {
       this.value = this.defaultValue;
       this.valueHandler({ name: this.name, value: this.value });
     }
   }
+  componentDidLoad() {
+    this.inputReference = this.element.shadowRoot.querySelector('input');
+  }
   handleInput(event) {
     this.value = event.target.value;
     this.errorMessage = this.setErrorMessage();
@@ -23189,8 +23187,6 @@ const EmailInput = class {
       this.limitStylingAppends = true;
     }
     // end custom styling area
-  }
-  componentDidLoad() {
     if (this.defaultValue) {
       this.value = this.defaultValue;
       this.valueHandler({ name: this.name, value: this.value });
@@ -23283,18 +23279,16 @@ GeneralInput.style = generalInputCss;
 const DEFAULT_LANGUAGE = 'en';
 const SUPPORTED_LANGUAGES = ['ro', 'en'];
 const TRANSLATIONS = {
-  en: {
-    dateError: 'The selected date should be between {min} and {max}',
-    numberLengthError: 'The number should be between {min} and {max}',
-    lengthError: `The length should be between {minLength} and {maxLength}`,
-    requiredError: 'This input is required.',
-    nextButton: 'Next',
-    backButton: 'Back',
-    doneButton: 'Done'
-  },
-  ro: {
-    lengthError: `Cuvântul introdus este prea scurt. {minLength} and {maxLength}`,
-    requiredError: 'Acest câmp este obligatoriu.'
+  "en": {
+    "nextButton": 'Next',
+    "backButton": 'Back',
+    "doneButton": 'Done',
+    "GmErr_BadRequest_Duplicate_User": 'A user with this information already exists.',
+    "GmErr_BadRequest_ModelValidationFailed": 'Something went wrong... Please try again.',
+    "GmErr_BadInternalConfigs": 'Something went wrong... Please try again.',
+    "GmErr_Unauthorized": 'Something went wrong... Please try again.',
+    "GmErr_NotFound": 'Something went wrong... Please try again.',
+    "GmErr_UnexpectedException": 'Something went wrong... Please try again.',
   }
 };
 const translate = (key, customLang, values) => {
@@ -23309,7 +23303,7 @@ const translate = (key, customLang, values) => {
   return translation;
 };
 
-const generalRegistrationCss = "*,\n*::before,\n*::after {\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n}\n\n.registration {\n  font-family: \"Roboto\";\n  font-style: normal;\n  font-family: sans-serif;\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  width: 100%;\n  height: 100%;\n  container-type: inline-size;\n}\n.registration__form {\n  display: grid;\n  grid-template-columns: repeat(1, 1fr);\n  gap: 40px;\n  justify-items: stretch;\n  align-content: flex-start;\n  overflow: auto;\n  width: 100%;\n  height: 100%;\n}\n.registration__buttons-wrapper {\n  display: flex;\n  flex-direction: row-reverse;\n  justify-content: space-around;\n  align-items: center;\n}\n.registration__button {\n  text-transform: uppercase;\n  width: 250px;\n  height: 40px;\n  border-radius: 3px;\n}\n.registration__button:hover {\n  opacity: 0.8;\n}\n.registration__button:active {\n  opacity: 1;\n}\n.registration__button--next {\n  color: #FFFFFF;\n  background-color: #B0B0B0;\n  border: none;\n}\n.registration__button--back {\n  color: #B0B0B0;\n  background-color: #FFFFFF;\n  border: 2px solid #B0B0B0;\n}\n.registration__button--disabled {\n  opacity: 0.5;\n}\n.registration__button--disabled:hover {\n  opacity: 0.5;\n}\n.registration__button--first-step {\n  display: none;\n}\n\n@container (min-width: 450px) {\n  .registration__form {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .registration__buttons-wrapper {\n    flex-direction: column;\n    gap: 15px;\n  }\n}";
+const generalRegistrationCss = "*,\n*::before,\n*::after {\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n}\n\n.registration {\n  font-family: \"Roboto\";\n  font-style: normal;\n  font-family: sans-serif;\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  width: 100%;\n  height: 100%;\n  container-type: inline-size;\n}\n.registration__error-message {\n  color: #cc0000b3;\n}\n.registration__form {\n  display: grid;\n  grid-template-columns: repeat(1, 1fr);\n  gap: 40px;\n  justify-items: stretch;\n  align-content: flex-start;\n  overflow: auto;\n  width: 100%;\n  height: 100%;\n}\n.registration__buttons-wrapper {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  align-items: center;\n}\n.registration__button {\n  text-transform: uppercase;\n  width: 250px;\n  height: 40px;\n  border-radius: 3px;\n}\n.registration__button:hover {\n  opacity: 0.8;\n}\n.registration__button:active {\n  opacity: 1;\n}\n.registration__button--next {\n  color: #FFFFFF;\n  background-color: #B0B0B0;\n  border: none;\n}\n.registration__button--back {\n  color: #B0B0B0;\n  background-color: #FFFFFF;\n  border: 2px solid #B0B0B0;\n}\n.registration__button--disabled {\n  opacity: 0.5;\n}\n.registration__button--disabled:hover {\n  opacity: 0.5;\n}\n.registration__button--first-step {\n  display: none;\n}\n\n@container (min-width: 450px) {\n  .registration__form {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .registration__buttons-wrapper {\n    flex-direction: row-reverse;\n    gap: 15px;\n  }\n}";
 
 const GeneralRegistration = class {
   constructor(hostRef) {
@@ -23363,6 +23357,7 @@ const GeneralRegistration = class {
     window.postMessage({ type: 'registrationStepUpdated', step: this.registrationStep }, window.location.href);
   }
   setFormValidity() {
+    this.errorMessage = '';
     this.isFormValid = !this.getInvalidStatus(this.listOfInputs);
   }
   checkInputsValidityHandler(event) {
@@ -23435,7 +23430,6 @@ const GeneralRegistration = class {
         }
         if (state.type == 'values') {
           const savedValues = savedUserData[this.registrationStep].registerUserData;
-          console.log(savedValues);
           this.listOfInputValues = Object.keys(savedValues).map(name => {
             return { name, value: savedValues[name].value, isDuplicate: savedValues[name].isDuplicate };
           });
@@ -23506,8 +23500,20 @@ const GeneralRegistration = class {
     };
     fetch(url.href, options)
       .then((res) => {
-      if (res.status >= 300) {
-        throw new Error('err');
+      if (!res.ok) {
+        return res.json().then(error => {
+          this.errorCode = error.thirdPartyResponse.errorCode;
+          // Show the idomsoft error if it is the case
+          if (this.errorCode == 'GmErr_BadRequest_IdomsoftVerification_ShouldRetry') {
+            this.errorMessage = error.thirdPartyResponse.message;
+          }
+          else if (this.errorCode == 'GmErr_BadRequest') {
+            this.errorMessage = error.thirdPartyResponse.message;
+          }
+          else {
+            this.errorMessage = translate(`${this.errorCode}`, this.language) || this.errorCode;
+          }
+        });
       }
       return res.json();
     })
@@ -23533,6 +23539,8 @@ const GeneralRegistration = class {
             this.stepsStateMachine({ event: 'set', type: 'inputs' });
           });
         }
+        // Set it in local storage.
+        this.stepsStateMachine({ event: 'set', type: 'inputs' });
       }
     })
       .catch((err) => {
@@ -23644,7 +23652,7 @@ const GeneralRegistration = class {
     if (this.isLoading) {
       return index.h("p", null, "Please wait, loading ...");
     }
-    return (index.h("div", { class: `registration  registration__${this.registrationStep}`, ref: el => this.stylingContainer = el }, index.h("form", { action: '.', id: 'RegistrationForm', class: 'registration__form' }, this.renderInputs()), this.renderButtons()));
+    return (index.h("div", { class: `registration  registration__${this.registrationStep}`, ref: el => this.stylingContainer = el }, index.h("form", { action: '.', id: 'RegistrationForm', class: 'registration__form' }, this.renderInputs()), index.h("p", { class: 'registration__error-message' }, this.errorMessage), this.renderButtons()));
   }
   static get watchers() { return {
     "registrationStep": ["sendStep"],
@@ -23665,6 +23673,7 @@ const NumberInput = class {
      */
     this.clientStyling = '';
     this.limitStylingAppends = false;
+    this.validationPattern = '';
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -23688,6 +23697,9 @@ const NumberInput = class {
   valueHandler(inputValueEvent) {
     this.sendInputValue.emit(inputValueEvent);
   }
+  connectedCallback() {
+    this.validationPattern = this.setPattern();
+  }
   componentDidRender() {
     // start custom styling area
     if (!this.limitStylingAppends && this.stylingContainer) {
@@ -23696,8 +23708,6 @@ const NumberInput = class {
       this.limitStylingAppends = true;
     }
     // end custom styling area
-  }
-  componentDidLoad() {
     if (this.defaultValue) {
       this.value = this.defaultValue;
       this.valueHandler({ name: this.name, value: this.value });
@@ -23713,7 +23723,17 @@ const NumberInput = class {
   setValidity() {
     return this.inputReference.validity.valid;
   }
+  setPattern() {
+    var _a, _b;
+    if (((_a = this.validation.custom) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      return (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.pattern;
+    }
+  }
   setErrorMessage() {
+    var _a;
+    if (this.inputReference.validity.patternMismatch) {
+      return (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorMessage;
+    }
     if (this.inputReference.validity.rangeUnderflow || this.inputReference.validity.rangeOverflow) {
       return translate$2('numberLengthError', this.language, { values: { min: this.validation.min, max: this.validation.max } });
     }
@@ -23723,7 +23743,7 @@ const NumberInput = class {
   }
   render() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'number__input--invalid';
-    return index.h("div", { class: 'number__wrapper', ref: el => this.stylingContainer = el }, index.h("input", { ref: (el) => this.inputReference = el, type: "number", value: this.defaultValue, readOnly: this.autofilled, id: `${this.name}__input`, class: `number__input ${invalidClass}`, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onBlur: (e) => this.handleInput(e) }), index.h("label", { class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("small", { class: 'number__error-message' }, this.errorMessage));
+    return index.h("div", { class: 'number__wrapper', ref: el => this.stylingContainer = el }, index.h("input", { ref: (el) => this.inputReference = el, type: "number", value: this.defaultValue, readOnly: this.autofilled, id: `${this.name}__input`, class: `number__input ${invalidClass}`, pattern: this.validationPattern, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onBlur: (e) => this.handleInput(e) }), index.h("label", { class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("small", { class: 'number__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -24586,14 +24606,14 @@ const PasswordInput = class {
       this.limitStylingAppends = true;
     }
     // end custom styling area
-  }
-  componentDidLoad() {
-    this.inputReference = this.element.shadowRoot.querySelector('input');
     if (this.defaultValue) {
       this.value = this.defaultValue;
       this.valueHandler({ name: this.name, value: this.value });
     }
   }
+  componentDidLoad() {
+    this.inputReference = this.element.shadowRoot.querySelector('input');
+  }
   handleInput(event) {
     this.value = event.target.value;
     this.errorMessage = this.setErrorMessage();
@@ -29114,14 +29134,14 @@ const SelectInput = class {
       this.limitStylingAppends = true;
     }
     // end custom styling area
-  }
-  componentDidLoad() {
-    this.inputReference = this.element.shadowRoot.querySelector('input');
     if (this.defaultValue) {
       this.value = this.defaultValue;
       this.valueHandler({ name: this.name, value: this.value });
     }
   }
+  componentDidLoad() {
+    this.inputReference = this.element.shadowRoot.querySelector('input');
+  }
   getOptions() {
     // TEMPORARY FOR DEMO PURPOSES UNTIL NORWAY CONFIGURES AN ACTUAL ENDPOINT...
     const url = new URL("https://demo-api.stage.norway.everymatrix.com/v1/player/countries");
@@ -29225,8 +29245,6 @@ const TelInput = class {
       this.limitStylingAppends = true;
     }
     // end custom styling area
-  }
-  componentDidLoad() {
     if (this.defaultValue) {
       this.value = `${this.prefixValue}|${this.phoneValue}`;
       this.valueHandler({ name: this.name, value: this.value });
@@ -29277,7 +29295,7 @@ const TelInput = class {
   }
   render() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'tel__wrapper--flex--invalid';
-    return index.h("div", { class: 'tel__wrapper', ref: el => this.stylingContainer = el }, index.h("div", { class: `tel__wrapper--flex ${invalidClass}` }, index.h("vaadin-combo-box", { class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onBlur: (e) => this.prefixValue = e.target.value }), index.h("input", { type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onBlur: (e) => this.handleInput(e) })), index.h("label", { class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("small", { class: 'tel__error-message' }, this.errorMessage));
+    return index.h("div", { class: 'tel__wrapper', ref: el => this.stylingContainer = el }, index.h("div", { class: `tel__wrapper--flex ${invalidClass}` }, index.h("vaadin-combo-box", { class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.prefixValue = e.target.value }), index.h("input", { type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onBlur: (e) => this.handleInput(e) })), index.h("label", { class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("small", { class: 'tel__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -29346,8 +29364,6 @@ const TextInput = class {
       this.limitStylingAppends = true;
     }
     // end custom styling area
-  }
-  componentDidLoad() {
     if (this.defaultValue) {
       this.value = this.defaultValue;
       this.valueHandler({ name: this.name, value: this.value });

package/dist/cjs/general-registration.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["checkbox-input_11.cjs",[[1,"general-registration",{"endpoint":[513],"language":[513],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationsUrl":[513,"translations-url"],"errorMessage":[32],"isFormValid":[32],"listOfInputs":[32],"isLoading":[32],"registrationStep":[32]},[[0,"sendValidityState","checkInputsValidityHandler"],[0,"sendInputValue","getInputsValueHandler"]]],[1,"general-input",{"type":[513],"name":[513],"displayName":[513,"display-name"],"action":[513],"validation":[16],"options":[520],"language":[513],"autofilled":[516],"defaultValue":[520,"default-value"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[520,"client-styling"]}],[1,"checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"date-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"email-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"number-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"password-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"radio-input",{"name":[513],"displayName":[513,"display-name"],"optionsGroup":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"select-input",{"name":[513],"displayName":[513,"display-name"],"action":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"tel-input",{"name":[513],"displayName":[513,"display-name"],"showLabels":[516,"show-labels"],"action":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]}],[1,"text-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"rules":[513],"language":[513],"checkValidity":[516,"check-validity"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]]]]], options);
+  return index.bootstrapLazy([["checkbox-input_11.cjs",[[1,"general-registration",{"endpoint":[513],"language":[513],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationsUrl":[513,"translations-url"],"errorMessage":[32],"isFormValid":[32],"listOfInputs":[32],"isLoading":[32],"registrationStep":[32]},[[0,"sendValidityState","checkInputsValidityHandler"],[0,"sendInputValue","getInputsValueHandler"]]],[1,"general-input",{"type":[513],"name":[513],"displayName":[513,"display-name"],"action":[513],"validation":[16],"options":[520],"language":[513],"autofilled":[516],"defaultValue":[520,"default-value"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[520,"client-styling"]}],[1,"checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"date-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"email-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"number-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"password-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"radio-input",{"name":[513],"displayName":[513,"display-name"],"optionsGroup":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"select-input",{"name":[513],"displayName":[513,"display-name"],"action":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"tel-input",{"name":[513],"displayName":[513,"display-name"],"showLabels":[516,"show-labels"],"action":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]}],[1,"text-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"checkValidity":[516,"check-validity"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]]]]], options);
 });

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["checkbox-input_11.cjs",[[1,"general-registration",{"endpoint":[513],"language":[513],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationsUrl":[513,"translations-url"],"errorMessage":[32],"isFormValid":[32],"listOfInputs":[32],"isLoading":[32],"registrationStep":[32]},[[0,"sendValidityState","checkInputsValidityHandler"],[0,"sendInputValue","getInputsValueHandler"]]],[1,"general-input",{"type":[513],"name":[513],"displayName":[513,"display-name"],"action":[513],"validation":[16],"options":[520],"language":[513],"autofilled":[516],"defaultValue":[520,"default-value"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[520,"client-styling"]}],[1,"checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"date-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"email-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"number-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"password-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"radio-input",{"name":[513],"displayName":[513,"display-name"],"optionsGroup":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"select-input",{"name":[513],"displayName":[513,"display-name"],"action":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"tel-input",{"name":[513],"displayName":[513,"display-name"],"showLabels":[516,"show-labels"],"action":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]}],[1,"text-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"rules":[513],"language":[513],"checkValidity":[516,"check-validity"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]]]]], options);
+  return index.bootstrapLazy([["checkbox-input_11.cjs",[[1,"general-registration",{"endpoint":[513],"language":[513],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationsUrl":[513,"translations-url"],"errorMessage":[32],"isFormValid":[32],"listOfInputs":[32],"isLoading":[32],"registrationStep":[32]},[[0,"sendValidityState","checkInputsValidityHandler"],[0,"sendInputValue","getInputsValueHandler"]]],[1,"general-input",{"type":[513],"name":[513],"displayName":[513,"display-name"],"action":[513],"validation":[16],"options":[520],"language":[513],"autofilled":[516],"defaultValue":[520,"default-value"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[520,"client-styling"]}],[1,"checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"date-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"email-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"number-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"password-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"radio-input",{"name":[513],"displayName":[513,"display-name"],"optionsGroup":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"select-input",{"name":[513],"displayName":[513,"display-name"],"action":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"tel-input",{"name":[513],"displayName":[513,"display-name"],"showLabels":[516,"show-labels"],"action":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]}],[1,"text-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"checkValidity":[516,"check-validity"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]]]]], options);
   });
 };
 

package/dist/collection/components/general-registration/general-registration.css

@@ -17,6 +17,9 @@
   height: 100%;
   container-type: inline-size;
 }
+.registration__error-message {
+  color: #cc0000b3;
+}
 .registration__form {
   display: grid;
   grid-template-columns: repeat(1, 1fr);
@@ -29,7 +32,7 @@
 }
 .registration__buttons-wrapper {
   display: flex;
-  flex-direction: row-reverse;
+  flex-direction: column;
   justify-content: space-around;
   align-items: center;
 }
@@ -71,7 +74,7 @@
   }
 
   .registration__buttons-wrapper {
-    flex-direction: column;
+    flex-direction: row-reverse;
     gap: 15px;
   }
 }

package/dist/collection/components/general-registration/general-registration.js

@@ -1,5 +1,5 @@
 import { Component, h, Listen, Prop, State, Watch, Event } from '@stencil/core';
-import { translate } from '../../../../general-input/src/utils/locale.utils';
+import { translate } from '../../utils/locale.utils';
 import '@everymatrix/general-input';
 export class GeneralRegistration {
   constructor() {
@@ -50,6 +50,7 @@ export class GeneralRegistration {
     window.postMessage({ type: 'registrationStepUpdated', step: this.registrationStep }, window.location.href);
   }
   setFormValidity() {
+    this.errorMessage = '';
     this.isFormValid = !this.getInvalidStatus(this.listOfInputs);
   }
   checkInputsValidityHandler(event) {
@@ -122,7 +123,6 @@ export class GeneralRegistration {
         }
         if (state.type == 'values') {
           const savedValues = savedUserData[this.registrationStep].registerUserData;
-          console.log(savedValues);
           this.listOfInputValues = Object.keys(savedValues).map(name => {
             return { name, value: savedValues[name].value, isDuplicate: savedValues[name].isDuplicate };
           });
@@ -193,8 +193,20 @@ export class GeneralRegistration {
     };
     fetch(url.href, options)
       .then((res) => {
-      if (res.status >= 300) {
-        throw new Error('err');
+      if (!res.ok) {
+        return res.json().then(error => {
+          this.errorCode = error.thirdPartyResponse.errorCode;
+          // Show the idomsoft error if it is the case
+          if (this.errorCode == 'GmErr_BadRequest_IdomsoftVerification_ShouldRetry') {
+            this.errorMessage = error.thirdPartyResponse.message;
+          }
+          else if (this.errorCode == 'GmErr_BadRequest') {
+            this.errorMessage = error.thirdPartyResponse.message;
+          }
+          else {
+            this.errorMessage = translate(`${this.errorCode}`, this.language) || this.errorCode;
+          }
+        });
       }
       return res.json();
     })
@@ -220,6 +232,8 @@ export class GeneralRegistration {
             this.stepsStateMachine({ event: 'set', type: 'inputs' });
           });
         }
+        // Set it in local storage.
+        this.stepsStateMachine({ event: 'set', type: 'inputs' });
       }
     })
       .catch((err) => {
@@ -335,6 +349,7 @@ export class GeneralRegistration {
     }
     return (h("div", { class: `registration  registration__${this.registrationStep}`, ref: el => this.stylingContainer = el },
       h("form", { action: '.', id: 'RegistrationForm', class: 'registration__form' }, this.renderInputs()),
+      h("p", { class: 'registration__error-message' }, this.errorMessage),
       this.renderButtons()));
   }
   static get is() { return "general-registration"; }

package/dist/collection/utils/locale.utils.js

@@ -1,20 +1,33 @@
 const DEFAULT_LANGUAGE = 'en';
 const SUPPORTED_LANGUAGES = ['ro', 'en'];
 const TRANSLATIONS = {
-  en: {
-    dateError: 'The selected date should be between {min} and {max}',
-    numberLengthError: 'The number should be between {min} and {max}',
-    lengthError: `The length should be between {minLength} and {maxLength}`,
-    requiredError: 'This input is required.',
-    nextButton: 'Next',
-    backButton: 'Back',
-    doneButton: 'Done'
-  },
-  ro: {
-    lengthError: `Cuvântul introdus este prea scurt. {minLength} and {maxLength}`,
-    requiredError: 'Acest câmp este obligatoriu.'
+  "en": {
+    "nextButton": 'Next',
+    "backButton": 'Back',
+    "doneButton": 'Done',
+    "GmErr_BadRequest_Duplicate_User": 'A user with this information already exists.',
+    "GmErr_BadRequest_ModelValidationFailed": 'Something went wrong... Please try again.',
+    "GmErr_BadInternalConfigs": 'Something went wrong... Please try again.',
+    "GmErr_Unauthorized": 'Something went wrong... Please try again.',
+    "GmErr_NotFound": 'Something went wrong... Please try again.',
+    "GmErr_UnexpectedException": 'Something went wrong... Please try again.',
   }
 };
+export const getTranslations = (url) => {
+  // fetch url, get the data, replace the TRANSLATIONS content
+  return new Promise((resolve) => {
+    fetch(url)
+      .then((res) => res.json())
+      .then((data) => {
+      Object.keys(data).forEach((item) => {
+        for (let key in data[item]) {
+          TRANSLATIONS[item][key] = data[item][key];
+        }
+      });
+      resolve(true);
+    });
+  });
+};
 export const translate = (key, customLang, values) => {
   const lang = customLang;
   let translation = TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];

package/dist/components/checkbox-input2.js

@@ -50,8 +50,6 @@ const CheckboxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       this.limitStylingAppends = true;
     }
     // end custom styling area
-  }
-  componentDidLoad() {
     if (this.defaultValue) {
       this.value = this.defaultValue;
       this.valueHandler({ name: this.name, value: this.value });
@@ -72,8 +70,11 @@ const CheckboxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       return translate('requiredError', this.language);
     }
   }
+  renderLabel() {
+    return (h("label", { class: 'checkbox__label', htmlFor: `${this.name}__input` }, h("div", { innerHTML: `${this.displayName} ${this.validation.mandatory ? '*' : ''}` })));
+  }
   render() {
-    return h("div", { class: 'checkbox__wrapper', ref: el => this.stylingContainer = el }, h("input", { type: "checkbox", id: `${this.name}__input`, ref: (el) => this.inputReference = el, name: this.name, checked: this.defaultValue == "true", readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), h("label", { class: 'checkbox__label', htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), h("small", { class: 'checkbox__error-message' }, this.errorMessage));
+    return h("div", { class: 'checkbox__wrapper', ref: el => this.stylingContainer = el }, h("input", { type: "checkbox", id: `${this.name}__input`, ref: (el) => this.inputReference = el, name: this.name, checked: this.defaultValue == "true", readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), this.renderLabel(), h("small", { class: 'checkbox__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],

package/dist/components/date-input2.js

@@ -5097,14 +5097,14 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.limitStylingAppends = true;
     }
     // end custom styling area
-  }
-  componentDidLoad() {
-    this.inputReference = this.element.shadowRoot.querySelector('input');
     if (this.defaultValue) {
       this.value = this.defaultValue;
       this.valueHandler({ name: this.name, value: this.value });
     }
   }
+  componentDidLoad() {
+    this.inputReference = this.element.shadowRoot.querySelector('input');
+  }
   handleInput(event) {
     this.value = event.target.value;
     this.errorMessage = this.setErrorMessage();

package/dist/components/email-input2.js

@@ -57,8 +57,6 @@ const EmailInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.limitStylingAppends = true;
     }
     // end custom styling area
-  }
-  componentDidLoad() {
     if (this.defaultValue) {
       this.value = this.defaultValue;
       this.valueHandler({ name: this.name, value: this.value });

package/dist/components/general-registration.js

@@ -13,18 +13,16 @@ import { d as defineCustomElement$2 } from './text-input2.js';
 const DEFAULT_LANGUAGE = 'en';
 const SUPPORTED_LANGUAGES = ['ro', 'en'];
 const TRANSLATIONS = {
-  en: {
-    dateError: 'The selected date should be between {min} and {max}',
-    numberLengthError: 'The number should be between {min} and {max}',
-    lengthError: `The length should be between {minLength} and {maxLength}`,
-    requiredError: 'This input is required.',
-    nextButton: 'Next',
-    backButton: 'Back',
-    doneButton: 'Done'
-  },
-  ro: {
-    lengthError: `Cuvântul introdus este prea scurt. {minLength} and {maxLength}`,
-    requiredError: 'Acest câmp este obligatoriu.'
+  "en": {
+    "nextButton": 'Next',
+    "backButton": 'Back',
+    "doneButton": 'Done',
+    "GmErr_BadRequest_Duplicate_User": 'A user with this information already exists.',
+    "GmErr_BadRequest_ModelValidationFailed": 'Something went wrong... Please try again.',
+    "GmErr_BadInternalConfigs": 'Something went wrong... Please try again.',
+    "GmErr_Unauthorized": 'Something went wrong... Please try again.',
+    "GmErr_NotFound": 'Something went wrong... Please try again.',
+    "GmErr_UnexpectedException": 'Something went wrong... Please try again.',
   }
 };
 const translate = (key, customLang, values) => {
@@ -39,7 +37,7 @@ const translate = (key, customLang, values) => {
   return translation;
 };
 
-const generalRegistrationCss = "*,\n*::before,\n*::after {\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n}\n\n.registration {\n  font-family: \"Roboto\";\n  font-style: normal;\n  font-family: sans-serif;\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  width: 100%;\n  height: 100%;\n  container-type: inline-size;\n}\n.registration__form {\n  display: grid;\n  grid-template-columns: repeat(1, 1fr);\n  gap: 40px;\n  justify-items: stretch;\n  align-content: flex-start;\n  overflow: auto;\n  width: 100%;\n  height: 100%;\n}\n.registration__buttons-wrapper {\n  display: flex;\n  flex-direction: row-reverse;\n  justify-content: space-around;\n  align-items: center;\n}\n.registration__button {\n  text-transform: uppercase;\n  width: 250px;\n  height: 40px;\n  border-radius: 3px;\n}\n.registration__button:hover {\n  opacity: 0.8;\n}\n.registration__button:active {\n  opacity: 1;\n}\n.registration__button--next {\n  color: #FFFFFF;\n  background-color: #B0B0B0;\n  border: none;\n}\n.registration__button--back {\n  color: #B0B0B0;\n  background-color: #FFFFFF;\n  border: 2px solid #B0B0B0;\n}\n.registration__button--disabled {\n  opacity: 0.5;\n}\n.registration__button--disabled:hover {\n  opacity: 0.5;\n}\n.registration__button--first-step {\n  display: none;\n}\n\n@container (min-width: 450px) {\n  .registration__form {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .registration__buttons-wrapper {\n    flex-direction: column;\n    gap: 15px;\n  }\n}";
+const generalRegistrationCss = "*,\n*::before,\n*::after {\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n}\n\n.registration {\n  font-family: \"Roboto\";\n  font-style: normal;\n  font-family: sans-serif;\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  width: 100%;\n  height: 100%;\n  container-type: inline-size;\n}\n.registration__error-message {\n  color: #cc0000b3;\n}\n.registration__form {\n  display: grid;\n  grid-template-columns: repeat(1, 1fr);\n  gap: 40px;\n  justify-items: stretch;\n  align-content: flex-start;\n  overflow: auto;\n  width: 100%;\n  height: 100%;\n}\n.registration__buttons-wrapper {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  align-items: center;\n}\n.registration__button {\n  text-transform: uppercase;\n  width: 250px;\n  height: 40px;\n  border-radius: 3px;\n}\n.registration__button:hover {\n  opacity: 0.8;\n}\n.registration__button:active {\n  opacity: 1;\n}\n.registration__button--next {\n  color: #FFFFFF;\n  background-color: #B0B0B0;\n  border: none;\n}\n.registration__button--back {\n  color: #B0B0B0;\n  background-color: #FFFFFF;\n  border: 2px solid #B0B0B0;\n}\n.registration__button--disabled {\n  opacity: 0.5;\n}\n.registration__button--disabled:hover {\n  opacity: 0.5;\n}\n.registration__button--first-step {\n  display: none;\n}\n\n@container (min-width: 450px) {\n  .registration__form {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .registration__buttons-wrapper {\n    flex-direction: row-reverse;\n    gap: 15px;\n  }\n}";
 
 const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -95,6 +93,7 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     window.postMessage({ type: 'registrationStepUpdated', step: this.registrationStep }, window.location.href);
   }
   setFormValidity() {
+    this.errorMessage = '';
     this.isFormValid = !this.getInvalidStatus(this.listOfInputs);
   }
   checkInputsValidityHandler(event) {
@@ -167,7 +166,6 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
         }
         if (state.type == 'values') {
           const savedValues = savedUserData[this.registrationStep].registerUserData;
-          console.log(savedValues);
           this.listOfInputValues = Object.keys(savedValues).map(name => {
             return { name, value: savedValues[name].value, isDuplicate: savedValues[name].isDuplicate };
           });
@@ -238,8 +236,20 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     };
     fetch(url.href, options)
       .then((res) => {
-      if (res.status >= 300) {
-        throw new Error('err');
+      if (!res.ok) {
+        return res.json().then(error => {
+          this.errorCode = error.thirdPartyResponse.errorCode;
+          // Show the idomsoft error if it is the case
+          if (this.errorCode == 'GmErr_BadRequest_IdomsoftVerification_ShouldRetry') {
+            this.errorMessage = error.thirdPartyResponse.message;
+          }
+          else if (this.errorCode == 'GmErr_BadRequest') {
+            this.errorMessage = error.thirdPartyResponse.message;
+          }
+          else {
+            this.errorMessage = translate(`${this.errorCode}`, this.language) || this.errorCode;
+          }
+        });
       }
       return res.json();
     })
@@ -265,6 +275,8 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
             this.stepsStateMachine({ event: 'set', type: 'inputs' });
           });
         }
+        // Set it in local storage.
+        this.stepsStateMachine({ event: 'set', type: 'inputs' });
       }
     })
       .catch((err) => {
@@ -376,7 +388,7 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     if (this.isLoading) {
       return h("p", null, "Please wait, loading ...");
     }
-    return (h("div", { class: `registration  registration__${this.registrationStep}`, ref: el => this.stylingContainer = el }, h("form", { action: '.', id: 'RegistrationForm', class: 'registration__form' }, this.renderInputs()), this.renderButtons()));
+    return (h("div", { class: `registration  registration__${this.registrationStep}`, ref: el => this.stylingContainer = el }, h("form", { action: '.', id: 'RegistrationForm', class: 'registration__form' }, this.renderInputs()), h("p", { class: 'registration__error-message' }, this.errorMessage), this.renderButtons()));
   }
   static get watchers() { return {
     "registrationStep": ["sendStep"],