@arquimedes.co/eureka-forms 3.0.68-test → 3.0.69

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

@@ -0,0 +1,108 @@
+/**
+ * NumericFormSteps types
+ * Cubre el paso relacionado con números y sus múltiples subtipos.
+ */
+import { GBaseStep } from './GenericFormSteps';
+import FormStepTypes from '../constants/FormStepTypes';
+/** Subtipo del paso numérico — discriminante secundario */
+export declare enum NumberStepType {
+    INTEGER = "INTEGER",
+    DECIMAL = "DECIMAL",
+    PERCENTAGE = "PERCENTAGE",
+    /** Monto de dinero en una divisa (ej: 1500 COP). */
+    MONEY = "MONEY",
+    /** Magnitud con unidad de medida (ej: 5 kg). */
+    MEASURE = "MEASURE",
+    /** Precio por unidad: divisa sobre unidad (ej: 20 USD / hora). */
+    UNIT_PRICE = "UNIT_PRICE"
+}
+/** Campos base compartidos por todos los subtipos numéricos */
+interface GNumberStep extends GBaseStep {
+    type: FormStepTypes.NUMBER;
+    numberType: NumberStepType;
+    label: string;
+    description: string | null;
+    required: boolean;
+    min?: number;
+    max?: number;
+    /** Cantidad de decimales permitidos (0 = entero). Default: 2 */
+    decimals?: number;
+    /** Sufijo de unidad estático que se muestra junto al valor (solo visual, no afecta el número guardado). */
+    suffix?: string;
+    /**
+     * Mostrar u ocultar los botones +/− de incremento/decremento.
+     * Default: true
+     */
+    spinner?: boolean;
+    /**
+     * Tamaño de cada incremento/decremento al usar los botones o las flechas del teclado.
+     * Útil para monedas (0.01), cantidades grandes (100) o porcentajes (5).
+     * Default: 1
+     */
+    step?: number;
+    /** Texto de placeholder del campo numérico. */
+    placeholder?: string;
+    size: 1 | 2 | 3 | 4;
+}
+export interface IntegerStep extends GNumberStep {
+    numberType: NumberStepType.INTEGER;
+    /** Siempre 0 para enteros, pero puede dejarse undefined */
+    decimals?: 0;
+    defaultValue?: number;
+}
+export interface DecimalStep extends GNumberStep {
+    numberType: NumberStepType.DECIMAL;
+    defaultValue?: number;
+}
+export interface PercentageStep extends GNumberStep {
+    numberType: NumberStepType.PERCENTAGE;
+    defaultValue?: number;
+}
+export interface MoneyStep extends GNumberStep {
+    numberType: NumberStepType.MONEY;
+    /** Moneda fija (ej: "COP", "USD", "EUR") */
+    currency?: string;
+    allowCurrencyChange?: boolean;
+    availableCurrencies?: string[];
+    defaultValue?: MoneyValue | null;
+}
+export interface MeasureStep extends GNumberStep {
+    numberType: NumberStepType.MEASURE;
+    /** Unidad fija (ej: "kg", "m", "hrs") */
+    unit?: string;
+    allowUnitChange?: boolean;
+    availableUnits?: string[];
+    defaultValue?: MeasureValue | null;
+}
+export interface UnitPriceStep extends GNumberStep {
+    numberType: NumberStepType.UNIT_PRICE;
+    /** Moneda del precio (ej: "USD") */
+    currency?: string;
+    /** Unidad base del precio (ej: "hrs", "km", "mes") */
+    unit?: string;
+    allowCurrencyChange?: boolean;
+    allowUnitChange?: boolean;
+    availableCurrencies?: string[];
+    availableUnits?: string[];
+    defaultValue?: UnitPriceValue | null;
+}
+/** Unión discriminada del paso NUMBER — narrowing por numberType */
+export type NumberStep = IntegerStep | DecimalStep | PercentageStep | MoneyStep | MeasureStep | UnitPriceStep;
+export type IntegerValue = number;
+export type DecimalValue = number;
+export type PercentageValue = number;
+export interface MoneyValue {
+    value: number;
+    currency: string;
+}
+export interface MeasureValue {
+    value: number;
+    unit: string;
+}
+export interface UnitPriceValue {
+    value: number;
+    currency: string;
+    unit: string;
+}
+export type NumberStepValue = number | MoneyValue | MeasureValue | UnitPriceValue;
+export {};

