@everymatrix/general-input 1.87.0 → 1.87.2

package/dist/collection/components/text-input/text-input.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { translate } from "../../utils/locale.utils";
+import { translate, validateID, CONSTANTS, ERROR_KEYS } from "../../utils/locale.utils";
 import tooltipIcon from "../../utils/tooltipIcon.svg";
 export class TextInput {
     constructor() {
@@ -9,24 +9,28 @@ export class TextInput {
         this.postalcodelength = 5;
         this.touched = false;
         this.handleInput = (event) => {
-            this.value = event.target.value;
+            const input = event.target;
+            const normalizedValue = this.enableSouthAfricanMode &&
+                (this.name === CONSTANTS.FIRSTNAME_ON_DOCUMENT ||
+                    this.name === CONSTANTS.LASTNAME_ON_DOCUMENT)
+                ? input.value.replace(CONSTANTS.NON_LETTERS_REGEX, '')
+                : input.value;
+            if (normalizedValue !== input.value) {
+                input.value = normalizedValue;
+            }
+            this.value = normalizedValue;
             this.touched = true;
-            if (this.debounceTime) {
+            if (this.debounceTime)
                 clearTimeout(this.debounceTime);
-            }
             this.debounceTime = setTimeout(() => {
-                this.isValid = this.setValidity();
-                this.errorMessage = this.setErrorMessage();
-                this.validityStateHandler({ valid: this.isValid, name: this.name });
+                this.updateValidationState();
                 this.emitValueHandler(true);
             }, 500);
         };
         this.handleBlur = (event) => {
             this.value = event.target.value;
             this.touched = true;
-            this.isValid = this.setValidity();
-            this.errorMessage = this.setErrorMessage();
-            this.validityStateHandler({ valid: this.isValid, name: this.name });
+            this.updateValidationState();
         };
         this.setClientStyling = () => {
             let sheet = document.createElement('style');
@@ -46,6 +50,7 @@ export class TextInput {
         this.isDuplicateInput = undefined;
         this.clientStyling = '';
         this.haspostalcodelookup = undefined;
+        this.enableSouthAfricanMode = undefined;
         this.isValid = undefined;
         this.errorMessage = '';
         this.limitStylingAppends = false;
@@ -83,15 +88,13 @@ export class TextInput {
         if (this.isDuplicateInput && this.name === event.detail.name + 'Duplicate') {
             this.duplicateInputValue = event.detail.value;
             if (this.touched) {
-                this.isValid = this.setValidity();
-                this.errorMessage = this.setErrorMessage();
+                this.updateValidationState();
             }
         }
-        if (this.name === event.detail.name + 'Duplicate'
-            && this.name.replace('Duplicate', '') === event.detail.name
-            && this.touched === true) {
-            this.isValid = this.setValidity();
-            this.errorMessage = this.setErrorMessage();
+        if (this.name === event.detail.name + 'Duplicate' &&
+            this.name.replace('Duplicate', '') === event.detail.name &&
+            this.touched) {
+            this.updateValidationState();
         }
     }
     handleValidationChange(event) {
@@ -101,7 +104,7 @@ export class TextInput {
         this.validation = event.detail.validation;
         this.validationPattern = this.setPattern();
         if (this.touched) {
-            this.isValid = this.setValidity();
+            this.isValid = this.isValidValue();
             this.errorMessage = this.setErrorMessage();
         }
     }
@@ -137,13 +140,37 @@ export class TextInput {
         }
         this.value = newValue;
         this.touched = true;
-        this.isValid = true;
-        this.valueHandler({ name: this.name, value: newValue });
-        this.validityStateHandler({ valid: true, name: this.name });
+        this.updateValidationState();
     }
     connectedCallback() {
         this.validationPattern = this.setPattern();
     }
+    handleExternalDocUpdate(event) {
+        if (this.name !== CONSTANTS.DOCUMENT_NUMBER)
+            return;
+        this.value = event.detail || "";
+        this.touched = true;
+        if (this.inputReference) {
+            this.inputReference.value = this.value;
+        }
+        this.sendInputValue.emit({
+            name: this.name,
+            value: this.value
+        });
+        this.updateValidationState();
+    }
+    handleDocReset() {
+        if (this.name !== CONSTANTS.DOCUMENT_NUMBER)
+            return;
+        this.value = "";
+        this.touched = false;
+        this.isValid = false;
+        this.errorMessage = "";
+        if (this.inputReference) {
+            this.inputReference.value = "";
+        }
+        this.validityStateHandler({ valid: false, name: this.name });
+    }
     componentDidRender() {
         // start custom styling area
         if (!this.limitStylingAppends && this.stylingContainer) {
@@ -160,6 +187,7 @@ export class TextInput {
     }
     componentDidLoad() {
         if (this.defaultValue) {
+            this.value = this.defaultValue;
             this.valueHandler({ name: this.name, value: this.value });
             if (this.isDuplicateInput) {
                 this.touched = true;
@@ -171,18 +199,49 @@ export class TextInput {
                 window.targetInputRefs[this.name] = this.inputReference;
             }
         }
-        this.isValid = this.setValidity();
+        this.isValid = this.isValidValue();
+    }
+    validateDocument(valueRaw, docType) {
+        const value = valueRaw.trim();
+        if (docType === CONSTANTS.PASSPORT) {
+            const valid = CONSTANTS.PASSPORT_NUMERIC_REGEX.test(value);
+            return valid
+                ? { valid: true }
+                : { valid: false, errorKey: ERROR_KEYS.PASSPORT_INVALID };
+        }
+        if (docType === CONSTANTS.SOUTH_AFRICAN_ID) {
+            if (value.length !== CONSTANTS.SOUTH_AFRICAN_ID_LENGTH) {
+                return { valid: false, errorKey: ERROR_KEYS.SA_ID_LENGTH };
+            }
+            const valid = validateID(value);
+            return valid
+                ? { valid: true }
+                : { valid: false, errorKey: ERROR_KEYS.SA_ID_INVALID };
+        }
+        return { valid: true };
     }
-    setValidity() {
+    updateValidationState() {
+        const nextValid = this.isValidValue();
+        this.isValid = nextValid;
+        if (!this.touched) {
+            this.errorMessage = '';
+            return;
+        }
+        this.errorMessage = nextValid ? '' : this.setErrorMessage();
+    }
+    isValidValue() {
         if (!this.inputReference) {
             return false;
         }
-        if (this.value.trim() === "" && !this.validation.mandatory) {
-            return true;
+        if (this.enableSouthAfricanMode && this.name === CONSTANTS.DOCUMENT_NUMBER) {
+            const docType = window.documentTypeValue;
+            return this.validateDocument(this.value, docType).valid;
         }
-        const inputIsValid = this.inputReference.validity.valid;
-        const inputMatchValidation = !this.inputReference.value || this.inputReference.value.match(this.validationPattern) !== null;
-        return inputIsValid && inputMatchValidation;
+        const fallbackResult = (this.value.trim() === "" && !this.validation.mandatory) ||
+            (this.inputReference.validity.valid &&
+                (!this.inputReference.value ||
+                    this.inputReference.value.match(this.validationPattern) !== null));
+        return fallbackResult;
     }
     setPattern() {
         var _a, _b;
@@ -192,14 +251,25 @@ export class TextInput {
     }
     setErrorMessage() {
         var _a, _b, _c, _d;
-        if (this.value.trim() === "" && !this.validation.mandatory) {
+        const value = this.value.trim();
+        if (this.enableSouthAfricanMode && this.name === CONSTANTS.DOCUMENT_NUMBER) {
+            const docType = window.documentTypeValue;
+            const res = this.validateDocument(this.value, docType);
+            return res.valid ? '' : translate(res.errorKey, this.language);
+        }
+        if (value === "" && !this.validation.mandatory) {
             return "";
         }
         if (this.inputReference.validity.valueMissing) {
-            return translate('requiredError', this.language);
+            return translate(ERROR_KEYS.REQUIRED, this.language);
         }
         if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
-            return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
+            return translate(ERROR_KEYS.LENGTH, this.language, {
+                values: {
+                    minLength: this.validation.minLength,
+                    maxLength: this.validation.maxLength
+                }
+            });
         }
         if (this.inputReference.value.match(this.validationPattern) == null) {
             const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
@@ -211,6 +281,7 @@ export class TextInput {
             const errorMessage = (_d = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _d === void 0 ? void 0 : _d.errorMessage;
             return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
         }
+        return "";
     }
     renderTooltip() {
         if (this.showTooltip) {
@@ -223,8 +294,8 @@ export class TextInput {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return h("div", { key: '46152e946f6a45c2bb07ee07c43bcf356f3cfa29', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, h("div", { key: 'f584f23ee97b9a1d23862ec746366d5f00c56552', class: 'text__wrapper--flex' }, h("label", { key: 'ed9fe368bd00151d8b3e43daf148632cfe7d32ff', class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '01cd5f7321d78422049c45b1816801eca74d2b4d', class: 'text__wrapper--relative' }, this.tooltip &&
-            h("img", { key: '403689aa01575770be4296aaef0c7846e496d6a7', class: 'text__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { key: '5ec8443fd428ea00b9add243ea74e61fbd5b283a', name: this.name, id: `${this.name}__input`, value: this.value, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), h("small", { key: 'd1eb4cf6ac28fff4664a56e27c9f2a21d72b0d61', class: 'text__error-message' }, this.errorMessage));
+        return h("div", { key: '5b0bf10acadab5c3362d185cef10c5ed4f3a6a47', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, h("div", { key: '6d79cc845aac8d9b11737d35571680d7701c4b94', class: 'text__wrapper--flex' }, h("label", { key: 'de687661fa037d691fe1da1231b651f564bca010', class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '4d9b12a587267eaf6fab4c4f3c38befb8d5c2b99', class: 'text__wrapper--relative' }, this.tooltip &&
+            h("img", { key: '7f27a118124cd0407b6c2644137a79eaa0496164', class: 'text__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { key: '94a614815155465dbfef2a7cc1cb788bb14d1498', name: this.name, id: `${this.name}__input`, value: this.value, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, required: this.validation.mandatory, minlength: this.enableSouthAfricanMode ? '' : this.validation.minLength, maxlength: this.enableSouthAfricanMode ? '' : this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), h("small", { key: 'b9b3bdcd9cb81b56dc25a208b0c1d7784d06b5e0', class: 'text__error-message' }, this.errorMessage));
     }
     static get is() { return "text-input"; }
     static get encapsulation() { return "shadow"; }
@@ -466,6 +537,23 @@ export class TextInput {
                 },
                 "attribute": "haspostalcodelookup",
                 "reflect": true
+            },
+            "enableSouthAfricanMode": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable South African registration mode"
+                },
+                "attribute": "enable-south-african-mode",
+                "reflect": true
             }
         };
     }
@@ -566,6 +654,18 @@ export class TextInput {
                 "target": "body",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "documentNumberUpdatedExternally",
+                "method": "handleExternalDocUpdate",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "documentNumberResetValidation",
+                "method": "handleDocReset",
+                "target": "window",
+                "capture": false,
+                "passive": false
             }];
     }
 }

package/dist/collection/components/twofa-input/twofa-input.js

@@ -58,20 +58,24 @@ export class TwofaInput {
         this.handleInput = (e, idx) => {
             const input = e.target;
             const value = input.value;
-            if (value.length > 1) {
-                input.value = value.charAt(1);
-            }
-            else {
-                input.value = value.charAt(0);
-            }
-            if (!value) {
+            const char = value.slice(-1);
+            input.value = char;
+            if (!char)
                 return;
+            this.code[idx] = char;
+            // --- Hide pin code --- //
+            if (this.enableSouthAfricanMode) {
+                // show character for 500ms
+                this.revealedIndexes = [idx];
+                if (this.revealTimeout)
+                    clearTimeout(this.revealTimeout);
+                this.revealTimeout = setTimeout(() => {
+                    this.revealedIndexes = [];
+                }, 500);
             }
-            this.code[idx] = input.value;
             const nextInput = this.inputRefs[idx + 1];
-            if (nextInput) {
+            if (nextInput)
                 nextInput.focus();
-            }
             this.setValidity();
             this.setErrorMessage();
         };
@@ -100,6 +104,8 @@ export class TwofaInput {
         this.destination = '';
         this.resendIntervalSeconds = 60;
         this.clientStyling = '';
+        this.enableSouthAfricanMode = undefined;
+        this.pinAttemptsExceeded = undefined;
         this.clientStylingUrl = '';
         this.mbSource = undefined;
         this.limitStylingAppends = false;
@@ -109,10 +115,7 @@ export class TwofaInput {
         this.errorMessage = '';
         this.code = [];
         this.resendIntervalSecondsLeft = this.resendIntervalSeconds;
-    }
-    handleStylingChange(newValue, oldValue) {
-        if (newValue !== oldValue)
-            this.setClientStyling();
+        this.revealedIndexes = [];
     }
     validityChanged() {
         this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -141,6 +144,10 @@ export class TwofaInput {
             this.showTooltip = false;
         }
     }
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.setClientStyling();
+    }
     connectedCallback() {
         this.validationPattern = this.setPattern();
         this.code = new Array(this.validation.maxLength).fill('');
@@ -175,37 +182,51 @@ export class TwofaInput {
     }
     handleKeyDown(e, idx) {
         if (e.key === 'Backspace') {
-            this.code[idx] = '';
-            if (this.inputRefs[idx]) {
-                this.inputRefs[idx].value = '';
-            } // Clear input field
-            const prevInput = this.inputRefs[idx - 1];
-            if (prevInput) {
-                prevInput === null || prevInput === void 0 ? void 0 : prevInput.focus();
+            const newCode = [...this.code];
+            newCode[idx] = '';
+            this.code = newCode;
+            if (this.enableSouthAfricanMode) {
+                this.revealedIndexes = this.revealedIndexes.filter(i => i !== idx);
             }
+            const prevInput = this.inputRefs[idx - 1];
+            prevInput === null || prevInput === void 0 ? void 0 : prevInput.focus();
         }
         this.setValidity();
         this.setErrorMessage();
     }
     handlePaste(e) {
-        var _a;
+        var _a, _b;
         e.preventDefault();
-        const data = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text').trim();
-        if (!data) {
+        const data = (_b = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) === null || _b === void 0 ? void 0 : _b.trim();
+        if (!data)
             return;
+        const value = data.slice(0, this.validation.maxLength).split('');
+        this.code = [
+            ...value,
+            ...new Array(this.validation.maxLength - value.length).fill('')
+        ];
+        if (this.enableSouthAfricanMode) {
+            this.revealedIndexes = value.map((_, i) => i);
+            if (this.revealTimeout)
+                clearTimeout(this.revealTimeout);
+            this.revealTimeout = setTimeout(() => {
+                this.revealedIndexes = [];
+            }, 500);
         }
-        const value = data.slice(0, this.validation.maxLength).split(''); // Limit to OTP length
-        this.code = [...value, ...new Array(this.validation.maxLength - value.length).fill('')];
-        value.forEach((char, index) => {
-            this.inputRefs[index].value = char;
-        });
-        // Move focus to the last input or trigger submit
         const lastInput = this.inputRefs[Math.min(value.length, this.inputRefs.length - 1)];
-        if (lastInput) {
-            lastInput.focus();
-        }
+        lastInput === null || lastInput === void 0 ? void 0 : lastInput.focus();
         this.setValidity();
         this.setErrorMessage();
+        if (this.enableSouthAfricanMode) {
+            this.valueHandler({
+                name: this.name,
+                value: this.code.join('')
+            });
+            this.validityStateHandler({
+                valid: this.isValid,
+                name: this.name
+            });
+        }
     }
     setValidity() {
         const code = this.code.join('');
@@ -238,10 +259,19 @@ export class TwofaInput {
         }
         return null;
     }
+    getInputDisplayValue(idx) {
+        const current = this.code[idx];
+        if (!current)
+            return "";
+        if (this.enableSouthAfricanMode) {
+            return this.revealedIndexes.includes(idx) ? current : "*";
+        }
+        return current;
+    }
     render() {
-        return (h("div", { key: '45f0c8c7d88898a5474bff460ce962e8bb1e8634', class: "twofa", ref: el => this.stylingContainer = el }, h("div", { key: 'b40e81587ad9c7b67c112c8867104e761db7e3bc', class: 'twofa__error-message' }, h("p", { key: '760c694f6f71f040e85f81a67d3d41524c23130f' }, this.errorMessage)), h("div", { key: '2b437a5108e3989d2ddf596dc4a97d2071448154', class: "twofa__description", innerHTML: translate('twofaDescription', this.language, { values: { destination: this.destination } }) }), h("div", { key: '84df3ebbe4077ba8462c08cc7956349ec4a55b79', class: "twofa__input-wrapper", ref: this.setContainerRef }, this.code.map((char, idx) => {
-            return (h("input", { key: idx, ref: el => this.setInputRef(el, idx), id: `otp-input-${idx}`, type: "text", maxLength: 2, value: char, onInput: (event) => this.handleInput(event, idx), onKeyDown: (event) => this.handleKeyDown(event, idx), onPaste: (event) => this.handlePaste(event) }));
-        })), h("div", { key: 'abdf6e2a3ff7ef6436b59206c40ada5305543db3', class: "twofa__button-wrapper" }, h("p", { key: 'e0859c58e48741eb379fbcaf23519bb90404489b', class: "twofa__resend-message" }, translate('twofaResendMessage', this.language)), h("button", { key: '89aa3a93a9b97029fd315450892cef5edd5d5294', class: "twofa__resend-button", onClick: this.resendCodeHandler, disabled: !this.isResendButtonAvailable }, this.isResendButtonAvailable
+        return (h("div", { key: '56a639eb6e240482078fc7aaf688c75ae3de04c8', class: "twofa", ref: el => this.stylingContainer = el }, h("div", { key: 'a64039a3ed66556a0dc1bbac7b6fd6d60de23fa3', class: 'twofa__error-message' }, h("p", { key: '21adf57c840d51714ab097e9df3cc77e22be611f' }, this.errorMessage)), h("div", { key: '6653201178b40bc1eb5d6e7d881f2bbe150901f3', class: "twofa__description", innerHTML: translate('twofaDescription', this.language, { values: { destination: this.destination } }) }), h("div", { key: 'ca7600034af473838b741d5be4fe72ded9937647', class: "twofa__input-wrapper", ref: this.setContainerRef }, this.code.map((_, idx) => {
+            return (h("input", { key: idx, ref: el => this.setInputRef(el, idx), id: `otp-input-${idx}`, type: "text", maxLength: 2, value: this.getInputDisplayValue(idx), onInput: (event) => this.handleInput(event, idx), onKeyDown: (event) => this.handleKeyDown(event, idx), onPaste: (event) => this.handlePaste(event) }));
+        })), h("div", { key: '0ecd60dd5e6b3f6c3a86176e1937e7aeeffc0e92', class: "twofa__button-wrapper" }, h("p", { key: 'fa9608598580bb8628d0e7a208cc69e3ebe83264', class: "twofa__resend-message" }, translate('twofaResendMessage', this.language)), h("button", { key: 'c70ea6e780eefc8fef0002fdcc10286ae0e66619', class: `twofa__resend-button ${this.pinAttemptsExceeded ? 'twofa__resend-button--disabled' : ''}`, onClick: this.resendCodeHandler, disabled: !this.isResendButtonAvailable || this.pinAttemptsExceeded }, this.isResendButtonAvailable
             ? translate('twofaResendButton', this.language)
             : this.formatTime()))));
     }
@@ -442,6 +472,40 @@ export class TwofaInput {
                 "reflect": true,
                 "defaultValue": "''"
             },
+            "enableSouthAfricanMode": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable South African registration mode"
+                },
+                "attribute": "enable-south-african-mode",
+                "reflect": true
+            },
+            "pinAttemptsExceeded": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Check if user has exceeded the failing pin code inputs"
+                },
+                "attribute": "pin-attempts-exceeded",
+                "reflect": true
+            },
             "clientStylingUrl": {
                 "type": "string",
                 "mutable": false,
@@ -487,7 +551,8 @@ export class TwofaInput {
             "showTooltip": {},
             "errorMessage": {},
             "code": {},
-            "resendIntervalSecondsLeft": {}
+            "resendIntervalSecondsLeft": {},
+            "revealedIndexes": {}
         };
     }
     static get events() {
@@ -568,9 +633,6 @@ export class TwofaInput {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
-                "propName": "clientStyling",
-                "methodName": "handleStylingChange"
-            }, {
                 "propName": "isValid",
                 "methodName": "validityChanged"
             }, {
@@ -579,6 +641,9 @@ export class TwofaInput {
             }, {
                 "propName": "clientStylingUrl",
                 "methodName": "handleStylingUrlChange"
+            }, {
+                "propName": "clientStyling",
+                "methodName": "handleStylingChange"
             }];
     }
     static get listeners() {

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

@@ -29,6 +29,10 @@ export const TRANSLATIONS = {
         "enterIEAddressManually": "For IRE, enter the address manually",
         "postalLookUpNoAddressFound": "No addresses found for this postal code",
         "searchingForAddresses": "Searching for addresses...",
+        "SAIdLengthError": "SA ID must be 13 digits",
+        "SAIdInvalidError": "Invalid SA ID",
+        "PassportLengthError": "Passport number must be 8 or 9 digits.",
+        "PasswordMustContain": "Password must contain:"
     },
     "hu": {
         "dateError": "A választott dátumnak {min} és {max} között kell lennie",
@@ -55,7 +59,11 @@ export const TRANSLATIONS = {
         "InvalidDocumentNumber": "Csak számjegyek engedélyezettek.",
         "twofaDescription": "<p> A megerősítő kódot elküldtük a következő címre: <p> {destination}. </p> </p> <p> Kérjük, írja be az alábbi PIN-kódot. </p>",
         "twofaResendMessage": "Nem kapta meg a megerősítő kódot?",
-        "twofaResendButton": "Újraküldés"
+        "twofaResendButton": "Újraküldés",
+        "PassportLengthError": "Az útlevélszámnak 9 számjegyűnek kell lennie",
+        "SAIdLengthError": "A dél-afrikai személyi számnak 13 számjegyűnek kell lennie",
+        "SAIdInvalidError": "Érvénytelen dél-afrikai személyi szám",
+        "PasswordMustContain": "A jelszónak tartalmaznia kell:"
     },
     "hr": {
         "dateError": "Odabrani datum treba biti između {min} i {max}",
@@ -82,7 +90,11 @@ export const TRANSLATIONS = {
         "InvalidDocumentNumber": "Dopušteni su samo numerički znakovi.",
         "twofaDescription": "<p> Poslali smo verifikacijski kod na: <p> {destination}. </p> </p> <p> Molimo unesite PIN ispod. </p>",
         "twofaResendMessage": "Niste primili verifikacijski kod?",
-        "twofaResendButton": "Ponovno pošalji"
+        "twofaResendButton": "Ponovno pošalji",
+        "PassportLengthError": "Broj putovnice mora imati 9 znamenki",
+        "SAIdLengthError": "Južnoafrički osobni broj mora imati 13 znamenki",
+        "SAIdInvalidError": "Nevažeći južnoafrički osobni broj",
+        "PasswordMustContain": "Lozinka mora sadržavati:"
     },
     "tr": {
         "dateError": "Seçilen tarih {min} ve {max} arasında olmalıdır",
@@ -109,7 +121,11 @@ export const TRANSLATIONS = {
         "InvalidDocumentNumber": "Sadece sayısal karakterlere izin verilir.",
         "twofaDescription": "<p> Doğrulama kodunu şu adrese gönderdik: <p> {destination}. </p> </p> <p> Lütfen aşağıya PIN kodunu girin. </p>",
         "twofaResendMessage": "Doğrulama kodunu almadınız mı?",
-        "twofaResendButton": "Yeniden gönder"
+        "twofaResendButton": "Yeniden gönder",
+        "PassportLengthError": "Pasaport numarası 9 haneli olmalıdır",
+        "SAIdLengthError": "Güney Afrika kimlik numarası 13 haneli olmalıdır",
+        "SAIdInvalidError": "Geçersiz Güney Afrika kimlik numarası",
+        "PasswordMustContain": "Şifre şunları içermelidir:"
     },
     "pt-br": {
         "dateError": "A data selecionada deve estar entre {min} e {max}",
@@ -136,7 +152,11 @@ export const TRANSLATIONS = {
         "InvalidDocumentNumber": "Apenas caracteres numéricos são permitidos.",
         "twofaDescription": "<p> Enviamos o código de verificação para: <p> {destination}. </p> </p> <p> Por favor, insira o PIN abaixo. </p>",
         "twofaResendMessage": "Não recebeu o código de verificação?",
-        "twofaResendButton": "Reenviar"
+        "twofaResendButton": "Reenviar",
+        "PassportLengthError": "O número do passaporte deve ter 9 dígitos",
+        "SAIdLengthError": "O número de identificação da África do Sul deve ter 13 dígitos",
+        "SAIdInvalidError": "Número de identificação da África do Sul inválido",
+        "PasswordMustContain": "A senha deve conter:"
     },
     "es-mx": {
         "dateError": "La fecha seleccionada debe ser entre {min} y {max}",
@@ -163,9 +183,40 @@ export const TRANSLATIONS = {
         "InvalidDocumentNumber": "Solo se permiten caracteres numéricos.",
         "twofaDescription": "<p> Hemos enviado el código de verificación a: <p> {destination}. </p> </p> <p> Por favor, ingrese el PIN a continuación. </p>",
         "twofaResendMessage": "¿No recibiste el código de verificación?",
-        "twofaResendButton": "Reenviar"
+        "twofaResendButton": "Reenviar",
+        "PassportLengthError": "El número de pasaporte debe tener 9 dígitos",
+        "SAIdLengthError": "El número de identificación de Sudáfrica debe tener 13 dígitos",
+        "SAIdInvalidError": "Número de identificación de Sudáfrica inválido",
+        "PasswordMustContain": "La contraseña debe contener:"
     }
 };
+export const CONSTANTS = {
+    DOCUMENT_NUMBER: "DocumentNumber",
+    FIRSTNAME_ON_DOCUMENT: "FirstnameOnDocument",
+    LASTNAME_ON_DOCUMENT: "LastnameOnDocument",
+    PASSPORT: "Passport",
+    SOUTH_AFRICAN_ID: "SouthAfricanID",
+    BIRTHDATE: "BirthDate",
+    PASSPORT_NUMERIC_REGEX: /^\d{8,9}$/,
+    SA_ID_BASIC_REGEX: /^\d{13}$/,
+    SOUTH_AFRICAN_ID_LENGTH: 13,
+    NON_LETTERS_REGEX: /[^A-Za-z]/g,
+    DATE_FORMAT: "yyyy-MM-dd",
+    PASSWORD_COMPLEXITY_PASSED: "passed",
+    PASSWORD_COMPLEXITY_FAILED: "failed"
+};
+export const ERROR_KEYS = {
+    PASSPORT_INVALID: 'PassportLengthError',
+    SA_ID_LENGTH: 'SAIdLengthError',
+    SA_ID_INVALID: 'SAIdInvalidError',
+    REQUIRED: 'requiredError',
+    LENGTH: 'lengthError',
+    DUPLICATE: 'duplicateInputError',
+};
+export const STATUS_ICONS = {
+    PASSED: '✓',
+    FAILED: '✕',
+};
 export const translate = (key, customLang, values) => {
     const lang = customLang;
     let translation = TRANSLATIONS[lang !== undefined ? lang : DEFAULT_LANGUAGE][key];
@@ -192,3 +243,24 @@ export const getTranslations = (url) => {
         });
     });
 };
+export const validateID = (id) => {
+    if (!CONSTANTS.SA_ID_BASIC_REGEX.test(id))
+        return false;
+    const digits = id.split("").map(n => parseInt(n, 10));
+    let oddSum = 0;
+    for (let i = 0; i < 12; i += 2) {
+        oddSum += digits[i];
+    }
+    let evenConcat = "";
+    for (let i = 1; i < 12; i += 2) {
+        evenConcat += digits[i];
+    }
+    const evenNumber = parseInt(evenConcat, 10) * 2;
+    const evenSum = evenNumber
+        .toString()
+        .split("")
+        .reduce((s, n) => s + parseInt(n, 10), 0);
+    const total = oddSum + evenSum;
+    let checkDigit = (10 - (total % 10)) % 10;
+    return checkDigit === digits[12];
+};