@arquimedes.co/eureka-forms 3.0.71 → 3.0.72

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

@@ -1,24 +1,57 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { PersonSelectionMode } from '../../../@Types/BookingFormStep';
+import { useWatch } from 'react-hook-form';
+import { shallowEqual } from 'react-redux';
+import { BookingContactEmailSourceTypes, 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';
+import { BookingErrorCodes, HOLD_LAPSED_MESSAGE, fetchBookingOffer, fetchBookingSlots, holdBookingSlot, holdLapsed, holdToValue, isValidEmail, nonEmpty, releaseBookingSlot, renewBookingHold, toBookingError, toPickerSlots, } 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;
+const NAME_INFO = 'name';
+const LASTNAME_INFO = 'lastName';
+/** A field name no step uses, watched in place of a contact step the form does not have. */
+const UNSET_FIELD = '__bookingContactUnset';
+/** The first step of the form mapped to a client field, if any. */
+function clientInfoStep(form, clientInfoType) {
+    return Object.values(form.steps).find((step) => step.clientInfoType === clientInfoType)?.id;
+}
+/**
+ * The current text of another step. A step of the section on screen lives in react-hook-form; one of a
+ * section already left (stepper forms unregister it) lives in the store's section values.
+ */
+function textOf(watched, stored) {
+    const value = typeof watched === 'string' ? watched : typeof stored === 'string' ? stored : undefined;
+    return nonEmpty(value);
+}
+/** Stable key of an offered person across offers, whose tokens are re-signed on every load. */
+function personKey(person) {
+    return `person|${person.name}|${person.role ?? ''}`;
+}
+/** Stable key of an offered event template across offers; its token is re-signed like a person's. */
+function templateKey(template) {
+    return `template|${template.name}`;
+}
 /**
  * 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;
+ * las horas se leen en la zona horaria de la organización. "Reservar" en el picker bloquea el slot;
  * enviar el formulario es lo que lo convierte en cita, y "Cambiar" lo devuelve a la oferta.
  *
+ * El contacto de la reserva: el nombre sale de un paso de nombre ya diligenciado o lo pide el picker;
+ * el correo sale del paso que nombra `contactEmail` (`STEP`) o lo pide el picker (`FIELD`, o si ese
+ * paso quedó vacío).
+ *
+ * Con varios tipos de atención y `requesterPicksType`, quien agenda elige primero el tipo: los días,
+ * las horas y la reserva se piden con su handle (`eventTemplate`) y la duración es la del tipo.
+ *
  * Un host que pase `fetchSlots` sustituye al borde por completo (historias, previsualizaciones).
  */
 function MaterialBookingStep({ step, editable, fetchSlots: customFetchSlots }) {
@@ -39,11 +72,58 @@ function MaterialBookingStep({ step, editable, fetchSlots: customFetchSlots }) {
         defaultValue: null,
         rules: { required: step.required ? 'Selecciona una cita' : undefined },
     });
+    // --- Contact taken from earlier steps -------------------------------------------------------
+    const emailStepId = step.contactEmail?.source === BookingContactEmailSourceTypes.STEP ? step.contactEmail.stepId : undefined;
+    const nameStepId = useMemo(() => clientInfoStep(formCtx, NAME_INFO), [formCtx]);
+    const lastNameStepId = useMemo(() => clientInfoStep(formCtx, LASTNAME_INFO), [formCtx]);
+    const contactStepIds = [emailStepId, nameStepId, lastNameStepId];
+    const watched = useWatch({ name: contactStepIds.map((id) => id ?? UNSET_FIELD) });
+    const stored = useAppSelector((state) => contactStepIds.map((id) => {
+        const idSection = id ? formCtx.steps[id]?.idSection : undefined;
+        return id && idSection ? state.site.values.sections[idSection]?.[id] : undefined;
+    }), shallowEqual);
+    const stepEmail = textOf(watched[0], stored[0]);
+    const knownEmail = emailStepId && isValidEmail(stepEmail) ? stepEmail : undefined;
+    const knownName = [textOf(watched[1], stored[1]), textOf(watched[2], stored[2])].filter(Boolean).join(' ');
+    const knownContact = useMemo(() => ({ name: knownName || undefined, email: knownEmail }), [knownName, knownEmail]);
+    // The confirmation needs an email: a step that should have given one but was left empty asks in the picker.
+    const askEmail = !knownEmail;
+    // --- Booking edge -----------------------------------------------------------------------------
     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);