package/dist/@Types/NumericFormSteps.js

@@ -0,0 +1,20 @@
+/**
+ * NumericFormSteps types
+ * Cubre el paso relacionado con números y sus múltiples subtipos.
+ */
+// ===========================================================================
+// NUMBER
+// ===========================================================================
+/** Subtipo del paso numérico — discriminante secundario */
+export var NumberStepType;
+(function (NumberStepType) {
+    NumberStepType["INTEGER"] = "INTEGER";
+    NumberStepType["DECIMAL"] = "DECIMAL";
+    NumberStepType["PERCENTAGE"] = "PERCENTAGE";
+    /** Monto de dinero en una divisa (ej: 1500 COP). */
+    NumberStepType["MONEY"] = "MONEY";
+    /** Magnitud con unidad de medida (ej: 5 kg). */
+    NumberStepType["MEASURE"] = "MEASURE";
+    /** Precio por unidad: divisa sobre unidad (ej: 20 USD / hora). */
+    NumberStepType["UNIT_PRICE"] = "UNIT_PRICE";
+})(NumberStepType || (NumberStepType = {}));

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

@@ -0,0 +1,51 @@
+/**
+ * DRAFT — PredefinedSelectorFormStep types
+ *
+ * Paso que reemplaza tener que configurar manualmente opciones de selectores
+ * para listas fijas y controladas por Capta (países, ciudades, monedas, etc.).
+ * Las opciones vienen de APIs internas — el formulario no necesita configurarlas.
+ *
+ * También resuelve la cascada Country → State → City via parentStepId.
+ */
+import { GSmartSelect } from './GenericFormSteps';
+export declare enum PredefinedOptionType {
+    /** ISO 3166-1 — lista de países */
+    COUNTRY = "COUNTRY",
+    /**
+     * Departamento / provincia / estado.
+     * Requiere parentStepId apuntando a un step COUNTRY.
+     */
+    STATE = "STATE",
+    /**
+     * Ciudad / municipio.
+     * Requiere parentStepId apuntando a un step STATE (o COUNTRY si no hay STATE).
+     */
+    CITY = "CITY",
+    /** ISO 4217 — monedas (USD, COP, EUR, etc.) */
+    CURRENCY = "CURRENCY",
+    /** BCP 47 — idiomas (es, en, pt, etc.) */
+    LANGUAGE = "LANGUAGE",
+    /** Tipos de canal de comunicación (WhatsApp, Email, Teléfono) */
+    COMMUNICATION_CHANNEL_TYPE = "COMMUNICATION_CHANNEL_TYPE",
+    /** Tipos de documento de identidad por país (CC, NIT, Pasaporte, etc.) */
+    DOCUMENT_TYPE = "DOCUMENT_TYPE",
+    /** Días de la semana */
+    DAY_OF_WEEK = "DAY_OF_WEEK",
+    /** Meses del año */
+    MONTH = "MONTH"
+}
+export interface PredefinedSelectorStep extends GSmartSelect {
+    type: 'PREDEFINED_SELECTOR';
+    predefinedType: PredefinedOptionType;
+    /**
+     * Solo para STATE y CITY: id del step padre que filtra las opciones.
+     *   - COUNTRY step → filtra estados del país seleccionado
+     *   - STATE step   → filtra ciudades del estado seleccionado
+     *
+     * Si no se especifica, se listan todas las opciones sin filtrar.
+     */
+    parentStepId?: string;
+    maxSize?: number;
+    defaultValue?: string;
+}
+export type PredefinedSelectorValue = string;

package/dist/@Types/PredefinedSelectorFormStep.js

