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

package/dist/BookingManage/BookingManagePage.test.js

@@ -0,0 +1,149 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import '@testing-library/jest-dom';
+import { addDays, format } from 'date-fns';
+import { es } from 'date-fns/locale';
+import { BookingEdgeError, BookingErrorCodes } from '../Services/BookingService';
+const service = vi.hoisted(() => ({
+    fetchBookingAppointment: vi.fn(),
+    cancelBookingAppointment: vi.fn(),
+    moveBookingAppointment: vi.fn(),
+    fetchBookingOffer: vi.fn(),
+    fetchBookingSlots: vi.fn(),
+}));
+vi.mock('../Services/BookingService', async (importOriginal) => ({
+    ...(await importOriginal()),
+    ...service,
+}));
+import { appointmentWhen } from './AppointmentText';
+import BookingManagePage from './BookingManagePage';
+const TOMORROW = addDays(new Date(), 1);
+const DAY_KEY = format(TOMORROW, 'yyyy-MM-dd');
+const APPOINTMENT = {
+    token: 'link-1',
+    status: 'CONFIRMED',
+    start: '2030-10-15T14:00:00.000Z',
+    end: '2030-10-15T14:30:00.000Z',
+    timeZone: 'America/Bogota',
+    person: { name: 'Dra. Ana Ruiz', role: 'Odontología' },
+    bookingMode: 'IN_PERSON',
+    eventTemplateName: 'Valoración',
+    reschedule: { apiKey: 'form-key', idStep: 'booking', person: 'person-1', durationMinutes: 30 },
+};
+function renderPage() {
+    render(_jsx(BookingManagePage, { token: "link-1", idOrganization: "clinica" }));
+}
+beforeEach(() => {
+    for (const fn of Object.values(service))
+        fn.mockReset();
+    service.fetchBookingAppointment.mockResolvedValue(APPOINTMENT);
+});
+describe('BookingManagePage', () => {
+    it('shows the appointment in the organization’s clock, with who and how', async () => {
+        renderPage();
+        expect(await screen.findByText('Martes 15 de octubre')).toBeInTheDocument();
+        expect(screen.getByText(/^09:00–09:30 \(hora de Bogotá \(GMT-5\)\)$/)).toBeInTheDocument();
+        expect(screen.getByText('Dra. Ana Ruiz, Odontología')).toBeInTheDocument();
+        expect(screen.getByText('Valoración')).toBeInTheDocument();
+        expect(screen.getByText('Presencial')).toBeInTheDocument();
+        expect(service.fetchBookingAppointment).toHaveBeenCalledWith('link-1', 'clinica');
+    });
+    it('says when the link is no good', async () => {
+        service.fetchBookingAppointment.mockRejectedValue({
+            response: { status: 404, data: { code: 'INVALID_LINK', message: 'Este enlace ya no es válido.' } },
+        });
+        renderPage();
+        expect(await screen.findByRole('alert')).toHaveTextContent('Este enlace ya no es válido.');
+    });
+    it('cancels only after the requester confirms, and then shows it cancelled', async () => {
+        const user = userEvent.setup();
+        service.cancelBookingAppointment.mockResolvedValue({
+            ...APPOINTMENT,
+            status: 'CANCELLED',
+            reschedule: undefined,
+        });
+        renderPage();
+        await user.click(await screen.findByRole('button', { name: 'Cancelar cita' }));
+        const dialog = await screen.findByRole('dialog');
+        expect(within(dialog).getByText(/Liberaremos este horario y avisaremos a Dra. Ana Ruiz/)).toBeInTheDocument();
+        await user.click(within(dialog).getByRole('button', { name: 'Volver' }));
+        expect(service.cancelBookingAppointment).not.toHaveBeenCalled();
+        await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+        await user.click(screen.getByRole('button', { name: 'Cancelar cita' }));
+        await user.click(within(await screen.findByRole('dialog')).getByRole('button', { name: 'Sí, cancelar' }));
+        expect(service.cancelBookingAppointment).toHaveBeenCalledWith('link-1', 'clinica');
+        expect(await screen.findByText('Esta cita está cancelada.')).toBeInTheDocument();
+        expect(screen.getByText(/Tu cita quedó cancelada/)).toBeInTheDocument();
+        expect(screen.queryByRole('button', { name: 'Cancelar cita' })).not.toBeInTheDocument();
+        expect(screen.queryByRole('button', { name: 'Elegir otra hora' })).not.toBeInTheDocument();
+    });
+    it('keeps the dialog open with the reason when the cancellation is refused', async () => {
+        const user = userEvent.setup();
+        service.cancelBookingAppointment.mockRejectedValue({
+            response: { status: 409, data: { code: 'APPOINTMENT_CLOSED', message: 'Esta cita ya fue cancelada' } },
+        });
+        renderPage();
+        await user.click(await screen.findByRole('button', { name: 'Cancelar cita' }));
+        await user.click(within(await screen.findByRole('dialog')).getByRole('button', { name: 'Sí, cancelar' }));
+        expect(await within(screen.getByRole('dialog')).findByRole('alert')).toHaveTextContent('Esta cita ya fue cancelada');
+    });
+    it('moves the appointment to another hour of the same person, picked from the step’s offer', async () => {
+        const user = userEvent.setup();
+        const start = new Date(`${DAY_KEY}T15:00:00.000Z`).toISOString();
+        const end = new Date(`${DAY_KEY}T15:30:00.000Z`).toISOString();
+        service.fetchBookingOffer.mockResolvedValue({ days: [DAY_KEY] });
+        service.fetchBookingSlots.mockResolvedValue([{ start, end, token: 'slot-10' }]);
+        const moved = { ...APPOINTMENT, token: 'link-2', start, end };
+        service.moveBookingAppointment.mockResolvedValue(moved);
+        renderPage();
+        await user.click(await screen.findByRole('button', { name: 'Elegir otra hora' }));
+        await user.click(await screen.findByRole('button', { name: format(TOMORROW, "EEEE d 'de' MMMM 'de' yyyy", { locale: es }) }));
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        await user.click(await screen.findByRole('button', { name: /^10:00/ }));
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        expect(await screen.findByRole('heading', { name: 'Revisa la nueva hora' })).toBeInTheDocument();
+        expect(screen.queryByLabelText(/Nombre/)).not.toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: 'Cambiar la hora' }));
+        const route = { apiKey: 'form-key', idStep: 'booking', idOrganization: 'clinica' };
+        expect(service.fetchBookingOffer).toHaveBeenCalledWith(route, { person: 'person-1' });
+        expect(service.fetchBookingSlots).toHaveBeenCalledWith(route, DAY_KEY, { person: 'person-1' });
+        expect(service.moveBookingAppointment).toHaveBeenCalledWith('link-1', 'slot-10', 'clinica');
+        expect(await screen.findByText(`Listo. Tu cita quedó para el ${appointmentWhen(moved)}. Te enviamos la confirmación por correo.`)).toBeInTheDocument();
+    });
+    it('reloads the appointment for a fresh person handle when the offer says it went stale', async () => {
+        service.fetchBookingOffer
+            .mockRejectedValueOnce(new BookingEdgeError('Esa persona ya no está disponible', BookingErrorCodes.STALE_OFFER, 403))
+            .mockResolvedValue({ days: [DAY_KEY] });
+        service.fetchBookingAppointment
+            .mockResolvedValueOnce(APPOINTMENT)
+            .mockResolvedValue({ ...APPOINTMENT, reschedule: { ...APPOINTMENT.reschedule, person: 'person-2' } });
+        const user = userEvent.setup();
+        renderPage();
+        await user.click(await screen.findByRole('button', { name: 'Elegir otra hora' }));
+        await waitFor(() => expect(service.fetchBookingOffer).toHaveBeenLastCalledWith(expect.anything(), { person: 'person-2' }));
+    });
+    it('names the event template with its duration and keeps it when offering another hour', async () => {
+        const user = userEvent.setup();
+        service.fetchBookingAppointment.mockResolvedValue({
+            ...APPOINTMENT,
+            eventTemplate: { name: 'Valoración', durationMinutes: 45 },
+            reschedule: { ...APPOINTMENT.reschedule, durationMinutes: 45, eventTemplate: 'template-1' },
+        });
+        service.fetchBookingOffer.mockResolvedValue({ days: [DAY_KEY] });
+        renderPage();
+        expect(await screen.findByText('Valoración (45 min)')).toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: 'Elegir otra hora' }));
+        await waitFor(() => expect(service.fetchBookingOffer).toHaveBeenCalledWith(expect.anything(), {
+            person: 'person-1',
+            eventTemplate: 'template-1',
+        }));
+    });
+    it('offers no other hour when the appointment cannot be moved from here', async () => {
+        service.fetchBookingAppointment.mockResolvedValue({ ...APPOINTMENT, reschedule: undefined });
+        renderPage();
+        expect(await screen.findByRole('button', { name: 'Cancelar cita' })).toBeInTheDocument();
+        expect(screen.queryByRole('button', { name: 'Elegir otra hora' })).not.toBeInTheDocument();
+    });
+});

