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

package/dist/App/App.stories.js

@@ -296,3 +296,192 @@ export const Postview = {
         editable: false,
     },
 };
+// ---------------------------------------------------------------------------------------------
+// Checkboxes: a full form exercising every checkbox variant side by side (sizes, required,
+// description, list mode, long label, nested steps, uncheckedSteps and a checkbox inside a
+// collapsible). Resize the preview to see the collapsed (100% width, 1-line clamp) label mode.
+// ---------------------------------------------------------------------------------------------
+const cbTextInput = (id, label, size = 2) => ({
+    id,
+    type: 'TEXTINPUT',
+    label,
+    description: '',
+    required: false,
+    size,
+    isSubject: false,
+});
+const checkboxesForm = {
+    steps: {
+        'CHECKBOX-size-1': {
+            id: 'CHECKBOX-size-1',
+            type: 'CHECKBOX',
+            label: 'Tamaño 1',
+            description: null,
+            required: false,
+            size: 1,
+        },
+        'CHECKBOX-size-2': {
+            id: 'CHECKBOX-size-2',
+            type: 'CHECKBOX',
+            label: 'Tamaño 2 con descripción',
+            description: 'Texto de ayuda debajo del checkbox.',
+            required: false,
+            size: 2,
+        },
+        'CHECKBOX-size-1-required': {
+            id: 'CHECKBOX-size-1-required',
+            type: 'CHECKBOX',
+            label: 'Obligatorio',
+            description: null,
+            required: true,
+            size: 1,
+        },
+        'CHECKBOX-size-3': {
+            id: 'CHECKBOX-size-3',
+            type: 'CHECKBOX',
+            label: 'Tamaño 3 con un label bastante largo que en escritorio se corta con puntos suspensivos',
+            description: null,
+            required: false,
+            size: 3,
+        },
+        'CHECKBOX-size-1-checked': {
+            id: 'CHECKBOX-size-1-checked',
+            type: 'CHECKBOX',
+            label: 'Marcado',
+            description: null,
+            required: false,
+            size: 1,
+            defaultValue: true,
+        },
+        'CHECKBOX-size-4': {
+            id: 'CHECKBOX-size-4',
+            type: 'CHECKBOX',
+            label: 'Tamaño 4 (ancho completo): confirmo que la información suministrada es veraz, que he leído la ' +
+                'política de tratamiento de datos personales y autorizo el uso de mis datos para los fines ' +
+                'descritos en el presente formulario',
+            description: null,
+            required: true,
+            size: 4,
+        },
+        'CHECKBOX-list': {
+            id: 'CHECKBOX-list',
+            type: 'CHECKBOX',
+            label: 'Modo lista (isList): el checkbox va antes del label y sin dos puntos',
+            description: null,
+            required: false,
+            size: 4,
+            isList: true,
+        },
+        'CHECKBOX-nested': {
+            id: 'CHECKBOX-nested',
+            type: 'CHECKBOX',
+            label: '¿Desea agregar una dirección de envío distinta?',
+            description: 'Al marcarlo aparecen los campos de la dirección.',
+            required: false,
+            size: 4,
+            steps: ['TEXTINPUT-shipping-address', 'TEXTINPUT-shipping-city'],
+        },
+        'TEXTINPUT-shipping-address': cbTextInput('TEXTINPUT-shipping-address', 'Dirección de envío', 2),
+        'TEXTINPUT-shipping-city': cbTextInput('TEXTINPUT-shipping-city', 'Ciudad', 2),
+        'CHECKBOX-unchecked-steps': {
+            id: 'CHECKBOX-unchecked-steps',
+            type: 'CHECKBOX',
+            label: 'Usar los datos de contacto registrados',
+            description: 'Al desmarcarlo aparecen los campos de contacto (uncheckedSteps).',
+            required: false,
+            size: 4,
+            defaultValue: true,
+            uncheckedSteps: ['TEXTINPUT-contact-phone', 'TEXTINPUT-contact-email'],
+        },
+        'TEXTINPUT-contact-phone': cbTextInput('TEXTINPUT-contact-phone', 'Teléfono', 2),
+        'TEXTINPUT-contact-email': cbTextInput('TEXTINPUT-contact-email', 'Correo', 2),
+        'COLLAPSIBLE-checkbox': {
+            id: 'COLLAPSIBLE-checkbox',
+            type: 'COLLAPSIBLE',
+            label: 'Colapsable con checkbox anidado',
+            defaultValue: true,
+            steps: ['CHECKBOX-in-collapsible'],
+        },
+        'CHECKBOX-in-collapsible': {
+            id: 'CHECKBOX-in-collapsible',
+            type: 'CHECKBOX',
+            label: '¿Desea agregar información adicional?',
+            description: null,
+            required: false,
+            size: 4,
+            steps: ['TEXTINPUT-extra-1', 'TEXTINPUT-extra-2'],
+        },
+        'TEXTINPUT-extra-1': cbTextInput('TEXTINPUT-extra-1', 'Información adicional 1', 2),
+        'TEXTINPUT-extra-2': cbTextInput('TEXTINPUT-extra-2', 'Información adicional 2', 2),
+    },
+    size: { blockNum: 4, blockSize: 210, spacingSize: 20 },
+    rootSteps: [
+        'CHECKBOX-size-1',
+        'CHECKBOX-size-2',
+        'CHECKBOX-size-1-required',
+        'CHECKBOX-size-3',
+        'CHECKBOX-size-1-checked',
+        'CHECKBOX-size-4',
+        'CHECKBOX-list',
+        'CHECKBOX-nested',
+        'CHECKBOX-unchecked-steps',
+        'COLLAPSIBLE-checkbox',
+    ],
+    label: 'Enviar',
+    firstSection: 'FIRST',
+    sections: {
+        FIRST: {
+            id: 'FIRST',
+            steps: [
+                'CHECKBOX-size-1',
+                'CHECKBOX-size-2',
+                'CHECKBOX-size-1-required',
+                'CHECKBOX-size-3',
+                'CHECKBOX-size-1-checked',
+                'CHECKBOX-size-4',
+                'CHECKBOX-list',
+                'CHECKBOX-nested',
+                'CHECKBOX-unchecked-steps',
+                'COLLAPSIBLE-checkbox',
+            ],
+            name: '',
+            nextSection: null,
+        },
+    },
+};
+/**
+ * Every checkbox variant in one form: sizes 1–4, required, description, list mode, long
+ * labels, nested `steps` / `uncheckedSteps`, and a checkbox inside a collapsible. Resize the
+ * preview below ~900px to see the collapsed label mode (100% width, 1-line clamp, "ver más").
+ * Inside the collapsible, close/reopen it and then check the checkbox to reproduce the clipped
+ * nested steps.
+ */
+export const Checkboxes = {
+    args: {
+        formData: checkboxesForm,
+    },
+};
+/** Same checkboxes form in postview, read-only. */
+export const CheckboxesPostview = {
+    args: {
+        formData: checkboxesForm,
+        valuesData: {
+            'CHECKBOX-size-1': true,
+            'CHECKBOX-size-2': false,
+            'CHECKBOX-size-1-required': true,
+            'CHECKBOX-size-3': true,
+            'CHECKBOX-size-1-checked': true,
+            'CHECKBOX-size-4': true,
+            'CHECKBOX-list': true,
+            'CHECKBOX-nested': true,
+            'TEXTINPUT-shipping-address': 'Calle 123 # 45-67',
+            'TEXTINPUT-shipping-city': 'Bogotá',
+            'CHECKBOX-unchecked-steps': true,
+            'COLLAPSIBLE-checkbox': true,
+            'CHECKBOX-in-collapsible': false,
+        },
+        postview: true,
+        internal: true,
+        editable: false,
+    },
+};