+    const [offerAttempt, setOfferAttempt] = useState(0);
+    const [lapsed, setLapsed] = useState(undefined);
+    /** The offer the callbacks read; the state copy only drives rendering. */
+    const offerRef = useRef(undefined);
+    /**
+     * Person and event template tokens are re-signed with each offer: any token ever handed out maps to
+     * the current one of whatever it named.
+     */
+    const tokenKeys = useRef(new Map());
+    const currentTokens = useRef(new Map());
+    /** The renewal token of the live hold; it never travels in the step value or the ticket. */
+    const renewToken = useRef(undefined);
+    const adoptOffer = useCallback((loaded) => {
+        const named = [
+            ...(loaded.persons ?? []).map((person) => [person.token, personKey(person)]),
+            ...(loaded.eventTemplates ?? []).map((template) => [template.token, templateKey(template)]),
+        ];
+        for (const [token, key] of named) {
+            tokenKeys.current.set(token, key);
+            currentTokens.current.set(key, token);
+        }
+        offerRef.current = loaded;
+        setOffer(loaded);
+    }, []);
+    const currentToken = useCallback((token) => {
+        if (!token)
+            return undefined;
+        const key = tokenKeys.current.get(token);
+        return (key && currentTokens.current.get(key)) ?? token;
+    }, []);
     useEffect(() => {
         if (!usesEdge || !route)
             return;
@@ -51,16 +131,42 @@ function MaterialBookingStep({ step, editable, fetchSlots: customFetchSlots }) {
         fetchBookingOffer(route)
             .then((loaded) => {
             if (!cancelled)
-                setOffer(loaded);
+                adoptOffer(loaded);
         })
             .catch((e) => {
             if (!cancelled)
-                setOfferError(bookingErrorMessage(e));
+                setOfferError(toBookingError(e, 'No pudimos cargar los horarios.').message);
         });
         return () => {
             cancelled = true;
         };
-    }, [usesEdge, route]);
+    }, [usesEdge, route, adoptOffer, offerAttempt]);
+    const retryOffer = useCallback(() => {
+        setOfferError(undefined);
+        setOfferAttempt((attempt) => attempt + 1);
+    }, []);
+    /**
+     * Runs a read against the edge; a stale person token (403 `STALE_OFFER`) reloads the offer, which
+     * re-signs every person and event template, and retries once. Any refusal reaches the picker as an `Error` whose
+     * message is the edge's own, so it can show it next to "Reintentar".
+     */
+    const withFreshOffer = useCallback(async (call, fallback) => {
+        try {
+            return await call();
+        }
+        catch (e) {
+            const refusal = toBookingError(e, fallback);
+            if (refusal.code !== BookingErrorCodes.STALE_OFFER || !route)
+                throw refusal;
+            try {
+                adoptOffer(await fetchBookingOffer(route));
+                return await call();
+            }
+            catch (retryError) {
+                throw toBookingError(retryError, fallback);
+            }
+        }
+    }, [route, adoptOffer]);
     const persons = useMemo(() => offer?.persons?.map((person) => ({
         id: person.token,
         name: person.name,
@@ -68,66 +174,116 @@ function MaterialBookingStep({ step, editable, fetchSlots: customFetchSlots }) {
         avatarUrl: person.avatarUrl,
         description: person.description,
     })), [offer]);
-    const fetchDays = useCallback(async ({ personId }) => {
-        if (!route || !offer)
+    const eventTemplates = useMemo(() => offer?.requesterPicksType && (offer.eventTemplates?.length ?? 0) > 1
+        ? offer.eventTemplates?.map((template) => ({
+            id: template.token,
+            name: template.name,
+            description: template.description,
+            durationMinutes: template.durationMinutes,
+            bookingMode: template.bookingMode,
+        }))
+        : undefined, [offer]);
+    const offerLoaded = !!offer;
+    const fetchDays = useCallback(async ({ personId, eventTemplate }) => {
+        if (!route || !offerLoaded || !offerRef.current)
             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)
+        // The offer already answered for "anybody" and any type; anything narrower is its own offer.
+        if (!personId && !eventTemplate)
+            return offerRef.current.days;
+        return withFreshOffer(async () => (await fetchBookingOffer(route, {
+            person: currentToken(personId),
+            eventTemplate: currentToken(eventTemplate),
+        })).days, 'No pudimos cargar los días disponibles.');
+    }, 
+    // `offerLoaded` re-creates the callback once the first offer lands, so the picker asks again.
+    [route, offerLoaded, withFreshOffer, currentToken]);
+    const fetchSlots = useCallback(async ({ personId, date, eventTemplate, }) => {
+        if (!route || !offerLoaded || !offerRef.current)
             return [];
-        const slots = await fetchBookingSlots(route, date, personId);
-        return slots.map((slot) => toPickerSlot(slot, offer.timeZone));
-    }, [route, offer]);
-    const holdSlot = useCallback(async ({ slot, contact }) => {
+        return withFreshOffer(async () => {
+            const slots = await fetchBookingSlots(route, date, {
+                person: currentToken(personId),
+                eventTemplate: currentToken(eventTemplate),
+            });
+            return toPickerSlots(slots, offerRef.current?.timeZone ?? 'UTC');
+        }, 'No pudimos cargar los horarios de este día.');
+    }, [route, offerLoaded, withFreshOffer, currentToken]);
+    const holdSlot = useCallback(async ({ slot, contact, eventTemplate, }) => {
         if (!route)
             throw new Error('No pudimos reservar ese horario.');
+        const template = currentToken(eventTemplate);
+        let held;
         try {
-            return await holdBookingSlot(route, {
+            held = await holdBookingSlot(route, {
                 slot: slot.id,
-                contact: contact?.name ? { name: contact.name, email: nonEmpty(contact.email) } : undefined,
+                contact: { name: contact.name, email: contact.email ?? '' },
+                ...(template ? { eventTemplate: template } : {}),
             });
         }
         catch (e) {
-            throw new Error(bookingErrorMessage(e));
+            throw toBookingError(e);
         }
-    }, [route]);
+        renewToken.current = held.renew;
+        setLapsed(undefined);
+        return holdToValue(held, offerRef.current?.timeZone ?? 'UTC');
+    }, [route, currentToken]);
     // 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);
         }
+        if (next === null)
+            renewToken.current = 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);
+    // The hold outlives a slow form by being renewed with the token of its last renewal, every half
+    // lock. A renewal the edge refuses for good (or none landing before the lock ends) drops the value
+    // and sends the requester back to the hours with the reason, instead of letting submit find it gone.
+    const valueRef = useRef(value);
     useEffect(() => {
-        clearInterval(renewal.current);
-        if (!usesEdge || !route || !value?.appointment || !value.hold || !value.slotId || value.status !== 'PENDING') {
+        valueRef.current = value;
+    }, [value]);
+    const appointment = value?.status === 'PENDING' ? value.appointment : undefined;
+    const hold = value?.status === 'PENDING' ? value.hold : undefined;
+    useEffect(() => {
+        if (!usesEdge || !route || !appointment || !hold)
             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);
+        const lapse = () => {
+            renewToken.current = undefined;
+            onChange(null);
+            setLapsed(HOLD_LAPSED_MESSAGE);
+        };
+        const timer = setInterval(() => {
+            const renew = renewToken.current;
+            if (!renew) {
+                // A hold restored without its renewal token can only be kept until it runs out.
+                const until = valueRef.current?.lockedUntil;
+                if (until && new Date(until).getTime() <= Date.now())
+                    lapse();
+                return;
+            }
+            renewBookingHold(route, { renew, hold })
+                .then((renewed) => {
+                renewToken.current = renewed.renew;
+                if (valueRef.current?.appointment === appointment) {
+                    onChange({ ...valueRef.current, lockedUntil: renewed.lockedUntil });
+                }
+            })
+                .catch((e) => {
+                if (valueRef.current?.appointment !== appointment)
+                    return;
+                if (holdLapsed(toBookingError(e), valueRef.current.lockedUntil))
+                    lapse();
+            });
         }, Math.max(MIN_RENEW_MS, lockMs / 2));
-        return () => clearInterval(renewal.current);
-    }, [usesEdge, route, value, step.temporaryLockMinutes]);
+        return () => clearInterval(timer);
+    }, [usesEdge, route, appointment, hold, step.temporaryLockMinutes, onChange]);
     // 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, 
