@medalsocial/booking 0.4.0 → 0.5.0

package/dist/react/useBooking.mjs

@@ -11,7 +11,7 @@ import { slotKeysFor } from "../core/party-slots.mjs";
 import { stripVippsReturn, vippsConfirmFrom } from "../core/portal/vipps-return.mjs";
 import { useBookingKit } from "./Provider.mjs";
 import { useSearchParams } from "next/navigation";
-import { useEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore } from "react";
+import { useCallback, useEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore } from "react";
 //#region src/react/useBooking.ts
 /**
 * `useBooking()` — the booking wizard without its markup.
@@ -48,6 +48,30 @@ function draftItem(item, idOnly = false) {
 }
 /** How long a replayed submission may take before the restore gate gives up. */
 const REPLAY_TIMEOUT_MS = 15e3;
+/**
+* `AbortSignal.timeout` where the browser has it, a timer-driven controller
+* where it does not. Safari only gained it in 16, and a booking resumed on an
+* older iPhone threw on the call and showed «we do not know yet» instead of
+* asking.
+*/
+function timeoutSignal(ms) {
+	if (typeof AbortSignal.timeout === "function") return AbortSignal.timeout(ms);
+	const controller = new AbortController();
+	setTimeout(controller.abort.bind(controller), ms);
+	return controller.signal;
+}
+/** A non-2xx answer, keeping the status a monitoring tap reports. */
+var ReadFailure = class extends Error {
+	endpoint;
+	status;
+	constructor(endpoint, status) {
+		super(`${endpoint} ${status}`);
+		this.endpoint = endpoint;
+		this.status = status;
+	}
+};
+/** The seed's schedules once a retry has moved the window past them. */
+const NO_SEEDED_SCHEDULE = {};
 /** «hydrated» only ever flips once; `useSyncExternalStore` wants a subscription. */
 function noSubscription() {
 	return () => {};
@@ -412,7 +436,7 @@ function useBooking(options) {
 	/** A stylist a party link named, applied once the family reaches step 3. */
 	const partyStylist = useRef(arrivedAs !== null ? prefill?.resourceId ?? deepLink.stylist : null);
 	const childByKey = useMemo(() => new Map((family ?? []).map((child, index) => [personForChild(child, index).key, child])), [family]);
-	const [fromTs] = useState(() => options.seed.fromTs ?? Date.now());
+	const [fromTs, setFromTs] = useState(() => options.seed.fromTs ?? Date.now());
 	const { toTs, days } = useMemo(() => clock.window(fromTs, rangeDays), [
 		clock,
 		fromTs,
@@ -458,7 +482,10 @@ function useBooking(options) {
 	/** Whether the stylist list has been answered at all — seeded, fetched or failed. */
 	const [resourcesKnown, setResourcesKnown] = useState(() => options.seed.resources != null);
 	const [seededNextAvailable, setSeededNextAvailable] = useState(() => options.seed.resources ? options.seed.nextAvailable ?? {} : {});
-	const [seededSchedule] = useState(() => options.seed.schedules ?? {});
+	const [initialSchedule] = useState(() => options.seed.schedules ?? {});
+	/** Set once a retry has moved the window past the seed's day; the seed no longer answers. */
+	const [seedRetired, setSeedRetired] = useState(false);
+	const seededSchedule = seedRetired ? NO_SEEDED_SCHEDULE : initialSchedule;
 	/** The last «next available» answer, and for WHICH visit (its key). */
 	const [fetchedNextAvailable, setFetchedNextAvailable] = useState(null);
 	const [submitting, setSubmitting] = useState(false);
@@ -646,6 +673,13 @@ function useBooking(options) {
 			type: "pickResource",
 			resourceId: draft.resourceId
 		});
+		draft.seatResourceIds?.forEach((resourceId, index) => {
+			if (resourceId !== null) dispatch({
+				type: "pickSeatResource",
+				index,
+				resourceId
+			});
+		});
 		draft.items.forEach((item, index) => {
 			if (reseated.has(index)) return;
 			if (item.bookedForName !== null) dispatch({
@@ -736,6 +770,7 @@ function useBooking(options) {
 			resourceId: state.resourceId,
 			partyMode: state.partyMode,
 			partyModeChosen: state.partyModeChosen === true,
+			...state.seatResourceIds ? { seatResourceIds: state.people.map((p) => state.seatResourceIds?.[p.key] ?? null) } : {},
 			startTs: state.startTs,
 			resolvedResourceId: state.resolvedResourceId,
 			partyResourceIds: state.partyResourceIds
@@ -749,6 +784,7 @@ function useBooking(options) {
 		state.resourceId,
 		state.partyMode,
 		state.partyModeChosen,
+		state.seatResourceIds,
 		state.startTs,
 		state.resolvedResourceId,
 		state.partyResourceIds
@@ -838,6 +874,23 @@ function useBooking(options) {
 	const missingKey = basketVisits.filter((key) => !(key in slots)).join("|");
 	/** Bumped to ask for the openings again after a failure. */
 	const [slotsAttempt, setSlotsAttempt] = useState(0);
+	/**
+	* The last read that failed, for the monitoring tap (`onEvent`). Every
+	* failure here used to be swallowed into a card: the visitor saw «Vi får
+	* ikke hentet ledige tider», and nobody else ever learnt that they had.
+	*/
+	const [readErrors, setReadErrors] = useState([]);
+	const noteReadError = useCallback((endpoint, error) => {
+		setReadErrors((previous) => {
+			const seq = (previous[previous.length - 1]?.seq ?? 0) + 1;
+			const next = {
+				endpoint,
+				status: error instanceof ReadFailure ? error.status : null,
+				seq
+			};
+			return [...previous.slice(-19), next];
+		});
+	}, []);
 	const api = config.paths.api;
 	useEffect(() => {
 		if (missingKey === "") return;
@@ -845,20 +898,19 @@ function useBooking(options) {
 		let cancelled = false;
 		setSlotsFailed(false);
 		(async () => {
-			try {
-				const fetched = await Promise.all(wanted.map(async (key) => {
-					const response = await fetch(`${api}/availability?${windowQuery(key, fromTs, toTs)}`);
-					if (!response.ok) throw new Error(`availability ${response.status}`);
-					return [key, (await response.json()).slots ?? []];
-				}));
-				if (cancelled) return;
-				setSlots((previous) => ({
-					...previous,
-					...Object.fromEntries(fetched)
-				}));
-			} catch {
-				if (!cancelled) setSlotsFailed(true);
-			}
+			const settled = await Promise.allSettled(wanted.map(async (key) => {
+				const response = await fetch(`${api}/availability?${windowQuery(key, fromTs, toTs)}`);
+				if (!response.ok) throw new ReadFailure("availability", response.status);
+				return [key, (await response.json()).slots ?? []];
+			}));
+			if (cancelled) return;
+			const fetched = settled.flatMap((result) => result.status === "fulfilled" ? [result.value] : []);
+			if (fetched.length > 0) setSlots((previous) => ({
+				...previous,
+				...Object.fromEntries(fetched)
+			}));
+			for (const result of settled) if (result.status === "rejected") noteReadError("availability", result.reason);
+			if (fetched.length < wanted.length) setSlotsFailed(true);
 		})();
 		return () => {
 			cancelled = true;
@@ -868,7 +920,8 @@ function useBooking(options) {
 		missingKey,
 		fromTs,
 		toTs,
-		slotsAttempt
+		slotsAttempt,
+		noteReadError
 	]);
 	useEffect(() => {
 		if (primaryVisit === null) return;
@@ -877,7 +930,7 @@ function useBooking(options) {
 		(async () => {
 			try {
 				const response = await fetch(`${api}/resources?${windowQuery(primaryVisit, fromTs, toTs)}`);
-				if (!response.ok) throw new Error(`resources ${response.status}`);
+				if (!response.ok) throw new ReadFailure("resources", response.status);
 				const body = await response.json();
 				if (cancelled) return;
 				setResources(body.resources ?? []);
@@ -886,8 +939,9 @@ function useBooking(options) {
 					key: primaryVisit,
 					times: body.nextAvailableTs ?? {}
 				});
-			} catch {
+			} catch (error) {
 				if (!cancelled) {
+					noteReadError("resources", error);
 					setResourcesKnown(true);
 					setFetchedNextAvailable({
 						key: primaryVisit,
@@ -904,7 +958,9 @@ function useBooking(options) {
 		primaryVisit,
 		fromTs,
 		toTs,
-		seededNextAvailable
+		seededNextAvailable,
+		slotsAttempt,
+		noteReadError
 	]);
 	/**
 	* The stylist half of a «book again» link, once a list for its service has
@@ -999,15 +1055,16 @@ function useBooking(options) {
 		(async () => {
 			try {
 				const response = await fetch(`${api}/schedule?${windowQuery(primaryVisit, fromTs, toTs, resourceId)}`);
-				if (!response.ok) throw new Error(`schedule ${response.status}`);
+				if (!response.ok) throw new ReadFailure("schedule", response.status);
 				const body = await response.json();
 				if (cancelled) return;
 				setFetchedSchedule({
 					key,
 					days: body.days ?? []
 				});
-			} catch {
+			} catch (error) {
 				if (!cancelled) {
+					noteReadError("schedule", error);
 					setScheduleFailedFor(key);
 					setFetchedSchedule((current) => current?.key === key ? null : current);
 				}
@@ -1023,8 +1080,33 @@ function useBooking(options) {
 		toTs,
 		seededSchedule,
 		state.resourceId,
-		scheduleKey
+		scheduleKey,
+		slotsAttempt,
+		noteReadError
 	]);
+	/**
+	* «Prøv igjen»: ask for the openings, the stylists and the hours again.
+	*
+	* The seed's stylists and hours are answers too, so a retry asks them again
+	* rather than trusting the page's copy of them. A page left open past
+	* midnight also starts a fresh window from now — a retry that resent the
+	* same request would get the same answer, and yesterday's window would
+	* offer hours that are gone and stop a day short — dropping every opening
+	* with it, since they describe the old window.
+	*/
+	const refresh = useCallback(() => {
+		const now = Date.now();
+		setSeededNextAvailable({});
+		setSeedRetired(true);
+		if (clock.dayKey(now) !== clock.dayKey(fromTs)) {
+			setSlots({});
+			setResourcesKnown(false);
+			setFetchedNextAvailable(null);
+			setFetchedSchedule(null);
+			setFromTs(now);
+		}
+		setSlotsAttempt((n) => n + 1);
+	}, [clock, fromTs]);
 	/** A stylist's display name for an id; `''` from Medal reads as none. */
 	const resolveStylistName = useMemo(() => (resourceId) => {
 		const name = resources.find((resource) => resource.id === resourceId)?.name;
@@ -1056,6 +1138,40 @@ function useBooking(options) {
 		state.resourceId,
 		state.items
 	]);
+	/**
+	* The same for «who cuts whom»: a person's own stylist who has left the
+	* roster, or no longer does that person's visit (a draft restored after a
+	* Vipps round trip), would leave the seat with nobody to seat it and the
+	* family with no times at all. Released to anyone, and said so.
+	*/
+	useEffect(() => {
+		if (!resourcesKnown || resources.length === 0 || state.step !== "when") return;
+		const wishes = state.seatResourceIds;
+		if (wishes === void 0) return;
+		let released = false;
+		state.people.forEach((person, index) => {
+			const wish = wishes[person.key];
+			const item = state.items[index];
+			if (wish === void 0 || item === void 0) return;
+			const chosen = resources.find((resource) => resource.id === wish);
+			if (chosen !== void 0 && visitServicesOf(item).every((service) => chosen.serviceIds.includes(service.id))) return;
+			dispatch({
+				type: "pickSeatResource",
+				index,
+				resourceId: null
+			});
+			released = true;
+		});
+		if (released) setStylistNotice(labelText(labels["wizard.stylistGone"]));
+	}, [
+		labels,
+		resourcesKnown,
+		resources,
+		state.step,
+		state.seatResourceIds,
+		state.people,
+		state.items
+	]);
 	/** The open dates with the cutoffs pulled back to fit the WHOLE visit (the safe direction). */
 	const openDaysForVisit = useMemo(() => {
 		if (openDays === null) return null;
@@ -1094,20 +1210,24 @@ function useBooking(options) {
 		state.items,
 		basketSlots
 	]);
-	const partySlots = useMemo(() => party ? kit.partySlots.findPartySlots(state.items, preferredSlots, state.partyMode) : [], [
+	/** Each line's own stylist, in basket order, for a party seen at once. */
+	const seatResourceIds = useMemo(() => state.people.map((person) => state.seatResourceIds?.[person.key] ?? null), [state.people, state.seatResourceIds]);
+	const partySlots = useMemo(() => party ? kit.partySlots.findPartySlots(state.items, preferredSlots, state.partyMode, seatResourceIds) : [], [
 		kit,
 		party,
 		state.items,
 		preferredSlots,
-		state.partyMode
+		state.partyMode,
+		seatResourceIds
 	]);
 	/** The parallel visits, for the day with nothing back to back — over UNFILTERED slots. */
-	const partyAlternatives = useMemo(() => party && state.partyMode === "sequential" ? kit.partySlots.findPartySlots(state.items, basketSlots, "parallel") : [], [
+	const partyAlternatives = useMemo(() => party && state.partyMode === "sequential" ? kit.partySlots.findPartySlots(state.items, basketSlots, "parallel", seatResourceIds) : [], [
 		kit,
 		party,
 		state.items,
 		basketSlots,
-		state.partyMode
+		state.partyMode,
+		seatResourceIds
 	]);
 	const singleSlots = useMemo(() => {
 		if (party || primaryVisit === null) return [];
@@ -1233,7 +1353,7 @@ function useBooking(options) {
 						toTs
 					}
 				}),
-				...sendOptions?.replay === true ? { signal: AbortSignal.timeout(REPLAY_TIMEOUT_MS) } : {}
+				...sendOptions?.replay === true ? { signal: timeoutSignal(REPLAY_TIMEOUT_MS) } : {}
 			});
 			const payload = await response.json().catch(() => null);
 			if (!response.ok) {
@@ -1559,8 +1679,9 @@ function useBooking(options) {
 		submissionNonce,
 		confirmed,
 		startOver,
-		/** Ask for the openings again after a failure. */
-		refresh: () => setSlotsAttempt((n) => n + 1),
+		refresh,
+		/** The recent reads that failed, oldest first (`onEvent`'s `read_error`). */
+		readErrors,
 		restore: {
 			hydrated,
 			restoring,