@arquimedes.co/eureka-forms 2.0.103 → 2.0.107

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

@@ -2,6 +2,7 @@ import { Condition } from './Condition';
 export interface GBaseStep {
     id: string;
     idSection: string;
+    stepPath: string[];
     type: string;
     editable?: boolean;
     partial?: boolean;

package/dist/App/App.d.ts

@@ -4,6 +4,7 @@ import './App.css';
 import { CustomStep, CustomStepProps } from '../FormSteps/CustomStep';
 import { EditorState } from 'draft-js';
 import { CountryCode } from 'libphonenumber-js';
+import { EurekaDraft } from '../@Types/Draft/Draft';
 export interface AppProps {
     /** If the app is currently a widget */
     isWidget?: boolean;
@@ -49,6 +50,8 @@ export interface AppProps {
     customSubmitBtns?: null | ((onSubmit: () => Promise<Record<string, any> | void>, loading: boolean) => JSX.Element);
     /** Function to call on postview to fetch the download url of a file */
     fetchDownloadUrl?: (S3Key: string, fileName: string) => Promise<string>;
+    /** Function to call to map entities internally (postview, activities) */
+    mapDraftEntities?: (property: string, dependencies: Record<string, any>) => Promise<EurekaDraft>;
     /** Function to call after the confimation dialog has been closed */
     handleConfirmed?: () => void;
     /** Function called to scroll to the top */

package/dist/App/App.js

@@ -29,9 +29,10 @@ import FormComponent from '../Form/Form';
 import { Provider } from 'react-redux';
 import { store } from '../Utils/store';
 import { useSetupApp } from './AppHooks';
-import { StoreContext, useAppSelector } from '../hooks';
+import { useAppSelector } from '../hooks';
 import CustomContext from '../Contexts/CustomContext';
 import { nanoid } from '@reduxjs/toolkit';
+import { StoreContext } from '../Utils/StoreContext';
 export var IdFormContext = createContext('');
 function AppComponent(_a) {
     var formData = _a.formData, valuesData = _a.valuesData, props = __rest(_a, ["formData", "valuesData"]);
@@ -71,6 +72,7 @@ function App(_a) {
         return (_jsx(CustomContext.Provider, __assign({ value: {
                 customSteps: customSteps,
                 sendLabel: props.sendLabel,
+                mapDraftEntities: props.mapDraftEntities,
                 fetchDownloadUrl: props.fetchDownloadUrl,
                 customStepProps: (_g = props.customStepProps) !== null && _g !== void 0 ? _g : {},
                 customClientInfoStep: props.customClientInfoStep,

package/dist/App/AppFunctions.d.ts

@@ -6,8 +6,8 @@ import { MapperElement } from '../@Types/MapperElement';
 import { MapperValue } from '../FormSteps/MapperStep/MaterialMapperStep/MaterialMapperStep';
 import { CountryCode } from 'libphonenumber-js/max';
 export declare const calcValuesStore: (orgInfo: {
-    idOrganization: string;
-    countryCode: CountryCode;
+    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>;
@@ -17,7 +17,7 @@ export declare const addMapperStep: <Type>(step: Mapper, customSteps: Record<str
     steps: Record<string, FormStep>;
 };
 export declare const mapOriginalValue: (orgInfo: {
-    idOrganization: string;
-    countryCode: CountryCode;
+    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

@@ -182,8 +182,9 @@ export var mapOriginalValue = function (orgInfo, step, value, values, form, path
                         case FormStepTypes.CLASSIFIER_SELECTOR: return [3 /*break*/, 8];
                         case FormStepTypes.ENTITYVALUEPICKER: return [3 /*break*/, 9];
                         case FormStepTypes.TEXTINPUT: return [3 /*break*/, 12];
+                        case FormStepTypes.TITLE: return [3 /*break*/, 13];
                     }
-                    return [3 /*break*/, 13];
+                    return [3 /*break*/, 14];
                 case 1:
                     elements = value;
                     mappedElements = [];
@@ -297,7 +298,7 @@ export var mapOriginalValue = function (orgInfo, step, value, values, form, path
                             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*/, 14];
+                        return [3 /*break*/, 15];
                     }
                     _o.label = 9;
                 case 9:
@@ -335,13 +336,30 @@ export var mapOriginalValue = function (orgInfo, step, value, values, form, path
                     }
                     _o.label = 13;
                 case 13:
+                    {
+                        if (value.title) {
+                            step.title =
+                                typeof value.title === 'string'
+                                    ? stringToDraft(value.title)
+                                    : value.title;
+                        }
+                        if (value.description) {
+                            step.description =
+                                typeof value.description === 'string'
+                                    ? stringToDraft(value.description)
+                                    : value.description;
+                        }
+                        return [2 /*return*/, undefined];
+                    }
+                    _o.label = 14;
+                case 14:
                     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 14: return [2 /*return*/];
+                case 15: return [2 /*return*/];
             }
         });
     });

package/dist/App/AppHooks.js

@@ -155,8 +155,9 @@ export var useSetupApp = function (isEmbedded, _a) {
                             var _loop_1 = function (section) {
                                 for (var _b = 0, _c = section.steps; _b < _c.length; _b++) {
                                     var idStep = _c[_b];
-                                    iterateNestedSteps(idStep, form.steps, function (step) {
+                                    iterateNestedSteps(idStep, form.steps, function (step, path) {
                                         step.idSection = section.id;
+                                        step.stepPath = path;
                                     });
                                 }
                             };
@@ -177,7 +178,7 @@ export var useSetupApp = function (isEmbedded, _a) {
                     return [4 /*yield*/, calcValuesStore({ idOrganization: idOrganization, countryCode: countryCode }, form, valuesData, postview, customSteps)];
                 case 5:
                     values = _g.sent();
-                    dispatch(reset(__assign(__assign({ formStyle: internal
+                    dispatch(reset(__assign(__assign({ apiKey: apiKey, formStyle: internal
                             ? InternalFormStyle
                             : __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,

package/dist/Contexts/CustomContext.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { CustomStep, CustomStepProps } from '../FormSteps/CustomStep';
+import { EurekaDraft } from '../@Types/Draft/Draft';
 export interface CustomContextData {
     sendLabel?: string;
     customStepProps: Record<string, unknown>;
@@ -7,6 +8,8 @@ export interface CustomContextData {
     customClientInfoStep?: (props: CustomStepProps) => JSX.Element;
     /** Function to call on postview to fetch the download url of a file */
     fetchDownloadUrl?: (S3Key: string, fileName: string) => Promise<string>;
+    /** Function to call to map entities internally (postview, activities) */
+    mapDraftEntities?: (property: string, dependencies: Record<string, any>) => Promise<EurekaDraft>;
 }
 declare const CustomContext: import("react").Context<CustomContextData>;
 export default CustomContext;

package/dist/Form/Form.d.ts

@@ -9,6 +9,8 @@ import { FormStep } from '../@Types/FormStep';
 import { CBRFormStep } from '../@Types/CBRFormStep';
 export declare const getLocale: () => any;
 export interface StepDependency {
+    /** The id of the step before it was mapped */
+    idOriginal: string;
     dependents: (FormStep | CBRFormStep)[];
     value: any | undefined;
     type: FormStepTypes | CBRFormStepTypes | 'ORIGINAL';

package/dist/Form/FormFunctions.js

@@ -215,6 +215,7 @@ function calcStepDependency(idStep, steps, values, customSteps) {
         if (!originalValue_1)
             console.error('Missing Step Dependency:', idStep);
         return {
+            idOriginal: idStep,
             type: originalValue_1 ? 'ORIGINAL' : 'MISSING',
             value: originalValue_1 !== null && originalValue_1 !== void 0 ? originalValue_1 : null,
             dependents: [],
@@ -223,6 +224,7 @@ function calcStepDependency(idStep, steps, values, customSteps) {
     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,
+        idOriginal: depStep.stepPath[0],
         value: calcStepDependencyValue(depStep, originalValue, customSteps),
         dependents: [],
     };

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

@@ -150,23 +150,26 @@ export var calcDefaultValue = function (step) {
             return undefined;
     }
 };
-export var iterateNestedSteps = function (idStep, steps, iteration) {
+export var iterateNestedSteps = function (idStep, steps, iteration, path) {
+    if (path === void 0) { path = [idStep]; }
     var step = steps[idStep];
     if (!step) {
         console.error('Missing Step:', idStep);
         return;
     }
-    iteration(step);
+    iteration(step, path);
     if (step.type === FormStepTypes.MAPPER) {
         for (var _i = 0, _a = step.rootSteps; _i < _a.length; _i++) {
             var idStep_1 = _a[_i];
-            iterateNestedSteps(idStep_1, step.steps, iteration);
+            iterateNestedSteps(idStep_1, step.steps, iteration, __spreadArray(__spreadArray([], path, true), [
+                step.id,
+            ], false));
         }
     }
     else {
         for (var _b = 0, _c = calcSubSteps(step.id, steps); _b < _c.length; _b++) {
             var idSubStep = _c[_b];
-            iterateNestedSteps(idSubStep, steps, iteration);
+            iterateNestedSteps(idSubStep, steps, iteration, __spreadArray(__spreadArray([], path, true), [step.id], false));
         }
     }
 };

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

@@ -14,39 +14,51 @@ 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 { convertFromRaw, EditorState } from 'draft-js';
+import { useContext, useMemo } from 'react';
+import { selectDependencies, useFormStep } from '../../StepHooks';
 import { stringToDraft } from '../../../Utils/DraftFunctions';
-import { Editor } from 'react-draft-wysiwyg';
+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(_a) {
-    var _b, _c, _d;
+    var _b;
     var step = _a.step;
-    var value = useFormStep(step, {
+    var _c = useFormStep(step, {
         defaultValue: undefined,
-    }).value;
+    }), value = _c.value, onChange = _c.onChange;
     var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
     var form = useContext(FormContext);
     var widthStats = useAppSelector(function (state) { return state.widthStats; });
     var size = (_b = step.size) !== null && _b !== void 0 ? _b : form.size.blockNum;
-    var title = convertFromRaw((value === null || value === void 0 ? void 0 : value.title)
-        ? stringToDraft(value.title)
-        : (_c = step.title) !== null && _c !== void 0 ? _c : stringToDraft(''));
-    var description = convertFromRaw((value === null || value === void 0 ? void 0 : value.description)
-        ? stringToDraft(value.description)
-        : (_d = step.description) !== null && _d !== void 0 ? _d : stringToDraft(''));
+    var title = useMemo(function () { return calcBaseDraft(step.title); }, [step.title]);
+    var description = useMemo(function () { return calcBaseDraft(step.description); }, [step.description]);
+    var dependencies = useAppSelector(function (state) {
+        return selectDependencies(state, step.dependencies);
+    });
+    var values = useMemo(function () {
+        var values = {};
+        for (var _i = 0, _a = Object.values(dependencies); _i < _a.length; _i++) {
+            var _b = _a[_i], idOriginal = _b.idOriginal, value_1 = _b.value;
+            values[idOriginal] = value_1;
+        }
+        return values;
+    }, [dependencies]);
     return (_jsxs("div", __assign({ className: styles.container, style: {
             color: formStyle.textColor,
             width: widthStats.currentBreakPoint <= size
                 ? '100%'
                 : calcStepWidth(size, form.size),
-        } }, { children: [title.getPlainText().length > 0 && (_jsx("div", __assign({ className: styles.titleLbl, style: {
+        } }, { children: [_jsx("div", __assign({ className: styles.titleLbl, style: {
                     textAlign: widthStats.isMobile &&
                         widthStats.currentBreakPoint <= size
                         ? 'center'
                         : 'start',
-                } }, { children: _jsx(Editor, { editorClassName: 'Erk-Forms-Draft', editorState: EditorState.createWithContent(title), readOnly: true, toolbarHidden: true }) }))), description.getPlainText().length > 0 && (_jsx("div", __assign({ className: styles.descriptionPar, style: {
-                    margin: title ? '10px 0px' : '0px 0px 5px 0px',
-                } }, { children: _jsx(Editor, { editorClassName: 'Erk-Forms-Draft', editorState: EditorState.createWithContent(description), readOnly: true, toolbarHidden: true }) })))] })));
+                } }, { children: _jsx(SmartDraftRenderer, { draft: title, dependencies: values, property: "".concat(step.stepPath.join('.'), ".title"), onChange: function (title) { return onChange(__assign(__assign({}, value), { title: title })); } }) })), _jsx("div", __assign({ className: styles.descriptionPar }, { children: _jsx(SmartDraftRenderer, { draft: description, dependencies: values, margin: title ? '10px 0px' : '0px 0px 5px 0px', property: "".concat(step.stepPath.join('.'), ".description"), onChange: function (description) {
+                        return onChange(__assign(__assign({}, value), { description: description }));
+                    } }) }))] })));
 }
 export default TitleStep;
+function calcBaseDraft(value) {
+    return typeof value === 'string'
+        ? stringToDraft(value)
+        : value !== null && value !== void 0 ? 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?: number | undefined;
+    method?: string | undefined;
+    body?: any;
+    params?: any;
+    headers?: Record<string, any> | undefined;
+}, 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>) | undefined;
+    }, import("@reduxjs/toolkit/query").BaseQueryFn<{
+        url: string;
+        timeout?: number | undefined;
+        method?: string | undefined;
+        body?: any;
+        params?: any;
+        headers?: Record<string, any> | undefined;
+    }, unknown, unknown, {}, {}>, never, EurekaDraft | undefined, "api">;
+}, "api", never, typeof import("@reduxjs/toolkit/query").coreModuleName | typeof import("@reduxjs/toolkit/dist/query/react").reactHooksModuleName>;

package/dist/Services/DraftService.js

@@ -0,0 +1,83 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { RootApi } from '../Utils/_api';
+import axiosInstance from '../Utils/AxiosAPI';
+import widgetInstance from '../Utils/AxiosWidget';
+export var DraftApi = RootApi.injectEndpoints({
+    endpoints: function (build) { return ({
+        mapDraft: build.query({
+            queryFn: function (_a, _b) {
+                var idForm = _a.idForm, dependencies = _a.dependencies, property = _a.property, mapDraftEntities = _a.mapDraftEntities;
+                var getState = _b.getState;
+                return __awaiter(void 0, void 0, void 0, function () {
+                    var idOrganization, apiKey, response;
+                    var _c;
+                    return __generator(this, function (_d) {
+                        switch (_d.label) {
+                            case 0:
+                                idOrganization = getState().forms[idForm]
+                                    .global.idOrganization;
+                                if (!mapDraftEntities) return [3 /*break*/, 2];
+                                _c = {};
+                                return [4 /*yield*/, mapDraftEntities(property, dependencies)];
+                            case 1: return [2 /*return*/, (_c.data = _d.sent(),
+                                    _c)];
+                            case 2:
+                                apiKey = getState().forms[idForm].global
+                                    .apiKey;
+                                if (!apiKey)
+                                    return [2 /*return*/, { data: undefined }];
+                                if (!idOrganization) return [3 /*break*/, 4];
+                                return [4 /*yield*/, widgetInstance.post("/form/draft/".concat(apiKey, "?idOrganization=").concat(idOrganization), {
+                                        property: property,
+                                        dependencies: dependencies,
+                                    })];
+                            case 3:
+                                response = _d.sent();
+                                return [3 /*break*/, 6];
+                            case 4: return [4 /*yield*/, axiosInstance.post("/form/draft/".concat(apiKey), dependencies)];
+                            case 5:
+                                response = _d.sent();
+                                _d.label = 6;
+                            case 6: return [2 /*return*/, { data: response.data }];
+                        }
+                    });
+                });
+            },
+        }),
+    }); },
+});

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+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,34 @@
+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 { useContext } from 'react';
+import { DraftEntityTypes } from '../../constants/Draft/DraftEntityTypes';
+import { DraftLoadingContext } from './SmartDraftRenderer';
+import styles from './FormDecorator.module.css';
+export function FormDecorator(_a) {
+    var children = _a.children, entityKey = _a.entityKey;
+    var loading = useContext(DraftLoadingContext);
+    return (_jsx("span", __assign({ 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(function (character) {
+        var 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,12 @@
+import React from 'react';
+import { EurekaDraft } from '../../@Types/Draft/Draft';
+export declare const DraftLoadingContext: React.Context<boolean>;
+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,66 @@
+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 { createContext, useContext, useEffect, useMemo } from 'react';
+import { IdFormContext } from '../../App/App';
+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';
+export var DraftLoadingContext = createContext(true);
+function SmartDraftRenderer(_a) {
+    var draft = _a.draft, margin = _a.margin, onChange = _a.onChange, property = _a.property, dependencies = _a.dependencies;
+    var idForm = useContext(IdFormContext);
+    var mapDraftEntities = useContext(CustomContext).mapDraftEntities;
+    var postview = useAppSelector(function (state) { return state.global.postview; });
+    var hasEntities = useMemo(function () { return Object.keys(draft.entityMap).length > 0; }, [draft]);
+    var _b = DraftApi.useMapDraftQuery(!hasEntities || postview
+        ? skipToken
+        : {
+            idForm: idForm,
+            property: property,
+            dependencies: dependencies,
+            mapDraftEntities: mapDraftEntities,
+        }), mapped = _b.data, isFetching = _b.isFetching;
+    useEffect(function () {
+        if (mapped && !postview)
+            onChange === null || onChange === void 0 ? void 0 : onChange(mapped);
+    }, [mapped]);
+    var editorState = useMemo(function () {
+        return EditorState.createWithContent(convertFromRaw(cleanUpDraftParams(isFetching ? draft : mapped !== null && mapped !== void 0 ? mapped : draft)));
+    }, [mapped, draft, isFetching]);
+    return (_jsx("div", __assign({ style: { margin: margin } }, { children: _jsx(DraftLoadingContext.Provider, __assign({ 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, function (draft) {
+        for (var _i = 0, _a = draft.blocks; _i < _a.length; _i++) {
+            var block = _a[_i];
+            for (var _b = 0, _c = block.entityRanges; _b < _c.length; _b++) {
+                var entity = _c[_b];
+                var offset = entity.offset, length_1 = entity.length;
+                //Change text into spaces
+                block.text = block.text.replace(block.text.substring(offset, offset + length_1), ' '.repeat(length_1));
+            }
+        }
+    });
+}
+var customDecorators = [
+    {
+        strategy: FormDecoratorsStrategy,
+        component: FormDecorator,
+    },
+];

package/dist/States/GlobalSlice.d.ts

@@ -4,6 +4,7 @@ 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;
@@ -30,6 +31,7 @@ export declare const GlobalSlice: import("@reduxjs/toolkit").Slice<GlobalState,
         preview: boolean;
         idOrganization: string;
         idCurrentAgent?: string | undefined;
+        apiKey?: string | undefined;
         countryCode: CountryCode;
         confirmation: {
             confirmationMessage: EurekaDraft;

package/dist/Utils/AxiosAPI.d.ts

@@ -1,2 +1,13 @@
+import { BaseQueryFn } from '@reduxjs/toolkit/query';
+import { AxiosRequestConfig } from 'axios';
+declare const headers: {};
 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

@@ -1,3 +1,39 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 import axios from 'axios';
 var headers = {};
 var axiosInstance = axios.create({
@@ -6,3 +42,39 @@ var axiosInstance = axios.create({
     headers: headers,
 });
 export default axiosInstance;
+export var axiosBaseQuery = function () {
+    return function (_a) {
+        var url = _a.url, method = _a.method, body = _a.body, params = _a.params, timeout = _a.timeout, headers = _a.headers;
+        return __awaiter(void 0, void 0, void 0, function () {
+            var result, axiosError_1, err;
+            var _b, _c;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
+                    case 0:
+                        _d.trys.push([0, 2, , 3]);
+                        return [4 /*yield*/, axiosInstance({
+                                url: url,
+                                method: method,
+                                data: body,
+                                params: params,
+                                headers: headers,
+                                timeout: timeout,
+                            })];
+                    case 1:
+                        result = _d.sent();
+                        return [2 /*return*/, { data: result.data }];
+                    case 2:
+                        axiosError_1 = _d.sent();
+                        err = axiosError_1;
+                        return [2 /*return*/, {
+                                error: {
+                                    status: (_b = err.response) === null || _b === void 0 ? void 0 : _b.status,
+                                    data: ((_c = err.response) === null || _c === void 0 ? void 0 : _c.data) || err.message,
+                                },
+                            }];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        });
+    };
+};

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 var StoreContext = React.createContext({});

package/dist/Utils/TestUtils.d.ts

@@ -60,7 +60,17 @@ export declare function renderWithProviders(ui: React.ReactElement, { store, ...
     queryAllByTestId: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement[];
     findByTestId: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement>;
     findAllByTestId: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement[]>;
-    store: import("@reduxjs/toolkit/dist/configureStore").ToolkitStore<import("./store").EurekaFormsState, import("redux").AnyAction, [import("@reduxjs/toolkit").ThunkMiddleware<import("./store").EurekaFormsState, import("redux").AnyAction, undefined>]>;
+    store: import("@reduxjs/toolkit/dist/configureStore").ToolkitStore<import("redux").EmptyObject & {
+        forms: {
+            [x: string]: import("./store").RootState;
+        };
+        api: import("@reduxjs/toolkit/query").CombinedState<{}, never, "api">;
+    }, import("redux").AnyAction, import("@reduxjs/toolkit").MiddlewareArray<[import("@reduxjs/toolkit").ThunkMiddleware<import("redux").CombinedState<{
+        forms: {
+            [x: string]: import("./store").RootState;
+        };
+        api: import("@reduxjs/toolkit/query").CombinedState<{}, never, "api">;
+    }>, import("redux").AnyAction, undefined>, import("redux").Middleware<{}, import("@reduxjs/toolkit/query").RootState<{}, string, "api">, import("@reduxjs/toolkit").ThunkDispatch<any, any, import("redux").AnyAction>>]>>;
 };
 interface ExtendedRenderHookOptions<TProps> extends Omit<RenderHookOptions<TProps>, 'wrapper'> {
     store?: AppStore;
@@ -72,6 +82,16 @@ export declare function renderHookWithProviders<TProps, TResult>(callback: (prop
     waitFor: import("@testing-library/react-hooks").WaitFor;
     waitForValueToChange: import("@testing-library/react-hooks").WaitForValueToChange;
     waitForNextUpdate: import("@testing-library/react-hooks").WaitForNextUpdate;
-    store: import("@reduxjs/toolkit/dist/configureStore").ToolkitStore<import("./store").EurekaFormsState, import("redux").AnyAction, [import("@reduxjs/toolkit").ThunkMiddleware<import("./store").EurekaFormsState, import("redux").AnyAction, undefined>]>;
+    store: import("@reduxjs/toolkit/dist/configureStore").ToolkitStore<import("redux").EmptyObject & {
+        forms: {
+            [x: string]: import("./store").RootState;
+        };
+        api: import("@reduxjs/toolkit/query").CombinedState<{}, never, "api">;
+    }, import("redux").AnyAction, import("@reduxjs/toolkit").MiddlewareArray<[import("@reduxjs/toolkit").ThunkMiddleware<import("redux").CombinedState<{
+        forms: {
+            [x: string]: import("./store").RootState;
+        };
+        api: import("@reduxjs/toolkit/query").CombinedState<{}, never, "api">;
+    }>, import("redux").AnyAction, undefined>, import("redux").Middleware<{}, import("@reduxjs/toolkit/query").RootState<{}, string, "api">, import("@reduxjs/toolkit").ThunkDispatch<any, any, import("redux").AnyAction>>]>>;
 };
 export {};

package/dist/Utils/TestUtils.js

@@ -23,13 +23,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { render } 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 { renderHook } from '@testing-library/react-hooks';
 import { IdFormContext } from '../App/App';
-import { StoreContext } from '../hooks';
+import { RootApi } from './_api';
+import { StoreContext } from './StoreContext';
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function renderWithProviders(ui, _a) {
     if (_a === void 0) { _a = {}; }
@@ -38,7 +39,10 @@ export function renderWithProviders(ui, _a) {
     _b = _a.store, 
     // Automatically create a store instance if no store was passed in
     store = _b === void 0 ? configureStore({
-        reducer: EurekaFormsReducer,
+        reducer: combineReducers({
+            forms: EurekaFormsReducer,
+            api: RootApi.reducer,
+        }),
     }) : _b, renderOptions = __rest(_a, ["store"]);
     // eslint-disable-next-line @typescript-eslint/ban-types
     function Wrapper(_a) {
@@ -52,7 +56,10 @@ export function renderWithProviders(ui, _a) {
 export function renderHookWithProviders(callback, _a) {
     if (_a === void 0) { _a = {}; }
     var _b = _a.store, store = _b === void 0 ? configureStore({
-        reducer: EurekaFormsReducer,
+        reducer: combineReducers({
+            forms: EurekaFormsReducer,
+            api: RootApi.reducer,
+        }),
     }) : _b, renderHookOptions = __rest(_a, ["store"]);
     // eslint-disable-next-line @typescript-eslint/ban-types
     function Wrapper(_a) {

package/dist/Utils/_api.d.ts

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

package/dist/Utils/_api.js

@@ -0,0 +1,13 @@
+import { buildCreateApi, coreModule, reactHooksModule, } from '@reduxjs/toolkit/query/react';
+import { axiosBaseQuery } from './AxiosAPI';
+import { createDispatchHook, createSelectorHook, createStoreHook, } from 'react-redux';
+import { StoreContext } from './StoreContext';
+var customCreateApi = buildCreateApi(coreModule(), reactHooksModule({
+    useDispatch: createDispatchHook(StoreContext),
+    useSelector: createSelectorHook(StoreContext),
+    useStore: createStoreHook(StoreContext),
+}));
+export var RootApi = customCreateApi({
+    baseQuery: axiosBaseQuery(),
+    endpoints: function () { return ({}); },
+});

package/dist/Utils/store.d.ts

@@ -8,11 +8,18 @@ export interface RootState {
     widthStats: WidthStats;
 }
 export declare const defaultRootState: RootState;
-export type EurekaFormsState = Record<string, RootState>;
+type EurekaFormsState = Record<string, RootState>;
 export declare function EurekaFormsReducer(state: EurekaFormsState | undefined, action: AnyAction): EurekaFormsState;
-export declare const store: import("@reduxjs/toolkit/dist/configureStore").ToolkitStore<EurekaFormsState, AnyAction, [import("@reduxjs/toolkit").ThunkMiddleware<EurekaFormsState, AnyAction, undefined>]>;
+export declare const store: import("@reduxjs/toolkit/dist/configureStore").ToolkitStore<import("redux").EmptyObject & {
+    forms: EurekaFormsState;
+    api: import("@reduxjs/toolkit/query").CombinedState<{}, never, "api">;
+}, AnyAction, import("@reduxjs/toolkit").MiddlewareArray<[import("@reduxjs/toolkit").ThunkMiddleware<import("redux").CombinedState<{
+    forms: EurekaFormsState;
+    api: import("@reduxjs/toolkit/query").CombinedState<{}, never, "api">;
+}>, AnyAction, undefined>, import("redux").Middleware<{}, import("@reduxjs/toolkit/query").RootState<{}, string, "api">, import("@reduxjs/toolkit").ThunkDispatch<any, any, AnyAction>>]>>;
 export type AppDispatch = typeof store.dispatch;
 export type AppStore = typeof store;
+export type AppState = ReturnType<typeof store.getState>;
 export declare const getAppState: import("@reduxjs/toolkit").AsyncThunk<RootState, {
     idForm: string;
 }, {
@@ -25,3 +32,4 @@ export declare const getAppState: import("@reduxjs/toolkit").AsyncThunk<RootStat
     fulfilledMeta?: unknown;
     rejectedMeta?: unknown;
 }>;
+export {};

package/dist/Utils/store.js

@@ -45,15 +45,22 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+var _a;
 import { combineReducers, configureStore, createAsyncThunk, } from '@reduxjs/toolkit';
 import GlobalSlice from '../States/GlobalSlice';
 import SiteSlice from '../States/SiteSlice';
 import WidthStatsSlice from '../States/WidthStatsSlice';
+import { RootApi } from './_api';
 export var defaultRootState = {
     global: GlobalSlice.getInitialState(),
     site: SiteSlice.getInitialState(),
     widthStats: WidthStatsSlice.getInitialState(),
 };
+var reducer = combineReducers((_a = {
+        forms: EurekaFormsReducer
+    },
+    _a[RootApi.reducerPath] = RootApi.reducer,
+    _a));
 var FormReducer = combineReducers({
     global: GlobalSlice.reducer,
     site: SiteSlice.reducer,
@@ -72,13 +79,16 @@ export function EurekaFormsReducer(state, action) {
     return __assign(__assign({}, state), (_b = {}, _b[idForm] = FormReducer(state[idForm], action), _b));
 }
 export var store = configureStore({
-    reducer: EurekaFormsReducer,
+    reducer: reducer,
+    middleware: function (getDefaultMiddleware) {
+        return getDefaultMiddleware().concat(RootApi.middleware);
+    },
 });
 export var getAppState = createAsyncThunk('get/state', function (_a, thunkAPI) {
     var idForm = _a.idForm;
     return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_b) {
-            return [2 /*return*/, thunkAPI.getState()[idForm]];
+            return [2 /*return*/, thunkAPI.getState().forms[idForm]];
         });
     });
 });

package/dist/hooks.d.ts

@@ -1,7 +1,5 @@
 import type { TypedUseSelectorHook } from 'react-redux';
 import { type RootState, type AppDispatch } from './Utils/store';
-import React from 'react';
-export declare const StoreContext: React.Context<any>;
 export declare const useAppDispatch: () => AppDispatch;
 export declare const useAppSelector: TypedUseSelectorHook<RootState>;
 export declare const selectBreakPoint: (state: RootState) => number;

package/dist/hooks.js

@@ -2,8 +2,7 @@ import { createDispatchHook, createSelectorHook } from 'react-redux';
 import { defaultRootState, } from './Utils/store';
 import { useContext } from 'react';
 import { IdFormContext } from './App/App';
-import React from 'react';
-export var StoreContext = React.createContext({});
+import { StoreContext } from './Utils/StoreContext';
 var useSelector = createSelectorHook(StoreContext);
 var useDispatch = createDispatchHook(StoreContext);
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
@@ -18,7 +17,7 @@ export var useAppDispatch = function () {
 };
 export var useAppSelector = function (selector, options) {
     var idForm = useContext(IdFormContext);
-    return useSelector(function (state) { var _a; return selector((_a = state[idForm]) !== null && _a !== void 0 ? _a : defaultRootState); }, options);
+    return useSelector(function (state) { var _a; return selector((_a = state.forms[idForm]) !== null && _a !== void 0 ? _a : defaultRootState); }, options);
 };
 export var selectBreakPoint = function (state) {
     return state.widthStats.currentBreakPoint;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@arquimedes.co/eureka-forms",
     "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-    "version": "2.0.103",
+    "version": "2.0.107",
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",