@medalsocial/meda 3.0.0 → 3.2.0

package/dist/booking/portal/profile-form.d.ts

@@ -0,0 +1,75 @@
+import { type SlotClassNames } from '../slots.js';
+import type { PortalProfileDto } from '../types.js';
+import { type PortalActionFailure } from './action-result.js';
+export declare const PROFILE_FORM_LABEL_KEYS: readonly ["profileForm.heading", "profileForm.firstName", "profileForm.lastName", "profileForm.phone", "profileForm.email", "profileForm.emailHelp", "profileForm.save", "profileForm.saved", "profileForm.restored", "profileForm.marketing", "profileForm.unreachable"];
+/** `marketing` is the consent sentence and usually names the business. */
+export type ProfileFormLabels = Record<(typeof PROFILE_FORM_LABEL_KEYS)[number], string>;
+/**
+ * `root` (the section), `heading`, `form`, `status` (the save notice's live
+ * region), `save` (the submit button), `consent` (the marketing box's field).
+ */
+export type ProfileFormSlot = 'root' | 'heading' | 'form' | 'status' | 'save' | 'consent';
+/**
+ * What a save sends. A name is present only when non-empty (a cleared field
+ * is not an instruction to file a blank name); the phone always travels, and
+ * `''` is how «no phone» is spelled.
+ */
+export interface ProfilePatch {
+    firstName?: string;
+    lastName?: string;
+    phone: string;
+}
+/** The fields of the profile the backend stored. */
+export interface StoredProfile {
+    firstName: string | null;
+    lastName: string | null;
+    phone: string | null;
+}
+export type ProfileSaveResult = {
+    ok: true;
+    profile: StoredProfile;
+} | {
+    ok: false;
+    kind: 'session';
+} | {
+    ok: false;
+    kind: 'error';
+    message?: string;
+    /** The field the rejection is about, when it is about one (only the phone can be). */
+    field?: 'phone';
+};
+export type ConsentResult = {
+    ok: true;
+    marketingConsent: boolean;
+} | PortalActionFailure;
+export interface ProfileFormProps {
+    labels: ProfileFormLabels;
+    profile: Pick<PortalProfileDto, 'email' | 'firstName' | 'lastName' | 'phone' | 'marketingConsent'>;
+    /** Saves names and phone. */
+    onSave: (patch: ProfilePatch) => Promise<ProfileSaveResult>;
+    /** Stores the marketing choice. The box then shows what was stored. */
+    onConsentChange: (accepted: boolean) => Promise<ConsentResult>;
+    /** A callback answered `{ kind: 'session' }`: send the visitor to the login. */
+    onSessionExpired?: () => void;
+    classNames?: SlotClassNames<ProfileFormSlot>;
+}
+/**
+ * «About you» — name and phone, the e-mail the login is bound to (read-only:
+ * changing it would change who can log in), and the marketing box.
+ *
+ * When a name WAS cleared, the save re-fills it from the stored profile and
+ * the notice says so rather than «saved». The marketing box is its own
+ * callback: it flips at once, and flips back if the change was not taken, so
+ * the box shows what is stored and not what the browser hoped for.
+ *
+ * Every message is wired to the input it is about (`aria-describedby`, and
+ * `aria-invalid` when it is a mistake). A failure about the REQUEST rather
+ * than a field is announced by the live region alone.
+ *
+ * OPTIMISTIC: the tap shows the outcome at once through `useOptimistic` —
+ * names trimmed, a cleared name back to the one on file, and «saved» or the
+ * «kept your name» notice — with the fields locked until the callback
+ * answers. On failure the optimistic view ends, which rolls the form back to
+ * what the parent typed, with the reason.
+ */
+export declare function ProfileForm({ labels, profile, onSave, onConsentChange, onSessionExpired, classNames, }: ProfileFormProps): import("react").JSX.Element;

package/dist/booking/portal/profile-form.js