package/dist/App/App.submitError.test.d.ts

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

package/dist/App/App.submitError.test.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import '@testing-library/jest-dom';
+import App from './App';
+import FormStepTypes from '../constants/FormStepTypes';
+import { SUBMIT_ERROR_MESSAGE } from '../Form/SubmitError/SubmitErrorReason';
+const { post } = vi.hoisted(() => ({ post: vi.fn() }));
+vi.mock('../Utils/AxiosWidget', async (importOriginal) => {
+    const original = await importOriginal();
+    return { ...original, default: Object.assign(Object.create(original.default), { post }) };
+});
+const FORM = {
+    name: 'Contacto',
+    apiKey: 'form-key',
+    firstSection: 'FIRST',
+    sections: { FIRST: { id: 'FIRST', name: '', nextSection: null, steps: ['comment'] } },
+    steps: {
+        comment: {
+            id: 'comment',
+            idSection: 'FIRST',
+            stepPath: ['comment'],
+            type: FormStepTypes.TEXTINPUT,
+            label: 'Comentario',
+            description: null,
+            required: false,
+            size: 4,
+            editable: true,
+        },
+    },
+    size: { blockNum: 4, blockSize: 210, spacingSize: 20 },
+};
+describe('Form submission that fails', () => {
+    it('tells the requester, keeps what they filled in and sends it again on retry', async () => {
+        const user = userEvent.setup();
+        post.mockRejectedValueOnce({
+            response: { status: 409, data: 'La reserva expiró; elige un horario nuevamente' },
+        }).mockResolvedValueOnce({ data: { case: 'ABC123', url: 'https://example.com', idTicket: 't1' } });
+        render(_jsx(App, { formData: FORM, idOrganization: "acme", internal: true, isWidget: true, editable: true }));
+        const comment = await screen.findByLabelText(/Comentario/);
+        await user.type(comment, 'Necesito ayuda');
+        await user.click(screen.getByTestId('form__submit'));
+        const alert = await screen.findByRole('alert');
+        expect(alert).toHaveTextContent(SUBMIT_ERROR_MESSAGE);
+        expect(alert).toHaveTextContent('La reserva expiró; elige un horario nuevamente');
+        expect(screen.getByLabelText(/Comentario/)).toHaveValue('Necesito ayuda');
+        await user.click(screen.getByRole('button', { name: 'Reintentar' }));
+        await waitFor(() => expect(screen.queryByText(SUBMIT_ERROR_MESSAGE)).not.toBeInTheDocument());
+        expect(post).toHaveBeenCalledTimes(2);
+        expect(post.mock.calls[1][1]).toEqual(expect.objectContaining({ comment: 'Necesito ayuda' }));
+    });
+});

