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

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

@@ -1,23 +1,61 @@
-import { BookablePerson, BookingMode, BookingSlot, BookingValue, PersonSelectionMode } from '../../@Types/BookingFormStep';
+import { BookablePerson, BookingEventTemplateOption, BookingMode, BookingSlot, BookingValue, PersonSelectionMode } from '../../@Types/BookingFormStep';
+/**
+ * Los textos que cambian cuando el wizard no reserva una cita nueva sino que mueve una que ya existe
+ * (la página de "Elegir otra hora" del enlace del correo).
+ */
+export interface BookingPickerCopy {
+    /** Botón de la tarjeta de entrada. */
+    open: string;
+    /** Paso final, su botón y su título. */
+    confirm: string;
+    /** El botón mientras se confirma. */
+    confirming: string;
+    /** El título del paso final. */
+    title: string;
+    /** La explicación bajo el título y junto al resumen. */
+    note: string;
+}
 export interface ErkBookingPickerProps {
     value: BookingValue | null;
     onChange: (value: BookingValue | null) => void;
     label: string;
     description?: string | null;
     durationMinutes: number;
-    bufferMinutes?: number;
     bookingMode?: BookingMode;
     temporaryLockMinutes?: number;
     personSelectionMode?: PersonSelectionMode;
     persons?: BookablePerson[];
-    /** Recopila nombre/correo del que agenda. */
-    collectContact?: boolean;
-    /** El nombre es obligatorio para confirmar: el paso no admite reservas anónimas. */
-    requireContact?: boolean;
-    /** Provee los slots disponibles para una persona + día. */
+    /**
+     * Tipos de atención entre los que elige quien agenda, antes que todo lo demás. Con dos o más, el
+     * wizard gana el paso "¿Qué necesitas?" y la duración, los días y las horas son los del tipo elegido;
+     * con uno o ninguno no hay nada que elegir.
+     */
+    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.
+     */
+    timeZone?: string;
+    /**
+     * Datos de contacto que el formulario ya tiene (pasos de nombre o de correo anteriores). El nombre
+     * se pide siempre, salvo que llegue aquí; el correo solo se pide con `askEmail`.
+     */
+    knownContact?: {
+        name?: string;
+        email?: string;
+    };
+    /** Pide el correo en el agendamiento, validado y obligatorio. */
+    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.
+     */
+    lapsed?: string;
+    /** Provee los slots disponibles para una persona + día (+ el tipo de atención elegido). */
     fetchSlots?: (args: {
         personId?: string;
         date: string;
+        eventTemplate?: string;
     }) => Promise<BookingSlot[]>;
     /**
      * Los días (`YYYY-MM-DD`) con algún horario para la persona elegida. Sin él, cualquier día desde
@@ -25,6 +63,7 @@ export interface ErkBookingPickerProps {
      */
     fetchDays?: (args: {
         personId?: string;
+        eventTemplate?: string;
     }) => Promise<string[]>;
     /**
      * Retira el slot de la oferta al confirmar. Lo que devuelve se guarda en el valor junto con la
@@ -33,22 +72,34 @@ export interface ErkBookingPickerProps {
     holdSlot?: (args: {
         slot: BookingSlot;
         personId?: string;
-        contact?: {
-            name?: string;
+        eventTemplate?: string;
+        contact: {
+            name: string;
             email?: string;
         };
-    }) => Promise<Pick<BookingValue, 'appointment' | 'hold' | 'lockedUntil'>>;
+    }) => Promise<Partial<BookingValue>>;
     /** Deshabilita la tarjeta de entrada 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;
+    /** Textos del wizard; por defecto los de una reserva nueva dentro de un formulario. */
+    copy?: Partial<BookingPickerCopy>;
     readOnly?: boolean;
     error?: string;
+    /**
+     * La oferta no cargó: el mensaje se muestra bajo la tarjeta de entrada 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). Confirmar cierra el modal y deja el resumen compacto.
+ * 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.
  */
-declare function ErkBookingPicker({ value, onChange, label, description, durationMinutes, bufferMinutes, bookingMode, temporaryLockMinutes, personSelectionMode, persons, collectContact, requireContact, fetchSlots, fetchDays, holdSlot, disabled, readOnly, error, }: ErkBookingPickerProps): JSX.Element;
+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;
 export default ErkBookingPicker;

package/dist/Shared/ErkBookingPicker/ErkBookingPicker.js

@@ -1,11 +1,12 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Dialog } from '@mui/material';
 import { addDays, addMonths, format, isBefore, isSameDay, isSameMonth, startOfDay, startOfMonth, startOfWeek, } from 'date-fns';
 import { es } from 'date-fns/locale';
 import { BookingMode, PersonSelectionMode, } from '../../@Types/BookingFormStep';
 import ErkButton from '../ErkButton/ErkButton';
 import ErkTextField from '../ErkTextField/ErkTextField';
+import { browserTimeZone, clockIn, isValidEmail, nonEmpty, zoneLabel } from '../../Services/BookingService';
 import styles from './ErkBookingPicker.module.css';
 const WEEK_STARTS_ON = 1;
 const DOW = ['L', 'M', 'M', 'J', 'V', 'S', 'D'];