@@ -0,0 +1,144 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useOptimistic, useState, useTransition } from 'react';
+import { Checkbox } from '../../primitives/checkbox.js';
+import { Field } from '../../primitives/field.js';
+import { Input } from '../../primitives/input.js';
+import { BOOKING_CHECKBOX_CLASS, BOOKING_INPUT_CLASS, BookingButton } from '../internal/ui.js';
+import { slotClass } from '../slots.js';
+import { settle } from './action-result.js';
+export const PROFILE_FORM_LABEL_KEYS = [
+    'profileForm.heading',
+    'profileForm.firstName',
+    'profileForm.lastName',
+    'profileForm.phone',
+    'profileForm.email',
+    'profileForm.emailHelp',
+    'profileForm.save',
+    'profileForm.saved',
+    'profileForm.restored',
+    'profileForm.marketing',
+    'profileForm.unreachable',
+];
+/**
+ * What to say after an accepted save. A name the parent emptied that came
+ * back non-empty was kept, not saved — say which; otherwise plain «saved».
+ */
+function afterSave(sent, saved) {
+    const first = sent.first === '' && (saved.firstName ?? '') !== '';
+    const last = sent.last === '' && (saved.lastName ?? '') !== '';
+    return first || last ? { kind: 'restored', first, last } : { kind: 'saved' };
+}
+/**
+ * What the form will show once the patch is taken: a cleared name back to
+ * the one on file, and the notice `afterSave` would give.
+ */
+function predictSaved(sent, onFile) {
+    return {
+        firstName: sent.first || (onFile.firstName ?? ''),
+        lastName: sent.last || (onFile.lastName ?? ''),
+        phone: sent.phone,
+        status: afterSave(sent, onFile),
+    };
+}
+/**
+ * «About you» — name and phone, the e-mail the login is bound to (read-only:
+ * changing it would change who can log in), and the marketing box.
+ *
+ * When a name WAS cleared, the save re-fills it from the stored profile and
+ * the notice says so rather than «saved». The marketing box is its own
+ * callback: it flips at once, and flips back if the change was not taken, so
+ * the box shows what is stored and not what the browser hoped for.
+ *
+ * Every message is wired to the input it is about (`aria-describedby`, and
+ * `aria-invalid` when it is a mistake). A failure about the REQUEST rather
+ * than a field is announced by the live region alone.
+ *
+ * OPTIMISTIC: the tap shows the outcome at once through `useOptimistic` —
+ * names trimmed, a cleared name back to the one on file, and «saved» or the
+ * «kept your name» notice — with the fields locked until the callback
+ * answers. On failure the optimistic view ends, which rolls the form back to
+ * what the parent typed, with the reason.
+ */
+export function ProfileForm({ labels, profile, onSave, onConsentChange, onSessionExpired, classNames, }) {
+    const id = useId();
+    const [firstName, setFirstName] = useState(profile.firstName ?? '');
+    const [lastName, setLastName] = useState(profile.lastName ?? '');
+    const [phone, setPhone] = useState(profile.phone ?? '');
+    const [consent, setConsent] = useState(profile.marketingConsent);
+    const [status, setStatus] = useState(null);
+    const [consentError, setConsentError] = useState(null);
+    const [pending, startTransition] = useTransition();
+    const [consentPending, startConsent] = useTransition();
+    /** What was last stored — the basis for predicting a kept name. */
+    const [onFile, setOnFile] = useState(profile);
+    // The fields are locked while a save is in flight (`disabled` on the
+    // fieldset), so the optimistic view is simply the snapshot the tap took.
+    const [shown, showSaving] = useOptimistic({ firstName, lastName, phone, status }, (_current, saving) => saving);
+    const statusId = `${id}-status`;
+    function save(event) {
+        event.preventDefault();
+        const first = firstName.trim();
+        const last = lastName.trim();
+        const patch = {
+            ...(first ? { firstName: first } : {}),
+            ...(last ? { lastName: last } : {}),
+            phone,
+        };
+        startTransition(async () => {
+            showSaving(predictSaved({ first, last, phone }, onFile));
+            const result = await settle(() => onSave(patch));
+            if (result.ok) {
+                const saved = result.profile;
+                setOnFile(saved);
+                setFirstName(saved.firstName ?? '');
+                setLastName(saved.lastName ?? '');
+                setPhone(saved.phone ?? '');
+                setStatus(afterSave({ first, last }, saved));
+                return;
+            }
+            if (result.kind === 'session') {
+                onSessionExpired?.();
+                return;
+            }
+            setStatus({
+                kind: 'error',
+                message: result.message ?? labels['profileForm.unreachable'],
+                field: 'field' in result && result.field === 'phone' ? 'phone' : null,
+            });
+        });
+    }
+    function toggleConsent(granted) {
+        const previous = consent;
+        setConsent(granted);
+        setConsentError(null);
+        startConsent(async () => {
+            const result = await settle(() => onConsentChange(granted));
+            if (result.ok) {
+                setConsent(result.marketingConsent);
+                return;
+            }
+            // Nothing was saved either way, so the box goes back first.
+            setConsent(previous);
+            if (result.kind === 'session') {
+                onSessionExpired?.();
+                return;
+            }
+            setConsentError(labels['profileForm.unreachable']);
+        });
+    }
+    const view = shown.status;
+    const phoneInvalid = view?.kind === 'error' && view.field === 'phone';
+    const firstRestored = view?.kind === 'restored' && view.first;
+    const lastRestored = view?.kind === 'restored' && view.last;
+    return (_jsxs("section", { "aria-labelledby": "portal-profile-heading", className: slotClass(classNames, 'root', 'space-y-4'), children: [_jsx("h2", { id: "portal-profile-heading", className: slotClass(classNames, 'heading', 'font-sans text-xl font-bold md:text-2xl'), children: labels['profileForm.heading'] }), _jsxs("form", { onSubmit: save, className: slotClass(classNames, 'form', 'space-y-4'), children: [_jsxs("fieldset", { disabled: pending, className: "min-w-0 space-y-4", children: [_jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-first`, children: labels['profileForm.firstName'] }), _jsx(Input, { id: `${id}-first`, autoComplete: "given-name", maxLength: 60, value: shown.firstName, "aria-describedby": firstRestored ? statusId : undefined, onChange: (event) => {
+                                                    setFirstName(event.target.value);
+                                                    setStatus(null);
+                                                }, className: BOOKING_INPUT_CLASS })] }), _jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-last`, children: labels['profileForm.lastName'] }), _jsx(Input, { id: `${id}-last`, autoComplete: "family-name", maxLength: 60, value: shown.lastName, "aria-describedby": lastRestored ? statusId : undefined, onChange: (event) => {
+                                                    setLastName(event.target.value);
+                                                    setStatus(null);
+                                                }, className: BOOKING_INPUT_CLASS })] })] }), _jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-phone`, children: labels['profileForm.phone'] }), _jsx(Input, { id: `${id}-phone`, type: "tel", inputMode: "tel", autoComplete: "tel-national", value: shown.phone, "aria-invalid": phoneInvalid || undefined, "aria-describedby": phoneInvalid ? statusId : undefined, onChange: (event) => {
+                                            setPhone(event.target.value);
+                                            setStatus(null);
+                                        }, className: BOOKING_INPUT_CLASS })] }), _jsxs(Field, { children: [_jsx(Field.Label, { htmlFor: `${id}-email`, children: labels['profileForm.email'] }), _jsx(Input, { id: `${id}-email`, type: "email", value: profile.email, readOnly: true, "aria-describedby": `${id}-email-help`, className: BOOKING_INPUT_CLASS }), _jsx(Field.Description, { id: `${id}-email-help`, children: labels['profileForm.emailHelp'] })] })] }), _jsxs("div", { "aria-live": "polite", className: slotClass(classNames, 'status'), children: [view?.kind === 'saved' && (_jsx("p", { id: statusId, className: "text-sm text-muted-foreground", children: labels['profileForm.saved'] })), view?.kind === 'restored' && (_jsx("p", { id: statusId, className: "text-sm text-muted-foreground", children: labels['profileForm.restored'] })), view?.kind === 'error' && _jsx(Field.Error, { id: statusId, children: view.message })] }), _jsx(BookingButton, { type: "submit", disabled: pending, className: slotClass(classNames, 'save'), children: labels['profileForm.save'] })] }), _jsxs(Field, { orientation: "horizontal", className: slotClass(classNames, 'consent'), children: [_jsx(Checkbox, { id: `${id}-marketing`, checked: consent, disabled: consentPending, onCheckedChange: toggleConsent, className: BOOKING_CHECKBOX_CLASS }), _jsx(Field.Label, { htmlFor: `${id}-marketing`, className: "cursor-pointer font-normal", children: labels['profileForm.marketing'] })] }), _jsx("div", { "aria-live": "polite", children: consentError && _jsx(Field.Error, { children: consentError }) })] }));
+}

package/dist/booking/portal/rebook-cards.d.ts

@@ -0,0 +1,44 @@
+import type { ComponentType } from 'react';
+import { type SlotClassNames } from '../slots.js';
+import type { RebookSuggestion } from '../types.js';
+export declare const REBOOK_CARDS_LABEL_KEYS: readonly ["rebook.heading", "rebook.empty", "rebook.serviceFallback", "rebook.anyStylist", "rebook.cta"];
+export type RebookCardsLabels = Record<(typeof REBOOK_CARDS_LABEL_KEYS)[number], string>;
+/** - `root`: the section. - `heading`. - `empty`. - `list`. - `card`. - `link`: the book link. */
+export type RebookCardsSlot = 'root' | 'heading' | 'empty' | 'list' | 'card' | 'link';
+export interface RebookCardProps {
+    suggestion: RebookSuggestion;
+    href: string;
+    onRebook?: (suggestion: RebookSuggestion) => void;
+    labels: RebookCardsLabels;
+    classNames?: SlotClassNames<RebookCardsSlot>;
+}
+export interface RebookCardsComponents {
+    RebookCard?: ComponentType<RebookCardProps>;
+}
+export interface RebookCardsProps {
+    /** Already deduped and ordered by the caller. */
+    suggestions: RebookSuggestion[];
+    /** The booking link for a suggestion (the catalogue ids the booking flow reads). */
+    hrefFor: (suggestion: RebookSuggestion) => string;
+    /**
+     * Called on the tap, before the link navigates — e.g. to stash the person's
+     * name somewhere other than the URL (a minor's name has no business in a
+     * query string, which lands in history, access logs and analytics).
+     */
+    onRebook?: (suggestion: RebookSuggestion) => void;
+    labels: RebookCardsLabels;
+    /** `id` of the heading. Default `portal-rebook-heading`. */
+    headingId?: string;
+    classNames?: SlotClassNames<RebookCardsSlot>;
+    components?: RebookCardsComponents;
+}
+/**
+ * «Book again» — the visits this user has had before, one tap from the
+ * booking flow with its questions already answered. A plain `<a>` does the
+ * navigating, so the card works as a link; the tap only calls `onRebook`
+ * first. Given nothing, it keeps its heading and one sentence, so the
+ * overview keeps the same shape for a new user.
+ */
+export declare function RebookCards({ suggestions, hrefFor, onRebook, labels, headingId, classNames, components, }: RebookCardsProps): import("react").JSX.Element;
+/** One suggestion (an `<li>`): what · who for · with whom, and the book link. */
+export declare function DefaultRebookCard({ suggestion, href, onRebook, labels, classNames, }: RebookCardProps): import("react").JSX.Element;

package/dist/booking/portal/rebook-cards.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { slotClass } from '../slots.js';
+export const REBOOK_CARDS_LABEL_KEYS = [
+    'rebook.heading',
+    'rebook.empty',
+    'rebook.serviceFallback',
+    'rebook.anyStylist',
+    'rebook.cta',
+];
+const SEPARATOR = ' · ';
+/**
+ * «Book again» — the visits this user has had before, one tap from the
+ * booking flow with its questions already answered. A plain `<a>` does the
+ * navigating, so the card works as a link; the tap only calls `onRebook`
+ * first. Given nothing, it keeps its heading and one sentence, so the
+ * overview keeps the same shape for a new user.
+ */
+export function RebookCards({ suggestions, hrefFor, onRebook, labels, headingId = 'portal-rebook-heading', classNames, components, }) {
+    const Card = components?.RebookCard ?? DefaultRebookCard;
+    return (_jsxs("section", { "aria-labelledby": headingId, className: slotClass(classNames, 'root', 'space-y-4'), children: [_jsx("h2", { id: headingId, className: slotClass(classNames, 'heading', 'font-sans text-xl font-bold md:text-2xl'), children: labels['rebook.heading'] }), suggestions.length === 0 ? (_jsx("p", { className: slotClass(classNames, 'empty', 'text-muted-foreground'), children: labels['rebook.empty'] })) : (_jsx("ul", { className: slotClass(classNames, 'list', 'grid gap-3 sm:grid-cols-2'), children: suggestions.map((suggestion) => {
+                    const href = hrefFor(suggestion);
+                    return (_jsx(Card, { suggestion: suggestion, href: href, onRebook: onRebook, labels: labels, classNames: classNames }, `${href}#${suggestion.bookedForName ?? ''}`));
+                }) }))] }));
+}
+/** One suggestion (an `<li>`): what · who for · with whom, and the book link. */
+export function DefaultRebookCard({ suggestion, href, onRebook, labels, classNames, }) {
+    return (_jsxs("li", { className: slotClass(classNames, 'card', 'space-y-2 rounded-lg border border-border bg-card px-5 py-4'), children: [_jsx("p", { className: "font-semibold", children: [
+                    suggestion.serviceName ?? labels['rebook.serviceFallback'],
+                    suggestion.bookedForName,
+                    suggestion.resourceName ?? labels['rebook.anyStylist'],
+                ]
+                    .filter(Boolean)
+                    .join(SEPARATOR) }), _jsx("a", { href: href, onClick: onRebook ? () => onRebook(suggestion) : undefined, className: slotClass(classNames, 'link', 'text-sm font-semibold text-primary underline underline-offset-4'), children: labels['rebook.cta'] })] }));
+}