@@ -0,0 +1,39 @@
+/**
+ * DRAFT — PredefinedSelectorFormStep types
+ *
+ * Paso que reemplaza tener que configurar manualmente opciones de selectores
+ * para listas fijas y controladas por Capta (países, ciudades, monedas, etc.).
+ * Las opciones vienen de APIs internas — el formulario no necesita configurarlas.
+ *
+ * También resuelve la cascada Country → State → City via parentStepId.
+ */
+// ===========================================================================
+// Tipos predefinidos disponibles
+// ===========================================================================
+export var PredefinedOptionType;
+(function (PredefinedOptionType) {
+    /** ISO 3166-1 — lista de países */
+    PredefinedOptionType["COUNTRY"] = "COUNTRY";
+    /**
+     * Departamento / provincia / estado.
+     * Requiere parentStepId apuntando a un step COUNTRY.
+     */
+    PredefinedOptionType["STATE"] = "STATE";
+    /**
+     * Ciudad / municipio.
+     * Requiere parentStepId apuntando a un step STATE (o COUNTRY si no hay STATE).
+     */
+    PredefinedOptionType["CITY"] = "CITY";
+    /** ISO 4217 — monedas (USD, COP, EUR, etc.) */
+    PredefinedOptionType["CURRENCY"] = "CURRENCY";
+    /** BCP 47 — idiomas (es, en, pt, etc.) */
+    PredefinedOptionType["LANGUAGE"] = "LANGUAGE";
+    /** Tipos de canal de comunicación (WhatsApp, Email, Teléfono) */
+    PredefinedOptionType["COMMUNICATION_CHANNEL_TYPE"] = "COMMUNICATION_CHANNEL_TYPE";
+    /** Tipos de documento de identidad por país (CC, NIT, Pasaporte, etc.) */
+    PredefinedOptionType["DOCUMENT_TYPE"] = "DOCUMENT_TYPE";
+    /** Días de la semana */
+    PredefinedOptionType["DAY_OF_WEEK"] = "DAY_OF_WEEK";
+    /** Meses del año */
+    PredefinedOptionType["MONTH"] = "MONTH";
+})(PredefinedOptionType || (PredefinedOptionType = {}));

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