@@ -15,17 +16,22 @@ const MODE_LABEL = {
     [BookingMode.HYBRID]: 'Híbrida',
 };
 const STEP_LABEL = {
+    type: 'Tipo',
     person: 'Persona',
     day: 'Día',
     hour: 'Hora',
-    confirm: 'Confirmar',
+    confirm: 'Reservar',
 };
 const STEP_HINT = {
+    type: 'Elige qué necesitas',
     person: 'Elige con quién agendar',
     day: 'Elige un día',
     hour: 'Elige una hora libre',
-    confirm: 'Confirma tu cita',
+    confirm: 'Reserva tu horario',
 };
+const GENERIC_SLOTS_ERROR = 'No pudimos cargar los horarios de este día.';
+const GENERIC_DAYS_ERROR = 'No pudimos cargar los días disponibles.';
+const NO_EMAIL_HINT = 'Sin correo no podremos enviarte la confirmación.';
 /** Duración del fade al reestructurarse el layout (entrar/salir del paso final). */
 const XFADE_MS = 160;
 /** El CTA de confirmar usa el acento del form (secondaryContrastColor vía --booking-accent). */
@@ -34,12 +40,34 @@ const ACCENT_SX = {
     '&:hover': { backgroundColor: 'var(--booking-accent, #ee6c4d)', filter: 'brightness(0.95)' },
     '&:disabled': { backgroundColor: 'var(--booking-accent, #ee6c4d)', color: '#fff' },
 };
+const BOOKING_COPY = {
+    open: 'Agendar cita',
+    confirm: 'Reservar',
+    confirming: 'Reservando…',
+    title: 'Revisa y reserva tu horario',
+    note: 'La cita se confirma cuando envíes el formulario.',
+};
 function fmtDate(date) {
     return format(date, 'yyyy-MM-dd');
 }
 function longDate(date) {
     return format(date, 'EEEE d MMM', { locale: es });
 }
