@arquimedes.co/eureka-forms 3.0.71 → 3.0.72

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

@@ -1,62 +1,93 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { useState } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import '@testing-library/jest-dom';
-import { format } from 'date-fns';
+import { addDays, format } from 'date-fns';
+import { es } from 'date-fns/locale';
 import ErkBookingPicker from './ErkBookingPicker';
 import MaterialProviders from '../../Utils/MaterialProviders';
 import InternalFormStyle from '../../constants/InternalFormStyle';
 import { PersonSelectionMode } from '../../@Types/BookingFormStep';
 const SLOTS = [
     { id: 's-1', startTime: '09:00', endTime: '09:50', available: true },
-    { id: 's-2', startTime: '10:00', endTime: '10:50', available: false },
     { id: 's-3', startTime: '11:00', endTime: '11:50', available: true },
+    { id: 's-4', startTime: '14:00', endTime: '14:50', available: true },
+];
+const TEMPLATES = [
+    { id: 't-1', name: 'Valoración', description: 'Primera visita, sin costo.', durationMinutes: 30 },
+    { id: 't-2', name: 'Asesoría de crédito', durationMinutes: 45 },
 ];
 const PERSONS = [
     { id: 'p-1', name: 'María González', role: 'Asesora' },
     { id: 'p-2', name: 'Carlos Ruiz', role: 'Técnico' },
 ];