@@ -0,0 +1,135 @@
+/**
+ * DRAFT — Sistema de referencias dinámicas entre steps
+ *
+ * Permite que la configuración de un paso use el valor en tiempo de ejecución
+ * de otro step del mismo formulario, en lugar de un literal fijo.
+ *
+ * Patrón de uso:
+ *
+ *   // Valor fijo definido en la configuración del formulario
+ *   suffix: { type: 'FIXED', value: 'km' }
+ *
+ *   // Valor tomado del step 'step_unidad' cuando el usuario interactúa
+ *   suffix: { type: 'STEP_REF', idStep: 'step_unidad', fallback: 'm' }
+ *
+ * Se puede aplicar a cualquier campo de configuración cuyo valor deba
+ * responder a la selección previa del usuario: sufijos, unidades, monedas,
+ * títulos dinámicos, límites numéricos, etc.
+ */
+/**
+ * Representa un valor estático/literal configurado en tiempo de diseño.
+ * No cambia dinámicamente según las respuestas del usuario.
+ *
+ * @typeParam T - Tipo de dato del valor estático.
+ */
+export interface FixedRef<T> {
+    /**
+     * Indica que el valor es fijo.
+     */
+    type: 'FIXED';
+    /**
+     * El valor estático de tipo T.
+     * @example "km"
+     * @example 50
+     */
+    value: T;
+}
+/**
+ * Referencia dinámica al valor actual de otro step en el mismo formulario.
+ * El runtime del formulario sustituye esta referencia por el valor que el usuario
+ * haya ingresado en el step indicado.
+ *
+ * @typeParam TAllowed - Literal(es) de tipo de step permitidos como origen.
+ *   Por defecto es `string` (cualquier tipo de step). Pasar un literal union
+ *   permite al Form Builder filtrar la lista de steps disponibles en la UI.
+ *
+ * @example
+ * ```ts
+ * // Referencia a cualquier tipo de step
+ * const ref: StepRef = {
+ *   type: 'STEP_REF',
+ *   idStep: 'step_unidad_medida',
+ *   fallback: 'm'
+ * }
+ *
+ * // Referencia restringida únicamente a pasos de tipo LOCATION
+ * const refLocation: StepRef<'LOCATION'> = {
+ *   type: 'STEP_REF',
+ *   idStep: 'step_destino_cliente',
+ *   allowedStepTypes: ['LOCATION']
+ * }
+ * ```
+ */
+export interface StepRef<TAllowed extends string = string> {
+    /**
+     * Indica que el valor se toma dinámicamente de otro paso.
+     */
+    type: 'STEP_REF';
+    /**
+     * ID del paso origen en el formulario del cual se leerá el valor en tiempo de ejecución.
+     * @example "step_ubicacion_cliente"
+     */
+    idStep: string;
+    /**
+     * Valor de respaldo (fallback) en formato de texto a utilizar mientras el paso referenciado
+     * no contenga ningún valor (ej: porque el usuario aún no llega a ese paso).
+     * Si se omite, el campo referenciador se comportará como vacío o sin unidad.
+     *
+     * @example "m"
+     */
+    fallback?: string;
+    /**
+     * Lista de tipos de pasos permitidos para esta referencia.
+     * Ayuda al Form Builder a filtrar la interfaz de selección de campos y es
+     * validada por el backend al guardar la configuración del formulario.
+     * Si no se define, se permite referenciar cualquier tipo de paso.
+     *
+     * @example ["LOCATION"]
+     * @example ["PREDEFINED_SELECTOR", "CHECKBOX"]
+     */
+    allowedStepTypes?: TAllowed[];
+}
+/**
+ * Tipo genérico para campos que admiten tanto un valor estático como una referencia dinámica.
+ *
+ * @typeParam T - Tipo del valor cuando es FIXED (ej: `string`, `number`, `boolean`).
+ * @typeParam TAllowed - Tipos de paso de origen permitidos si es STEP_REF.
+ *
+ * @example
+ * ```ts
+ * // Un sufijo de texto dinámico:
+ * const sufijo: DynamicRef<string> = { type: 'FIXED', value: 'km' };
+ *
+ * // Una coordenada geográfica que debe venir de un paso de mapa:
+ * const origen: DynamicRef<LocationCoords, 'LOCATION'> = {
+ *   type: 'STEP_REF',
+ *   idStep: 'step_mapa_inicio',
+ *   allowedStepTypes: ['LOCATION']
+ * };
+ * ```
+ */
+export type DynamicRef<T, TAllowed extends string = string> = FixedRef<T> | StepRef<TAllowed>;
+/**
+ * Comprueba si la referencia dinámica recibida es de tipo FIXED.
+ * Funciona como Type Guard para TypeScript.
+ *
+ * @example
+ * ```ts
+ * if (isFixedRef(miRef)) {
+ *   console.log("El valor es:", miRef.value);
+ * }
+ * ```
+ */
+export declare function isFixedRef<T, TAllowed extends string = string>(ref: DynamicRef<T, TAllowed>): ref is FixedRef<T>;
+/**
+ * Comprueba si la referencia dinámica recibida es de tipo STEP_REF.
+ * Funciona como Type Guard para TypeScript.
+ *
+ * @example
+ * ```ts
+ * if (isStepRef(miRef)) {
+ *   console.log("Apunta al step:", miRef.idStep);
+ * }
+ * ```
+ */
+export declare function isStepRef<T, TAllowed extends string = string>(ref: DynamicRef<T, TAllowed>): ref is StepRef<TAllowed>;

package/dist/@Types/StepRef.js

@@ -0,0 +1,49 @@
+/**
+ * DRAFT — Sistema de referencias dinámicas entre steps
+ *
+ * Permite que la configuración de un paso use el valor en tiempo de ejecución
+ * de otro step del mismo formulario, en lugar de un literal fijo.
+ *
+ * Patrón de uso:
+ *
+ *   // Valor fijo definido en la configuración del formulario
+ *   suffix: { type: 'FIXED', value: 'km' }
+ *
+ *   // Valor tomado del step 'step_unidad' cuando el usuario interactúa
+ *   suffix: { type: 'STEP_REF', idStep: 'step_unidad', fallback: 'm' }
+ *
+ * Se puede aplicar a cualquier campo de configuración cuyo valor deba
+ * responder a la selección previa del usuario: sufijos, unidades, monedas,
+ * títulos dinámicos, límites numéricos, etc.
+ */
+// ---------------------------------------------------------------------------
+// Helpers de narrowing
+// ---------------------------------------------------------------------------
+/**
+ * Comprueba si la referencia dinámica recibida es de tipo FIXED.
+ * Funciona como Type Guard para TypeScript.
+ *
+ * @example
+ * ```ts
+ * if (isFixedRef(miRef)) {
+ *   console.log("El valor es:", miRef.value);
+ * }
+ * ```
+ */
+export function isFixedRef(ref) {
+    return ref.type === 'FIXED';
+}
+/**
+ * Comprueba si la referencia dinámica recibida es de tipo STEP_REF.
+ * Funciona como Type Guard para TypeScript.
+ *
+ * @example
+ * ```ts
+ * if (isStepRef(miRef)) {
+ *   console.log("Apunta al step:", miRef.idStep);
+ * }
+ * ```
+ */
+export function isStepRef(ref) {
+    return ref.type === 'STEP_REF';
+}

