@medalsocial/meda 3.0.0 → 3.3.0

package/dist/booking/manage-screen.d.ts

@@ -0,0 +1,113 @@
+import type { BookingDaypart, BookingFormat } from './format.js';
+import { type SlotClassNames } from './slots.js';
+import { type TimeScreenComponents, type TimeScreenLabels, type TimeScreenSlot } from './time-screen.js';
+import type { BookingDayDto, BookingManageDto, BookingSlotDto } from './types.js';
+/**
+ * The page at the end of the «manage your booking» link.
+ *
+ * Presentational: it never sees the manage token and never fetches. Loading
+ * openings, cancelling and moving are callbacks; the screen owns only the view
+ * it is on, the chosen reason and new slot, and the pending state of the one
+ * mutation in flight.
+ *
+ * The change windows are NOT decided here. The engine answers `canCancel` /
+ * `canReschedule` with the same comparison it enforces on the write, so this
+ * screen relays those two booleans and never recomputes them. The only thing it
+ * derives is the *sentence* about when free changes end.
+ */
+export declare const MANAGE_SCREEN_LABEL_KEYS: readonly ["manage.heading", "manage.serviceFallback", "manage.card.named", "manage.card.when", "manage.card.whenWithStylist", "manage.appointment.named", "manage.appointment.namedSibilant", "manage.appointment.unnamed", "manage.ringUs", "manage.ringUsOn", "manage.callUs", "manage.callUsOn", "manage.error.windowPassed", "manage.error.slotTaken", "manage.error.notFound", "manage.error.conflict", "manage.error.invalidInput", "manage.error.unavailable", "manage.freeUntil", "manage.remaining.in", "manage.remaining.daysAndHours", "manage.remaining.underMinute", "manage.remaining.day.one", "manage.remaining.day.other", "manage.remaining.hour.one", "manage.remaining.hour.other", "manage.remaining.minute.one", "manage.remaining.minute.other", "manage.change", "manage.cancel", "manage.callToChange", "manage.callToCancel", "manage.blocked", "manage.blocked.suffix", "manage.blocked.plain", "manage.calendar", "manage.closed.cancelled", "manage.closed.completed", "manage.closed.noShow", "manage.closed.pending", "manage.closed.pendingCall", "manage.closed.pendingCallPlain", "manage.bookNew", "manage.party.heading", "manage.party.justThisOne", "manage.party.unnamed", "manage.party.note", "manage.party.noteSuffix", "manage.back", "manage.reschedule.lead", "manage.reschedule.leadWithStylist", "manage.reschedule.failed", "manage.reschedule.failedSuffix", "manage.reschedule.loading", "manage.move.question", "manage.move.questionWithStylist", "manage.move.surcharge", "manage.move.confirm", "manage.move.pickAnother", "manage.cancel.question", "manage.cancel.reasonLegend", "manage.cancel.reason.illness", "manage.cancel.reason.noLongerSuits", "manage.cancel.reason.other", "manage.cancel.confirm", "manage.cancel.keep", "manage.cancelled", "manage.cancelled.findNew", "manage.moved", "manage.movedTo", "manage.moved.view", "manage.moved.noLink", "manage.moved.noLinkSuffix", "manage.portal"];
+/**
+ * Copy for the manage screen, plus the embedded time step's (`TimeScreenLabels`).
+ *
+ * Placeholders: `card.named` `{name}` `{service}`; `card.when*` `{dateTime}` `{stylist}` `{price}`;
+ * `appointment.named*` `{name}` (`namedSibilant` is used for names ending in s, x or z);
+ * `ringUsOn` / `callUsOn` `{phone}`; `error.windowPassed|conflict|unavailable` `{ringUs}`;
+ * `error.notFound` `{callUs}`; `freeUntil` `{dateTime}`; `remaining.in` `{amount}`;
+ * `remaining.daysAndHours` `{days}` `{hours}`; `remaining.*.one|other` `{count}`;
+ * `callToChange` / `callToCancel` / `blocked` `{hours}`; `closed.pendingCall` `{phone}`;
+ * `party.heading` / `party.justThisOne` `{who}`; `reschedule.lead*` `{service}` `{stylist}`;
+ * `move.question*` `{appointment}` `{from}` `{to}` `{stylist}`;
+ * `move.surcharge` `{weekday}` `{price}` `{pct}`; `cancel.question` `{appointment}` `{dateTime}` `{hours}`;
+ * `movedTo` `{dateTime}`.
+ *
+ * The three `cancel.reason.*` strings are both the chips' text and the value
+ * `onCancel` receives.
+ */
+export type ManageScreenLabels = Record<(typeof MANAGE_SCREEN_LABEL_KEYS)[number], string> & TimeScreenLabels;
+/** Why a mutation failed. Map anything the route did not name to `unavailable`. */
+export type ManageErrorCode = 'windowPassed' | 'slotTaken' | 'notFound' | 'conflict' | 'invalidInput' | 'unavailable';
+/**
+ * What a cancel or a move answers. After a move, `manageHref` is the link built
+ * from the freshly minted manage token — `null`/absent when the engine did not
+ * return one (an idempotent replay), in which case no link is drawn. Putting
+ * that href in the address bar (`history.replaceState`) is the caller's job.
+ */
+export type ManageResult = {
+    ok: true;
+    manageHref?: string | null;
+} | {
+    ok: false;
+    code: ManageErrorCode;
+};
+/** The openings around the appointment, for the reschedule step. */
+export interface ManageReschedule {
+    /** `null` until they have been loaded. */
+    slots: BookingSlotDto[] | null;
+    /** The last load failed. Takes precedence over `slots`. */
+    failed?: boolean;
+    /** Forwarded to the time step. */
+    days?: number[];
+    openDays?: readonly BookingDayDto[] | null;
+}
+/** Today's prices for the booked service, for the weekend note on a new slot. */
+export interface ManagePricing {
+    /** The service's price for a visit starting at `ts`, in minor units. */
+    priceAt: (ts: number) => number;
+    weekendSurchargePct: number;
+}
+/**
+ * `classNames` slots: `root` the section · `heading` the h1 · `alert` the error ·
+ * `card` the booking card · `actions` the overview's button row · `panel` each
+ * confirm / party / result panel · `footer` the portal-link line.
+ */
+export type ManageScreenSlot = 'root' | 'heading' | 'alert' | 'card' | 'actions' | 'panel' | 'footer';
+export interface ManageScreenProps {
+    labels: ManageScreenLabels;
+    format: BookingFormat;
+    dayparts: readonly BookingDaypart[];
+    booking: BookingManageDto;
+    /** The business's number; `null` renders every phone sentence unlinked. */
+    phone?: string | null;
+    address?: string | null;
+    /** Where «book a new time» goes. */
+    bookingHref: string;
+    /** The portal («all your appointments») link at the foot of every view; `null` hides it. */
+    portalHref?: string | null;
+    /**
+     * The «add to calendar» href (e.g. an ICS `data:` URL, built by the caller so
+     * it can carry this page's manage link); `null` hides the link.
+     */
+    icsHref?: string | null;
+    /** The `download` name for `icsHref` (browsers refuse a top-level `data:` navigation without it). */
+    icsFileName?: string;
+    /** Absent — the catalogue did not load — means no weekend note rather than a guessed one. */
+    pricing?: ManagePricing | null;
+    reschedule: ManageReschedule;
+    /**
+     * Load (or reload) the openings. Called when the visitor opens the time step
+     * with nothing loaded or after a failure, and after a move lost its slot.
+     */
+    onRequestSlots: () => void;
+    /** Cancel, with the chosen reason chip's text or `null`. Held pending until it settles. */
+    onCancel: (reason: string | null) => Promise<ManageResult>;
+    /** Move to `slot`. Held pending until it settles. */
+    onReschedule: (slot: BookingSlotDto) => Promise<ManageResult>;
+    /** «Now», for the time left to change for free. Defaults to `Date.now()` (read after mount). */
+    now?: number;
+    classNames?: SlotClassNames<ManageScreenSlot>;
+    /** Slot overrides for the embedded time step. */
+    timeClassNames?: SlotClassNames<TimeScreenSlot>;
+    /** Chip overrides for the embedded time step. */
+    components?: TimeScreenComponents;
+}
+export declare function ManageScreen({ labels, format, dayparts, booking, phone, address, bookingHref, portalHref, icsHref, icsFileName, pricing, reschedule, onRequestSlots, onCancel, onReschedule, now: nowProp, classNames, timeClassNames, components, }: ManageScreenProps): import("react").JSX.Element;