+/** The accessible name of a day button: its full date. */
+function dayName(date) {
+    return format(date, "EEEE d 'de' MMMM 'de' yyyy", { locale: es });
+}
 function clickableToday() {
-    // El número de hoy puede aparecer también como día de un mes adyacente (deshabilitado).
-    const candidates = screen.getAllByRole('button', { name: format(new Date(), 'd') });
-    const enabled = candidates.find((b) => !b.disabled);
-    if (!enabled)
-        throw new Error('No selectable day found for today');
-    return enabled;
+    return screen.getByRole('button', { name: dayName(new Date()) });
+}
+/** A slot button by its start time; the first one of the day also reads "Primera disponible". */
+function hour(time) {
+    return screen.findByRole('button', { name: new RegExp(`^${time}`) });
+}
+function renderPicker(props) {
+    render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkBookingPicker, { value: null, onChange: () => { }, label: "Agendar cita", durationMinutes: 50, personSelectionMode: PersonSelectionMode.NONE, ...props }) }));
+}
+/** Opens the wizard and walks to the confirm step with today's 09:00. */
+async function walkToConfirm(user) {
+    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 hour('09:00'));
+    await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+    await screen.findByRole('heading', { name: 'Revisa y reserva tu horario' });
 }
 describe('ErkBookingPicker (wizard)', () => {
-    it('drives the full flow: person → day → hour → confirm', async () => {
+    it('drives the full flow: person → day → hour → reserve, asking for name and email', async () => {
         const user = userEvent.setup();
         const onChange = vi.fn();
         const fetchSlots = vi.fn(() => Promise.resolve(SLOTS));
-        render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkBookingPicker, { value: null, onChange: onChange, label: "Agendar cita", durationMinutes: 50, personSelectionMode: PersonSelectionMode.OPTIONAL, persons: PERSONS, collectContact: true, fetchSlots: fetchSlots }) }));
-        // La tarjeta de entrada abre el wizard en un modal
+        renderPicker({
+            onChange,
+            personSelectionMode: PersonSelectionMode.OPTIONAL,
+            persons: PERSONS,
+            askEmail: true,
+            fetchSlots,
+        });
         await user.click(screen.getByRole('button', { name: 'Agendar cita' }));
-        // Paso 1: persona — Siguiente bloqueado hasta elegir
         expect(await screen.findByRole('heading', { name: '¿Con quién quieres agendar?' })).toBeInTheDocument();
         const next = screen.getByRole('button', { name: 'Siguiente' });
         expect(next).toBeDisabled();
         await user.click(screen.getByText('María González'));
         expect(next).toBeEnabled();
         await user.click(next);
-        // Paso 2: día
         expect(await screen.findByRole('heading', { name: 'Elige un día' })).toBeInTheDocument();
         expect(screen.getByRole('button', { name: 'Siguiente' })).toBeDisabled();
         await user.click(clickableToday());
         await user.click(screen.getByRole('button', { name: 'Siguiente' }));
-        // Paso 3: hora — slots del fetch; ocupados deshabilitados
         expect(await screen.findByRole('heading', { name: 'Elige una hora' })).toBeInTheDocument();
         expect(fetchSlots).toHaveBeenCalledWith({ personId: 'p-1', date: format(new Date(), 'yyyy-MM-dd') });
-        const taken = await screen.findByRole('button', { name: '10:00' });
-        expect(taken).toBeDisabled();
-        await user.click(screen.getByRole('button', { name: '09:00' }));
+        // Grouped by part of the day, with the first one flagged; nothing is shown as taken.
+        expect(screen.getByRole('heading', { name: 'Mañana' })).toBeInTheDocument();
+        expect(screen.getByRole('heading', { name: 'Tarde' })).toBeInTheDocument();
+        expect(await hour('09:00')).toHaveTextContent('Primera disponible');
+        expect(screen.queryByText(/Tachados/)).not.toBeInTheDocument();
+        await user.click(await hour('09:00'));
         await user.click(screen.getByRole('button', { name: 'Siguiente' }));
-        // Paso 4: confirmar — datos de contacto en la barra y CTA
-        expect(await screen.findByRole('heading', { name: 'Revisa y confirma tu cita' })).toBeInTheDocument();
-        await user.type(screen.getByLabelText('Nombre'), 'Juan Pérez');
-        await user.type(screen.getByLabelText('Correo'), 'juan@correo.com');
-        await user.click(screen.getByRole('button', { name: 'Confirmar cita' }));
+        expect(await screen.findByRole('heading', { name: 'Revisa y reserva tu horario' })).toBeInTheDocument();
+        expect(screen.getByText(/La cita se confirma cuando envíes el formulario/)).toBeInTheDocument();
+        const reserve = screen.getByRole('button', { name: 'Reservar' });
+        await user.type(screen.getByLabelText(/Nombre/), 'Juan Pérez');
+        expect(reserve).toBeDisabled();
+        await user.type(screen.getByLabelText(/Correo/), 'juan@');
+        expect(reserve).toBeDisabled();
+        await user.type(screen.getByLabelText(/Correo/), 'correo.com');
+        expect(reserve).toBeEnabled();
+        await user.click(reserve);
         expect(onChange).toHaveBeenCalledWith({
             type: 'BOOKING_VALUE',
             slotId: 's-1',
@@ -70,9 +101,43 @@ describe('ErkBookingPicker (wizard)', () => {
             status: 'PENDING',
         });
     });
+    it('explains that without an email there is no confirmation', async () => {
+        const user = userEvent.setup();
+        renderPicker({ askEmail: true, fetchSlots: () => Promise.resolve(SLOTS) });
+        await walkToConfirm(user);
+        expect(screen.getByText('Sin correo no podremos enviarte la confirmación.')).toBeInTheDocument();
+    });
+    it('reuses the contact the form already has and asks for neither field', async () => {
+        const user = userEvent.setup();
+        const holdSlot = vi.fn(() => Promise.resolve({ appointment: 'a', hold: 'h', lockedUntil: 'x' }));
+        renderPicker({
+            knownContact: { name: 'Ana Gómez', email: 'ana@correo.com' },
+            fetchSlots: () => Promise.resolve(SLOTS),
+            holdSlot,
+        });
+        await walkToConfirm(user);
+        expect(screen.queryByLabelText(/Nombre/)).not.toBeInTheDocument();
+        expect(screen.queryByLabelText(/Correo/)).not.toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: 'Reservar' }));
+        expect(holdSlot).toHaveBeenCalledWith({
+            slot: SLOTS[0],
+            personId: undefined,
+            contact: { name: 'Ana Gómez', email: 'ana@correo.com' },
+        });
+    });
+    it('always asks for the name, even when the email comes from another step', async () => {
+        const user = userEvent.setup();
+        renderPicker({ knownContact: { email: 'ana@correo.com' }, fetchSlots: () => Promise.resolve(SLOTS) });
+        await walkToConfirm(user);
+        const reserve = screen.getByRole('button', { name: 'Reservar' });
+        expect(reserve).toBeDisabled();
+        expect(screen.queryByLabelText(/Correo/)).not.toBeInTheDocument();
+        await user.type(screen.getByLabelText(/Nombre/), 'Juan');
+        expect(reserve).toBeEnabled();
+    });
     it('skips the person step when personSelectionMode is NONE', async () => {
         const user = userEvent.setup();
-        render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkBookingPicker, { value: null, onChange: () => { }, label: "Agendar cita", durationMinutes: 30, personSelectionMode: PersonSelectionMode.NONE, fetchSlots: () => Promise.resolve(SLOTS) }) }));
+        renderPicker({ durationMinutes: 30, fetchSlots: () => Promise.resolve(SLOTS) });
         await user.click(screen.getByRole('button', { name: 'Agendar cita' }));
         expect(await screen.findByRole('heading', { name: 'Elige un día' })).toBeInTheDocument();
         expect(screen.queryByText('¿Con quién quieres agendar?')).not.toBeInTheDocument();
