@arquimedes.co/eureka-forms 3.0.70 → 3.0.71

package/dist/FormSteps/AYFStepMapper.js

@@ -7,6 +7,7 @@ import axios from 'axios';
 import CalendarIcon from '../Icons/CalendarIcon';
 import LocationIcon from '../Icons/LocationIcon';
 import FileIcon from '../Icons/FileIcon';
+import { ciudadesICAQuery } from './ciudadesICAQuery';
 const baseUrl = `https://api.integrations.${import.meta.env.VITE_REACT_APP_DOMAIN}/sinco/ayf/`;
 function AYFStepMapper(props) {
     // eslint-disable-next-line @typescript-eslint/require-await
@@ -29,30 +30,7 @@ function AYFStepMapper(props) {
     const getCiudadesOptions = async (step, dependencyStore, { idOrganization }) => {
         if (!idOrganization)
             return null;
-        const nit = dependencyStore[step.idNitStep]?.value;
-        const params = new URLSearchParams({
-            idOrganization,
-            idCompany: nit,
-            nit: 'true',
-        });
-        for (const dep of step.dependencies ?? []) {
-            const value = dependencyStore[dep]?.value;
-            if (value && dep.startsWith('AYF')) {
-                switch (dep.split('-')?.[0]) {
-                    case AYFFormStepTypes.AYF_START_MONTH:
-                        params.set('startMonth', value.id);
-                        break;
-                    case AYFFormStepTypes.AYF_END_MONTH:
-                        params.set('endMonth', value.id);
-                        break;
-                    case AYFFormStepTypes.AYF_YEAR:
-                        params.set('year', value);
-                        break;
-                    default:
-                        break;
-                }
-            }
-        }
+        const params = ciudadesICAQuery(step, dependencyStore, idOrganization);
         try {
             return (await axios.get(baseUrl + 'CiudadesICA?' + params.toString())).data;
             // eslint-disable-next-line @typescript-eslint/no-unused-vars

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useFormContext } from 'react-hook-form';
 import ErkSmartSelect from '../../../Shared/ErkSmartSelect/ErkSmartSelect';
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import React from 'react';
 import FormContext from '../../../Contexts/FormContext';
 import { useAppDispatch, useAppSelector } from '../../../hooks';
@@ -28,6 +28,11 @@ function SmartSelectStep({ step, editable, getOptions, calcDepError, defaultValu
     const [loading, setLoading] = useState(false);
     const [firstTime, setFirstTime] = useState(true);
     const [touched, setTouched] = useState(false);
+    /**
+     * Every dependency change (each keystroke of a NIT, say) starts a new request without cancelling the
+     * ones in flight, and they can resolve in any order. Only the latest request may touch the options.
+     */
+    const lastRequest = useRef(0);
     const dispatch = useAppDispatch();
     const allDeps = useMemo(() => [...(step.dependencies ?? []), ...getOptionalDependencies(step)], [getOptionalDependencies, step]);
     const idDependencies = useMemo(() => getOptionsConditionsIdSteps(step), [getOptionsConditionsIdSteps, step]);
@@ -52,6 +57,7 @@ function SmartSelectStep({ step, editable, getOptions, calcDepError, defaultValu
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [allDepsValues]);
     const calcOptions = async (firstTime) => {
+        const request = ++lastRequest.current;
         if (!firstTime)
             setOptions(undefined);
         if (value && !firstTime)
@@ -61,6 +67,8 @@ function SmartSelectStep({ step, editable, getOptions, calcDepError, defaultValu
                 idOrganization,
                 idCurrentAgent: postview ? undefined : idCurrentAgent,
             });
+            if (request !== lastRequest.current)
+                return;
             if (value) {
                 /** If the value is still valid select it */
                 if (resp && getValueString(value) !== undefined) {
@@ -82,6 +90,8 @@ function SmartSelectStep({ step, editable, getOptions, calcDepError, defaultValu
             }
         }
         catch (error) {
+            if (request !== lastRequest.current)
+                return;
             console.error(error);
             setOptions(null);
         }

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

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/FormSteps/SmartSelectStep/SmartSelectStep.staleOptions.test.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { act, render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import '@testing-library/jest-dom';
+import { Provider } from 'react-redux';
+import { FormProvider, useForm } from 'react-hook-form';
+import { configureStore } from '@reduxjs/toolkit';
+import { EurekaFormsReducer, defaultRootState } from '../../Utils/store';
+import { RootApi } from '../../Utils/_api';
+import FormStepTypes from '../../constants/FormStepTypes';
+import { StoreContext } from '../../Utils/StoreContext';
+import FormContext, { IdFormContext } from '../../Contexts/FormContext';
+import SectionContext from '../../Contexts/SectionContext';
+import MaterialProviders from '../../Utils/MaterialProviders';
+import InternalFormStyle from '../../constants/InternalFormStyle';
+import { setStepDependency } from '../../States/SiteSlice';
+import SmartSelectStep from './SmartSelectStep';
+const ID_FORM = 'STALE_OPTIONS_FORM';
+const nitStep = {
+    id: 'nit-step',
+    idSection: 'SECTION_1',
+    stepPath: ['nit-step'],
+    type: FormStepTypes.TEXTINPUT,
+    label: 'NIT',
+    description: '',
+    required: true,
+    size: 1,
+    maxLength: 20,
+};
+/** A city-like selector whose options come from the NIT the user is still typing. */
+const cityStep = {
+    id: 'city-step',
+    idSection: 'SECTION_1',
+    stepPath: ['city-step'],
+    type: 'AYF_ICA_CITY',
+    label: 'Ciudad',
+    description: '',
+    showIcon: false,
+    required: false,
+    searchable: false,
+    size: 1,
+    dependencies: ['nit-step'],
+};
+const form = {
+    firstSection: 'SECTION_1',
+    sections: {
+        SECTION_1: { id: 'SECTION_1', name: 'Sección 1', steps: ['nit-step', 'city-step'], nextSection: null },
+    },
+    steps: { 'nit-step': nitStep, 'city-step': cityStep },
+    confirmationMessage: { blocks: [], entityMap: {} },
+    showLink: false,
+    size: { blockSize: 200, blockNum: 4, spacingSize: 10 },
+};
+const dependencies = {
+    'nit-step': { idOriginal: 'nit-step', dependents: [cityStep], value: '', type: FormStepTypes.TEXTINPUT },
+};
+function makeStore() {
+    return configureStore({
+        reducer: { forms: EurekaFormsReducer, [RootApi.reducerPath]: RootApi.reducer },
+        preloadedState: {
+            forms: { [ID_FORM]: { ...defaultRootState, site: { ...defaultRootState.site, dependencies } } },
+        },
+        middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(RootApi.middleware),
+    });
+}
+function Harness({ store, requests }) {
+    const methods = useForm({ mode: 'onTouched' });
+    return (_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(Provider, { store: store, context: StoreContext, children: _jsx(IdFormContext.Provider, { value: ID_FORM, children: _jsx(FormContext.Provider, { value: form, children: _jsx(SectionContext.Provider, { value: "SECTION_1", children: _jsx(FormProvider, { ...methods, children: _jsx(SmartSelectStep, { step: cityStep, editable: true, getOptions: (_step, deps) => new Promise((resolve) => {
+                                    requests.push({ nit: deps['nit-step']?.value, resolve });
+                                }), getOptionSelected: (option, value) => option === value, getValueString: (value) => value }) }) }) }) }) }) }));
+}
+const optionTexts = () => Array.from(document.querySelectorAll('[role=option]')).map((option) => option.textContent ?? '');
+describe('SmartSelectStep when a dependency changes faster than its options load', () => {
+    it('keeps the options of the latest dependency value when an older request resolves last', async () => {
+        const store = makeStore();
+        const requests = [];
+        render(_jsx(Harness, { store: store, requests: requests }));
+        const typeNit = (value) => {
+            act(() => {
+                store.dispatch({ ...setStepDependency({ step: nitStep, value }), meta: { idForm: ID_FORM } });
+            });
+        };
+        typeNit('9');
+        typeNit('901379420');
+        const byNit = (nit) => requests.find((request) => request.nit === nit);
+        expect(byNit('9')).toBeDefined();
+        expect(byNit('901379420')).toBeDefined();
+        // The full NIT answers first with cities; the partial NIT straggles in afterwards with nothing.
+        const settle = (pending, options) => act(async () => {
+            pending.resolve(options);
+            await Promise.resolve();
+        });
+        await settle(byNit('901379420'), ['BELLO', 'MEDELLIN']);
+        await settle(byNit('9'), []);
+        act(() => {
+            document.querySelector('[role=combobox]').dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+        });
+        expect(optionTexts()).toEqual(expect.arrayContaining(['BELLO', 'MEDELLIN']));
+    });
+});

package/dist/FormSteps/ciudadesICAQuery.d.ts

@@ -0,0 +1,8 @@
+import { GSmartSelect } from '../@Types/GenericFormSteps';
+import { DependencyStore } from '../Form/Form';
+/**
+ * Query for `CiudadesICA`. The NIT dependency is `null` until the user types it; it must be left out of the
+ * query rather than serialised as the text "null", which the integrations API would take as a real NIT (and
+ * SINCO answers that with no cities instead of the organisation's main city).
+ */
+export declare function ciudadesICAQuery(step: GSmartSelect, dependencyStore: DependencyStore, idOrganization: string): URLSearchParams;

package/dist/FormSteps/ciudadesICAQuery.js

@@ -0,0 +1,31 @@
+import AYFFormStepTypes from '../constants/AYFFormStepTypes';
+/**
+ * Query for `CiudadesICA`. The NIT dependency is `null` until the user types it; it must be left out of the
+ * query rather than serialised as the text "null", which the integrations API would take as a real NIT (and
+ * SINCO answers that with no cities instead of the organisation's main city).
+ */
+export function ciudadesICAQuery(step, dependencyStore, idOrganization) {
+    const params = new URLSearchParams({ idOrganization, nit: 'true' });
+    const nit = dependencyStore[step.idNitStep]?.value;
+    if (nit)
+        params.set('idCompany', nit);
+    for (const dep of step.dependencies ?? []) {
+        const value = dependencyStore[dep]?.value;
+        if (value && dep.startsWith('AYF')) {
+            switch (dep.split('-')?.[0]) {
+                case AYFFormStepTypes.AYF_START_MONTH:
+                    params.set('startMonth', value.id);
+                    break;
+                case AYFFormStepTypes.AYF_END_MONTH:
+                    params.set('endMonth', value.id);
+                    break;
+                case AYFFormStepTypes.AYF_YEAR:
+                    params.set('year', value);
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+    return params;
+}

package/dist/FormSteps/ciudadesICAQuery.test.d.ts

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

package/dist/FormSteps/ciudadesICAQuery.test.js

@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest';
+import AYFFormStepTypes from '../constants/AYFFormStepTypes';
+import FormStepTypes from '../constants/FormStepTypes';
+import { ciudadesICAQuery } from './ciudadesICAQuery';
+const cityStep = {
+    id: 'AYF_ICA_CITY-1',
+    idSection: 'SECTION_1',
+    stepPath: ['AYF_ICA_CITY-1'],
+    type: AYFFormStepTypes.AYF_ICA_CITY,
+    label: 'Ciudad',
+    description: '',
+    showIcon: false,
+    required: false,
+    size: 1,
+    idNitStep: 'TEXTINPUT-nit',
+    dependencies: ['TEXTINPUT-nit', 'AYF_YEAR-1'],
+};
+const storeWithNit = (value) => ({
+    'TEXTINPUT-nit': { idOriginal: 'TEXTINPUT-nit', dependents: [], value, type: FormStepTypes.TEXTINPUT },
+    'AYF_YEAR-1': { idOriginal: 'AYF_YEAR-1', dependents: [], value: '2026', type: AYFFormStepTypes.AYF_YEAR },
+});
+describe('ciudadesICAQuery', () => {
+    it('sends the NIT as idCompany once the user has typed it', () => {
+        const params = ciudadesICAQuery(cityStep, storeWithNit('901379420'), 'casa');
+        expect(params.get('idCompany')).toBe('901379420');
+        expect(params.get('nit')).toBe('true');
+        expect(params.get('year')).toBe('2026');
+    });
+    /**
+     * The NIT dependency is `null` until the user types something. Serialising that as the text "null"
+     * makes the integrations API query SINCO for a provider literally called "null", which answers with no
+     * cities instead of the organisation's main city.
+     */
+    it.each([null, undefined, ''])('omits idCompany while the NIT is %s', (nit) => {
+        const params = ciudadesICAQuery(cityStep, storeWithNit(nit), 'casa');
+        expect(params.has('idCompany')).toBe(false);
+        expect(params.get('idOrganization')).toBe('casa');
+    });
+});

package/dist/Shared/ErkSmartSelect/ErkSmartSelect.js

@@ -5,6 +5,8 @@ import { StyledTextField } from '../ErkTextField/ErkTextField';
 import ErkMenuItem from '../ErkMenuItem';
 import ErkAutocompleteOption from '../ErkAutocompleteOption';
 const filter = createFilterOptions();
+/** Options are either `{ label }` objects or plain strings that are their own label (e.g. the ICA cities). */
+const calcOptionLabel = (option) => (typeof option === 'string' ? option : (option?.label ?? ''));
 const StyledAutoComplete = styled(MuiAutocomplete)(({ theme, readOnly, ...props }) => ({
     '& .Erk-MuiInputBase-root': {
         cursor: props.disabled || readOnly ? 'default' : 'text',
@@ -35,21 +37,9 @@ export default function ErkSmartSelect({ options, value = '', onChange, label, g
                 else {
                     return filter(options, params);
                 }
-            }, renderOption: ({ key, ...props }, option, state) => (_jsx(ErkAutocompleteOption, { ...props, selected: state.selected, children: option.label }, key)), getOptionKey: (option) => getValueString(option), getOptionLabel: (option) => {
-                // Value selected with enter, right from the input
-                if (typeof option === 'string') {
-                    return option;
-                }
-                else if (option?.inputValue) {
-                    return option.inputValue ?? '';
-                }
-                else {
-                    // Regular option
-                    return option?.label ?? '';
-                }
-            }, slotProps: { popper: { sx: { zIndex: 1305 } } }, renderInput: (params) => (_jsx(StyledTextField, { ...params, size: size, label: label, labelMargin: 0, name: others.name, readOnly: readOnly, disabled: disabled, inputRef: inputRef, error: others.error, onBlur: others.onBlur, required: others.required, helperText: others.helperText })) }));
+            }, renderOption: ({ key, ...props }, option, state) => (_jsx(ErkAutocompleteOption, { ...props, selected: state.selected, children: calcOptionLabel(option) }, key)), getOptionKey: (option) => getValueString(option), getOptionLabel: (option) => option?.inputValue ?? calcOptionLabel(option), slotProps: { popper: { sx: { zIndex: 1305 } } }, renderInput: (params) => (_jsx(StyledTextField, { ...params, size: size, label: label, labelMargin: 0, name: others.name, readOnly: readOnly, disabled: disabled, inputRef: inputRef, error: others.error, onBlur: others.onBlur, required: others.required, helperText: others.helperText })) }));
     }
     else {
-        return (_jsxs(ErkSelect, { ...others, labelMargin: 0, disabled: disabled, readOnly: readOnly, inputRef: inputRef, onChange: (value) => onChange?.(options?.find((option) => getValueString(option) === value)), value: loading ? '' : getValueString(value), label: label, IconComponent: loading ? () => _jsx(CircularProgress, { size: 22 }) : IconComponent, children: [options?.map((option) => (_jsx(ErkMenuItem, { value: getValueString(option), "data-testid": 'smart-select-' + getValueString(option), children: option.label }, getValueString(option)))), options === undefined && value && !loading && (_jsx(ErkMenuItem, { value: getValueString(value), children: value.label ?? '' }, getValueString(value)))] }));
+        return (_jsxs(ErkSelect, { ...others, labelMargin: 0, disabled: disabled, readOnly: readOnly, inputRef: inputRef, onChange: (value) => onChange?.(options?.find((option) => getValueString(option) === value)), value: loading ? '' : getValueString(value), label: label, IconComponent: loading ? () => _jsx(CircularProgress, { size: 22 }) : IconComponent, children: [options?.map((option) => (_jsx(ErkMenuItem, { value: getValueString(option), "data-testid": 'smart-select-' + getValueString(option), children: calcOptionLabel(option) }, getValueString(option)))), options === undefined && value && !loading && (_jsx(ErkMenuItem, { value: getValueString(value), children: calcOptionLabel(value) }, getValueString(value)))] }));
     }
 }

package/dist/Shared/ErkSmartSelect/ErkSmartSelect.test.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 import '@testing-library/jest-dom';
@@ -31,3 +31,23 @@ describe('ErkSmartSelect (searchable)', () => {
         expect(await screen.findByRole('option', { name: 'Uno' })).toHaveAttribute('aria-selected', 'true');
     });
 });
+/** Steps such as the ICA city selector feed plain strings; the string is both the value and the label. */
+const cities = ['BELLO', 'MEDELLIN'];
+const cityString = (value) => value;
+describe('ErkSmartSelect with plain-string options', () => {
+    it('searchable: shows each string as the option text', async () => {
+        const user = userEvent.setup();
+        render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkSmartSelect, { searchable: true, label: "Ciudad", options: cities, value: "", onChange: () => { }, getValueString: cityString }) }));
+        await user.click(screen.getByRole('combobox'));
+        expect(await screen.findByRole('option', { name: 'BELLO' })).toBeInTheDocument();
+        expect(screen.getByRole('option', { name: 'MEDELLIN' })).toBeInTheDocument();
+    });
+    it('non-searchable: shows each string as the option text', () => {
+        render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkSmartSelect, { searchable: false, label: "Ciudad", options: cities, value: "", onChange: () => { }, getValueString: cityString }) }));
+        // The inline (disablePortal) menu marks the rest of the tree aria-hidden while open, so the
+        // options are read from the raw DOM instead of through role queries.
+        fireEvent.mouseDown(document.querySelector('[role=combobox]'));
+        expect(document.querySelector('[role=option][data-value=BELLO]')).toHaveTextContent('BELLO');
+        expect(document.querySelector('[role=option][data-value=MEDELLIN]')).toHaveTextContent('MEDELLIN');
+    });
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arquimedes.co/eureka-forms",
   "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-  "version": "3.0.70",
+  "version": "3.0.71",
   "scripts": {
     "watch": "node node_modules/@typescript/native/bin/tsc --noEmit --watch --project tsconfig.app.json",
     "start": "vite",