@medalsocial/booking 0.4.0 → 0.4.1

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);
@@ -838,6 +865,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 +889,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 +911,8 @@ function useBooking(options) {
 		missingKey,
 		fromTs,
 		toTs,
-		slotsAttempt
+		slotsAttempt,
+		noteReadError
 	]);
 	useEffect(() => {
 		if (primaryVisit === null) return;
@@ -877,7 +921,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 +930,9 @@ function useBooking(options) {
 					key: primaryVisit,
 					times: body.nextAvailableTs ?? {}
 				});
-			} catch {
+			} catch (error) {
 				if (!cancelled) {
+					noteReadError("resources", error);
 					setResourcesKnown(true);
 					setFetchedNextAvailable({
 						key: primaryVisit,
@@ -904,7 +949,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 +1046,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 +1071,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;
@@ -1233,7 +1306,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 +1632,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,