@arquimedes.co/eureka-forms 2.0.53 → 2.0.55

package/dist/App/AppHooks.js

@@ -67,6 +67,7 @@ import InternalFormStyle from '../constants/InternalFormStyle';
 import { calcDependencies } from '../Form/FormFunctions';
 import { iterateNestedSteps } from '../FormSteps/StepFunctions';
 import { createNextState } from '@reduxjs/toolkit';
+import { BaseConfirmationMessage } from '../Contexts/FormContext';
 export var useSetupApp = function (isEmbedded, _a) {
     var preview = _a.preview, internal = _a.internal, postview = _a.postview, partial = _a.partial, editable = _a.editable, handleConfirmed = _a.handleConfirmed, customSteps = _a.customSteps, valuesData = _a.valuesData, apiKey = _a.apiKey, formData = _a.formData, classifiers = _a.classifiers, others = __rest(_a, ["preview", "internal", "postview", "partial", "editable", "handleConfirmed", "customSteps", "valuesData", "apiKey", "formData", "classifiers"]);
     var _b = useState(undefined), form = _b[0], setForm = _b[1];
@@ -114,9 +115,9 @@ 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 _a;
-        var _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
+        var _b, _c, _d;
+        return __generator(this, function (_e) {
+            switch (_e.label) {
                 case 0:
                     idOrganization = others.idOrganization;
                     organization = null;
@@ -124,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 = _c.sent();
+                    organization = _e.sent();
                     return [3 /*break*/, 4];
                 case 2:
                     if (!(!form && apiKey)) return [3 /*break*/, 4];
@@ -134,8 +135,8 @@ export var useSetupApp = function (isEmbedded, _a) {
                         ])];
                 case 3:
                     //Is iframe or widget
-                    _a = _c.sent(), organization = _a[0], form = _a[1];
-                    _c.label = 4;
+                    _a = _e.sent(), organization = _a[0], form = _a[1];
+                    _e.label = 4;
                 case 4:
                     if (organization && !idOrganization)
                         idOrganization = organization.idOrganization;
@@ -179,10 +180,13 @@ export var useSetupApp = function (isEmbedded, _a) {
                     dependencies = {};
                     return [4 /*yield*/, calcValuesStore(idOrganization, form, valuesData, postview, customSteps)];
                 case 5:
-                    values = _c.sent();
+                    values = _e.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 : {})), 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), ((_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) })));
                     return [2 /*return*/];
             }
         });

package/dist/Contexts/FormContext.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
 import { Form } from '../@Types';
+import { EurekaDraft } from '../@Types/Draft/Draft';
+export declare const BaseConfirmationMessage: EurekaDraft;
 declare const FormContext: import("react").Context<Form>;
 export default FormContext;

package/dist/Contexts/FormContext.js

@@ -1,4 +1,51 @@
 import { createContext } from 'react';
