@arquimedes.co/eureka-forms 3.0.49-new-steps → 3.0.50-test

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

@@ -120,10 +120,12 @@ export interface EntityDateCondition extends EntityPropertyConditionBase {
 export interface EntityRelativeDateCondition extends EntityPropertyConditionBase {
     propertyType: EntityPropertyTypes.DATEPICKER;
     propertyOperator: OperatorTypes.PAST_RELATIVE_LESS | OperatorTypes.PAST_RELATIVE_MORE | OperatorTypes.FUTURE_RELATIVE_LESS | OperatorTypes.FUTURE_RELATIVE_MORE;
-    days: number;
-    hours: number;
-    minutes: number;
-    working: boolean;
+    value: {
+        days: number;
+        hours: number;
+        minutes: number;
+        working: boolean;
+    };
 }
 export type EntityTimeCondition = BaseEntityTimeCondition | WorkingEntityTimeCondition;
 export interface BaseEntityTimeCondition extends EntityPropertyConditionBase {

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

@@ -0,0 +1,16 @@
+import ErkValueTypes from '../constants/ErkValueTypes';
+import { EurekaDraft } from './Draft/Draft';
+export type ErkValue = StepErkValue | DraftErkValue | BooleanErkValue;
+interface StepErkValue {
+    type: ErkValueTypes.STEP;
+    idStep: string;
+}
+interface DraftErkValue {
+    type: ErkValueTypes.DRAFT;
+    value: EurekaDraft;
+}
+interface BooleanErkValue {
+    type: ErkValueTypes.BOOLEAN;
+    value: boolean;
+}
+export {};

package/dist/@Types/ErkValue.js

@@ -0,0 +1 @@
+export {};

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

@@ -11,6 +11,7 @@ export interface Form {
     size: FormSize;
     firstSection: string;
     type?: FormTypes;
+    hasLogin?: boolean;
     hasCaptcha?: boolean;
     isStandAlone?: boolean;
     style?: FormStyle;

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

@@ -2,15 +2,10 @@ import { ErkIconTypes } from '../constants/ErkIconTypes';
 import FormStepTypes, { ClassifierOptionTypes, OptionTypes, RatingTypes, MapperStyleTypes, EntityValueOptionTypes, EntityValueDataTypes, ApiSelectorOptionTypes, ApiSelectorParamTypes } from '../constants/FormStepTypes';
 import { Condition } from './Condition';
 import { EurekaDraft } from './Draft/Draft';
+import { ErkValue } from './ErkValue';
 import * as GSteps from './GenericFormSteps';
 import { Time } from './Time';
-import { LocationStep } from './LocationFormStep';
-import { NumberStep, NumberStepType } from './NumericFormSteps';
-import { BookingStep } from './BookingFormStep';
-import { CalendarStep } from './CalendarFormStep';
-export type { LocationStep, NumberStep, BookingStep, CalendarStep };
-export { NumberStepType };
-export type FormStep = Title | TimePicker | Rating | CheckBox | TextArea | TextInput | DatePicker | FileUpload | Separator | FormSelector | ClassifierSelector | Collapsible | EntityValuePicker | ApiSelector | Mapper | DatePickerRange | LocationStep | NumberStep | BookingStep | CalendarStep;
+export type FormStep = Title | TimePicker | Rating | CheckBox | TextArea | TextInput | DatePicker | FileUpload | Separator | FormSelector | ClassifierSelector | Collapsible | EntityValuePicker | ApiSelector | Mapper | DatePickerRange;
 export interface Title extends GSteps.GBaseStep {
     type: FormStepTypes.TITLE;
     title?: EurekaDraft;
@@ -157,7 +152,7 @@ export interface ValueEntityValuePickerPath {
     type: EntityValueDataTypes.VALUE;
     idEntityValue: string | null;
 }
-export type EntityValuePickerFilter = StepEntityValuePickerFilter | ValueEntityValuePickerFilter | CurrentAgentEntityValuePickerFilter;
+export type EntityValuePickerFilter = StepEntityValuePickerFilter | ValueEntityValuePickerFilter | CurrentAgentEntityValuePickerFilter | IntegrationEntityValuePickerFilter;
 export interface StepEntityValuePickerFilter {
     idProperty: string;
     type: EntityValueDataTypes.STEP;
@@ -174,6 +169,12 @@ export interface CurrentAgentEntityValuePickerFilter {
     idProperty: string;
     type: EntityValueDataTypes.CURRENT_AGENT;
 }
+export interface IntegrationEntityValuePickerFilter {
+    idProperty: string;
+    type: EntityValueDataTypes.INTEGRATION;
+    idIntegration: string;
+    values?: Record<string, ErkValue>;
+}
 export interface ApiSelector extends GSteps.GSmartSelect {
     type: FormStepTypes.API_SELECTOR;
     icon?: ErkIconTypes;
@@ -231,3 +232,4 @@ export interface Mapper extends GSteps.GBaseStep {
     deletable?: boolean;
     max?: number;
 }
+export {};

package/dist/@Types/FormStep.js

@@ -1,2 +1 @@
-import { NumberStepType } from './NumericFormSteps';
-export { NumberStepType };
+export {};

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

@@ -0,0 +1,13 @@
+/**
+ * The currently active user
+ */
+export interface User {
+    /** The User's id (if capta agent)*/
+    _id?: string;
+    /** The User's name */
+    name?: string;
+    /** The user's Email*/
+    email: string;
+    /** The expiration of the token */
+    exp: number;
+}

package/dist/@Types/User.js

@@ -0,0 +1 @@
+export {};

package/dist/App/App.js

@@ -13,7 +13,7 @@ import { nanoid } from '@reduxjs/toolkit';
 import { IdFormContext } from '../Contexts/FormContext';
 import { StoreContext } from '../Utils/StoreContext';
 function AppComponent({ formData, valuesData, ...props }) {
-    const [idForm] = React.useState(nanoid(6));
+    const [idForm] = React.useState(nanoid(20));
     return (_jsx(IdFormContext.Provider, { value: idForm, children: _jsx(Provider, { store: store, context: StoreContext, children: _jsx(App, { formData: formData, valuesData: valuesData, ...props }) }) }));
 }
 export default AppComponent;

package/dist/App/AppFunctions.js

@@ -14,11 +14,11 @@ export const calcValuesStore = async (orgInfo, form, originalValues = {}, postvi
     await Promise.all(Object.keys(originalValues).map(async (idValue) => {
         const step = form.steps[idValue];
         if (step) {
+            if (!values.sections[step.idSection])
+                values.sections[step.idSection] = {};
             const value = await mapOriginalValue(orgInfo, step, originalValues[step.id], values, form);
             if (value !== undefined) {
                 if (!form.hiddenSteps?.includes(step.id)) {
-                    if (!values.sections[step.idSection])
-                        values.sections[step.idSection] = {};
                     values.sections[step.idSection][step.id] = value;
                 }
                 else {
@@ -163,7 +163,7 @@ export const mapOriginalValue = async (orgInfo, step, value, values, form, path
         }
         case FormStepTypes.ENTITYVALUEPICKER: {
             if (!value._id) {
-                const params = new URLSearchParams(value);
+                const params = typeof value !== 'string' ? new URLSearchParams(value) : new URLSearchParams();
                 const url = `${orgInfo.idOrganization}/entities/${step.idEntity}?${params.toString()}`;
                 const entityValues = (await widgetInstance.get(url)).data;
                 if (entityValues.length === 1) {
@@ -172,6 +172,11 @@ export const mapOriginalValue = async (orgInfo, step, value, values, form, path
                         return undefined;
                     return entityValues[0];
                 }
+                if (typeof value === 'string') {
+                    if (step.options[value]?.type === EntityValueOptionTypes.HIDE)
+                        return undefined;
+                    return entityValues.find((ev) => ev._id === value);
+                }
                 return null;
             }
             return value;

package/dist/App/AppHooks.js

@@ -4,6 +4,7 @@ import { fetchOrganization } from '../Services/OrganizationService';
 import { fetchForm } from '../Services/FormService';
 import { calcCbrForm } from '../Utils/CBRFunctions';
 import { calcInitialSections, calcValuesStore } from './AppFunctions';
+import { jwtDecode } from 'jwt-decode';
 import { useAppDispatch } from '../hooks';
 import InternalFormStyle from '../constants/InternalFormStyle';
 import { calcDependencies } from '../Form/FormFunctions';
@@ -39,6 +40,7 @@ export const useSetupApp = (isEmbedded, props) => {
     const loadData = async () => {
         let idOrganization = others.idOrganization;
         let organization = null;
+        let user = null;
         let form = formData ?? null;
         if (form && preview && form.isStandAlone) {
             organization = await loadOrg();
@@ -90,7 +92,24 @@ export const useSetupApp = (isEmbedded, props) => {
             return;
         const dependencies = {};
         const values = await calcValuesStore({ idOrganization, countryCode }, form, valuesData, postview, customSteps);
+        if (form.hasLogin && !internal && !preview) {
+            const token = localStorage.getItem('token');
+            if (token) {
+                try {
+                    user = jwtDecode(token);
+                    if (user && Date.now() / 1000 >= user.exp) {
+                        user = null;
+                        localStorage.removeItem('token');
+                    }
+                }
+                catch {
+                    user = null;
+                    localStorage.removeItem('token');
+                }
+            }
+        }
         dispatch(reset({
+            user,
             apiKey,
             formStyle: internal
                 ? InternalFormStyle
@@ -104,7 +123,7 @@ export const useSetupApp = (isEmbedded, props) => {
             },
             internal: !!internal,
             idOrganization,
-            idCurrentAgent,
+            idCurrentAgent: user?._id ?? idCurrentAgent,
             preview: !!preview,
             partial: !!partial,
             postview: !!postview,

package/dist/Form/Form.js

@@ -17,9 +17,10 @@ import { useWidthStats } from './FormHooks';
 import { useAppDispatch, useAppSelector } from '../hooks';
 import FormContext, { IdFormContext } from '../Contexts/FormContext';
 import { getAppState } from '../Utils/store';
+import LoginPage from '../Login/LoginPage';
 import { focusStep } from '../States/SiteSlice';
 function FormComponent({ form, apiKey, reload, isWidget, branding, setSubmit, scrollToTop, customSteps, containerRef, customSubmit, customSubmitBtns, customConfirmation, }) {
-    const { idOrganization, internal, postview } = useAppSelector((state) => state.global);
+    const { idOrganization, internal, postview, user } = useAppSelector((state) => state.global);
     const formMethods = useForm({
         mode: 'onTouched',
         shouldFocusError: true,
@@ -100,8 +101,11 @@ function FormComponent({ form, apiKey, reload, isWidget, branding, setSubmit, sc
             }, children: _jsx("div", { className: styles.widgetFormContainer, ref: containerRef, children: renderForm() }) }));
     }
     else {
+        if (user === null && form.hasLogin) {
+            return (_jsx("div", { className: styles.loginContainer, children: _jsx(LoginPage, { form: form }) }));
+        }
         //Standalone cant have widget
-        return (_jsxs(React.Fragment, { children: [_jsx(Navbar, { logo: branding?.images.logoUrl, color: branding?.colors?.navbarColor ?? branding?.colors?.primaryColor }), _jsx("div", { className: styles.standAloneFormContainer, ref: containerRef, style: {
+        return (_jsxs(React.Fragment, { children: [_jsx(Navbar, { apiKey: form.apiKey, logo: branding?.images.logoUrl, color: branding?.colors?.navbarColor ?? branding?.colors?.primaryColor }), _jsx("div", { className: styles.standAloneFormContainer, ref: containerRef, style: {
                         background: form.style?.standAloneBackgroundColor ?? '#ffffff',
                     }, children: _jsx("div", { className: isResponsive ? styles.fullScreenStandAloneForm : styles.standAloneFormCard, style: {
                             backgroundColor: form.style?.backgroundColor ?? InternalFormStyle.backgroundColor,

package/dist/Form/Form.module.css

@@ -1,39 +1,48 @@
-.standAloneFormContainer {
-    width: 100%;
-    max-width: 100%;
-    overflow: hidden;
-    min-height: calc(100vh - 60px);
-    display: flex;
-    overflow-x: hidden;
-}
-
-.fullScreenStandAloneForm {
-    width: 100%;
-    padding: 20px;
-    min-height: 100%;
-    overflow: hidden;
-}
-
-.standAloneFormCard {
-    -webkit-box-shadow: -6px 0px 8px 5px rgba(0, 0, 0, 0.2);
-    -moz-box-shadow: -6px 0px 8px 5px rgba(0, 0, 0, 0.2);
-    box-shadow: -6px 0px 8px 5px rgba(0, 0, 0, 0.2);
-    margin-top: 30px;
-    margin-left: auto;
-    margin-right: auto;
-    height: fit-content;
-    width: fit-content;
-    border-radius: 15px;
-    padding: 20px;
-    margin-bottom: 30px;
-}
-
-.widgetFormContainer {
-    padding-top: 10px;
-    padding-bottom: 10px;
-    margin-left: auto;
-    margin-right: auto;
-    height: fit-content;
-    width: fit-content;
-    max-width: 100%;
-}
+.standAloneFormContainer {
+    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+    min-height: calc(100vh - 60px);
+    display: flex;
+    overflow-x: hidden;
+}
+
+.fullScreenStandAloneForm {
+    width: 100%;
+    padding: 20px;
+    min-height: 100%;
+    overflow: hidden;
+}
+
+.loginContainer {
+    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+    min-height: 100vh;
+    display: flex;
+    overflow-x: hidden;
+}
+
+.standAloneFormCard {
+    -webkit-box-shadow: -6px 0px 8px 5px rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: -6px 0px 8px 5px rgba(0, 0, 0, 0.2);
+    box-shadow: -6px 0px 8px 5px rgba(0, 0, 0, 0.2);
+    margin-top: 30px;
+    margin-left: auto;
+    margin-right: auto;
+    height: fit-content;
+    width: fit-content;
+    border-radius: 15px;
+    padding: 20px;
+    margin-bottom: 30px;
+}
+
+.widgetFormContainer {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    margin-left: auto;
+    margin-right: auto;
+    height: fit-content;
+    width: fit-content;
+    max-width: 100%;
+}

package/dist/FormSteps/ApiSelectorStep/MaterialApiSelectorStep/MaterialApiSelectorStep.js

@@ -3,13 +3,12 @@ import React, { useContext, useMemo } from 'react';
 import FormStepTypes, { ApiSelectorOptionTypes, ApiSelectorParamTypes } from '../../../constants/FormStepTypes';
 import StepComponent from '../../Step';
 import SmartSelect from '../../SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep';
-import widgetInstance from '../../../Utils/AxiosWidget';
-import axiosInstance from '../../../Utils/AxiosAPI';
 import InputIcon from '../../../Shared/InputIcon/InputIcon';
 import FormContext from '../../../Contexts/FormContext';
 import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
 import { recursivelyCalcConditionSteps } from '../../StepHooks';
 import { evaluateCondition } from '../../StepFunctions';
+import { fetchApiSelectorOptionsThrottled } from '../../../Services/ApiSelectorService';
 function ApiSelectorComponent({ step, editable, ...others }) {
     const form = useContext(FormContext);
     function calcOptionId(option) {
@@ -34,6 +33,9 @@ function ApiSelectorComponent({ step, editable, ...others }) {
                         }
                         else if (typeof currentValue === 'string')
                             params.set(filter.key, currentValue);
+                        else if (step.url.includes('capta.co') && currentValue._id) {
+                            params.set(filter.key, currentValue._id);
+                        }
                         else
                             params.set(filter.key, currentValue.label ?? currentValue.id);
                     }
@@ -54,8 +56,10 @@ function ApiSelectorComponent({ step, editable, ...others }) {
         if (!step.url.includes('?'))
             url += '?';
         url += params.toString();
-        const response = await (idOrganization ? widgetInstance.get(url) : axiosInstance.get(url));
-        return response.data.filter((option) => calcOptionId(option) && step.options[calcOptionId(option)]?.type !== ApiSelectorOptionTypes.HIDE);
+        // Use the throttled fetch function that limits concurrent requests per URL
+        const response = await fetchApiSelectorOptionsThrottled(url, idOrganization);
+        return response.filter((option) => calcOptionId(option) !== undefined &&
+            step.options[calcOptionId(option)]?.type !== ApiSelectorOptionTypes.HIDE);
     }, [form]);
     return (_jsx(StepFillerContainer, { step: step, children: _jsx(SmartSelect, { ...others, editable: editable, step: step, IconComponent: () => (step.icon ? _jsx(InputIcon, { icon: step.icon }) : undefined), getOptions: getApiOptions, getOptionSelected: (option, value) => calcOptionId(option) === calcOptionId(value), calcDepError: (steps) => {
                 for (const step of steps) {

package/dist/FormSteps/CBRStepMapper.js

@@ -54,7 +54,7 @@ function CBRStepMapper(props) {
         case CBRFormStepTypes.CBR_EMAIL:
             return (_jsx(TextInputStep, { ...props, step: props.step, validation: {
                     type: 'EMAIL',
-                    value: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+                    value: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@(?!(gmal|gmai|gmil|hotmil|hotmal|hotmai|yaho|yhoo|yahoo|outlok|outloo|outluk)\.)((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
                         .source,
                     message: 'El correo no es válido',
                 } }));

package/dist/FormSteps/ClassifierSelectorStep/MaterialClassifierSelectorStep/MaterialClassifierSelectorStep.js

@@ -34,7 +34,7 @@ function ClassifierSelectorStep({ step, editable }) {
     const form = useContext(FormContext);
     const classifier = form.classifiers?.[step.idClassifier ?? ''];
     const options = useMemo(() => {
-        return classifier?.children
+        return (classifier?.children
             ?.filter((idClassifier) => {
             const option = step.options[idClassifier];
             if (option?.type === ClassifierOptionTypes.HIDE || !form.classifiers?.[idClassifier]) {
@@ -48,7 +48,7 @@ function ClassifierSelectorStep({ step, editable }) {
                 value: classifier?._id,
                 label: classifier?.clientName?.trim?.() && preview ? classifier?.clientName : classifier?.name,
             };
-        });
+        }) ?? []);
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [dependenciesValues]);

package/dist/FormSteps/DatePickerRangeStep/MaterialDatePickerRangeStep/MaterialDatePickerRangeStep.js

@@ -29,6 +29,6 @@ function MaterialDatePickerRangeStep({ step, editable, defaultValue }) {
     }, [onChange]);
     const [minDate, maxDate] = [safeDate(step.minDate), safeDate(step.maxDate)];
     const dateRangeValue = value?.length === 2 ? [safeDate(value[0]) ?? null, safeDate(value[1]) ?? null] : [null, null];
-    return (_jsx(MaterialInputContainer, { step: step, editable: editable, children: _jsx(ErkDateRangePicker, { ...field, value: dateRangeValue, inputRef: ref, error: !!error, minDate: minDate, maxDate: maxDate, labelMargin: 0, onChange: handleChange, required: step.required, readOnly: !editable || postview, helperText: error?.message ?? step.description }) }));
+    return (_jsx(MaterialInputContainer, { step: step, editable: editable, children: _jsx(ErkDateRangePicker, { ...field, value: dateRangeValue, inputRef: ref, error: !!error, minDate: minDate, maxDate: maxDate, labelMargin: 0, label: step.label, onChange: handleChange, required: step.required, readOnly: !editable || postview, helperText: error?.message ?? step.description }) }));
 }
 export default MaterialDatePickerRangeStep;

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

@@ -3,16 +3,30 @@ import React, { useCallback, useContext, useMemo, useState } from 'react';
 import FormStepTypes, { EntityValueDataTypes, EntityValueOptionTypes } from '../../../constants/FormStepTypes';
 import SmartSelect from '../../SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep';
 import widgetInstance from '../../../Utils/AxiosWidget';
-import FormContext from '../../../Contexts/FormContext';
+import FormContext, { IdFormContext } from '../../../Contexts/FormContext';
 import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
 import { recursivelyCalcConditionSteps, selectDependencies } from '../../StepHooks';
-import { useAppSelector } from '../../../hooks';
+import { useApiSubscribe, useAppSelector } from '../../../hooks';
 import MaterialEntityValueDialog from './MaterialEntityValueDialog/MaterialEntityValueDialog';
 import InputIcon from '../../../Shared/InputIcon/InputIcon';
 import { evaluateCondition } from '../../StepFunctions';
 import StepComponent from '../../Step';
+import ErkValueTypes from '../../../constants/ErkValueTypes';
+import { IntegrationsApi } from '../../../Services/IntegrationService';
 function EntityValuePickerStep({ step, editable }) {
     const form = useContext(FormContext);
+    const subscribe = useApiSubscribe();
+    const idForm = useContext(IdFormContext);
+    const fetchFilterIntegration = useCallback(async (idIntegration, payload) => {
+        return ((await subscribe(IntegrationsApi.endpoints.fetchFilterIntegration.initiate({
+            idForm,
+            payload,
+            idIntegration,
+        }))) ?? []);
+    }, [subscribe, idForm]);
+    const getOptions = useCallback(async (step, dependencyStore, ids) => {
+        return await getEntityValueOptions(step, dependencyStore, ids, fetchFilterIntegration);
+    }, [fetchFilterIntegration]);
     const [dialogs, setDialogs] = useState();
     const dialogsIdStepDeps = useMemo(() => {
         const ids = [];
@@ -34,7 +48,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, getOptions: getEntityValueOptions, getOptionalDependencies: getOptionalDependencies, IconComponent: () => (step.icon ? _jsx(InputIcon, { icon: step.icon }) : undefined), 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: getOptions, 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 +111,7 @@ function EntityValuePickerStep({ step, editable }) {
                     } }) })] }));
 }
 export default EntityValuePickerStep;
-const getEntityValueOptions = async (step, dependencyStore, { idOrganization, idCurrentAgent, }) => {
+const getEntityValueOptions = async (step, dependencyStore, { idOrganization, idCurrentAgent, }, fetchFilterIntegration) => {
     if (!idOrganization)
         return null;
     let urlPath = '';
@@ -124,6 +138,40 @@ const getEntityValueOptions = async (step, dependencyStore, { idOrganization, id
     const params = new URLSearchParams({});
     for (const filter of step.filters) {
         switch (filter.type) {
+            case EntityValueDataTypes.INTEGRATION: {
+                const payload = {};
+                for (const [key, erkValue] of Object.entries(filter.values ?? {})) {
+                    switch (erkValue.type) {
+                        case ErkValueTypes.BOOLEAN:
+                            payload[key] = erkValue.value;
+                            break;
+                        case ErkValueTypes.DRAFT: {
+                            //TODO: Hacer esto bien, la lambda tiene que ser capaz de calcular un draft en un filtro
+                            // values[key] = await mapDraftEntities(
+                            //     `filters[${index}].values.${key}`
+                            // );
+                            break;
+                        }
+                        case ErkValueTypes.STEP: {
+                            const currentValue = dependencyStore[erkValue.idStep]?.value;
+                            if (currentValue) {
+                                if (typeof currentValue === 'string')
+                                    payload[key] = currentValue;
+                                else if (currentValue instanceof Date)
+                                    payload[key] = currentValue.toISOString();
+                                else
+                                    payload[key] = currentValue._id ?? currentValue.id;
+                            }
+                            else
+                                payload[key] = null;
+                            break;
+                        }
+                    }
+                }
+                const filtered = await fetchFilterIntegration(filter.idIntegration, payload);
+                params.set(filter.idProperty, filtered.join(','));
+                break;
+            }
             case EntityValueDataTypes.STEP: {
                 const currentValue = dependencyStore[filter.idStep]?.value;
                 if (currentValue) {

package/dist/FormSteps/FileUploadStep/MaterialFileUploadStep/FileComponent/FileComponent.js

@@ -64,6 +64,6 @@ function FileUploadComponent({ file, formStyle, error, editable, handleRemove, f
                     }
                 }, children: file.file?.name ?? file.fileName }), editable && (_jsx("div", { className: styles.deletBtn, onClick: () => {
                     handleRemove();
-                }, children: _jsx(CloseIcon, { style: { fontSize: 'inherit' } }) }))] }));
+                }, children: _jsx(CloseIcon, { size: 24 }) }))] }));
 }
 export default FileUploadComponent;

package/dist/FormSteps/FileUploadStep/MaterialFileUploadStep/FileComponent/FileComponent.module.css

@@ -34,7 +34,7 @@
     font-size: 26px;
     height: 26px;
     margin-left: 5px;
-    color: '#787878';
+    color: #787878;
     cursor: pointer;
 }
 .loaderContainer {

package/dist/FormSteps/FileUploadStep/MaterialFileUploadStep/MaterialFileUploadStep.js

@@ -23,7 +23,23 @@ function FileUploadStep({ step, editable }) {
     const { clearErrors } = useFormContext();
     const [error, setError] = useState(undefined);
     const [fileChange, setFileChange] = useState([]);
+    const [dragging, setDragging] = useState(false);
     const inputRef = useRef(null);
+    const handleFiles = useCallback((files) => {
+        const maxFiles = files.filter((file) => file.size > maxSize);
+        if (maxFiles.length > 0) {
+            setError('El tamaño máximo de carga es de 30Mb.');
+        }
+        else {
+            setFileChange(files
+                .filter((file) => value.find((val) => val.file === file) === undefined)
+                .map((file) => ({
+                state: 'STARTING',
+                file,
+                postInfo: null,
+            })));
+        }
+    }, [value]);
     const getLinks = useCallback(async (pFiles) => {
         try {
             const fileLinks = await getUploadUrls(pFiles.map((file) => file.file), idOrganization);
@@ -122,25 +138,40 @@ function FileUploadStep({ step, editable }) {
         }
         return '';
     };
-    return (_jsxs("div", { className: styles.container + (error || !!fieldError ? ' Erk-error' : ''), style: {
+    return (_jsxs("div", { className: styles.container +
+            (error || !!fieldError ? ' Erk-error' : '') +
+            (dragging ? ' ' + styles.dragging : ''), style: {
             minHeight: editable === false || postview ? undefined : '100px',
-        }, "data-testid": step.id, children: [_jsx("div", { className: styles.labelLabel, children: step.label }), step.description && (_jsx("div", { className: styles.stepDescriptionLabel, style: { color: formStyle.descriptionTextColor }, children: step.description })), _jsx("input", { type: "file", ref: inputRef, className: styles.filesInput, onChange: (e) => {
+        }, "data-testid": step.id, onDragOver: (e) => {
+            if (!editable || postview)
+                return;
+            e.preventDefault();
+        }, onDragEnter: (e) => {
+            if (!editable || postview)
+                return;
+            e.preventDefault();
+            setDragging(true);
+        }, onDragLeave: (e) => {
+            if (!editable || postview)
+                return;
+            if (e.currentTarget.contains(e.relatedTarget))
+                return;
+            setDragging(false);
+        }, onDrop: (e) => {
+            if (!editable || postview)
+                return;
+            e.preventDefault();
+            setDragging(false);
+            clearErrors(step.id);
+            setError(undefined);
+            const files = e.dataTransfer.files;
+            if (files && files.length > 0) {
+                handleFiles(Array.from(files));
+            }
+        }, children: [_jsx("div", { className: styles.labelLabel, children: step.label }), step.description && (_jsx("div", { className: styles.stepDescriptionLabel, style: { color: formStyle.descriptionTextColor }, children: step.description })), _jsx("input", { type: "file", ref: inputRef, className: styles.filesInput, onChange: (e) => {
                     const files = e.target.files;
                     if (files) {
-                        const filesArray = Array.from(files);
-                        const maxFiles = filesArray.filter((file) => file.size > maxSize);
-                        if (maxFiles.length > 0) {
-                            setError('El tamaño máximo de carga es de 30Mb.');
-                        }
-                        else {
-                            setFileChange(filesArray
-                                .filter((file) => value.find((val) => val.file === file) === undefined)
-                                .map((file) => ({
-                                state: 'STARTING',
-                                file,
-                                postInfo: null,
-                            })));
-                        }
+                        handleFiles(Array.from(files));
                         inputRef.current.value = '';
                     }
                 }, multiple: true, accept: getAcceptedExtensions() }), _jsxs("div", { className: styles.btnContainer, children: [_jsx("input", { ref: ref, className: 'hidden-input' }), _jsx(ErkButton, { disabled: !editable || postview, text: 'Examinar' + (step.required ? ' *' : ''), onClick: () => {
@@ -152,7 +183,7 @@ function FileUploadStep({ step, editable }) {
                                     input.click();
                                 }
                             }
-                        } })] }), _jsx("div", { className: styles.filesContainer, children: value.map((file, index) => (_jsx(FileComponent, { formStyle: formStyle, file: file, error: (!!fieldError && file.state !== 'DONE') ||
+                        } })] }), editable && !postview && (_jsx("div", { className: styles.dragHint, style: { color: formStyle.descriptionTextColor }, children: "o arrastra y suelta los archivos aqu\u00ED" })), _jsx("div", { className: styles.filesContainer, children: value.map((file, index) => (_jsx(FileComponent, { formStyle: formStyle, file: file, error: (!!fieldError && file.state !== 'DONE') ||
                         file.state === 'ERROR', editable: editable && !postview, handleRemove: () => {
                         if (value.filter((val) => val.state === 'ERROR').length === 1) {
                             clearErrors(step.id);

package/dist/FormSteps/FileUploadStep/MaterialFileUploadStep/MaterialFileUploadStep.module.css

@@ -32,6 +32,12 @@
     text-overflow: ellipsis;
 }
 
+.dragging {
+    border: 2px dashed currentColor;
+    border-radius: 10px;
+    opacity: 0.85;
+}
+
 .filesInput {
     display: none;
 }
@@ -41,6 +47,16 @@
     margin-bottom: 3px;
     width: fit-content;
 }
+.dragHint {
+    font-size: 0.75rem;
+    margin-left: 14px;
+    margin-top: 4px;
+    opacity: 0.8;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
 .errorMsg {
     font-size: 0.75rem;
     margin-top: 5px;