@arquimedes.co/eureka-forms 3.0.71 → 3.0.72

package/dist/@Types/BookingFormStep.d.ts

@@ -10,8 +10,6 @@
  */
 import { GBaseStep } from './GenericFormSteps';
 import FormStepTypes from '../constants/FormStepTypes';
-import { DynamicRef } from './StepRef';
-import { CalendarValue } from './CalendarFormStep';
 /**
  * Modalidad de la cita.
  */
@@ -41,6 +39,37 @@ export declare enum PersonSelectionMode {
      */
     REQUIRED = "REQUIRED"
 }
+/**
+ * De dónde sale el correo al que se envía la confirmación de la cita.
+ */
+export declare enum BookingContactEmailSourceTypes {
+    /** Un paso de correo anterior del formulario: el picker lo lee y no pide el correo. */
+    STEP = "STEP",
+    /** El picker pide el correo en el agendamiento, validado y obligatorio. */
+    FIELD = "FIELD"
+}
+/**
+ * El correo de confirmación del paso. `stepId` es obligatorio cuando `source === STEP`.
+ */
+export interface BookingContactEmail {
+    source: BookingContactEmailSourceTypes;
+    stepId?: string;
+}
+/**
+ * Whose mailbox organizes the meeting of a confirmed appointment. The backend resolves it; forms only
+ * mirrors the field.
+ */
+export declare enum BookingOrganizerSourceTypes {
+    /** The mailbox of the agent who takes the appointment. */
+    AGENT = "AGENT",
+    /** A fixed mailbox, `email`. */
+    MAILBOX = "MAILBOX"
+}
+/** The organizer of the step's meetings. `email` is required when `source === MAILBOX`. */
+export interface BookingOrganizer {
+    source: BookingOrganizerSourceTypes;
+    email?: string;
+}
 /**
  * Perfil de una persona cuyo calendario se puede agendar.
  */
@@ -88,6 +117,14 @@ export interface BookingStep extends GBaseStep {
      * @default false
      */
     fallbackToGeneral?: boolean;
+    /**
+     * With several event templates on offer, the requester picks one before the day and the hour.
+     * With a single template there is nothing to pick.
+     * @default true
+     */
+    requesterPicksType?: boolean;
+    /** Whose mailbox organizes the meeting; absent means the agent's. */
+    organizer?: BookingOrganizer;
     /**
      * Cómo se presenta la selección de persona al usuario.
      * @default PersonSelectionMode.NONE
@@ -99,17 +136,10 @@ export interface BookingStep extends GBaseStep {
      */
     persons?: BookablePerson[];
     /**
-     * Permite que el formulario sea enviado sin identificar al usuario (agendamiento anónimo).
-     * El backend genera un token temporal para rastrear la reserva.
-     * @default false
-     */
-    allowAnonymous?: boolean;
-    /**
-     * Si el paso recopila datos de contacto (nombre/correo) del que agenda.
-     * Desactívalo cuando el booking va dentro de un formulario mayor que ya los captura.
-     * @default false
+     * De dónde sale el correo de confirmación. El nombre del que agenda se pide siempre (o se reutiliza
+     * de un paso de nombre ya diligenciado); el correo lo lee de un paso anterior o lo pide el picker.
      */
-    collectContact?: boolean;
+    contactEmail: BookingContactEmail;
     /** Duración en minutos de cada slot de cita. */
     durationMinutes: number;
     /**
@@ -134,13 +164,28 @@ export interface BookingStep extends GBaseStep {
      */
     temporaryLockMinutes?: number;
     /**
-     * Referencia a un paso `CALENDAR` en el mismo formulario cuya disponibilidad
-     * se usa para filtrar los slots. Útil cuando el dueño del calendario también
-     * llena el formulario y define su disponibilidad en el mismo flujo.
+     * Separación entre las horas de inicio ofrecidas, anclada al reloj; divisor de 60.
+     * @default 15
      */
-    availabilityRef?: DynamicRef<CalendarValue, 'AVAILABILITY'>;
+    slotIntervalMinutes?: number;
+    /**
+     * Ofrece también el inicio de cada hueco que deja una reunión o una cita. Ausente cuenta como `true`.
+     * @default true
+     */
+    fillGaps?: boolean;
     size: 1 | 2 | 3 | 4;
 }
+/**
+ * An event template the requester can pick, as the picker shows it. `id` is the offer's signed handle,
+ * never the template's id.
+ */
+export interface BookingEventTemplateOption {
+    id: string;
+    name: string;
+    description?: string;
+    durationMinutes: number;
+    bookingMode?: BookingMode;
+}
 /**
  * Un slot de tiempo disponible para agendamiento.
  * El backend calcula esto cruzando el calendario del profesional con el horario configurado.
@@ -154,6 +199,8 @@ export interface BookingSlot {
     endTime: string;
     /** Si el slot sigue disponible para ser reservado. */
     available: boolean;
+    /** Instante ISO de inicio, cuando el host lo conoce; permite mostrar la hora en el reloj de quien agenda. */
+    start?: string;
 }
 /**
  * Valor que se guarda tras completar un paso de tipo `BOOKING`.
@@ -172,9 +219,14 @@ export interface BookingValue {
     personId?: string;
     /** Nombre de la persona (incluido si `personSelectionMode !== NONE`). */
     personName?: string;
-    /** Nombre de contacto del que agenda (solo si `collectContact`). */
+    /** The event template the requester picked, as the hold answered it. */
+    eventTemplate?: {
+        name: string;
+        durationMinutes: number;
+    };
+    /** Nombre de contacto del que agenda (escrito en el picker o tomado de un paso de nombre). */
     contactName?: string;
-    /** Correo de contacto del que agenda (solo si `collectContact`). */
+    /** Correo de contacto del que agenda (escrito en el picker o tomado del paso de correo). */
     contactEmail?: string;
     /**
      * Estado del slot en el ciclo de vida del formulario.

package/dist/@Types/BookingFormStep.js

@@ -42,3 +42,24 @@ export var PersonSelectionMode;
      */
     PersonSelectionMode["REQUIRED"] = "REQUIRED";
 })(PersonSelectionMode || (PersonSelectionMode = {}));
+/**
+ * De dónde sale el correo al que se envía la confirmación de la cita.
+ */
+export var BookingContactEmailSourceTypes;
+(function (BookingContactEmailSourceTypes) {
+    /** Un paso de correo anterior del formulario: el picker lo lee y no pide el correo. */
+    BookingContactEmailSourceTypes["STEP"] = "STEP";
+    /** El picker pide el correo en el agendamiento, validado y obligatorio. */
+    BookingContactEmailSourceTypes["FIELD"] = "FIELD";
+})(BookingContactEmailSourceTypes || (BookingContactEmailSourceTypes = {}));
+/**
+ * Whose mailbox organizes the meeting of a confirmed appointment. The backend resolves it; forms only
+ * mirrors the field.
+ */
+export var BookingOrganizerSourceTypes;
+(function (BookingOrganizerSourceTypes) {
+    /** The mailbox of the agent who takes the appointment. */
+    BookingOrganizerSourceTypes["AGENT"] = "AGENT";
+    /** A fixed mailbox, `email`. */
+    BookingOrganizerSourceTypes["MAILBOX"] = "MAILBOX";
+})(BookingOrganizerSourceTypes || (BookingOrganizerSourceTypes = {}));

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/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';