-            // Whoever holds a slot must be named unless the step lets strangers book; asking for the name
-            // whenever it is required keeps the hold from being refused for a step that never turned the
-            // contact fields on.
-            collectContact: !step.allowAnonymous || step.collectContact === true, requireContact: !step.allowAnonymous, fetchSlots: usesEdge ? fetchSlots : customFetchSlots, fetchDays: usesEdge ? fetchDays : undefined, holdSlot: usesEdge ? holdSlot : undefined, disabled: usesEdge && !offer, readOnly: isReadOnly, error: error?.message ?? offerError }) }));
+    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, bookingMode: step.bookingMode, temporaryLockMinutes: step.temporaryLockMinutes, personSelectionMode: personSelectionMode, persons: usesEdge ? persons : step.persons, eventTemplates: usesEdge ? eventTemplates : undefined, timeZone: offer?.timeZone, knownContact: knownContact, askEmail: askEmail, lapsed: lapsed, fetchSlots: usesEdge ? fetchSlots : customFetchSlots, fetchDays: usesEdge ? fetchDays : undefined, holdSlot: usesEdge ? holdSlot : undefined, disabled: usesEdge && !offer, readOnly: isReadOnly, error: error?.message, loadError: usesEdge ? offerError : undefined, onRetryLoad: retryOffer }) }));
 }
 export default MaterialBookingStep;

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

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

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

