@everymatrix/general-registration-multistep 1.87.33 → 1.87.34

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

@@ -10,6 +10,7 @@ export class GeneralRegistrationMultistep {
         this.lastPostalCode = null;
         this.pinAttemptsExceeded = false;
         this.documentIdNineDigits = false;
+        this.isTransitioning = false;
         this.selectedCountry = '';
         this.listOfInputValues = [];
         this.listOfInputValidity = [];
@@ -133,22 +134,36 @@ export class GeneralRegistrationMultistep {
         this.isFormValid = !this.getInvalidStatus(this.listOfInputValidity);
     }
     getInputsValueHandler(event) {
-        var _a, _b, _c, _d;
-        this.listOfInputValues.find(input => {
-            if (input.name == event.detail.name) {
-                input.value = event.detail.value;
-                input.type = event.detail.type || null;
-            }
-        });
+        var _a, _b;
+        if (this.isTransitioning) {
+            return;
+        }
+        const { name, value, type } = event.detail;
+        // find the input andd add it if missing
+        let inputItem = this.listOfInputValues.find(input => input.name == name);
+        if (!inputItem) {
+            // If the field (like ValidateSMS) is not in the list because formatConfig didn't clear the old step data
+            // we force-add it so it can be saved and sent to the API
+            inputItem = {
+                name: name,
+                value: value,
+                isDuplicate: false,
+                type: type || null
+            };
+            this.listOfInputValues = [...this.listOfInputValues, inputItem];
+        }
+        else {
+            inputItem.value = value;
+            inputItem.type = type || null;
+        }
         // ---- Document type and document id logic - New custom registration for SA ---- //
-        const { name, value } = event.detail;
         // Check SA identity id if valid
         if (name === CONSTANTS.DOCUMENT_TYPE) {
-            let type = event.detail.value;
-            if ((type || "").replace(CONSTANTS.REMOVE_WHITESPACE_REGEX, "").toLowerCase() === CONSTANTS.IDENTITY_CARD_NORMALIZED) {
-                type = CONSTANTS.SOUTH_AFRICAN_ID;
+            let docTypeValue = value;
+            if ((docTypeValue || "").replace(CONSTANTS.REMOVE_WHITESPACE_REGEX, "").toLowerCase() === CONSTANTS.IDENTITY_CARD_NORMALIZED) {
+                docTypeValue = CONSTANTS.SOUTH_AFRICAN_ID;
             }
-            window.documentTypeValue = type;
+            window.documentTypeValue = docTypeValue;
             const docField = this.listOfInputValues.find(i => i.name === CONSTANTS.DOCUMENT_NUMBER);
             if (docField)
                 docField.value = "";
@@ -157,11 +172,12 @@ export class GeneralRegistrationMultistep {
                 docValidity.isValid = false;
             window.dispatchEvent(new CustomEvent("documentNumberUpdatedExternally", { detail: "" }));
             window.dispatchEvent(new CustomEvent("documentNumberResetValidation"));
+            this.stepsStateMachine({ event: 'set', type: 'values' });
             return;
         }
-        const docType = window.documentTypeValue;
+        const docTypeContext = window.documentTypeValue;
         // Check if Passport value length and dispatch events to modify the birth date value
-        if (name === CONSTANTS.DOCUMENT_NUMBER && docType === CONSTANTS.PASSPORT) {
+        if (name === CONSTANTS.DOCUMENT_NUMBER && docTypeContext === CONSTANTS.PASSPORT) {
             if (value.length === 8 || value.length === 9) {
                 const extractedBirthDate = extractBirthDate(value);
                 window.dispatchEvent(new CustomEvent('documentIdUpdated', { detail: extractedBirthDate || '' }));
@@ -176,7 +192,7 @@ export class GeneralRegistrationMultistep {
         }
         // If number starts with '0', remove it
         if (name === CONSTANTS.MOBILE) {
-            const rawVal = (_b = (_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : {};
+            const rawVal = value !== null && value !== void 0 ? value : {};
             const phoneRaw = typeof rawVal.phone === "string" ? rawVal.phone : "";
             let phone = phoneRaw;
             if (phone.startsWith("0")) {
@@ -185,14 +201,13 @@ export class GeneralRegistrationMultistep {
             const mobileField = this.listOfInputValues.find(i => i.name === CONSTANTS.MOBILE);
             if (mobileField) {
                 mobileField.value = {
-                    prefix: (_c = rawVal.prefix) !== null && _c !== void 0 ? _c : "",
+                    prefix: (_a = rawVal.prefix) !== null && _a !== void 0 ? _a : "",
                     phone
                 };
             }
         }
         // ---- Postal code lookup logic ---- //
         if (this.haspostalcodelookup) {
-            const { name, value } = event.detail;
             if (name === 'CountryCode') {
                 this.selectedCountry = value;
                 if (value === 'GB') {
@@ -217,7 +232,7 @@ export class GeneralRegistrationMultistep {
                         this.addresses.length === 0;
                     if (shouldFetch) {
                         const country = this.selectedCountry ||
-                            ((_d = this.listOfInputValues.find(i => i.name === 'CountryCode')) === null || _d === void 0 ? void 0 : _d.value) || '';
+                            ((_b = this.listOfInputValues.find(i => i.name === 'CountryCode')) === null || _b === void 0 ? void 0 : _b.value) || '';
                         if (this.selectedCountry === 'GB' || this.selectedCountry === 'UK') {
                             if (this.addrDebounce)
                                 clearTimeout(this.addrDebounce);
@@ -235,7 +250,7 @@ export class GeneralRegistrationMultistep {
             }
         }
         this.stepsStateMachine({ event: 'set', type: 'values' });
-        this.handleConditionalValidation(event.detail.name, event.detail.value);
+        this.handleConditionalValidation(name, value);
     }
     handleAddressSelection(event) {
         const { city, address1, address2 } = event.detail;
@@ -270,7 +285,7 @@ export class GeneralRegistrationMultistep {
     handleCountryCodeUpdateGlobal(event) {
         const { name } = event.detail;
         if (name === 'CountryCode') {
-            const savedState = localStorage.getItem('registrationStepsState');
+            const savedState = sessionStorage.getItem('registrationStepsState');
             if (savedState) {
                 const parsedState = JSON.parse(savedState);
                 Object.keys(parsedState).forEach(stepKey => {
@@ -282,7 +297,7 @@ export class GeneralRegistrationMultistep {
                         });
                     }
                 });
-                localStorage.setItem('registrationStepsState', JSON.stringify(parsedState));
+                sessionStorage.setItem('registrationStepsState', JSON.stringify(parsedState));
             }
         }
     }
@@ -346,6 +361,10 @@ export class GeneralRegistrationMultistep {
     }
     async componentWillLoad() {
         await customElements.whenDefined('general-input');
+        const navigationEntries = performance.getEntriesByType('navigation');
+        if (navigationEntries.length > 0 && navigationEntries[0].type === 'reload') {
+            sessionStorage.removeItem('registrationStepsState');
+        }
         const config = await this.getRegisterConfig();
         this.formatConfig(config);
         this.isFormValid = !this.getInvalidStatus(this.listOfInputValidity);
@@ -450,11 +469,75 @@ export class GeneralRegistrationMultistep {
         this.setRegisterStep();
     }
     backHandler(e) {
+        var _a, _b, _c, _d;
         e.preventDefault();
-        this.registrationStep = this.stepChange('decrement');
-        this.errorMessage = '';
-        this.stepsStateMachine({ event: 'get', type: 'inputs' });
-        this.stepsStateMachine({ event: 'get', type: 'values' });
+        this.isTransitioning = true;
+        const stepBeforeBack = this.registrationStep;
+        let targetStep = this.stepChange('decrement');
+        if (stepBeforeBack === 'Step3') {
+            targetStep = 'Step1';
+            this.registrationID = null;
+            this.registrationStepsState.regId = null;
+            const savedUserData = JSON.parse(sessionStorage.getItem('registrationStepsState')) || {};
+            const oldPrefix = ((_d = (_c = (_b = (_a = savedUserData === null || savedUserData === void 0 ? void 0 : savedUserData.Step1) === null || _a === void 0 ? void 0 : _a.registerUserData) === null || _b === void 0 ? void 0 : _b.Mobile) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.prefix) || '+27';
+            sessionStorage.removeItem('registrationStepsState');
+            this.registrationStepsState = {
+                regId: null
+            };
+            this.listOfInputValues = [];
+            this.getRegisterConfig().then(config => {
+                this.formatConfig(config);
+                this.registrationID = config.content.registrationID;
+                setTimeout(() => {
+                    this.listOfInputValues = this.listOfInputs.map(field => {
+                        var _a;
+                        if (field.name === 'Mobile') {
+                            return { name: field.name, value: { prefix: oldPrefix, phone: '' }, isDuplicate: false, type: 'tel' };
+                        }
+                        return {
+                            name: field.name,
+                            value: ((_a = field.inputType) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'checkbox' ? 'false' : null,
+                            isDuplicate: field.isDuplicateInput || false,
+                            type: field.inputType
+                        };
+                    });
+                    this.forms = Object.assign({}, this.forms);
+                }, 100);
+            });
+        }
+        this.registrationStep = targetStep;
+        const savedDataAtTarget = JSON.parse(sessionStorage.getItem('registrationStepsState'));
+        if (savedDataAtTarget && savedDataAtTarget[targetStep] && savedDataAtTarget[targetStep].fields) {
+            const stepData = savedDataAtTarget[targetStep];
+            this.listOfInputValidity = [...stepData.fieldsValidity];
+            this.listOfInputs = [...stepData.fields];
+            this.forms = Object.assign(Object.assign({}, this.forms), { [targetStep]: this.listOfInputs.map(input => (Object.assign({}, input))) });
+            const savedValues = stepData.registerUserData || {};
+            this.listOfInputValues = Object.keys(savedValues).length > 0
+                ? Object.keys(savedValues).map(name => ({
+                    name,
+                    value: savedValues[name].value,
+                    isDuplicate: savedValues[name].isDuplicate
+                }))
+                : this.listOfInputs.map(field => {
+                    var _a;
+                    return ({
+                        name: field.name,
+                        value: ((_a = field.inputType) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'checkbox' ? 'false' : null,
+                        isDuplicate: field.isDuplicateInput || false
+                    });
+                });
+            this.forms[targetStep] = this.forms[targetStep].map(input => {
+                const savedData = this.listOfInputValues.find(v => v.name === input.name);
+                return savedData ? Object.assign(Object.assign({}, input), { defaultValue: savedData.value }) : input;
+            });
+        }
+        else if (stepBeforeBack !== 'Step3') {
+            this.getRegisterConfig(this.registrationID).then(config => this.formatConfig(config));
+        }
+        this.forms = Object.assign({}, this.forms);
+        this.isFormValid = !this.getInvalidStatus(this.listOfInputValidity);
+        setTimeout(() => { this.isTransitioning = false; }, 300);
     }
     dispatchRegisterCredentialsEvent() {
         let userNameEmail = '';
@@ -485,10 +568,10 @@ export class GeneralRegistrationMultistep {
     stepsStateMachine(state) {
         var _a;
         const saveToLocalStorage = () => {
-            localStorage.setItem('registrationStepsState', JSON.stringify(this.registrationStepsState));
+            sessionStorage.setItem('registrationStepsState', JSON.stringify(this.registrationStepsState));
         };
         const loadFromLocalStorage = () => {
-            return JSON.parse(localStorage.getItem('registrationStepsState'));
+            return JSON.parse(sessionStorage.getItem('registrationStepsState'));
         };
         switch (state.event) {
             case 'set':
@@ -500,7 +583,9 @@ export class GeneralRegistrationMultistep {
                     currentStep.fieldsValidity = this.listOfInputValidity;
                 }
                 if (state.type == 'values') {
-                    // Map input values into the current step state
+                    if (!this.registrationStepsState[this.registrationStep]) {
+                        this.registrationStepsState[this.registrationStep] = {};
+                    }
                     const currentStep = this.registrationStepsState[this.registrationStep];
                     currentStep.registerUserData = this.listOfInputValues.reduce((acc, curr) => {
                         acc[curr.name] = { value: curr.value, isDuplicate: curr.isDuplicate };
@@ -511,21 +596,42 @@ export class GeneralRegistrationMultistep {
                 break;
             case 'get':
                 const savedUserData = loadFromLocalStorage();
-                if (!savedUserData)
+                if (!savedUserData || !savedUserData[this.registrationStep])
                     return;
                 if (state.type == 'inputs') {
                     // Load input-related data from the saved state
-                    const currentStep = this.registrationStepsState[this.registrationStep];
+                    const currentStep = savedUserData[this.registrationStep];
                     this.listOfInputs = currentStep.fields;
                     this.listOfActions = currentStep.actions;
                     this.listOfInputValidity = currentStep.fieldsValidity;
+                    if (!this.registrationStepsState[this.registrationStep]) {
+                        this.registrationStepsState[this.registrationStep] = {};
+                    }
+                    this.registrationStepsState[this.registrationStep].fields = currentStep.fields;
+                    this.registrationStepsState[this.registrationStep].fieldsValidity = currentStep.fieldsValidity;
                 }
                 if (state.type == 'values') {
-                    const savedValues = savedUserData[this.registrationStep].registerUserData;
+                    const stepEntry = savedUserData[this.registrationStep];
+                    if (!stepEntry || !stepEntry.registerUserData || Object.keys(stepEntry.registerUserData).length === 0) {
+                        return;
+                    }
+                    const savedValues = stepEntry.registerUserData;
                     // Convert saved values to the expected format for inputs
                     this.listOfInputValues = Object.keys(savedValues).map(name => {
                         return { name, value: savedValues[name].value, isDuplicate: savedValues[name].isDuplicate };
                     });
+                    // Sync local state object with storage values
+                    if (!this.registrationStepsState[this.registrationStep]) {
+                        this.registrationStepsState[this.registrationStep] = {};
+                    }
+                    this.registrationStepsState[this.registrationStep].registerUserData = savedValues;
+                    // Sync the forms object to ensure UI rendering
+                    if (this.forms[this.registrationStep]) {
+                        this.forms[this.registrationStep] = this.forms[this.registrationStep].map(input => {
+                            const savedData = this.listOfInputValues.find(v => v.name === input.name);
+                            return savedData ? Object.assign(Object.assign({}, input), { defaultValue: savedData.value }) : input;
+                        });
+                    }
                     // Set the right documentTypeValue when the step is loaded
                     let docType = (_a = this.listOfInputValues.find(i => i.name === CONSTANTS.DOCUMENT_TYPE)) === null || _a === void 0 ? void 0 : _a.value;
                     if (docType === CONSTANTS.IDENTITY_CARD)
@@ -540,7 +646,9 @@ export class GeneralRegistrationMultistep {
                             if (input.inputType === 'togglecheckbox') {
                                 input.data.subFields.forEach((subfield) => {
                                     const subfieldValue = this.listOfInputValues.find(subfieldValue => subfieldValue.name === subfield.name);
-                                    subfield.defaultValue = subfieldValue.value;
+                                    if (subfieldValue) {
+                                        subfield.defaultValue = subfieldValue.value;
+                                    }
                                 });
                             }
                         }
@@ -603,45 +711,87 @@ export class GeneralRegistrationMultistep {
     setRegisterStep() {
         this.isLoadingPOST = true;
         const url = new URL(`${this.endpoint}/v1/player/legislation/registration/step/`);
+        this.stepsStateMachine({ event: 'set', type: 'values' });
+        const currentStepValue = this.registrationStep;
         const registerStep = {
             registrationId: this.registrationID,
             registerUserDto: this.listOfInputValues
-                .filter(input => !input.isDuplicate)
+                .filter(input => {
+                if (input.name === 'ValidateSMS')
+                    return true;
+                return !input.isDuplicate;
+            })
                 .reduce((acc, curr) => {
-                // Because the API is very robust, some values need to be split as separate entities.
-                if (curr.name === 'TypeOfPublicArea') {
-                    acc[curr.name] = curr.value.toLowerCase();
+                // Handle SMS Validation field
+                if (curr.name === 'ValidateSMS') {
+                    acc[curr.name] = curr.value;
                 }
-                else if (curr.type === 'tel') {
-                    //@ts-ignore
-                    acc['MobilePrefix'] = curr.value.prefix;
-                    //@ts-ignore
-                    acc[curr.name] = curr.value.phone;
+                // Handle specific dropdown fields that need lowercase values
+                else if (curr.name === 'TypeOfPublicArea') {
+                    acc[curr.name] = curr.value ? curr.value.toLowerCase() : '';
+                }
+                //  handlbe mobile number and prefix
+                else if (curr.name === 'Mobile') {
+                    const mobileVal = curr.value;
+                    let phone = '';
+                    let prefix = '';
+                    // extract values from object (general-input format) or fallback to string
+                    if (typeof mobileVal === 'object' && mobileVal !== null) {
+                        phone = mobileVal.phone || '';
+                        prefix = mobileVal.prefix || '';
+                    }
+                    else {
+                        phone = mobileVal || '';
+                    }
+                    // rmove all non-digit characters from the phone string
+                    let cleanPhone = phone.toString().replace(CONSTANTS.ONLY_DIGITS_REGEX, '');
+                    // get digits from prefix to check for duplication (e.g., "27" from "+27")
+                    const prefixDigits = prefix.replace(CONSTANTS.ONLY_DIGITS_REGEX, '');
+                    // clear duplicate prefix
+                    if (prefixDigits && cleanPhone.startsWith(prefixDigits)) {
+                        cleanPhone = cleanPhone.slice(prefixDigits.length);
+                    }
+                    // remove leading zero if present
+                    if (cleanPhone.startsWith('0')) {
+                        cleanPhone = cleanPhone.slice(1);
+                    }
+                    acc['MobilePrefix'] = prefix;
+                    acc['Mobile'] = cleanPhone;
                 }
+                // Handle Checkbox Groups
                 else if (curr.type === 'checkboxgroup') {
-                    // Skip adding the parent of the checkboxgroup as a key.
                     if (curr.value !== null) {
                         Object.entries(curr.value).forEach(([key, value]) => {
                             acc[key] = value ? 'true' : 'false';
                         });
                     }
                 }
+                // Handle Toggle/Switch inputs
                 else if (curr.type === 'toggle') {
                     acc[curr.name] = curr.value ? 'true' : 'false';
                 }
+                // Default mapping for all other fields
                 else {
                     acc[curr.name] = curr.value;
                 }
                 return acc;
             }, {}),
-            step: this.registrationStep,
+            step: currentStepValue,
         };
         const headers = new Headers();
         headers.append('Content-Type', 'application/json');
         headers.append('Accept', 'application/json');
+        // new payload to avoid sendind an old registration id
+        const payload = {
+            registerUserDto: registerStep.registerUserDto, // Datele curățate din reduce (fără prefix dublu)
+            step: currentStepValue
+        };
+        if (this.registrationID && this.registrationID !== "null") {
+            payload.registrationId = this.registrationID;
+        }
         const options = {
             method: 'POST',
-            body: JSON.stringify(registerStep),
+            body: JSON.stringify(payload),
             headers
         };
         if (this.lastStep === this.registrationStep) {
@@ -719,8 +869,8 @@ export class GeneralRegistrationMultistep {
                 if (this.listOfActions.some(action => action == '/generate-2FA-code/Generate2FACode')) {
                     this.extraActions.push('2fa');
                 }
-                if (localStorage.getItem('playerConsents')) {
-                    localStorage.removeItem("playerConsents");
+                if (sessionStorage.getItem('playerConsents')) {
+                    sessionStorage.removeItem("playerConsents");
                 }
                 this.setRegister();
             }
@@ -730,9 +880,11 @@ export class GeneralRegistrationMultistep {
                 }
                 // After sending the current step, increment and check if the next one is in state.
                 this.registrationStep = this.stepChange('increment');
-                // If step is present in state do NOT fetch the next config.
-                if (Object.keys(this.registrationStepsState).find(key => key == this.registrationStep)) {
-                    // Use the one from state
+                const stepData = this.registrationStepsState[this.registrationStep];
+                const isValidStepInMem = stepData && stepData.fields && stepData.fields.length > 0;
+                if (isValidStepInMem) {
+                    // Repopulate form
+                    this.forms = Object.assign(Object.assign({}, this.forms), { [this.registrationStep]: stepData.fields.map(f => (Object.assign({}, f))) });
                     this.stepsStateMachine({ event: 'get', type: 'inputs' });
                     this.stepsStateMachine({ event: 'get', type: 'values' });
                 }
@@ -740,6 +892,10 @@ export class GeneralRegistrationMultistep {
                     this.getRegisterConfig(this.registrationID).then((config) => {
                         // Format the new step config.
                         this.formatConfig(config);
+                        const savedState = JSON.parse(sessionStorage.getItem('registrationStepsState'));
+                        if (savedState && savedState[this.registrationStep]) {
+                            this.stepsStateMachine({ event: 'get', type: 'values' });
+                        }
                         // Set it in local storage.
                         this.stepsStateMachine({ event: 'set', type: 'inputs' });
                         // Setup conditionalValidationMap
@@ -816,6 +972,16 @@ export class GeneralRegistrationMultistep {
         });
     }
     formatConfig(config) {
+        // reset previous state to avoid data leakage between steps
+        this.listOfInputs = [];
+        this.listOfInputValues = [];
+        this.listOfInputValidity = [];
+        this.forms = Object.assign({}, this.forms);
+        // set current context (MUST be done before restoration)
+        this.registrationStep = config.content.step;
+        this.registrationID = config.content.registrationID;
+        this.listOfActions = config.content.actions.map(action => action);
+        // map fields and handle duplicates
         this.listOfInputs = config.content.fields.flatMap((field) => {
             const duplicateInputRule = field.validate.custom.find(customRule => customRule.rule === 'duplicate-input');
             const inputElement = Object.assign({}, field);
@@ -846,10 +1012,12 @@ export class GeneralRegistrationMultistep {
             }
             return acc;
         }, []);
+        // initialize values structure (Creating the "containers" for data)
+        // We do this only ONCE using reduce to capture both main fields and subfields
         this.listOfInputValues = this.listOfInputs.reduce((acc, field) => {
             var _a;
             const inputType = (_a = field.inputType) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-            // If the field type is a 'togglecheckbox', add its subfields
+            // If the field type is a 'togglecheckbox', add its subfields first
             if (inputType === 'togglecheckbox') {
                 field.data.subFields.forEach(subfield => {
                     var _a;
@@ -857,10 +1025,11 @@ export class GeneralRegistrationMultistep {
                         name: subfield.name,
                         value: ((_a = subfield.inputType) === null || _a === void 0 ? void 0 : _a.toLowerCase()) == 'checkbox' ? 'false' : null,
                         isDuplicate: subfield.isDuplicateInput || false,
-                        type: inputType === 'togglecheckbox' ? 'togglecheckbox' : null
+                        type: 'togglecheckbox'
                     });
                 });
             }
+            // Add the main field
             acc.push({
                 name: field.name,
                 value: inputType === 'checkbox' || inputType === 'togglecheckbox' ? 'false' : null,
@@ -869,12 +1038,10 @@ export class GeneralRegistrationMultistep {
             });
             return acc;
         }, []);
+        // restore saved values over the empty structure
+        this.stepsStateMachine({ event: 'get', type: 'values' });
         if (this.btag)
             this.addBtagValue();
-        // Set the list of actions
-        this.listOfActions = config.content.actions.map(action => action);
-        this.registrationID = config.content.registrationID;
-        this.registrationStep = config.content.step;
         if (this.listOfActions.some(action => action == '/register')) {
             this.lastStep = this.registrationStep;
         }
@@ -883,10 +1050,11 @@ export class GeneralRegistrationMultistep {
             if (this.isConsentReady) {
                 this.listOfInputValidity.find((input) => input.name === "Consents").isValid = false;
                 this.isFormValid = !this.getInvalidStatus(this.listOfInputValidity);
-                return;
             }
-            this.listOfInputValidity.push({ name: 'Consents', isValid: false });
-            this.isConsentReady = true;
+            else {
+                this.listOfInputValidity.push({ name: 'Consents', isValid: false });
+                this.isConsentReady = true;
+            }
         }
         else {
             this.isConsentReady = false;
@@ -899,21 +1067,16 @@ export class GeneralRegistrationMultistep {
                     var _a, _b;
                     this.addTranslation(field);
                     // Logic for field types that have subfields
-                    if (((_a = field.inputType) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'togglecheckbox') {
-                        field.data.subFields.forEach(subField => this.addTranslation(subField));
-                    }
-                    if (((_b = field.inputType) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'checkboxgroup') {
-                        this.addTranslation(field);
+                    if (((_a = field.inputType) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'togglecheckbox' || ((_b = field.inputType) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'checkboxgroup') {
                         field.data.subFields.forEach(subField => this.addTranslation(subField));
                     }
-                    return field;
                 });
             })
                 .catch((error) => {
                 console.error('Failed to fetch translations:', error);
             });
         }
-        // Add the step to the registrationStepsData
+        // Add the step to the registrationStepsData if not present
         this.registrationStepsState.regId = this.registrationID;
         if (!this.registrationStepsState[this.registrationStep]) {
             this.registrationStepsState[this.registrationStep] = {
@@ -1063,9 +1226,9 @@ export class GeneralRegistrationMultistep {
                             input.inputType.toLowerCase() === 'togglecheckbox'
                             ? input.data.subFields
                             : input.data.values
-                        : [], defaultValue: input.defaultValue, autofilled: input.autofill, emitValue: this.emitValue, language: this.language, mbSource: this.mbSource, isDuplicateInput: input.isDuplicateInput, "client-styling": this.clientStyling, tooltip: input.tooltip, placeholder: input.placeholder == null ? '' : input.placeholder, "date-format": this.dateFormat, "twofa-destination": this.twofaDestination, "twofa-resend-interval-seconds": (_a = input.customInfo) === null || _a === void 0 ? void 0 : _a.twofaResendIntervalSeconds, "translation-url": this.translationUrl, emitOnClick: this.emitOnClick, onClick: this.handleInitialClick, haspostalcodelookup: this.haspostalcodelookup, addresses: this.haspostalcodelookup ? this.addresses : null, postalcodelength: this.haspostalcodelookup ? this.postalcodelength : null, "enable-south-african-mode": this.enableSouthAfricanMode, key: ['address1', 'address2', 'City'].includes(input.name)
-                        ? `${input.name}-${this.addressUpdateKey}`
-                        : input.name, "ignore-country": this.getIgnoreCountry(input), "pin-attempts-exceeded": this.pinAttemptsExceeded }), ((_b = input.customInfo) === null || _b === void 0 ? void 0 : _b.description) && h("div", { class: "input-description" }, input.customInfo.description)));
+                        : [], defaultValue: input.defaultValue, autofilled: input.autofill, emitValue: this.emitValue, language: this.language, mbSource: this.mbSource, isDuplicateInput: input.isDuplicateInput, "client-styling": this.clientStyling, tooltip: input.tooltip, placeholder: input.placeholder == null ? '' : input.placeholder, "date-format": this.dateFormat, "twofa-destination": this.twofaDestination, "twofa-resend-interval-seconds": (_a = input.customInfo) === null || _a === void 0 ? void 0 : _a.twofaResendIntervalSeconds, "translation-url": this.translationUrl, emitOnClick: this.emitOnClick, onClick: this.handleInitialClick, haspostalcodelookup: this.haspostalcodelookup, addresses: this.haspostalcodelookup ? this.addresses : null, postalcodelength: this.haspostalcodelookup ? this.postalcodelength : null, "enable-south-african-mode": this.enableSouthAfricanMode, "ignore-country": this.getIgnoreCountry(input), "pin-attempts-exceeded": this.pinAttemptsExceeded, key: ['address1', 'address2', 'City'].includes(input.name)
+                        ? `${input.name}-${this.addressUpdateKey}-${this.registrationStep}`
+                        : `${input.name}-${this.registrationStep}` }), ((_b = input.customInfo) === null || _b === void 0 ? void 0 : _b.description) && h("div", { class: "input-description" }, input.customInfo.description)));
             }), this.forms[this.registrationStep] && this.isConsentReady && this.renderConsents(), this.forms[this.registrationStep] && this.buttonInsideForm && this.renderButtons(), h("div", { class: "registration__wrapper--flex" }, h("p", { class: "registration__error-message", innerHTML: this.errorMessage })))));
     }
     renderConsents() {

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

@@ -1060,7 +1060,8 @@ export const CONSTANTS = {
     STEP_THREE: 3,
     REMOVE_WHITESPACE_REGEX: /\s+/g,
     IDENTITY_CARD_NORMALIZED: "identitycard",
-    DATE_DASH_SEPARATOR_REGEX: /-/g
+    DATE_DASH_SEPARATOR_REGEX: /-/g,
+    ONLY_DIGITS_REGEX: /\D/g
 };
 export const getTranslations = (url) => {
     // fetch url, get the data, replace the TRANSLATIONS content