@@ -80,15 +145,17 @@ describe('ErkBookingPicker (wizard)', () => {
     });
     it('allows navigating back through the breadcrumb without losing the selection', async () => {
         const user = userEvent.setup();
-        render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkBookingPicker, { value: null, onChange: () => { }, label: "Agendar cita", durationMinutes: 50, personSelectionMode: PersonSelectionMode.REQUIRED, persons: PERSONS, fetchSlots: () => Promise.resolve(SLOTS) }) }));
+        renderPicker({
+            personSelectionMode: PersonSelectionMode.REQUIRED,
+            persons: PERSONS,
+            fetchSlots: () => Promise.resolve(SLOTS),
+        });
         await user.click(screen.getByRole('button', { name: 'Agendar cita' }));
         await user.click(await screen.findByText('Carlos Ruiz'));
         await user.click(screen.getByRole('button', { name: 'Siguiente' }));
         expect(await screen.findByRole('heading', { name: 'Elige un día' })).toBeInTheDocument();
-        // Volver por el breadcrumb: el paso "Persona" completado es clicable
         await user.click(screen.getByRole('button', { name: /Persona/ }));
         expect(await screen.findByRole('heading', { name: '¿Con quién quieres agendar?' })).toBeInTheDocument();
-        // 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 () => {
@@ -96,12 +163,24 @@ describe('ErkBookingPicker (wizard)', () => {
         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 }) }));