package/dist/App/AppHooks.js

@@ -158,6 +158,14 @@ export const useSetupApp = (isEmbedded, props) => {
         idCurrentAgent,
         handleConfirmed,
     ]);
+    // The host may resolve the classifiers asynchronously (the admin fetches them while the form is
+    // already mounted). `loadData` only copies the prop it saw when it ran, so patch the form whenever a
+    // new dictionary arrives — without re-running the load, which would reset what the user typed.
+    useEffect(() => {
+        if (!classifiers || !form || form.classifiers === classifiers)
+            return;
+        setForm({ ...form, classifiers });
+    }, [classifiers, form]);
     const reload = useCallback(() => {
         if (!form)
             return;

package/dist/App/AppHooks.test.js

@@ -81,6 +81,14 @@ describe('AppHooks', function () {
             expect(result.current.organization).toBeNull();
             expect(result.current.branding).toBeUndefined();
         });
+        test('picks up classifiers that arrive after the first render', async () => {
+            const classifier = { _id: 'tipo', name: 'Tipo de solicitud', children: [] };
+            const { result, rerender } = renderHookWithProviders((props) => useSetupApp(false, { formData: BaseForm, internal: true, classifiers: props.classifiers }), { initialProps: { classifiers: {} } });
+            await waitFor(() => expect(result.current.form).toBeTruthy());
+            expect(result.current.form?.classifiers).toEqual({});
+            rerender({ classifiers: { tipo: classifier } });
+            await waitFor(() => expect(result.current.form?.classifiers?.tipo).toEqual(classifier));
+        });
         test('Apikey Default', async () => {
             mocks.get.mockImplementation((a) => {
                 if (a === '/organization') {

package/dist/BookingManage/AppointmentText.d.ts

@@ -0,0 +1,5 @@
+import { BookingAppointment } from '../Services/BookingService';
+/** "Martes 14 de octubre", en la zona de la organización. */
+export declare function appointmentDay(iso: string, timeZone: string): string;
+/** "Martes 14 de octubre, 09:00–09:30". */
+export declare function appointmentWhen(appointment: Pick<BookingAppointment, 'start' | 'end' | 'timeZone'>): string;

package/dist/BookingManage/AppointmentText.js

@@ -0,0 +1,20 @@
+import { clockIn } from '../Services/BookingService';
+/** "Martes 14 de octubre", en la zona de la organización. */
+export function appointmentDay(iso, timeZone) {
+    const parts = {};
+    for (const part of new Intl.DateTimeFormat('es-CO', {
+        weekday: 'long',
+        day: 'numeric',
+        month: 'long',
+        timeZone,
+    }).formatToParts(new Date(iso))) {
+        parts[part.type] = part.value;
+    }
+    const text = `${parts.weekday} ${parts.day} de ${parts.month}`;
+    return text.charAt(0).toUpperCase() + text.slice(1);
+}
+/** "Martes 14 de octubre, 09:00–09:30". */
+export function appointmentWhen(appointment) {
+    const { start, end, timeZone } = appointment;
+    return `${appointmentDay(start, timeZone)}, ${clockIn(start, timeZone)}–${clockIn(end, timeZone)}`;
+}

package/dist/BookingManage/BookingManagePage.d.ts

@@ -0,0 +1,17 @@
+export interface BookingManagePageProps {
+    /** El handle del enlace del correo (`/booking/<token>`). */
+    token: string;
+    /** La organización, cuando la página no se sirve desde su subdominio de formularios. */
+    idOrganization?: string;
+}
+/**
+ * La página del enlace "Cancela o cambia la hora de tu cita" de los correos de agendamiento.
+ *
+ * Muestra la cita en el reloj de la organización y deja cancelarla (con confirmación) o moverla a otra
+ * hora con la misma persona. Las horas salen de la oferta del mismo paso del formulario, igual que la
+ * primera vez, con el mismo `ErkBookingPicker`; elegir una mueve la cita en el momento, sin formulario
+ * que enviar. Cada respuesta trae el handle vigente de la cita (cambia al moverla), y es el que se usa
+ * en el siguiente pedido.
+ */
+declare function BookingManagePage({ token, idOrganization }: BookingManagePageProps): JSX.Element;
+export default BookingManagePage;

package/dist/BookingManage/BookingManagePage.js

@@ -0,0 +1,177 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Dialog } from '@mui/material';
+import { BookingMode, PersonSelectionMode } from '../@Types/BookingFormStep';
+import ErkBookingPicker from '../Shared/ErkBookingPicker/ErkBookingPicker';
+import ErkButton from '../Shared/ErkButton/ErkButton';
+import Loader from '../Shared/Loader/Loader';
+import MaterialProviders from '../Utils/MaterialProviders';
+import InternalFormStyle from '../constants/InternalFormStyle';
+import { BookingErrorCodes, cancelBookingAppointment, clockIn, fetchBookingAppointment, fetchBookingOffer, fetchBookingSlots, moveBookingAppointment, toBookingError, toPickerSlots, zoneLabel, } from '../Services/BookingService';
+import { appointmentDay, appointmentWhen } from './AppointmentText';
+import styles from './BookingManagePage.module.css';
+const MODE_LABEL = {
+    [BookingMode.IN_PERSON]: 'Presencial',
+    [BookingMode.VIRTUAL]: 'Virtual',
+    [BookingMode.HYBRID]: 'Presencial o virtual',
+};
+const MOVE_COPY = {
+    open: 'Elegir otra hora',
+    confirm: 'Cambiar la hora',
+    confirming: 'Cambiando…',
+    title: 'Revisa la nueva hora',
+    note: 'Moveremos tu cita a esta hora y te enviaremos la confirmación por correo.',
+};
+/**
+ * La página del enlace "Cancela o cambia la hora de tu cita" de los correos de agendamiento.
+ *
+ * Muestra la cita en el reloj de la organización y deja cancelarla (con confirmación) o moverla a otra
+ * hora con la misma persona. Las horas salen de la oferta del mismo paso del formulario, igual que la
+ * primera vez, con el mismo `ErkBookingPicker`; elegir una mueve la cita en el momento, sin formulario
+ * que enviar. Cada respuesta trae el handle vigente de la cita (cambia al moverla), y es el que se usa
+ * en el siguiente pedido.
+ */
+function BookingManagePage({ token, idOrganization }) {
+    const [appointment, setAppointment] = useState(undefined);
+    const [loadError, setLoadError] = useState(undefined);
+    const [notice, setNotice] = useState(undefined);
+    const [confirmCancel, setConfirmCancel] = useState(false);
+    const [cancelling, setCancelling] = useState(false);
+    const [cancelError, setCancelError] = useState(undefined);
+    /** The appointment the callbacks read; the state copy only drives rendering. */
+    const current = useRef(undefined);
+    const adopt = useCallback((loaded) => {
+        current.current = loaded;
+        setAppointment(loaded);
+    }, []);
+    useEffect(() => {
+        let cancelled = false;
+        fetchBookingAppointment(token, idOrganization)
+            .then((loaded) => {
+            if (!cancelled)
+                adopt(loaded);
+        })
+            .catch((e) => {
+            if (!cancelled)
+                setLoadError(toBookingError(e, 'No pudimos cargar tu cita.').message);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [token, idOrganization, adopt]);
+    const reschedule = appointment?.reschedule;
+    const route = useMemo(() => (reschedule ? { apiKey: reschedule.apiKey, idStep: reschedule.idStep, idOrganization } : undefined), [reschedule, idOrganization]);
+    /**
+     * Reads the step's offer with the appointment's person and, when it has one, its event template, so
+     * the new hour keeps the type and its duration. A person handle lives two hours; a stale one
+     * (403 `STALE_OFFER`) reloads the appointment, which hands out a fresh one, and the read is retried once.
+     */
+    const withPerson = useCallback(async (call, fallback) => {
+        const person = current.current?.reschedule?.person;
+        if (!person)
+            throw new Error(fallback);
+        try {
+            return await call(person);
+        }
+        catch (e) {
+            const refusal = toBookingError(e, fallback);
+            if (refusal.code !== BookingErrorCodes.STALE_OFFER || !current.current)
+                throw refusal;
+            try {
+                const reloaded = await fetchBookingAppointment(current.current.token, idOrganization);
+                adopt(reloaded);
+                if (!reloaded.reschedule)
+                    throw refusal;
+                return await call(reloaded.reschedule.person);
+            }
+            catch (retryError) {
+                throw toBookingError(retryError, fallback);
+            }
+        }
+    }, [idOrganization, adopt]);
+    const fetchDays = useCallback(async () => {
+        if (!route)
+            return [];
+        return withPerson(async (person) => (await fetchBookingOffer(route, { person, eventTemplate: current.current?.reschedule?.eventTemplate }))
+            .days, 'No pudimos cargar los días disponibles.');
+    }, [route, withPerson]);
+    const fetchSlots = useCallback(async ({ date }) => {
+        if (!route)
+            return [];
+        return withPerson(async (person) => toPickerSlots(await fetchBookingSlots(route, date, {
+            person,
+            eventTemplate: current.current?.reschedule?.eventTemplate,
+        }), current.current?.timeZone ?? 'UTC'), 'No pudimos cargar los horarios de este día.');
+    }, [route, withPerson]);
+    const moveTo = useCallback(async ({ slot }) => {
+        const from = current.current;
+        if (!from)
+            throw new Error('No pudimos cambiar la hora de tu cita.');
+        try {
+            const moved = await moveBookingAppointment(from.token, slot.id, idOrganization);
+            adopt(moved);
+            setNotice(`Listo. Tu cita quedó para el ${appointmentWhen(moved)}. Te enviamos la confirmación por correo.`);
+            return {};
+        }
+        catch (e) {
+            throw toBookingError(e, 'No pudimos cambiar la hora de tu cita. Intenta de nuevo.');
+        }
+    }, [idOrganization, adopt]);
+    const cancel = async () => {
+        const from = current.current;
+        if (!from)
+            return;
+        setCancelling(true);
+        setCancelError(undefined);
+        try {
+            adopt(await cancelBookingAppointment(from.token, idOrganization));
+            setConfirmCancel(false);
+            setNotice('Tu cita quedó cancelada. Te enviamos la confirmación por correo.');
+        }
+        catch (e) {
+            setCancelError(toBookingError(e, 'No pudimos cancelar tu cita. Intenta de nuevo.').message);
+        }
+        finally {
+            setCancelling(false);
+        }
+    };
+    const renderBody = () => {
+        if (loadError) {
+            return (_jsx("p", { className: styles.error, role: "alert", children: loadError }));
+        }
+        if (!appointment) {
+            return (_jsx("div", { className: styles.loading, children: _jsx(Loader, { size: 32 }) }));
+        }
+        const confirmed = appointment.status === 'CONFIRMED';
+        const rows = [
+            { label: 'Fecha', value: appointmentDay(appointment.start, appointment.timeZone) },
+            {
+                label: 'Hora',
+                value: `${clockIn(appointment.start, appointment.timeZone)}–${clockIn(appointment.end, appointment.timeZone)} (${zoneLabel(appointment.timeZone, new Date(appointment.start))})`,
+            },
+        ];
+        if (appointment.person) {
+            const role = appointment.person.role ? `, ${appointment.person.role}` : '';
+            rows.push({ label: 'Con', value: `${appointment.person.name}${role}` });
+        }
+        const templateName = appointment.eventTemplate?.name ?? appointment.eventTemplateName;
+        if (templateName) {
+            const templateDuration = appointment.eventTemplate
+                ? ` (${appointment.eventTemplate.durationMinutes} min)`
+                : '';
+            rows.push({ label: 'Tipo de atención', value: `${templateName}${templateDuration}` });
+        }
+        if (appointment.bookingMode && MODE_LABEL[appointment.bookingMode]) {
+            rows.push({ label: 'Modalidad', value: MODE_LABEL[appointment.bookingMode] });
+        }
+        if (appointment.joinUrl) {
+            rows.push({ label: 'Reunión', value: 'Unirse a la reunión', href: appointment.joinUrl });
+        }
+        return (_jsxs(_Fragment, { children: [!confirmed && (_jsx("p", { className: styles.cancelled, role: "status", children: "Esta cita est\u00E1 cancelada." })), _jsx("dl", { className: confirmed ? styles.details : `${styles.details} ${styles.detailsCancelled}`, children: rows.map((row) => (_jsxs("div", { className: styles.row, children: [_jsx("dt", { children: row.label }), _jsx("dd", { children: row.href ? (_jsx("a", { href: row.href, target: "_blank", rel: "noreferrer", children: row.value })) : (row.value) })] }, row.label))) }), notice && (_jsx("p", { className: styles.notice, role: "status", children: notice })), confirmed && (_jsxs("div", { className: styles.actions, children: [reschedule && (_jsx(ErkBookingPicker, { value: null, onChange: () => undefined, label: "\u00BFNecesitas otra hora?", description: `Elige otro día u hora con ${appointment.person?.name ?? 'la misma persona'}.`, durationMinutes: reschedule.durationMinutes, bookingMode: appointment.bookingMode, personSelectionMode: PersonSelectionMode.NONE, timeZone: appointment.timeZone, fetchDays: fetchDays, fetchSlots: fetchSlots, holdSlot: moveTo, withoutContact: true, copy: MOVE_COPY }, appointment.token)), _jsxs("div", { className: styles.cancelRow, children: [_jsx("span", { children: "\u00BFNo puedes asistir?" }), _jsx(ErkButton, { text: "Cancelar cita", variant: "outlined", color: "error", onClick: () => {
+                                        setCancelError(undefined);
+                                        setConfirmCancel(true);
+                                    } })] })] }))] }));
+    };
+    return (_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsxs("main", { className: styles.page, children: [_jsxs("section", { className: styles.card, children: [_jsx("h1", { className: styles.title, children: "Tu cita" }), renderBody()] }), _jsx(Dialog, { open: confirmCancel, onClose: () => !cancelling && setConfirmCancel(false), maxWidth: "xs", children: _jsxs("div", { className: styles.dialog, children: [_jsx("h2", { className: styles.dialogTitle, children: "\u00BFCancelar tu cita?" }), _jsxs("p", { children: [appointment ? `${appointmentWhen(appointment)}. ` : '', "Liberaremos este horario y avisaremos a", ' ', appointment?.person?.name ?? 'la persona que te iba a atender', ". No se puede deshacer."] }), cancelError && (_jsx("p", { className: styles.error, role: "alert", children: cancelError })), _jsxs("div", { className: styles.dialogActions, children: [_jsx(ErkButton, { text: "Volver", variant: "outlined", disabled: cancelling, onClick: () => setConfirmCancel(false) }), _jsx(ErkButton, { text: "S\u00ED, cancelar", color: "error", loading: cancelling, onClick: () => void cancel() })] })] }) })] }) }));
+}
+export default BookingManagePage;

package/dist/BookingManage/BookingManagePage.module.css

@@ -0,0 +1,115 @@
+.page {
+    min-height: 100vh;
+    box-sizing: border-box;
+    padding: 32px 16px;
+    background: #f5f7fa;
+    color: #293241;
+    font-family: inherit;
+}
+
+.card {
+    max-width: 560px;
+    margin: 0 auto;
+    padding: 24px;
+    box-sizing: border-box;
+    border: 1px solid #d9dee6;
+    border-radius: 16px;
+    background: #fff;
+    box-shadow: 0 12px 34px rgba(43, 65, 93, 0.08);
+}
+
+.title {
+    margin: 0 0 16px;
+    font-size: 1.5rem;
+    font-weight: 600;
+}
+
+.loading {
+    display: flex;
+    justify-content: center;
+    padding: 24px 0;
+}
+
+.details {
+    margin: 0 0 16px;
+}
+
+.detailsCancelled {
+    opacity: 0.6;
+    text-decoration: line-through;
+}
+
+.row {
+    display: grid;
+    grid-template-columns: 140px 1fr;
+    gap: 8px;
+    padding: 6px 0;
+    border-bottom: 1px solid #eef1f5;
+}
+
+.row dt {
+    font-weight: 600;
+}
+
+.row dd {
+    margin: 0;
+    overflow-wrap: anywhere;
+}
+
+.cancelled {
+    margin: 0 0 12px;
+    padding: 10px 12px;
+    border-radius: 10px;
+    background: #fdecee;
+    color: #cc2936;
+}
+
+.notice {
+    margin: 0 0 16px;
+    padding: 10px 12px;
+    border-radius: 10px;
+    background: #e8f4ec;
+    color: #1e6b3a;
+}
+
+.error {
+    margin: 0 0 12px;
+    color: #cc2936;
+}
+
+.actions {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.cancelRow {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+
+.dialog {
+    padding: 20px 24px;
+}
+
+.dialogTitle {
+    margin: 0 0 8px;
+    font-size: 1.25rem;
+}
+
+.dialogActions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    margin-top: 16px;
+}
+
+@media (max-width: 480px) {
+    .row {
+        grid-template-columns: 1fr;
+        gap: 2px;
+    }
+}

package/dist/BookingManage/BookingManagePage.test.d.ts

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