@arquimedes.co/eureka-forms 3.0.72-test → 3.0.73-test

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

@@ -14,17 +14,17 @@ declare const meta: {
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-/** Full flow: person → date → time. */
+/** Full flow: person → day and hour → reserve. */
 export declare const WithPersonSelection: Story;
 /** Optional person — adds a "Cualquiera" option. */
 export declare const PersonOptional: Story;
-/** No person selection → straight to date + time. */
+/** No person selection → straight to day and hour. */
 export declare const NoPerson: Story;
-/** The email comes from an earlier step of the form: the picker only asks for the name. */
+/** The email comes from an earlier step of the form: the field says where the confirmation goes, the picker only asks for the name. */
 export declare const EmailFromStep: Story;
 /** Full config: name and email asked in the picker, lock notice, in-person mode and the organization clock. */
 export declare const Complete: Story;
-/** A hold that lapsed after it was made: the requester is sent back to the hours with the reason. */
+/** A hold that lapsed after it was made: the reason shows under the button and the wizard reopens on day and hour. */
 export declare const Lapsed: Story;
 /** Already booked / read-only summary. */
 export declare const ReadOnly: Story;
@@ -32,5 +32,9 @@ export declare const ReadOnly: Story;
 export declare const PickEventTemplate: Story;
 /** Booked with an event template: the summary names it with its duration. */
 export declare const BookedWithEventTemplate: Story;
-/** The offer did not load: the entry card stays disabled and offers "Reintentar". */
+/** The offer did not load: the button stays disabled and the field offers "Reintentar". */
 export declare const OfferFailed: Story;
+/** Required and left empty on submit: button and message in the form's error colour. */
+export declare const RequiredError: Story;
+/** A slot held while the form is being finished: the row says until when, and "Cambiar" gives it back. */
+export declare const Reserved: Story;

package/dist/Shared/ErkBookingPicker/ErkBookingPicker.stories.js

@@ -32,7 +32,7 @@ const meta = {
     },
 };
 export default meta;