+        const holdSlot = vi.fn(() => Promise.resolve({
+            appointment: 'appt-1',
+            hold: 'secret-1',
+            lockedUntil: '2026-09-22T14:15:00.000Z',
+            startTime: '09:15',
+            endTime: '10:05',
+            personName: 'Bruno Pérez',
+        }));
+        renderPicker({
+            onChange,
+            knownContact: { name: 'Ana', email: 'ana@correo.com' },
+            fetchDays,
+            fetchSlots: () => Promise.resolve(SLOTS),
+            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')
@@ -109,14 +188,16 @@ describe('ErkBookingPicker (wizard)', () => {
         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(await hour('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 });
+        await user.click(await screen.findByRole('button', { name: 'Reservar' }));
+        // What the hold says wins over the picker's own selection: real hours and the assigned person.
         expect(onChange).toHaveBeenCalledWith(expect.objectContaining({
             slotId: 's-1',
             date: today,
+            startTime: '09:15',
+            endTime: '10:05',
+            personName: 'Bruno Pérez',
             appointment: 'appt-1',
             hold: 'secret-1',
             lockedUntil: '2026-09-22T14:15:00.000Z',
@@ -128,44 +209,232 @@ describe('ErkBookingPicker (wizard)', () => {
         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' }));
+        renderPicker({ onChange, knownContact: { name: 'Ana' }, fetchSlots, holdSlot });
+        await walkToConfirm(user);
+        await user.click(await screen.findByRole('button', { name: 'Reservar' }));
         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('does not confirm without a name when the step requires one', async () => {
+    it('keeps the hours of the last day picked when an earlier answer arrives late', async () => {
         const user = userEvent.setup();
-        const onChange = vi.fn();
-        render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkBookingPicker, { value: null, onChange: onChange, label: "Agendar cita", durationMinutes: 30, personSelectionMode: PersonSelectionMode.NONE, collectContact: true, requireContact: true, fetchSlots: () => Promise.resolve(SLOTS) }) }));
+        const tomorrow = addDays(new Date(), 1);
+        const resolvers = {};
+        const fetchSlots = vi.fn(({ date }) => new Promise((resolve) => {
+            resolvers[date] = resolve;
+        }));
+        const todayKey = format(new Date(), 'yyyy-MM-dd');
+        const tomorrowKey = format(tomorrow, 'yyyy-MM-dd');
+        renderPicker({
+            fetchDays: () => Promise.resolve([todayKey, tomorrowKey]),
+            fetchSlots,
+        });
+        await user.click(screen.getByRole('button', { name: 'Agendar cita' }));
+        await user.click(await screen.findByRole('button', { name: dayName(new Date()) }));
+        if (format(tomorrow, 'M') !== format(new Date(), 'M')) {
+            await user.click(screen.getByRole('button', { name: 'Mes siguiente' }));
+        }
+        await user.click(screen.getByRole('button', { name: dayName(tomorrow) }));
+        await waitFor(() => expect(resolvers[tomorrowKey]).toBeDefined());
+        resolvers[tomorrowKey]([{ id: 't-1', startTime: '15:00', endTime: '15:50', available: true }]);
+        resolvers[todayKey]([{ id: 'd-1', startTime: '08:00', endTime: '08:50', available: true }]);
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        expect(await hour('15:00')).toBeInTheDocument();
+        expect(screen.queryByRole('button', { name: /^08:00/ })).not.toBeInTheDocument();
+    });
+    it('tells a failed load of hours apart from an empty day, and retries', async () => {
+        const user = userEvent.setup();
+        const fetchSlots = vi
+            .fn()
+            .mockRejectedValueOnce(new Error('Hay muchas consultas en este momento. Intenta de nuevo en unos segundos.'))
+            .mockResolvedValueOnce(SLOTS);
+        renderPicker({ fetchSlots });
         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' }));
+        expect(await screen.findByRole('alert')).toHaveTextContent('Hay muchas consultas en este momento');
+        expect(screen.queryByText('No hay horarios disponibles ese día.')).not.toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: 'Reintentar' }));
+        expect(await hour('09:00')).toBeInTheDocument();
+    });
+    it('still says a day is empty when it really has no hours', async () => {
+        const user = userEvent.setup();
+        renderPicker({ fetchSlots: () => Promise.resolve([]) });
+        await user.click(screen.getByRole('button', { name: 'Agendar cita' }));
+        await user.click(clickableToday());
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        expect(await screen.findByText('No hay horarios disponibles ese día.')).toBeInTheDocument();
+    });
+    it('tells a failed load of days apart from a person without days, and retries', async () => {
+        const user = userEvent.setup();
+        const today = format(new Date(), 'yyyy-MM-dd');
+        const fetchDays = vi
+            .fn()
+            .mockRejectedValueOnce(new Error('Esa persona ya no está disponible'))
+            .mockResolvedValueOnce([today]);
+        renderPicker({ fetchDays, fetchSlots: () => Promise.resolve(SLOTS) });
+        await user.click(screen.getByRole('button', { name: 'Agendar cita' }));
+        expect(await screen.findByRole('alert')).toHaveTextContent('Esa persona ya no está disponible');
+        expect(screen.queryByText('No hay días con horarios disponibles.')).not.toBeInTheDocument();
+        expect(clickableToday()).toBeDisabled();
+        await user.click(screen.getByRole('button', { name: 'Reintentar' }));
+        await waitFor(() => expect(clickableToday()).toBeEnabled());
+    });
+    it('names the organization clock and the requester clock when they differ', async () => {
+        const user = userEvent.setup();
+        const local = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        const zone = local === 'Asia/Tokyo' ? 'America/Bogota' : 'Asia/Tokyo';
+        const start = new Date();
+        start.setUTCHours(0, 0, 0, 0);
+        const slot = {
+            id: 'z-1',
+            startTime: new Intl.DateTimeFormat('en-GB', {
+                hour: '2-digit',
+                minute: '2-digit',
+                hourCycle: 'h23',
+                timeZone: zone,
+            }).format(start),
+            endTime: '23:59',
+            available: true,
+            start: start.toISOString(),
+        };
+        const localTime = new Intl.DateTimeFormat('en-GB', {
+            hour: '2-digit',
+            minute: '2-digit',
+            hourCycle: 'h23',
+            timeZone: local,
+        }).format(start);
+        renderPicker({ timeZone: zone, fetchSlots: () => Promise.resolve([slot]) });
+        await user.click(screen.getByRole('button', { name: 'Agendar cita' }));
+        await user.click(clickableToday());
         await user.click(screen.getByRole('button', { name: 'Siguiente' }));
-        const confirm = await screen.findByRole('button', { name: 'Confirmar cita' });
-        expect(confirm).toBeDisabled();
-        await user.type(screen.getByLabelText('Nombre'), 'Juan');
-        expect(confirm).toBeEnabled();
-    });
-    it('renders the compact summary when a value exists', () => {
-        render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkBookingPicker, { value: {
-                    type: 'BOOKING_VALUE',
-                    slotId: 's-3',
-                    date: '2026-07-02',
-                    startTime: '11:00',
-                    endTime: '11:50',
-                    personName: 'María González',
-                    status: 'CONFIRMED',
-                }, onChange: () => { }, label: "Cita confirmada", durationMinutes: 50 }) }));
-        expect(screen.getByText(/María González .* 11:00–11:50/)).toBeInTheDocument();
+        expect(await screen.findByText(/^Horas en hora de Tokyo|^Horas en hora de Bogotá/)).toBeInTheDocument();
+        await user.click(await hour(slot.startTime));
+        expect(screen.getAllByText(new RegExp(`\\(${localTime} en tu hora\\)`)).length).toBeGreaterThan(0);
+    });
+    it('does not show the buffer, an internal detail', async () => {
+        const user = userEvent.setup();
+        renderPicker({ fetchSlots: () => Promise.resolve(SLOTS) });
+        await user.click(screen.getByRole('button', { name: 'Agendar cita' }));
+        expect(screen.queryByText(/buffer/)).not.toBeInTheDocument();
+    });
+    it('sends the requester back to the hours when a held slot lapses', async () => {
+        const user = userEvent.setup();
+        const fetchSlots = vi.fn(() => Promise.resolve(SLOTS));
+        function Host({ lapsed }) {
+            const [value, setValue] = useState(null);
+            return (_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkBookingPicker, { value: lapsed ? null : value, onChange: setValue, label: "Agendar cita", durationMinutes: 50, knownContact: { name: 'Ana' }, lapsed: lapsed, fetchSlots: fetchSlots, holdSlot: () => Promise.resolve({ appointment: 'a', hold: 'h', lockedUntil: 'x' }) }) }));
+        }
+        const { rerender } = render(_jsx(Host, {}));
+        await walkToConfirm(user);
+        await user.click(screen.getByRole('button', { name: 'Reservar' }));
+        expect(await screen.findByRole('button', { name: 'Cambiar' })).toBeInTheDocument();
+        rerender(_jsx(Host, { lapsed: "Tu reserva venci\u00F3; elige la hora de nuevo." }));
+        expect(await screen.findByRole('alert')).toHaveTextContent('Tu reserva venció; elige la hora de nuevo.');
+        await user.click(screen.getByRole('button', { name: 'Agendar cita' }));
+        expect(await screen.findByRole('heading', { name: 'Elige una hora' })).toBeInTheDocument();
+        expect(screen.getByRole('alert')).toHaveTextContent('Tu reserva venció; elige la hora de nuevo.');
+        // Fresh hours: the lapsed slot may be gone.
+        await waitFor(() => expect(fetchSlots).toHaveBeenCalledTimes(2));
+    });
+    it('renders the compact summary with the assigned person and the pending note', () => {
+        renderPicker({
+            value: {
+                type: 'BOOKING_VALUE',
+                slotId: 's-3',
+                date: '2026-07-02',
+                startTime: '11:00',
+                endTime: '11:50',
+                personName: 'María González',
+                status: 'PENDING',
+                lockedUntil: '2026-07-01T15:30:00.000Z',
+            },
+            timeZone: 'America/Bogota',
+        });
+        expect(screen.getByText(/11:00–11:50 · con María González/)).toBeInTheDocument();
+        expect(screen.getByText(/Reservado hasta las 10:30\. Envía el formulario para confirmar la cita\./)).toBeInTheDocument();
         expect(screen.getByRole('button', { name: 'Cambiar' })).toBeInTheDocument();
     });