package/dist/App/App.stories.d.ts

@@ -28,3 +28,13 @@ export declare const ParseadoConValores: Story;
 export declare const PreParseado: Story;
 /** Final view (postview): what the user submitted, rendered read-only. */
 export declare const Postview: Story;
+/**
+ * Every checkbox variant in one form: sizes 1–4, required, description, list mode, long
+ * labels, nested `steps` / `uncheckedSteps`, and a checkbox inside a collapsible. Resize the
+ * preview below ~900px to see the collapsed label mode (100% width, 1-line clamp, "ver más").
+ * Inside the collapsible, close/reopen it and then check the checkbox to reproduce the clipped
+ * nested steps.
+ */
+export declare const Checkboxes: Story;
+/** Same checkboxes form in postview, read-only. */
+export declare const CheckboxesPostview: Story;

package/dist/App/App.stories.js

@@ -296,3 +296,192 @@ export const Postview = {
         editable: false,
     },
 };
+// ---------------------------------------------------------------------------------------------
+// Checkboxes: a full form exercising every checkbox variant side by side (sizes, required,
+// description, list mode, long label, nested steps, uncheckedSteps and a checkbox inside a
+// collapsible). Resize the preview to see the collapsed (100% width, 1-line clamp) label mode.
+// ---------------------------------------------------------------------------------------------
+const cbTextInput = (id, label, size = 2) => ({
+    id,
+    type: 'TEXTINPUT',
+    label,
+    description: '',
+    required: false,
+    size,
+    isSubject: false,
+});
+const checkboxesForm = {
+    steps: {
+        'CHECKBOX-size-1': {
+            id: 'CHECKBOX-size-1',
+            type: 'CHECKBOX',
+            label: 'Tamaño 1',
+            description: null,
+            required: false,
+            size: 1,
+        },
+        'CHECKBOX-size-2': {
+            id: 'CHECKBOX-size-2',
+            type: 'CHECKBOX',
+            label: 'Tamaño 2 con descripción',
+            description: 'Texto de ayuda debajo del checkbox.',
+            required: false,
+            size: 2,
+        },
+        'CHECKBOX-size-1-required': {
+            id: 'CHECKBOX-size-1-required',
+            type: 'CHECKBOX',
+            label: 'Obligatorio',
+            description: null,
+            required: true,
+            size: 1,
+        },
+        'CHECKBOX-size-3': {
+            id: 'CHECKBOX-size-3',
+            type: 'CHECKBOX',
+            label: 'Tamaño 3 con un label bastante largo que en escritorio se corta con puntos suspensivos',
+            description: null,
+            required: false,
+            size: 3,
+        },
+        'CHECKBOX-size-1-checked': {
+            id: 'CHECKBOX-size-1-checked',
+            type: 'CHECKBOX',
+            label: 'Marcado',
+            description: null,
+            required: false,
+            size: 1,
+            defaultValue: true,
+        },
+        'CHECKBOX-size-4': {
+            id: 'CHECKBOX-size-4',
+            type: 'CHECKBOX',
+            label: 'Tamaño 4 (ancho completo): confirmo que la información suministrada es veraz, que he leído la ' +
+                'política de tratamiento de datos personales y autorizo el uso de mis datos para los fines ' +
+                'descritos en el presente formulario',
+            description: null,
+            required: true,
+            size: 4,
+        },
+        'CHECKBOX-list': {
+            id: 'CHECKBOX-list',
+            type: 'CHECKBOX',
+            label: 'Modo lista (isList): el checkbox va antes del label y sin dos puntos',
+            description: null,
+            required: false,
+            size: 4,
+            isList: true,
+        },
+        'CHECKBOX-nested': {
+            id: 'CHECKBOX-nested',
+            type: 'CHECKBOX',
+            label: '¿Desea agregar una dirección de envío distinta?',
+            description: 'Al marcarlo aparecen los campos de la dirección.',
+            required: false,
+            size: 4,
+            steps: ['TEXTINPUT-shipping-address', 'TEXTINPUT-shipping-city'],
+        },
+        'TEXTINPUT-shipping-address': cbTextInput('TEXTINPUT-shipping-address', 'Dirección de envío', 2),
+        'TEXTINPUT-shipping-city': cbTextInput('TEXTINPUT-shipping-city', 'Ciudad', 2),
+        'CHECKBOX-unchecked-steps': {
+            id: 'CHECKBOX-unchecked-steps',
+            type: 'CHECKBOX',
+            label: 'Usar los datos de contacto registrados',
+            description: 'Al desmarcarlo aparecen los campos de contacto (uncheckedSteps).',
+            required: false,
+            size: 4,
+            defaultValue: true,
+            uncheckedSteps: ['TEXTINPUT-contact-phone', 'TEXTINPUT-contact-email'],
+        },
+        'TEXTINPUT-contact-phone': cbTextInput('TEXTINPUT-contact-phone', 'Teléfono', 2),
+        'TEXTINPUT-contact-email': cbTextInput('TEXTINPUT-contact-email', 'Correo', 2),
+        'COLLAPSIBLE-checkbox': {
+            id: 'COLLAPSIBLE-checkbox',
+            type: 'COLLAPSIBLE',
+            label: 'Colapsable con checkbox anidado',
+            defaultValue: true,
+            steps: ['CHECKBOX-in-collapsible'],
+        },
+        'CHECKBOX-in-collapsible': {
+            id: 'CHECKBOX-in-collapsible',
+            type: 'CHECKBOX',
+            label: '¿Desea agregar información adicional?',
+            description: null,
+            required: false,
+            size: 4,
+            steps: ['TEXTINPUT-extra-1', 'TEXTINPUT-extra-2'],
+        },
+        'TEXTINPUT-extra-1': cbTextInput('TEXTINPUT-extra-1', 'Información adicional 1', 2),
+        'TEXTINPUT-extra-2': cbTextInput('TEXTINPUT-extra-2', 'Información adicional 2', 2),
+    },
+    size: { blockNum: 4, blockSize: 210, spacingSize: 20 },
+    rootSteps: [
+        'CHECKBOX-size-1',
+        'CHECKBOX-size-2',
+        'CHECKBOX-size-1-required',
+        'CHECKBOX-size-3',
+        'CHECKBOX-size-1-checked',
+        'CHECKBOX-size-4',
+        'CHECKBOX-list',
+        'CHECKBOX-nested',
+        'CHECKBOX-unchecked-steps',
+        'COLLAPSIBLE-checkbox',
+    ],
+    label: 'Enviar',
+    firstSection: 'FIRST',
+    sections: {
+        FIRST: {
+            id: 'FIRST',
+            steps: [
+                'CHECKBOX-size-1',
+                'CHECKBOX-size-2',
+                'CHECKBOX-size-1-required',
+                'CHECKBOX-size-3',
+                'CHECKBOX-size-1-checked',
+                'CHECKBOX-size-4',
+                'CHECKBOX-list',
+                'CHECKBOX-nested',
+                'CHECKBOX-unchecked-steps',
+                'COLLAPSIBLE-checkbox',
+            ],
+            name: '',
+            nextSection: null,
+        },
+    },
+};
+/**
+ * Every checkbox variant in one form: sizes 1–4, required, description, list mode, long
+ * labels, nested `steps` / `uncheckedSteps`, and a checkbox inside a collapsible. Resize the
+ * preview below ~900px to see the collapsed label mode (100% width, 1-line clamp, "ver más").
+ * Inside the collapsible, close/reopen it and then check the checkbox to reproduce the clipped
+ * nested steps.
+ */
+export const Checkboxes = {
+    args: {
+        formData: checkboxesForm,
+    },
+};
+/** Same checkboxes form in postview, read-only. */
+export const CheckboxesPostview = {
+    args: {
+        formData: checkboxesForm,
+        valuesData: {
+            'CHECKBOX-size-1': true,
+            'CHECKBOX-size-2': false,
+            'CHECKBOX-size-1-required': true,
+            'CHECKBOX-size-3': true,
+            'CHECKBOX-size-1-checked': true,
+            'CHECKBOX-size-4': true,
+            'CHECKBOX-list': true,
+            'CHECKBOX-nested': true,
+            'TEXTINPUT-shipping-address': 'Calle 123 # 45-67',
+            'TEXTINPUT-shipping-city': 'Bogotá',
+            'CHECKBOX-unchecked-steps': true,
+            'COLLAPSIBLE-checkbox': true,
+            'CHECKBOX-in-collapsible': false,
+        },
+        postview: true,
+        internal: true,
+        editable: false,
+    },
+};

