@arquimedes.co/eureka-forms 2.0.104 → 2.0.108

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

@@ -2,7 +2,7 @@ import { Condition } from './Condition';
 export interface GBaseStep {
     id: string;
     idSection: string;
-    idOriginal: 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

@@ -72,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/AppHooks.js

@@ -155,9 +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.idOriginal = step.id;
+                                        step.stepPath = path;
                                     });
                                 }
                             };
@@ -178,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/FormFunctions.js

@@ -224,7 +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.idOriginal,
+        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

@@ -16,23 +16,23 @@ import { useAppSelector } from '../../../hooks';
 import FormContext from '../../../Contexts/FormContext';
 import { useContext, useMemo } from 'react';
 import { selectDependencies, useFormStep } from '../../StepHooks';
-import { convertFromRaw } from 'draft-js';
 import { stringToDraft } from '../../../Utils/DraftFunctions';
-import SmartDraftRenderer from '../../../Shared/SmartDraftRenderer';
+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;
     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 = useMemo(function () { return calcBaseDraft(value === null || value === void 0 ? void 0 : value.title, step.title); }, [value === null || value === void 0 ? void 0 : value.title, step.title]);
-    var hasTitle = useMemo(function () { return convertFromRaw(title).getPlainText().length > 0; }, [title]);
-    var description = useMemo(function () { return calcBaseDraft(value === null || value === void 0 ? void 0 : value.description, step.description); }, [value === null || value === void 0 ? void 0 : value.description, step.description]);
-    var hasDescription = useMemo(function () { return convertFromRaw(description).getPlainText().length > 0; }, [description]);
+    var title = useMemo(function () { var _a; return calcBaseDraft((_a = value === null || value === void 0 ? void 0 : value.title) !== null && _a !== void 0 ? _a : step.title); }, //Usa por defecto lo que venga en el value, pero no escucha cambios
+    [step.title]);
+    var description = useMemo(function () { var _a; return calcBaseDraft((_a = value === null || value === void 0 ? void 0 : value.description) !== null && _a !== void 0 ? _a : step.description); }, //Usa por defecto lo que venga en el value, pero no escucha cambios
+    [step.description]);
     var dependencies = useAppSelector(function (state) {
         return selectDependencies(state, step.dependencies);
     });
@@ -49,18 +49,18 @@ function TitleStep(_a) {
             width: widthStats.currentBreakPoint <= size
                 ? '100%'
                 : calcStepWidth(size, form.size),
-        } }, { children: [hasTitle && (_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(SmartDraftRenderer, { draft: title, dependencies: values }) }))), hasDescription && (_jsx("div", __assign({ className: styles.descriptionPar, style: {
-                    margin: title ? '10px 0px' : '0px 0px 5px 0px',
-                } }, { children: _jsx(SmartDraftRenderer, { draft: description, dependencies: values }) })))] })));
+                } }, { 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, draft) {
-    return value
+function calcBaseDraft(value) {
+    return typeof value === 'string'
         ? stringToDraft(value)
-        : draft !== null && draft !== void 0 ? draft : stringToDraft('');
+        : value !== null && value !== void 0 ? value : stringToDraft('');
 }

package/dist/Services/DraftService.d.ts

@@ -9,7 +9,9 @@ export declare const DraftApi: import("@reduxjs/toolkit/query").Api<import("@red
 }, 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;

package/dist/Services/DraftService.js

@@ -41,27 +41,39 @@ export var DraftApi = RootApi.injectEndpoints({
     endpoints: function (build) { return ({
         mapDraft: build.query({
             queryFn: function (_a, _b) {
-                var idForm = _a.idForm, dependencies = _a.dependencies;
+                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, response;
-                    return __generator(this, function (_c) {
-                        switch (_c.label) {
+                    var idOrganization, apiKey, response;
+                    var _c;
+                    return __generator(this, function (_d) {
+                        switch (_d.label) {
                             case 0:
                                 idOrganization = getState().forms[idForm]
                                     .global.idOrganization;
-                                if (idOrganization != 'AAA')
+                                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*/, 2];
-                                return [4 /*yield*/, widgetInstance.post("/form/draft?idOrganization=".concat(idOrganization), dependencies)];
-                            case 1:
-                                response = _c.sent();
-                                return [3 /*break*/, 4];
-                            case 2: return [4 /*yield*/, axiosInstance.post('/form/draft', dependencies)];
+                                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 = _c.sent();
-                                _c.label = 4;
-                            case 4: return [2 /*return*/, { data: response.data }];
+                                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/package.json

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

package/dist/Shared/SmartDraftRenderer.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import { EurekaDraft } from '../@Types/Draft/Draft';
-interface SmartDraftRendererProps {
-    draft: EurekaDraft;
-    dependencies: Record<string, any>;
-}
-declare function SmartDraftRenderer({ draft, dependencies, }: SmartDraftRendererProps): JSX.Element;
-export default SmartDraftRenderer;

package/dist/Shared/SmartDraftRenderer.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, 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';
-function SmartDraftRenderer(_a) {
-    var draft = _a.draft, dependencies = _a.dependencies;
-    var idForm = useContext(IdFormContext);
-    var mapped = DraftApi.useMapDraftQuery({
-        idForm: idForm,
-        dependencies: dependencies,
-    }).data;
-    var editorState = useMemo(function () { return EditorState.createWithContent(convertFromRaw(mapped !== null && mapped !== void 0 ? mapped : draft)); }, [mapped, draft]);
-    return (_jsx(Editor, { editorClassName: 'Erk-Forms-Draft', editorState: editorState, readOnly: true, toolbarHidden: true }));
-}
-export default SmartDraftRenderer;