package/dist/booking/portal/upcoming-bookings.d.ts

@@ -0,0 +1,65 @@
+import type { ComponentType } from 'react';
+import type { BookingFormat } from '../format.js';
+import { type SlotClassNames } from '../slots.js';
+import type { PortalBookingDto } from '../types.js';
+export declare const UPCOMING_BOOKINGS_LABEL_KEYS: readonly ["upcoming.heading", "upcoming.empty", "upcoming.book", "upcoming.next", "upcoming.today", "upcoming.tomorrow", "upcoming.inDays", "upcoming.when", "upcoming.serviceFallback", "upcoming.anyStylist", "upcoming.manage", "upcoming.noManage", "upcoming.noManageWithPhone", "upcoming.call"];
+/**
+ * Placeholders: `upcoming.next` `{when}` (the `today` / `tomorrow` / `inDays`
+ * phrase), `upcoming.inDays` `{count}`, `upcoming.when` `{day}` `{time}`,
+ * `upcoming.noManageWithPhone` `{call}` (where the `upcoming.call` link goes),
+ * `upcoming.call` `{phone}`.
+ */
+export type UpcomingBookingsLabels = Record<(typeof UPCOMING_BOOKINGS_LABEL_KEYS)[number], string>;
+/**
+ * - `root`: the section. - `heading`. - `empty`: the no-bookings box.
+ * - `list`. - `card`: a plain card; `cardHero`: the first (next) one.
+ * - `badge`: the hero's «next appointment» pill. - `manage`: the manage link.
+ * - `heroMuted`: the hero's softened lines (when, and the no-manage sentence).
+ *   The defaults tint `primary-foreground` down; a brand whose `--primary` is
+ *   mid-luminance may need full strength here (and a plain `badge`) to keep
+ *   4.5:1 contrast.
+ */
+export type UpcomingBookingsSlot = 'root' | 'heading' | 'empty' | 'list' | 'card' | 'cardHero' | 'badge' | 'manage' | 'heroMuted';
+export interface BookingCardProps {
+    booking: PortalBookingDto;
+    phone: string | null;
+    now: number;
+    /** The first card: the next appointment, drawn as the hero panel. */
+    hero: boolean;
+    labels: UpcomingBookingsLabels;
+    format: BookingFormat;
+    classNames?: SlotClassNames<UpcomingBookingsSlot>;
+}
+export interface UpcomingBookingsComponents {
+    BookingCard?: ComponentType<BookingCardProps>;
+}
+export interface UpcomingBookingsProps {
+    /** Soonest first. */
+    bookings: PortalBookingDto[];
+    /** The business's number, or `null` (then «contact us» is unlinked). */
+    phone: string | null;
+    labels: UpcomingBookingsLabels;
+    format: BookingFormat;
+    /** Where booking happens (the empty state's button). */
+    bookingHref: string;
+    /** Default `Date.now()`. */
+    now?: number;
+    /** `id` of the heading. Default `portal-upcoming-heading`. */
+    headingId?: string;
+    classNames?: SlotClassNames<UpcomingBookingsSlot>;
+    components?: UpcomingBookingsComponents;
+}
+/**
+ * «Upcoming appointments» — one card per appointment still ahead.
+ *
+ * The one action per card is the manage link minted for that booking; a row
+ * with no `managePath` (made over the counter, say) is sent to the telephone
+ * instead, because a link to nowhere is worse than none.
+ *
+ * THE FIRST CARD IS THE HERO: the next appointment is the one fact a user
+ * opens this page for. Everything after it stays a plain card — a list of
+ * heroes is a list of nothing.
+ */
+export declare function UpcomingBookings({ bookings, phone, labels, format, bookingHref, now, headingId, classNames, components, }: UpcomingBookingsProps): import("react").JSX.Element;
+/** One appointment (an `<li>`), drawn as the hero panel or as a plain card. */
+export declare function DefaultBookingCard({ booking, phone, now, hero, labels, format, classNames, }: BookingCardProps): import("react").JSX.Element;