package/dist/App/AppHooks.js

@@ -158,6 +158,14 @@ export const useSetupApp = (isEmbedded, props) => {
         idCurrentAgent,
         handleConfirmed,
     ]);
+    // The host may resolve the classifiers asynchronously (the admin fetches them while the form is
+    // already mounted). `loadData` only copies the prop it saw when it ran, so patch the form whenever a
+    // new dictionary arrives — without re-running the load, which would reset what the user typed.
+    useEffect(() => {
+        if (!classifiers || !form || form.classifiers === classifiers)
+            return;
+        setForm({ ...form, classifiers });
+    }, [classifiers, form]);
     const reload = useCallback(() => {
         if (!form)
             return;

package/dist/App/AppHooks.test.js

@@ -81,6 +81,14 @@ describe('AppHooks', function () {
             expect(result.current.organization).toBeNull();
             expect(result.current.branding).toBeUndefined();
         });
+        test('picks up classifiers that arrive after the first render', async () => {
+            const classifier = { _id: 'tipo', name: 'Tipo de solicitud', children: [] };
+            const { result, rerender } = renderHookWithProviders((props) => useSetupApp(false, { formData: BaseForm, internal: true, classifiers: props.classifiers }), { initialProps: { classifiers: {} } });
+            await waitFor(() => expect(result.current.form).toBeTruthy());
+            expect(result.current.form?.classifiers).toEqual({});
+            rerender({ classifiers: { tipo: classifier } });
+            await waitFor(() => expect(result.current.form?.classifiers?.tipo).toEqual(classifier));
+        });
         test('Apikey Default', async () => {
             mocks.get.mockImplementation((a) => {
                 if (a === '/organization') {

package/dist/Form/Form.js

@@ -6,7 +6,7 @@ import InternalFormStyle from '../constants/InternalFormStyle';
 import ColumnForm from './FormTypes/ColumnForm/ColumnForm';
 import StepperForm from './FormTypes/StepperForm/StepperForm';
 import { FormStyleTypes, FormTypes } from '../constants/FormStepTypes';
-import { calcValue } from './FormFunctions';
+import { calcValue, resolveCaptchaToken } from './FormFunctions';
 import { FormProvider, useForm } from 'react-hook-form';
 import widgetInstance from '../Utils/AxiosWidget';
 import axiosInstance from '../Utils/AxiosAPI';
@@ -38,15 +38,16 @@ function FormComponent({ form, apiKey, reload, isWidget, branding, setSubmit, sc
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [idFocusStep]);
     const onSubmit = useCallback(async (values) => {
-        let token = null;
-        if (form.hasCaptcha && !internal && !customSubmit) {
-            token = recaptchaRef.current?.getValue();
-            token ?? (token = await recaptchaRef?.current.executeAsync());
-        }
         const ApiKey = internal ? form.apiKey : apiKey;
         if (!ApiKey && !customSubmit && !customSubmitBtns)
             return;
         try {
+            // Resolved inside the try so a captcha that cannot mint a token surfaces through the same
+            // error path as any other submit failure, rather than rejecting out of the handler and
+            // leaving the submitter with no feedback at all.
+            const token = form.hasCaptcha && !internal && !customSubmit
+                ? await resolveCaptchaToken(recaptchaRef.current)
+                : null;
             const state = await dispatch(getAppState({ idForm })).unwrap();
             const newValues = {
                 ...state.site.values.global,