@arquimedes.co/eureka-forms 3.0.19-refactor → 3.0.21-refactor

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

@@ -1,16 +1,16 @@
 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';
 import widgetInstance from '../../../Utils/AxiosWidget';
-import InputIcon from '../../../Shared/InputIcon/InputIcon';
 import FormContext from '../../../Contexts/FormContext';
 import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
-import { evaluateCondition } from '../../StepFunctions';
 import { recursivelyCalcConditionSteps, selectDependencies } from '../../StepHooks';
 import { useAppSelector } from '../../../hooks';
 import MaterialEntityValueDialog from './MaterialEntityValueDialog/MaterialEntityValueDialog';
+import InputIcon from '../../../Shared/InputIcon/InputIcon';
+import { evaluateCondition } from '../../StepFunctions';
+import StepComponent from '../../Step';
 function EntityValuePickerStep({ step, editable }) {
     const form = useContext(FormContext);
     const [dialogs, setDialogs] = useState();
@@ -34,7 +34,7 @@ function EntityValuePickerStep({ step, editable }) {
             }
             : undefined);
     }, []);
-    return (_jsxs(React.Fragment, { children: [dialogs !== undefined && form.entities?.[step.idEntity] && (_jsx(MaterialEntityValueDialog, { type: dialogs.current.type, entity: form.entities?.[step.idEntity], entityValue: dialogs.value, message: dialogs.current.message, handleClose: handleCloseDialog })), _jsx(StepFillerContainer, { step: step, children: _jsx(SmartSelect, { step: step, editable: editable, getOptionalDependencies: getOptionalDependencies, IconComponent: () => (step.icon ? _jsx(InputIcon, { icon: step.icon }) : undefined), getOptions: getEntityValueOptions, getOptionSelected: (option, value) => option._id === value._id, calcDepError: (steps) => {
+    return (_jsxs(React.Fragment, { children: [dialogs !== undefined && form.entities?.[step.idEntity] && (_jsx(MaterialEntityValueDialog, { type: dialogs.current.type, entity: form.entities?.[step.idEntity], entityValue: dialogs.value, message: dialogs.current.message, handleClose: handleCloseDialog })), _jsx(StepFillerContainer, { step: step, children: _jsx(SmartSelect, { step: step, editable: editable, getOptions: getEntityValueOptions, getOptionalDependencies: getOptionalDependencies, IconComponent: () => (step.icon ? _jsx(InputIcon, { icon: step.icon }) : undefined), getOptionSelected: (option, value) => option._id === value._id, calcDepError: (steps) => {
                         for (const step of steps) {
                             if (step.type === FormStepTypes.ENTITYVALUEPICKER) {
                                 return 'Selecciona un ' + step.label;
@@ -97,7 +97,7 @@ function EntityValuePickerStep({ step, editable }) {
                     } }) })] }));
 }
 export default EntityValuePickerStep;
-const getEntityValueOptions = async (idOrganization, step, dependencyStore) => {
+const getEntityValueOptions = async (step, dependencyStore, { idOrganization, idCurrentAgent, }) => {
     if (!idOrganization)
         return null;
     let urlPath = '';
@@ -137,6 +137,10 @@ const getEntityValueOptions = async (idOrganization, step, dependencyStore) => {
                 }
                 break;
             }
+            case EntityValueDataTypes.CURRENT_AGENT:
+                if (idCurrentAgent)
+                    params.set(filter.idProperty, idCurrentAgent);
+                break;
             case EntityValueDataTypes.VALUE:
             default:
                 params.set(filter.idProperty, filter.value);

package/dist/FormSteps/SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep.js

@@ -21,7 +21,7 @@ function SmartSelectStep({ step, editable, getOptions, calcDepError, defaultValu
         changeListener?.(value);
         handleChange(valueOverwrite ? valueOverwrite(value) : value);
     }, [handleChange, valueOverwrite, changeListener]);
-    const { postview, idOrganization } = useAppSelector((state) => state.global);
+    const { postview, idOrganization, idCurrentAgent } = useAppSelector((state) => state.global);
     const form = useContext(FormContext);
     const [options, setOptions] = useState();
     const [loading, setLoading] = useState(false);
@@ -49,14 +49,17 @@ function SmartSelectStep({ step, editable, getOptions, calcDepError, defaultValu
         }
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    step.dependencies?.map((dep) => dependencies[dep]?.value) ?? []);
+    allDeps.map((dep) => dependencies[dep]?.value) ?? []);
     const calcOptions = async (firstTime) => {
         if (!firstTime)
             setOptions(undefined);
         if (value && !firstTime)
             setLoading(true);
         try {
-            const resp = await getOptions?.(idOrganization, step, dependencies);
+            const resp = await getOptions?.(step, dependencies, {
+                idOrganization,
+                idCurrentAgent: postview ? undefined : idCurrentAgent,
+            });
             if (value) {
                 /** If the value is still valid select it */
                 if (resp && getValueString(value) !== undefined) {

package/dist/FormSteps/SmartSelectStep/SmartSelectStep.d.ts

@@ -3,13 +3,16 @@ import { GSmartSelect } from '../../@Types/GenericFormSteps';
 import { FormStep } from '../../@Types/FormStep';
 import { DependencyStore } from '../../Form/Form';
 import React from 'react';
-export interface SmartSelectStepProps<StepType extends GSmartSelect = GSmartSelect> extends Omit<StepProps, 'step'> {
+export interface SmartSelectStepProps<StepType extends GSmartSelect> extends Omit<StepProps, 'step'> {
     /** The SmartSelectStep to display */
     step: StepType;
     /** The icon to display */
     IconComponent?: React.ElementType;
     /** Function to call to get the options of the selector, return null if dependency is not met */
-    getOptions: (idOrganization: string | undefined, step: StepType, dependencyStore: DependencyStore) => Promise<any[] | null>;
+    getOptions: (step: StepType, dependencyStore: DependencyStore, options: {
+        idOrganization?: string;
+        idCurrentAgent?: string;
+    }) => Promise<any[] | null>;
     /** Function to call to filter the options of the selector */
     filterOptions?: (options: any[], dependencyStore: DependencyStore) => any[];
     /** Function to determine the currently selected option */
@@ -17,7 +20,7 @@ export interface SmartSelectStepProps<StepType extends GSmartSelect = GSmartSele
     /** Function to determine the current value in string format */
     getValueString: (value: any) => string;
     /** Function to if currently selected option has warning */
-    getValueWarning?: (value: any) => string | null;
+    getValueWarning?: (value: undefined | any) => string | null;
     /** Function called to get the idSteps of the optional dependencies */
     getOptionalDependencies?: (step: StepType) => string[];
     /** Function called to get the idSteps of the step's conditions for better refreshing */
@@ -33,5 +36,5 @@ export interface SmartSelectStepProps<StepType extends GSmartSelect = GSmartSele
     /** function called to render nested elements when selected */
     renderNestedSteps?: (value: any) => JSX.Element;
 }
-declare function SmartSelectStep(props: SmartSelectStepProps): JSX.Element;
+declare function SmartSelectStep<StepType extends GSmartSelect = GSmartSelect>(props: SmartSelectStepProps<StepType>): JSX.Element;
 export default SmartSelectStep;

package/dist/FormSteps/StepFunctions.d.ts

@@ -9,7 +9,7 @@ export type FillerSteps = FormSelector | ClassifierSelector | EntityValuePicker
 export declare function calcFillerSize(step: FillerSteps, steps: Record<string, FormStep>, values: Record<string, unknown>, size: FormSize): number;
 export declare const calcStepWidth: (stepSize: 1 | 2 | 3 | 4, size: FormSize) => number;
 export declare const calcDefaultValue: (step: FormStep | CBRFormStep) => any;
-export declare const iterateNestedSteps: (idStep: string, steps: Record<string, FormStep>, iteration: (step: FormStep) => void) => void;
+export declare const iterateNestedSteps: (idStep: string, steps: Record<string, FormStep>, iteration: (step: FormStep, path: string[]) => void, path?: string[]) => void;
 /**
  * Utility function to calc the substeps of a step
  * @param step step to calc the substeps

package/dist/FormSteps/StepFunctions.js

@@ -134,21 +134,24 @@ export const calcDefaultValue = (step) => {
             return undefined;
     }
 };
-export const iterateNestedSteps = (idStep, steps, iteration) => {
+export const iterateNestedSteps = (idStep, steps, iteration, path = [idStep]) => {
     const step = steps[idStep];
     if (!step) {
         console.error('Missing Step:', idStep);
         return;
     }
-    iteration(step);
+    iteration(step, path);
     if (step.type === FormStepTypes.MAPPER) {
         for (const idStep of step.rootSteps) {
-            iterateNestedSteps(idStep, step.steps, iteration);
+            iterateNestedSteps(idStep, step.steps, iteration, [
+                ...path,
+                step.id,
+            ]);
         }
     }
     else {
         for (const idSubStep of calcSubSteps(step.id, steps)) {
-            iterateNestedSteps(idSubStep, steps, iteration);
+            iterateNestedSteps(idSubStep, steps, iteration, [...path, step.id]);
         }
     }
 };

package/dist/FormSteps/StepFunctions.test.js

@@ -3,6 +3,7 @@ import CBRFormStepTypes from '../constants/CBRFormStepTypes';
 import FormStepTypes, { ApiSelectorOptionTypes, ClassifierOptionTypes, EntityValueOptionTypes, OptionTypes, } from '../constants/FormStepTypes';
 import { describe, expect, test, vi } from 'vitest';
 import { calcDefaultValue, calcFillerSize, calcStepWidth, calcSubSteps, iterateNestedSteps } from './StepFunctions';
+import { stringToDraft } from '../Utils/DraftFunctions';
 describe('StepFunctions', function () {
     describe('calcFillerSize', function () {
         test('No maxSize', async () => {
@@ -428,8 +429,7 @@ describe('StepFunctions', function () {
         test('Title step type', async () => {
             const step = {
                 type: FormStepTypes.TITLE,
-                title: 'Title',
-                description: 'Description',
+                title: stringToDraft('Title'),
             };
             const defaultValue = calcDefaultValue(step);
             expect(defaultValue).toEqual(undefined);

package/dist/FormSteps/TitleStep/MaterialTitleStep/MaterialTitleStep.js

@@ -3,30 +3,41 @@ import { calcStepWidth } from '../../StepFunctions';
 import styles from './MaterialTitleStep.module.css';
 import { useAppSelector } from '../../../hooks';
 import FormContext from '../../../Contexts/FormContext';
-import { useContext } from 'react';
-import { useFormStep } from '../../StepHooks';
+import { useContext, useMemo } from 'react';
+import { selectDependencies, useFormStep } from '../../StepHooks';
+import { stringToDraft } from '../../../Utils/DraftFunctions';
+import SmartDraftRenderer from '../../../Shared/SmartDraftRenderer/SmartDraftRenderer';
+//**Pendientes a mejorar, esperar antes de enviar, en local (actividades), usar el value envez de el draft en actividades, esperar a que dejen de escribir, optimizar para que use lo que tiene en local y si necesita ahi si pregunte. */
 function TitleStep({ step }) {
-    const { value } = useFormStep(step, {
+    const { value, onChange } = useFormStep(step, {
         defaultValue: undefined,
     });
-    const title = value?.title ?? step.title;
-    const description = value?.description ?? step.description;
     const { formStyle } = useAppSelector((state) => state.global);
     const form = useContext(FormContext);
     const widthStats = useAppSelector((state) => state.widthStats);
     const size = step.size ?? form.size.blockNum;
+    const title = useMemo(() => calcBaseDraft(value?.title ?? step.title), //Usa por defecto lo que venga en el value, pero no escucha cambios
+    [step.title, value?.title]);
+    const description = useMemo(() => calcBaseDraft(value?.description ?? step.description), //Usa por defecto lo que venga en el value, pero no escucha cambios
+    [step.description, value?.description]);
+    const dependencies = useAppSelector((state) => selectDependencies(state, step.dependencies));
+    const values = useMemo(() => {
+        const values = {};
+        for (const { idOriginal, value } of Object.values(dependencies)) {
+            values[idOriginal] = value;
+        }
+        return values;
+    }, [dependencies]);
     return (_jsxs("div", { className: styles.container, style: {
             color: formStyle.textColor,
-            width: widthStats.currentBreakPoint <= size
-                ? '100%'
-                : calcStepWidth(size, form.size),
-        }, children: [title && (_jsx("div", { className: styles.titleLbl, style: {
-                    textAlign: widthStats.isMobile &&
-                        widthStats.currentBreakPoint <= size
-                        ? 'center'
-                        : 'start',
-                }, children: title })), description && (_jsx("p", { className: styles.descriptionPar, style: {
-                    margin: title ? '10px 0px' : '0px 0px 5px 0px',
-                }, children: description }))] }));
+            width: widthStats.currentBreakPoint <= size ? '100%' : calcStepWidth(size, form.size),
+        }, children: [_jsx("div", { className: styles.titleLbl, style: {
+                    textAlign: widthStats.isMobile && widthStats.currentBreakPoint <= size ? 'center' : 'start',
+                }, children: _jsx(SmartDraftRenderer, { draft: title, dependencies: values, property: `${step.stepPath.join('.')}.title`, onChange: (title) => onChange({ ...value, title }) }) }), _jsx("div", { className: styles.descriptionPar, children: _jsx(SmartDraftRenderer, { draft: description, dependencies: values, margin: title ? '10px 0px' : '0px 0px 5px 0px', property: `${step.stepPath.join('.')}.description`, onChange: (description) => onChange({ ...value, description }) }) })] }));
 }
 export default TitleStep;
+function calcBaseDraft(value) {
+    return typeof value === 'string'
+        ? stringToDraft(value)
+        : (value ?? stringToDraft(''));
+}

package/dist/Services/DraftService.d.ts

@@ -0,0 +1,23 @@
+import { EurekaDraft } from '../@Types/Draft/Draft';
+export declare const DraftApi: import("@reduxjs/toolkit/query").Api<import("@reduxjs/toolkit/query").BaseQueryFn<{
+    url: string;
+    timeout?: import("axios").AxiosRequestConfig["timeout"];
+    method?: import("axios").AxiosRequestConfig["method"];
+    body?: import("axios").AxiosRequestConfig["data"];
+    params?: import("axios").AxiosRequestConfig["params"];
+    headers?: Record<string, any>;
+}, unknown, unknown>, {
+    mapDraft: import("@reduxjs/toolkit/query").QueryDefinition<{
+        idForm: string;
+        property: string;
+        dependencies: Record<string, any>;
+        mapDraftEntities?: (property: string, dependencies: Record<string, any>) => Promise<EurekaDraft>;
+    }, import("@reduxjs/toolkit/query").BaseQueryFn<{
+        url: string;
+        timeout?: import("axios").AxiosRequestConfig["timeout"];
+        method?: import("axios").AxiosRequestConfig["method"];
+        body?: import("axios").AxiosRequestConfig["data"];
+        params?: import("axios").AxiosRequestConfig["params"];
+        headers?: Record<string, any>;
+    }, unknown, unknown>, never, EurekaDraft | undefined, "api", unknown>;
+}, "api", never, typeof import("@reduxjs/toolkit/query").coreModuleName | typeof import("@reduxjs/toolkit/query/react").reactHooksModuleName>;

package/dist/Services/DraftService.js

@@ -0,0 +1,30 @@
+import { RootApi } from '../Utils/_api';
+import axiosInstance from '../Utils/AxiosAPI';
+import widgetInstance from '../Utils/AxiosWidget';
+export const DraftApi = RootApi.injectEndpoints({
+    endpoints: (build) => ({
+        mapDraft: build.query({
+            queryFn: async ({ idForm, dependencies, property, mapDraftEntities }, { getState }) => {
+                const idOrganization = getState()[idForm].global.idOrganization;
+                if (mapDraftEntities)
+                    return {
+                        data: await mapDraftEntities(property, dependencies),
+                    };
+                const apiKey = getState()[idForm].global.apiKey;
+                if (!apiKey)
+                    return { data: undefined };
+                let response;
+                if (idOrganization) {
+                    response = await widgetInstance.post(`/form/draft/${apiKey}?idOrganization=${idOrganization}`, {
+                        property,
+                        dependencies,
+                    });
+                }
+                else {
+                    response = await axiosInstance.post(`/form/draft/${apiKey}`, dependencies);
+                }
+                return { data: response.data };
+            },
+        }),
+    }),
+});

package/dist/Shared/ErkDatePicker/ErkDatePicker.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { MobileDatePickerProps as MuiDatePickerProps, PickerValidDate } from '@mui/x-date-pickers';
+import { MobileDatePickerProps as MuiDatePickerProps } from '@mui/x-date-pickers';
 import { ErkTextFieldProps } from '../ErkTextField/ErkTextField';
-interface ErkDatePickerProps extends Omit<MuiDatePickerProps<PickerValidDate>, 'ref' | 'onChange'>, Pick<ErkTextFieldProps, 'error' | 'required' | 'helperText' | 'size'> {
+interface ErkDatePickerProps extends Omit<MuiDatePickerProps, 'ref' | 'onChange'>, Pick<ErkTextFieldProps, 'error' | 'required' | 'helperText' | 'size'> {
     onChange?: (date: Date | null) => void;
     /** If it should display the timePicker */
     pickTime?: boolean;

package/dist/Shared/ErkSelect/ErkSelect.js

@@ -95,7 +95,7 @@ export const StyledHelperText = styled(MuiFormHelperText)(({ theme, ...props })
 function CustomSelect({ label, error, value, loading, onChange, children, required, inputRef, MenuProps, helperText, IconComponent, size = 'small', labelMargin = 5, multiple = false, readOnly = false, disabled = false, clearable = true, fullWidth = true, clearLabel = 'Sin Seleccionar', ...others }) {
     const [open, setOpen] = useState(false);
     const handleChange = useCallback((event) => onChange?.(event.target.value), [onChange]);
-    return (_jsxs(FormControl, { size: size, error: error, variant: "outlined", required: required, fullWidth: fullWidth, style: { marginTop: label ? labelMargin : undefined, maxWidth: '100%' }, children: [label && (_jsx(StyledInputLabel, { disabled: disabled, open: open, size: size === 'small' ? 'small' : 'normal', children: label })), _jsxs(StyledSelect, { ...others, size: size, autoWidth: false, open: others.open ?? open, label: label, inputRef: inputRef, readOnly: readOnly, disabled: disabled, multiple: multiple, onChange: handleChange, value: value ?? (multiple ? [] : ''), IconComponent: IconComponent ? () => _jsx(_Fragment, {}) : undefined, endAdornment: IconComponent ? (_jsx(InputAdornment, { position: "end", onClick: (e) => {
+    return (_jsxs(FormControl, { size: size, error: error, variant: "outlined", required: required, fullWidth: fullWidth, style: { marginTop: label ? labelMargin : undefined, maxWidth: '100%' }, children: [label && (_jsx(StyledInputLabel, { disabled: disabled, open: open, size: size === 'small' ? 'small' : undefined, children: label })), _jsxs(StyledSelect, { ...others, size: size, autoWidth: false, open: others.open ?? open, label: label, inputRef: inputRef, readOnly: readOnly, disabled: disabled, multiple: multiple, onChange: handleChange, value: value ?? (multiple ? [] : ''), IconComponent: IconComponent ? () => _jsx(_Fragment, {}) : undefined, endAdornment: IconComponent ? (_jsx(InputAdornment, { position: "end", onClick: (e) => {
                         e.stopPropagation();
                         if (!readOnly && !disabled) {
                             if (others.open !== undefined) {

package/dist/Shared/ErkTimePicker/ErkTimePicker.js

@@ -53,7 +53,7 @@ function CustomSelect({ value, onChange, label, error, required, pickDays, helpe
                                                 ...value,
                                                 working,
                                             });
-                                        } })] }))] }) }) })), _jsxs(FormControl, { fullWidth: true, size: size, error: error, variant: "outlined", required: required, style: { marginTop: label ? labelMargin : undefined, maxWidth: '100%' }, children: [label && (_jsx(StyledInputLabel, { disabled: disabled, open: open, size: size === 'small' ? 'small' : 'normal', children: label })), _jsx(StyledSelect, { ...others, ref: ref, open: open, size: size, readOnly: readOnly, disabled: disabled, onBlur: () => {
+                                        } })] }))] }) }) })), _jsxs(FormControl, { fullWidth: true, size: size, error: error, variant: "outlined", required: required, style: { marginTop: label ? labelMargin : undefined, maxWidth: '100%' }, children: [label && (_jsx(StyledInputLabel, { disabled: disabled, open: open, size: size === 'small' ? 'small' : undefined, children: label })), _jsx(StyledSelect, { ...others, ref: ref, open: open, size: size, readOnly: readOnly, disabled: disabled, onBlur: () => {
                             if (!readOnly && !disabled)
                                 setOpen(false);
                         }, label: label ? calcLabel() : undefined, value: value ? 0 : '', title: calcTimeString(value), IconComponent: () => _jsx(_Fragment, {}), MenuProps: { sx: { visibility: 'hidden' } }, endAdornment: _jsx(InputAdornment, { position: "end", onClick: (e) => {

package/dist/Shared/SmartDraftRenderer/DraftLoadingContext.d.ts

@@ -0,0 +1 @@
+export declare const DraftLoadingContext: import("react").Context<boolean>;

package/dist/Shared/SmartDraftRenderer/DraftLoadingContext.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const DraftLoadingContext = createContext(true);

package/dist/Shared/SmartDraftRenderer/FormDecorator.d.ts

@@ -0,0 +1,12 @@
+import { ContentState } from 'draft-js';
+export interface DecoratorComponentProps {
+    children: JSX.Element;
+    contentState: ContentState;
+    entityKey: string;
+    blockKey: string;
+    start: number;
+    end: number;
+    editable?: boolean;
+}
+export declare function FormDecorator({ children, entityKey }: DecoratorComponentProps): JSX.Element;
+export declare function FormDecoratorsStrategy(contentBlock: any, callback: any, contentState: any): void;

package/dist/Shared/SmartDraftRenderer/FormDecorator.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { DraftEntityTypes } from '../../constants/Draft/DraftEntityTypes';
+import styles from './FormDecorator.module.css';
+import { DraftLoadingContext } from './DraftLoadingContext';
+export function FormDecorator({ children, entityKey }) {
+    const loading = useContext(DraftLoadingContext);
+    return (_jsx("span", { id: entityKey, className: loading ? styles.loadingDecorator : styles.decorator, style: {
+            overflow: 'hidden',
+            position: 'relative',
+            padding: '0px 3px',
+            borderRadius: 12,
+        }, children: children }));
+}
+export function FormDecoratorsStrategy(contentBlock, callback, contentState) {
+    contentBlock.findEntityRanges((character) => {
+        const entityKey = character.getEntity();
+        return entityKey !== null && contentState.getEntity(entityKey).getType() === DraftEntityTypes.EUREKA;
+    }, callback);
+}

package/dist/Shared/SmartDraftRenderer/FormDecorator.module.css

@@ -0,0 +1,30 @@
+.loadingDecorator {
+    position: absolute;
+    animation-duration: 3s;
+    animation-fill-mode: forwards;
+    animation-iteration-count: infinite;
+    animation-name: loading;
+    animation-timing-function: linear;
+    background: linear-gradient(
+        to right,
+        #d6d6d6 2%,
+        rgba(255, 255, 255, 0.3) 20%,
+        #d6d6d6 50%
+    );
+    background-size: 800px 100px;
+    height: 100%;
+    width: 100%;
+}
+
+.decorator {
+    background-color: #d6d6d6;
+}
+
+@keyframes loading {
+    0% {
+        background-position: -800px 0;
+    }
+    100% {
+        background-position: 800px 0;
+    }
+}

package/dist/Shared/SmartDraftRenderer/SmartDraftRenderer.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { EurekaDraft } from '../../@Types/Draft/Draft';
+interface SmartDraftRendererProps {
+    property: string;
+    draft: EurekaDraft;
+    margin?: React.CSSProperties['margin'];
+    dependencies: Record<string, any>;
+    onChange?: (value: EurekaDraft) => void;
+}
+declare function SmartDraftRenderer({ draft, margin, onChange, property, dependencies }: SmartDraftRendererProps): JSX.Element;
+export default SmartDraftRenderer;

package/dist/Shared/SmartDraftRenderer/SmartDraftRenderer.js

@@ -0,0 +1,58 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useEffect, useMemo } from 'react';
+import { DraftApi } from '../../Services/DraftService';
+import { convertFromRaw, EditorState } from 'draft-js';
+import { Editor } from 'react-draft-wysiwyg';
+import { produce } from 'immer';
+import CustomContext from '../../Contexts/CustomContext';
+import { FormDecoratorsStrategy, FormDecorator } from './FormDecorator';
+import { skipToken } from '@reduxjs/toolkit/query';
+import { useAppSelector } from '../../hooks';
+import { IdFormContext } from '../../Contexts/FormContext';
+import { DraftLoadingContext } from './DraftLoadingContext';
+function SmartDraftRenderer({ draft, margin, onChange, property, dependencies }) {
+    const idForm = useContext(IdFormContext);
+    const mapDraftEntities = useContext(CustomContext).mapDraftEntities;
+    const postview = useAppSelector((state) => state.global.postview);
+    const hasEntities = useMemo(() => Object.keys(draft.entityMap).length > 0, [draft]);
+    const { data: mapped, isFetching } = DraftApi.useMapDraftQuery(!hasEntities || postview
+        ? skipToken
+        : {
+            idForm,
+            property,
+            dependencies,
+            mapDraftEntities,
+        });
+    useEffect(() => {
+        if (mapped && !postview)
+            onChange?.(mapped);
+    }, [mapped, onChange, postview]);
+    const { editorState, isEmpty } = useMemo(() => {
+        const content = convertFromRaw(cleanUpDraftParams(isFetching ? draft : (mapped ?? draft)));
+        return {
+            editorState: EditorState.createWithContent(content),
+            isEmpty: !content.hasText(),
+        };
+    }, [mapped, draft, isFetching]);
+    if (isEmpty)
+        return _jsx(_Fragment, {});
+    return (_jsx("div", { style: { margin }, children: _jsx(DraftLoadingContext.Provider, { value: !postview && isFetching, children: _jsx(Editor, { readOnly: true, toolbarHidden: true, editorState: editorState, editorClassName: 'Erk-Forms-Draft', customDecorators: customDecorators }) }) }));
+}
+export default SmartDraftRenderer;
+function cleanUpDraftParams(draft) {
+    return produce(draft, (draft) => {
+        for (const block of draft.blocks) {
+            for (const entity of block.entityRanges) {
+                const { offset, length } = entity;
+                //Change text into spaces
+                block.text = block.text.replace(block.text.substring(offset, offset + length), ' '.repeat(length));
+            }
+        }
+    });
+}
+const customDecorators = [
+    {
+        strategy: FormDecoratorsStrategy,
+        component: FormDecorator,
+    },
+];

package/dist/States/GlobalSlice.d.ts

@@ -4,7 +4,9 @@ import { SiteState } from './SiteSlice';
 import { EurekaDraft } from '../@Types/Draft/Draft';
 import { CountryCode } from 'libphonenumber-js';
 export interface GlobalState {
+    apiKey?: string;
     idOrganization: string;
+    idCurrentAgent?: string;
     countryCode: CountryCode;
     formStyle: FormStyle;
     confirmation: {
@@ -28,6 +30,8 @@ export declare const GlobalSlice: import("@reduxjs/toolkit").Slice<GlobalState,
         postview: boolean;
         preview: boolean;
         idOrganization: string;
+        idCurrentAgent?: string;
+        apiKey?: string;
         countryCode: CountryCode;
         confirmation: {
             confirmationMessage: EurekaDraft;

package/dist/Utils/AxiosAPI.d.ts

@@ -1,2 +1,12 @@
+import { BaseQueryFn } from '@reduxjs/toolkit/query';
+import { AxiosRequestConfig } from 'axios';
 declare const axiosInstance: import("axios").AxiosInstance;
 export default axiosInstance;
+export declare const axiosBaseQuery: () => BaseQueryFn<{
+    url: string;
+    timeout?: AxiosRequestConfig["timeout"];
+    method?: AxiosRequestConfig["method"];
+    body?: AxiosRequestConfig["data"];
+    params?: AxiosRequestConfig["params"];
+    headers?: Record<string, any>;
+}, unknown, unknown>;

package/dist/Utils/AxiosAPI.js

@@ -6,3 +6,25 @@ const axiosInstance = axios.create({
     headers,
 });
 export default axiosInstance;
+export const axiosBaseQuery = () => async ({ url, method, body, params, timeout, headers, }) => {
+    try {
+        const result = await axiosInstance({
+            url,
+            method,
+            data: body,
+            params,
+            headers,
+            timeout,
+        });
+        return { data: result.data };
+    }
+    catch (axiosError) {
+        const err = axiosError;
+        return {
+            error: {
+                status: err.response?.status,
+                data: err.response?.data || err.message,
+            },
+        };
+    }
+};

package/dist/Utils/MaterialProviders.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormStyle } from '../@Types/Form';
-import { Palette, PaletteColor } from '@mui/material/styles/createPalette';
+import { Palette, PaletteColor } from '@mui/material/styles';
 declare module '@mui/material/styles' {
     interface Palette {
         outline: Palette['primary'];

package/dist/Utils/MaterialProviders.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { esES as DatePickersEs } from '@mui/x-date-pickers/locales';
 import { createTheme, ThemeProvider } from '@mui/material';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { getLocale } from './LocaleUtils';
 // stepBackgroundColor: string;

package/dist/Utils/StoreContext.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const StoreContext: React.Context<any>;

package/dist/Utils/StoreContext.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export const StoreContext = React.createContext({});

package/dist/Utils/TestUtils.d.ts

@@ -59,8 +59,14 @@ export declare function renderWithProviders(ui: React.ReactElement, { store, ...
     queryAllByTestId: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions | undefined) => HTMLElement[];
     findByTestId: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions | undefined, waitForElementOptions?: import("@testing-library/dom").waitForOptions | undefined) => Promise<HTMLElement>;
     findAllByTestId: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions | undefined, waitForElementOptions?: import("@testing-library/dom").waitForOptions | undefined) => Promise<HTMLElement[]>;
-    store: import("@reduxjs/toolkit").EnhancedStore<import("./store").EurekaFormsState, import("redux").AnyAction, import("@reduxjs/toolkit").Tuple<[import("redux").StoreEnhancer<{
-        dispatch: import("redux-thunk").ThunkDispatch<import("./store").EurekaFormsState, undefined, import("redux").UnknownAction>;
+    store: import("@reduxjs/toolkit").EnhancedStore<{
+        forms: import("./store").EurekaFormsState;
+        api: import("@reduxjs/toolkit/query").CombinedState<{}, never, "api">;
+    }, import("redux").UnknownAction | import("redux").AnyAction, import("@reduxjs/toolkit").Tuple<[import("redux").StoreEnhancer<{
+        dispatch: import("redux-thunk").ThunkDispatch<{
+            forms: import("./store").EurekaFormsState;
+            api: import("@reduxjs/toolkit/query").CombinedState<{}, never, "api">;
+        }, undefined, import("redux").UnknownAction>;
     }>, import("redux").StoreEnhancer]>>;
 };
 interface ExtendedRenderHookOptions<TProps> extends Omit<RenderHookOptions<TProps>, 'wrapper'> {

package/dist/Utils/TestUtils.js

@@ -1,17 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { render, renderHook } from '@testing-library/react';
-import { configureStore, nanoid } from '@reduxjs/toolkit';
+import { combineReducers, configureStore, nanoid } from '@reduxjs/toolkit';
 import { Provider } from 'react-redux';
 // As a basic setup, import your same slice reducers
 import { EurekaFormsReducer } from './store';
-import { StoreContext } from '../hooks';
 import { IdFormContext } from '../Contexts/FormContext';
+import { RootApi } from './_api';
+import { StoreContext } from './StoreContext';
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function renderWithProviders(ui, { 
 // Automatically create a store instance if no store was passed in
 store = configureStore({
-    reducer: EurekaFormsReducer,
+    reducer: combineReducers({
+        forms: EurekaFormsReducer,
+        api: RootApi.reducer,
+    }),
 }), ...renderOptions } = {}) {
     function Wrapper({ children }) {
         return _jsx(Provider, { store: store, children: children });
@@ -20,7 +24,10 @@ store = configureStore({
     return { store, ...render(ui, { wrapper: Wrapper, ...renderOptions }) };
 }
 export function renderHookWithProviders(callback, { store = configureStore({
-    reducer: EurekaFormsReducer,
+    reducer: combineReducers({
+        forms: EurekaFormsReducer,
+        api: RootApi.reducer,
+    }),
 }), ...renderHookOptions } = {}) {
     function Wrapper({ children }) {
         const [idForm] = React.useState(nanoid(6));

package/dist/Utils/_api.d.ts

@@ -0,0 +1,8 @@
+export declare const RootApi: import("@reduxjs/toolkit/query").Api<import("@reduxjs/toolkit/query").BaseQueryFn<{
+    url: string;
+    timeout?: import("axios").AxiosRequestConfig["timeout"];
+    method?: import("axios").AxiosRequestConfig["method"];
+    body?: import("axios").AxiosRequestConfig["data"];
+    params?: import("axios").AxiosRequestConfig["params"];
+    headers?: Record<string, any>;
+}, unknown, unknown>, {}, "api", never, typeof import("@reduxjs/toolkit/query").coreModuleName | typeof import("@reduxjs/toolkit/query/react").reactHooksModuleName>;