@arquimedes.co/eureka-forms 3.0.72 → 3.0.73

package/dist/BookingManage/BookingManagePage.test.js

@@ -100,7 +100,6 @@ describe('BookingManagePage', () => {
         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();

package/dist/FormSteps/BookingStep/MaterialBookingStep/MaterialBookingStep.js

@@ -67,6 +67,8 @@ function MaterialBookingStep({ step, editable, fetchSlots: customFetchSlots }) {
         '--eureka-text': formStyle.textColor,
         '--eureka-bg': formStyle.standAloneBackgroundColor ?? '#fff',
         '--booking-accent': formStyle.secondaryContrastColor,
+        '--eureka-description': formStyle.descriptionTextColor,
+        '--eureka-error': formStyle.errorColor,
     };
     const { ref, value, onChange, error } = useFormStep(step, {
         defaultValue: null,
@@ -284,6 +286,6 @@ function MaterialBookingStep({ step, editable, fetchSlots: customFetchSlots }) {
     const personSelectionMode = usesEdge
         ? (offer?.personSelection ?? PersonSelectionMode.NONE)
         : step.personSelectionMode;
-    return (_jsx("div", { ref: ref, style: cssVars, children: _jsx(ErkBookingPicker, { value: value, onChange: handleChange, label: step.label, description: step.description, durationMinutes: offer?.durationMinutes ?? step.durationMinutes, bookingMode: step.bookingMode, temporaryLockMinutes: step.temporaryLockMinutes, personSelectionMode: personSelectionMode, persons: usesEdge ? persons : step.persons, eventTemplates: usesEdge ? eventTemplates : undefined, timeZone: offer?.timeZone, knownContact: knownContact, askEmail: askEmail, lapsed: lapsed, fetchSlots: usesEdge ? fetchSlots : customFetchSlots, fetchDays: usesEdge ? fetchDays : undefined, holdSlot: usesEdge ? holdSlot : undefined, disabled: usesEdge && !offer, readOnly: isReadOnly, error: error?.message, loadError: usesEdge ? offerError : undefined, onRetryLoad: retryOffer }) }));
+    return (_jsx("div", { ref: ref, style: cssVars, children: _jsx(ErkBookingPicker, { value: value, onChange: handleChange, label: step.label, description: step.description, required: step.required, durationMinutes: offer?.durationMinutes ?? step.durationMinutes, bookingMode: step.bookingMode, temporaryLockMinutes: step.temporaryLockMinutes, personSelectionMode: personSelectionMode, persons: usesEdge ? persons : step.persons, eventTemplates: usesEdge ? eventTemplates : undefined, timeZone: offer?.timeZone, knownContact: knownContact, askEmail: askEmail, lapsed: lapsed, fetchSlots: usesEdge ? fetchSlots : customFetchSlots, fetchDays: usesEdge ? fetchDays : undefined, holdSlot: usesEdge ? holdSlot : undefined, disabled: usesEdge && !offer, readOnly: isReadOnly, error: error?.message, loadError: usesEdge ? offerError : undefined, onRetryLoad: retryOffer }) }));
 }
 export default MaterialBookingStep;

package/dist/FormSteps/BookingStep/MaterialBookingStep/MaterialBookingStep.test.js

@@ -98,12 +98,11 @@ function today() {
     return screen.getByRole('button', { name: format(new Date(), "EEEE d 'de' MMMM 'de' yyyy", { locale: es }) });
 }
 async function reserveFirstHour(user) {
-    const open = await screen.findByRole('button', { name: 'Agendar cita' });
+    const open = await screen.findByRole('button', { name: 'Elegir horario' });
     await waitFor(() => expect(open).toBeEnabled());
     await user.click(open);
     await waitFor(() => expect(today()).toBeEnabled());
     await user.click(today());
-    await user.click(screen.getByRole('button', { name: 'Siguiente' }));
     await user.click(await screen.findByRole('button', { name: /^09:00/ }));
     await user.click(screen.getByRole('button', { name: 'Siguiente' }));
     await user.click(await screen.findByRole('button', { name: 'Reservar' }));
@@ -127,8 +126,9 @@ describe('MaterialBookingStep', () => {
             contact: { name: 'Ana Gómez', email: 'ana@correo.com' },
         });
         // Hours and person come from the hold, not from the button that was clicked.
-        expect(await screen.findByText(/09:15–09:45 · con Bruno Pérez/)).toBeInTheDocument();
-        expect(screen.getByText(/Envía el formulario para confirmar la cita/)).toBeInTheDocument();
+        expect(await screen.findByText(/ · 09:15 – 09:45$/)).toBeInTheDocument();
+        expect(screen.getByText('Bruno Pérez · Reservado hasta las 08:00')).toBeInTheDocument();
+        expect(screen.getByText(/Te confirmaremos a/)).toHaveTextContent('Te confirmaremos a ana@correo.com cuando envíes el formulario.');
     });
     it('asks for the email in the picker when the step is set to FIELD', async () => {
         const user = userEvent.setup();
@@ -136,12 +136,11 @@ describe('MaterialBookingStep', () => {
             'email-step': 'ana@correo.com',
             'name-step': 'Ana Gómez',
         });
-        const open = await screen.findByRole('button', { name: 'Agendar cita' });
+        const open = await screen.findByRole('button', { name: 'Elegir horario' });
         await waitFor(() => expect(open).toBeEnabled());
         await user.click(open);
         await waitFor(() => expect(today()).toBeEnabled());
         await user.click(today());
-        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
         await user.click(await screen.findByRole('button', { name: /^09:00/ }));
         await user.click(screen.getByRole('button', { name: 'Siguiente' }));
         expect(await screen.findByLabelText(/Correo/)).toBeInTheDocument();
@@ -171,7 +170,7 @@ describe('MaterialBookingStep', () => {
         });
         expect(renewBookingHold).toHaveBeenLastCalledWith(expect.anything(), { renew: 'renew-2', hold: 'secret-1' });
         expect(await screen.findByRole('alert')).toHaveTextContent('Tu reserva venció; elige la hora de nuevo.');
-        expect(screen.getByRole('button', { name: 'Agendar cita' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Elegir horario' })).toBeInTheDocument();
     });
     it('reloads the offer and retries once when a person token went stale', async () => {
         const user = userEvent.setup();
@@ -196,14 +195,13 @@ describe('MaterialBookingStep', () => {
             'email-step': 'ana@correo.com',
             'name-step': 'Ana Gómez',
         });
-        const open = await screen.findByRole('button', { name: 'Agendar cita' });
+        const open = await screen.findByRole('button', { name: 'Elegir horario' });
         await waitFor(() => expect(open).toBeEnabled());
         await user.click(open);
         await user.click(await screen.findByText('Dra. Ruiz'));
         await user.click(screen.getByRole('button', { name: 'Siguiente' }));
         await waitFor(() => expect(today()).toBeEnabled());
         await user.click(today());
-        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
         expect(await screen.findByRole('button', { name: /^09:00/ })).toBeInTheDocument();
         expect(vi.mocked(fetchBookingSlots).mock.calls.map((call) => call[2]?.person)).toEqual(['p-old', 'p-new']);
     });
@@ -222,14 +220,13 @@ describe('MaterialBookingStep', () => {
             eventTemplate: { name: 'Asesoría de crédito', durationMinutes: 45 },
         });
         renderStep(bookingStep(), { 'email-step': 'ana@correo.com', 'name-step': 'Ana Gómez' });
-        const open = await screen.findByRole('button', { name: 'Agendar cita' });
+        const open = await screen.findByRole('button', { name: 'Elegir horario' });
         await waitFor(() => expect(open).toBeEnabled());
         await user.click(open);
         await user.click(await screen.findByRole('button', { name: /Asesoría de crédito/ }));
         await user.click(screen.getByRole('button', { name: 'Siguiente' }));
         await waitFor(() => expect(today()).toBeEnabled());
         await user.click(today());
-        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
         await user.click(await screen.findByRole('button', { name: /^09:00/ }));
         await user.click(screen.getByRole('button', { name: 'Siguiente' }));
         await user.click(await screen.findByRole('button', { name: 'Reservar' }));
@@ -240,7 +237,7 @@ describe('MaterialBookingStep', () => {
             contact: { name: 'Ana Gómez', email: 'ana@correo.com' },
             eventTemplate: 'tt-2',
         });
-        expect(await screen.findByText('Asesoría de crédito · 45 min')).toBeInTheDocument();
+        expect(await screen.findByText(/^Bruno Pérez · Asesoría de crédito · 45 min · Reservado hasta/)).toBeInTheDocument();
     });
     it('asks for no type when the step does not let the requester pick one', async () => {
         const user = userEvent.setup();
@@ -266,10 +263,19 @@ describe('MaterialBookingStep', () => {
             .mockResolvedValue(OFFER);
         renderStep(bookingStep(), { 'email-step': 'ana@correo.com', 'name-step': 'Ana Gómez' });
         expect(await screen.findByRole('alert')).toHaveTextContent('Algo falló');
-        expect(screen.getByRole('button', { name: 'Agendar cita' })).toBeDisabled();
+        expect(screen.getByRole('button', { name: 'Elegir horario' })).toBeDisabled();
         await user.click(screen.getByRole('button', { name: 'Reintentar' }));
-        await waitFor(() => expect(screen.getByRole('button', { name: 'Agendar cita' })).toBeEnabled());
+        await waitFor(() => expect(screen.getByRole('button', { name: 'Elegir horario' })).toBeEnabled());
         expect(screen.queryByRole('alert')).not.toBeInTheDocument();
         expect(fetchBookingOffer).toHaveBeenCalledTimes(2);
     });
+    it('tells the requester before opening where the confirmation will go', async () => {
+        renderStep(bookingStep({ required: true }), { 'email-step': 'ana@correo.com', 'name-step': 'Ana Gómez' });
+        expect(await screen.findByText(/Te confirmaremos a/)).toHaveTextContent('Te confirmaremos a ana@correo.com cuando envíes el formulario.');
+        expect(screen.getByText('Agendar cita *')).toBeInTheDocument();
+    });
+    it('promises to ask for name and email when no earlier step gives them', async () => {
+        renderStep(bookingStep({ contactEmail: { source: BookingContactEmailSourceTypes.FIELD } }), {});
+        expect(await screen.findByText('Te pediremos nombre y correo al reservar.')).toBeInTheDocument();
+    });
 });

package/dist/Icons/CheckIcon.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './@ErkIcon';
+declare function CheckIcon(props: IconProps): JSX.Element;
+export default CheckIcon;

package/dist/Icons/CheckIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useIconProps } from './@ErkIcon';
+function CheckIcon(props) {
+    const iconProps = useIconProps(props);
+    return (_jsx("svg", { ...iconProps, version: "1.1", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M9 16.17 5.53 12.7a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71c.39-.39.39-1.02 0-1.41a.9959.9959 0 0 0-1.41 0L9 16.17z" }) }));
+}
+export default CheckIcon;

package/dist/Icons/VideoIcon.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './@ErkIcon';
+declare function VideoIcon(props: IconProps): JSX.Element;
+export default VideoIcon;

package/dist/Icons/VideoIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useIconProps } from './@ErkIcon';
+function VideoIcon(props) {
+    const iconProps = useIconProps(props);
+    return (_jsx("svg", { ...iconProps, version: "1.1", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l2.29 2.29c.63.63 1.71.18 1.71-.71V8.91c0-.89-1.08-1.34-1.71-.71L17 10.5z" }) }));
+}
+export default VideoIcon;

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

@@ -4,15 +4,15 @@ import { BookablePerson, BookingEventTemplateOption, BookingMode, BookingSlot, B
  * (la página de "Elegir otra hora" del enlace del correo).
  */
 export interface BookingPickerCopy {
-    /** Botón de la tarjeta de entrada. */
+    /** Botón que abre el selector. */
     open: string;
-    /** Paso final, su botón y su título. */
+    /** Paso final y su botón. */
     confirm: string;
     /** El botón mientras se confirma. */
     confirming: string;
-    /** El título del paso final. */
+    /** El título del paso final cuando no se piden datos (`withoutContact`). */
     title: string;
-    /** La explicación bajo el título y junto al resumen. */
+    /** La explicación del paso final: cuándo queda hecha la cita. */
     note: string;
 }
 export interface ErkBookingPickerProps {
@@ -20,6 +20,8 @@ export interface ErkBookingPickerProps {
     onChange: (value: BookingValue | null) => void;
     label: string;
     description?: string | null;
+    /** Marca la etiqueta con " *". */
+    required?: boolean;
     durationMinutes: number;
     bookingMode?: BookingMode;
     temporaryLockMinutes?: number;
@@ -32,8 +34,8 @@ export interface ErkBookingPickerProps {
      */
     eventTemplates?: BookingEventTemplateOption[];
     /**
-     * Zona horaria de la organización (IANA). Con ella el paso de hora dice en qué reloj están las horas
-     * y, si el navegador está en otra zona, la equivalencia en la hora de quien agenda.
+     * Zona horaria de la organización (IANA). Con ella el paso de día y hora dice en qué reloj están las
+     * horas y, si el navegador está en otra zona, la equivalencia en la hora de quien agenda.
      */
     timeZone?: string;
     /**
@@ -48,7 +50,7 @@ export interface ErkBookingPickerProps {
     askEmail?: boolean;
     /**
      * Mensaje de una reserva que se perdió después de hecha (la renovación falló). Al cambiar, el
-     * wizard vuelve al paso de hora con el mensaje y horas frescas.
+     * wizard vuelve al paso de día y hora con el mensaje y horas frescas.
      */
     lapsed?: string;
     /** Provee los slots disponibles para una persona + día (+ el tipo de atención elegido). */
@@ -78,7 +80,7 @@ export interface ErkBookingPickerProps {
             email?: string;
         };
     }) => Promise<Partial<BookingValue>>;
-    /** Deshabilita la tarjeta de entrada mientras el host termina de cargar la oferta. */
+    /** Deshabilita el botón de abrir mientras el host termina de cargar la oferta. */
     disabled?: boolean;
     /** No pide nombre ni correo: la cita que se está moviendo ya los tiene. */
     withoutContact?: boolean;
@@ -87,19 +89,20 @@ export interface ErkBookingPickerProps {
     readOnly?: boolean;
     error?: string;
     /**
-     * La oferta no cargó: el mensaje se muestra bajo la tarjeta de entrada con "Reintentar", que llama a
+     * La oferta no cargó: el mensaje se muestra bajo el botón de abrir con "Reintentar", que llama a
      * `onRetryLoad`.
      */
     loadError?: string;
     onRetryLoad?: () => void;
 }
 /**
- * Selector de cita: una tarjeta de entrada ("Agendar cita") abre el wizard en un modal —
- * una decisión por pantalla (persona → día → hora → confirmar), con panel izquierdo de
- * resumen que se va llenando, breadcrumb navegable arriba y barra inferior Atrás / Siguiente.
- * En el paso final el panel derecho desaparece y el resumen se expande en una columna
- * centrada (cross-fade corto). "Reservar" retira el horario de la oferta por unos minutos, cierra el
- * modal y deja el resumen compacto; la cita se confirma cuando se envía el formulario.
+ * Selector de cita. En el formulario es un control suelto como el de archivos: etiqueta, descripción y
+ * el botón "Elegir horario"; con un horario elegido, una fila con el resumen y "Cambiar".
+ *
+ * El botón abre el wizard en un modal de tamaño fijo — una decisión por pantalla ([tipo] → [persona] →
+ * día y hora → reservar), con stepper navegable arriba y barra inferior con lo elegido y Atrás /
+ * Siguiente. "Reservar" retira el horario de la oferta por unos minutos, cierra el modal y deja el
+ * resumen; la cita se confirma cuando se envía el formulario.
  */
-declare function ErkBookingPicker({ value, onChange, label, description, durationMinutes, bookingMode, temporaryLockMinutes, personSelectionMode, persons, eventTemplates, timeZone, knownContact, askEmail, lapsed, fetchSlots, fetchDays, holdSlot, disabled, withoutContact, copy: copyOverrides, readOnly, error, loadError, onRetryLoad, }: ErkBookingPickerProps): JSX.Element;
+declare function ErkBookingPicker({ value, onChange, label, description, required, durationMinutes, bookingMode, temporaryLockMinutes, personSelectionMode, persons, eventTemplates, timeZone, knownContact, askEmail, lapsed, fetchSlots, fetchDays, holdSlot, disabled, withoutContact, copy: copyOverrides, readOnly, error, loadError, onRetryLoad, }: ErkBookingPickerProps): JSX.Element;
 export default ErkBookingPicker;