package/dist/booking/portal/upcoming-bookings.js

@@ -0,0 +1,88 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+import { labelParts } from '../internal/label-parts.js';
+import { bookingButtonClass } from '../internal/ui.js';
+import { fillLabel } from '../labels.js';
+import { slotClass } from '../slots.js';
+export const UPCOMING_BOOKINGS_LABEL_KEYS = [
+    'upcoming.heading',
+    'upcoming.empty',
+    'upcoming.book',
+    'upcoming.next',
+    'upcoming.today',
+    'upcoming.tomorrow',
+    'upcoming.inDays',
+    'upcoming.when',
+    'upcoming.serviceFallback',
+    'upcoming.anyStylist',
+    'upcoming.manage',
+    'upcoming.noManage',
+    'upcoming.noManageWithPhone',
+    'upcoming.call',
+];
+const SEPARATOR = ' · ';
+/**
+ * How far off the next appointment is, on the BUSINESS's calendar — so
+ * «tomorrow» means the next date rather than «in 24 hours».
+ */
+function howFarOff(startTs, now, labels, format) {
+    const days = format.clock.daysBetween(now, startTs);
+    if (days <= 0)
+        return labels['upcoming.today'];
+    if (days === 1)
+        return labels['upcoming.tomorrow'];
+    return fillLabel(labels['upcoming.inDays'], { count: days });
+}
+/** What is booked and who for. */
+function whatLine(booking, labels) {
+    return [booking.serviceName ?? labels['upcoming.serviceFallback'], booking.bookedForName]
+        .filter(Boolean)
+        .join(SEPARATOR);
+}
+/** When, with whom, and what it costs. */
+function whenLine(booking, now, labels, format) {
+    return [
+        fillLabel(labels['upcoming.when'], {
+            day: format.clock.dayLabel(booking.startTs, now),
+            time: format.clock.formatTime(booking.startTs),
+        }),
+        booking.resourceName ?? labels['upcoming.anyStylist'],
+        booking.amountOre === null ? null : format.price(booking.amountOre),
+    ]
+        .filter(Boolean)
+        .join(SEPARATOR);
+}
+/**
+ * «Upcoming appointments» — one card per appointment still ahead.
+ *
+ * The one action per card is the manage link minted for that booking; a row
+ * with no `managePath` (made over the counter, say) is sent to the telephone
+ * instead, because a link to nowhere is worse than none.
+ *
+ * THE FIRST CARD IS THE HERO: the next appointment is the one fact a user
+ * opens this page for. Everything after it stays a plain card — a list of
+ * heroes is a list of nothing.
+ */
+export function UpcomingBookings({ bookings, phone, labels, format, bookingHref, now = Date.now(), headingId = 'portal-upcoming-heading', classNames, components, }) {
+    const Card = components?.BookingCard ?? DefaultBookingCard;
+    return (_jsxs("section", { "aria-labelledby": headingId, className: slotClass(classNames, 'root', 'space-y-4'), children: [_jsx("h2", { id: headingId, className: slotClass(classNames, 'heading', 'font-sans text-xl font-bold md:text-2xl'), children: labels['upcoming.heading'] }), bookings.length === 0 ? (_jsxs("div", { className: slotClass(classNames, 'empty', 'space-y-4 rounded-lg border border-border bg-card px-5 py-4'), children: [_jsx("p", { className: "text-muted-foreground", children: labels['upcoming.empty'] }), _jsx("a", { href: bookingHref, className: bookingButtonClass({ size: 'lg' }), children: labels['upcoming.book'] })] })) : (_jsx("ul", { className: slotClass(classNames, 'list', 'space-y-3'), children: bookings.map((booking, index) => (_jsx(Card, { booking: booking, phone: phone, now: now, hero: index === 0, labels: labels, format: format, classNames: classNames }, booking.bookingId))) }))] }));
+}
+/** One appointment (an `<li>`), drawn as the hero panel or as a plain card. */
+export function DefaultBookingCard({ booking, phone, now, hero, labels, format, classNames, }) {
+    return (_jsxs("li", { className: cn('space-y-2 px-5 py-4', hero
+            ? slotClass(classNames, 'cardHero', 'rounded-2xl bg-primary p-6 text-primary-foreground md:p-8')
+            : slotClass(classNames, 'card', 'rounded-lg border border-border bg-card')), children: [hero && (_jsxs("p", { className: slotClass(classNames, 'badge', 'inline-flex items-center gap-2 rounded-full bg-primary-foreground/15 px-3 py-1 text-xs font-bold'), children: [_jsx("span", { "aria-hidden": "true", className: "size-2 rounded-full bg-current" }), fillLabel(labels['upcoming.next'], {
+                        when: howFarOff(booking.startTs, now, labels, format),
+                    })] })), _jsx("p", { className: cn('font-semibold', hero && 'font-sans text-2xl md:text-3xl'), children: whatLine(booking, labels) }), _jsx("p", { className: cn('tabular-nums', hero && slotClass(classNames, 'heroMuted', 'text-primary-foreground/85')), children: whenLine(booking, now, labels, format) }), booking.managePath ? (_jsx("a", { href: booking.managePath, className: slotClass(classNames, 'manage', 'text-sm font-semibold underline underline-offset-4', hero
+                    ? 'inline-block rounded-lg bg-background px-4 py-2 text-foreground no-underline'
+                    : 'text-primary'), children: labels['upcoming.manage'] })) : (_jsx("p", { className: cn('text-sm', hero
+                    ? slotClass(classNames, 'heroMuted', 'text-primary-foreground/85')
+                    : 'text-muted-foreground'), children: phone
+                    ? labelParts(labels['upcoming.noManageWithPhone'], {
+                        call: (_jsx("a", { href: format.telHref(phone), className: cn('font-semibold underline underline-offset-4', hero ? 'text-primary-foreground' : 'text-primary'), children: fillLabel(labels['upcoming.call'], { phone }) })),
+                    })
+                    : // No number on file: the sentence without a link, because a `tel:`
+                        // that dials nothing fails in the hand of someone already stuck.
+                        labels['upcoming.noManage'] }))] }));
+}

