@arquimedes.co/eureka-forms 2.0.96 → 2.0.98

package/dist/@Types/GenericFormSteps.d.ts

@@ -35,7 +35,7 @@ export interface GTextInput extends GBaseStep {
     validation?: {
         message: string;
         value: string;
-        type: 'EMAIL' | 'OTHER';
+        type: 'EMAIL' | 'PHONE' | 'OTHER';
     };
     required: boolean;
     showIcon?: boolean;

package/dist/@Types/Organization.d.ts

@@ -1,3 +1,4 @@
+import { CountryCode } from 'libphonenumber-js';
 import { Branding } from './Branding';
 export interface Organization {
     /** The Organization's id */
@@ -6,4 +7,5 @@ export interface Organization {
     name: string;
     branding: Branding;
     customBrandings: boolean;
+    countryCode?: CountryCode;
 }

package/dist/App/App.d.ts

@@ -3,6 +3,7 @@ import { Classifier, Form } from '../@Types/Form';
 import './App.css';
 import { CustomStep, CustomStepProps } from '../FormSteps/CustomStep';
 import { EditorState } from 'draft-js';
+import { CountryCode } from 'libphonenumber-js';
 export interface AppProps {
     /** If the app is currently a widget */
     isWidget?: boolean;
@@ -50,6 +51,8 @@ export interface AppProps {
     handleConfirmed?: () => void;
     /** Function called to scroll to the top */
     scrollToTop?: () => void;
+    /** The default country to use in phone pickers */
+    countryCode?: CountryCode;
 }
 export declare const IdFormContext: React.Context<string>;
 declare function AppComponent({ formData, valuesData, ...props }: AppProps): JSX.Element;

package/dist/App/AppFunctions.d.ts

@@ -4,7 +4,11 @@ import { SiteState, ValuesStore } from '../States/SiteSlice';
 import { CustomStep } from '../FormSteps/CustomStep';
 import { MapperElement } from '../@Types/MapperElement';
 import { MapperValue } from '../FormSteps/MapperStep/MaterialMapperStep/MaterialMapperStep';
-export declare const calcValuesStore: (idOrganization: string, form: Readonly<Form>, originalValues?: Record<string, any>, postview?: boolean, customSteps?: Record<string, CustomStep>) => Promise<ValuesStore>;
+import { CountryCode } from 'libphonenumber-js/max';
+export declare const calcValuesStore: (orgInfo: {
+    idOrganization: string;
+    countryCode: CountryCode;
+}, form: Readonly<Form>, originalValues?: Record<string, any>, postview?: boolean, customSteps?: Record<string, CustomStep>) => Promise<ValuesStore>;
 export declare const addMapperStep: <Type>(step: Mapper, customSteps: Record<string, CustomStep>, path?: string) => {
     element: MapperElement<Type>;
     /** Record of all the new mapper values created */
@@ -12,5 +16,8 @@ export declare const addMapperStep: <Type>(step: Mapper, customSteps: Record<str
     /** Record of all the new steps created */
     steps: Record<string, FormStep>;
 };
-export declare const mapOriginalValue: (idOrganization: string, step: FormStep, value: any, values: ValuesStore, form?: Readonly<Form>, path?: string) => Promise<any>;
+export declare const mapOriginalValue: (orgInfo: {
+    idOrganization: string;
+    countryCode: CountryCode;
+}, step: FormStep, value: any, values: ValuesStore, form?: Readonly<Form>, path?: string) => Promise<any>;
 export declare const calcInitialSections: (form: Form) => Pick<SiteState, 'previousSections' | 'idCurrentSection' | 'nextSections'>;

package/dist/App/AppFunctions.js

@@ -60,7 +60,9 @@ import { getRawText, stringToDraft } from '../Utils/DraftFunctions';
 import ConditionTypes from '../constants/ConditionTypes';
 import widgetInstance from '../Utils/AxiosWidget';
 import { calcRecursiveData } from '../Utils/FormStepFunctions';
-export var calcValuesStore = function (idOrganization, form, originalValues, postview, customSteps) {
+import { getCountry } from 'react-international-phone';
+import { isValidPhoneNumber } from '../Utils/PhoneFunctions';
+export var calcValuesStore = function (orgInfo, form, originalValues, postview, customSteps) {
     if (originalValues === void 0) { originalValues = {}; }
     if (postview === void 0) { postview = false; }
     if (customSteps === void 0) { customSteps = {}; }
@@ -83,7 +85,7 @@ export var calcValuesStore = function (idOrganization, form, originalValues, pos
                                     case 0:
                                         step = form.steps[idValue];
                                         if (!step) return [3 /*break*/, 2];
-                                        return [4 /*yield*/, mapOriginalValue(idOrganization, step, originalValues[step.id], values, form)];
+                                        return [4 /*yield*/, mapOriginalValue(orgInfo, step, originalValues[step.id], values, form)];
                                     case 1:
                                         value = _b.sent();
                                         if (value !== undefined) {
@@ -162,13 +164,13 @@ export var addMapperStep = function (step, customSteps, path) {
     }
     return { element: element, mappers: mappers, steps: steps };
 };
-export var mapOriginalValue = function (idOrganization, step, value, values, form, path) {
+export var mapOriginalValue = function (orgInfo, step, value, values, form, path) {
     if (path === void 0) { path = ''; }
     return __awaiter(void 0, void 0, void 0, function () {
-        var _a, elements, mappedElements, _loop_1, _i, elements_1, element, defaultValue, option, stepClassifier, classifier, params, url, entityValues, entityValue;
-        var _b, _c, _d, _e, _f, _g, _h, _j;
-        return __generator(this, function (_k) {
-            switch (_k.label) {
+        var _a, elements, mappedElements, _loop_1, _i, elements_1, element, defaultValue, option, stepClassifier, classifier, params, url, entityValues, entityValue, country;
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        return __generator(this, function (_o) {
+            switch (_o.label) {
                 case 0:
                     if (!value)
                         return [2 /*return*/, value];
@@ -179,15 +181,16 @@ export var mapOriginalValue = function (idOrganization, step, value, values, for
                         case FormStepTypes.SELECTOR: return [3 /*break*/, 7];
                         case FormStepTypes.CLASSIFIER_SELECTOR: return [3 /*break*/, 8];
                         case FormStepTypes.ENTITYVALUEPICKER: return [3 /*break*/, 9];
+                        case FormStepTypes.TEXTINPUT: return [3 /*break*/, 12];
                     }
-                    return [3 /*break*/, 12];
+                    return [3 /*break*/, 13];
                 case 1:
                     elements = value;
                     mappedElements = [];
                     _loop_1 = function (element) {
-                        var idElement, mappedElement, base, _l, _m, subStep, dependencies, _o, dependencies_1, idDep, mappedIdDep, _p, _q, key;
-                        return __generator(this, function (_r) {
-                            switch (_r.label) {
+                        var idElement, mappedElement, base, _p, _q, subStep, dependencies, _r, dependencies_1, idDep, mappedIdDep, _s, _t, key;
+                        return __generator(this, function (_u) {
+                            switch (_u.label) {
                                 case 0:
                                     idElement = (_b = element.id) !== null && _b !== void 0 ? _b : nanoid();
                                     mappedElement = {
@@ -207,7 +210,7 @@ export var mapOriginalValue = function (idOrganization, step, value, values, for
                                                     case 0:
                                                         newIdStep = base + step.id + '-' + idElement + '-' + idStep;
                                                         mappedElement.ids[idStep] = newIdStep;
-                                                        return [4 /*yield*/, mapOriginalValue(idOrganization, step.steps[idStep], element[idStep], values, form, base + step.id + '-' + idElement)];
+                                                        return [4 /*yield*/, mapOriginalValue(orgInfo, step.steps[idStep], element[idStep], values, form, base + step.id + '-' + idElement)];
                                                     case 1:
                                                         value = _a.sent();
                                                         if (value !== undefined) {
@@ -220,15 +223,15 @@ export var mapOriginalValue = function (idOrganization, step, value, values, for
                                             });
                                         }); }))];
                                 case 1:
-                                    _r.sent();
-                                    for (_l = 0, _m = Object.values(step.steps); _l < _m.length; _l++) {
-                                        subStep = _m[_l];
+                                    _u.sent();
+                                    for (_p = 0, _q = Object.values(step.steps); _p < _q.length; _p++) {
+                                        subStep = _q[_p];
                                         dependencies = (_c = subStep.dependencies) !== null && _c !== void 0 ? _c : [];
                                         if (subStep.condition) {
                                             dependencies = __spreadArray(__spreadArray([], dependencies, true), calcNestedConditionSteps(subStep.condition), true).filter(function (item, i, ar) { return ar.indexOf(item) === i; });
                                         }
-                                        for (_o = 0, dependencies_1 = dependencies; _o < dependencies_1.length; _o++) {
-                                            idDep = dependencies_1[_o];
+                                        for (_r = 0, dependencies_1 = dependencies; _r < dependencies_1.length; _r++) {
+                                            idDep = dependencies_1[_r];
                                             mappedIdDep = base + step.id + '-' + idElement + '-' + idDep;
                                             if (!values.sections[step.idSection][idDep] &&
                                                 !values.global[mappedIdDep] &&
@@ -238,8 +241,8 @@ export var mapOriginalValue = function (idOrganization, step, value, values, for
                                             }
                                         }
                                     }
-                                    for (_p = 0, _q = Object.keys(element); _p < _q.length; _p++) {
-                                        key = _q[_p];
+                                    for (_s = 0, _t = Object.keys(element); _s < _t.length; _s++) {
+                                        key = _t[_s];
                                         if (step.steps[key] || key === 'id')
                                             continue;
                                         mappedElement.originalValues[key] = element[key];
@@ -250,14 +253,14 @@ export var mapOriginalValue = function (idOrganization, step, value, values, for
                         });
                     };
                     _i = 0, elements_1 = elements;
-                    _k.label = 2;
+                    _o.label = 2;
                 case 2:
                     if (!(_i < elements_1.length)) return [3 /*break*/, 5];
                     element = elements_1[_i];
                     return [5 /*yield**/, _loop_1(element)];
                 case 3:
-                    _k.sent();
-                    _k.label = 4;
+                    _o.sent();
+                    _o.label = 4;
                 case 4:
                     _i++;
                     return [3 /*break*/, 2];
@@ -278,7 +281,7 @@ export var mapOriginalValue = function (idOrganization, step, value, values, for
                             return [2 /*return*/, (_e = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) !== null && _e !== void 0 ? _e : ''];
                         }
                     }
-                    _k.label = 7;
+                    _o.label = 7;
                 case 7:
                     {
                         option = step.options.find(function (option) { return option.value === value; });
@@ -286,7 +289,7 @@ export var mapOriginalValue = function (idOrganization, step, value, values, for
                             return [2 /*return*/, option];
                         return [2 /*return*/, value];
                     }
-                    _k.label = 8;
+                    _o.label = 8;
                 case 8:
                     {
                         stepClassifier = (_f = form === null || form === void 0 ? void 0 : form.classifiers) === null || _f === void 0 ? void 0 : _f[(_g = step.idClassifier) !== null && _g !== void 0 ? _g : ''];
@@ -294,16 +297,16 @@ export var mapOriginalValue = function (idOrganization, step, value, values, for
                             classifier = (_h = form.classifiers) === null || _h === void 0 ? void 0 : _h[value];
                             return [2 /*return*/, { value: value, label: classifier === null || classifier === void 0 ? void 0 : classifier.name }];
                         }
-                        return [3 /*break*/, 13];
+                        return [3 /*break*/, 14];
                     }
-                    _k.label = 9;
+                    _o.label = 9;
                 case 9:
                     if (!!value._id) return [3 /*break*/, 11];
                     params = new URLSearchParams(value);
-                    url = "".concat(idOrganization, "/entities/").concat(step.idEntity, "?").concat(params.toString());
+                    url = "".concat(orgInfo.idOrganization, "/entities/").concat(step.idEntity, "?").concat(params.toString());
                     return [4 /*yield*/, widgetInstance.get(url)];
                 case 10:
-                    entityValues = (_k.sent()).data;
+                    entityValues = (_o.sent()).data;
                     if (entityValues.length === 1) {
                         entityValue = entityValues[0];
                         if (((_j = step.options[entityValue._id]) === null || _j === void 0 ? void 0 : _j.type) ===
@@ -314,13 +317,31 @@ export var mapOriginalValue = function (idOrganization, step, value, values, for
                     return [2 /*return*/, null];
                 case 11: return [2 /*return*/, value];
                 case 12:
+                    {
+                        if (step.clientInfoType === 'cel' ||
+                            ((_k = step.validation) === null || _k === void 0 ? void 0 : _k.type) === 'PHONE') {
+                            if (!isValidPhoneNumber(value)) {
+                                country = getCountry({
+                                    field: 'iso2',
+                                    value: (_m = (_l = orgInfo.countryCode) === null || _l === void 0 ? void 0 : _l.toLowerCase()) !== null && _m !== void 0 ? _m : 'co',
+                                });
+                                if (country &&
+                                    isValidPhoneNumber(country.dialCode + value)) {
+                                    return [2 /*return*/, country.dialCode + value];
+                                }
+                            }
+                        }
+                        return [2 /*return*/, value];
+                    }
+                    _o.label = 13;
+                case 13:
                     if (step.type.startsWith('CBR_') &&
                         (value === null || value === void 0 ? void 0 : value.id) &&
                         typeof value.id === 'number') {
                         return [2 /*return*/, __assign(__assign({}, value), { id: value.id.toString() })];
                     }
                     return [2 /*return*/, value];
-                case 13: return [2 /*return*/];
+                case 14: return [2 /*return*/];
             }
         });
     });

package/dist/App/AppHooks.js

@@ -113,11 +113,11 @@ export var useSetupApp = function (isEmbedded, _a) {
         });
     }); };
     var loadData = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var idOrganization, organization, form, match, dependencies, values;
+        var idOrganization, organization, form, countryCode, match, dependencies, values;
         var _a;
-        var _b, _c, _d;
-        return __generator(this, function (_e) {
-            switch (_e.label) {
+        var _b, _c, _d, _e, _f;
+        return __generator(this, function (_g) {
+            switch (_g.label) {
                 case 0:
                     idOrganization = others.idOrganization;
                     organization = null;
@@ -125,7 +125,7 @@ export var useSetupApp = function (isEmbedded, _a) {
                     if (!(form && preview && form.isStandAlone)) return [3 /*break*/, 2];
                     return [4 /*yield*/, loadOrg()];
                 case 1:
-                    organization = _e.sent();
+                    organization = _g.sent();
                     return [3 /*break*/, 4];
                 case 2:
                     if (!(!form && apiKey)) return [3 /*break*/, 4];
@@ -135,12 +135,13 @@ export var useSetupApp = function (isEmbedded, _a) {
                         ])];
                 case 3:
                     //Is iframe or widget
-                    _a = _e.sent(), organization = _a[0], form = _a[1];
-                    _e.label = 4;
+                    _a = _g.sent(), organization = _a[0], form = _a[1];
+                    _g.label = 4;
                 case 4:
                     if (organization && !idOrganization)
                         idOrganization = organization.idOrganization;
                     setOrganization(organization);
+                    countryCode = (_c = (_b = others.countryCode) !== null && _b !== void 0 ? _b : organization === null || organization === void 0 ? void 0 : organization.countryCode) !== null && _c !== void 0 ? _c : 'CO';
                     /** For localhost development */
                     if (!idOrganization && process.env.NODE_ENV !== 'production') {
                         match = location.origin.match(/\/\/(.*?)\./);
@@ -178,15 +179,15 @@ export var useSetupApp = function (isEmbedded, _a) {
                     if (!form || !idOrganization)
                         return [2 /*return*/];
                     dependencies = {};
-                    return [4 /*yield*/, calcValuesStore(idOrganization, form, valuesData, postview, customSteps)];
+                    return [4 /*yield*/, calcValuesStore({ idOrganization: idOrganization, countryCode: countryCode }, form, valuesData, postview, customSteps)];
                 case 5:
-                    values = _e.sent();
+                    values = _g.sent();
                     dispatch(reset(__assign(__assign({ formStyle: internal
                             ? InternalFormStyle
-                            : __assign(__assign({}, InternalFormStyle), ((_b = form === null || form === void 0 ? void 0 : form.style) !== null && _b !== void 0 ? _b : {})), confirmation: {
-                            confirmationMessage: (_c = form.confirmationMessage) !== null && _c !== void 0 ? _c : BaseConfirmationMessage,
-                            showLink: (_d = form.showLink) !== null && _d !== void 0 ? _d : false,
-                        }, internal: !!internal, idOrganization: idOrganization, preview: !!preview, partial: !!partial, postview: !!postview, editable: !!(editable !== null && editable !== void 0 ? editable : true), values: values }, calcInitialSections(form)), { dependencies: calcDependencies(form.steps, customSteps, form.steps, dependencies, values) })));
+                            : __assign(__assign({}, InternalFormStyle), ((_d = form === null || form === void 0 ? void 0 : form.style) !== null && _d !== void 0 ? _d : {})), confirmation: {
+                            confirmationMessage: (_e = form.confirmationMessage) !== null && _e !== void 0 ? _e : BaseConfirmationMessage,
+                            showLink: (_f = form.showLink) !== null && _f !== void 0 ? _f : false,
+                        }, internal: !!internal, idOrganization: idOrganization, preview: !!preview, partial: !!partial, postview: !!postview, editable: !!(editable !== null && editable !== void 0 ? editable : true), values: values }, calcInitialSections(form)), { dependencies: calcDependencies(form.steps, customSteps, form.steps, dependencies, values), countryCode: countryCode })));
                     return [2 /*return*/];
             }
         });

package/dist/Form/FormFunctions.js

@@ -22,11 +22,12 @@ import { convertFromRaw, convertToRaw } from 'draft-js';
 import FormStepTypes, { EntityValueDataTypes, } from '../constants/FormStepTypes';
 import { calcStepDeps } from '../FormSteps/StepHooks';
 import { calcRecursiveData } from '../Utils/FormStepFunctions';
+import { isValidPhoneNumber } from '../Utils/PhoneFunctions';
 /**
  * Function that cals the value of a step to output on submit
  */
 export var calcValue = function (idStep, steps, values, customSteps, deleteIds, value) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     if (value === void 0) { value = values[idStep]; }
     var step = steps[idStep];
     if (!step)
@@ -37,6 +38,17 @@ export var calcValue = function (idStep, steps, values, customSteps, deleteIds,
     }
     else {
         switch (step.type) {
+            case FormStepTypes.TEXTINPUT: {
+                if (step.clientInfoType === 'cel' ||
+                    ((_c = step.validation) === null || _c === void 0 ? void 0 : _c.type) === 'PHONE') {
+                    if (isValidPhoneNumber(value))
+                        return value;
+                    return '';
+                }
+                else {
+                    return value;
+                }
+            }
             case FormStepTypes.TEXTAREA: {
                 if (step.hasTextEditor) {
                     var currentContent = value.getCurrentContent();
@@ -63,29 +75,29 @@ export var calcValue = function (idStep, steps, values, customSteps, deleteIds,
                 return value.value;
             }
             case FormStepTypes.MAPPER: {
-                var elements = (_c = value === null || value === void 0 ? void 0 : value.elements) === null || _c === void 0 ? void 0 : _c.filter(function (element) { return element.deleted !== true; });
+                var elements = (_d = value === null || value === void 0 ? void 0 : value.elements) === null || _d === void 0 ? void 0 : _d.filter(function (element) { return element.deleted !== true; });
                 var mappedValues = [];
                 for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {
                     var element = elements_1[_i];
                     var newValue = {
                         id: element.id,
                     };
-                    for (var _d = 0, _e = Object.keys(element.originalValues); _d < _e.length; _d++) {
-                        var key = _e[_d];
+                    for (var _e = 0, _f = Object.keys(element.originalValues); _e < _f.length; _e++) {
+                        var key = _f[_e];
                         newValue[key] = element.originalValues[key];
                     }
                     if (element.value)
                         newValue.value = element.value;
                     var nestedDeleteIds = [];
-                    for (var _f = 0, _g = Object.keys(step.steps); _f < _g.length; _f++) {
-                        var idStep_1 = _g[_f];
+                    for (var _g = 0, _h = Object.keys(step.steps); _g < _h.length; _g++) {
+                        var idStep_1 = _h[_g];
                         var mappedId = element.ids[idStep_1];
                         if (values[mappedId] !== undefined) {
                             newValue[idStep_1] = calcValue(idStep_1, step.steps, values, customSteps, nestedDeleteIds, values[mappedId]);
                         }
                     }
-                    for (var _h = 0, nestedDeleteIds_1 = nestedDeleteIds; _h < nestedDeleteIds_1.length; _h++) {
-                        var idStep_2 = nestedDeleteIds_1[_h];
+                    for (var _j = 0, nestedDeleteIds_1 = nestedDeleteIds; _j < nestedDeleteIds_1.length; _j++) {
+                        var idStep_2 = nestedDeleteIds_1[_j];
                         delete newValue[idStep_2];
                     }
                     deleteIds.push.apply(deleteIds, nestedDeleteIds);

package/dist/FormSteps/PhoneInputStep/MaterialTextInputStep/MaterialPhoneInputStep.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { PhoneInputStepProps } from '../PhoneInputStep';
+declare function PhoneInputStep({ step, editable, defaultValue, }: PhoneInputStepProps): JSX.Element;
+export default PhoneInputStep;

package/dist/FormSteps/PhoneInputStep/MaterialTextInputStep/MaterialPhoneInputStep.js

@@ -0,0 +1,51 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './MaterialPhoneInputStep.module.css';
+import { calcStepWidth } from '../../StepFunctions';
+import { useContext } from 'react';
+import FormContext from '../../../Contexts/FormContext';
+import { selectBreakPoint, useAppSelector } from '../../../hooks';
+import { useFormStep } from '../../StepHooks';
+import RoundedPhoneInput from '../../../Shared/RoundedPhoneInput/RoundedPhoneInput';
+import { isEmptyPhoneNumber, isValidPhoneNumber, } from '../../../Utils/PhoneFunctions';
+function PhoneInputStep(_a) {
+    var _b;
+    var step = _a.step, editable = _a.editable, _c = _a.defaultValue, defaultValue = _c === void 0 ? step.defaultValue : _c;
+    var currentBreakPoint = useAppSelector(selectBreakPoint);
+    var _d = useAppSelector(function (state) { return state.global; }), formStyle = _d.formStyle, postview = _d.postview;
+    var form = useContext(FormContext);
+    var _e = useFormStep(step, {
+        defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : '',
+        debounce: true,
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+            validate: function (phone) {
+                var _a, _b;
+                if (isValidPhoneNumber(phone))
+                    return true;
+                if (!step.required && isEmptyPhoneNumber(phone))
+                    return true;
+                return ((_b = (_a = step.validation) === null || _a === void 0 ? void 0 : _a.message) !== null && _b !== void 0 ? _b : 'Número de teléfono inválido');
+            },
+        },
+    }), ref = _e.ref, value = _e.value, onChange = _e.onChange, error = _e.error, field = _e.field;
+    return (_jsx("div", __assign({ className: styles.container, style: {
+            width: currentBreakPoint <= step.size
+                ? '100%'
+                : calcStepWidth(step.size, form.size),
+            minHeight: step.description || (!postview && editable)
+                ? '55px'
+                : '43px',
+        } }, { children: _jsx(RoundedPhoneInput, __assign({}, field, { inputRef: ref, value: value, onChange: onChange, "data-testid": step.id, label: step.label, cantEdit: !editable || postview, required: step.required, fontWeight: 400, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.stepBackgroundColor, helperText: (_b = error === null || error === void 0 ? void 0 : error.message) !== null && _b !== void 0 ? _b : step.description, helperTextColor: formStyle.descriptionTextColor, error: !!error })) })));
+}
+export default PhoneInputStep;

package/dist/FormSteps/PhoneInputStep/MaterialTextInputStep/MaterialPhoneInputStep.module.css

@@ -0,0 +1,9 @@
+.container {
+    width: fit-content;
+    max-width: calc(100% - 20px);
+    display: flex;
+    padding: 10px;
+    padding-bottom: 0px;
+    padding-top: 5px;
+    margin-bottom: 0px;
+}

package/dist/FormSteps/PhoneInputStep/PhoneInputStep.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { TextInput } from '../../@Types/FormStep';
+import { StepProps } from '../Step';
+export interface PhoneInputStepProps extends StepProps {
+    /** The TextInputStep to display */
+    step: TextInput;
+    /** Default value to display */
+    defaultValue?: string;
+}
+declare function PhoneInputStep(props: PhoneInputStepProps): JSX.Element;
+export default PhoneInputStep;

package/dist/FormSteps/PhoneInputStep/PhoneInputStep.js

@@ -0,0 +1,25 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import MaterialPhoneInputStep from './MaterialTextInputStep/MaterialPhoneInputStep';
+import { useAppSelector } from '../../hooks';
+function PhoneInputStep(props) {
+    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return _jsx(MaterialPhoneInputStep, __assign({}, props));
+        }
+    }
+}
+export default PhoneInputStep;

package/dist/FormSteps/Step.js

@@ -44,15 +44,16 @@ import { useContext } from 'react';
 import CustomContext from '../Contexts/CustomContext';
 import { selectOriginalValue, useCondition } from './StepHooks';
 import TimePickerStep from './TimePickerStep/TimePickerStep';
+import PhoneInputStep from './PhoneInputStep/PhoneInputStep';
 function StepComponent(_a) {
-    var _b;
+    var _b, _c;
     var step = _a.step, props = __rest(_a, ["step"]);
     if (!step) {
         console.error('Step not found!', step);
         return _jsx("div", {});
     }
-    var _c = useAppSelector(function (state) { return state.global; }), postview = _c.postview, partial = _c.partial;
-    var _d = useContext(CustomContext), customSteps = _d.customSteps, customClientInfoStep = _d.customClientInfoStep;
+    var _d = useAppSelector(function (state) { return state.global; }), postview = _d.postview, partial = _d.partial;
+    var _e = useContext(CustomContext), customSteps = _e.customSteps, customClientInfoStep = _e.customClientInfoStep;
     var originalValue = useAppSelector(function (state) {
         return selectOriginalValue(state, step);
     });
@@ -92,6 +93,10 @@ function StepComponent(_a) {
             return (_jsx(TextAreaStep, __assign({}, props, { step: step, editable: editable })));
         }
         case FormStepTypes.TEXTINPUT: {
+            if (step.clientInfoType === 'cel' ||
+                ((_c = step.validation) === null || _c === void 0 ? void 0 : _c.type) === 'PHONE') {
+                return (_jsx(PhoneInputStep, __assign({}, props, { step: step, editable: editable })));
+            }
             return (_jsx(TextInputStep, __assign({}, props, { step: step, editable: editable })));
         }
         case FormStepTypes.DATEPICKER: {

package/dist/Shared/RoundedCheckBox/RoundedCheckBox.d.ts

@@ -16,7 +16,7 @@ interface ComponentProps extends StyleProps, Omit<CheckboxProps, 'size' | 'onCha
     checked: boolean;
 }
 /**
- * Generic datepicker with apps designs. Is class do to the use in the react-hook-forms library
+ * Generic datepicker with apps designs. Is class due to the use in the react-hook-forms library
  */
 declare class RoundedCheckBox extends React.Component<ComponentProps> {
     render(): JSX.Element;

package/dist/Shared/RoundedCheckBox/RoundedCheckBox.js

@@ -86,7 +86,7 @@ function CustomCheckBox(_a) {
     return (_jsx(Checkbox, __assign({}, others, { disabled: cantEdit, classes: classes, checked: checked, onChange: function (event) { return onChange === null || onChange === void 0 ? void 0 : onChange(event.target.checked); }, required: true, icon: _jsx(CheckBoxOutlineBlankRoundedIcon, { fontSize: "inherit" }), checkedIcon: _jsx(CheckBoxRoundedIcon, { fontSize: "inherit" }) })));
 }
 /**
- * Generic datepicker with apps designs. Is class do to the use in the react-hook-forms library
+ * Generic datepicker with apps designs. Is class due to the use in the react-hook-forms library
  */
 var RoundedCheckBox = /** @class */ (function (_super) {
     __extends(RoundedCheckBox, _super);

package/dist/Shared/RoundedDatePicker/RoundedDatePicker.d.ts

@@ -41,7 +41,7 @@ interface RoundedDatePickerProps extends Omit<DatePickerProps, 'ref'>, StyleProp
     ref?: React.RefObject<HTMLDivElement>;
 }
 /**
- * Generic datepicker with apps designs. Is class do to the use in the react-hook-forms library
+ * Generic datepicker with apps designs. Is class due to the use in the react-hook-forms library
  */
 declare class RoundedDatePicker extends React.Component<RoundedDatePickerProps> {
     render(): JSX.Element;

package/dist/Shared/RoundedDatePicker/RoundedDatePicker.js

@@ -336,7 +336,7 @@ function CustomDatePicker(_a) {
     }
 }
 /**
- * Generic datepicker with apps designs. Is class do to the use in the react-hook-forms library
+ * Generic datepicker with apps designs. Is class due to the use in the react-hook-forms library
  */
 var RoundedDatePicker = /** @class */ (function (_super) {
     __extends(RoundedDatePicker, _super);

package/dist/Shared/RoundedPhoneInput/RoundedPhoneInput.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { TextFieldProps } from '@material-ui/core/TextField';
+interface StyleProps {
+    /** The color of the text */
+    textColor?: string;
+    /** The color of the outline when selected and hovered on */
+    focusColor?: string;
+    /** The color of the error to display */
+    errorColor?: string;
+    /** The color of the outline when it is not selected */
+    outlineColor?: string;
+    /** The backgroundColor of the input */
+    backgroundColor?: string;
+    /** The borderRadius of the input */
+    borderRadius?: number;
+    /** If input is readOnly */
+    readOnly?: boolean;
+    /** The padding of the input */
+    padding?: string;
+    /** The size of the font to display the input in */
+    fontSize?: number | string;
+    /** The weight of the font of the value and the placeholder */
+    fontWeight?: number | string;
+    /** Cant edit */
+    cantEdit?: boolean;
+    /** The color of the helper text when not error */
+    helperTextColor?: string;
+    /** The max length of the string */
+    maxLength?: number;
+}
+interface RoundedPhoneInputProps extends StyleProps {
+    /** The value of the phoneinput */
+    value?: string;
+    onChange: (value: string) => void;
+    inputRef?: any;
+}
+/**
+ * Generic phoneinput with apps designs. Is class due to the use in the react-hook-forms library
+ */
+declare class RoundedPhoneInput extends React.Component<RoundedPhoneInputProps & Omit<TextFieldProps, 'onChange'>> {
+    render(): JSX.Element;
+}
+export default RoundedPhoneInput;

package/dist/Shared/RoundedPhoneInput/RoundedPhoneInput.js

@@ -0,0 +1,226 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+import { InputAdornment, MenuItem, Select } from '@material-ui/core';
+import parse from 'libphonenumber-js/max';
+import { defaultCountries, FlagImage, parseCountry, usePhoneInput, } from 'react-international-phone';
+import { useAppSelector } from '../../hooks';
+import isoCountries from 'i18n-iso-countries';
+import es from 'i18n-iso-countries/langs/es.json';
+isoCountries.registerLocale(es);
+var useTextfieldStyles = function (props) {
+    return makeStyles(function () { return ({
+        root: {
+            borderRadius: props.borderRadius,
+            '& input': {
+                cursor: props.cantEdit ? 'default' : 'text',
+                padding: props.padding,
+                fontWeight: props.fontWeight,
+                color: props.textColor,
+                fontSize: props.fontSize,
+                '&::placeholder': {
+                    fontSize: props.fontSize,
+                },
+                backgroundColor: props.backgroundColor,
+                borderRadius: props.borderRadius,
+            },
+            '& label': {
+                marginTop: '-4px',
+                fontSize: props.fontSize,
+                color: props.textColor + '8a',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                maxWidth: 'calc(100% - 22px)',
+            },
+            '& label.EF-MuiInputLabel-shrink': {
+                marginTop: '0px',
+                maxWidth: 'calc(100% - 5px)',
+            },
+            '& input + fieldset': {
+                borderRadius: props.borderRadius,
+            },
+            '& .EF-MuiInput-underline:after': {
+                borderBottomColor: props.outlineColor,
+            },
+            '& .EF-MuiOutlinedInput-root': {
+                borderRadius: props.borderRadius,
+                '&.Mui-focused fieldset': {
+                    borderColor: props.focusColor,
+                    borderWidth: props.readOnly ? 1 : 2,
+                },
+                '& .EF-MuiOutlinedInput-notchedOutline': {
+                    borderColor: props.outlineColor,
+                    '& legend': {
+                        fontSize: 'calc(' + props.fontSize + ' * 0.75)',
+                    },
+                },
+            },
+            '& .EF-MuiOutlinedInput-root:hover .EF-MuiOutlinedInput-notchedOutline': {
+                borderColor: props.cantEdit
+                    ? props.outlineColor
+                    : props.focusColor,
+            },
+            '& label.Mui-focused': {
+                color: props.focusColor,
+            },
+            '& .Mui-error': {
+                color: props.errorColor,
+            },
+            '& .EF-MuiOutlinedInput-adornedEnd': {
+                paddingRight: '7px',
+            },
+            '& .EF-MuiFormHelperText-root': {
+                color: props.helperTextColor,
+                position: 'relative',
+                marginRight: props.maxLength ? 40 : 14,
+            },
+            '& .EF-MuiFormHelperText-root.Mui-error': {
+                color: props.errorColor,
+            },
+            '& .EF-MuiInputAdornment-root': {
+                paddingTop: 2,
+                marginRight: 0,
+                '& .EF-MuiSelect-select': {
+                    backgroundColor: props.backgroundColor,
+                },
+                '& input': {
+                    padding: 0,
+                    margin: 0,
+                },
+                '& .EF-MuiInput-underline:before': {
+                    borderBottom: 'none !important',
+                },
+                '& .EF-MuiInput-underline:after': {
+                    borderBottom: 'none',
+                },
+            },
+        },
+    }); });
+};
+var useCountrySelectStyles = makeStyles(function () { return ({
+    root: {
+        padding: 0,
+        input: {
+            padding: 0,
+        },
+    },
+}); });
+function CustomPhoneInput(_a) {
+    var _b = _a.focusColor, focusColor = _b === void 0 ? '#3d5a7f' : _b, _c = _a.helperTextColor, helperTextColor = _c === void 0 ? '#989898' : _c, _d = _a.outlineColor, outlineColor = _d === void 0 ? '#0000003b' : _d, _e = _a.backgroundColor, backgroundColor = _e === void 0 ? 'white' : _e, _f = _a.textColor, textColor = _f === void 0 ? '#293241' : _f, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.borderRadius, borderRadius = _h === void 0 ? 10 : _h, _j = _a.padding, padding = _j === void 0 ? '6px 12px 6px 6px' : _j, _k = _a.fontSize, fontSize = _k === void 0 ? '1rem' : _k, _l = _a.errorColor, errorColor = _l === void 0 ? '#cc2936' : _l, _m = _a.fontWeight, fontWeight = _m === void 0 ? '300' : _m, _o = _a.cantEdit, cantEdit = _o === void 0 ? false : _o, value = _a.value, onChange = _a.onChange, inputRef = _a.inputRef, others = __rest(_a, ["focusColor", "helperTextColor", "outlineColor", "backgroundColor", "textColor", "readOnly", "borderRadius", "padding", "fontSize", "errorColor", "fontWeight", "cantEdit", "value", "onChange", "inputRef"]);
+    var classes = useTextfieldStyles({
+        padding: padding,
+        textColor: textColor,
+        errorColor: errorColor,
+        focusColor: focusColor,
+        outlineColor: outlineColor,
+        helperTextColor: helperTextColor,
+        backgroundColor: backgroundColor,
+        borderRadius: borderRadius,
+        readOnly: readOnly,
+        fontSize: fontSize,
+        fontWeight: fontWeight,
+        cantEdit: cantEdit,
+    })();
+    var defaultCountry = useAppSelector(function (state) { return state.global.countryCode; });
+    var countrySelectClasses = useCountrySelectStyles();
+    var _p = usePhoneInput({
+        value: '+' + value,
+        inputRef: inputRef,
+        defaultCountry: defaultCountry.toLowerCase(),
+        disableDialCodePrefill: true,
+        disableDialCodeAndPrefix: true,
+        onChange: function (data) { return onChange(data.phone.replace('+', '')); },
+    }), inputValue = _p.inputValue, handlePhoneValueChange = _p.handlePhoneValueChange, phoneRef = _p.inputRef, country = _p.country, setCountry = _p.setCountry;
+    var countries = useMemo(function () {
+        return defaultCountries
+            .map(function (c) {
+            var _a;
+            var country = parseCountry(c);
+            return {
+                country: country,
+                name: (_a = isoCountries.getName(country.iso2.toUpperCase(), 'es')) !== null && _a !== void 0 ? _a : country.name,
+            };
+        })
+            .sort(function (a, b) { return a.name.localeCompare(b.name); });
+    }, []);
+    return (_jsx(TextField, __assign({ classes: classes }, others, { variant: "outlined", size: "small", fullWidth: true, value: inputValue, onChange: handlePhoneValueChange, type: "tel", onPaste: function (e) {
+            var value = e.clipboardData.getData('Text');
+            if (!value.startsWith('+')) {
+                var phone = parse('+' + value);
+                if (phone === null || phone === void 0 ? void 0 : phone.isValid()) {
+                    e.preventDefault();
+                    if (phone.country)
+                        setCountry(phone.country.toLowerCase());
+                    onChange(phone.number);
+                }
+            }
+        }, inputRef: phoneRef, InputProps: {
+            readOnly: readOnly,
+            autoComplete: 'tel',
+            disabled: cantEdit,
+            startAdornment: (_jsx(InputAdornment, __assign({ position: "start", style: {
+                    borderBottom: 'none',
+                } }, { children: _jsx(Select, __assign({ classes: countrySelectClasses, value: country.iso2, onChange: function (e) {
+                        return setCountry(e.target.value);
+                    }, renderValue: function (value) { return (_jsx(FlagImage, { iso2: value, style: { display: 'flex' }, width: 20 })); } }, { children: countries.map(function (_a) {
+                        var country = _a.country, name = _a.name;
+                        return (_jsxs(MenuItem, __assign({ value: country.iso2 }, { children: [_jsx(FlagImage, { iso2: country.iso2, size: 20 }), _jsx("span", __assign({ style: {
+                                        marginLeft: '8px',
+                                        marginRight: '8px',
+                                    } }, { children: name })), _jsxs("span", __assign({ style: { color: 'grey' } }, { children: ["+", country.dialCode] }))] }), country.iso2));
+                    }) })) }))),
+        } })));
+}
+/**
+ * Generic phoneinput with apps designs. Is class due to the use in the react-hook-forms library
+ */
+var RoundedPhoneInput = /** @class */ (function (_super) {
+    __extends(RoundedPhoneInput, _super);
+    function RoundedPhoneInput() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    RoundedPhoneInput.prototype.render = function () {
+        return _jsx(CustomPhoneInput, __assign({}, this.props));
+    };
+    return RoundedPhoneInput;
+}(React.Component));
+export default RoundedPhoneInput;

package/dist/Shared/RoundedSelect/RoundedSelect.d.ts

@@ -60,7 +60,7 @@ interface RoundedSelectProps extends Omit<SelectProps, 'color'>, SelectorStylePr
     ref?: any;
 }
 /**
- * Generic textfield with apps designs. Is class do to the use in the react-hook-forms library
+ * Generic textfield with apps designs. Is class due to the use in the react-hook-forms library
  */
 declare class RoundedSelect extends React.Component<RoundedSelectProps> {
     render(): JSX.Element;

package/dist/Shared/RoundedSelect/RoundedSelect.js

@@ -199,7 +199,7 @@ function CustomSelect(_a) {
                 }, input: _jsx(OutlinedInput, { disabled: cantEdit, name: label, label: label ? label + (required ? ' *' : '') : undefined, classes: outlinedInputClasses }) }, { children: children })), helperText !== undefined && (_jsx(FormHelperText, __assign({ classes: helperTextClasses }, { children: helperText })))] })));
 }
 /**
- * Generic textfield with apps designs. Is class do to the use in the react-hook-forms library
+ * Generic textfield with apps designs. Is class due to the use in the react-hook-forms library
  */
 var RoundedSelect = /** @class */ (function (_super) {
     __extends(RoundedSelect, _super);

package/dist/Shared/RoundedTextField/RoundedTextField.d.ts

@@ -37,7 +37,7 @@ interface RoundedTextFieldProps extends StyleProps {
     value?: string;
 }
 /**
- * Generic textfield with apps designs. Is class do to the use in the react-hook-forms library
+ * Generic textfield with apps designs. Is class due to the use in the react-hook-forms library
  */
 declare class RoundedTextField extends React.Component<RoundedTextFieldProps & TextFieldProps> {
     render(): JSX.Element;

package/dist/Shared/RoundedTextField/RoundedTextField.js

@@ -160,7 +160,7 @@ function CustomTextfield(_a) {
                 } }, { children: [length, "/", maxLength] })))] })));
 }
 /**
- * Generic textfield with apps designs. Is class do to the use in the react-hook-forms library
+ * Generic textfield with apps designs. Is class due to the use in the react-hook-forms library
  */
 var RoundedTextField = /** @class */ (function (_super) {
     __extends(RoundedTextField, _super);

package/dist/Shared/RoundedTimePicker/RoundedTimePicker.d.ts

@@ -33,7 +33,7 @@ interface RoundedTimePickerProps extends Omit<SelectProps, 'color' | 'onChange'>
     working?: boolean;
 }
 /**
- * Generic textfield with apps designs. Is class do to the use in the react-hook-forms library
+ * Generic textfield with apps designs. Is class due to the use in the react-hook-forms library
  */
 declare class RoundedTimePicker extends React.Component<RoundedTimePickerProps> {
     render(): JSX.Element;

package/dist/Shared/RoundedTimePicker/RoundedTimePicker.js

@@ -278,7 +278,7 @@ function CustomSelect(_a) {
                         } }, { children: _jsx(MenuItem, { value: 0 }) })), helperText !== undefined && (_jsx(FormHelperText, __assign({ classes: helperTextClasses }, { children: helperText })))] }))] }));
 }
 /**
- * Generic textfield with apps designs. Is class do to the use in the react-hook-forms library
+ * Generic textfield with apps designs. Is class due to the use in the react-hook-forms library
  */
 var RoundedTimePicker = /** @class */ (function (_super) {
     __extends(RoundedTimePicker, _super);

package/dist/States/GlobalSlice.d.ts

@@ -2,8 +2,10 @@ import { FormStyle } from '../@Types/Form';
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { SiteState } from './SiteSlice';
 import { EurekaDraft } from '../@Types/Draft/Draft';
+import { CountryCode } from 'libphonenumber-js';
 export interface GlobalState {
     idOrganization: string;
+    countryCode: CountryCode;
     formStyle: FormStyle;
     confirmation: {
         confirmationMessage: EurekaDraft;
@@ -26,6 +28,7 @@ export declare const GlobalSlice: import("@reduxjs/toolkit").Slice<GlobalState,
         formStyle: FormStyle;
         preview: boolean;
         idOrganization: string;
+        countryCode: CountryCode;
         confirmation: {
             confirmationMessage: EurekaDraft;
             showLink: boolean;

package/dist/States/GlobalSlice.js

@@ -14,6 +14,7 @@ import { createSlice } from '@reduxjs/toolkit';
 import { BaseConfirmationMessage } from '../Contexts/FormContext';
 var initialState = {
     idOrganization: '',
+    countryCode: 'CO',
     formStyle: InternalFormStyle,
     confirmation: {
         confirmationMessage: BaseConfirmationMessage,

package/dist/Utils/PhoneFunctions.d.ts

@@ -0,0 +1,2 @@
+export declare function isValidPhoneNumber(phone: string): boolean;
+export declare function isEmptyPhoneNumber(phone: string): boolean;

package/dist/Utils/PhoneFunctions.js

@@ -0,0 +1,26 @@
+import * as libphonenumber from 'libphonenumber-js/max';
+import { guessCountryByPartialPhoneNumber, removeDialCode, } from 'react-international-phone';
+export function isValidPhoneNumber(phone) {
+    if (!phone.startsWith('+'))
+        phone = '+' + phone;
+    return libphonenumber.isValidPhoneNumber(phone);
+}
+export function isEmptyPhoneNumber(phone) {
+    if (!phone.startsWith('+'))
+        phone = '+' + phone;
+    var country = guessCountryByPartialPhoneNumber({
+        phone: phone,
+    }).country;
+    if (country &&
+        !removeDialCode({
+            phone: phone,
+            dialCode: country === null || country === void 0 ? void 0 : country.dialCode,
+        })) {
+        return true;
+    }
+    if (!country) {
+        console.error('Country not found for phone number:', phone);
+        return true;
+    }
+    return false;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@arquimedes.co/eureka-forms",
     "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-    "version": "2.0.96",
+    "version": "2.0.98",
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",
@@ -24,11 +24,14 @@
         "axios": "^1.6.3",
         "date-fns": "^2.23.0",
         "draft-js": "^0.11.7",
+        "i18n-iso-countries": "^7.11.3",
+        "libphonenumber-js": "^1.11.7",
         "logrocket": "^2.2.1",
         "nanoid": "^3.3.7",
         "react-draft-wysiwyg": "^1.15.0",
         "react-google-recaptcha": "^3.1.0",
         "react-hook-form": "^7.48.2",
+        "react-international-phone": "^4.3.0",
         "react-redux": "^8.1.3",
         "typescript": "^4.9.5"
     },