+import { DraftEntityTypes } from '../constants/Draft/DraftEntityTypes';
+import { DraftEntityDataTypes } from '../constants/Draft/DraftEntityDataTypes';
+import { TicketPropertyTypes } from '../constants/TicketPropertyTypes';
+export var BaseConfirmationMessage = {
+    blocks: [
+        {
+            depth: 0,
+            data: {},
+            inlineStyleRanges: [
+                {
+                    offset: 15,
+                    length: 6,
+                    style: 'BOLD',
+                },
+            ],
+            text: 'Tu caso número ABC123 ha sido registrado!',
+            type: 'unstyled',
+            key: '5l788',
+            entityRanges: [
+                {
+                    offset: 15,
+                    length: 6,
+                    key: 0,
+                },
+            ],
+        },
+        {
+            depth: 0,
+            data: {},
+            inlineStyleRanges: [],
+            text: 'Pronto te estaremos dando respuesta.',
+            type: 'unstyled',
+            key: 'aco4l',
+            entityRanges: [],
+        },
+    ],
+    entityMap: {
+        '0': {
+            type: DraftEntityTypes.EUREKA,
+            data: {
+                type: DraftEntityDataTypes.TICKET,
+                property: TicketPropertyTypes.CASENUMBER,
+            },
+            mutability: 'IMMUTABLE',
+        },
+    },
+};
 var FormContext = createContext({
     firstSection: 'FIRST',
     sections: {
@@ -10,6 +57,8 @@ var FormContext = createContext({
         },
     },
     steps: {},
+    confirmationMessage: BaseConfirmationMessage,
+    showLink: true,
     size: {
         blockSize: 0,
         blockNum: 4,

package/dist/Form/ConfirmationDialog/ConfirmationDialog.js

@@ -9,15 +9,40 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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, Fragment as _Fragment } from "react/jsx-runtime";
 import CheckCircleOutlineRoundedIcon from '@material-ui/icons/CheckCircleOutlineRounded';
 import styles from './ConfirmationDialog.module.css';
 import Dialog from '@material-ui/core/Dialog';
 import CloseRoundedIcon from '@material-ui/icons/CloseRounded';
 import { useAppSelector } from '../../hooks';
+import { EditorState, convertFromRaw } from 'draft-js';
+import { Editor } from 'react-draft-wysiwyg';
+import { useContext, useMemo } from 'react';
+import { mapDraftEntities } from '../../Utils/DraftFunctions';
+import FormContext from '../../Contexts/FormContext';
 function ConfirmationDialog(_a) {
     var confirmation = _a.confirmation, onClose = _a.onClose;
-    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
+    var _b = useAppSelector(function (state) { return state.global; }), formStyle = _b.formStyle, global = __rest(_b, ["formStyle"]);
+    var form = useContext(FormContext);
+    var dependencies = useAppSelector(function (state) { return state.site.dependencies; });
+    var editorState = useMemo(function () {
+        return EditorState.createWithContent(convertFromRaw(mapDraftEntities({
+            dependencies: dependencies,
+            ticket: { caseNumber: confirmation.case },
+        }, JSON.parse(JSON.stringify(global.confirmation.confirmationMessage)))));
+    }, [global.confirmation, dependencies, form]);
+    var hasText = editorState.getCurrentContent().hasText();
     return (_jsx(Dialog, __assign({ PaperProps: {
             style: {
                 borderRadius: '20px',
@@ -26,8 +51,8 @@ function ConfirmationDialog(_a) {
             },
         }, open: true }, { children: _jsxs("div", __assign({ className: styles.confirmationContainer, style: { color: '#293241' } }, { children: [_jsx("div", __assign({ className: styles.closeIcon, onClick: function () {
                         onClose();
-                    } }, { children: _jsx(CloseRoundedIcon, { fontSize: "inherit" }) })), _jsxs("div", __assign({ className: styles.container }, { children: [_jsx("div", __assign({ className: styles.checkContainer, style: { color: formStyle.primaryColor } }, { children: _jsx(CheckCircleOutlineRoundedIcon, { fontSize: "inherit", style: { fontSize: '160px' } }) })), _jsxs("div", __assign({ className: styles.messageContainer }, { children: ["Tu caso n\u00FAmero", ' ', _jsx("span", __assign({ style: { fontWeight: 'bold' } }, { children: confirmation.case })), ' ', "ha sido registrado!"] })), _jsx("div", __assign({ className: styles.messageContainer }, { children: "Pronto te estaremos dando respuesta." })), _jsxs("div", __assign({ className: styles.linkContainer }, { children: ["Puedes consultar el estado aqui:", ' '] })), _jsx("a", __assign({ className: styles.url, "data-testid": "ResUrl", target: "_blank", href: confirmation.url, style: {
-                                color: '#293241',
-                            } }, { children: confirmation.url }))] }))] })) })));
+                    } }, { children: _jsx(CloseRoundedIcon, { fontSize: "inherit" }) })), _jsxs("div", __assign({ className: styles.container }, { children: [_jsx("div", __assign({ className: styles.checkContainer, style: { color: formStyle.primaryColor } }, { children: _jsx(CheckCircleOutlineRoundedIcon, { fontSize: "inherit", style: { fontSize: '160px' } }) })), hasText && (_jsx("div", __assign({ className: styles.messageContainer }, { children: _jsx(Editor, { editorClassName: 'Erk-Forms-Confirmation', editorState: editorState, readOnly: true, toolbarHidden: true }) }))), global.confirmation.showLink && (_jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: styles.linkContainer }, { children: ["Puedes consultar el estado aqui:", ' '] })), _jsx("a", __assign({ className: styles.url, "data-testid": "ResUrl", target: "_blank", href: confirmation.url, style: {
+                                        color: '#293241',
+                                    } }, { children: confirmation.url }))] }))] }))] })) })));
 }
 export default ConfirmationDialog;

