@medalsocial/meda 2.8.1 → 3.2.0

package/dist/booking/time-screen.js

@@ -0,0 +1,418 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, X } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { cn } from '../lib/utils.js';
+import { BookingButton, bookingButtonClass } from './internal/ui.js';
+import { fillLabel } from './labels.js';
+import { LiveStatus } from './live-status.js';
+import { slotClass } from './slots.js';
+/**
+ * The time step — «when suits you?».
+ *
+ * Presentational, with one piece of state the booking machine deliberately does
+ * not hold: which day the visitor is *looking at*. Nothing about it is
+ * submitted and it survives no further than this screen, so putting it in the
+ * machine would make the wizard remember a scroll position. What gets booked
+ * still leaves here as `onPick(slot)`.
+ */
+// ---------------------------------------------------------------------------
+// Labels
+// ---------------------------------------------------------------------------
+export const TIME_SCREEN_LABEL_KEYS = [
+    'time.heading',
+    'time.dayStrip.legend',
+    'time.nearest',
+    'time.current',
+    'time.nextFree',
+    'time.shortNotice',
+    'time.weekend.pct',
+    'time.weekend.mixed',
+    'time.month.show',
+    'time.month.hide',
+    'time.month.previous',
+    'time.month.next',
+    'time.month.heading',
+    'time.month.note',
+    'time.party.sequential',
+    'time.party.parallel',
+    'time.party.seat',
+    'time.party.seatSeparator',
+    'time.parallel.offer.two',
+    'time.parallel.offer.other',
+    'time.parallel.accept',
+    'time.empty.closed',
+    'time.empty.over',
+    'time.empty.full',
+    'time.empty.stylist',
+    'time.empty.unknown',
+    'time.empty.callLink',
+    'time.empty.callLinkAria',
+    'time.empty.callSuffix',
+    'time.empty.callPlain',
+    'time.loading',
+    'time.skeleton.dayPlaceholder',
+    'time.taken.message',
+    'time.taken.close',
+];
+/** One chip of the day strip: an `aria-pressed` outline button. */
+export function DefaultDayChip({ label, selected, className, onSelect }) {
+    return (_jsx(BookingButton, { variant: "outline", size: "sm", "aria-pressed": selected, onClick: onSelect, className: className, children: label }));
+}
+/** One time chip. */
+export function DefaultTimeChip({ label, nearest, nearestLabel, current, className, onPick, }) {
+    if (current) {
+        return (_jsx(BookingButton, { variant: "outline", size: "lg", disabled: true, "aria-current": "true", className: className, children: label }));
+    }
+    return (_jsxs(BookingButton, { variant: "outline", size: "lg", onClick: onPick, className: className, children: [label, nearest && (_jsxs("span", { className: "sr-only", children: [" ", nearestLabel] }))] }));
+}
+// ---------------------------------------------------------------------------
+// View logic
+// ---------------------------------------------------------------------------
+/** How many alternatives to point at when a slot is taken: what fits under the message on a phone. */
+const NEAREST_COUNT = 2;
+function dayStanding(clock, dayTs, openDays, now) {
+    if (openDays == null)
+        return 'unknown';
+    const entry = openDays.find((day) => day.dayKey === clock.dayKey(dayTs));
+    if (entry === undefined || entry.lastStartTs === null)
+        return 'closed';
+    return now > entry.lastStartTs ? 'over' : 'open';
+}
+/**
+ * The strip, in order: the days the caller offered, else the days that have
+ * slots, else today — so the empty-day card always has a day to name.
+ *
+ * Closed days, and today once it is over, are left out (a chip is an offer);
+ * a booked-out day keeps its chip, because «full» is something the visitor must
+ * be able to read. A day with a bookable slot is always kept whatever the hours
+ * say, and so are the day a slot was stolen from and the day of an appointment
+ * being moved — the visitor is standing on them.
+ */
+function buildDayStrip(clock, slots, days, takenSlotTs, currentSlotTs, openDays, now) {
+    const bookableKeys = new Set(slots.map((slot) => clock.dayKey(slot.startTs)));
+    const byKey = new Map();
+    for (const day of days ?? slots.map((slot) => slot.startTs)) {
+        const standing = dayStanding(clock, day, openDays, now);
+        if (!bookableKeys.has(clock.dayKey(day)) && (standing === 'closed' || standing === 'over')) {
+            continue;
+        }
+        byKey.set(clock.dayKey(day), day);
+    }
+    for (const anchor of [takenSlotTs, currentSlotTs]) {
+        if (anchor !== null && !byKey.has(clock.dayKey(anchor))) {
+            byKey.set(clock.dayKey(anchor), anchor);
+        }
+    }
+    if (byKey.size === 0)
+        byKey.set(clock.dayKey(now), now);
+    return [...byKey.values()].sort((a, b) => a - b);
+}
+/**
+ * The one chip a family taps: `15:00 → 16:00`, or the parallel form
+ * `15:00 (Name with Stylist · Name with Stylist)`. The parallel chip names the
+ * people where the visitor has given a name and the service otherwise.
+ */
+function partyChipLabel(labels, clock, slot, party) {
+    if (slot.mode === 'sequential') {
+        return fillLabel(labels['time.party.sequential'], {
+            start: clock.formatTime(slot.startTs),
+            end: clock.formatTime(party.chipEndTs(slot)),
+        });
+    }
+    const seats = slot.seats.map((seat, index) => {
+        const who = party.items[index]?.bookedForName ?? party.items[index]?.service.name ?? '';
+        const stylist = party.resolveStylistName(seat.resourceId);
+        // No «with», rather than «with null»: a stylist the catalogue cannot name
+        // is a reload of the resource list, not a reason to hide the slot.
+        return stylist === null ? who : fillLabel(labels['time.party.seat'], { who, stylist });
+    });
+    return fillLabel(labels['time.party.parallel'], {
+        time: clock.formatTime(slot.startTs),
+        seats: seats.join(labels['time.party.seatSeparator']),
+    });
+}
+/**
+ * The instants on offer — ONE per instant. Availability is per (start,
+ * resource), so «first available» returns an 11:00 once per free stylist.
+ * First-seen wins, and the stylist it carries is the one submitted. A party
+ * slot is reduced to its start and first stylist for everything structural.
+ */
+function offeredSlots(slots, party) {
+    if (party === undefined) {
+        const byStart = new Map();
+        for (const slot of slots) {
+            if (!byStart.has(slot.startTs))
+                byStart.set(slot.startTs, slot);
+        }
+        return [...byStart.values()];
+    }
+    return party.slots.map((slot) => ({
+        startTs: slot.startTs,
+        resourceId: slot.seats[0]?.resourceId ?? null,
+    }));
+}
+function weekendSentence(labels, format, note) {
+    const price = format.price(note.priceOre);
+    return note.pct === null
+        ? fillLabel(labels['time.weekend.mixed'], { price })
+        : fillLabel(labels['time.weekend.pct'], { pct: note.pct, price });
+}
+// Month grid — pure calendar arithmetic over the business-local date, so a
+// viewer in another zone is never shown a grid built around the wrong day.
+function ymd(clock, ts) {
+    const [year = 0, month = 1, day = 1] = clock.dayKey(ts).split('-').map(Number);
+    return { year, month, day };
+}
+const MONTH_LENGTHS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+function daysInMonth(year, month) {
+    const leap = (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+    return month === 2 && leap ? 29 : (MONTH_LENGTHS[month - 1] ?? 30);
+}
+const SAKAMOTO = [0, 3, 2, 5, 0, 3, 5, 1, 4, 6, 2, 4];
+/** Monday = 0 … Sunday = 6 for a calendar date. */
+function weekdayIndex(year, month, day) {
+    const y = month < 3 ? year - 1 : year;
+    const sunday0 = (y +
+        Math.floor(y / 4) -
+        Math.floor(y / 100) +
+        Math.floor(y / 400) +
+        SAKAMOTO[month - 1] +
+        day) %
+        7;
+    return (sunday0 + 6) % 7;
+}
+/**
+ * Every date of the month `ts` falls in, one instant inside each, padded with
+ * `null` so the first lands under its weekday. Stepped with `dayStart`, never
+ * `+ 86 400 000`, so a clock change cannot drop or double a day.
+ */
+function monthGrid(clock, ts) {
+    const { year, month, day } = ymd(clock, ts);
+    const first = clock.dayStart(ts, 1 - day);
+    const cells = Array.from({ length: weekdayIndex(year, month, 1) }, () => null);
+    for (let index = 0; index < daysInMonth(year, month); index += 1) {
+        cells.push(clock.dayStart(first, index));
+    }
+    return cells;
+}
+// ---------------------------------------------------------------------------
+// TimeScreen
+// ---------------------------------------------------------------------------
+export function TimeScreen({ labels, format, dayparts, slots, days, openDays = null, stylistName = null, takenSlotTs = null, phone = null, weekendNote, currentSlotTs = null, monthView = false, onPick, party, now: nowProp, classNames, components, }) {
+    const now = nowProp ?? Date.now();
+    const { clock } = format;
+    const DayChip = components?.DayChip ?? DefaultDayChip;
+    const bookable = offeredSlots(slots, party);
+    // The current-hour marker rides along with the real openings so the strip,
+    // the daypart grouping and the chip order all place it without a second code
+    // path. Every decision about whether there is anything to BOOK reads
+    // `bookable` instead.
+    const offered = currentSlotTs !== null && !bookable.some((slot) => slot.startTs === currentSlotTs)
+        ? [...bookable, { startTs: currentSlotTs, resourceId: null }]
+        : bookable;
+    const partyByStart = new Map(party?.slots.map((slot) => [slot.startTs, slot]) ?? []);
+    const strip = buildDayStrip(clock, offered, days, takenSlotTs, currentSlotTs, openDays, now);
+    // Read back through the strip rather than held as a day of its own, so new
+    // availability cannot leave the step pointing at a day no longer offered.
+    const [tappedDayKey, setTappedDayKey] = useState(null);
+    const [showMonth, setShowMonth] = useState(false);
+    const [monthTs, setMonthTs] = useState(null);
+    const selectedDay = strip.find((day) => clock.dayKey(day) === tappedDayKey) ??
+        // A stolen slot lands the visitor back on the day they just lost.
+        (takenSlotTs === null
+            ? undefined
+            : strip.find((day) => clock.dayKey(day) === clock.dayKey(takenSlotTs))) ??
+        // Moving an appointment opens on the day it is on.
+        (currentSlotTs === null
+            ? undefined
+            : strip.find((day) => clock.dayKey(day) === clock.dayKey(currentSlotTs))) ??
+        strip[0] ??
+        now;
+    const selectedKey = clock.dayKey(selectedDay);
+    const daySlots = offered
+        .filter((slot) => clock.dayKey(slot.startTs) === selectedKey)
+        .sort((a, b) => a.startTs - b.startTs);
+    const dayBookable = daySlots.filter((slot) => slot.startTs !== currentSlotTs);
+    const nearest = new Set(takenSlotTs === null
+        ? []
+        : [...dayBookable]
+            .sort((a, b) => Math.abs(a.startTs - takenSlotTs) - Math.abs(b.startTs - takenSlotTs))
+            .slice(0, NEAREST_COUNT)
+            .map((slot) => slot.startTs));
+    // Over the openings, never the marker.
+    const earliest = bookable.reduce((best, slot) => (best === null || slot.startTs < best.startTs ? slot : best), null);
+    const elsewhere = earliest !== null && clock.dayKey(earliest.startTs) !== selectedKey ? earliest : null;
+    const isToday = clock.daysBetween(now, selectedDay) === 0;
+    // Whether the basket pays a surcharge on ANY day decides whether the row
+    // exists; the day on screen only decides what is in it.
+    const surcharge = weekendNote?.(selectedDay) ?? null;
+    const alternative = party !== undefined && party.mode === 'sequential'
+        ? (party.alternativeFor?.(selectedDay) ?? null)
+        : null;
+    return (_jsxs("section", { "aria-labelledby": "booking-time-heading", className: slotClass(classNames, 'root', 'space-y-6'), children: [_jsx(TimeHeading, { labels: labels, className: classNames?.heading }), strip.length > 1 && (_jsxs("fieldset", { className: slotClass(classNames, 'dayStrip', 'flex flex-wrap gap-2'), children: [_jsx("legend", { className: "sr-only", children: labels['time.dayStrip.legend'] }), strip.map((day) => {
+                        const selected = clock.dayKey(day) === selectedKey;
+                        return (_jsx(DayChip, { dayTs: day, label: clock.dayChip(day, now), selected: selected, onSelect: () => setTappedDayKey(clock.dayKey(day)), className: cn('rounded-full', selected ? 'border-primary bg-primary/10 font-bold ring-2 ring-primary' : '', classNames?.dayChip, selected ? classNames?.dayChipSelected : undefined) }, clock.dayKey(day)));
+                    })] })), monthView && (_jsx(MonthCalendar, { labels: labels, clock: clock, open: showMonth, onToggle: () => setShowMonth((shown) => !shown), monthTs: monthTs ?? selectedDay, onMonth: setMonthTs, strip: strip, selectedDay: selectedDay, now: now, onPickDay: (day) => setTappedDayKey(clock.dayKey(day)), classNames: classNames })), surcharge !== null && (_jsx("p", { "data-testid": "surcharge-row", className: slotClass(classNames, 'surcharge', 'min-h-5 text-sm text-muted-foreground'), children: clock.isWeekend(selectedDay) ? weekendSentence(labels, format, surcharge) : null })), dayBookable.length === 0 && alternative && party && (_jsx(ParallelInstead, { labels: labels, clock: clock, slot: alternative, day: selectedDay, now: now, size: party.items.length, onAccept: () => party.onPick(alternative), className: classNames?.parallel })), dayBookable.length === 0 && !(alternative && party) && (_jsx(NothingFreeCard, { labels: labels, format: format, day: selectedDay, now: now, phone: phone, standing: dayStanding(clock, selectedDay, openDays, now), stylistName: stylistName, className: classNames?.empty })), dayBookable.length > 0 && (_jsx(DaypartSections, { labels: labels, clock: clock, dayparts: dayparts, daySlots: daySlots, nearest: nearest, currentSlotTs: currentSlotTs, party: party, partyByStart: partyByStart, onPick: onPick, classNames: classNames, TimeChip: components?.TimeChip ?? DefaultTimeChip })), elsewhere && (_jsx(BookingButton, { variant: "link", onClick: () => setTappedDayKey(clock.dayKey(elsewhere.startTs)), className: classNames?.nextFree, children: labels['time.nextFree'] })), isToday && dayBookable.length > 0 && (_jsx(ShortNoticeLine, { labels: labels, format: format, phone: phone, className: classNames?.shortNotice }))] }));
+}
+function TimeHeading({ labels, className, }) {
+    return (_jsx("h2", { id: "booking-time-heading", tabIndex: -1, className: cn('font-sans text-2xl font-bold outline-none md:text-3xl', className), children: labels['time.heading'] }));
+}
+// ---------------------------------------------------------------------------
+// TakenToast
+// ---------------------------------------------------------------------------
+/** How long the «just taken» toast stays up before it gets out of the way. */
+const TOAST_MS = 8000;
+/**
+ * «That one was just taken», as a toast over the page. Fixed, so it moves
+ * nothing; the ringed chips carry the message once it has gone. Render it ONCE,
+ * outside any skeleton-or-step switch, so a re-read of the openings cannot
+ * remount it. The live region is mounted empty and filled after mount.
+ */
+export function TakenToast({ labels, takenSlotTs, className }) {
+    const [shown, setShown] = useState(false);
+    useEffect(() => {
+        if (takenSlotTs === null) {
+            setShown(false);
+            return;
+        }
+        setShown(true);
+        const timer = window.setTimeout(() => setShown(false), TOAST_MS);
+        return () => window.clearTimeout(timer);
+    }, [takenSlotTs]);
+    return (_jsx("div", { role: "status", "aria-live": "polite", className: shown
+            ? cn('fixed inset-x-4 bottom-24 z-50 mx-auto flex max-w-md items-center gap-3 rounded-lg border border-secondary/40 bg-background px-5 py-3 text-sm shadow-lg', className)
+            : 'sr-only', children: shown && (_jsxs(_Fragment, { children: [_jsx("p", { className: "flex-1", children: labels['time.taken.message'] }), _jsx("button", { type: "button", "aria-label": labels['time.taken.close'], onClick: () => setShown(false), className: "flex size-8 shrink-0 items-center justify-center rounded-full hover:bg-muted", children: _jsx(X, { "aria-hidden": "true", className: "size-4" }) })] })) }));
+}
+/**
+ * The time step before its openings are in: the same heading, a strip of day
+ * chips and a daypart of time chips, each built from the real chip's own button
+ * classes so every box is the same size.
+ */
+export function TimeScreenSkeleton({ labels, days = 7, monthView = false, surchargeRow = false, className, }) {
+    const dayChip = bookingButtonClass({
+        variant: 'outline',
+        size: 'sm',
+        className: 'animate-pulse rounded-full border-border bg-muted text-transparent',
+    });
+    const slotChip = bookingButtonClass({
+        variant: 'outline',
+        size: 'lg',
+        className: 'min-w-20 animate-pulse border-border bg-muted text-transparent',
+    });
+    return (_jsxs("section", { "aria-labelledby": "booking-time-heading", className: cn('space-y-6', className), children: [_jsx(TimeHeading, { labels: labels }), _jsx(LiveStatus, { text: labels['time.loading'] }), _jsxs("div", { "aria-hidden": "true", className: "space-y-6", children: [_jsx("div", { className: "flex flex-wrap gap-2", children: Array.from({ length: days }, (_, index) => (_jsx("span", { "data-testid": "day-chip-skeleton", className: dayChip, children: labels['time.skeleton.dayPlaceholder'] }, index))) }), monthView && _jsx("span", { className: "block h-8 w-36 animate-pulse rounded bg-muted" }), surchargeRow && _jsx("span", { "data-testid": "surcharge-row-skeleton", className: "block min-h-5" }), _jsxs("div", { className: "space-y-3", children: [_jsx("span", { className: "block h-7 w-32 animate-pulse rounded bg-muted" }), _jsx("div", { className: "flex flex-wrap gap-2", children: Array.from({ length: 8 }, (_, index) => (_jsx("span", { "data-testid": "slot-skeleton", className: slotChip, children: "00:00" }, index))) })] })] })] }));
+}
+// ---------------------------------------------------------------------------
+// Month view
+// ---------------------------------------------------------------------------
+/**
+ * «Show the whole month» — the strip's days laid out as the month they sit in.
+ * Only those days are tappable; every other cell is inert, because a calendar
+ * that let a visitor tap an unasked-about date and then said «full» would be
+ * inventing a fact. Collapsed by default; navigable both ways, never disabled.
+ */
+function MonthCalendar({ labels, clock, open, onToggle, monthTs, onMonth, strip, selectedDay, now, onPickDay, classNames, }) {
+    const offered = new Map(strip.map((day) => [clock.dayKey(day), day]));
+    const cells = open ? monthGrid(clock, monthTs) : [];
+    const { year, month, day: anchorDay } = ymd(clock, monthTs);
+    const firstOfMonth = clock.dayStart(monthTs, 1 - anchorDay);
+    const monthName = clock.monthName(month);
+    const heading = fillLabel(labels['time.month.heading'], {
+        month: `${monthName.charAt(0).toUpperCase()}${monthName.slice(1)}`,
+        year,
+    });
+    const selectedKey = clock.dayKey(selectedDay);
+    return (_jsxs("div", { className: slotClass(classNames, 'month', 'space-y-3'), children: [_jsxs(BookingButton, { variant: "link", size: "sm", "aria-expanded": open, onClick: onToggle, className: "px-0", children: [open ? labels['time.month.hide'] : labels['time.month.show'], open ? (_jsx(ChevronUp, { "aria-hidden": "true", className: "size-4" })) : (_jsx(ChevronDown, { "aria-hidden": "true", className: "size-4" }))] }), open && (_jsxs("div", { className: "space-y-3 rounded-lg border border-border bg-card px-4 py-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(BookingButton, { variant: "outline", size: "icon", "aria-label": labels['time.month.previous'], onClick: () => onMonth(clock.dayStart(firstOfMonth, -1)), className: "rounded-full", children: _jsx(ChevronLeft, { "aria-hidden": "true", className: "size-4" }) }), _jsx("p", { "aria-live": "polite", className: "font-sans font-bold", children: heading }), _jsx(BookingButton, { variant: "outline", size: "icon", "aria-label": labels['time.month.next'], onClick: () => onMonth(clock.dayStart(firstOfMonth, daysInMonth(year, month))), className: "rounded-full", children: _jsx(ChevronRight, { "aria-hidden": "true", className: "size-4" }) })] }), _jsx("div", { "aria-hidden": "true", className: "grid grid-cols-7 gap-1 text-center", children: clock.weekdayHeads().map((head, index) => (_jsx("span", { className: "text-xs font-bold text-muted-foreground", children: head }, index))) }), _jsx("div", { className: "grid grid-cols-7 gap-1", children: cells.map((cell, index) => {
+                            if (cell === null) {
+                                // The blanks before the first of the month; the position is
+                                // the only thing that tells them apart.
+                                // biome-ignore lint/suspicious/noArrayIndexKey: padding cells
+                                return _jsx("span", { "aria-hidden": "true" }, `pad-${index}`);
+                            }
+                            const key = clock.dayKey(cell);
+                            const bookable = offered.get(key);
+                            const selected = key === selectedKey;
+                            const { day } = ymd(clock, cell);
+                            if (bookable === undefined) {
+                                return (_jsx("span", { className: "flex h-10 items-center justify-center rounded-md text-sm text-muted-foreground/50 tabular-nums", children: day }, key));
+                            }
+                            return (_jsx("button", { type: "button", "aria-pressed": selected, "aria-label": clock.dayLabel(bookable, now), onClick: () => onPickDay(bookable), className: cn('flex h-10 items-center justify-center rounded-md border text-sm font-bold tabular-nums transition-colors', selected
+                                    ? 'border-primary bg-primary/10 ring-2 ring-primary'
+                                    : 'border-border hover:bg-muted', classNames?.monthCell, selected ? classNames?.monthCellSelected : undefined), children: day }, key));
+                        }) }), _jsx("p", { className: "text-xs text-muted-foreground", children: labels['time.month.note'] })] }))] }));
+}
+// ---------------------------------------------------------------------------
+// Dayparts
+// ---------------------------------------------------------------------------
+/** The chosen day's openings, grouped under the dayparts. A single-service chip
+ * and a whole family's visit are the same chip; only its text and what a tap
+ * raises differ. */
+function DaypartSections({ labels, clock, dayparts, daySlots, nearest, currentSlotTs, party, partyByStart, onPick, classNames, TimeChip, }) {
+    return dayparts.map((daypart) => {
+        const items = daySlots.filter((slot) => clock.daypartOf(slot.startTs) === daypart.key);
+        // An empty daypart is not a heading with nothing under it — there is
+        // simply no evening on that day.
+        if (items.length === 0)
+            return null;
+        return (_jsxs("section", { "aria-labelledby": `booking-${daypart.key}`, className: slotClass(classNames, 'daypart', 'space-y-3'), children: [_jsx("h3", { id: `booking-${daypart.key}`, className: slotClass(classNames, 'daypartHeading', 'font-sans text-lg font-bold'), children: daypart.label }), _jsx("div", { className: "flex flex-wrap gap-2", children: items.map((slot) => {
+                        const partySlot = partyByStart.get(slot.startTs);
+                        const current = slot.startTs === currentSlotTs;
+                        const isNearest = !current && nearest.has(slot.startTs);
+                        let label = clock.formatTime(slot.startTs);
+                        if (current) {
+                            label = fillLabel(labels['time.current'], { time: label });
+                        }
+                        else if (partySlot && party) {
+                            label = partyChipLabel(labels, clock, partySlot, party);
+                        }
+                        return (_jsx(TimeChip, { startTs: slot.startTs, label: label, nearest: isNearest, nearestLabel: labels['time.nearest'], current: current, onPick: () => (partySlot && party ? party.onPick(partySlot) : onPick(slot)), className: cn('min-w-20 tabular-nums', isNearest ? 'border-primary ring-2 ring-primary' : '', classNames?.chip, isNearest ? classNames?.chipNearest : undefined, current ? classNames?.chipCurrent : undefined) }, slot.startTs));
+                    }) })] }, daypart.key));
+    });
+}
+// ---------------------------------------------------------------------------
+// Empty-day cards
+// ---------------------------------------------------------------------------
+/**
+ * «No back-to-back times on Thursday – but both can be seen at once at 15:00»,
+ * with the button that takes it up. `onAccept` raises the whole `PartySlot`,
+ * `mode` included, so the caller seats it side by side.
+ */
+function ParallelInstead({ labels, clock, slot, day, now, size, onAccept, className, }) {
+    const time = clock.formatTime(slot.startTs);
+    const offer = size === 2 ? labels['time.parallel.offer.two'] : labels['time.parallel.offer.other'];
+    return (_jsxs("div", { className: cn('space-y-3 rounded-lg border border-primary/40 bg-primary/5 px-5 py-4', className), children: [_jsx("p", { className: "text-sm", children: fillLabel(offer, { day: clock.dayLabel(day, now), time }) }), _jsx(BookingButton, { size: "lg", onClick: onAccept, className: "tabular-nums", children: fillLabel(labels['time.parallel.accept'], { time }) })] }));
+}
+/**
+ * A day with nothing left, in four different situations:
+ * - `closed` / `over` — say so, with no telephone (nobody is there, or the
+ *   last start has gone);
+ * - `open` — «full», with the telephone — or, when the visitor asked for one
+ *   stylist, that stylist has nothing (the hours are the business's, so «full»
+ *   could be false);
+ * - `unknown` — the hours could not be read: «nothing free», true whatever they are.
+ */
+function NothingFreeCard({ labels, format, day, now, phone, standing, stylistName, className, }) {
+    const dayLabel = format.clock.dayLabel(day, now);
+    const cardClass = cn('rounded-lg border border-border bg-card px-5 py-4 text-sm', className);
+    if (standing === 'closed' || standing === 'over') {
+        return (_jsx("p", { className: cardClass, children: fillLabel(labels[standing === 'closed' ? 'time.empty.closed' : 'time.empty.over'], {
+                day: dayLabel,
+            }) }));
+    }
+    let lead = fillLabel(labels['time.empty.unknown'], { day: dayLabel });
+    if (standing === 'open') {
+        lead = stylistName
+            ? fillLabel(labels['time.empty.stylist'], { stylist: stylistName, day: dayLabel })
+            : fillLabel(labels['time.empty.full'], { day: dayLabel });
+    }
+    return (_jsxs("p", { className: cardClass, children: [lead, ' ', phone ? (_jsxs(_Fragment, { children: [_jsx("a", { href: format.telHref(phone), "aria-label": fillLabel(labels['time.empty.callLinkAria'], { phone }), className: "font-semibold text-primary underline underline-offset-4", children: fillLabel(labels['time.empty.callLink'], { phone }) }), labels['time.empty.callSuffix']] })) : (labels['time.empty.callPlain'])] }));
+}
+/**
+ * Today's remaining gaps sit inside the business's lead time, so they are never
+ * offered — but the chair may well be empty in an hour, and the visitor on the
+ * pavement is the one customer most worth catching.
+ */
+function ShortNoticeLine({ labels, format, phone, className, }) {
+    const sentence = labels['time.shortNotice'];
+    return (_jsx("p", { className: cn('text-sm text-muted-foreground', className), children: phone ? (_jsx("a", { href: format.telHref(phone), className: "font-semibold text-primary underline underline-offset-4", children: sentence })) : (sentence) }));
+}