package/dist/booking/manage-screen.js

@@ -0,0 +1,372 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { cn } from '../lib/utils.js';
+import { renderLabel } from './internal/label-parts.js';
+import { BookingButton } from './internal/ui.js';
+import { fillLabel } from './labels.js';
+import { slotClass } from './slots.js';
+import { TimeScreen, } from './time-screen.js';
+/**
+ * The page at the end of the «manage your booking» link.
+ *
+ * Presentational: it never sees the manage token and never fetches. Loading
+ * openings, cancelling and moving are callbacks; the screen owns only the view
+ * it is on, the chosen reason and new slot, and the pending state of the one
+ * mutation in flight.
+ *
+ * The change windows are NOT decided here. The engine answers `canCancel` /
+ * `canReschedule` with the same comparison it enforces on the write, so this
+ * screen relays those two booleans and never recomputes them. The only thing it
+ * derives is the *sentence* about when free changes end.
+ */
+// ---------------------------------------------------------------------------
+// Labels
+// ---------------------------------------------------------------------------
+export const MANAGE_SCREEN_LABEL_KEYS = [
+    'manage.heading',
+    'manage.serviceFallback',
+    'manage.card.named',
+    'manage.card.when',
+    'manage.card.whenWithStylist',
+    'manage.appointment.named',
+    'manage.appointment.namedSibilant',
+    'manage.appointment.unnamed',
+    'manage.ringUs',
+    'manage.ringUsOn',
+    'manage.callUs',
+    'manage.callUsOn',
+    'manage.error.windowPassed',
+    'manage.error.slotTaken',
+    'manage.error.notFound',
+    'manage.error.conflict',
+    'manage.error.invalidInput',
+    'manage.error.unavailable',
+    'manage.freeUntil',
+    'manage.remaining.in',
+    'manage.remaining.daysAndHours',
+    'manage.remaining.underMinute',
+    'manage.remaining.day.one',
+    'manage.remaining.day.other',
+    'manage.remaining.hour.one',
+    'manage.remaining.hour.other',
+    'manage.remaining.minute.one',
+    'manage.remaining.minute.other',
+    'manage.change',
+    'manage.cancel',
+    'manage.callToChange',
+    'manage.callToCancel',
+    'manage.blocked',
+    'manage.blocked.suffix',
+    'manage.blocked.plain',
+    'manage.calendar',
+    'manage.closed.cancelled',
+    'manage.closed.completed',
+    'manage.closed.noShow',
+    'manage.closed.pending',
+    'manage.closed.pendingCall',
+    'manage.closed.pendingCallPlain',
+    'manage.bookNew',
+    'manage.party.heading',
+    'manage.party.justThisOne',
+    'manage.party.unnamed',
+    'manage.party.note',
+    'manage.party.noteSuffix',
+    'manage.back',
+    'manage.reschedule.lead',
+    'manage.reschedule.leadWithStylist',
+    'manage.reschedule.failed',
+    'manage.reschedule.failedSuffix',
+    'manage.reschedule.loading',
+    'manage.move.question',
+    'manage.move.questionWithStylist',
+    'manage.move.surcharge',
+    'manage.move.confirm',
+    'manage.move.pickAnother',
+    'manage.cancel.question',
+    'manage.cancel.reasonLegend',
+    'manage.cancel.reason.illness',
+    'manage.cancel.reason.noLongerSuits',
+    'manage.cancel.reason.other',
+    'manage.cancel.confirm',
+    'manage.cancel.keep',
+    'manage.cancelled',
+    'manage.cancelled.findNew',
+    'manage.moved',
+    'manage.movedTo',
+    'manage.moved.view',
+    'manage.moved.noLink',
+    'manage.moved.noLinkSuffix',
+    'manage.portal',
+];
+const HOUR_MS = 3_600_000;
+const DAY_MS = 86_400_000;
+/** The names the engine substitutes for a deleted catalogue row. Never printed. */
+const UNKNOWN_SERVICE = 'Unknown service';
+const UNKNOWN_RESOURCE = 'Unknown resource';
+const CANCEL_REASON_KEYS = [
+    'manage.cancel.reason.illness',
+    'manage.cancel.reason.noLongerSuits',
+    'manage.cancel.reason.other',
+];
+const CLOSED_SENTENCE = {
+    cancelled: 'manage.closed.cancelled',
+    completed: 'manage.closed.completed',
+    no_show: 'manage.closed.noShow',
+};
+const LINK_CLASS = 'font-semibold text-primary underline underline-offset-4';
+// ---------------------------------------------------------------------------
+// Sentences
+// ---------------------------------------------------------------------------
+/** «Name's appointment» when a name was given, the bare noun when not. */
+function theirAppointment(labels, name) {
+    if (!name)
+        return labels['manage.appointment.unnamed'];
+    return fillLabel(labels[/[sxz]$/i.test(name) ? 'manage.appointment.namedSibilant' : 'manage.appointment.named'], { name });
+}
+/**
+ * «in 1 day and 3 hours» — whole days and hours, because it is read as
+ * reassurance rather than a countdown; minutes only under an hour.
+ */
+function remainingLabel(labels, ms) {
+    const days = Math.floor(ms / DAY_MS);
+    const hours = Math.floor((ms % DAY_MS) / HOUR_MS);
+    const dayPart = fillLabel(labels[days === 1 ? 'manage.remaining.day.one' : 'manage.remaining.day.other'], { count: days });
+    const hourPart = fillLabel(labels[hours === 1 ? 'manage.remaining.hour.one' : 'manage.remaining.hour.other'], { count: hours });
+    if (days > 0) {
+        return hours > 0
+            ? fillLabel(labels['manage.remaining.daysAndHours'], { days: dayPart, hours: hourPart })
+            : fillLabel(labels['manage.remaining.in'], { amount: dayPart });
+    }
+    if (hours > 0)
+        return fillLabel(labels['manage.remaining.in'], { amount: hourPart });
+    const minutes = Math.floor((ms % HOUR_MS) / 60_000);
+    if (minutes < 1)
+        return labels['manage.remaining.underMinute'];
+    return fillLabel(labels['manage.remaining.in'], {
+        amount: fillLabel(labels[minutes === 1 ? 'manage.remaining.minute.one' : 'manage.remaining.minute.other'], { count: minutes }),
+    });
+}
+function ringUs(labels, phone) {
+    return phone ? fillLabel(labels['manage.ringUsOn'], { phone }) : labels['manage.ringUs'];
+}
+function callUs(labels, phone) {
+    return phone ? fillLabel(labels['manage.callUsOn'], { phone }) : labels['manage.callUs'];
+}
+/** What the visitor is told went wrong — never the upstream's own words. */
+function errorSentence(labels, code, phone) {
+    switch (code) {
+        case 'windowPassed':
+            return fillLabel(labels['manage.error.windowPassed'], { ringUs: ringUs(labels, phone) });
+        case 'slotTaken':
+            return labels['manage.error.slotTaken'];
+        case 'notFound':
+            return fillLabel(labels['manage.error.notFound'], { callUs: callUs(labels, phone) });
+        case 'conflict':
+            return fillLabel(labels['manage.error.conflict'], { ringUs: ringUs(labels, phone) });
+        case 'invalidInput':
+            return labels['manage.error.invalidInput'];
+        default:
+            return fillLabel(labels['manage.error.unavailable'], { ringUs: ringUs(labels, phone) });
+    }
+}
+/** A sentence that hands the visitor to the telephone: linked with a number, plain without. */
+function PhoneSentence({ format, phone, children, className, }) {
+    if (phone === null)
+        return _jsx("span", { className: className, children: children });
+    return (_jsx("a", { href: format.telHref(phone), className: cn(LINK_CLASS, className), children: children }));
+}
+// ---------------------------------------------------------------------------
+// ManageScreen
+// ---------------------------------------------------------------------------
+export function ManageScreen({ labels, format, dayparts, booking, phone = null, address = null, bookingHref, portalHref = null, icsHref = null, icsFileName, pricing = null, reschedule, onRequestSlots, onCancel, onReschedule, now: nowProp, classNames, timeClassNames, components, }) {
+    const [view, setView] = useState('overview');
+    const [pending, setPending] = useState(null);
+    const [reason, setReason] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const [movedTo, setMovedTo] = useState(null);
+    const [newManageHref, setNewManageHref] = useState(null);
+    /**
+     * The openings read BEFORE a move lost its slot. Until the caller hands in a
+     * fresh array they are not shown: the rejected instant is still on them,
+     * still tappable, and still the nearest thing to what the visitor wanted.
+     */
+    const [staleSlots, setStaleSlots] = useState(null);
+    const slots = reschedule.slots !== null && reschedule.slots === staleSlots ? null : reschedule.slots;
+    const slotsFailed = reschedule.failed ?? false;
+    const confirmed = booking.status === 'confirmed';
+    const stylist = booking.resourceName === UNKNOWN_RESOURCE
+        ? null
+        : format.stylistName(booking.resourceName) || null;
+    const serviceLabel = booking.serviceName === UNKNOWN_SERVICE
+        ? labels['manage.serviceFallback']
+        : booking.serviceName;
+    // The LARGER window wins: the sentence promises both actions, and the earlier
+    // of the two deadlines is the one true of both.
+    const windowHours = Math.max(booking.cancelWindowHours, booking.rescheduleWindowHours);
+    const freeUntilTs = booking.startTs - windowHours * HOUR_MS;
+    // Filled in after mount: the one line whose value depends on the millisecond
+    // it was produced, so computing it during a server render would mismatch.
+    const [remaining, setRemaining] = useState(null);
+    useEffect(() => {
+        const left = freeUntilTs - (nowProp ?? Date.now());
+        setRemaining(left > 0 ? remainingLabel(labels, left) : null);
+    }, [freeUntilTs, nowProp, labels]);
+    /**
+     * One mutation, with its buttons held down for the whole round trip. `busy`
+     * is enough because each mutation is reachable from exactly one button and
+     * both carry `disabled={busy}` — the second tap of a double tap lands on a
+     * disabled button. A cancel has no idempotency key, so this matters.
+     */
+    async function run(action) {
+        setBusy(true);
+        setError(null);
+        let result;
+        try {
+            result = await action();
+        }
+        catch {
+            result = { ok: false, code: 'unavailable' };
+        }
+        setBusy(false);
+        if (!result.ok)
+            setError(result.code);
+        return result;
+    }
+    const confirmCancel = async () => {
+        const result = await run(() => onCancel(reason));
+        if (result.ok)
+            setView('cancelled');
+    };
+    const confirmMove = async () => {
+        if (pending === null)
+            return;
+        const target = pending;
+        const result = await run(() => onReschedule(target));
+        if (!result.ok) {
+            // A slot that went while the visitor read the confirmation is not an
+            // error to sit on — the time step is where the answer is, reloaded.
+            if (result.code === 'slotTaken' || result.code === 'invalidInput') {
+                setPending(null);
+                setStaleSlots(reschedule.slots);
+                setView('time');
+                onRequestSlots();
+            }
+            return;
+        }
+        setMovedTo(target.startTs);
+        // The token the visitor arrived with belongs to the row the move
+        // cancelled; only a link built from the new one still works.
+        setNewManageHref(result.manageHref ?? null);
+        setView('moved');
+    };
+    const goToTime = () => {
+        setError(null);
+        setView('time');
+        // A failure as well as «never loaded», or a transient failure after a
+        // successful load would stick until the whole page was reloaded.
+        if (reschedule.slots === null || slotsFailed)
+            onRequestSlots();
+    };
+    const panelClass = (base) => slotClass(classNames, 'panel', base);
+    return (_jsxs("section", { "aria-labelledby": "booking-manage-heading", className: slotClass(classNames, 'root', 'space-y-6'), children: [_jsx("h1", { id: "booking-manage-heading", className: slotClass(classNames, 'heading', 'font-sans text-2xl font-bold md:text-3xl'), children: labels['manage.heading'] }), error !== null && (_jsx("p", { role: "alert", className: slotClass(classNames, 'alert', 'rounded-lg border border-secondary/40 bg-secondary/10 px-5 py-3 text-sm'), children: errorSentence(labels, error, phone) })), view === 'cancelled' && (_jsxs("div", { className: panelClass('space-y-4 rounded-lg border border-border bg-card px-5 py-4'), children: [_jsx("p", { className: "font-medium", children: labels['manage.cancelled'] }), _jsx("a", { href: bookingHref, className: LINK_CLASS, children: labels['manage.cancelled.findNew'] })] })), view === 'moved' && (_jsxs("div", { className: panelClass('space-y-4 rounded-lg border border-border bg-card px-5 py-4'), children: [_jsx("p", { className: "font-medium", children: movedTo === null
+                            ? labels['manage.moved']
+                            : renderLabel(labels['manage.movedTo'], {
+                                dateTime: format.clock.dateTime(movedTo),
+                            }) }), newManageHref ? (_jsx("a", { href: newManageHref, className: LINK_CLASS, children: labels['manage.moved.view'] })) : (_jsxs("p", { className: "text-sm text-muted-foreground", children: [labels['manage.moved.noLink'], ' ', _jsx(PhoneSentence, { format: format, phone: phone, children: callUs(labels, phone) }), ' ', labels['manage.moved.noLinkSuffix']] }))] })), view !== 'cancelled' && view !== 'moved' && (_jsxs(_Fragment, { children: [_jsxs("div", { className: slotClass(classNames, 'card', 'space-y-1 rounded-lg border border-border bg-card px-5 py-4'), children: [_jsx("p", { className: "font-semibold", children: booking.bookedForName
+                                    ? renderLabel(labels['manage.card.named'], {
+                                        name: booking.bookedForName,
+                                        service: serviceLabel,
+                                    })
+                                    : serviceLabel }), _jsx("p", { className: "tabular-nums", children: renderLabel(labels[stylist ? 'manage.card.whenWithStylist' : 'manage.card.when'], {
+                                    dateTime: format.clock.dateTime(booking.startTs),
+                                    stylist: stylist ?? '',
+                                    price: format.price(booking.amountOre),
+                                }) }), address && _jsx("p", { className: "text-sm text-muted-foreground", children: address })] }), view === 'overview' &&
+                        (confirmed ? (_jsx(Overview, { labels: labels, format: format, booking: booking, freeUntilTs: freeUntilTs, remaining: remaining, phone: phone, icsHref: icsHref, icsFileName: icsFileName, actionsClassName: classNames?.actions, onChange: () => (booking.partySequenceId ? setView('party') : goToTime()), onCancel: () => {
+                                setError(null);
+                                setView('cancel');
+                            } })) : (_jsx(ClosedBooking, { labels: labels, format: format, status: booking.status, bookingHref: bookingHref, phone: phone, className: panelClass('space-y-3 rounded-lg border border-border bg-card px-5 py-4') }))), view === 'party' && (_jsx(PartyChoice, { labels: labels, format: format, bookedForName: booking.bookedForName, phone: phone, onJustThisOne: goToTime, onBack: () => setView('overview'), className: panelClass('space-y-4 rounded-lg border border-primary/40 bg-primary/5 px-5 py-4') })), view === 'time' && (_jsxs("div", { className: "space-y-4", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: stylist
+                                    ? renderLabel(labels['manage.reschedule.leadWithStylist'], {
+                                        service: serviceLabel,
+                                        stylist,
+                                    })
+                                    : renderLabel(labels['manage.reschedule.lead'], { service: serviceLabel }) }), slotsFailed && (_jsxs("p", { className: "rounded-lg border border-border bg-card px-5 py-4 text-sm", children: [labels['manage.reschedule.failed'], ' ', _jsx(PhoneSentence, { format: format, phone: phone, children: ringUs(labels, phone) }), labels['manage.reschedule.failedSuffix']] })), !slotsFailed && slots === null && (_jsx("p", { className: "text-sm text-muted-foreground", children: labels['manage.reschedule.loading'] })), !slotsFailed && slots !== null && (_jsx(TimeScreen, { labels: labels, format: format, dayparts: dayparts, slots: slots, days: reschedule.days, openDays: reschedule.openDays ?? null, currentSlotTs: booking.startTs, weekendNote: weekendNoteFor(pricing), phone: phone, now: nowProp, classNames: timeClassNames, components: components, onPick: (slot) => {
+                                    setPending(slot);
+                                    setError(null);
+                                    setView('move');
+                                } })), _jsx(BookingButton, { variant: "outline", onClick: () => setView('overview'), children: labels['manage.back'] })] })), view === 'move' && pending !== null && (_jsx(ConfirmMove, { labels: labels, format: format, booking: booking, pricing: pricing, stylist: stylist, pending: pending, busy: busy, onConfirm: confirmMove, onBack: () => setView('time'), className: panelClass('space-y-4 rounded-lg border border-primary/40 bg-primary/5 px-5 py-4') })), view === 'cancel' && (_jsx(ConfirmCancel, { labels: labels, format: format, booking: booking, reason: reason, busy: busy, onPickReason: setReason, onConfirm: confirmCancel, onBack: () => setView('overview'), className: panelClass('space-y-4 rounded-lg border border-primary/40 bg-primary/5 px-5 py-4') }))] })), portalHref !== null && (_jsx("p", { className: slotClass(classNames, 'footer', 'text-sm'), children: _jsx("a", { href: portalHref, className: LINK_CLASS, children: labels['manage.portal'] }) }))] }));
+}
+function weekendNoteFor(pricing) {
+    if (pricing === null || pricing.weekendSurchargePct <= 0)
+        return undefined;
+    return (dayTs) => ({ pct: pricing.weekendSurchargePct, priceOre: pricing.priceAt(dayTs) });
+}
+/**
+ * The three actions, and what replaces the ones the engine has already closed.
+ * `canReschedule` / `canCancel` are read one for one — never `startTs` and a
+ * policy number — so this agrees with the write by construction.
+ */
+function Overview({ labels, format, booking, freeUntilTs, remaining, phone, icsHref, icsFileName, actionsClassName, onChange, onCancel, }) {
+    // The largest window that has already closed — the number the sentence below
+    // quotes. Zero when both are open, and then it is not rendered.
+    const blockedHours = Math.max(booking.canCancel ? 0 : booking.cancelWindowHours, booking.canReschedule ? 0 : booking.rescheduleWindowHours);
+    return (_jsxs(_Fragment, { children: [booking.canCancel && booking.canReschedule && (_jsxs("p", { className: "text-sm text-muted-foreground", children: [renderLabel(labels['manage.freeUntil'], {
+                        dateTime: format.clock.dateTime(freeUntilTs),
+                    }), remaining !== null && _jsxs("span", { children: [" (", remaining, ")"] })] })), _jsxs("div", { className: cn('flex flex-wrap items-center gap-4', actionsClassName), children: [booking.canReschedule ? (_jsx(BookingButton, { size: "lg", onClick: onChange, children: labels['manage.change'] })) : (_jsx(PhoneSentence, { format: format, phone: phone, children: renderLabel(labels['manage.callToChange'], { hours: booking.rescheduleWindowHours }) })), booking.canCancel ? (_jsx(BookingButton, { size: "lg", variant: "outline", onClick: onCancel, children: labels['manage.cancel'] })) : (_jsx(PhoneSentence, { format: format, phone: phone, children: renderLabel(labels['manage.callToCancel'], { hours: booking.cancelWindowHours }) })), icsHref !== null && (_jsx("a", { href: icsHref, download: icsFileName ?? true, className: LINK_CLASS, children: labels['manage.calendar'] }))] }), blockedHours > 0 && (_jsxs("p", { className: "rounded-lg border border-border bg-card px-5 py-4 text-sm", children: [renderLabel(labels['manage.blocked'], { hours: blockedHours }), ' ', phone ? (_jsxs(_Fragment, { children: [_jsx(PhoneSentence, { format: format, phone: phone, children: renderLabel(labels['manage.ringUsOn'], { phone }) }), labels['manage.blocked.suffix']] })) : (labels['manage.blocked.plain'])] }))] }));
+}
+/** A booking no longer open to either action, saying which kind it is. */
+function ClosedBooking({ labels, format, status, bookingHref, phone, className, }) {
+    const sentence = labels[CLOSED_SENTENCE[status] ?? 'manage.closed.pending'];
+    return (_jsxs("div", { className: className, children: [_jsx("p", { className: "text-sm", children: sentence }), status === 'pending' ? (_jsx("p", { className: "text-sm", children: _jsx(PhoneSentence, { format: format, phone: phone, children: phone
+                        ? renderLabel(labels['manage.closed.pendingCall'], { phone })
+                        : labels['manage.closed.pendingCallPlain'] }) })) : (_jsx("a", { href: bookingHref, className: LINK_CLASS, children: labels['manage.bookNew'] }))] }));
+}
+/**
+ * «Move the whole visit, or just this one?» A manage link authorises exactly
+ * ONE booking, so the whole visit is a telephone call and says so plainly.
+ * «Just this one» keeps the family visit a family visit; it simply stops being
+ * contiguous, which the sub-line says.
+ */
+function PartyChoice({ labels, format, bookedForName, phone, onJustThisOne, onBack, className, }) {
+    const who = bookedForName ?? labels['manage.party.unnamed'];
+    return (_jsxs("div", { className: className, children: [_jsx("h2", { className: "font-sans text-lg font-bold", children: renderLabel(labels['manage.party.heading'], { who }) }), _jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [_jsx(BookingButton, { size: "lg", onClick: onJustThisOne, children: renderLabel(labels['manage.party.justThisOne'], { who }) }), _jsx(BookingButton, { size: "lg", variant: "outline", onClick: onBack, children: labels['manage.back'] })] }), _jsxs("p", { className: "text-sm text-muted-foreground", children: [labels['manage.party.note'], ' ', _jsx(PhoneSentence, { format: format, phone: phone, children: ringUs(labels, phone) }), labels['manage.party.noteSuffix']] })] }));
+}
+/**
+ * The single confirm for a move. The weekend note appears only when the new
+ * hour costs MORE — both sides priced off today's catalogue, never against the
+ * amount charged weeks ago.
+ */
+function ConfirmMove({ labels, format, booking, pricing, stylist, pending, busy, onConfirm, onBack, className, }) {
+    const { clock } = format;
+    const nextOre = pricing ? pricing.priceAt(pending.startTs) : 0;
+    const nowOre = pricing ? pricing.priceAt(booking.startTs) : 0;
+    const dearer = pricing !== null && nextOre > nowOre;
+    const question = renderLabel(labels[stylist ? 'manage.move.questionWithStylist' : 'manage.move.question'], {
+        appointment: theirAppointment(labels, booking.bookedForName),
+        from: `${clock.date(booking.startTs)} ${clock.formatTime(booking.startTs)}`,
+        to: `${clock.date(pending.startTs)} ${clock.formatTime(pending.startTs)}`,
+        stylist: stylist ?? '',
+    });
+    return (_jsxs("div", { className: className, children: [_jsx("p", { className: "font-medium", children: question }), dearer && pricing && (_jsx("p", { className: "text-sm", children: renderLabel(labels['manage.move.surcharge'], {
+                    weekday: clock.weekday(pending.startTs),
+                    price: format.price(nextOre),
+                    pct: pricing.weekendSurchargePct,
+                }) })), _jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [_jsx(BookingButton, { size: "lg", disabled: busy, onClick: onConfirm, children: labels['manage.move.confirm'] }), _jsx(BookingButton, { variant: "outline", disabled: busy, onClick: onBack, children: labels['manage.move.pickAnother'] })] })] }));
+}
+/** The single confirm for a cancellation, with the reason asked and never required. */
+function ConfirmCancel({ labels, format, booking, reason, busy, onPickReason, onConfirm, onBack, className, }) {
+    return (_jsxs("div", { className: className, children: [_jsx("p", { className: "font-medium", children: renderLabel(labels['manage.cancel.question'], {
+                    appointment: theirAppointment(labels, booking.bookedForName),
+                    dateTime: format.clock.dateTime(booking.startTs),
+                    hours: booking.cancelWindowHours,
+                }) }), _jsxs("fieldset", { className: "flex flex-wrap gap-2", children: [_jsx("legend", { className: "sr-only", children: labels['manage.cancel.reasonLegend'] }), CANCEL_REASON_KEYS.map((key) => {
+                        const option = labels[key];
+                        const picked = reason === option;
+                        return (_jsx(BookingButton, { variant: "outline", size: "sm", "aria-pressed": picked, 
+                            // Tapping the chosen chip again clears it: the answer is
+                            // optional, so there has to be a way back to having given none.
+                            onClick: () => onPickReason(picked ? null : option), className: cn('rounded-full', picked ? 'border-primary ring-2 ring-primary' : ''), children: option }, key));
+                    })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [_jsx(BookingButton, { size: "lg", disabled: busy, onClick: onConfirm, children: labels['manage.cancel.confirm'] }), _jsx(BookingButton, { size: "lg", variant: "outline", disabled: busy, onClick: onBack, children: labels['manage.cancel.keep'] })] })] }));
+}

package/dist/booking/otp-slots.d.ts

@@ -0,0 +1,42 @@
+import { type SlotClassNames } from './slots.js';
+export declare const OTP_SLOTS_LABEL_KEYS: readonly ["otp.label"];
+export type OtpSlotsLabels = Record<(typeof OTP_SLOTS_LABEL_KEYS)[number], string>;
+/**
+ * - `root`: the positioned wrapper.
+ * - `row`: the six-box grid.
+ * - `slot`: every box.
+ * - `slotActive`: the box the caret is on.
+ * - `slotFilled`: a box holding a digit (not active).
+ */
+export type OtpSlotsSlot = 'root' | 'row' | 'slot' | 'slotActive' | 'slotFilled';
+export interface OtpSlotsProps {
+    /** The hidden input's id — point a `<label htmlFor>` at it. */
+    id?: string;
+    name?: string;
+    /** The code so far; anything but digits is dropped, and it is capped at six. */
+    value: string;
+    disabled?: boolean;
+    /**
+     * Holds the value still without letting go of focus — for while a code is
+     * being checked. `disabled` would blur the field, and inside a modal dialog
+     * a blurred field is focus the trap has to put somewhere.
+     */
+    readOnly?: boolean;
+    invalid?: boolean;
+    describedBy?: string;
+    labels: OtpSlotsLabels;
+    classNames?: SlotClassNames<OtpSlotsSlot>;
+    onChange: (next: string) => void;
+    /** Called with the six digits the moment the sixth lands. */
+    onComplete?: (code: string) => void;
+}
+/**
+ * Six digit boxes for a one-time code, with one hidden `one-time-code` input
+ * so iOS / Android / a password manager can still paste or autofill the whole
+ * code in one go.
+ *
+ * The visible boxes are not six independent form fields. They are a display
+ * over a single value: arrow keys, Backspace, and a paste of «492 155» all
+ * edit that value. Submitting still posts six digits with no spaces.
+ */
+export declare function OtpSlots({ id, name, value, disabled, readOnly, invalid, describedBy, labels, classNames, onChange, onComplete, }: OtpSlotsProps): import("react").JSX.Element;

package/dist/booking/otp-slots.js

@@ -0,0 +1,109 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useLayoutEffect, useRef, useState, } from 'react';
+import { cn } from '../lib/utils.js';
+import { slotClass } from './slots.js';
+const LENGTH = 6;
+function digitsOnly(value) {
+    return value.replace(/\D/g, '').slice(0, LENGTH);
+}
+/** A box's border and text colour: invalid, then active, then filled, then empty. */
+function slotTone(invalid, active, filled) {
+    if (invalid)
+        return 'border-destructive text-foreground';
+    if (active)
+        return 'border-primary text-foreground';
+    if (filled)
+        return 'border-primary/40 text-foreground';
+    return 'border-input text-muted-foreground';
+}
+export const OTP_SLOTS_LABEL_KEYS = ['otp.label'];
+/**
+ * Six digit boxes for a one-time code, with one hidden `one-time-code` input
+ * so iOS / Android / a password manager can still paste or autofill the whole
+ * code in one go.
+ *
+ * The visible boxes are not six independent form fields. They are a display
+ * over a single value: arrow keys, Backspace, and a paste of «492 155» all
+ * edit that value. Submitting still posts six digits with no spaces.
+ */
+export function OtpSlots({ id, name = 'code', value, disabled = false, readOnly = false, invalid = false, describedBy, labels, classNames, onChange, onComplete, }) {
+    const generatedId = useId();
+    const fieldId = id ?? generatedId;
+    const hiddenRef = useRef(null);
+    const digits = digitsOnly(value);
+    // Where the hidden input's caret is, so the highlighted box follows arrow
+    // keys and pointer placement instead of always sitting after the last digit.
+    // `null` until the caret has moved: then the box after the last digit is
+    // active, exactly as with plain sequential typing.
+    const [caret, setCaret] = useState(null);
+    const active = Math.min(caret ?? digits.length, digits.length, LENGTH - 1);
+    // Backspace is handled by hand (preventDefault), so the browser never moves
+    // the real caret. Park the target position here and apply it once React has
+    // rendered the new value; otherwise the keyup that follows would read the
+    // stale DOM selection and drag the highlight back.
+    const pendingCaret = useRef(null);
+    useLayoutEffect(() => {
+        const position = pendingCaret.current;
+        const input = hiddenRef.current;
+        if (position === null || !input)
+            return;
+        pendingCaret.current = null;
+        const clamped = Math.min(position, input.value.length);
+        input.setSelectionRange(clamped, clamped);
+    });
+    function commit(next) {
+        if (readOnly)
+            return;
+        const cleaned = digitsOnly(next);
+        onChange(cleaned);
+        if (cleaned.length === LENGTH)
+            onComplete?.(cleaned);
+    }
+    function syncCaret(input) {
+        setCaret(input.selectionStart ?? null);
+    }
+    function focusHidden() {
+        hiddenRef.current?.focus();
+    }
+    function handleKeyDown(event) {
+        if (event.key !== 'Backspace' || digits.length === 0)
+            return;
+        const start = event.currentTarget.selectionStart ?? digits.length;
+        const end = event.currentTarget.selectionEnd ?? start;
+        if (start === 0 && end === 0)
+            return;
+        event.preventDefault();
+        const next = start === end
+            ? digits.slice(0, start - 1) + digits.slice(start)
+            : digits.slice(0, start) + digits.slice(end);
+        const after = start === end ? start - 1 : start;
+        pendingCaret.current = after;
+        setCaret(after);
+        commit(next);
+    }
+    function handlePaste(event) {
+        event.preventDefault();
+        setCaret(null);
+        commit(event.clipboardData.getData('text'));
+    }
+    function handleChange(event) {
+        const raw = event.target.value;
+        const start = event.target.selectionStart ?? raw.length;
+        // Count only the digits that survive cleaning before the caret, so a
+        // digit typed in the middle of the code highlights the box after it.
+        setCaret(digitsOnly(raw.slice(0, start)).length);
+        commit(raw);
+    }
+    return (_jsxs("div", { className: slotClass(classNames, 'root', 'relative'), children: [_jsx("input", { ref: hiddenRef, id: fieldId, name: name, inputMode: "numeric", autoComplete: "one-time-code", autoCorrect: "off", spellCheck: false, 
+                // `\d*` rather than `[0-9]{6}`: it is the spelling iOS reads as «show the
+                // number pad», and the length is `minLength`/`maxLength`'s job.
+                pattern: "\\d*", minLength: LENGTH, maxLength: LENGTH, required: true, disabled: disabled, readOnly: readOnly, "aria-busy": readOnly || undefined, value: digits, "aria-invalid": invalid || undefined, "aria-describedby": describedBy, "aria-label": labels['otp.label'], onChange: handleChange, onKeyDown: handleKeyDown, onKeyUp: (event) => syncCaret(event.currentTarget), onSelect: (event) => syncCaret(event.currentTarget), onClick: (event) => syncCaret(event.currentTarget), onPaste: handlePaste, className: "absolute inset-0 z-10 h-full w-full cursor-text opacity-0" }), _jsx("div", { "aria-hidden": "true", "data-slot": "otp-row", className: slotClass(classNames, 'row', 'grid grid-cols-6 gap-1.5 sm:gap-2.5'), onMouseDown: (event) => {
+                    event.preventDefault();
+                    focusHidden();
+                }, children: Array.from({ length: LENGTH }, (_, index) => {
+                    const filled = digits[index] ?? '';
+                    const isActive = !disabled && index === active;
+                    return (_jsx("span", { "data-slot": "otp-slot", "data-active": isActive || undefined, className: cn(slotClass(classNames, 'slot', 'flex aspect-square min-w-0 w-full items-center justify-center rounded-[4px] border-[1.5px] font-display text-xl font-bold tabular-nums sm:text-2xl', slotTone(invalid, isActive, filled !== '')), isActive && classNames?.slotActive, !isActive && filled && classNames?.slotFilled), children: filled }, index));
+                }) })] }));
+}