+function fullDate(date) {
+    return format(date, "EEEE d 'de' MMMM 'de' yyyy", { locale: es });
+}
+function errorText(error, fallback) {
+    return error instanceof Error && error.message ? error.message : fallback;
+}
+/** Mañana hasta el mediodía, tarde desde ahí, en el reloj en que se muestran las horas. */
+function groupSlots(slots) {
+    const morning = slots.filter((s) => s.startTime < '12:00');
+    const afternoon = slots.filter((s) => s.startTime >= '12:00');
+    return [
+        { label: 'Mañana', slots: morning },
+        { label: 'Tarde', slots: afternoon },
+    ].filter((group) => group.slots.length > 0);
+}
 function initials(name) {
     return name
         .split(' ')
@@ -57,17 +85,25 @@ function capitalize(text) {
  * 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). Confirmar cierra el modal y deja el resumen compacto.
+ * 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.
  */
-function ErkBookingPicker({ value, onChange, label, description, durationMinutes, bufferMinutes, bookingMode, temporaryLockMinutes, personSelectionMode, persons, collectContact = false, requireContact = false, fetchSlots, fetchDays, holdSlot, disabled = false, readOnly = false, error, }) {
+function ErkBookingPicker({ value, onChange, label, description, durationMinutes, bookingMode, temporaryLockMinutes, personSelectionMode, persons, eventTemplates, timeZone, knownContact, askEmail = false, lapsed, fetchSlots, fetchDays, holdSlot, disabled = false, withoutContact = false, copy: copyOverrides, readOnly = false, error, loadError, onRetryLoad, }) {
+    const copy = { ...BOOKING_COPY, ...copyOverrides };
     const needsPerson = !!personSelectionMode && personSelectionMode !== PersonSelectionMode.NONE;
     const personsOptional = personSelectionMode === PersonSelectionMode.OPTIONAL;
+    const needsType = (eventTemplates?.length ?? 0) > 1;
     const today = startOfDay(new Date());
-    const wizardKeys = useMemo(() => (needsPerson ? ['person', 'day', 'hour', 'confirm'] : ['day', 'hour', 'confirm']), [needsPerson]);
+    const wizardKeys = useMemo(() => [
+        ...(needsType ? ['type'] : []),
+        ...(needsPerson ? ['person'] : []),
+        ...['day', 'hour', 'confirm'],
+    ], [needsType, needsPerson]);
     const finalIdx = wizardKeys.length - 1;
     const [open, setOpen] = useState(false);
     const [wizStep, setWizStep] = useState(0);
     const [xfade, setXfade] = useState(false);
+    const [eventTemplate, setEventTemplate] = useState(undefined);
     const [person, setPerson] = useState(undefined);
     const [personTouched, setPersonTouched] = useState(false);
     const [date, setDate] = useState(undefined);
@@ -75,30 +111,61 @@ function ErkBookingPicker({ value, onChange, label, description, durationMinutes
     const [slot, setSlot] = useState(undefined);
     const [slots, setSlots] = useState([]);
     const [loading, setLoading] = useState(false);
+    const [slotsError, setSlotsError] = useState(undefined);
     const [contactName, setContactName] = useState('');
     const [contactEmail, setContactEmail] = useState('');
+    const [emailTouched, setEmailTouched] = useState(false);
     /** `undefined` mientras se consultan; sin `fetchDays` nunca se consultan y todo día futuro vale. */
     const [days, setDays] = useState(undefined);
+    const [daysError, setDaysError] = useState(undefined);
+    const [daysAttempt, setDaysAttempt] = useState(0);
     const [holding, setHolding] = useState(false);
     const [holdError, setHoldError] = useState(undefined);
+    /** Cada pedido de horas lleva un número; solo el último puede escribir el estado (A5.a). */
+    const slotsRequest = useRef(0);
+    // A hold lost after it was made sends the requester back to the hours, with the reason on screen.
+    const [seenLapsed, setSeenLapsed] = useState(lapsed);
+    if (lapsed !== seenLapsed) {
+        setSeenLapsed(lapsed);
+        if (lapsed) {
+            setSlot(undefined);
+            setHoldError(lapsed);
+            setWizStep(Math.max(0, wizardKeys.indexOf(date ? 'hour' : 'day')));
+        }
+    }
+    const knownName = nonEmpty(knownContact?.name);
+    const knownEmail = nonEmpty(knownContact?.email);
+    const askName = !withoutContact && !knownName;
+    const nameValue = knownName ?? contactName.trim();
+    const emailValue = askEmail ? contactEmail.trim() : knownEmail;
+    const emailInvalid = !withoutContact && askEmail && !isValidEmail(contactEmail);
+    const askContactEmail = !withoutContact && askEmail;
+    const localZone = useMemo(() => browserTimeZone(), []);
+    const showLocal = !!timeZone && !!localZone && localZone !== timeZone;
     const reduceMotion = useMemo(() => typeof window !== 'undefined' && !!window.matchMedia?.('(prefers-reduced-motion: reduce)').matches, []);
     const monthCells = useMemo(() => {
         const first = startOfWeek(startOfMonth(viewMonth), { weekStartsOn: WEEK_STARTS_ON });
         return Array.from({ length: 42 }, (_, i) => addDays(first, i));
     }, [viewMonth]);
-    const loadSlots = useCallback(async (day, personId) => {
+    const loadSlots = useCallback(async (day, personId, templateId) => {
         if (!fetchSlots)
             return;
+        const ticket = ++slotsRequest.current;
         setLoading(true);
         setSlots([]);
+        setSlotsError(undefined);
         try {
-            setSlots(await fetchSlots({ personId, date: fmtDate(day) }));
+            const loaded = await fetchSlots({ personId, date: fmtDate(day), eventTemplate: templateId });
+            if (ticket === slotsRequest.current)
+                setSlots(loaded);
         }
-        catch {
-            setSlots([]);
+        catch (e) {
+            if (ticket === slotsRequest.current)
+                setSlotsError(errorText(e, GENERIC_SLOTS_ERROR));
         }
         finally {
-            setLoading(false);
+            if (ticket === slotsRequest.current)
+                setLoading(false);
         }
     }, [fetchSlots]);
     useEffect(() => {
@@ -107,16 +174,20 @@ function ErkBookingPicker({ value, onChange, label, description, durationMinutes
         // The picker synchronises with the slots API here, and `loadSlots` raises its own
         // loading flag as it goes out — the very shape the rule asks effects to be used for.
         // oxlint-disable-next-line react/set-state-in-effect
-        void loadSlots(date, person?.id);
-    }, [value, date, person, loadSlots]);
+        void loadSlots(date, person?.id, eventTemplate?.id);
+    }, [value, date, person, eventTemplate, loadSlots]);
     useEffect(() => {
         if (!fetchDays || !open || value)
             return;
+        // The days depend on the type; until one is picked there is nothing to ask for.
+        if (needsType && !eventTemplate)
+            return;
         let cancelled = false;
         // Same shape as the slots effect: the days come from the host's API and the picker only mirrors them.
         // oxlint-disable-next-line react/set-state-in-effect
         setDays(undefined);
-        fetchDays({ personId: person?.id })
+        setDaysError(undefined);
+        fetchDays({ personId: person?.id, eventTemplate: eventTemplate?.id })
             .then((available) => {
             if (cancelled)
                 return;
@@ -129,14 +200,14 @@ function ErkBookingPicker({ value, onChange, label, description, durationMinutes
                 ? current
                 : startOfMonth(new Date(first + 'T00:00:00')));
         })
-            .catch(() => {
+            .catch((e) => {
             if (!cancelled)
-                setDays([]);
+                setDaysError(errorText(e, GENERIC_DAYS_ERROR));
         });
         return () => {
             cancelled = true;
         };
-    }, [fetchDays, open, value, person]);
+    }, [fetchDays, open, value, person, eventTemplate, needsType, daysAttempt]);
     // Al entrar/salir del paso final el layout se reestructura; el reacomodo
     // ocurre mientras la tarjeta está invisible (fade corto en dos fases).
     const goToStep = (target) => {
@@ -154,6 +225,8 @@ function ErkBookingPicker({ value, onChange, label, description, durationMinutes
     const currentKey = wizardKeys[wizStep];
     const canAdvance = (() => {
         switch (currentKey) {
+            case 'type':
+                return !!eventTemplate;
             case 'person':
                 return personsOptional ? personTouched : !!person;
             case 'day':
@@ -161,7 +234,7 @@ function ErkBookingPicker({ value, onChange, label, description, durationMinutes
             case 'hour':
                 return !!slot;
             case 'confirm':
-                return !requireContact || contactName.trim().length > 0;
+                return withoutContact || (nameValue.length > 0 && !emailInvalid);
             default:
                 return true;
         }
@@ -177,8 +250,8 @@ function ErkBookingPicker({ value, onChange, label, description, durationMinutes
             endTime: slot.endTime,
             personId: person?.id,
             personName: person?.name,
-            contactName: contactName || undefined,
-            contactEmail: contactEmail || undefined,
+            contactName: nonEmpty(nameValue),
+            contactEmail: nonEmpty(emailValue),
             status: 'PENDING',
         };
         if (!holdSlot) {
@@ -192,9 +265,8 @@ function ErkBookingPicker({ value, onChange, label, description, durationMinutes
             const held = await holdSlot({
                 slot,
                 personId: person?.id,
-                contact: collectContact
-                    ? { name: contactName || undefined, email: contactEmail || undefined }
-                    : undefined,
+                eventTemplate: eventTemplate?.id,
+                contact: { name: nameValue, email: nonEmpty(emailValue) },
             });
             setOpen(false);
             onChange({ ...selection, ...held });
@@ -204,7 +276,7 @@ function ErkBookingPicker({ value, onChange, label, description, durationMinutes
             setHoldError(e instanceof Error && e.message ? e.message : 'No pudimos reservar ese horario.');
             setSlot(undefined);
             goToStep(wizardKeys.indexOf('hour'));
-            void loadSlots(date, person?.id);
+            void loadSlots(date, person?.id, eventTemplate?.id);
         }
         finally {
             setHolding(false);
@@ -213,6 +285,7 @@ function ErkBookingPicker({ value, onChange, label, description, durationMinutes
     const reset = () => {
         onChange(null);
         setWizStep(0);
+        setEventTemplate(undefined);
         setPerson(undefined);
         setPersonTouched(false);
         setDate(undefined);
@@ -221,6 +294,17 @@ function ErkBookingPicker({ value, onChange, label, description, durationMinutes
         setHoldError(undefined);
         setContactName('');
         setContactEmail('');
+        setEmailTouched(false);
+    };
+    // Another type means another duration: the day and hour picked for the previous one no longer hold.
+    const pickType = (template) => {
+        if (template.id === eventTemplate?.id)
+            return;
+        setEventTemplate(template);
+        setDate(undefined);
+        setSlot(undefined);
+        setDays(undefined);
+        setHoldError(undefined);
     };
     const pickPerson = (p) => {
         setPerson(p);
@@ -229,37 +313,56 @@ function ErkBookingPicker({ value, onChange, label, description, durationMinutes
     };
     // Read-only / already booked → compact summary with the same card aesthetic
     if (readOnly || value) {
+        const pending = !!value && value.status === 'PENDING' && !readOnly;
         return (_jsx("div", { className: styles.container, children: _jsxs("div", { className: styles.entry, children: [_jsx("div", { className: styles.bookedIcon, children: "\u2713" }), _jsxs("div", { className: styles.entryInfo, children: [_jsx("span", { className: styles.entryLabel, children: label }), _jsx("span", { className: styles.bookedMain, children: value
                                     ? [
-                                        value.personName,
                                         capitalize(longDate(new Date(value.date + 'T00:00:00'))),
                                         `${value.startTime}–${value.endTime}`,
+                                        value.personName ? `con ${value.personName}` : undefined,
                                     ]
                                         .filter(Boolean)
                                         .join(' · ')
-                                    : 'Sin cita' })] }), value && !readOnly && _jsx(ErkButton, { text: "Cambiar", variant: "outlined", onClick: reset })] }) }));
+                                    : 'Sin cita' }), value?.eventTemplate && (_jsxs("span", { className: styles.entrySub, children: [value.eventTemplate.name, " \u00B7 ", value.eventTemplate.durationMinutes, " min"] })), pending && (_jsxs("span", { className: styles.entrySub, children: [value.lockedUntil && timeZone
+                                        ? `Reservado hasta las ${clockIn(value.lockedUntil, timeZone)}. `
+                                        : 'Horario reservado. ', "Env\u00EDa el formulario para confirmar la cita."] }))] }), value && !readOnly && _jsx(ErkButton, { text: "Cambiar", variant: "outlined", onClick: reset })] }) }));
     }
     const isFinal = wizStep === finalIdx;
+    const duration = eventTemplate?.durationMinutes ?? durationMinutes;
+    const mode = eventTemplate?.bookingMode ?? bookingMode;
     const personLabel = person?.name ?? (personTouched && personsOptional ? 'Cualquiera' : undefined);
     const dayText = date ? capitalize(longDate(date)) : undefined;
-    const hourText = slot ? `${slot.startTime} – ${slot.endTime}` : undefined;
+    const localStart = showLocal && localZone && slot?.start ? clockIn(slot.start, localZone) : undefined;
+    const hourText = slot
+        ? `${slot.startTime} – ${slot.endTime}${localStart ? ` (${localStart} en tu hora)` : ''}`
+        : undefined;
+    const zoneText = timeZone ? `Horas en ${zoneLabel(timeZone, date ?? new Date())}` : undefined;
+    const firstAvailable = slots.find((s) => s.available);
     const summaryRows = [
+        ...(needsType
+            ? [{ key: 'type', placeholder: 'Tipo de atención', text: eventTemplate?.name }]
+            : []),
         ...(needsPerson ? [{ key: 'person', placeholder: 'Persona', text: personLabel }] : []),
         { key: 'day', placeholder: 'Día', text: dayText },
         { key: 'hour', placeholder: 'Hora', text: hourText },
     ];
     const navParts = [];
+    if (eventTemplate)
+        navParts.push(_jsx("b", { children: eventTemplate.name }, "t"));
     if (personLabel)
         navParts.push(_jsx("b", { children: personLabel }, "p"));
     if (dayText)
         navParts.push(_jsx("span", { children: dayText }, "d"));
     if (hourText)
         navParts.push(_jsx("span", { className: styles.navHl, children: hourText }, "h"));
-    return (_jsxs("div", { className: styles.container, children: [_jsxs("div", { className: styles.entry, children: [_jsx("div", { className: styles.avatar, children: "\uD83D\uDCC5" }), _jsxs("div", { className: styles.entryInfo, children: [_jsx("span", { className: styles.entryLabel, children: label }), _jsx("span", { className: styles.entrySub, children: description ?? 'Agenda tu cita' })] }), _jsx(ErkButton, { text: "Agendar cita", disabled: disabled, onClick: () => setOpen(true) })] }), _jsx(Dialog, { open: open, onClose: () => setOpen(false), maxWidth: "md", fullWidth: true, slotProps: { paper: { style: { borderRadius: 16, background: 'transparent', boxShadow: 'none' } } }, children: _jsxs("div", { className: `${styles.card}${isFinal ? ` ${styles.cardFinal}` : ''}${xfade ? ` ${styles.xfade}` : ''}`, children: [_jsxs("div", { className: isFinal ? `${styles.book} ${styles.bookFinal}` : styles.book, children: [_jsxs("aside", { className: styles.who, children: [_jsxs("div", { className: styles.brand, children: [_jsx("div", { className: styles.avatar, children: person ? initials(person.name) : '📅' }), _jsxs("div", { children: [_jsx("h2", { className: styles.brandName, children: person?.name ?? label }), _jsx("p", { className: styles.brandRole, children: person?.role ?? description ?? 'Agenda tu cita' })] })] }), _jsxs("div", { className: styles.meta, children: [_jsxs("div", { className: styles.row, children: [_jsx("span", { className: styles.ic, children: "\u25F7" }), durationMinutes, " min", bufferMinutes ? ` · buffer ${bufferMinutes} min` : ''] }), bookingMode && (_jsxs("div", { className: styles.row, children: [_jsx("span", { className: styles.ic, children: "\u25F1" }), _jsx("span", { className: styles.pill, children: MODE_LABEL[bookingMode] })] }))] }), _jsx("div", { className: styles.sum, "aria-live": "polite", children: summaryRows.map((r) => (_jsxs("div", { className: r.text ? `${styles.srow} ${styles.srowOn}` : styles.srow, children: [_jsx("span", { className: styles.dot, children: "\u2713" }), _jsx("span", { children: r.text ?? r.placeholder })] }, r.key))) }), isFinal && collectContact && (_jsxs("div", { className: styles.cfields, children: [_jsx(ErkTextField, { label: "Nombre", value: contactName, onChange: setContactName }), _jsx(ErkTextField, { label: "Correo", value: contactEmail, onChange: setContactEmail })] })), !!temporaryLockMinutes && (_jsxs("div", { className: styles.lock, children: ["\u23F3 Reservaremos el horario ", _jsxs("b", { children: [temporaryLockMinutes, " min"] }), " mientras confirmas."] }))] }), _jsxs("div", { className: styles.right, children: [_jsx("nav", { className: styles.stepper, "aria-label": "Progreso", children: wizardKeys.map((key, i) => (_jsxs("span", { className: styles.stepGroup, children: [_jsxs("button", { type: "button", disabled: i >= wizStep, onClick: () => goToStep(i), className: i < wizStep
+    return (_jsxs("div", { className: styles.container, children: [_jsxs("div", { className: styles.entry, children: [_jsx("div", { className: styles.avatar, children: "\uD83D\uDCC5" }), _jsxs("div", { className: styles.entryInfo, children: [_jsx("span", { className: styles.entryLabel, children: label }), _jsx("span", { className: styles.entrySub, children: description ?? 'Agenda tu cita' })] }), _jsx(ErkButton, { text: copy.open, disabled: disabled, onClick: () => setOpen(true) })] }), loadError && (_jsxs("div", { className: styles.retry, role: "alert", children: [_jsx("span", { children: loadError }), onRetryLoad && _jsx(ErkButton, { text: "Reintentar", variant: "outlined", onClick: onRetryLoad })] })), lapsed && !open && (_jsx("div", { className: styles.err, role: "alert", children: lapsed })), _jsx(Dialog, { open: open, onClose: () => setOpen(false), maxWidth: "md", fullWidth: true, slotProps: { paper: { style: { borderRadius: 16, background: 'transparent', boxShadow: 'none' } } }, children: _jsxs("div", { className: `${styles.card}${isFinal ? ` ${styles.cardFinal}` : ''}${xfade ? ` ${styles.xfade}` : ''}`, children: [_jsxs("div", { className: isFinal ? `${styles.book} ${styles.bookFinal}` : styles.book, children: [_jsxs("aside", { className: styles.who, children: [_jsxs("div", { className: styles.brand, children: [_jsx("div", { className: styles.avatar, children: person ? initials(person.name) : '📅' }), _jsxs("div", { children: [_jsx("h2", { className: styles.brandName, children: person?.name ?? label }), _jsx("p", { className: styles.brandRole, children: person?.role ?? description ?? 'Agenda tu cita' })] })] }), _jsxs("div", { className: styles.meta, children: [_jsxs("div", { className: styles.row, children: [_jsx("span", { className: styles.ic, children: "\u25F7" }), duration, " min"] }), mode && (_jsxs("div", { className: styles.row, children: [_jsx("span", { className: styles.ic, children: "\u25F1" }), _jsx("span", { className: styles.pill, children: MODE_LABEL[mode] })] }))] }), _jsx("div", { className: styles.sum, "aria-live": "polite", children: summaryRows.map((r) => (_jsxs("div", { className: r.text ? `${styles.srow} ${styles.srowOn}` : styles.srow, children: [_jsx("span", { className: styles.dot, children: "\u2713" }), _jsx("span", { children: r.text ?? r.placeholder })] }, r.key))) }), isFinal && (askName || askContactEmail) && (_jsxs("div", { className: styles.cfields, children: [askName && (_jsx(ErkTextField, { label: "Nombre", value: contactName, onChange: setContactName, required: true })), askContactEmail && (_jsx(ErkTextField, { label: "Correo", type: "email", value: contactEmail, onChange: setContactEmail, onBlur: () => setEmailTouched(true), required: true, error: emailTouched && emailInvalid, helperText: emailTouched && contactEmail.trim() && emailInvalid
+                                                        ? 'Escribe un correo válido.'
+                                                        : NO_EMAIL_HINT }))] })), isFinal && withoutContact && _jsx("div", { className: styles.lock, children: copy.note }), isFinal && !withoutContact && (_jsxs("div", { className: styles.lock, children: ["\u23F3", ' ', temporaryLockMinutes ? (_jsxs(_Fragment, { children: ["Reservaremos el horario ", _jsxs("b", { children: [temporaryLockMinutes, " min"] }), ".", ' '] })) : ('Reservaremos el horario. '), copy.note] }))] }), _jsxs("div", { className: styles.right, children: [_jsx("nav", { className: styles.stepper, "aria-label": "Progreso", children: wizardKeys.map((key, i) => (_jsxs("span", { className: styles.stepGroup, children: [_jsxs("button", { type: "button", disabled: i >= wizStep, onClick: () => goToStep(i), className: i < wizStep
                                                             ? `${styles.stepItem} ${styles.stepDone}`
                                                             : i === wizStep
                                                                 ? `${styles.stepItem} ${styles.stepOn}`
-                                                                : styles.stepItem, children: [_jsx("span", { className: styles.stepNum, children: i < wizStep ? '✓' : i + 1 }), STEP_LABEL[key]] }), i < wizardKeys.length - 1 && _jsx("span", { className: styles.stepSep })] }, key))) }), currentKey === 'person' && (_jsxs("section", { className: styles.pane, children: [_jsx("h3", { className: styles.q, children: "\u00BFCon qui\u00E9n quieres agendar?" }), _jsx("p", { className: styles.qsub, children: personsOptional
+                                                                : styles.stepItem, children: [_jsx("span", { className: styles.stepNum, children: i < wizStep ? '✓' : i + 1 }), key === 'confirm' ? copy.confirm : STEP_LABEL[key]] }), i < wizardKeys.length - 1 && _jsx("span", { className: styles.stepSep })] }, key))) }), currentKey === 'type' && (_jsxs("section", { className: styles.pane, children: [_jsx("h3", { className: styles.q, children: "\u00BFQu\u00E9 necesitas?" }), _jsx("p", { className: styles.qsub, children: "Elige el tipo de atenci\u00F3n; de \u00E9l dependen la duraci\u00F3n y los horarios." }), _jsx("div", { className: styles.persons, children: (eventTemplates ?? []).map((t) => (_jsxs("button", { type: "button", "aria-pressed": eventTemplate?.id === t.id, className: eventTemplate?.id === t.id
+                                                            ? `${styles.pcard} ${styles.pcardOn}`
+                                                            : styles.pcard, onClick: () => pickType(t), children: [_jsxs("span", { className: styles.pinfo, children: [_jsx("span", { className: styles.pn, children: t.name }), t.description && (_jsx("span", { className: styles.pr, children: t.description }))] }), _jsxs("span", { className: styles.tdur, children: [t.durationMinutes, " min"] }), _jsx("span", { className: styles.chk, children: "\u2713" })] }, t.id))) })] }, "type")), currentKey === 'person' && (_jsxs("section", { className: styles.pane, children: [_jsx("h3", { className: styles.q, children: "\u00BFCon qui\u00E9n quieres agendar?" }), _jsx("p", { className: styles.qsub, children: personsOptional
                                                         ? 'Elige una persona o deja que el sistema asigne a quien esté disponible.'
                                                         : 'Elige la persona con la que quieres tu cita.' }), _jsxs("div", { className: styles.persons, children: [(persons ?? []).map((p) => (_jsxs("button", { type: "button", className: person?.id === p.id
                                                                 ? `${styles.pcard} ${styles.pcardOn}`
@@ -270,25 +373,27 @@ function ErkBookingPicker({ value, onChange, label, description, durationMinutes
                                                         : 'Solo se muestran fechas a partir de hoy.' }), _jsxs("div", { className: styles.monthWrap, children: [_jsxs("div", { className: styles.monthHead, children: [_jsx("span", { className: styles.monthTitle, children: capitalize(format(viewMonth, 'MMMM yyyy', { locale: es })) }), _jsxs("span", { className: styles.monthNav, children: [_jsx("button", { type: "button", "aria-label": "Mes anterior", onClick: () => setViewMonth((m) => addMonths(m, -1)), children: "\u2039" }), _jsx("button", { type: "button", "aria-label": "Mes siguiente", onClick: () => setViewMonth((m) => addMonths(m, 1)), children: "\u203A" })] })] }), _jsxs("div", { className: styles.mgrid, children: [DOW.map((d, i) => (_jsx("span", { className: styles.mdow, children: d }, i))), monthCells.map((d) => {
                                                                     const outside = !isSameMonth(d, viewMonth);
                                                                     const past = isBefore(d, today);
-                                                                    const offered = !days || days.includes(fmtDate(d));
+                                                                    const offered = !daysError && (!days || days.includes(fmtDate(d)));
                                                                     const selectable = !outside && !past && offered;
                                                                     const cls = date && isSameDay(d, date)
                                                                         ? `${styles.mday} ${styles.mdaySel}`
                                                                         : selectable
                                                                             ? `${styles.mday} ${styles.mdayFree}`
                                                                             : `${styles.mday} ${styles.mdayNone}`;
-                                                                    return (_jsx("button", { type: "button", disabled: !selectable, className: cls, onClick: () => {
+                                                                    return (_jsx("button", { type: "button", disabled: !selectable, "aria-label": fullDate(d), className: cls, onClick: () => {
                                                                             setDate(d);
                                                                             setSlot(undefined);
                                                                         }, children: format(d, 'd') }, d.toISOString()));
-                                                                })] })] }), fetchDays && days === undefined && (_jsx("div", { className: styles.empty, children: "Buscando d\u00EDas con horarios\u2026" })), days?.length === 0 && (_jsx("div", { className: styles.empty, children: "No hay d\u00EDas con horarios disponibles." }))] }, "day")), currentKey === 'hour' && (_jsxs("section", { className: styles.pane, children: [_jsx("h3", { className: styles.q, children: "Elige una hora" }), _jsxs("p", { className: styles.qsub, children: [dayText, " \u00B7 citas de ", durationMinutes, " min"] }), holdError && (_jsx("div", { className: styles.err, role: "alert", children: holdError })), loading ? (_jsx("div", { className: styles.empty, children: "Buscando horarios\u2026" })) : slots.length === 0 ? (_jsx("div", { className: styles.empty, children: "No hay horarios disponibles ese d\u00EDa." })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.slots, children: slots.map((s) => (_jsx("button", { type: "button", disabled: !s.available, className: slot?.id === s.id
+                                                                })] })] }), daysError ? (_jsxs("div", { className: styles.retry, role: "alert", children: [_jsx("span", { children: daysError }), _jsx(ErkButton, { text: "Reintentar", variant: "outlined", onClick: () => setDaysAttempt((n) => n + 1) })] })) : fetchDays && days === undefined ? (_jsx("div", { className: styles.empty, children: "Buscando d\u00EDas con horarios\u2026" })) : (days?.length === 0 && (_jsx("div", { className: styles.empty, children: "No hay d\u00EDas con horarios disponibles." })))] }, "day")), currentKey === 'hour' && (_jsxs("section", { className: styles.pane, children: [_jsx("h3", { className: styles.q, children: "Elige una hora" }), _jsxs("p", { className: styles.qsub, children: [dayText, " \u00B7 citas de ", duration, " min"] }), holdError && (_jsx("div", { className: styles.err, role: "alert", children: holdError })), zoneText && _jsx("p", { className: styles.tz, children: zoneText }), loading ? (_jsx("div", { className: styles.empty, children: "Buscando horarios\u2026" })) : slotsError ? (_jsxs("div", { className: styles.retry, role: "alert", children: [_jsx("span", { children: slotsError }), _jsx(ErkButton, { text: "Reintentar", variant: "outlined", onClick: () => date && void loadSlots(date, person?.id, eventTemplate?.id) })] })) : slots.length === 0 ? (_jsx("div", { className: styles.empty, children: "No hay horarios disponibles ese d\u00EDa." })) : (groupSlots(slots).map((group) => (_jsxs("div", { className: styles.slotGroup, children: [_jsx("h4", { className: styles.slotGroupTitle, children: group.label }), _jsx("div", { className: styles.slots, children: group.slots.map((s) => (_jsxs("button", { type: "button", disabled: !s.available, title: `${s.startTime} – ${s.endTime}`, className: slot?.id === s.id
                                                                     ? `${styles.slot} ${styles.slotSel}`
                                                                     : s.available
                                                                         ? styles.slot
-                                                                        : `${styles.slot} ${styles.slotTaken}`, onClick: () => s.available && setSlot(s), children: s.startTime }, s.id))) }), _jsx("p", { className: styles.takenNote, children: "Tachados = ocupados por otro evento o cita." })] }))] }, "hour")), currentKey === 'confirm' && (_jsxs("section", { className: `${styles.pane} ${styles.paneFinal}`, children: [_jsx("h3", { className: styles.q, children: "Revisa y confirma tu cita" }), _jsx("p", { className: styles.qsub, children: collectContact
-                                                        ? 'Si todo está bien, completa tus datos y confirma.'
-                                                        : 'Si todo está bien, confirma tu cita.' })] }, "confirm"))] })] }), _jsxs("div", { className: styles.navbar, children: [_jsx("div", { className: styles.navSummary, children: isFinal || !canAdvance || navParts.length === 0
+                                                                        : `${styles.slot} ${styles.slotTaken}`, onClick: () => s.available && setSlot(s), children: [s.startTime, s === firstAvailable && (_jsx("span", { className: styles.firstTag, children: "Primera disponible" }))] }, s.id))) })] }, group.label)))), localStart && slot && (_jsxs("p", { className: styles.tz, children: [slot.startTime, " es ", localStart, " en tu hora."] }))] }, "hour")), currentKey === 'confirm' && (_jsxs("section", { className: `${styles.pane} ${styles.paneFinal}`, children: [_jsx("h3", { className: styles.q, children: copy.title }), _jsx("p", { className: styles.qsub, children: withoutContact
+                                                        ? copy.note
+                                                        : askName || askEmail
+                                                            ? 'Completa tus datos y reserva el horario. La cita se confirma al enviar el formulario.'
+                                                            : 'Reserva el horario. La cita se confirma al enviar el formulario.' })] }, "confirm"))] })] }), _jsxs("div", { className: styles.navbar, children: [_jsx("div", { className: styles.navSummary, children: isFinal || !canAdvance || navParts.length === 0
                                         ? STEP_HINT[currentKey]
-                                        : navParts.reduce((acc, part, i) => i === 0 ? [part] : [...acc, _jsx("span", { children: " \u00B7 " }, `s${i}`), part], []) }), wizStep > 0 && (_jsx(ErkButton, { text: "Atr\u00E1s", variant: "outlined", onClick: () => goToStep(wizStep - 1) })), isFinal ? (_jsx(ErkButton, { text: holding ? 'Reservando…' : 'Confirmar cita', sx: ACCENT_SX, disabled: !slot || holding || !canAdvance, onClick: () => void confirm() })) : (_jsx(ErkButton, { text: "Siguiente", disabled: !canAdvance, onClick: () => goToStep(wizStep + 1) }))] })] }) }), error && _jsx("div", { className: styles.err, children: error })] }));
+                                        : navParts.reduce((acc, part, i) => i === 0 ? [part] : [...acc, _jsx("span", { children: " \u00B7 " }, `s${i}`), part], []) }), wizStep > 0 && (_jsx(ErkButton, { text: "Atr\u00E1s", variant: "outlined", onClick: () => goToStep(wizStep - 1) })), isFinal ? (_jsx(ErkButton, { text: holding ? copy.confirming : copy.confirm, sx: ACCENT_SX, disabled: !slot || holding || !canAdvance, onClick: () => void confirm() })) : (_jsx(ErkButton, { text: "Siguiente", disabled: !canAdvance, onClick: () => goToStep(wizStep + 1) }))] })] }) }), error && _jsx("div", { className: styles.err, children: error })] }));
 }
 export default ErkBookingPicker;

package/dist/Shared/ErkBookingPicker/ErkBookingPicker.module.css

@@ -303,6 +303,17 @@
 .pcardOn .chk {
     visibility: visible;
 }
+.tdur {
+    margin-left: auto;
+    flex: none;
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--eureka-primary, #3d5a7f);
+    white-space: nowrap;
+}
+.tdur + .chk {
+    margin-left: 0;
+}
 
 /* step: day (month grid) */
 .monthWrap {
@@ -425,11 +436,38 @@
     cursor: not-allowed;
     text-decoration: line-through;
 }
-.takenNote {
-    margin: 10px 0 0;
-    font-size: 11.5px;
+.slotGroup + .slotGroup {
+    margin-top: 12px;
+}
+.slotGroupTitle {
+    margin: 0 0 6px;
+    font-size: 12px;
+    font-weight: 600;
+    color: #787878;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+.firstTag {
+    display: block;
+    margin-top: 2px;
+    font-size: 10px;
+    font-weight: 500;
+    opacity: 0.8;
+}
+.tz {
+    margin: 0 0 10px;
+    font-size: 12px;
     color: #787878;
 }
+.retry {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 10px;
+    font-size: 13px;
+    color: #d0473f;
+    padding: 12px 0;
+}
 .empty {
     font-size: 13px;
     color: #787878;

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

@@ -20,9 +20,17 @@ export declare const WithPersonSelection: Story;
 export declare const PersonOptional: Story;
 /** No person selection → straight to date + time. */
 export declare const NoPerson: Story;
-/** Extra contact step (collectContact). */
-export declare const WithContact: Story;
-/** Full config: contact data, buffer, lock notice and in-person mode. */
+/** The email comes from an earlier step of the form: the picker only asks for the name. */
+export declare const EmailFromStep: Story;
+/** Full config: name and email asked in the picker, lock notice, in-person mode and the organization clock. */
 export declare const Complete: Story;
+/** A hold that lapsed after it was made: the requester is sent back to the hours with the reason. */
+export declare const Lapsed: Story;
 /** Already booked / read-only summary. */
 export declare const ReadOnly: Story;
+/** Several event templates: the requester picks what they need first, and its duration rules the hours. */
+export declare const PickEventTemplate: Story;
+/** Booked with an event template: the summary names it with its duration. */
+export declare const BookedWithEventTemplate: Story;
+/** The offer did not load: the entry card stays disabled and offers "Reintentar". */
+export declare const OfferFailed: Story;