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

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

@@ -0,0 +1,440 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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 { 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-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() {
+    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 → reserve, asking for name and email', async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        const fetchSlots = vi.fn(() => Promise.resolve(SLOTS));
+        renderPicker({
+            onChange,
+            personSelectionMode: PersonSelectionMode.OPTIONAL,
+            persons: PERSONS,
+            askEmail: true,
+            fetchSlots,
+        });
+        await user.click(screen.getByRole('button', { name: 'Agendar cita' }));
+        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);
+        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' }));
+        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();
+        await user.click(await hour('09:00'));
+        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();
+        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',
+            date: format(new Date(), 'yyyy-MM-dd'),
+            startTime: '09:00',
+            endTime: '09:50',
+            personId: 'p-1',
+            personName: 'María González',
+            contactName: 'Juan Pérez',
+            contactEmail: 'juan@correo.com',
+            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();
+        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();
+        expect(screen.queryByText('Persona')).not.toBeInTheDocument();
+    });
+    it('allows navigating back through the breadcrumb without losing the selection', async () => {
+        const user = userEvent.setup();
+        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();
+        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();
+    });
+    it('offers only the days the host names, and holds the slot before the value is set', async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        const today = format(new Date(), 'yyyy-MM-dd');
+        const fetchDays = vi.fn(() => Promise.resolve([today]));
+        const holdSlot = vi.fn(() => Promise.resolve({
+            appointment: 'appt-1',
+            hold: 'secret-1',
+            lockedUntil: '2026-09-22T14:15:00.000Z',
+            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 });
+        const todayButton = clickableToday();
+        const enabledDays = screen
+            .getAllByRole('button')
+            .filter((b) => /^\d{1,2}$/.test(b.textContent ?? '') && !b.disabled);
+        expect(enabledDays).toEqual([todayButton]);
+        await user.click(todayButton);
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        await user.click(await hour('09:00'));
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        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',
+            status: 'PENDING',
+        }));
+    });
+    it('goes back to the hours with the reason when the hold is refused', async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        const fetchSlots = vi.fn(() => Promise.resolve(SLOTS));
+        const holdSlot = vi.fn(() => Promise.reject(new Error('Ese horario ya fue reservado por alguien más')));
+        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();
+        expect(fetchSlots).toHaveBeenCalledTimes(2);
+        expect(onChange).not.toHaveBeenCalled();
+    });
+    it('keeps the hours of the last day picked when an earlier answer arrives late', async () => {
+        const user = userEvent.setup();
+        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' }));
+        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' }));
+        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/Shared/ErkDatePicker/ErkDatePicker.js

@@ -2,11 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useMemo } from 'react';
 import { isValid } from 'date-fns';
 import { InputAdornment, styled, Dialog as MuiDialog } from '@mui/material';
-import { MobileDatePicker as MuiDatePicker, MobileDateTimePicker as MuiDateTimePicker, DatePickerToolbar as MuiDatePickerToolbar, DateTimePickerToolbar as MuiDateTimePickerToolbar, usePickerContext, usePickerAdapter, } from '@mui/x-date-pickers';
-import { PickerDay as MuiPickerDay } from '@mui/x-date-pickers/PickerDay';
+import { MobileDatePicker as MuiDatePicker, MobileDateTimePicker as MuiDateTimePicker, DatePickerToolbar as MuiDatePickerToolbar, DateTimePickerToolbar as MuiDateTimePickerToolbar, usePickerContext, usePickerAdapter, PickerDay as MuiPickerDay, renderTimeViewClock, } from '@mui/x-date-pickers';
 import { StyledTextField } from '../ErkTextField/ErkTextField';
 import CalendarIcon from '../../Icons/CalendarIcon';
-import { renderTimeViewClock } from '@mui/x-date-pickers/timeViewRenderers';
 const StyledDateTimePicker = styled(MuiDateTimePicker, {
     shouldForwardProp: (propName) => propName !== 'size',
 })(({ disabled, readOnly, size }) => ({

package/dist/Shared/ErkDateRangePicker/ErkDateRangePicker.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import { MobileDateRangePickerProps as MuiDateRangePickerProps } from '@mui/x-date-pickers-pro/MobileDateRangePicker';
-import { DateRange } from '@mui/x-date-pickers-pro';
-import { PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts';
+import { PickersShortcutsItem } from '@mui/x-date-pickers';
+import { MobileDateRangePickerProps as MuiDateRangePickerProps, DateRange } from '@mui/x-date-pickers-pro';
 import { ErkTextFieldProps } from '../ErkTextField/ErkTextField';
 interface ErkDateRangePickerProps extends Omit<MuiDateRangePickerProps, 'ref' | 'onChange' | 'value' | 'slotProps'>, Pick<ErkTextFieldProps, 'error' | 'required' | 'helperText' | 'size'> {
     onChange?: (dateRange: DateRange<Date>) => void;

package/dist/Shared/ErkDateRangePicker/ErkDateRangePicker.js

@@ -2,8 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useMemo } from 'react';
 import { InputAdornment, styled, Dialog as MuiDialog } from '@mui/material';
 import { DatePickerToolbar as MuiDatePickerToolbar, usePickerContext, usePickerAdapter, } from '@mui/x-date-pickers';
-import { MobileDateRangePicker as MuiDateRangePicker, } from '@mui/x-date-pickers-pro/MobileDateRangePicker';
-import { DateRangePickerDay as MuiDateRangePickerDay } from '@mui/x-date-pickers-pro';
+import { MobileDateRangePicker as MuiDateRangePicker, DateRangePickerDay as MuiDateRangePickerDay, } from '@mui/x-date-pickers-pro';
 import { isValid } from 'date-fns';
 import { StyledTextField } from '../ErkTextField/ErkTextField';
 import CalendarIcon from '../../Icons/CalendarIcon';

package/dist/Shared/ErkIconButton/ErkIconButton.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface ErkIconButtonProps {
+    /** Tooltip y nombre accesible del botón. */
+    title: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    /** Muestra un spinner en lugar del icono (y deshabilita el botón). */
+    loading?: boolean;
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * Botón de icono de la casa: cuadrado redondeado con la misma altura y borde
+ * que los inputs del form (theming vía variables --eureka-*), con tooltip.
+ */
+declare function ErkIconButton({ title, onClick, disabled, loading, children, className, }: ErkIconButtonProps): JSX.Element;
+export default ErkIconButton;

package/dist/Shared/ErkIconButton/ErkIconButton.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CircularProgress, Tooltip } from '@mui/material';
+import styles from './ErkIconButton.module.css';
+/**
+ * Botón de icono de la casa: cuadrado redondeado con la misma altura y borde
+ * que los inputs del form (theming vía variables --eureka-*), con tooltip.
+ */
+function ErkIconButton({ title, onClick, disabled = false, loading = false, children, className, }) {
+    return (_jsx(Tooltip, { title: title, children: _jsx("span", { className: styles.wrap, children: _jsx("button", { type: "button", "aria-label": title, disabled: disabled || loading, className: className ? `${styles.button} ${className}` : styles.button, onClick: onClick, children: loading ? _jsx(CircularProgress, { size: 16 }) : children }) }) }));
+}
+export default ErkIconButton;

package/dist/Shared/ErkIconButton/ErkIconButton.module.css

@@ -0,0 +1,41 @@
+.wrap {
+    display: inline-flex;
+    flex-shrink: 0;
+}
+
+/* Mismo alto, radio y borde que los inputs del form (ErkTextField small) */
+.button {
+    height: 31px;
+    width: 31px;
+    box-sizing: border-box;
+    border: 1px solid var(--eureka-outline, #b8b8b8);
+    border-radius: 10px;
+    background-color: var(--eureka-bg, #fff);
+    color: var(--eureka-text, #293241);
+    display: grid;
+    place-items: center;
+    padding: 0;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+}
+
+.button svg {
+    width: 18px;
+    height: 18px;
+}
+
+.button:hover:not(:disabled) {
+    background-color: rgba(0, 0, 0, 0.04);
+    border-color: var(--eureka-primary, #3d5a7f);
+    color: var(--eureka-primary, #3d5a7f);
+}
+
+.button:focus-visible {
+    outline: 2px solid var(--eureka-primary, #3d5a7f);
+    outline-offset: 1px;
+}
+
+.button:disabled {
+    opacity: 0.5;
+    cursor: default;
+}

package/dist/Shared/ErkLocationField/ErkLocationField.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { LocationInputMode, LocationStep, LocationStepValue } from '../../@Types/LocationFormStep';
+export interface ErkLocationFieldProps {
+    value?: LocationStepValue | null;
+    onChange: (value: LocationStepValue | null) => void;
+    allowedModes: LocationInputMode[];
+    defaultMode?: LocationInputMode;
+    addressFields?: LocationStep['addressFields'];
+    /** ISO-2 para acotar el buscador (ej. ['co']). */
+    regionCodes?: string[];
+    error?: boolean;
+    helperText?: string | null;
+    required?: boolean;
+    readOnly?: boolean;
+    inputRef?: React.Ref<HTMLInputElement>;
+}
+/**
+ * Campo de ubicación: una sola fila con el buscador de direcciones (Base UI +
+ * Google Places) y botones de acción — GPS y edición manual (en modal). Al
+ * seleccionar, el campo muestra la dirección con opciones de editar/limpiar.
+ * La config por campo (fijo / omitir) se aplica a todos los modos.
+ */
+declare function ErkLocationField({ value, onChange, allowedModes, addressFields, regionCodes, error, helperText, required, readOnly, inputRef, }: ErkLocationFieldProps): JSX.Element;
+export default ErkLocationField;