-/** Full flow: person → date → time. */
+/** Full flow: person → day and hour → reserve. */
 export const WithPersonSelection = {
     args: {
         value: null,
@@ -56,7 +56,7 @@ export const PersonOptional = {
         fetchSlots: mockFetchSlots,
     },
 };
-/** No person selection → straight to date + time. */
+/** No person selection → straight to day and hour. */
 export const NoPerson = {
     args: {
         value: null,
@@ -67,7 +67,7 @@ export const NoPerson = {
         fetchSlots: mockFetchSlots,
     },
 };
-/** The email comes from an earlier step of the form: the picker only asks for the name. */
+/** The email comes from an earlier step of the form: the field says where the confirmation goes, the picker only asks for the name. */
 export const EmailFromStep = {
     args: {
         value: null,
@@ -96,7 +96,7 @@ export const Complete = {
         fetchSlots: mockFetchSlots,
     },
 };
-/** A hold that lapsed after it was made: the requester is sent back to the hours with the reason. */
+/** A hold that lapsed after it was made: the reason shows under the button and the wizard reopens on day and hour. */
 export const Lapsed = {
     args: {
         value: null,
@@ -164,7 +164,7 @@ export const BookedWithEventTemplate = {
         },
     },
 };
-/** The offer did not load: the entry card stays disabled and offers "Reintentar". */
+/** The offer did not load: the button stays disabled and the field offers "Reintentar". */
 export const OfferFailed = {
     args: {
         value: null,
@@ -175,3 +175,35 @@ export const OfferFailed = {
         onRetryLoad: () => undefined,
     },
 };
+/** Required and left empty on submit: button and message in the form's error colour. */
+export const RequiredError = {
+    args: {
+        value: null,
+        label: 'Agendar cita',
+        description: 'Elige el día y la hora de tu asesoría.',
+        required: true,
+        durationMinutes: 60,
+        bookingMode: BookingMode.VIRTUAL,
+        error: 'Selecciona una cita',
+        fetchSlots: mockFetchSlots,
+    },
+};
+/** A slot held while the form is being finished: the row says until when, and "Cambiar" gives it back. */
+export const Reserved = {
+    args: {
+        label: 'Agendar cita',
+        required: true,
+        durationMinutes: 60,
+        timeZone: 'America/Bogota',
+        knownContact: { email: 'laura@correo.com' },
+        value: {
+            type: 'BOOKING_VALUE',
+            date: '2026-10-30',
+            startTime: '08:00',
+            endTime: '09:00',
+            personName: 'Ana Rodríguez',
+            status: 'PENDING',
+            lockedUntil: '2026-10-30T13:15:00.000Z',
+        },
+    },
+};

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

@@ -16,32 +16,35 @@ describe('ErkBookingPicker Complete story', () => {
         const user = userEvent.setup();
         render(_jsx(Complete, {}));
         // Trigger → modal con el wizard
-        await user.click(screen.getByRole('button', { name: 'Agendar cita' }));
+        expect(screen.getByText('Te pediremos nombre y correo al reservar.')).toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: 'Elegir horario' }));
         expect(await screen.findByRole('heading', { name: '¿Con quién quieres agendar?' })).toBeInTheDocument();
+        const card = screen.getByRole('dialog').firstElementChild;
+        const cardClass = card.className;
         // Persona
         await user.click(screen.getByText('María González'));
         await user.click(screen.getByRole('button', { name: 'Siguiente' }));
-        // Día
-        await screen.findByRole('heading', { name: 'Elige un día' });
+        // Día y hora, en un solo paso (los slots del mock llegan con delay)
+        await waitFor(() => expect(screen.getByRole('button', { current: 'step' })).toHaveTextContent('Día y hora'));
         await user.click(clickableToday());
-        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
-        // Hora (los slots del mock llegan con delay)
-        await screen.findByRole('heading', { name: 'Elige una hora' });
-        expect(screen.getByText(/^Horas en hora de Bogotá/)).toBeInTheDocument();
+        expect(await screen.findByText(/^Hora de Bogotá/)).toBeInTheDocument();
         await user.click(await screen.findByRole('button', { name: /^09:00/ }));
         await user.click(screen.getByRole('button', { name: 'Siguiente' }));
-        // Reservar
-        await screen.findByRole('heading', { name: 'Revisa y reserva tu horario' });
+        // Reservar: misma tarjeta, ahora con los datos
+        expect(await screen.findByRole('heading', { name: 'Tus datos' })).toBeInTheDocument();
+        expect(screen.getByRole('dialog').firstElementChild).toBe(card);
+        expect(card.className).toBe(cardClass);
         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: 'Reservar' }));
-        // El modal se cierra y queda el resumen compacto con opción de cambiar
-        await waitFor(() => expect(screen.queryByRole('heading', { name: 'Revisa y reserva tu horario' })).not.toBeInTheDocument());
-        expect(screen.getByText(/09:00–09:50 · con María González/)).toBeInTheDocument();
-        expect(screen.getByText(/Envía el formulario para confirmar la cita/)).toBeInTheDocument();
+        // El modal se cierra y queda la fila del horario con opción de cambiar
+        await waitFor(() => expect(screen.queryByRole('heading', { name: 'Tus datos' })).not.toBeInTheDocument());
+        expect(screen.getByText(/ · 09:00 – 09:50$/)).toBeInTheDocument();
+        expect(screen.getByText('María González · Horario reservado')).toBeInTheDocument();
+        expect(screen.getByText(/Te confirmaremos a/)).toHaveTextContent('Te confirmaremos a juan@correo.com cuando envíes el formulario.');
         expect(screen.getByRole('button', { name: 'Cambiar' })).toBeInTheDocument();
-        // "Cambiar" limpia el valor y vuelve al botón de agendar
+        // "Cambiar" limpia el valor y vuelve al botón de elegir
         await user.click(screen.getByRole('button', { name: 'Cambiar' }));
-        expect(screen.getByRole('button', { name: 'Agendar cita' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Elegir horario' })).toBeInTheDocument();
     });
 });

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useState } from 'react';
 import { describe, expect, it, vi } from 'vitest';
