@medalsocial/booking 0.0.0-placeholder.0 → 0.2.0

package/dist/react/BookingWizard.mjs

@@ -0,0 +1,598 @@
+'use client';
+import { fill, fillParts, labelText } from "../core/labels.mjs";
+import { visitServicesOf } from "../core/visit.mjs";
+import { SELF_KEY } from "../core/machine.mjs";
+import { useBookingKit } from "./Provider.mjs";
+import { screenLabels } from "./screen-labels.mjs";
+import { LoginSheet as LoginSheet$1 } from "./LoginSheet.mjs";
+import { useBooking } from "./useBooking.mjs";
+import { addedChildEntries, confirmationProps, detailsLines, detailsScreenBase, familyEntries, guestChoices, partyPeople, partySizeWord, serviceFitsFor, serviceScreenBase, weekendNoteFor } from "./wizard/adapters.mjs";
+import { forMedaScreen, wizardErrorText } from "./wizard-error.mjs";
+import { BookingButton, Confirmation, DetailsScreen, LiveStatus, ServiceScreen, StylistScreen, SummaryBar, TakenToast, TimeScreen, TimeScreenSkeleton, WhoScreen } from "@medalsocial/meda/booking";
+import { Suspense, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowLeft } from "lucide-react";
+//#region src/react/BookingWizard.tsx
+/**
+* `<BookingWizard>` — the booking flow, from «who is it for?» to the
+* confirmation, drawn with the `@medalsocial/meda/booking` screens over
+* `useBooking()`.
+*
+* The hook owns the machine, the fetches and the stores; this file owns the
+* page: which step is on screen (ONE at a time — the details step's nonce and
+* the submit flag depend on it), focus and scroll on every move, the restore
+* gate's pre-hydration script and skeleton, the header, and what each screen
+* is handed (prices, the weekend note, ages, the possessive, the calendar
+* file) out of the site's config.
+*/
+/** The wizard's root, for the inline restore gate to find before hydration. */
+const WIZARD_ROOT_ID = "booking-wizard";
+/** The time step's heading, which a lost slot sends the visitor back to. */
+const TIME_HEADING_ID = "booking-time-heading";
+/** The heading each screen focuses when the visitor arrives on it. */
+const STEP_HEADINGS = {
+	who: "booking-who-heading",
+	service: "booking-service-heading",
+	when: "booking-stylist-heading",
+	details: "booking-details-heading",
+	confirmed: "booking-confirmed-heading"
+};
+const STEPS = [
+	"who",
+	"service",
+	"when",
+	"details"
+];
+/** Smooth, or instant for a visitor who asked for reduced motion. */
+function scrollToTop(target) {
+	if (!target || typeof target.scrollIntoView !== "function") return;
+	const reduced = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+	target.scrollIntoView({
+		behavior: reduced ? "auto" : "smooth",
+		block: "start"
+	});
+}
+/**
+* The wizard, behind its own Suspense boundary: `useSearchParams` throws to
+* the nearest one during a static prerender, and without ours that is the
+* root layout's — the whole page would ship empty until hydration.
+*/
+function BookingWizard(props) {
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: null,
+		children: /* @__PURE__ */ jsx(BookingWizardShell, { ...props })
+	});
+}
+function BookingWizardShell(props) {
+	const resolved = useBookingKit(props, props.contact);
+	const booking = useBooking(props);
+	const { kit } = booking;
+	const { labels } = kit;
+	const { state, restore, confirmed, onEvent } = {
+		...booking,
+		onEvent: props.onEvent
+	};
+	/**
+	* On every change of screen: the wizard's top into view and focus on the
+	* new step's heading. Never on the first screen, and never for what the
+	* restore gate reveals — that is the page arriving, not the visitor moving.
+	*/
+	const rootRef = useRef(null);
+	const screenKey = confirmed !== null ? "confirmed" : state.step;
+	const shownScreen = useRef(null);
+	const takenSlotTs = booking.slots.takenSlotTs;
+	const timeStepReady = booking.slots.ready;
+	const focusTimeWhenReady = useRef(false);
+	useEffect(() => {
+		if (restore.restoring) return;
+		const previous = shownScreen.current;
+		shownScreen.current = screenKey;
+		if (previous === screenKey) return;
+		onEvent?.({
+			type: "step",
+			step: screenKey
+		});
+		if (previous === null) return;
+		const toTimes = screenKey === "when" && takenSlotTs !== null;
+		const headingId = toTimes ? TIME_HEADING_ID : STEP_HEADINGS[screenKey];
+		const heading = document.getElementById(headingId);
+		scrollToTop(toTimes ? heading : rootRef.current);
+		heading?.focus({ preventScroll: true });
+		focusTimeWhenReady.current = toTimes && !timeStepReady;
+	}, [
+		screenKey,
+		restore.restoring,
+		takenSlotTs,
+		timeStepReady,
+		onEvent
+	]);
+	/** After a login from the sheet the row that opened it is gone: focus the step's heading. */
+	const focusAfterSignIn = useRef(false);
+	const signedIn = booking.login.signedIn;
+	useEffect(() => {
+		if (signedIn === null || !focusAfterSignIn.current) return;
+		focusAfterSignIn.current = false;
+		document.getElementById(STEP_HEADINGS[state.step])?.focus({ preventScroll: true });
+	}, [signedIn, state.step]);
+	useEffect(() => {
+		if (!timeStepReady || !focusTimeWhenReady.current) return;
+		focusTimeWhenReady.current = false;
+		const active = document.activeElement;
+		if (active === null || active === document.body) document.getElementById(TIME_HEADING_ID)?.focus({ preventScroll: true });
+	}, [timeStepReady]);
+	const lastError = useRef(state.error);
+	useEffect(() => {
+		if (state.error !== null && state.error !== lastError.current) onEvent?.({
+			type: "submit_error",
+			code: state.error
+		});
+		lastError.current = state.error;
+	}, [state.error, onEvent]);
+	const confirmedCount = confirmed?.bookings.length ?? 0;
+	useEffect(() => {
+		if (confirmedCount > 0) onEvent?.({
+			type: "submit_ok",
+			bookings: confirmedCount
+		});
+	}, [confirmedCount, onEvent]);
+	useLayoutEffect(() => {
+		if (!restore.hydrated) return;
+		rootRef.current?.removeAttribute("data-restoring");
+		rootRef.current?.setAttribute("data-hydrated", "");
+	}, [restore.hydrated]);
+	const [arrivalStep, setArrivalStep] = useState(restore.restoring ? null : state.step);
+	if (!restore.restoring && arrivalStep === null) setArrivalStep(state.step);
+	const [stepsMovedOnce, setStepsMovedOnce] = useState(false);
+	const movedNow = arrivalStep !== null && !restore.restoring && state.step !== arrivalStep;
+	if (movedNow && !stepsMovedOnce) setStepsMovedOnce(true);
+	const stepsMoved = stepsMovedOnce || movedNow;
+	const restoreSkeleton = /* @__PURE__ */ jsx(RestoreSkeleton, { text: labelText(labels["wizard.restoring"]) });
+	/**
+	* The root both screens share: the scroll target, and the element the
+	* inline restore gate marks. The script and the hidden skeleton exist only
+	* in the server's HTML and the hydration pass that adopts it.
+	*/
+	const shell = (content) => /* @__PURE__ */ jsxs("div", {
+		id: WIZARD_ROOT_ID,
+		ref: rootRef,
+		className: resolved.classNames.wizard?.root ?? "group scroll-mt-28",
+		suppressHydrationWarning: true,
+		children: [!restore.hydrated && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: kit.restoreGate.restoreGateScript(WIZARD_ROOT_ID, restore.linked, restore.resuming) } }), /* @__PURE__ */ jsx("div", {
+			className: "hidden group-data-[restoring]:block",
+			children: restoreSkeleton
+		})] }), restore.restoring && restore.hydrated ? restoreSkeleton : /* @__PURE__ */ jsx("div", {
+			className: "group-data-[restoring]:hidden",
+			children: content
+		})]
+	});
+	if (confirmed !== null) return shell(/* @__PURE__ */ jsx(ConfirmationStep, {
+		booking,
+		resolved,
+		siteUrl: props.siteUrl
+	}));
+	const onSignedIn = (who) => {
+		focusAfterSignIn.current = true;
+		booking.login.signIn(who);
+	};
+	const multiSelect = state.step === "service" && kit.config.party.maxServicesPerPerson > 1;
+	const loginOffered = props.actions !== void 0 && kit.config.portal.enabled;
+	const loginRow = loginOffered ? /* @__PURE__ */ jsx(LoginRow, {
+		booking,
+		actions: props.actions,
+		overrides: props,
+		onSignedIn
+	}) : null;
+	return shell(/* @__PURE__ */ jsxs("div", {
+		className: "space-y-8",
+		children: [
+			/* @__PURE__ */ jsx(WizardHeader, {
+				kit,
+				state,
+				submitting: booking.submitting,
+				onGo: (step) => booking.dispatch({
+					type: "goToStep",
+					step
+				})
+			}),
+			state.error !== null && state.step !== "details" && state.step !== "when" && !multiSelect && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: resolved.classNames.wizard?.alert ?? "rounded-lg border border-destructive/40 bg-destructive/10 px-5 py-3 text-sm",
+				children: wizardErrorText(labels, state.error, kit.config.party.maxServicesPerPerson)
+			}),
+			state.step === "details" && loginRow,
+			loginOffered && booking.login.vippsConfirm !== null && signedIn === null && /* @__PURE__ */ jsx(LoginSheet$1, {
+				...overridesOf(props),
+				actions: props.actions,
+				presentation: "sheet",
+				trigger: false,
+				vippsConfirm: booking.login.vippsConfirm,
+				resumePath: booking.login.resumePath,
+				onSignedIn
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"data-booking-step": state.step,
+				"data-animate": stepsMoved ? "" : void 0,
+				className: "space-y-8",
+				children: [
+					state.step === "who" && /* @__PURE__ */ jsx(WhoStep, {
+						booking,
+						resolved,
+						loginRow
+					}),
+					state.step === "service" && /* @__PURE__ */ jsx(ServiceStep, {
+						booking,
+						resolved,
+						multiSelect
+					}),
+					state.step === "when" && /* @__PURE__ */ jsx(WhenStep, {
+						booking,
+						resolved
+					}),
+					state.step === "details" && /* @__PURE__ */ jsx(DetailsStep, {
+						booking,
+						resolved
+					})
+				]
+			}, state.step),
+			!multiSelect && /* @__PURE__ */ jsx(SummaryBar, {
+				line: booking.derived.summary,
+				canAdvance: booking.derived.canAdvance,
+				step: state.step,
+				onNext: booking.next,
+				labels: screenLabels(labels),
+				classNames: resolved.classNames.summary
+			})
+		]
+	}));
+}
+/** The overrides a nested booking component inherits from the wizard's props. */
+function overridesOf(props) {
+	return {
+		config: props.config,
+		labels: props.labels,
+		classNames: props.classNames,
+		components: props.components
+	};
+}
+function WhoStep({ booking, resolved, loginRow }) {
+	const { kit, state, people } = booking;
+	const guests = useMemo(() => guestChoices(kit), [kit]);
+	return /* @__PURE__ */ jsx(WhoScreen, {
+		labels: screenLabels(kit.labels),
+		format: kit.format,
+		people: state.people,
+		family: people.family === null ? null : familyEntries(kit, people.family, people.ageDayKey),
+		guestChoices: guests,
+		addedChildren: addedChildEntries(kit, state.people, people.ageDayKey),
+		maxPeople: kit.wizard.maxPeople,
+		selfKey: SELF_KEY,
+		isGuestSeat: kit.wizard.isGuestSeat,
+		onChoose: people.choosePeople,
+		onAddChild: people.addChild,
+		loginRow,
+		currentYear: Number(kit.clock.dayKey(booking.slots.fromTs).slice(0, 4)),
+		classNames: resolved.classNames.who,
+		components: resolved.components.PersonCard ? { PersonCard: resolved.components.PersonCard } : void 0
+	});
+}
+function ServiceStep({ booking, resolved, multiSelect }) {
+	const { kit, state, people, catalogue } = booking;
+	const ageOf = (person) => people.personAge(person, people.ageDayKey);
+	const single = state.people.length === 1 ? state.people[0] : null;
+	const pickFor = (index, service, oneTap) => {
+		const visit = state.choices[index] ? [state.choices[index], ...state.extras[index]] : [];
+		if (!multiSelect || visit.length === 0 || visit.length === 1 && visit[0].id === service.id) oneTap();
+		else if (!visit.some((ticked) => ticked.id === service.id)) booking.toggleServiceFor(index, service);
+	};
+	return /* @__PURE__ */ jsx(ServiceScreen, {
+		labels: screenLabels(kit.labels),
+		format: kit.format,
+		services: catalogue.services,
+		...serviceScreenBase(kit),
+		serviceFits: serviceFitsFor(kit, state.people.map(ageOf)),
+		initialCategory: catalogue.deepLinkCategory,
+		onPick: (service) => pickFor(0, service, () => booking.pickService(service)),
+		suggestion: single ? people.suggestionFor(single) : null,
+		chosenId: state.choices[0]?.id ?? null,
+		childName: single ? single.name ?? null : null,
+		party: state.people.length > 1 ? {
+			people: partyPeople(kit, state.people, ageOf, people.suggestionFor),
+			choices: state.choices,
+			onPickFor: (index, service) => pickFor(index, service, () => booking.pickServiceFor(index, service)),
+			onRemove: (index) => booking.dispatch({
+				type: "choosePeople",
+				people: state.people.filter((_, position) => position !== index)
+			})
+		} : void 0,
+		selection: multiSelect ? {
+			lists: state.choices.map((first, index) => first ? [first, ...state.extras[index]] : []),
+			onToggle: booking.toggleServiceFor,
+			onContinue: booking.continueFromService,
+			total: state.items.length === 0 ? null : {
+				minutes: kit.wizard.visitMinutes(state.items, state.partyMode),
+				priceOre: booking.derived.total
+			},
+			canContinue: booking.derived.canAdvance,
+			notice: state.error === null ? null : labelText(wizardErrorText(kit.labels, state.error, kit.config.party.maxServicesPerPerson)),
+			labels: kit.labels
+		} : void 0,
+		classNames: resolved.classNames.service,
+		components: resolved.components.ServiceCard ? { ServiceCard: resolved.components.ServiceCard } : void 0
+	});
+}
+function WhenStep({ booking, resolved }) {
+	const { kit, state, catalogue, slots, schedule } = booking;
+	const { labels, format, wizard, config } = kit;
+	const party = booking.derived.party;
+	const items = state.items;
+	const phone = config.contact.phone;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(StylistScreen, {
+			labels: screenLabels(labels),
+			format,
+			serviceIds: items.flatMap((item) => visitServicesOf(item).map((service) => service.id)),
+			resources: catalogue.resources,
+			loading: !catalogue.resourcesKnown,
+			nextAvailableLoading: slots.nextAvailableLoading,
+			selectedResourceId: state.resourceId,
+			nextAvailableTs: slots.nextAvailableTs,
+			pendingName: catalogue.chosenStylistName,
+			notice: catalogue.stylistNotice,
+			onPick: booking.pickResource,
+			party: party ? {
+				mode: state.partyMode,
+				size: items.length,
+				sizeWord: partySizeWord(labels, items.length),
+				minutes: {
+					sequential: wizard.visitMinutes(items, "sequential"),
+					parallel: wizard.visitMinutes(items, "parallel")
+				},
+				onMode: (mode) => booking.dispatch({
+					type: "setPartyMode",
+					mode
+				})
+			} : void 0,
+			classNames: resolved.classNames.stylist,
+			components: resolved.components.StylistCard ? { StylistCard: resolved.components.StylistCard } : void 0
+		}),
+		slots.ready ? /* @__PURE__ */ jsx(TimeScreen, {
+			labels: screenLabels(labels),
+			format,
+			dayparts: kit.dayparts,
+			monthView: true,
+			slots: slots.single,
+			days: slots.days,
+			openDays: schedule.openDays,
+			stylistName: catalogue.chosenStylistName,
+			takenSlotTs: slots.takenSlotTs,
+			phone,
+			weekendNote: (dayTs) => weekendNoteFor(kit, party ? items : items.slice(0, 1), dayTs),
+			onPick: booking.pickSlot,
+			party: party ? {
+				items,
+				mode: state.partyMode,
+				slots: slots.party,
+				chipEndTs: (slot) => wizard.visitEndTs(items, slot.startTs, "sequential"),
+				alternativeFor: state.partyMode === "sequential" ? (dayTs) => kit.partySlots.partyAlternative({
+					sequential: slots.party,
+					parallel: slots.alternatives,
+					dayTs
+				}) : void 0,
+				resolveStylistName: catalogue.resolveStylistName,
+				onPick: booking.pickPartySlot
+			} : void 0,
+			classNames: resolved.classNames.time,
+			components: timeComponents(resolved)
+		}) : slots.failed ? /* @__PURE__ */ jsx(SlotsUnavailable, {
+			kit,
+			onRetry: booking.refresh
+		}) : /* @__PURE__ */ jsx(TimeScreenSkeleton, {
+			labels: screenLabels(labels),
+			days: slots.days.length,
+			monthView: true,
+			surchargeRow: items.some((item) => visitServicesOf(item).some((service) => service.weekendSurchargePct > 0))
+		}),
+		/* @__PURE__ */ jsx(TakenToast, {
+			labels: screenLabels(labels),
+			takenSlotTs: slots.takenSlotTs
+		})
+	] });
+}
+function timeComponents({ components }) {
+	if (!components.DayChip && !components.TimeChip) return void 0;
+	return {
+		DayChip: components.DayChip,
+		TimeChip: components.TimeChip
+	};
+}
+function DetailsStep({ booking, resolved }) {
+	const { kit, state } = booking;
+	const guardian = booking.login.guardian;
+	const lines = useMemo(() => detailsLines(kit, state), [kit, state]);
+	return /* @__PURE__ */ jsx(DetailsScreen, {
+		state: forMedaScreen(state),
+		onChange: booking.dispatch,
+		onSubmit: booking.submit,
+		lines,
+		totalOre: booking.derived.total,
+		...detailsScreenBase(kit),
+		submitting: booking.submitting,
+		submissionNonce: booking.submissionNonce,
+		family: guardian?.family,
+		guardianPhone: guardian?.phone ?? null,
+		format: kit.format,
+		labels: screenLabels(kit.labels),
+		classNames: resolved.classNames.details,
+		components: resolved.components.FamilyChip ? { FamilyChip: resolved.components.FamilyChip } : void 0
+	});
+}
+function ConfirmationStep({ booking, resolved, siteUrl }) {
+	const { kit } = booking;
+	const [now] = useState(() => Date.now());
+	const confirmation = booking.confirmed;
+	return /* @__PURE__ */ jsx(Confirmation, {
+		...confirmationProps(kit, confirmation, siteUrl),
+		onStartOver: booking.startOver,
+		now,
+		format: kit.format,
+		labels: screenLabels(kit.labels),
+		classNames: resolved.classNames.confirmation,
+		components: resolved.components.PartyLine ? { PartyLine: resolved.components.PartyLine } : void 0
+	});
+}
+/**
+* «Have an account? Log in» — or, once the parent is known, nothing at all
+* for one who arrived logged in, and one line saying so for one who logged in
+* from the sheet.
+*/
+function LoginRow({ booking, actions, overrides, onSignedIn }) {
+	const { arrivedAs, signedIn, resumePath } = booking.login;
+	const { labels } = booking.kit;
+	if (signedIn === null && arrivedAs !== null) return null;
+	const who = signedIn === null ? null : signedIn.guardian ?? arrivedAs;
+	const name = who === null ? null : [who.firstName, who.lastName].filter(Boolean).join(" ").trim() || who.email;
+	const confirmation = signedIn === null ? null : name === null ? labelText(labels["wizard.signedIn"]) : fill(labels["wizard.signedInAs"], { name });
+	return /* @__PURE__ */ jsxs("div", { children: [signedIn === null && /* @__PURE__ */ jsx(LoginSheet$1, {
+		...overridesOf(overrides),
+		actions,
+		presentation: "sheet",
+		resumePath,
+		onSignedIn
+	}), /* @__PURE__ */ jsx(LiveStatus, {
+		text: confirmation,
+		className: "text-sm text-muted-foreground empty:hidden"
+	})] });
+}
+/** The neutral shell the restore gate shows, the header's and a step's shape. */
+function RestoreSkeleton({ text }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": "restore-skeleton",
+		children: [/* @__PURE__ */ jsx(LiveStatus, { text }), /* @__PURE__ */ jsxs("div", {
+			"aria-busy": "true",
+			className: "space-y-8",
+			children: [/* @__PURE__ */ jsxs("div", {
+				"aria-hidden": "true",
+				className: "space-y-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ jsx("span", { className: "size-9 shrink-0 animate-pulse rounded-full bg-muted" }), /* @__PURE__ */ jsxs("span", {
+						className: "flex flex-col gap-1.5",
+						children: [/* @__PURE__ */ jsx("span", { className: "h-4 w-24 animate-pulse rounded bg-muted" }), /* @__PURE__ */ jsx("span", { className: "h-3 w-36 animate-pulse rounded bg-muted" })]
+					})]
+				}), /* @__PURE__ */ jsx("span", { className: "block h-1.5 w-full animate-pulse rounded-full bg-muted" })]
+			}), /* @__PURE__ */ jsxs("div", {
+				"aria-hidden": "true",
+				className: "space-y-6",
+				children: [/* @__PURE__ */ jsx("span", { className: "block h-8 w-56 animate-pulse rounded bg-muted md:h-9" }), /* @__PURE__ */ jsx("div", {
+					className: "space-y-2",
+					children: Array.from({ length: 4 }, (_, index) => /* @__PURE__ */ jsx("span", { className: "block h-24 animate-pulse rounded-lg bg-muted" }, index))
+				})]
+			})]
+		})]
+	});
+}
+/**
+* Where the visitor is, the way back, and how much is left: a back arrow, the
+* title and «step N of 4», and one segment per step that IS the button to it —
+* tappable only where the machine's `canGoToStep` says so, and frozen while a
+* submission is in flight.
+*/
+function WizardHeader({ kit, state, submitting, onGo }) {
+	const { labels, wizard } = kit;
+	const stepLabel = (step) => labelText(labels[`wizard.step.${step}`]);
+	const index = STEPS.indexOf(state.step);
+	const previous = index > 0 ? STEPS[index - 1] : null;
+	const canGoBack = previous !== null && !submitting && wizard.canGoToStep(state, previous);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-3",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-3",
+			children: [canGoBack ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": fill(labels["wizard.back"], { label: stepLabel(previous) }),
+				onClick: () => onGo(previous),
+				className: "flex size-9 shrink-0 items-center justify-center rounded-full border border-border text-foreground transition-colors hover:bg-muted",
+				children: /* @__PURE__ */ jsx(ArrowLeft, {
+					"aria-hidden": "true",
+					className: "size-4"
+				})
+			}) : /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "size-9 shrink-0"
+			}), /* @__PURE__ */ jsxs("p", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "block font-sans text-sm font-bold",
+					children: labels["wizard.title"]
+				}), /* @__PURE__ */ jsx("span", {
+					className: "block truncate text-xs text-muted-foreground",
+					children: fillParts(labels["wizard.progress"], {
+						step: index + 1,
+						total: STEPS.length,
+						label: stepLabel(state.step)
+					})
+				})]
+			})]
+		}), /* @__PURE__ */ jsx("ol", {
+			"aria-label": labelText(labels["wizard.progressLabel"]),
+			className: "flex items-center gap-1.5",
+			children: STEPS.map((step, position) => {
+				const isCurrent = step === state.step;
+				const reachable = !submitting && !isCurrent && wizard.canGoToStep(state, step);
+				return /* @__PURE__ */ jsx("li", {
+					className: "flex-1",
+					children: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						disabled: !reachable,
+						"aria-current": isCurrent ? "step" : void 0,
+						onClick: () => onGo(step),
+						className: `block h-1.5 w-full rounded-full transition-colors ${position <= index ? "bg-primary" : "bg-border"} ${reachable ? "cursor-pointer" : "cursor-default"}`,
+						children: /* @__PURE__ */ jsx("span", {
+							className: "sr-only",
+							children: stepLabel(step)
+						})
+					})
+				}, step);
+			})
+		})]
+	});
+}
+/**
+* The openings could not be read — this site's failure, not a full day —
+* with the telephone as the rescue and a retry as the cheaper first try.
+*/
+function SlotsUnavailable({ kit, onRetry }) {
+	const { labels, config, format } = kit;
+	const phone = config.contact.phone;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-3",
+		children: [/* @__PURE__ */ jsxs("p", {
+			role: "alert",
+			className: "rounded-lg border border-border bg-card px-5 py-4 text-sm",
+			children: [
+				labels["wizard.slotsUnavailable.lead"],
+				phone ? /* @__PURE__ */ jsx("a", {
+					href: format.telHref(phone),
+					"aria-label": fill(labels["wizard.slotsUnavailable.callAria"], { phone }),
+					className: "font-semibold text-primary underline underline-offset-4",
+					children: fillParts(labels["wizard.slotsUnavailable.call"], { phone })
+				}) : labels["wizard.slotsUnavailable.callPlain"],
+				labels["wizard.slotsUnavailable.suffix"]
+			]
+		}), /* @__PURE__ */ jsx(BookingButtonOutline, {
+			onClick: onRetry,
+			children: labels["wizard.retry"]
+		})]
+	});
+}
+function BookingButtonOutline({ onClick, children }) {
+	return /* @__PURE__ */ jsx(BookingButton, {
+		variant: "outline",
+		onClick,
+		children
+	});
+}
+//#endregion
+export { BookingWizard };
+
+//# sourceMappingURL=BookingWizard.mjs.map