+    it('asks for the event template first and narrows days, hours and the hold to it', async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        const fetchDays = vi.fn(() => Promise.resolve([format(new Date(), 'yyyy-MM-dd')]));
+        const fetchSlots = vi.fn(() => Promise.resolve(SLOTS));
+        const holdSlot = vi.fn(() => Promise.resolve({ eventTemplate: { name: 'Asesoría de crédito', durationMinutes: 45 } }));
+        renderPicker({
+            onChange,
+            eventTemplates: TEMPLATES,
+            knownContact: { name: 'Ana', email: 'ana@correo.com' },
+            fetchDays,
+            fetchSlots,
+            holdSlot,
+        });
+        await user.click(screen.getByRole('button', { name: 'Agendar cita' }));
+        expect(await screen.findByRole('heading', { name: '¿Qué necesitas?' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: /^1Tipo/ })).toBeInTheDocument();
+        // Nothing is asked of the edge before a type is picked: the days depend on it.
+        expect(fetchDays).not.toHaveBeenCalled();
+        expect(screen.getByRole('button', { name: 'Siguiente' })).toBeDisabled();
+        expect(screen.getByText('Primera visita, sin costo.')).toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: /Asesoría de crédito/ }));
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        expect(await screen.findByRole('heading', { name: 'Elige un día' })).toBeInTheDocument();
+        expect(fetchDays).toHaveBeenLastCalledWith({ personId: undefined, eventTemplate: 't-2' });
+        expect(screen.getByText('45 min')).toBeInTheDocument();
+        await user.click(clickableToday());
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        expect(await screen.findByText(/citas de 45 min/)).toBeInTheDocument();
+        expect(fetchSlots).toHaveBeenLastCalledWith({
+            personId: undefined,
+            date: format(new Date(), 'yyyy-MM-dd'),
+            eventTemplate: 't-2',
+        });
+        await user.click(await hour('09:00'));
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        await user.click(await screen.findByRole('button', { name: 'Reservar' }));
+        expect(holdSlot).toHaveBeenCalledWith(expect.objectContaining({ eventTemplate: 't-2' }));
+        expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ eventTemplate: { name: 'Asesoría de crédito', durationMinutes: 45 } }));
+    });
+    it('drops the day and hour picked for a type when the requester goes back and picks another', async () => {
+        const user = userEvent.setup();
+        renderPicker({ eventTemplates: TEMPLATES, fetchSlots: () => Promise.resolve(SLOTS) });
+        await user.click(screen.getByRole('button', { name: 'Agendar cita' }));
+        await user.click(await screen.findByRole('button', { name: /Valoración/ }));
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        await user.click(clickableToday());
+        await user.click(screen.getByRole('button', { name: 'Atrás' }));
+        await user.click(screen.getByRole('button', { name: /Asesoría de crédito/ }));
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        expect(await screen.findByRole('heading', { name: 'Elige un día' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Siguiente' })).toBeDisabled();
+    });
+    it('offers no type step with a single event template', async () => {
+        const user = userEvent.setup();
+        renderPicker({ eventTemplates: [TEMPLATES[0]], fetchSlots: () => Promise.resolve(SLOTS) });
+        await user.click(screen.getByRole('button', { name: 'Agendar cita' }));
+        expect(await screen.findByRole('heading', { name: 'Elige un día' })).toBeInTheDocument();
+        expect(screen.queryByRole('heading', { name: '¿Qué necesitas?' })).not.toBeInTheDocument();
+    });
+    it('shows the picked event template and its duration in the compact summary', () => {
+        renderPicker({
+            value: {
+                type: 'BOOKING_VALUE',
+                date: '2026-07-02',
+                startTime: '11:00',
+                endTime: '11:45',
+                status: 'PENDING',
+                eventTemplate: { name: 'Asesoría de crédito', durationMinutes: 45 },
+            },
+        });
+        expect(screen.getByText('Asesoría de crédito · 45 min')).toBeInTheDocument();
+    });
+    it('offers to retry when the offer did not load', async () => {
+        const user = userEvent.setup();
+        const onRetryLoad = vi.fn();
+        renderPicker({ disabled: true, loadError: 'No pudimos cargar los horarios.', onRetryLoad });
+        expect(screen.getByRole('alert')).toHaveTextContent('No pudimos cargar los horarios.');
+        await user.click(screen.getByRole('button', { name: 'Reintentar' }));
+        expect(onRetryLoad).toHaveBeenCalledTimes(1);
+    });
 });

package/dist/main.js

@@ -3,6 +3,7 @@ import './Init';
 import ReactDOM from 'react-dom/client';
 import styles from './index.module.css';
 import App from './App/App';
+import BookingManagePage from './BookingManage/BookingManagePage';
 import './index.css';
 import './Utils/MuiClassnameSetup';
 const urlParams = new URLSearchParams(window.location.search);
@@ -22,4 +23,6 @@ const scrollToTop = () => {
     location.href = '#eureka-root';
     location.href = '#';
 };
-ReactDOM.createRoot(document.getElementById('eureka-root')).render(_jsx("div", { className: styles.eurekaForm, children: _jsx(App, { isWidget: false, idOrganization: idOrganization, apiKey: window.location.pathname.replace('/', ''), valuesData: dataValues, scrollToTop: scrollToTop }) }));
+/** The link in the appointment emails, `/booking/<token>`: the appointment's own page, not a form. */
+const bookingLink = /^\/booking\/([^/]+)\/?$/.exec(window.location.pathname);
+ReactDOM.createRoot(document.getElementById('eureka-root')).render(_jsx("div", { className: styles.eurekaForm, children: bookingLink ? (_jsx(BookingManagePage, { token: decodeURIComponent(bookingLink[1]), idOrganization: idOrganization })) : (_jsx(App, { isWidget: false, idOrganization: idOrganization, apiKey: window.location.pathname.replace('/', ''), valuesData: dataValues, scrollToTop: scrollToTop })) }));

package/package.json

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