@@ -30,24 +30,35 @@ function dayName(date) {
 function clickableToday() {
     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". */
+/** A slot button by its start time; its accessible name is the whole range ("09:00 – 09:50"). */
 function hour(time) {
     return screen.findByRole('button', { name: new RegExp(`^${time}`) });
 }
+/** The step of the stepper on screen. */
+function currentStep() {
+    return screen.getByRole('button', { current: 'step' });
+}
+/** Waits until the wizard is on the step with that label. */
+async function onStep(label) {
+    await waitFor(() => expect(currentStep()).toHaveTextContent(label));
+}
+/** The modal's card: the dialog's only child. */
+function card() {
+    return screen.getByRole('dialog').firstElementChild;
+}
 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(screen.getByRole('button', { name: 'Elegir horario' }));
     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' });
+    await onStep('Reservar');
 }
 describe('ErkBookingPicker (wizard)', () => {
-    it('drives the full flow: person → day → hour → reserve, asking for name and email', async () => {
+    it('drives the full flow: person → day and hour → reserve, asking for name and email', async () => {
         const user = userEvent.setup();
         const onChange = vi.fn();
         const fetchSlots = vi.fn(() => Promise.resolve(SLOTS));
@@ -58,28 +69,34 @@ describe('ErkBookingPicker (wizard)', () => {
             askEmail: true,
             fetchSlots,
         });
-        await user.click(screen.getByRole('button', { name: 'Agendar cita' }));
+        expect(screen.getByText('Te pediremos nombre y correo al reservar.')).toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: 'Elegir horario' }));
         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(screen.getByRole('button', { name: /María González/ })).toHaveAttribute('aria-pressed', 'true');
         expect(next).toBeEnabled();
         await user.click(next);
-        expect(await screen.findByRole('heading', { name: 'Elige un día' })).toBeInTheDocument();
+        // Day and hour are one step: the hour column waits for a day.
+        await onStep('Día y hora');
+        expect(screen.getByText('Elige un día para ver sus horas.')).toBeInTheDocument();
         expect(screen.getByRole('button', { name: 'Siguiente' })).toBeDisabled();
         await user.click(clickableToday());
-        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
-        expect(await screen.findByRole('heading', { name: 'Elige una hora' })).toBeInTheDocument();
         expect(fetchSlots).toHaveBeenCalledWith({ personId: 'p-1', date: format(new Date(), 'yyyy-MM-dd') });
-        // 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();
+        // One flat list of hours: no part-of-day groups, no "first available" tag.
+        expect(await hour('09:00')).toHaveTextContent(/^09:00$/);
+        expect(screen.getByRole('button', { name: /^14:00/ })).toBeInTheDocument();
+        expect(screen.queryByText('Mañana')).not.toBeInTheDocument();
+        expect(screen.queryByText(/Primera disponible/)).not.toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Siguiente' })).toBeDisabled();
         await user.click(await hour('09:00'));
+        // The footer sums up what is picked.
+        expect(screen.getByText('09:00 – 09:50', { selector: 'span' })).toBeInTheDocument();
         await user.click(screen.getByRole('button', { name: 'Siguiente' }));
-        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();
+        await onStep('Reservar');
+        expect(screen.getByRole('heading', { name: 'Tus datos' })).toBeInTheDocument();
+        expect(screen.getByText(/La cita queda confirmada 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();
@@ -118,6 +135,12 @@ describe('ErkBookingPicker (wizard)', () => {
         await walkToConfirm(user);
         expect(screen.queryByLabelText(/Nombre/)).not.toBeInTheDocument();
         expect(screen.queryByLabelText(/Correo/)).not.toBeInTheDocument();
+        // What the form already has is shown, with where it came from.
+        expect(screen.getByRole('heading', { name: 'Confirmación' })).toBeInTheDocument();
+        expect(within(card()).getByText('Ana Gómez')).toBeInTheDocument();
+        expect(screen.getByText('del campo Nombre')).toBeInTheDocument();
+        expect(within(card()).getByText('ana@correo.com')).toBeInTheDocument();
+        expect(screen.getByText('del campo Correo')).toBeInTheDocument();
         await user.click(screen.getByRole('button', { name: 'Reservar' }));
         expect(holdSlot).toHaveBeenCalledWith({
             slot: SLOTS[0],
@@ -138,8 +161,8 @@ describe('ErkBookingPicker (wizard)', () => {
     it('skips the person step when personSelectionMode is NONE', async () => {
         const user = userEvent.setup();
         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();
+        await user.click(screen.getByRole('button', { name: 'Elegir horario' }));
+        await onStep('Día y hora');
         expect(screen.queryByText('¿Con quién quieres agendar?')).not.toBeInTheDocument();
         expect(screen.queryByText('Persona')).not.toBeInTheDocument();
     });
@@ -150,11 +173,11 @@ describe('ErkBookingPicker (wizard)', () => {
             persons: PERSONS,
             fetchSlots: () => Promise.resolve(SLOTS),
         });
-        await user.click(screen.getByRole('button', { name: 'Agendar cita' }));
+        await user.click(screen.getByRole('button', { name: 'Elegir horario' }));
         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();
-        await user.click(screen.getByRole('button', { name: /Persona/ }));
+        await onStep('Día y hora');
+        await user.click(screen.getByRole('button', { name: 'Persona' }));
         expect(await screen.findByRole('heading', { name: '¿Con quién quieres agendar?' })).toBeInTheDocument();
         expect(screen.getByRole('button', { name: 'Siguiente' })).toBeEnabled();
     });
@@ -178,8 +201,8 @@ describe('ErkBookingPicker (wizard)', () => {
             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();
+        await user.click(screen.getByRole('button', { name: 'Elegir horario' }));
+        await onStep('Día y hora');
         expect(fetchDays).toHaveBeenCalledWith({ personId: undefined });
         const todayButton = clickableToday();
         const enabledDays = screen
@@ -187,7 +210,7 @@ describe('ErkBookingPicker (wizard)', () => {
             .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' }));
+        expect(todayButton).toHaveAttribute('aria-pressed', 'true');
         await user.click(await hour('09:00'));
         await user.click(screen.getByRole('button', { name: 'Siguiente' }));
         await user.click(await screen.findByRole('button', { name: 'Reservar' }));
@@ -213,7 +236,7 @@ describe('ErkBookingPicker (wizard)', () => {
         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();
+        expect(currentStep()).toHaveTextContent('Día y hora');
         expect(fetchSlots).toHaveBeenCalledTimes(2);
         expect(onChange).not.toHaveBeenCalled();
     });
@@ -230,7 +253,7 @@ describe('ErkBookingPicker (wizard)', () => {
             fetchDays: () => Promise.resolve([todayKey, tomorrowKey]),
             fetchSlots,
         });
-        await user.click(screen.getByRole('button', { name: 'Agendar cita' }));
+        await user.click(screen.getByRole('button', { name: 'Elegir horario' }));
         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' }));
@@ -239,7 +262,6 @@ describe('ErkBookingPicker (wizard)', () => {
         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();
     });
@@ -250,9 +272,8 @@ describe('ErkBookingPicker (wizard)', () => {
             .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(screen.getByRole('button', { name: 'Elegir horario' }));
         await user.click(clickableToday());
-        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
         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' }));
@@ -261,9 +282,8 @@ describe('ErkBookingPicker (wizard)', () => {
     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(screen.getByRole('button', { name: 'Elegir horario' }));
         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 () => {
@@ -274,7 +294,7 @@ describe('ErkBookingPicker (wizard)', () => {
             .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' }));
+        await user.click(screen.getByRole('button', { name: 'Elegir horario' }));
         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();
@@ -306,17 +326,16 @@ describe('ErkBookingPicker (wizard)', () => {
             timeZone: local,
         }).format(start);
         renderPicker({ timeZone: zone, fetchSlots: () => Promise.resolve([slot]) });
-        await user.click(screen.getByRole('button', { name: 'Agendar cita' }));
+        await user.click(screen.getByRole('button', { name: 'Elegir horario' }));
         await user.click(clickableToday());
-        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
-        expect(await screen.findByText(/^Horas en hora de Tokyo|^Horas en hora de Bogotá/)).toBeInTheDocument();
+        expect(await screen.findByText(/^Hora de (Tokyo|Bogotá) \(GMT[+-]\d+\) · citas de 50 min$/)).toBeInTheDocument();
         await user.click(await hour(slot.startTime));
-        expect(screen.getAllByText(new RegExp(`\\(${localTime} en tu hora\\)`)).length).toBeGreaterThan(0);
+        expect(screen.getByText(`${slot.startTime} es ${localTime} en tu hora.`)).toBeInTheDocument();
     });
     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' }));
+        await user.click(screen.getByRole('button', { name: 'Elegir horario' }));
         expect(screen.queryByText(/buffer/)).not.toBeInTheDocument();
     });
     it('sends the requester back to the hours when a held slot lapses', async () => {
@@ -332,8 +351,8 @@ describe('ErkBookingPicker (wizard)', () => {
         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();
+        await user.click(screen.getByRole('button', { name: 'Elegir horario' }));
+        await onStep('Día y hora');
         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));
@@ -352,8 +371,9 @@ describe('ErkBookingPicker (wizard)', () => {
             },
             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.getByText('Jueves 2 de julio · 11:00 – 11:50')).toBeInTheDocument();
+        expect(screen.getByText('María González · Reservado hasta las 10:30')).toBeInTheDocument();
+        expect(screen.getByText('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 () => {
@@ -370,21 +390,20 @@ describe('ErkBookingPicker (wizard)', () => {
             fetchSlots,
             holdSlot,
         });
-        await user.click(screen.getByRole('button', { name: 'Agendar cita' }));
+        await user.click(screen.getByRole('button', { name: 'Elegir horario' }));
         expect(await screen.findByRole('heading', { name: '¿Qué necesitas?' })).toBeInTheDocument();
-        expect(screen.getByRole('button', { name: /^1Tipo/ })).toBeInTheDocument();
+        expect(currentStep()).toHaveTextContent(/^1Tipo de atención$/);
         // 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();
+        await onStep('Día y hora');
         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(await screen.findByText(/citas de 45 min/i)).toBeInTheDocument();
         expect(fetchSlots).toHaveBeenLastCalledWith({
             personId: undefined,
             date: format(new Date(), 'yyyy-MM-dd'),
@@ -399,21 +418,24 @@ describe('ErkBookingPicker (wizard)', () => {
     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(screen.getByRole('button', { name: 'Elegir horario' }));
         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(await hour('09:00'));
         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();
+        await onStep('Día y hora');
+        expect(clickableToday()).toHaveAttribute('aria-pressed', 'false');
+        expect(screen.getByText('Elige un día para ver sus horas.')).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();
+        await user.click(screen.getByRole('button', { name: 'Elegir horario' }));
+        await onStep('Día y hora');
         expect(screen.queryByRole('heading', { name: '¿Qué necesitas?' })).not.toBeInTheDocument();
     });
     it('shows the picked event template and its duration in the compact summary', () => {
@@ -427,7 +449,7 @@ describe('ErkBookingPicker (wizard)', () => {
                 eventTemplate: { name: 'Asesoría de crédito', durationMinutes: 45 },
             },
         });
-        expect(screen.getByText('Asesoría de crédito · 45 min')).toBeInTheDocument();
+        expect(screen.getByText('Asesoría de crédito · 45 min · Horario reservado')).toBeInTheDocument();
     });
     it('offers to retry when the offer did not load', async () => {
         const user = userEvent.setup();
@@ -437,4 +459,108 @@ describe('ErkBookingPicker (wizard)', () => {
         await user.click(screen.getByRole('button', { name: 'Reintentar' }));
         expect(onRetryLoad).toHaveBeenCalledTimes(1);
     });
+    it('keeps one card of the same class and size on every step, final included', async () => {
+        const user = userEvent.setup();
+        renderPicker({
+            eventTemplates: TEMPLATES,
+            personSelectionMode: PersonSelectionMode.REQUIRED,
+            persons: PERSONS,
+            knownContact: { name: 'Ana' },
+            fetchSlots: () => Promise.resolve(SLOTS),
+        });
+        await user.click(screen.getByRole('button', { name: 'Elegir horario' }));
+        const first = card();
+        const className = first.className;
+        expect(className).not.toMatch(/cardFinal/);
+        const seen = [];
+        const check = () => {
+            expect(card()).toBe(first);
+            expect(card().className).toBe(className);
+            expect(within(card()).queryByRole('complementary')).not.toBeInTheDocument();
+            seen.push(currentStep().textContent ?? '');
+        };
+        check();
+        await user.click(screen.getByRole('button', { name: /Valoración/ }));
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        check();
+        await user.click(await screen.findByText('María González'));
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        check();
+        await user.click(clickableToday());
+        await user.click(await hour('09:00'));
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        await onStep('Reservar');
+        check();
+        expect(seen).toEqual(['1Tipo de atención', '2Persona', '3Día y hora', '4Reservar']);
+    });
+    it('jumps back from the summary of the final step to the step that sets each row', async () => {
+        const user = userEvent.setup();
+        renderPicker({
+            personSelectionMode: PersonSelectionMode.REQUIRED,
+            persons: PERSONS,
+            knownContact: { name: 'Ana' },
+            temporaryLockMinutes: 15,
+            fetchSlots: () => Promise.resolve(SLOTS),
+        });
+        await user.click(screen.getByRole('button', { name: 'Elegir horario' }));
+        await user.click(await screen.findByText('Carlos Ruiz'));
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        await user.click(clickableToday());
+        await user.click(await hour('11:00'));
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        await onStep('Reservar');
+        expect(screen.getByText('Tu cita')).toBeInTheDocument();
+        expect(screen.getByText('11:00 – 11:50 · 50 min')).toBeInTheDocument();
+        expect(screen.getByText(/Reservaremos el horario durante/)).toHaveTextContent('Reservaremos el horario durante 15 min. La cita queda confirmada cuando envíes el formulario.');
+        await user.click(screen.getByRole('button', { name: 'Cambiar el día y la hora' }));
+        await onStep('Día y hora');
+        // The selection survives the trip back.
+        expect(screen.getByRole('button', { name: /^11:00/ })).toHaveAttribute('aria-pressed', 'true');
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        await user.click(await screen.findByRole('button', { name: 'Cambiar la persona' }));
+        await onStep('Persona');
+        expect(screen.getByRole('button', { name: /Carlos Ruiz/ })).toHaveAttribute('aria-pressed', 'true');
+    });
+    it('sums up the choices in the footer, read out politely', async () => {
+        const user = userEvent.setup();
+        renderPicker({ fetchSlots: () => Promise.resolve(SLOTS) });
+        await user.click(screen.getByRole('button', { name: 'Elegir horario' }));
+        const footer = screen.getByText('Elige un día.').parentElement;
+        expect(footer).toHaveAttribute('aria-live', 'polite');
+        await user.click(clickableToday());
+        expect(footer).toHaveTextContent('Elige una hora.');
+        await user.click(await hour('09:00'));
+        expect(footer).toHaveTextContent(`${format(new Date(), 'EEE d MMM', { locale: es })}09:00 – 09:50`.replace(/^./, (c) => c.toUpperCase()));
+    });
+    it('shows the label as a form field, with the asterisk when required and no card', () => {
+        renderPicker({ required: true, description: 'Elige el día que prefieras.' });
+        expect(screen.getByText('Agendar cita *')).toBeInTheDocument();
+        expect(screen.getByText('Elige el día que prefieras.')).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Elegir horario' })).toBeEnabled();
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+    it('says where the confirmation goes when the email comes from an earlier step', () => {
+        renderPicker({ knownContact: { email: 'laura@correo.com' } });
+        expect(screen.getByText(/Te confirmaremos a/)).toHaveTextContent('Te confirmaremos a laura@correo.com cuando envíes el formulario.');
+    });
+    it('shows the required error under the button', () => {
+        renderPicker({ required: true, error: 'Selecciona una cita' });
+        expect(screen.getByRole('alert')).toHaveTextContent('Selecciona una cita');
+    });
+    it('shows a read-only appointment as confirmed, with nothing to change', () => {
+        renderPicker({
+            readOnly: true,
+            value: {
+                type: 'BOOKING_VALUE',
+                date: '2026-07-02',
+                startTime: '11:00',
+                endTime: '11:50',
+                personName: 'María González',
+                status: 'CONFIRMED',
+            },
+        });
+        expect(screen.getByText('Jueves 2 de julio · 11:00 – 11:50')).toBeInTheDocument();
+        expect(screen.getByText('María González · Cita confirmada')).toBeInTheDocument();
+        expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    });
 });

package/package.json

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