@arquimedes.co/eureka-forms 3.0.68 → 3.0.69

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

@@ -184,4 +184,14 @@ export interface BookingValue {
     status: 'PENDING' | 'CONFIRMED';
     /** Timestamp ISO hasta el que está bloqueado el slot (cuando `status === 'PENDING'`). */
     lockedUntil?: string;
+    /**
+     * La cita que el backend creó al bloquear el slot. Junto con `hold`, es lo que el envío del
+     * formulario necesita para convertir el bloqueo en una cita en firme.
+     */
+    appointment?: string;
+    /**
+     * Secreto que identifica al dueño del bloqueo. Solo quien lo tiene puede renovarlo, liberarlo o
+     * confirmarlo; viaja con el envío y el backend no lo conserva en el ticket.
+     */
+    hold?: string;
 }

package/dist/FormSteps/BookingStep/BookingStep.d.ts

@@ -4,9 +4,9 @@ import { StepProps } from '../Step';
 export interface BookingStepProps extends StepProps {
     step: BookingStep;
     /**
-     * Callback to fetch available slots for a given person + date.
-     * The form host wires this to their availability API.
-     * If omitted, the component shows an empty slot list.
+     * Callback to fetch available slots for a given person + date. A host that provides it replaces
+     * the form's public booking edge entirely (stories, previews). When omitted, the step reads its
+     * offer, days, slots and holds from that edge.
      */
     fetchSlots?: (params: {
         personId?: string;

package/dist/FormSteps/BookingStep/MaterialBookingStep/MaterialBookingStep.d.ts

@@ -1,7 +1,14 @@
 import { BookingStepProps } from '../BookingStep';
 /**
- * Conector del paso BOOKING: enlaza el estado del formulario (`useFormStep`) y el
- * theming del form con el componente reutilizable `ErkBookingPicker` (en Shared).
+ * Conector del paso BOOKING: enlaza el estado del formulario (`useFormStep`) y el theming del form
+ * con `ErkBookingPicker`, y habla con el borde público de agendamiento del formulario.
+ *
+ * Todo lo que el picker muestra sale de la oferta que publica el backend, no del paso guardado: las
+ * personas llegan como handles firmados (nunca ids de agente), los días son los que tienen cupo, y
+ * las horas se leen en la zona horaria de la organización. Confirmar en el picker bloquea el slot;
+ * enviar el formulario es lo que lo convierte en cita, y "Cambiar" lo devuelve a la oferta.
+ *
+ * Un host que pase `fetchSlots` sustituye al borde por completo (historias, previsualizaciones).
  */
-declare function MaterialBookingStep({ step, editable, fetchSlots }: BookingStepProps): JSX.Element;
+declare function MaterialBookingStep({ step, editable, fetchSlots: customFetchSlots }: BookingStepProps): JSX.Element;
 export default MaterialBookingStep;

package/dist/FormSteps/BookingStep/MaterialBookingStep/MaterialBookingStep.js

@@ -1,17 +1,29 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { PersonSelectionMode } from '../../../@Types/BookingFormStep';
 import { useFormStep } from '../../StepHooks';
 import FormContext from '../../../Contexts/FormContext';
 import { selectBreakPoint, useAppSelector } from '../../../hooks';
 import { calcStepWidth } from '../../StepFunctions';
 import ErkBookingPicker from '../../../Shared/ErkBookingPicker/ErkBookingPicker';
+import { bookingErrorMessage, fetchBookingOffer, fetchBookingSlots, holdBookingSlot, nonEmpty, releaseBookingSlot, toPickerSlot, } from '../../../Services/BookingService';
+/** Una reserva se renueva a mitad de su vida, y nunca más seguido que cada minuto. */
+const MIN_RENEW_MS = 60000;
+const DEFAULT_LOCK_MINUTES = 15;
 /**
- * Conector del paso BOOKING: enlaza el estado del formulario (`useFormStep`) y el
- * theming del form con el componente reutilizable `ErkBookingPicker` (en Shared).
+ * Conector del paso BOOKING: enlaza el estado del formulario (`useFormStep`) y el theming del form
+ * con `ErkBookingPicker`, y habla con el borde público de agendamiento del formulario.
+ *
+ * Todo lo que el picker muestra sale de la oferta que publica el backend, no del paso guardado: las
+ * personas llegan como handles firmados (nunca ids de agente), los días son los que tienen cupo, y
+ * las horas se leen en la zona horaria de la organización. Confirmar en el picker bloquea el slot;
+ * enviar el formulario es lo que lo convierte en cita, y "Cambiar" lo devuelve a la oferta.
+ *
+ * Un host que pase `fetchSlots` sustituye al borde por completo (historias, previsualizaciones).
  */
-function MaterialBookingStep({ step, editable, fetchSlots }) {
+function MaterialBookingStep({ step, editable, fetchSlots: customFetchSlots }) {
     const currentBreakPoint = useAppSelector(selectBreakPoint);
-    const { postview, formStyle } = useAppSelector((state) => state.global);
+    const { postview, formStyle, idOrganization, internal, apiKey: globalApiKey, } = useAppSelector((state) => state.global);
     const formCtx = useContext(FormContext);
     const isReadOnly = !editable || postview;
     const widthStyle = currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, formCtx.size);
@@ -27,6 +39,91 @@ function MaterialBookingStep({ step, editable, fetchSlots }) {
         defaultValue: null,
         rules: { required: step.required ? 'Selecciona una cita' : undefined },
     });
-    return (_jsx("div", { ref: ref, style: cssVars, children: _jsx(ErkBookingPicker, { value: value, onChange: onChange, label: step.label, description: step.description, durationMinutes: step.durationMinutes, bufferMinutes: step.bufferMinutes, bookingMode: step.bookingMode, temporaryLockMinutes: step.temporaryLockMinutes, personSelectionMode: step.personSelectionMode, persons: step.persons, collectContact: step.collectContact, fetchSlots: fetchSlots, readOnly: isReadOnly, error: error?.message }) }));
+    const apiKey = formCtx.apiKey ?? globalApiKey;
+    const route = useMemo(() => (apiKey ? { apiKey, idStep: step.id, idOrganization: idOrganization || undefined, internal } : undefined), [apiKey, step.id, idOrganization, internal]);
+    const usesEdge = !customFetchSlots && !isReadOnly && !!route;
+    const [offer, setOffer] = useState(undefined);
+    const [offerError, setOfferError] = useState(undefined);
+    useEffect(() => {
+        if (!usesEdge || !route)
+            return;
+        let cancelled = false;
+        fetchBookingOffer(route)
+            .then((loaded) => {
+            if (!cancelled)
+                setOffer(loaded);
+        })
+            .catch((e) => {
+            if (!cancelled)
+                setOfferError(bookingErrorMessage(e));
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [usesEdge, route]);
+    const persons = useMemo(() => offer?.persons?.map((person) => ({
+        id: person.token,
+        name: person.name,
+        role: person.role,
+        avatarUrl: person.avatarUrl,
+        description: person.description,
+    })), [offer]);
+    const fetchDays = useCallback(async ({ personId }) => {
+        if (!route || !offer)
+            return [];
+        // The offer already answered for "anybody"; one person's days are that person's offer.
+        return personId ? (await fetchBookingOffer(route, personId)).days : offer.days;
+    }, [route, offer]);
+    const fetchSlots = useCallback(async ({ personId, date }) => {
+        if (!route || !offer)
+            return [];
+        const slots = await fetchBookingSlots(route, date, personId);
+        return slots.map((slot) => toPickerSlot(slot, offer.timeZone));
+    }, [route, offer]);
+    const holdSlot = useCallback(async ({ slot, contact }) => {
+        if (!route)
+            throw new Error('No pudimos reservar ese horario.');
+        try {
+            return await holdBookingSlot(route, {
+                slot: slot.id,
+                contact: contact?.name ? { name: contact.name, email: nonEmpty(contact.email) } : undefined,
+            });
+        }
+        catch (e) {
+            throw new Error(bookingErrorMessage(e));
+        }
+    }, [route]);
+    // A held slot is somebody's calendar taken off the offer; giving it back the moment the requester
+    // changes their mind is what keeps "Cambiar" from costing the organization the slot for the whole lock.
+    const handleChange = useCallback((next) => {
+        if (next === null && usesEdge && route && value?.appointment && value.hold) {
+            void releaseBookingSlot(route, { appointment: value.appointment, hold: value.hold }).catch(() => undefined);
+        }
+        onChange(next);
+    }, [onChange, usesEdge, route, value]);
+    // The hold outlives a slow form by being renewed with its own token; a renewal that fails (the slot
+    // handle expired, the network went) is left alone — the lock simply lapses and the slot is offered again.
+    const renewal = useRef(undefined);
+    useEffect(() => {
+        clearInterval(renewal.current);
+        if (!usesEdge || !route || !value?.appointment || !value.hold || !value.slotId || value.status !== 'PENDING') {
+            return;
+        }
+        const lockMs = (step.temporaryLockMinutes ?? DEFAULT_LOCK_MINUTES) * 60000;
+        const { slotId, hold, contactName, contactEmail } = value;
+        renewal.current = setInterval(() => {
+            void holdBookingSlot(route, {
+                slot: slotId,
+                hold,
+                contact: contactName ? { name: contactName, email: nonEmpty(contactEmail) } : undefined,
+            }).catch(() => undefined);
+        }, Math.max(MIN_RENEW_MS, lockMs / 2));
+        return () => clearInterval(renewal.current);
+    }, [usesEdge, route, value, step.temporaryLockMinutes]);
+    // The server decides how people are presented: a step that resolves to one calendar offers no choice.
+    const personSelectionMode = usesEdge
+        ? (offer?.personSelection ?? PersonSelectionMode.NONE)
+        : step.personSelectionMode;
+    return (_jsx("div", { ref: ref, style: cssVars, children: _jsx(ErkBookingPicker, { value: value, onChange: handleChange, label: step.label, description: step.description, durationMinutes: offer?.durationMinutes ?? step.durationMinutes, bufferMinutes: step.bufferMinutes, bookingMode: step.bookingMode, temporaryLockMinutes: step.temporaryLockMinutes, personSelectionMode: personSelectionMode, persons: usesEdge ? persons : step.persons, collectContact: step.collectContact, fetchSlots: usesEdge ? fetchSlots : customFetchSlots, fetchDays: usesEdge ? fetchDays : undefined, holdSlot: usesEdge ? holdSlot : undefined, disabled: usesEdge && !offer, readOnly: isReadOnly, error: error?.message ?? offerError }) }));
 }
 export default MaterialBookingStep;

package/dist/Services/BookingService.d.ts

@@ -0,0 +1,79 @@
+import { BookingSlot } from '../@Types/BookingFormStep';
+/**
+ * Cómo llegar al paso BOOKING de un formulario publicado. Misma regla que el envío del formulario:
+ * un form embebido o interno nombra su organización y sale por el dominio de forms; uno servido por
+ * el subdominio de la organización habla con `/api` en el mismo origen.
+ */
+export interface BookingRoute {
+    apiKey: string;
+    idStep: string;
+    idOrganization?: string;
+    internal?: boolean;
+}
+/** Una persona agendable tal como la publica el backend: un handle opaco, nunca un id de agente. */
+export interface BookingOfferPerson {
+    token: string;
+    name: string;
+    role?: string;
+    avatarUrl?: string;
+    description?: string;
+}
+/** Lo que el picker necesita para dibujarse: en qué zona horaria leer las horas y qué días tienen cupo. */
+export interface BookingOffer {
+    timeZone: string;
+    durationMinutes: number;
+    bookingMode: string;
+    personSelection: 'NONE' | 'OPTIONAL' | 'REQUIRED';
+    persons?: BookingOfferPerson[];
+    /** Días con al menos un slot, `YYYY-MM-DD` en la zona horaria de la organización. */
+    days: string[];
+    from: string;
+    to: string;
+}
+/** Un slot tal como lo ofrece el backend: instantes ISO y el handle firmado que lo nombra. */
+export interface BookingOfferSlot {
+    start: string;
+    end: string;
+    token: string;
+}
+/** Un slot retirado de la oferta mientras se termina el formulario. */
+export interface BookingHold {
+    appointment: string;
+    hold: string;
+    lockedUntil: string;
+}
+export interface BookingContact {
+    name: string;
+    email?: string;
+    phone?: string;
+}
+/** La oferta del paso; con `person`, la oferta de esa persona (los días que ella tiene libres). */
+export declare function fetchBookingOffer(route: BookingRoute, person?: string): Promise<BookingOffer>;
+/** Los slots de un día, `date` en `YYYY-MM-DD` de la zona horaria de la organización. */
+export declare function fetchBookingSlots(route: BookingRoute, date: string, person?: string): Promise<BookingOfferSlot[]>;
+/**
+ * Bloquea un slot (o renueva un bloqueo propio si se envía su `hold`). El backend responde 409 cuando
+ * otra persona ya lo tomó, y 422 cuando el paso exige contacto y no llegó.
+ */
+export declare function holdBookingSlot(route: BookingRoute, body: {
+    slot: string;
+    hold?: string;
+    contact?: BookingContact;
+}): Promise<BookingHold>;
+/** Devuelve un slot antes de que venza su bloqueo, para que se ofrezca de nuevo de inmediato. */
+export declare function releaseBookingSlot(route: BookingRoute, body: {
+    appointment: string;
+    hold: string;
+}): Promise<void>;
+/**
+ * La hora `HH:mm` de un instante en la zona horaria de la organización. El picker muestra el reloj de
+ * quien recibe la cita, no el del navegador: un slot de las 09:00 en Bogotá es a las 09:00 aunque el
+ * que agenda esté en Madrid.
+ */
+export declare function clockIn(iso: string, timeZone: string): string;
+/** Un slot de la oferta como lo consume el picker: el handle es su id y las horas van en el reloj de la organización. */
+export declare function toPickerSlot(slot: BookingOfferSlot, timeZone: string): BookingSlot;
+/** Un texto opcional de un campo de contacto: vacío o solo espacios cuenta como no dado. */
+export declare function nonEmpty(text?: string): string | undefined;
+/** El motivo de un rechazo del backend, que llega como texto plano, o un mensaje genérico. */
+export declare function bookingErrorMessage(error: unknown): string;

package/dist/Services/BookingService.js

@@ -0,0 +1,66 @@
+import axiosInstance from '../Utils/AxiosAPI';
+import widgetInstance from '../Utils/AxiosWidget';
+function client(route) {
+    return route.idOrganization || route.internal ? widgetInstance : axiosInstance;
+}
+function url(route, suffix, params = {}) {
+    const search = new URLSearchParams();
+    if (route.idOrganization || route.internal)
+        search.set('idOrganization', route.idOrganization ?? '');
+    for (const [key, value] of Object.entries(params)) {
+        if (value)
+            search.set(key, value);
+    }
+    const query = search.toString();
+    return `/booking/${route.apiKey}/${route.idStep}${suffix}${query ? `?${query}` : ''}`;
+}
+/** La oferta del paso; con `person`, la oferta de esa persona (los días que ella tiene libres). */
+export async function fetchBookingOffer(route, person) {
+    const response = await client(route).get(url(route, '', { person }));
+    return response.data;
+}
+/** Los slots de un día, `date` en `YYYY-MM-DD` de la zona horaria de la organización. */
+export async function fetchBookingSlots(route, date, person) {
+    const response = await client(route).get(url(route, '/slots', { date, person }));
+    return response.data.slots;
+}
+/**
+ * Bloquea un slot (o renueva un bloqueo propio si se envía su `hold`). El backend responde 409 cuando
+ * otra persona ya lo tomó, y 422 cuando el paso exige contacto y no llegó.
+ */
+export async function holdBookingSlot(route, body) {
+    const response = await client(route).post(url(route, '/hold'), body);
+    return response.data;
+}
+/** Devuelve un slot antes de que venza su bloqueo, para que se ofrezca de nuevo de inmediato. */
+export async function releaseBookingSlot(route, body) {
+    await client(route).post(url(route, '/release'), body);
+}
+/**
+ * La hora `HH:mm` de un instante en la zona horaria de la organización. El picker muestra el reloj de
+ * quien recibe la cita, no el del navegador: un slot de las 09:00 en Bogotá es a las 09:00 aunque el
+ * que agenda esté en Madrid.
+ */
+export function clockIn(iso, timeZone) {
+    return new Intl.DateTimeFormat('en-GB', { hour: '2-digit', minute: '2-digit', hourCycle: 'h23', timeZone }).format(new Date(iso));
+}
+/** Un slot de la oferta como lo consume el picker: el handle es su id y las horas van en el reloj de la organización. */
+export function toPickerSlot(slot, timeZone) {
+    return {
+        id: slot.token,
+        startTime: clockIn(slot.start, timeZone),
+        endTime: clockIn(slot.end, timeZone),
+        available: true,
+    };
+}
+/** Un texto opcional de un campo de contacto: vacío o solo espacios cuenta como no dado. */
+export function nonEmpty(text) {
+    return text?.trim() ? text : undefined;
+}
+/** El motivo de un rechazo del backend, que llega como texto plano, o un mensaje genérico. */
+export function bookingErrorMessage(error) {
+    const data = error?.response?.data;
+    if (typeof data === 'string' && data.trim())
+        return data;
+    return 'No pudimos reservar ese horario. Intenta de nuevo.';
+}

package/dist/Services/BookingService.test.d.ts

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

package/dist/Services/BookingService.test.js

@@ -0,0 +1,57 @@
+/* eslint-disable @typescript-eslint/unbound-method, @typescript-eslint/require-await, @typescript-eslint/explicit-function-return-type -- test file: vi.mocked()/expect() reference mocked axios methods as values, and the mock factory uses terse async/return types */
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import axiosInstance from '../Utils/AxiosAPI';
+import widgetInstance from '../Utils/AxiosWidget';
+import { bookingErrorMessage, clockIn, fetchBookingOffer, fetchBookingSlots, holdBookingSlot, releaseBookingSlot, toPickerSlot, } from './BookingService';
+vi.mock('../Utils/AxiosWidget', () => ({
+    default: { get: vi.fn(), post: vi.fn() },
+}));
+vi.mock('../Utils/AxiosAPI', () => ({
+    default: { get: vi.fn(), post: vi.fn() },
+    axiosBaseQuery: () => async () => ({ data: undefined }),
+}));
+const ROUTE = { apiKey: 'form-key', idStep: 'BOOKING-1' };
+describe('BookingService', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+    it('reads a slot on the organization’s clock, not the browser’s', () => {
+        // 14:00Z is 09:00 in Bogotá and 16:00 in Madrid; the picker shows the calendar's own hours.
+        expect(clockIn('2026-09-22T14:00:00.000Z', 'America/Bogota')).toBe('09:00');
+        expect(clockIn('2026-09-22T14:00:00.000Z', 'Europe/Madrid')).toBe('16:00');
+        expect(clockIn('2026-09-22T05:00:00.000Z', 'America/Bogota')).toBe('00:00');
+        expect(toPickerSlot({ start: '2026-09-22T14:00:00.000Z', end: '2026-09-22T14:30:00.000Z', token: 'tok' }, 'America/Bogota')).toEqual({ id: 'tok', startTime: '09:00', endTime: '09:30', available: true });
+    });
+    it('talks to the same-origin API for a form served under the organization', async () => {
+        vi.mocked(axiosInstance.get).mockResolvedValue({ data: { days: ['2026-09-22'] } });
+        await fetchBookingOffer(ROUTE);
+        expect(axiosInstance.get).toHaveBeenCalledWith('/booking/form-key/BOOKING-1');
+        await fetchBookingSlots(ROUTE, '2026-09-22', 'person-token');
+        expect(axiosInstance.get).toHaveBeenLastCalledWith('/booking/form-key/BOOKING-1/slots?date=2026-09-22&person=person-token');
+        expect(widgetInstance.get).not.toHaveBeenCalled();
+    });
+    it('names the organization and goes through the forms domain for an embedded form', async () => {
+        vi.mocked(widgetInstance.get).mockResolvedValue({ data: { days: [] } });
+        vi.mocked(widgetInstance.post).mockResolvedValue({ data: { appointment: 'a1', hold: 'h1', lockedUntil: 'x' } });
+        const route = { ...ROUTE, idOrganization: 'acme' };
+        await fetchBookingOffer(route, 'p');
+        expect(widgetInstance.get).toHaveBeenCalledWith('/booking/form-key/BOOKING-1?idOrganization=acme&person=p');
+        const held = await holdBookingSlot(route, { slot: 'slot-token', contact: { name: 'Ana' } });
+        expect(widgetInstance.post).toHaveBeenCalledWith('/booking/form-key/BOOKING-1/hold?idOrganization=acme', {
+            slot: 'slot-token',
+            contact: { name: 'Ana' },
+        });
+        expect(held).toEqual({ appointment: 'a1', hold: 'h1', lockedUntil: 'x' });
+        await releaseBookingSlot(route, { appointment: 'a1', hold: 'h1' });
+        expect(widgetInstance.post).toHaveBeenLastCalledWith('/booking/form-key/BOOKING-1/release?idOrganization=acme', {
+            appointment: 'a1',
+            hold: 'h1',
+        });
+        expect(axiosInstance.get).not.toHaveBeenCalled();
+    });
+    it('surfaces the edge’s plain-text refusal, and a generic message otherwise', () => {
+        expect(bookingErrorMessage({ response: { data: 'That slot is no longer available' } })).toBe('That slot is no longer available');
+        expect(bookingErrorMessage({ response: { data: { message: 'Forbidden' } } })).toBe('No pudimos reservar ese horario. Intenta de nuevo.');
+        expect(bookingErrorMessage(new Error('network'))).toBe('No pudimos reservar ese horario. Intenta de nuevo.');
+    });
+});

package/dist/Shared/ErkBookingPicker/ErkBookingPicker.d.ts

@@ -17,6 +17,27 @@ export interface ErkBookingPickerProps {
         personId?: string;
         date: string;
     }) => Promise<BookingSlot[]>;
+    /**
+     * Los días (`YYYY-MM-DD`) con algún horario para la persona elegida. Sin él, cualquier día desde
+     * hoy es elegible.
+     */
+    fetchDays?: (args: {
+        personId?: string;
+    }) => Promise<string[]>;
+    /**
+     * Retira el slot de la oferta al confirmar. Lo que devuelve se guarda en el valor junto con la
+     * selección; si rechaza, el wizard vuelve a la hora con el motivo y recarga los horarios.
+     */
+    holdSlot?: (args: {
+        slot: BookingSlot;
+        personId?: string;
+        contact?: {
+            name?: string;
+            email?: string;
+        };
+    }) => Promise<Pick<BookingValue, 'appointment' | 'hold' | 'lockedUntil'>>;
+    /** Deshabilita la tarjeta de entrada mientras el host termina de cargar la oferta. */
+    disabled?: boolean;
     readOnly?: boolean;
     error?: string;
 }
@@ -27,5 +48,5 @@ export interface ErkBookingPickerProps {
  * En el paso final el panel derecho desaparece y el resumen se expande en una columna
  * centrada (cross-fade corto). Confirmar cierra el modal y deja el resumen compacto.
  */
-declare function ErkBookingPicker({ value, onChange, label, description, durationMinutes, bufferMinutes, bookingMode, temporaryLockMinutes, personSelectionMode, persons, collectContact, fetchSlots, readOnly, error, }: ErkBookingPickerProps): JSX.Element;
+declare function ErkBookingPicker({ value, onChange, label, description, durationMinutes, bufferMinutes, bookingMode, temporaryLockMinutes, personSelectionMode, persons, collectContact, fetchSlots, fetchDays, holdSlot, disabled, readOnly, error, }: ErkBookingPickerProps): JSX.Element;
 export default ErkBookingPicker;

package/dist/Shared/ErkBookingPicker/ErkBookingPicker.js

@@ -59,7 +59,7 @@ function capitalize(text) {
  * En el paso final el panel derecho desaparece y el resumen se expande en una columna
  * centrada (cross-fade corto). Confirmar cierra el modal y deja el resumen compacto.
  */
-function ErkBookingPicker({ value, onChange, label, description, durationMinutes, bufferMinutes, bookingMode, temporaryLockMinutes, personSelectionMode, persons, collectContact = false, fetchSlots, readOnly = false, error, }) {
+function ErkBookingPicker({ value, onChange, label, description, durationMinutes, bufferMinutes, bookingMode, temporaryLockMinutes, personSelectionMode, persons, collectContact = false, fetchSlots, fetchDays, holdSlot, disabled = false, readOnly = false, error, }) {
     const needsPerson = !!personSelectionMode && personSelectionMode !== PersonSelectionMode.NONE;
     const personsOptional = personSelectionMode === PersonSelectionMode.OPTIONAL;
     const today = startOfDay(new Date());
@@ -77,6 +77,10 @@ function ErkBookingPicker({ value, onChange, label, description, durationMinutes
     const [loading, setLoading] = useState(false);
     const [contactName, setContactName] = useState('');
     const [contactEmail, setContactEmail] = useState('');
+    /** `undefined` mientras se consultan; sin `fetchDays` nunca se consultan y todo día futuro vale. */
+    const [days, setDays] = useState(undefined);
+    const [holding, setHolding] = useState(false);
+    const [holdError, setHoldError] = useState(undefined);
     const reduceMotion = useMemo(() => typeof window !== 'undefined' && !!window.matchMedia?.('(prefers-reduced-motion: reduce)').matches, []);
     const monthCells = useMemo(() => {
         const first = startOfWeek(startOfMonth(viewMonth), { weekStartsOn: WEEK_STARTS_ON });
@@ -105,6 +109,34 @@ function ErkBookingPicker({ value, onChange, label, description, durationMinutes
         // oxlint-disable-next-line react/set-state-in-effect
         void loadSlots(date, person?.id);
     }, [value, date, person, loadSlots]);
+    useEffect(() => {
+        if (!fetchDays || !open || value)
+            return;
+        let cancelled = false;
+        // Same shape as the slots effect: the days come from the host's API and the picker only mirrors them.
+        // oxlint-disable-next-line react/set-state-in-effect
+        setDays(undefined);
+        fetchDays({ personId: person?.id })
+            .then((available) => {
+            if (cancelled)
+                return;
+            setDays(available);
+            // The month on screen may hold nothing; the first day on offer is where the requester needs to be.
+            const first = available[0];
+            if (!first)
+                return;
+            setViewMonth((current) => available.some((d) => isSameMonth(new Date(d + 'T00:00:00'), current))
+                ? current
+                : startOfMonth(new Date(first + 'T00:00:00')));
+        })
+            .catch(() => {
+            if (!cancelled)
+                setDays([]);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [fetchDays, open, value, person]);
     // Al entrar/salir del paso final el layout se reestructura; el reacomodo
     // ocurre mientras la tarjeta está invisible (fade corto en dos fases).
     const goToStep = (target) => {
@@ -132,11 +164,10 @@ function ErkBookingPicker({ value, onChange, label, description, durationMinutes
                 return true;
         }
     })();
-    const confirm = () => {
+    const confirm = async () => {
         if (!slot || !date)
             return;
-        setOpen(false);
-        onChange({
+        const selection = {
             type: 'BOOKING_VALUE',
             slotId: slot.id,
             date: fmtDate(date),
@@ -147,7 +178,35 @@ function ErkBookingPicker({ value, onChange, label, description, durationMinutes
             contactName: contactName || undefined,
             contactEmail: contactEmail || undefined,
             status: 'PENDING',
-        });
+        };
+        if (!holdSlot) {
+            setOpen(false);
+            onChange(selection);
+            return;
+        }
+        setHolding(true);
+        setHoldError(undefined);
+        try {
+            const held = await holdSlot({
+                slot,
+                personId: person?.id,
+                contact: collectContact
+                    ? { name: contactName || undefined, email: contactEmail || undefined }
+                    : undefined,
+            });
+            setOpen(false);
+            onChange({ ...selection, ...held });
+        }
+        catch (e) {
+            // Somebody else took the slot while the form was being finished: back to the hour, with fresh slots.
+            setHoldError(e instanceof Error && e.message ? e.message : 'No pudimos reservar ese horario.');
+            setSlot(undefined);
+            goToStep(wizardKeys.indexOf('hour'));
+            void loadSlots(date, person?.id);
+        }
+        finally {
+            setHolding(false);
+        }
     };
     const reset = () => {
         onChange(null);
@@ -156,6 +215,8 @@ function ErkBookingPicker({ value, onChange, label, description, durationMinutes
         setPersonTouched(false);
         setDate(undefined);
         setSlot(undefined);
+        setDays(undefined);
+        setHoldError(undefined);
         setContactName('');
         setContactEmail('');
     };
@@ -192,7 +253,7 @@ function ErkBookingPicker({ value, onChange, label, description, durationMinutes
         navParts.push(_jsx("span", { children: dayText }, "d"));
     if (hourText)
         navParts.push(_jsx("span", { className: styles.navHl, children: hourText }, "h"));
-    return (_jsxs("div", { className: styles.container, children: [_jsxs("div", { className: styles.entry, children: [_jsx("div", { className: styles.avatar, children: "\uD83D\uDCC5" }), _jsxs("div", { className: styles.entryInfo, children: [_jsx("span", { className: styles.entryLabel, children: label }), _jsx("span", { className: styles.entrySub, children: description ?? 'Agenda tu cita' })] }), _jsx(ErkButton, { text: "Agendar cita", onClick: () => setOpen(true) })] }), _jsx(Dialog, { open: open, onClose: () => setOpen(false), maxWidth: "md", fullWidth: true, slotProps: { paper: { style: { borderRadius: 16, background: 'transparent', boxShadow: 'none' } } }, children: _jsxs("div", { className: `${styles.card}${isFinal ? ` ${styles.cardFinal}` : ''}${xfade ? ` ${styles.xfade}` : ''}`, children: [_jsxs("div", { className: isFinal ? `${styles.book} ${styles.bookFinal}` : styles.book, children: [_jsxs("aside", { className: styles.who, children: [_jsxs("div", { className: styles.brand, children: [_jsx("div", { className: styles.avatar, children: person ? initials(person.name) : '📅' }), _jsxs("div", { children: [_jsx("h2", { className: styles.brandName, children: person?.name ?? label }), _jsx("p", { className: styles.brandRole, children: person?.role ?? description ?? 'Agenda tu cita' })] })] }), _jsxs("div", { className: styles.meta, children: [_jsxs("div", { className: styles.row, children: [_jsx("span", { className: styles.ic, children: "\u25F7" }), durationMinutes, " min", bufferMinutes ? ` · buffer ${bufferMinutes} min` : ''] }), bookingMode && (_jsxs("div", { className: styles.row, children: [_jsx("span", { className: styles.ic, children: "\u25F1" }), _jsx("span", { className: styles.pill, children: MODE_LABEL[bookingMode] })] }))] }), _jsx("div", { className: styles.sum, "aria-live": "polite", children: summaryRows.map((r) => (_jsxs("div", { className: r.text ? `${styles.srow} ${styles.srowOn}` : styles.srow, children: [_jsx("span", { className: styles.dot, children: "\u2713" }), _jsx("span", { children: r.text ?? r.placeholder })] }, r.key))) }), isFinal && collectContact && (_jsxs("div", { className: styles.cfields, children: [_jsx(ErkTextField, { label: "Nombre", value: contactName, onChange: setContactName }), _jsx(ErkTextField, { label: "Correo", value: contactEmail, onChange: setContactEmail })] })), !!temporaryLockMinutes && (_jsxs("div", { className: styles.lock, children: ["\u23F3 Reservaremos el horario ", _jsxs("b", { children: [temporaryLockMinutes, " min"] }), " mientras confirmas."] }))] }), _jsxs("div", { className: styles.right, children: [_jsx("nav", { className: styles.stepper, "aria-label": "Progreso", children: wizardKeys.map((key, i) => (_jsxs("span", { className: styles.stepGroup, children: [_jsxs("button", { type: "button", disabled: i >= wizStep, onClick: () => goToStep(i), className: i < wizStep
+    return (_jsxs("div", { className: styles.container, children: [_jsxs("div", { className: styles.entry, children: [_jsx("div", { className: styles.avatar, children: "\uD83D\uDCC5" }), _jsxs("div", { className: styles.entryInfo, children: [_jsx("span", { className: styles.entryLabel, children: label }), _jsx("span", { className: styles.entrySub, children: description ?? 'Agenda tu cita' })] }), _jsx(ErkButton, { text: "Agendar cita", disabled: disabled, onClick: () => setOpen(true) })] }), _jsx(Dialog, { open: open, onClose: () => setOpen(false), maxWidth: "md", fullWidth: true, slotProps: { paper: { style: { borderRadius: 16, background: 'transparent', boxShadow: 'none' } } }, children: _jsxs("div", { className: `${styles.card}${isFinal ? ` ${styles.cardFinal}` : ''}${xfade ? ` ${styles.xfade}` : ''}`, children: [_jsxs("div", { className: isFinal ? `${styles.book} ${styles.bookFinal}` : styles.book, children: [_jsxs("aside", { className: styles.who, children: [_jsxs("div", { className: styles.brand, children: [_jsx("div", { className: styles.avatar, children: person ? initials(person.name) : '📅' }), _jsxs("div", { children: [_jsx("h2", { className: styles.brandName, children: person?.name ?? label }), _jsx("p", { className: styles.brandRole, children: person?.role ?? description ?? 'Agenda tu cita' })] })] }), _jsxs("div", { className: styles.meta, children: [_jsxs("div", { className: styles.row, children: [_jsx("span", { className: styles.ic, children: "\u25F7" }), durationMinutes, " min", bufferMinutes ? ` · buffer ${bufferMinutes} min` : ''] }), bookingMode && (_jsxs("div", { className: styles.row, children: [_jsx("span", { className: styles.ic, children: "\u25F1" }), _jsx("span", { className: styles.pill, children: MODE_LABEL[bookingMode] })] }))] }), _jsx("div", { className: styles.sum, "aria-live": "polite", children: summaryRows.map((r) => (_jsxs("div", { className: r.text ? `${styles.srow} ${styles.srowOn}` : styles.srow, children: [_jsx("span", { className: styles.dot, children: "\u2713" }), _jsx("span", { children: r.text ?? r.placeholder })] }, r.key))) }), isFinal && collectContact && (_jsxs("div", { className: styles.cfields, children: [_jsx(ErkTextField, { label: "Nombre", value: contactName, onChange: setContactName }), _jsx(ErkTextField, { label: "Correo", value: contactEmail, onChange: setContactEmail })] })), !!temporaryLockMinutes && (_jsxs("div", { className: styles.lock, children: ["\u23F3 Reservaremos el horario ", _jsxs("b", { children: [temporaryLockMinutes, " min"] }), " mientras confirmas."] }))] }), _jsxs("div", { className: styles.right, children: [_jsx("nav", { className: styles.stepper, "aria-label": "Progreso", children: wizardKeys.map((key, i) => (_jsxs("span", { className: styles.stepGroup, children: [_jsxs("button", { type: "button", disabled: i >= wizStep, onClick: () => goToStep(i), className: i < wizStep
                                                             ? `${styles.stepItem} ${styles.stepDone}`
                                                             : i === wizStep
                                                                 ? `${styles.stepItem} ${styles.stepOn}`
@@ -202,10 +263,13 @@ function ErkBookingPicker({ value, onChange, label, description, durationMinutes
                                                                 ? `${styles.pcard} ${styles.pcardOn}`
                                                                 : styles.pcard, onClick: () => pickPerson(p), children: [_jsx("span", { className: styles.pav, children: initials(p.name) }), _jsxs("span", { className: styles.pinfo, children: [_jsx("span", { className: styles.pn, children: p.name }), p.role && _jsx("span", { className: styles.pr, children: p.role })] }), _jsx("span", { className: styles.chk, children: "\u2713" })] }, p.id))), personsOptional && (_jsxs("button", { type: "button", className: personTouched && !person
                                                                 ? `${styles.pcard} ${styles.pcardAny} ${styles.pcardOn}`
-                                                                : `${styles.pcard} ${styles.pcardAny}`, onClick: () => pickPerson(undefined), children: [_jsx("span", { className: styles.pav, children: "\u2726" }), _jsxs("span", { className: styles.pinfo, children: [_jsx("span", { className: styles.pn, children: "Cualquiera" }), _jsx("span", { className: styles.pr, children: "El sistema asigna" })] }), _jsx("span", { className: styles.chk, children: "\u2713" })] }))] })] }, "person")), currentKey === 'day' && (_jsxs("section", { className: styles.pane, children: [_jsx("h3", { className: styles.q, children: "Elige un d\u00EDa" }), _jsx("p", { className: styles.qsub, children: "Solo se muestran fechas a partir de hoy." }), _jsxs("div", { className: styles.monthWrap, children: [_jsxs("div", { className: styles.monthHead, children: [_jsx("span", { className: styles.monthTitle, children: capitalize(format(viewMonth, 'MMMM yyyy', { locale: es })) }), _jsxs("span", { className: styles.monthNav, children: [_jsx("button", { type: "button", "aria-label": "Mes anterior", onClick: () => setViewMonth((m) => addMonths(m, -1)), children: "\u2039" }), _jsx("button", { type: "button", "aria-label": "Mes siguiente", onClick: () => setViewMonth((m) => addMonths(m, 1)), children: "\u203A" })] })] }), _jsxs("div", { className: styles.mgrid, children: [DOW.map((d, i) => (_jsx("span", { className: styles.mdow, children: d }, i))), monthCells.map((d) => {
+                                                                : `${styles.pcard} ${styles.pcardAny}`, onClick: () => pickPerson(undefined), children: [_jsx("span", { className: styles.pav, children: "\u2726" }), _jsxs("span", { className: styles.pinfo, children: [_jsx("span", { className: styles.pn, children: "Cualquiera" }), _jsx("span", { className: styles.pr, children: "El sistema asigna" })] }), _jsx("span", { className: styles.chk, children: "\u2713" })] }))] })] }, "person")), currentKey === 'day' && (_jsxs("section", { className: styles.pane, children: [_jsx("h3", { className: styles.q, children: "Elige un d\u00EDa" }), _jsx("p", { className: styles.qsub, children: fetchDays
+                                                        ? 'Solo se pueden elegir los días con horarios disponibles.'
+                                                        : 'Solo se muestran fechas a partir de hoy.' }), _jsxs("div", { className: styles.monthWrap, children: [_jsxs("div", { className: styles.monthHead, children: [_jsx("span", { className: styles.monthTitle, children: capitalize(format(viewMonth, 'MMMM yyyy', { locale: es })) }), _jsxs("span", { className: styles.monthNav, children: [_jsx("button", { type: "button", "aria-label": "Mes anterior", onClick: () => setViewMonth((m) => addMonths(m, -1)), children: "\u2039" }), _jsx("button", { type: "button", "aria-label": "Mes siguiente", onClick: () => setViewMonth((m) => addMonths(m, 1)), children: "\u203A" })] })] }), _jsxs("div", { className: styles.mgrid, children: [DOW.map((d, i) => (_jsx("span", { className: styles.mdow, children: d }, i))), monthCells.map((d) => {
                                                                     const outside = !isSameMonth(d, viewMonth);
                                                                     const past = isBefore(d, today);
-                                                                    const selectable = !outside && !past;
+                                                                    const offered = !days || days.includes(fmtDate(d));
+                                                                    const selectable = !outside && !past && offered;
                                                                     const cls = date && isSameDay(d, date)
                                                                         ? `${styles.mday} ${styles.mdaySel}`
                                                                         : selectable
@@ -215,7 +279,7 @@ function ErkBookingPicker({ value, onChange, label, description, durationMinutes
                                                                             setDate(d);
                                                                             setSlot(undefined);
                                                                         }, children: format(d, 'd') }, d.toISOString()));
-                                                                })] })] })] }, "day")), currentKey === 'hour' && (_jsxs("section", { className: styles.pane, children: [_jsx("h3", { className: styles.q, children: "Elige una hora" }), _jsxs("p", { className: styles.qsub, children: [dayText, " \u00B7 citas de ", durationMinutes, " min"] }), loading ? (_jsx("div", { className: styles.empty, children: "Buscando horarios\u2026" })) : slots.length === 0 ? (_jsx("div", { className: styles.empty, children: "No hay horarios disponibles ese d\u00EDa." })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.slots, children: slots.map((s) => (_jsx("button", { type: "button", disabled: !s.available, className: slot?.id === s.id
+                                                                })] })] }), fetchDays && days === undefined && (_jsx("div", { className: styles.empty, children: "Buscando d\u00EDas con horarios\u2026" })), days?.length === 0 && (_jsx("div", { className: styles.empty, children: "No hay d\u00EDas con horarios disponibles." }))] }, "day")), currentKey === 'hour' && (_jsxs("section", { className: styles.pane, children: [_jsx("h3", { className: styles.q, children: "Elige una hora" }), _jsxs("p", { className: styles.qsub, children: [dayText, " \u00B7 citas de ", durationMinutes, " min"] }), holdError && (_jsx("div", { className: styles.err, role: "alert", children: holdError })), loading ? (_jsx("div", { className: styles.empty, children: "Buscando horarios\u2026" })) : slots.length === 0 ? (_jsx("div", { className: styles.empty, children: "No hay horarios disponibles ese d\u00EDa." })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.slots, children: slots.map((s) => (_jsx("button", { type: "button", disabled: !s.available, className: slot?.id === s.id
                                                                     ? `${styles.slot} ${styles.slotSel}`
                                                                     : s.available
                                                                         ? styles.slot
@@ -223,6 +287,6 @@ function ErkBookingPicker({ value, onChange, label, description, durationMinutes
                                                         ? 'Si todo está bien, completa tus datos y confirma.'
                                                         : 'Si todo está bien, confirma tu cita.' })] }, "confirm"))] })] }), _jsxs("div", { className: styles.navbar, children: [_jsx("div", { className: styles.navSummary, children: isFinal || !canAdvance || navParts.length === 0
                                         ? STEP_HINT[currentKey]
-                                        : navParts.reduce((acc, part, i) => i === 0 ? [part] : [...acc, _jsx("span", { children: " \u00B7 " }, `s${i}`), part], []) }), wizStep > 0 && (_jsx(ErkButton, { text: "Atr\u00E1s", variant: "outlined", onClick: () => goToStep(wizStep - 1) })), isFinal ? (_jsx(ErkButton, { text: "Confirmar cita", sx: ACCENT_SX, disabled: !slot, onClick: confirm })) : (_jsx(ErkButton, { text: "Siguiente", disabled: !canAdvance, onClick: () => goToStep(wizStep + 1) }))] })] }) }), error && _jsx("div", { className: styles.err, children: error })] }));
+                                        : navParts.reduce((acc, part, i) => i === 0 ? [part] : [...acc, _jsx("span", { children: " \u00B7 " }, `s${i}`), part], []) }), wizStep > 0 && (_jsx(ErkButton, { text: "Atr\u00E1s", variant: "outlined", onClick: () => goToStep(wizStep - 1) })), isFinal ? (_jsx(ErkButton, { text: holding ? 'Reservando…' : 'Confirmar cita', sx: ACCENT_SX, disabled: !slot || holding, onClick: () => void confirm() })) : (_jsx(ErkButton, { text: "Siguiente", disabled: !canAdvance, onClick: () => goToStep(wizStep + 1) }))] })] }) }), error && _jsx("div", { className: styles.err, children: error })] }));
 }
 export default ErkBookingPicker;

package/dist/Shared/ErkBookingPicker/ErkBookingPicker.test.js

@@ -91,6 +91,56 @@ describe('ErkBookingPicker (wizard)', () => {
         // La selección se mantiene y permite avanzar de nuevo
         expect(screen.getByRole('button', { name: 'Siguiente' })).toBeEnabled();
     });
+    it('offers only the days the host names, and holds the slot before the value is set', async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        const today = format(new Date(), 'yyyy-MM-dd');
+        const fetchDays = vi.fn(() => Promise.resolve([today]));
+        const holdSlot = vi.fn(() => Promise.resolve({ appointment: 'appt-1', hold: 'secret-1', lockedUntil: '2026-09-22T14:15:00.000Z' }));
+        render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkBookingPicker, { value: null, onChange: onChange, label: "Agendar cita", durationMinutes: 50, personSelectionMode: PersonSelectionMode.NONE, fetchDays: fetchDays, fetchSlots: () => Promise.resolve(SLOTS), holdSlot: holdSlot }) }));
+        await user.click(screen.getByRole('button', { name: 'Agendar cita' }));
+        expect(await screen.findByRole('heading', { name: 'Elige un día' })).toBeInTheDocument();
+        expect(fetchDays).toHaveBeenCalledWith({ personId: undefined });
+        // Only today is on offer: every other day of the month stays disabled.
+        const todayButton = clickableToday();
+        const enabledDays = screen
+            .getAllByRole('button')
+            .filter((b) => /^\d{1,2}$/.test(b.textContent ?? '') && !b.disabled);
+        expect(enabledDays).toEqual([todayButton]);
+        await user.click(todayButton);
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        await user.click(await screen.findByRole('button', { name: '09:00' }));
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        await user.click(await screen.findByRole('button', { name: 'Confirmar cita' }));
+        // The hold is what the value carries on top of the selection: what submit needs to confirm it.
+        expect(holdSlot).toHaveBeenCalledWith({ slot: SLOTS[0], personId: undefined, contact: undefined });
+        expect(onChange).toHaveBeenCalledWith(expect.objectContaining({
+            slotId: 's-1',
+            date: today,
+            appointment: 'appt-1',
+            hold: 'secret-1',
+            lockedUntil: '2026-09-22T14:15:00.000Z',
+            status: 'PENDING',
+        }));
+    });
+    it('goes back to the hours with the reason when the hold is refused', async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        const fetchSlots = vi.fn(() => Promise.resolve(SLOTS));
+        const holdSlot = vi.fn(() => Promise.reject(new Error('Ese horario ya fue reservado por alguien más')));
+        render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkBookingPicker, { value: null, onChange: onChange, label: "Agendar cita", durationMinutes: 50, personSelectionMode: PersonSelectionMode.NONE, fetchSlots: fetchSlots, holdSlot: holdSlot }) }));
+        await user.click(screen.getByRole('button', { name: 'Agendar cita' }));
+        await user.click(clickableToday());
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        await user.click(await screen.findByRole('button', { name: '09:00' }));
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        await user.click(await screen.findByRole('button', { name: 'Confirmar cita' }));
+        expect(await screen.findByRole('alert')).toHaveTextContent('Ese horario ya fue reservado por alguien más');
+        expect(screen.getByRole('heading', { name: 'Elige una hora' })).toBeInTheDocument();
+        // The slots are asked for again, since the offer just changed under the requester.
+        expect(fetchSlots).toHaveBeenCalledTimes(2);
+        expect(onChange).not.toHaveBeenCalled();
+    });
     it('renders the compact summary when a value exists', () => {
         render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkBookingPicker, { value: {
                     type: 'BOOKING_VALUE',

package/package.json

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