package/dist/booking/portal/vipps-link-row.d.ts

@@ -0,0 +1,54 @@
+import { type SlotClassNames } from '../slots.js';
+export declare const VIPPS_LINK_ROW_LABEL_KEYS: readonly ["vippsLink.heading", "vippsLink.linked", "vippsLink.pitch", "vippsLink.button", "vippsLink.success", "vippsLink.conflict", "vippsLink.failed", "vippsLink.unavailable", "vippsLink.throttled"];
+export type VippsLinkRowLabels = Record<(typeof VIPPS_LINK_ROW_LABEL_KEYS)[number], string>;
+/** `root` (the section), `card` (the bordered row), `heading`, `button`, `notice` (the live line). */
+export type VippsLinkRowSlot = 'root' | 'card' | 'heading' | 'button' | 'notice';
+/** The outcome of a link attempt that just returned, as the server recorded it. */
+export type VippsLinkFlash = 'linked' | 'link_conflict' | 'link_failed';
+/**
+ * What starting a link answers when it did NOT navigate to Vipps:
+ * `missing` — the backend has no link route (the row takes itself away);
+ * `session` — the session is dead; `unavailable` / `throttled` — say why.
+ * `null` = nothing to report (e.g. the navigation is under way).
+ */
+export type VippsLinkStartResult = {
+    ok: false;
+    reason: 'missing' | 'session' | 'unavailable' | 'throttled';
+} | null;
+export interface VippsLinkRowProps {
+    labels: VippsLinkRowLabels;
+    /** Whether the profile says Vipps is linked — the ONLY source of the row's state. */
+    linked: boolean;
+    /** The server-recorded outcome of the link attempt that just returned, if any. */
+    flash: VippsLinkFlash | null;
+    /**
+     * Starts linking. Runs as the form's action (so `useFormStatus` pending
+     * applies); on success it navigates to Vipps and its answer is not seen.
+     */
+    onStart: () => Promise<VippsLinkStartResult>;
+    /** A start answered `session`: send the visitor to the login. */
+    onSessionExpired?: () => void;
+    /**
+     * Called once on mount with a non-null `flash`: the caller shows its own
+     * toast for `linked` and spends the flash so a reload says nothing again.
+     */
+    onFlash?: (flash: VippsLinkFlash) => void;
+    /** Also say `vippsLink.success` in the notice line for a `linked` flash (for callers without a toast). */
+    announceSuccess?: boolean;
+    classNames?: SlotClassNames<VippsLinkRowSlot>;
+}
+/**
+ * «Vipps» on the profile: «linked», or a button that links the visitor's
+ * Vipps account to the profile they are logged in to, so the next login is
+ * one tap.
+ *
+ * A real `<form action>`: the start ends in a navigation to Vipps, and the
+ * form's pending state covers it. On the way back the caller hands this row
+ * the `flash` the server recorded: `linked` is the caller's toast
+ * (`onFlash`), a conflict or a failure is a sentence under the row. Whether
+ * the row reads «linked» comes ONLY from `linked`, the profile's own answer —
+ * no flash can flip it.
+ *
+ * Layout-stable: the notice line is always mounted.
+ */
+export declare function VippsLinkRow({ labels, linked, flash, onStart, onSessionExpired, onFlash, announceSuccess, classNames, }: VippsLinkRowProps): import("react").JSX.Element | null;

