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

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

@@ -0,0 +1,177 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import ErkBookingPicker from './ErkBookingPicker';
+import { withFormStepProviders } from '../../FormSteps/@StoryDecorators/FormStepDecorator';
+import { BookingMode, 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 },
+    { id: 's-6', startTime: '16:00', endTime: '16:50', available: true },
+];
+function mockFetchSlots() {
+    return new Promise((resolve) => setTimeout(() => resolve(SLOTS), 300));
+}
+const PERSONS = [
+    { id: 'p-1', name: 'María González', role: 'Asesora' },
+    { id: 'p-2', name: 'Carlos Ruiz', role: 'Técnico' },
+];
+/** Controlled wrapper so the picker's value is interactive in Storybook. */
+function Interactive(args) {
+    const [value, setValue] = useState(args.value);
+    return (_jsx("div", { style: { maxWidth: 660 }, children: _jsx(ErkBookingPicker, { ...args, value: value, onChange: setValue }) }));
+}
+const meta = {
+    component: ErkBookingPicker,
+    tags: ['autodocs'],
+    decorators: [withFormStepProviders],
+    render: Interactive,
+    args: {
+        // Supplied by the Interactive wrapper; declared here so stories don't each repeat it.
+        onChange: () => undefined,
+    },
+};
+export default meta;
+/** Full flow: person → date → time. */
+export const WithPersonSelection = {
+    args: {
+        value: null,
+        label: 'Seleccionar cita',
+        description: 'Elige profesional, día y hora.',
+        durationMinutes: 50,
+        personSelectionMode: PersonSelectionMode.REQUIRED,
+        persons: PERSONS,
+        fetchSlots: mockFetchSlots,
+    },
+};
+/** Optional person — adds a "Cualquiera" option. */
+export const PersonOptional = {
+    args: {
+        value: null,
+        label: 'Reservar turno',
+        description: 'Puedes elegir o dejar que asignemos.',
+        durationMinutes: 30,
+        personSelectionMode: PersonSelectionMode.OPTIONAL,
+        persons: PERSONS,
+        fetchSlots: mockFetchSlots,
+    },
+};
+/** No person selection → straight to date + time. */
+export const NoPerson = {
+    args: {
+        value: null,
+        label: 'Seleccionar horario',
+        description: 'Elige tu día y hora.',
+        durationMinutes: 60,
+        personSelectionMode: PersonSelectionMode.NONE,
+        fetchSlots: mockFetchSlots,
+    },
+};
+/** The email comes from an earlier step of the form: the picker only asks for the name. */
+export const EmailFromStep = {
+    args: {
+        value: null,
+        label: 'Agendar cita',
+        description: 'Elige y déjanos tu nombre.',
+        durationMinutes: 45,
+        personSelectionMode: PersonSelectionMode.OPTIONAL,
+        persons: PERSONS,
+        knownContact: { email: 'juan@correo.com' },
+        fetchSlots: mockFetchSlots,
+    },
+};
+/** Full config: name and email asked in the picker, lock notice, in-person mode and the organization clock. */
+export const Complete = {
+    args: {
+        value: null,
+        label: 'Agendar cita',
+        description: 'Soporte postventa',
+        durationMinutes: 60,
+        bookingMode: BookingMode.IN_PERSON,
+        temporaryLockMinutes: 15,
+        personSelectionMode: PersonSelectionMode.OPTIONAL,
+        persons: PERSONS,
+        askEmail: true,
+        timeZone: 'America/Bogota',
+        fetchSlots: mockFetchSlots,
+    },
+};
+/** A hold that lapsed after it was made: the requester is sent back to the hours with the reason. */
+export const Lapsed = {
+    args: {
+        value: null,
+        label: 'Agendar cita',
+        durationMinutes: 30,
+        personSelectionMode: PersonSelectionMode.NONE,
+        lapsed: 'Tu reserva venció; elige la hora de nuevo.',
+        fetchSlots: mockFetchSlots,
+    },
+};
+/** Already booked / read-only summary. */
+export const ReadOnly = {
+    args: {
+        readOnly: true,
+        label: 'Cita confirmada',
+        durationMinutes: 50,
+        value: {
+            type: 'BOOKING_VALUE',
+            slotId: 's-3',
+            date: '2026-07-02',
+            startTime: '11:00',
+            endTime: '11:50',
+            personName: 'María González',
+            status: 'CONFIRMED',
+        },
+    },
+};
+/** Several event templates: the requester picks what they need first, and its duration rules the hours. */
+export const PickEventTemplate = {
+    args: {
+        value: null,
+        label: 'Agendar cita',
+        description: 'Elige qué necesitas, el día y la hora.',
+        durationMinutes: 30,
+        bookingMode: BookingMode.VIRTUAL,
+        personSelectionMode: PersonSelectionMode.OPTIONAL,
+        persons: PERSONS,
+        eventTemplates: [
+            { id: 't-1', name: 'Valoración', description: 'Primera visita, sin costo.', durationMinutes: 30 },
+            {
+                id: 't-2',
+                name: 'Asesoría de crédito',
+                description: 'Revisamos tu caso con un asesor.',
+                durationMinutes: 45,
+            },
+            { id: 't-3', name: 'Firma de documentos', durationMinutes: 60, bookingMode: BookingMode.IN_PERSON },
+        ],
+        timeZone: 'America/Bogota',
+        fetchSlots: mockFetchSlots,
+    },
+};
+/** Booked with an event template: the summary names it with its duration. */
+export const BookedWithEventTemplate = {
+    args: {
+        label: 'Agendar cita',
+        durationMinutes: 45,
+        value: {
+            type: 'BOOKING_VALUE',
+            date: '2026-07-02',
+            startTime: '11:00',
+            endTime: '11:45',
+            personName: 'María González',
+            status: 'PENDING',
+            eventTemplate: { name: 'Asesoría de crédito', durationMinutes: 45 },
+        },
+    },
+};
+/** The offer did not load: the entry card stays disabled and offers "Reintentar". */
+export const OfferFailed = {
+    args: {
+        value: null,
+        label: 'Agendar cita',
+        durationMinutes: 30,
+        disabled: true,
+        loadError: 'No pudimos cargar los horarios.',
+        onRetryLoad: () => undefined,
+    },
+};

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

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

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { composeStories } from '@storybook/react-vite';
+import { describe, expect, it } from 'vitest';
+import '@testing-library/jest-dom';
+import { format } from 'date-fns';
+import { es } from 'date-fns/locale';
+import * as stories from './ErkBookingPicker.stories';
+const { Complete } = composeStories(stories);
+function clickableToday() {
+    return screen.getByRole('button', { name: format(new Date(), "EEEE d 'de' MMMM 'de' yyyy", { locale: es }) });
+}
+describe('ErkBookingPicker Complete story', () => {
+    it('opens the wizard in a modal, completes it, and reserving closes the modal leaving the summary', async () => {
+        const user = userEvent.setup();
+        render(_jsx(Complete, {}));
+        // Trigger → modal con el wizard
+        await user.click(screen.getByRole('button', { name: 'Agendar cita' }));
+        expect(await screen.findByRole('heading', { name: '¿Con quién quieres agendar?' })).toBeInTheDocument();
+        // 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' });
+        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();
+        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' });
+        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();
+        expect(screen.getByRole('button', { name: 'Cambiar' })).toBeInTheDocument();
+        // "Cambiar" limpia el valor y vuelve al botón de agendar
+        await user.click(screen.getByRole('button', { name: 'Cambiar' }));
+        expect(screen.getByRole('button', { name: 'Agendar cita' })).toBeInTheDocument();
+    });
+});

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

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