package/dist/Form/ConfirmationDialog/ConfirmationDialog.module.css

@@ -37,6 +37,8 @@
     margin-right: 20px;
     font-size: 1.2rem;
     text-align: center;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .linkContainer {

package/dist/Form/Form.js

@@ -170,7 +170,7 @@ function FormComponent(_a) {
         return (_jsxs(React.Fragment, { children: [showConfirmation !== undefined && (_jsx(ConfirmationDialog, { confirmation: showConfirmation, onClose: function () {
                         reload();
                         setShowConfirmation(undefined);
-                    } })), form.hasCaptcha && !internal && (_jsx(ReCAPTCHA, { ref: recaptchaRef, sitekey: "6LcL22kkAAAAAEotDeAFbRATob-u5vbibbCyWL2p", size: 'invisible', badge: 'bottomright' })), _jsx(FormProvider, __assign({}, formMethods, { children: _jsx(FormContext.Provider, __assign({ value: form }, { children: _jsx(FormTypeComponent, { onSubmit: onSubmit, scrollToTop: scrollToTop, customSubmitBtns: customSubmitBtns }) })) }))] }));
+                    } })), form.hasCaptcha && !internal && !postview && (_jsx(ReCAPTCHA, { ref: recaptchaRef, sitekey: "6LcL22kkAAAAAEotDeAFbRATob-u5vbibbCyWL2p", size: 'invisible', badge: 'bottomright' })), _jsx(FormProvider, __assign({}, formMethods, { children: _jsx(FormContext.Provider, __assign({ value: form }, { children: _jsx(FormTypeComponent, { onSubmit: onSubmit, scrollToTop: scrollToTop, customSubmitBtns: customSubmitBtns }) })) }))] }));
     };
     if (!idOrganization)
         return _jsx(_Fragment, {});

package/dist/Form/FormFunctions.js

@@ -26,7 +26,7 @@ import { calcStepDeps } from '../FormSteps/StepHooks';
  * 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;
+    var _a, _b, _c;
     if (value === void 0) { value = values[idStep]; }
     var step = steps[idStep];
     if (!step)