package/dist/Form/ConfirmationDialog/ConfirmationDialog.d.ts

@@ -1,10 +1,19 @@
 import { AppProps } from '../../App/App';
-interface ConfirmationDialogProps {
-    confirmation: {
-        case: string;
-        url: string;
-        idTicket: string;
+/** Lo que responde el envío del formulario. */
+export interface TicketConfirmation {
+    case: string;
+    url: string;
+    idTicket: string;
+    /** Solo llega cuando el formulario tenía una cita reservada: si quedó confirmada al crear el caso. */
+    booking?: {
+        confirmed: boolean;
+        reason?: string;
     };
+}
+/** Lo que se le dice a quien agenda cuando el caso se creó pero la hora reservada no se pudo confirmar. */
+export declare const BOOKING_NOT_CONFIRMED_MESSAGE = "Tu solicitud qued\u00F3 registrada, pero no pudimos reservar la hora elegida. Te contactaremos para acordarla.";
+interface ConfirmationDialogProps {
+    confirmation: TicketConfirmation;
     customConfirmation?: AppProps['customConfirmation'];
     onClose: () => void;
 }

package/dist/Form/ConfirmationDialog/ConfirmationDialog.js

@@ -9,6 +9,8 @@ import { mapDraftEntities } from '../../Utils/DraftFunctions';
 import FormContext from '../../Contexts/FormContext';
 import CloseIcon from '../../Icons/CloseIcon';
 import CheckCircleIcon from '../../Icons/CheckCircleIcon';
+/** Lo que se le dice a quien agenda cuando el caso se creó pero la hora reservada no se pudo confirmar. */
+export const BOOKING_NOT_CONFIRMED_MESSAGE = 'Tu solicitud quedó registrada, pero no pudimos reservar la hora elegida. Te contactaremos para acordarla.';
 function ConfirmationDialog({ onClose, confirmation, customConfirmation }) {
     const { formStyle, ...global } = useAppSelector((state) => state.global);
     const form = useContext(FormContext);
@@ -38,6 +40,11 @@ function ConfirmationDialog({ onClose, confirmation, customConfirmation }) {
                 padding: widthStats.isMobile ? '5px 0px' : '20px 0px',
             }, children: _jsx(Editor, { editorClassName: 'Erk-Forms-Confirmation', editorState: state, readOnly: true, toolbarHidden: true }) }));
     };