@@ -0,0 +1,275 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { act, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useEffect } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import '@testing-library/jest-dom';
+import { format } from 'date-fns';
+import { es } from 'date-fns/locale';
+import BookingStepComponent from '../BookingStep';
+import { storyForm, withFormStepProviders } from '../../@StoryDecorators/FormStepDecorator';
+import FormContext from '../../../Contexts/FormContext';
+import FormStepTypes from '../../../constants/FormStepTypes';
+import { BookingContactEmailSourceTypes, BookingMode, PersonSelectionMode, } from '../../../@Types/BookingFormStep';
+import { fetchBookingOffer, fetchBookingSlots, holdBookingSlot, renewBookingHold, } from '../../../Services/BookingService';
+vi.mock('../../../Services/BookingService', async (importOriginal) => ({
+    ...(await importOriginal()),
+    fetchBookingOffer: vi.fn(),
+    fetchBookingSlots: vi.fn(),
+    holdBookingSlot: vi.fn(),
+    renewBookingHold: vi.fn(),
+    releaseBookingSlot: vi.fn(() => Promise.resolve()),
+}));
+const TODAY = format(new Date(), 'yyyy-MM-dd');
+const OFFER = {
+    timeZone: 'America/Bogota',
+    durationMinutes: 30,
+    bookingMode: 'VIRTUAL',
+    personSelection: 'NONE',
+    days: [TODAY],
+    from: '2026-10-14T15:00:00.000Z',
+    to: '2026-11-13T04:59:59.999Z',
+};
+const SLOT = { start: '2026-10-15T14:00:00.000Z', end: '2026-10-15T14:30:00.000Z', token: 'slot-1' };
+const HELD = {
+    appointment: 'appt-1',
+    hold: 'secret-1',
+    lockedUntil: '2026-10-15T13:00:00.000Z',
+    renew: 'renew-1',
+    start: '2026-10-15T14:15:00.000Z',
+    end: '2026-10-15T14:45:00.000Z',
+    person: { token: 'pt-1', name: 'Bruno Pérez', role: 'Asesor' },
+};
+function textStep(id, clientInfoType) {
+    return {
+        id,
+        idSection: 'SECTION_1',
+        stepPath: [id],
+        type: FormStepTypes.TEXTINPUT,
+        label: id,
+        description: null,
+        required: false,
+        size: 4,
+        editable: true,
+        clientInfoType,
+    };
+}
+const FORM = {
+    ...storyForm,
+    apiKey: 'form-key',
+    steps: {
+        ...storyForm.steps,
+        'email-step': textStep('email-step', 'email'),
+        'name-step': textStep('name-step', 'name'),
+    },
+};
+function bookingStep(overrides = {}) {
+    return {
+        id: 'BOOKING-1',
+        idSection: 'SECTION_1',
+        stepPath: ['BOOKING-1'],
+        type: FormStepTypes.BOOKING,
+        label: 'Agendar cita',
+        description: null,
+        required: false,
+        bookingMode: BookingMode.VIRTUAL,
+        durationMinutes: 30,
+        temporaryLockMinutes: 2,
+        contactEmail: { source: BookingContactEmailSourceTypes.STEP, stepId: 'email-step' },
+        size: 4,
+        ...overrides,
+    };
+}
+/** Fills earlier steps of the form, as the requester would have done before reaching the booking. */
+function Seed({ values }) {
+    const { setValue } = useFormContext();
+    useEffect(() => {
+        for (const [name, value] of Object.entries(values))
+            setValue(name, value);
+    }, [setValue, values]);
+    return null;
+}
+function renderStep(step, values) {
+    const Story = () => (_jsxs(FormContext.Provider, { value: FORM, children: [_jsx(Seed, { values: values }), _jsx(BookingStepComponent, { step: step, editable: true })] }));
+    render(withFormStepProviders(Story));
+}
+function today() {
+    return screen.getByRole('button', { name: format(new Date(), "EEEE d 'de' MMMM 'de' yyyy", { locale: es }) });
+}
+async function reserveFirstHour(user) {
+    const open = await screen.findByRole('button', { name: 'Agendar cita' });
+    await waitFor(() => expect(open).toBeEnabled());
+    await user.click(open);
+    await waitFor(() => expect(today()).toBeEnabled());
+    await user.click(today());
+    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: 'Reservar' }));
+}
+describe('MaterialBookingStep', () => {
+    beforeEach(() => {
+        vi.mocked(fetchBookingOffer).mockResolvedValue(OFFER);
+        vi.mocked(fetchBookingSlots).mockResolvedValue([SLOT]);
+        vi.mocked(holdBookingSlot).mockResolvedValue(HELD);
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+        vi.clearAllMocks();
+    });
+    it('holds with the name and email the form already has, and keeps what the hold says', async () => {
+        const user = userEvent.setup();
+        renderStep(bookingStep(), { 'email-step': 'ana@correo.com', 'name-step': 'Ana Gómez' });
+        await reserveFirstHour(user);
+        expect(holdBookingSlot).toHaveBeenCalledWith(expect.objectContaining({ apiKey: 'form-key' }), {
+            slot: 'slot-1',
+            contact: { name: 'Ana Gómez', email: 'ana@correo.com' },
+        });
+        // Hours and person come from the hold, not from the button that was clicked.
+        expect(await screen.findByText(/09:15–09:45 · con Bruno Pérez/)).toBeInTheDocument();
+        expect(screen.getByText(/Envía el formulario para confirmar la cita/)).toBeInTheDocument();
+    });
+    it('asks for the email in the picker when the step is set to FIELD', async () => {
+        const user = userEvent.setup();
+        renderStep(bookingStep({ contactEmail: { source: BookingContactEmailSourceTypes.FIELD } }), {
+            'email-step': 'ana@correo.com',
+            'name-step': 'Ana Gómez',
+        });
+        const open = await screen.findByRole('button', { name: 'Agendar cita' });
+        await waitFor(() => expect(open).toBeEnabled());
+        await user.click(open);
+        await waitFor(() => expect(today()).toBeEnabled());
+        await user.click(today());
+        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' }));
+        expect(await screen.findByLabelText(/Correo/)).toBeInTheDocument();
+        expect(screen.queryByLabelText(/Nombre/)).not.toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Reservar' })).toBeDisabled();
+    });
+    it('renews with the renewal token and, once the edge says the hold is gone, sends the requester back', async () => {
+        vi.useFakeTimers({ shouldAdvanceTime: true });
+        const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+        vi.mocked(renewBookingHold)
+            .mockResolvedValueOnce({ ...HELD, renew: 'renew-2', lockedUntil: '2026-10-15T13:05:00.000Z' })
+            .mockRejectedValueOnce({
+            response: {
+                status: 409,
+                data: { code: 'HOLD_EXPIRED', message: 'La reserva expiró; elige un horario nuevamente' },
+            },
+        });
+        renderStep(bookingStep(), { 'email-step': 'ana@correo.com', 'name-step': 'Ana Gómez' });
+        await reserveFirstHour(user);
+        expect(await screen.findByRole('button', { name: 'Cambiar' })).toBeInTheDocument();
+        await act(async () => {
+            await vi.advanceTimersByTimeAsync(60000);
+        });
+        expect(renewBookingHold).toHaveBeenLastCalledWith(expect.anything(), { renew: 'renew-1', hold: 'secret-1' });
+        await act(async () => {
+            await vi.advanceTimersByTimeAsync(60000);
+        });
+        expect(renewBookingHold).toHaveBeenLastCalledWith(expect.anything(), { renew: 'renew-2', hold: 'secret-1' });
+        expect(await screen.findByRole('alert')).toHaveTextContent('Tu reserva venció; elige la hora de nuevo.');
+        expect(screen.getByRole('button', { name: 'Agendar cita' })).toBeInTheDocument();
+    });
+    it('reloads the offer and retries once when a person token went stale', async () => {
+        const user = userEvent.setup();
+        vi.mocked(fetchBookingOffer).mockImplementation((_route, query) => Promise.resolve(query?.person
+            ? { ...OFFER, days: [TODAY] }
+            : {
+                ...OFFER,
+                personSelection: 'REQUIRED',
+                persons: [
+                    {
+                        token: vi.mocked(fetchBookingOffer).mock.calls.length > 1 ? 'p-new' : 'p-old',
+                        name: 'Dra. Ruiz',
+                    },
+                ],
+            }));
+        vi.mocked(fetchBookingSlots)
+            .mockRejectedValueOnce({
+            response: { status: 403, data: { code: 'STALE_OFFER', message: 'Esa persona ya no está disponible' } },
+        })
+            .mockResolvedValueOnce([SLOT]);
+        renderStep(bookingStep({ personSelectionMode: PersonSelectionMode.REQUIRED }), {
+            'email-step': 'ana@correo.com',
+            'name-step': 'Ana Gómez',
+        });
+        const open = await screen.findByRole('button', { name: 'Agendar cita' });
+        await waitFor(() => expect(open).toBeEnabled());
+        await user.click(open);
+        await user.click(await screen.findByText('Dra. Ruiz'));
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        await waitFor(() => expect(today()).toBeEnabled());
+        await user.click(today());
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        expect(await screen.findByRole('button', { name: /^09:00/ })).toBeInTheDocument();
+        expect(vi.mocked(fetchBookingSlots).mock.calls.map((call) => call[2]?.person)).toEqual(['p-old', 'p-new']);
+    });
+    it('lets the requester pick the event template and books with its handle and duration', async () => {
+        const user = userEvent.setup();
+        vi.mocked(fetchBookingOffer).mockResolvedValue({
+            ...OFFER,
+            requesterPicksType: true,
+            eventTemplates: [
+                { token: 'tt-1', name: 'Valoración', durationMinutes: 30 },
+                { token: 'tt-2', name: 'Asesoría de crédito', description: 'Con un asesor', durationMinutes: 45 },
+            ],
+        });
+        vi.mocked(holdBookingSlot).mockResolvedValue({
+            ...HELD,
+            eventTemplate: { name: 'Asesoría de crédito', durationMinutes: 45 },
+        });
+        renderStep(bookingStep(), { 'email-step': 'ana@correo.com', 'name-step': 'Ana Gómez' });
+        const open = await screen.findByRole('button', { name: 'Agendar cita' });
+        await waitFor(() => expect(open).toBeEnabled());
+        await user.click(open);
+        await user.click(await screen.findByRole('button', { name: /Asesoría de crédito/ }));
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        await waitFor(() => expect(today()).toBeEnabled());
+        await user.click(today());
+        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: 'Reservar' }));
+        expect(fetchBookingOffer).toHaveBeenLastCalledWith(expect.anything(), { eventTemplate: 'tt-2' });
+        expect(fetchBookingSlots).toHaveBeenLastCalledWith(expect.anything(), TODAY, { eventTemplate: 'tt-2' });
+        expect(holdBookingSlot).toHaveBeenCalledWith(expect.anything(), {
+            slot: 'slot-1',
+            contact: { name: 'Ana Gómez', email: 'ana@correo.com' },
+            eventTemplate: 'tt-2',
+        });
+        expect(await screen.findByText('Asesoría de crédito · 45 min')).toBeInTheDocument();
+    });
+    it('asks for no type when the step does not let the requester pick one', async () => {
+        const user = userEvent.setup();
+        vi.mocked(fetchBookingOffer).mockResolvedValue({
+            ...OFFER,
+            requesterPicksType: false,
+            eventTemplates: [
+                { token: 'tt-1', name: 'Valoración', durationMinutes: 30 },
+                { token: 'tt-2', name: 'Asesoría de crédito', durationMinutes: 45 },
+            ],
+        });
+        renderStep(bookingStep(), { 'email-step': 'ana@correo.com', 'name-step': 'Ana Gómez' });
+        await reserveFirstHour(user);
+        expect(holdBookingSlot).toHaveBeenCalledWith(expect.anything(), {
+            slot: 'slot-1',
+            contact: { name: 'Ana Gómez', email: 'ana@correo.com' },
+        });
+    });
+    it('offers to retry when the offer does not load, and loads it on retry', async () => {
+        const user = userEvent.setup();
+        vi.mocked(fetchBookingOffer)
+            .mockRejectedValueOnce({ response: { status: 500, data: { code: 'INTERNAL', message: 'Algo falló' } } })
+            .mockResolvedValue(OFFER);
+        renderStep(bookingStep(), { 'email-step': 'ana@correo.com', 'name-step': 'Ana Gómez' });
+        expect(await screen.findByRole('alert')).toHaveTextContent('Algo falló');
+        expect(screen.getByRole('button', { name: 'Agendar cita' })).toBeDisabled();
+        await user.click(screen.getByRole('button', { name: 'Reintentar' }));
+        await waitFor(() => expect(screen.getByRole('button', { name: 'Agendar cita' })).toBeEnabled());
+        expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+        expect(fetchBookingOffer).toHaveBeenCalledTimes(2);
+    });
+});