@@ -63,29 +63,29 @@ export var calcValue = function (idStep, steps, values, customSteps, deleteIds,
                 return value.value;
             }
             case StepTypes.MAPPER: {
-                var elements = value === null || value === void 0 ? void 0 : value.filter(function (element) { return element.deleted !== true; });
+                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 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 _c = 0, _d = Object.keys(element.originalValues); _c < _d.length; _c++) {
-                        var key = _d[_c];
+                    for (var _d = 0, _e = Object.keys(element.originalValues); _d < _e.length; _d++) {
+                        var key = _e[_d];
                         newValue[key] = element.originalValues[key];
                     }
                     if (element.value)
                         newValue.value = element.value;
                     var nestedDeleteIds = [];
-                    for (var _e = 0, _f = Object.keys(step.steps); _e < _f.length; _e++) {
-                        var idStep_1 = _f[_e];
+                    for (var _f = 0, _g = Object.keys(step.steps); _f < _g.length; _f++) {
+                        var idStep_1 = _g[_f];
                         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 _g = 0, nestedDeleteIds_1 = nestedDeleteIds; _g < nestedDeleteIds_1.length; _g++) {
-                        var idStep_2 = nestedDeleteIds_1[_g];
+                    for (var _h = 0, nestedDeleteIds_1 = nestedDeleteIds; _h < nestedDeleteIds_1.length; _h++) {
+                        var idStep_2 = nestedDeleteIds_1[_h];
                         delete newValue[idStep_2];
                     }
                     deleteIds.push.apply(deleteIds, nestedDeleteIds);
@@ -165,7 +165,7 @@ export function calcDependencies(steps, customSteps, allSteps, dependencies, val
             }
         }
         if (step.type === StepTypes.MAPPER) {
-            var subSteps = calcMapperSubSteps(step, (_b = values.sections[step.idSection]) === null || _b === void 0 ? void 0 : _b[step.id], customSteps);
+            var subSteps = calcMapperSubSteps(step, (_b = values.sections[step.idSection]) === null || _b === void 0 ? void 0 : _b[step.id].elements, customSteps);
             var hasSubSteps = Object.keys(subSteps).length > 0;
             calcDependencies(hasSubSteps ? subSteps : step.steps, customSteps, __assign(__assign({}, allSteps), subSteps), dependencies, values, hasSubSteps);
         }
@@ -196,7 +196,7 @@ export var calcMapperSubSteps = function (step, elements, customSteps) {
     return newSteps;
 };
 function calcStepDependency(idStep, steps, values, customSteps) {
-    var _a;
+    var _a, _b;
     var depStep = steps[idStep];
     if (!depStep) {
         var originalValue_1 = values.global[idStep];
@@ -208,7 +208,7 @@ function calcStepDependency(idStep, steps, values, customSteps) {
             dependents: [],
         };
     }
-    var originalValue = (_a = values.sections[depStep.idSection]) === null || _a === void 0 ? void 0 : _a[depStep.id];
+    var originalValue = (_b = (_a = values.sections[depStep.idSection]) === null || _a === void 0 ? void 0 : _a[depStep.id]) !== null && _b !== void 0 ? _b : values.global[depStep.id];
     return {
         type: depStep.type,
         value: calcStepDependencyValue(depStep, originalValue, customSteps),
@@ -234,7 +234,10 @@ function calcStepDependencyValue(depStep, originalValue, customSteps) {
         }
         case StepTypes.MAPPER: {
             //TODO: Esto aun no se usa
-            return ((_a = originalValue === null || originalValue === void 0 ? void 0 : originalValue.map(function (mapperValue) { var _a; return (_a = mapperValue.value) !== null && _a !== void 0 ? _a : mapperValue; })) !== null && _a !== void 0 ? _a : null);
+            return ((_a = {
+                elements: originalValue === null || originalValue === void 0 ? void 0 : originalValue.map(function (mapperValue) { var _a; return (_a = mapperValue.value) !== null && _a !== void 0 ? _a : mapperValue; }),
+                page: 0,
+            }) !== null && _a !== void 0 ? _a : null);
         }
         default:
             return originalValue !== null && originalValue !== void 0 ? originalValue : null;

package/dist/Form/FormTypes/StepperForm/StepperForm.js

@@ -57,13 +57,16 @@ import * as SiteReducer from '../../../States/SiteSlice';
 import { getAppState } from '../../../Utils/store';
 import { IdFormContext } from '../../../App/App';
 import CustomBtn from '../../../Shared/CustomBtn/CustomBtn';
+import FormContext from '../../../Contexts/FormContext';
 function StepperForm(_a) {
     var _this = this;
+    var _b, _c;
     var onSubmit = _a.onSubmit, scrollToTop = _a.scrollToTop;
-    var _b = useState(undefined), loading = _b[0], setLoading = _b[1];
-    var _c = useAppSelector(function (state) { return state.global; }), postview = _c.postview, editable = _c.editable, formStyle = _c.formStyle;
-    var _d = useFormContext(), trigger = _d.trigger, getValues = _d.getValues, handleSubmit = _d.handleSubmit;
+    var _d = useState(undefined), loading = _d[0], setLoading = _d[1];
+    var _e = useAppSelector(function (state) { return state.global; }), postview = _e.postview, editable = _e.editable, formStyle = _e.formStyle;
+    var _f = useFormContext(), trigger = _f.trigger, getValues = _f.getValues, handleSubmit = _f.handleSubmit;
     var sendLabel = useContext(CustomContext).sendLabel;
+    var form = useContext(FormContext);
     var dispatch = useAppDispatch();
     var previous = useAppSelector(function (state) { return state.site.previousSections; });
     var idCurrent = useAppSelector(function (state) { return state.site.idCurrentSection; });
@@ -75,7 +78,7 @@ function StepperForm(_a) {
     });
     var handlePrevious = useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
         return __generator(this, function (_a) {
-            dispatch(SiteReducer.handlePrevious(getValues()));
+            dispatch(SiteReducer.handlePrevious({ values: getValues(), form: form }));
             scrollToTop === null || scrollToTop === void 0 ? void 0 : scrollToTop();
             return [2 /*return*/];
         });
@@ -95,7 +98,7 @@ function StepperForm(_a) {
                         return [2 /*return*/, setLoading(undefined)];
                     }
                     if (next.length > 0) {
-                        dispatch(SiteReducer.handleNext(getValues()));
+                        dispatch(SiteReducer.handleNext({ values: getValues(), form: form }));
                         scrollToTop === null || scrollToTop === void 0 ? void 0 : scrollToTop();
                         return [2 /*return*/, setLoading(undefined)];
                     }
@@ -115,8 +118,8 @@ function StepperForm(_a) {
     }); }, [next]);
     if (!idCurrent)
         return _jsx(_Fragment, {});
-    return (_jsxs("div", __assign({ className: styles.container, style: { color: formStyle.textColor } }, { children: [loading && _jsx("div", { className: styles.curtain }), _jsx(Section, { idSection: idCurrent }, idCurrent), next.length === 0 && _jsx(Terms, {}), _jsxs("div", __assign({ className: styles.btnsContainer }, { children: [previous.length > 0 && (_jsx(CustomBtn, { label: "Volver", "data-testid": "form__back", onClick: handlePrevious, backgroundColor: formStyle.primaryColor, color: formStyle.primaryContrastColor, disabled: !!loading, loading: loading === 'BACK' })), (next.length > 0 || (!postview && editable)) && (_jsx(CustomBtn, { label: next.length > 0
-                            ? 'Siguiente'
+    return (_jsxs("div", __assign({ className: styles.container, style: { color: formStyle.textColor } }, { children: [loading && _jsx("div", { className: styles.curtain }), _jsx(Section, { idSection: idCurrent }, idCurrent), next.length === 0 && _jsx(Terms, {}), _jsxs("div", __assign({ className: styles.btnsContainer }, { children: [previous.length > 0 && (_jsx(CustomBtn, { label: (_b = form.prevSectionLabel) !== null && _b !== void 0 ? _b : 'Volver', "data-testid": "form__back", onClick: handlePrevious, backgroundColor: formStyle.primaryColor, color: formStyle.primaryContrastColor, disabled: !!loading, loading: loading === 'BACK' })), (next.length > 0 || (!postview && editable)) && (_jsx(CustomBtn, { label: next.length > 0
+                            ? (_c = form.nextSectionLabel) !== null && _c !== void 0 ? _c : 'Siguiente'
                             : sendLabel !== null && sendLabel !== void 0 ? sendLabel : 'Enviar', "data-testid": "form__submit", onClick: handleNext, backgroundColor: formStyle.primaryColor, color: formStyle.primaryContrastColor, disabled: !!loading, loading: loading === 'NEXT' }))] }))] })));
 }
 export default StepperForm;

package/dist/FormSteps/EntityValueStep/MaterialEntityValuePickerStep/MaterialEntityValueDialog/MaterialEntityValueDialog.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { EurekaDraft } from '../../../../@Types/Draft/Draft';
+import { Entity } from '../../../../@Types/Entity';
+interface EntityValueDialogProps {
+    type: 'WARNING' | 'INFO';
+    message: EurekaDraft;
+    entityValue: any;
+    entity: Entity;
+    handleClose: () => void;
+}
+declare function MaterialEntityValueDialog({ type, entity, message, entityValue, handleClose, }: EntityValueDialogProps): JSX.Element;
+export default MaterialEntityValueDialog;

package/dist/FormSteps/EntityValueStep/MaterialEntityValuePickerStep/MaterialEntityValueDialog/MaterialEntityValueDialog.js

@@ -0,0 +1,49 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog } from '@material-ui/core';
+import CloseRoundedIcon from '@material-ui/icons/CloseRounded';
+import WarningRoundedIcon from '@material-ui/icons/WarningRounded';
+import InfoRoundedIcon from '@material-ui/icons/InfoRounded';
+import styles from './MaterialEntityValueDialog.module.css';
+import RoundedButton from '../../../../Shared/RoundedButton/RoundedButton';
+import { useAppSelector } from '../../../../hooks';
+import { EditorState, convertFromRaw } from 'draft-js';
+import { useMemo } from 'react';
+import { mapDraftEntities } from '../../../../Utils/DraftFunctions';
+import { Editor } from 'react-draft-wysiwyg';
+function MaterialEntityValueDialog(_a) {
+    var type = _a.type, entity = _a.entity, message = _a.message, entityValue = _a.entityValue, handleClose = _a.handleClose;
+    var formStyle = useAppSelector(function (state) { return state.global.formStyle; });
+    var dependencies = useAppSelector(function (state) { return state.site.dependencies; });
+    var editorState = useMemo(function () {
+        return EditorState.createWithContent(convertFromRaw(mapDraftEntities({
+            dependencies: dependencies,
+            entity: entity,
+            entityValue: entityValue,
+        }, JSON.parse(JSON.stringify(message)))));
+    }, [message, dependencies]);
+    return (_jsx(Dialog, __assign({ PaperProps: {
+            style: {
+                borderRadius: '20px',
+                maxWidth: '100vw',
+                boxSizing: 'content-box',
+            },
+        }, open: true }, { children: _jsxs("div", __assign({ className: styles.confirmationContainer, style: { color: formStyle.textColor } }, { children: [_jsx("div", __assign({ className: styles.closeIcon, onClick: function () { return handleClose(); } }, { children: _jsx(CloseRoundedIcon, { fontSize: "inherit" }) })), _jsxs("div", __assign({ className: styles.container }, { children: [_jsxs("div", __assign({ className: styles.contentContainer }, { children: [_jsx("div", __assign({ className: styles.warningContainer, style: {
+                                        color: type === 'INFO'
+                                            ? formStyle.primaryColor
+                                            : formStyle.errorColor,
+                                    } }, { children: type === 'INFO' ? (_jsx(InfoRoundedIcon, { fontSize: "inherit", style: { fontSize: '160px' } })) : (_jsx(WarningRoundedIcon, { fontSize: "inherit", style: { fontSize: '160px' } })) })), _jsx("div", __assign({ className: styles.messageContainer }, { children: _jsx(Editor, { editorClassName: 'Erk-Forms-Dialog', editorState: editorState, readOnly: true, toolbarHidden: true }) }))] })), _jsx("div", __assign({ className: styles.btnContainer }, { children: _jsx(RoundedButton, { text: 'Continuar', color: formStyle.primaryContrastColor, backgroundColor: type === 'INFO'
+                                    ? formStyle.primaryColor
+                                    : formStyle.errorColor, fontSize: '1.2rem', height: undefined, padding: '16px 20px', onClick: function () { return handleClose(); } }) }))] }))] })) })));
+}
+export default MaterialEntityValueDialog;

package/dist/FormSteps/EntityValueStep/MaterialEntityValuePickerStep/MaterialEntityValueDialog/MaterialEntityValueDialog.module.css

@@ -0,0 +1,60 @@
+.confirmationContainer {
+    display: flex;
+    flex-direction: column;
+    width: fit-content;
+    max-height: 80vh;
+    max-width: 80vw;
+    position: relative;
+}
+
+.container {
+    max-height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    overflow-y: auto;
+}
+.contentContainer {
+    padding: 0px 20px;
+    padding-top: 20px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+.confirmationContainer,
+.confirmationContainer *,
+.confirmationContainer *::after,
+.confirmationContainer *::before {
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+}
+
+.warningContainer {
+    margin-left: auto;
+    margin-right: auto;
+    height: fit-content;
+}
+
+.messageContainer {
+    margin-top: 5px;
+    margin-left: 20px;
+    margin-right: 20px;
+    font-size: 1.2rem;
+    text-align: center;
+}
+
+.btnContainer {
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 30px;
+}
+
+.closeIcon {
+    right: 15px;
+    top: 10px;
+    font-size: 26px;
+    position: absolute;
+    cursor: pointer;
+}

package/dist/FormSteps/EntityValueStep/MaterialEntityValuePickerStep/MaterialEntityValuePickerStep.js

@@ -54,8 +54,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useContext } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useContext, useMemo, useState } from 'react';
 import FormStepTypes, { EntityValueDataTypes, EntityValueOptionTypes, } from '../../../constants/FormStepTypes';
 import StepComponent from '../../Step';
 import SmartSelect from '../../SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep';
@@ -64,57 +64,111 @@ import InputIcon from '../../../Shared/InputIcon/InputIcon';
 import FormContext from '../../../Contexts/FormContext';
 import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
 import { evaluateCondition } from '../../StepFunctions';
-import { recursivelyCalcConditionSteps } from '../../StepHooks';
+import { recursivelyCalcConditionSteps, selectDependencies, } from '../../StepHooks';
+import { useAppSelector } from '../../../hooks';
+import MaterialEntityValueDialog from './MaterialEntityValueDialog/MaterialEntityValueDialog';
 function EntityValuePickerStep(_a) {
+    var _b, _c;
     var step = _a.step, editable = _a.editable;
     var form = useContext(FormContext);
-    return (_jsx(StepFillerContainer, __assign({ step: step }, { children: _jsx(SmartSelect, { editable: editable, step: step, icon: step.icon ? _jsx(InputIcon, { icon: step.icon }) : undefined, getOptions: getEntityValueOptions, getOptionSelected: function (option, value) {
-                return option._id === value._id;
-            }, calcDepError: function (steps) {
-                for (var _i = 0, steps_1 = steps; _i < steps_1.length; _i++) {
-                    var step_1 = steps_1[_i];
-                    if (step_1.type === FormStepTypes.ENTITYVALUEPICKER) {
-                        return 'Selecciona un ' + step_1.label;
-                    }
-                }
-                return undefined;
-            }, filterOptions: function (options, dependencies) {
-                var filteredOptions = [];
-                for (var _i = 0, options_1 = options; _i < options_1.length; _i++) {
-                    var value = options_1[_i];
-                    var option = step.options[value._id];
-                    if ((option === null || option === void 0 ? void 0 : option.type) === EntityValueOptionTypes.HIDE)
-                        continue;
-                    if (!option ||
-                        !option.condition ||
-                        evaluateCondition(option.condition, dependencies))
-                        filteredOptions.push(value);
-                }
-                return filteredOptions;
-            }, getOptionsConditionsIdSteps: function () {
-                var _a;
-                var dependencies = __spreadArray([], ((_a = step.dependencies) !== null && _a !== void 0 ? _a : []), true);
-                for (var _i = 0, _b = Object.values(step.options); _i < _b.length; _i++) {
-                    var option = _b[_i];
-                    if (option.type !== EntityValueOptionTypes.HIDE &&
-                        option.condition) {
-                        dependencies.push.apply(dependencies, recursivelyCalcConditionSteps(option.condition));
-                    }
-                }
-                return dependencies;
-            }, getValueString: function (value) { return value === null || value === void 0 ? void 0 : value._id; }, renderNestedSteps: function (value) {
-                if (!value)
-                    return _jsx(_Fragment, {});
-                var currentOption = step.options[value._id];
-                if ((currentOption === null || currentOption === void 0 ? void 0 : currentOption.type) === EntityValueOptionTypes.NESTED) {
-                    return (_jsx(React.Fragment, { children: currentOption.steps.map(function (idStep) {
-                            var subStep = form.steps[idStep];
-                            return (_jsx(StepComponent, { editable: editable, step: subStep }, idStep));
-                        }) }));
+    var _d = useState(), dialogs = _d[0], setDialogs = _d[1];
+    var dialogsIdStepDeps = useMemo(function () {
+        var ids = [];
+        if (!step.dialogs)
+            return ids;
+        for (var _i = 0, _a = step.dialogs; _i < _a.length; _i++) {
+            var dialog = _a[_i];
+            ids.push.apply(ids, recursivelyCalcConditionSteps(dialog.condition));
+        }
+        return ids;
+    }, []);
+    var dialogDeps = useAppSelector(function (state) {
+        return selectDependencies(state, dialogsIdStepDeps);
+    });
+    var handleCloseDialog = useCallback(function () {
+        setDialogs(function (dialogs) {
+            return dialogs && (dialogs === null || dialogs === void 0 ? void 0 : dialogs.pending.length) > 0
+                ? {
+                    current: dialogs.pending[0],
+                    pending: dialogs.pending.slice(1),
+                    value: dialogs.value,
                 }
-                else
-                    return _jsx(_Fragment, {});
-            } }) })));
+                : undefined;
+        });
+    }, []);
+    return (_jsxs(React.Fragment, { children: [dialogs !== undefined && ((_b = form.entities) === null || _b === void 0 ? void 0 : _b[step.idEntity]) && (_jsx(MaterialEntityValueDialog, { type: dialogs.current.type, entity: (_c = form.entities) === null || _c === void 0 ? void 0 : _c[step.idEntity], entityValue: dialogs.value, message: dialogs.current.message, handleClose: handleCloseDialog })), _jsx(StepFillerContainer, __assign({ step: step }, { children: _jsx(SmartSelect, { editable: editable, step: step, icon: step.icon ? _jsx(InputIcon, { icon: step.icon }) : undefined, getOptions: getEntityValueOptions, getOptionSelected: function (option, value) {
+                        return option._id === value._id;
+                    }, calcDepError: function (steps) {
+                        for (var _i = 0, steps_1 = steps; _i < steps_1.length; _i++) {
+                            var step_1 = steps_1[_i];
+                            if (step_1.type === FormStepTypes.ENTITYVALUEPICKER) {
+                                return 'Selecciona un ' + step_1.label;
+                            }
+                        }
+                        return undefined;
+                    }, changeListener: function (value) {
+                        var _a, _b;
+                        if (!value)
+                            return;
+                        var dialogsToDisplay = [];
+                        for (var _i = 0, _c = (_a = step.dialogs) !== null && _a !== void 0 ? _a : []; _i < _c.length; _i++) {
+                            var dialog = _c[_i];
+                            if (!dialog.condition) {
+                                dialogsToDisplay.push(dialog);
+                                continue;
+                            }
+                            if (evaluateCondition(dialog.condition, dialogDeps, {
+                                entity: (_b = form.entities) === null || _b === void 0 ? void 0 : _b[step.idEntity],
+                                entityValue: value,
+                            })) {
+                                dialogsToDisplay.push(dialog);
+                            }
+                        }
+                        if (dialogsToDisplay.length > 0) {
+                            setDialogs({
+                                value: value,
+                                current: dialogsToDisplay[0],
+                                pending: dialogsToDisplay.slice(1),
+                            });
+                        }
+                    }, filterOptions: function (options, dependencies) {
+                        var filteredOptions = [];
+                        for (var _i = 0, options_1 = options; _i < options_1.length; _i++) {
+                            var value = options_1[_i];
+                            var option = step.options[value._id];
+                            if ((option === null || option === void 0 ? void 0 : option.type) === EntityValueOptionTypes.HIDE)
+                                continue;
+                            if (!option ||
+                                !option.condition ||
+                                evaluateCondition(option.condition, dependencies))
+                                filteredOptions.push(value);
+                        }
+                        return filteredOptions;
+                    }, getOptionsConditionsIdSteps: function () {
+                        var _a;
+                        var dependencies = __spreadArray([], ((_a = step.dependencies) !== null && _a !== void 0 ? _a : []), true);
+                        for (var _i = 0, _b = Object.values(step.options); _i < _b.length; _i++) {
+                            var option = _b[_i];
+                            if (option.type !== EntityValueOptionTypes.HIDE &&
+                                option.condition) {
+                                dependencies.push.apply(dependencies, recursivelyCalcConditionSteps(option.condition));
+                            }
+                        }
+                        return dependencies;
+                    }, getValueString: function (value) { return value === null || value === void 0 ? void 0 : value._id; }, renderNestedSteps: function (value) {
+                        if (!value)
+                            return _jsx(_Fragment, {});
+                        var currentOption = step.options[value._id];
+                        if ((currentOption === null || currentOption === void 0 ? void 0 : currentOption.type) ===
+                            EntityValueOptionTypes.NESTED) {
+                            return (_jsx(React.Fragment, { children: currentOption.steps.map(function (idStep) {
+                                    var subStep = form.steps[idStep];
+                                    return (_jsx(StepComponent, { editable: editable, step: subStep }, idStep));
+                                }) }));
+                        }
+                        else
+                            return _jsx(_Fragment, {});
+                    } }) }))] }));
 }
 export default EntityValuePickerStep;
 var getEntityValueOptions = function (idOrganization, step, dependencyStore) { return __awaiter(void 0, void 0, void 0, function () {