+    const renderBookingNotice = () => {
+        if (confirmation.booking?.confirmed !== false)
+            return null;
+        return (_jsx("div", { className: styles.bookingNotice, role: "alert", children: BOOKING_NOT_CONFIRMED_MESSAGE }));
+    };
     const renderLink = () => {
         if (!global.confirmation.showLink)
             return null;
@@ -59,7 +66,7 @@ function ConfirmationDialog({ onClose, confirmation, customConfirmation }) {
                 padding: widthStats.isMobile ? '0px 20px' : '0px 30px',
             }, children: [_jsx("div", { className: styles.closeIcon, onClick: () => {
                         onClose();
-                    }, children: _jsx(CloseIcon, { style: { fontSize: 'inherit' } }) }), !customConfirmation && (_jsxs("div", { className: styles.container, children: [renderIcon(), renderConfirmation(), renderLink()] })), customConfirmation?.({
+                    }, children: _jsx(CloseIcon, { style: { fontSize: 'inherit' } }) }), customConfirmation && renderBookingNotice(), !customConfirmation && (_jsxs("div", { className: styles.container, children: [renderIcon(), renderBookingNotice(), renderConfirmation(), renderLink()] })), customConfirmation?.({
                     url: confirmation.url,
                     caseNumber: confirmation.case,
                     idTicket: confirmation.idTicket,

package/dist/Form/ConfirmationDialog/ConfirmationDialog.module.css

@@ -69,3 +69,15 @@
     position: absolute;
     cursor: pointer;
 }
+
+.bookingNotice {
+    margin: 10px auto 0;
+    max-width: 480px;
+    padding: 10px 14px;
+    border-radius: 10px;
+    background: #fff7ed;
+    border: 1px solid #f4d9b0;
+    color: #8a5a14;
+    font-size: 1rem;
+    text-align: center;
+}

package/dist/Form/ConfirmationDialog/ConfirmationDialog.test.d.ts

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

package/dist/Form/ConfirmationDialog/ConfirmationDialog.test.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import '@testing-library/jest-dom';
+import ConfirmationDialog, { BOOKING_NOT_CONFIRMED_MESSAGE } from './ConfirmationDialog';
+import { withFormStepProviders } from '../../FormSteps/@StoryDecorators/FormStepDecorator';
+function renderDialog(confirmation) {
+    const Story = () => _jsx(ConfirmationDialog, { confirmation: confirmation, onClose: () => undefined });
+    render(withFormStepProviders(Story));
+}
+const TICKET = { case: 'ABC123', url: 'https://example.com/ABC123', idTicket: 't1' };
+describe('ConfirmationDialog', () => {
+    it('says the hour was not booked when the ticket was created but the appointment was not confirmed', () => {
+        renderDialog({ ...TICKET, booking: { confirmed: false, reason: 'HOLD_EXPIRED' } });
+        expect(screen.getByRole('alert')).toHaveTextContent(BOOKING_NOT_CONFIRMED_MESSAGE);
+    });
+    it('adds nothing when the appointment was confirmed or the form had none', () => {
+        renderDialog({ ...TICKET, booking: { confirmed: true } });
+        expect(screen.queryByText(BOOKING_NOT_CONFIRMED_MESSAGE)).not.toBeInTheDocument();
+    });
+});

package/dist/Form/Form.d.ts

@@ -7,6 +7,7 @@ import CBRFormStepTypes from '../constants/CBRFormStepTypes';
 import { Form } from '../@Types';
 import { FormStep } from '../@Types/FormStep';
 import { CBRFormStep } from '../@Types/CBRFormStep';
+import { FormSubmitError } from './SubmitError/SubmitErrorReason';
 export interface StepDependency {
     /** The id of the step before it was mapped */
     idOriginal: string;
@@ -36,6 +37,8 @@ export interface FormComponentProps extends CustomAppProps {
     /** Function called when users clicks submit */
     onSubmit: (values: FieldValues) => Promise<any>;
     scrollToTop?: () => void;
+    /** The last submission failed: the form shows why and offers to send it again. */
+    submitError?: FormSubmitError;
 }
 declare function FormComponent({ form, apiKey, reload, isWidget, branding, setSubmit, scrollToTop, customSteps, containerRef, customSubmit, customSubmitBtns, customConfirmation, }: BaseFormProps): JSX.Element;
 export default FormComponent;

package/dist/Form/Form.js

@@ -19,6 +19,7 @@ import FormContext, { IdFormContext } from '../Contexts/FormContext';
 import { getAppState } from '../Utils/store';
 import LoginPage from '../Login/LoginPage';
 import { focusStep } from '../States/SiteSlice';
+import { toSubmitError } from './SubmitError/SubmitErrorReason';
 function FormComponent({ form, apiKey, reload, isWidget, branding, setSubmit, scrollToTop, customSteps, containerRef, customSubmit, customSubmitBtns, customConfirmation, }) {
     const { idOrganization, internal, postview, user } = useAppSelector((state) => state.global);
     const formMethods = useForm({
@@ -29,6 +30,7 @@ function FormComponent({ form, apiKey, reload, isWidget, branding, setSubmit, sc
     const recaptchaRef = useRef(null);
     const dispatch = useAppDispatch();
     const [showConfirmation, setShowConfirmation] = useState();
+    const [submitError, setSubmitError] = useState(undefined);
     const idFocusStep = useAppSelector((state) => state.site.focusStep);
     useEffect(() => {
         if (idFocusStep) {
@@ -41,6 +43,7 @@ function FormComponent({ form, apiKey, reload, isWidget, branding, setSubmit, sc
         const ApiKey = internal ? form.apiKey : apiKey;
         if (!ApiKey && !customSubmit && !customSubmitBtns)
             return;
+        setSubmitError(undefined);
         try {
             // Resolved inside the try so a captcha that cannot mint a token surfaces through the same
             // error path as any other submit failure, rather than rejecting out of the handler and
@@ -77,7 +80,11 @@ function FormComponent({ form, apiKey, reload, isWidget, branding, setSubmit, sc
             setShowConfirmation(resp?.data);
         }
         catch (error) {
-            console.error(error);
+            // A host's own submit reports its failures itself; sending the ticket is ours to report.
+            if (customSubmit)
+                console.error(error);
+            else
+                setSubmitError(toSubmitError(error));
         }
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -88,7 +95,7 @@ function FormComponent({ form, apiKey, reload, isWidget, branding, setSubmit, sc
         return (_jsxs(React.Fragment, { children: [showConfirmation !== undefined && (_jsx(ConfirmationDialog, { confirmation: showConfirmation, onClose: () => {
                         reload();
                         setShowConfirmation(undefined);
-                    }, customConfirmation: customConfirmation })), form.hasCaptcha && !internal && !postview && (_jsx(ReCAPTCHA, { ref: recaptchaRef, sitekey: "6LcL22kkAAAAAEotDeAFbRATob-u5vbibbCyWL2p", size: 'invisible', badge: 'bottomright' })), _jsx(FormProvider, { ...formMethods, children: _jsx(FormContext.Provider, { value: form, children: _jsx(FormTypeComponent, { onSubmit: onSubmit, setSubmit: setSubmit, scrollToTop: scrollToTop, customSubmitBtns: customSubmitBtns }) }) })] }));
+                    }, customConfirmation: customConfirmation })), form.hasCaptcha && !internal && !postview && (_jsx(ReCAPTCHA, { ref: recaptchaRef, sitekey: "6LcL22kkAAAAAEotDeAFbRATob-u5vbibbCyWL2p", size: 'invisible', badge: 'bottomright' })), _jsx(FormProvider, { ...formMethods, children: _jsx(FormContext.Provider, { value: form, children: _jsx(FormTypeComponent, { onSubmit: onSubmit, setSubmit: setSubmit, scrollToTop: scrollToTop, customSubmitBtns: customSubmitBtns, submitError: submitError }) }) })] }));
     };
     if (!idOrganization)
         return _jsx(_Fragment, {});

package/dist/Form/FormTypes/ColumnForm/ColumnForm.d.ts

@@ -1,3 +1,3 @@
 import { FormComponentProps } from '../../Form';
-declare function ColumnForm({ onSubmit, customSubmitBtns, ...props }: FormComponentProps): JSX.Element;
+declare function ColumnForm({ onSubmit, customSubmitBtns, submitError, ...props }: FormComponentProps): JSX.Element;
 export default ColumnForm;

package/dist/Form/FormTypes/ColumnForm/ColumnForm.js

@@ -11,7 +11,8 @@ import CustomBtn from '../../../Shared/CustomBtn/CustomBtn';
 import FormContext, { IdFormContext } from '../../../Contexts/FormContext';
 import { addPagedValues } from '../../../States/SiteSlice';
 import { getAppState } from '../../../Utils/store';
-function ColumnForm({ onSubmit, customSubmitBtns, ...props }) {
+import SubmitError from '../../SubmitError/SubmitError';
+function ColumnForm({ onSubmit, customSubmitBtns, submitError, ...props }) {
     const [loading, setLoading] = useState(false);
     const { postview, editable, formStyle } = useAppSelector((state) => state.global);
     const { trigger, getValues, handleSubmit } = useFormContext();
@@ -49,6 +50,6 @@ function ColumnForm({ onSubmit, customSubmitBtns, ...props }) {
         return values;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [form]);
-    return (_jsxs("div", { className: styles.container, style: { color: formStyle.textColor }, children: [loading && _jsx("div", { className: styles.curtain }), previous.map((idSection) => (_jsx(Section, { idSection: idSection }, idSection))), next.map((idSection) => (_jsx(Section, { idSection: idSection }, idSection))), _jsx(Terms, {}), !postview && editable && (_jsxs(React.Fragment, { children: [customSubmitBtns === undefined && (_jsx("div", { className: styles.submitBtnContainer, children: _jsx(CustomBtn, { onClick: () => void submit(), width: "calc(100% - 70px)", label: sendLabel ?? 'Enviar', backgroundColor: formStyle.primaryColor, color: formStyle.primaryContrastColor, loading: loading, "data-testid": "form__submit" }) })), customSubmitBtns?.(submit, loading)] }))] }));
+    return (_jsxs("div", { className: styles.container, style: { color: formStyle.textColor }, children: [loading && _jsx("div", { className: styles.curtain }), previous.map((idSection) => (_jsx(Section, { idSection: idSection }, idSection))), next.map((idSection) => (_jsx(Section, { idSection: idSection }, idSection))), _jsx(Terms, {}), !postview && editable && (_jsxs(React.Fragment, { children: [customSubmitBtns === undefined && (_jsx("div", { className: styles.submitBtnContainer, children: _jsx(CustomBtn, { onClick: () => void submit(), width: "calc(100% - 70px)", label: sendLabel ?? 'Enviar', backgroundColor: formStyle.primaryColor, color: formStyle.primaryContrastColor, loading: loading, "data-testid": "form__submit" }) })), customSubmitBtns?.(submit, loading), submitError && (_jsx(SubmitError, { error: submitError, disabled: loading, onRetry: () => void submit() }))] }))] }));
 }
 export default ColumnForm;

package/dist/Form/FormTypes/StepperForm/StepperForm.d.ts

@@ -1,3 +1,3 @@
 import { FormComponentProps } from '../../Form';
-declare function StepperForm({ onSubmit, scrollToTop }: FormComponentProps): JSX.Element;
+declare function StepperForm({ onSubmit, scrollToTop, submitError }: FormComponentProps): JSX.Element;
 export default StepperForm;

package/dist/Form/FormTypes/StepperForm/StepperForm.js

@@ -11,7 +11,8 @@ import { getAppState } from '../../../Utils/store';
 import CustomBtn from '../../../Shared/CustomBtn/CustomBtn';
 import FormContext, { IdFormContext } from '../../../Contexts/FormContext';
 import { addPagedValues } from '../../../States/SiteSlice';
-function StepperForm({ onSubmit, scrollToTop }) {
+import SubmitError from '../../SubmitError/SubmitError';
+function StepperForm({ onSubmit, scrollToTop, submitError }) {
     const [loading, setLoading] = useState(undefined);
     const { postview, editable, formStyle } = useAppSelector((state) => state.global);
     const { trigger, getValues, handleSubmit } = useFormContext();
@@ -62,6 +63,6 @@ function StepperForm({ onSubmit, scrollToTop }) {
     }, [next]);
     if (!idCurrent)
         return _jsx(_Fragment, {});
-    return (_jsxs("div", { className: styles.container, style: { color: formStyle.textColor }, children: [loading && _jsx("div", { className: styles.curtain }), _jsx(Section, { idSection: idCurrent }, idCurrent), next.length === 0 && _jsx(Terms, {}), _jsxs("div", { className: styles.btnsContainer, children: [previous.length > 0 && (_jsx(CustomBtn, { label: form.prevSectionLabel ?? 'Volver', "data-testid": "form__back", onClick: handlePrevious, backgroundColor: formStyle.primaryColor, color: formStyle.primaryContrastColor, disabled: !!loading, loading: loading === 'BACK' })), (next.length > 0 || (!postview && editable)) && (_jsx(CustomBtn, { label: next.length > 0 ? (form.nextSectionLabel ?? 'Siguiente') : (sendLabel ?? 'Enviar'), "data-testid": "form__submit", onClick: handleNext, backgroundColor: formStyle.primaryColor, color: formStyle.primaryContrastColor, disabled: !!loading, loading: loading === 'NEXT' }))] })] }));
+    return (_jsxs("div", { className: styles.container, style: { color: formStyle.textColor }, children: [loading && _jsx("div", { className: styles.curtain }), _jsx(Section, { idSection: idCurrent }, idCurrent), next.length === 0 && _jsx(Terms, {}), _jsxs("div", { className: styles.btnsContainer, children: [previous.length > 0 && (_jsx(CustomBtn, { label: form.prevSectionLabel ?? 'Volver', "data-testid": "form__back", onClick: handlePrevious, backgroundColor: formStyle.primaryColor, color: formStyle.primaryContrastColor, disabled: !!loading, loading: loading === 'BACK' })), (next.length > 0 || (!postview && editable)) && (_jsx(CustomBtn, { label: next.length > 0 ? (form.nextSectionLabel ?? 'Siguiente') : (sendLabel ?? 'Enviar'), "data-testid": "form__submit", onClick: handleNext, backgroundColor: formStyle.primaryColor, color: formStyle.primaryContrastColor, disabled: !!loading, loading: loading === 'NEXT' }))] }), next.length === 0 && submitError && (_jsx(SubmitError, { error: submitError, disabled: !!loading, onRetry: () => void handleNext() }))] }));
 }
 export default StepperForm;

package/dist/Form/SubmitError/SubmitError.d.ts

@@ -0,0 +1,11 @@
+import { FormSubmitError } from './SubmitErrorReason';
+interface SubmitErrorProps {
+    error: FormSubmitError;
+    /** Sends the form again, through the same validation as the submit button. */
+    onRetry: () => void;
+    /** While the form is being sent again. */
+    disabled?: boolean;
+}
+/** The notice under the submit button after a failed submission, with "Reintentar". */
+declare function SubmitError({ error, onRetry, disabled }: SubmitErrorProps): JSX.Element;
+export default SubmitError;

package/dist/Form/SubmitError/SubmitError.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ErkButton from '../../Shared/ErkButton/ErkButton';
+import styles from './SubmitError.module.css';
+import { SUBMIT_ERROR_MESSAGE } from './SubmitErrorReason';
+/** The notice under the submit button after a failed submission, with "Reintentar". */
+function SubmitError({ error, onRetry, disabled = false }) {
+    return (_jsxs("div", { className: styles.container, role: "alert", children: [_jsxs("div", { className: styles.text, children: [_jsx("span", { children: SUBMIT_ERROR_MESSAGE }), error.detail && _jsx("span", { className: styles.detail, children: error.detail })] }), _jsx(ErkButton, { text: "Reintentar", variant: "outlined", disabled: disabled, onClick: onRetry })] }));
+}
+export default SubmitError;

package/dist/Form/SubmitError/SubmitError.module.css

@@ -0,0 +1,25 @@
+.container {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 10px 16px;
+    margin: 12px auto 0;
+    padding: 12px 16px;
+    max-width: calc(100% - 70px);
+    box-sizing: border-box;
+    border: 1px solid #f1c2bf;
+    border-radius: 10px;
+    background: #fdf1f0;
+    color: #b3261e;
+    font-size: 14px;
+}
+.text {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex: 1 1 220px;
+}
+.detail {
+    font-size: 13px;
+    color: #7a2a24;
+}

package/dist/Form/SubmitError/SubmitError.test.d.ts

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

package/dist/Form/SubmitError/SubmitError.test.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import '@testing-library/jest-dom';
+import SubmitError from './SubmitError';
+import { SUBMIT_ERROR_MESSAGE, toSubmitError } from './SubmitErrorReason';
+import { withFormStepProviders } from '../../FormSteps/@StoryDecorators/FormStepDecorator';
+describe('toSubmitError', () => {
+    it('keeps the reason of a 4xx answer, as text or as { message }', () => {
+        expect(toSubmitError({ response: { status: 409, data: 'La reserva expiró; elige un horario nuevamente' } })).toEqual({ detail: 'La reserva expiró; elige un horario nuevamente' });
+        expect(toSubmitError({ response: { status: 422, data: { message: 'Falta el correo' } } })).toEqual({
+            detail: 'Falta el correo',
+        });
+    });
+    it('says nothing more for a network failure or a server error', () => {
+        expect(toSubmitError(new Error('Network Error'))).toEqual({});
+        expect(toSubmitError({ response: { status: 500, data: 'Internal Server Error' } })).toEqual({});
+        expect(toSubmitError({ response: { status: 409, data: '  ' } })).toEqual({});
+    });
+});
+describe('SubmitError', () => {
+    it('tells the requester the form was not sent, with the reason, and sends it again on retry', async () => {
+        const user = userEvent.setup();
+        const onRetry = vi.fn();
+        const Story = () => _jsx(SubmitError, { error: { detail: 'La reserva expiró' }, onRetry: onRetry });
+        render(withFormStepProviders(Story));
+        const alert = screen.getByRole('alert');
+        expect(alert).toHaveTextContent(SUBMIT_ERROR_MESSAGE);
+        expect(alert).toHaveTextContent('La reserva expiró');
+        await user.click(screen.getByRole('button', { name: 'Reintentar' }));
+        expect(onRetry).toHaveBeenCalledTimes(1);
+    });
+});

package/dist/Form/SubmitError/SubmitErrorReason.d.ts

@@ -0,0 +1,13 @@
+/** What the requester is told when sending the form fails; what they filled in stays on screen. */
+export declare const SUBMIT_ERROR_MESSAGE = "No pudimos enviar el formulario. Int\u00E9ntalo de nuevo.";
+/** A failed submission, as the form shows it. */
+export interface FormSubmitError {
+    /** The server's own reason, when it gave one the requester can act on (e.g. a booking that expired). */
+    detail?: string;
+}
+/**
+ * Reads a failed submission. A 4xx answer whose body is a message (plain text or `{ message }`) is the
+ * server explaining what to fix, so it is kept; anything else (network, 5xx, captcha) is only the
+ * generic message.
+ */
+export declare function toSubmitError(error: unknown): FormSubmitError;

package/dist/Form/SubmitError/SubmitErrorReason.js

@@ -0,0 +1,20 @@
+/** What the requester is told when sending the form fails; what they filled in stays on screen. */
+export const SUBMIT_ERROR_MESSAGE = 'No pudimos enviar el formulario. Inténtalo de nuevo.';
+/**
+ * Reads a failed submission. A 4xx answer whose body is a message (plain text or `{ message }`) is the
+ * server explaining what to fix, so it is kept; anything else (network, 5xx, captcha) is only the
+ * generic message.
+ */
+export function toSubmitError(error) {
+    const response = error?.response;
+    const status = response?.status;
+    if (!status || status < 400 || status >= 500)
+        return {};
+    const data = response.data;
+    const message = typeof data === 'string'
+        ? data
+        : data && typeof data === 'object'
+            ? data.message
+            : undefined;
+    return typeof message === 'string' && message.trim() ? { detail: message.trim() } : {};
+}

package/dist/FormSteps/BookingStep/MaterialBookingStep/MaterialBookingStep.d.ts

@@ -5,9 +5,16 @@ import { BookingStepProps } from '../BookingStep';
  *
  * Todo lo que el picker muestra sale de la oferta que publica el backend, no del paso guardado: las
  * personas llegan como handles firmados (nunca ids de agente), los días son los que tienen cupo, y
- * las horas se leen en la zona horaria de la organización. Confirmar en el picker bloquea el slot;
+ * las horas se leen en la zona horaria de la organización. "Reservar" en el picker bloquea el slot;
  * enviar el formulario es lo que lo convierte en cita, y "Cambiar" lo devuelve a la oferta.
  *
+ * El contacto de la reserva: el nombre sale de un paso de nombre ya diligenciado o lo pide el picker;
+ * el correo sale del paso que nombra `contactEmail` (`STEP`) o lo pide el picker (`FIELD`, o si ese
+ * paso quedó vacío).
+ *
+ * Con varios tipos de atención y `requesterPicksType`, quien agenda elige primero el tipo: los días,
+ * las horas y la reserva se piden con su handle (`eventTemplate`) y la duración es la del tipo.
+ *
  * Un host que pase `fetchSlots` sustituye al borde por completo (historias, previsualizaciones).
  */
 declare function MaterialBookingStep({ step, editable, fetchSlots: customFetchSlots }: BookingStepProps): JSX.Element;