package/dist/booking/portal/vipps-link-row.js

@@ -0,0 +1,80 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useActionState, useEffect, useId, useRef } from 'react';
+import { useFormStatus } from 'react-dom';
+import { cn } from '../../lib/utils.js';
+import { BookingButton } from '../internal/ui.js';
+import { slotClass } from '../slots.js';
+export const VIPPS_LINK_ROW_LABEL_KEYS = [
+    'vippsLink.heading',
+    'vippsLink.linked',
+    'vippsLink.pitch',
+    'vippsLink.button',
+    'vippsLink.success',
+    'vippsLink.conflict',
+    'vippsLink.failed',
+    'vippsLink.unavailable',
+    'vippsLink.throttled',
+];
+function LinkButton({ label, className }) {
+    const { pending } = useFormStatus();
+    return (_jsx(BookingButton, { type: "submit", size: "sm", disabled: pending, "aria-busy": pending || undefined, className: cn('rounded-full bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring/40', className), children: label }));
+}
+/** The sentence under the row: a failed start first, else what the return said. */
+function noticeFor(state, isLinked, flash, labels, announceSuccess) {
+    if (state?.reason === 'unavailable')
+        return labels['vippsLink.unavailable'];
+    if (state?.reason === 'throttled')
+        return labels['vippsLink.throttled'];
+    if (flash === 'linked' && announceSuccess)
+        return labels['vippsLink.success'];
+    if (isLinked)
+        return null;
+    if (flash === 'link_conflict')
+        return labels['vippsLink.conflict'];
+    if (flash === 'link_failed')
+        return labels['vippsLink.failed'];
+    return null;
+}
+/**
+ * «Vipps» on the profile: «linked», or a button that links the visitor's
+ * Vipps account to the profile they are logged in to, so the next login is
+ * one tap.
+ *
+ * A real `<form action>`: the start ends in a navigation to Vipps, and the
+ * form's pending state covers it. On the way back the caller hands this row
+ * the `flash` the server recorded: `linked` is the caller's toast
+ * (`onFlash`), a conflict or a failure is a sentence under the row. Whether
+ * the row reads «linked» comes ONLY from `linked`, the profile's own answer —
+ * no flash can flip it.
+ *
+ * Layout-stable: the notice line is always mounted.
+ */
+export function VippsLinkRow({ labels, linked, flash, onStart, onSessionExpired, onFlash, announceSuccess = false, classNames, }) {
+    const id = useId();
+    const [state, formAction] = useActionState(async () => {
+        try {
+            return await onStart();
+        }
+        catch {
+            return { ok: false, reason: 'unavailable' };
+        }
+    }, null);
+    const announced = useRef(false);
+    useEffect(() => {
+        if (announced.current || flash === null)
+            return;
+        announced.current = true;
+        onFlash?.(flash);
+    }, [flash, onFlash]);
+    useEffect(() => {
+        if (state?.reason === 'session')
+            onSessionExpired?.();
+    }, [state, onSessionExpired]);
+    if (state?.reason === 'missing')
+        return null;
+    const sentence = noticeFor(state, linked, flash, labels, announceSuccess);
+    const headingId = `${id}-heading`;
+    const noticeId = `${id}-notice`;
+    return (_jsxs("section", { "aria-labelledby": headingId, className: slotClass(classNames, 'root', 'space-y-2'), children: [_jsxs("div", { className: slotClass(classNames, 'card', 'flex flex-wrap items-center justify-between gap-3 rounded-lg border border-border bg-card px-5 py-4'), children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h2", { id: headingId, className: slotClass(classNames, 'heading', 'font-semibold'), children: labels['vippsLink.heading'] }), _jsx("p", { className: "text-sm text-muted-foreground", children: linked ? labels['vippsLink.linked'] : labels['vippsLink.pitch'] })] }), !linked && (_jsx("form", { action: formAction, "aria-describedby": sentence ? noticeId : undefined, children: _jsx(LinkButton, { label: labels['vippsLink.button'], className: classNames?.button }) }))] }), _jsx("div", { "aria-live": "polite", className: slotClass(classNames, 'notice', 'min-h-5'), children: sentence && (_jsx("p", { id: noticeId, className: "text-sm text-muted-foreground", children: sentence })) })] }));
+}