@medalsocial/booking 0.1.0 → 0.2.1

package/dist/react/useBooking.mjs

@@ -4,7 +4,9 @@ import "../core/attempt-store.mjs";
 import { stylistDisplayName } from "../core/display-name.mjs";
 import { serviceMatches } from "../core/deep-link.mjs";
 import "../core/draft-store.mjs";
+import { visitKey, visitServicesOf } from "../core/visit.mjs";
 import { firstOpeningPerResource } from "../core/next-available.mjs";
+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";
@@ -33,18 +35,52 @@ const REPLAY_TIMEOUT_MS = 15e3;
 function noSubscription() {
 	return () => {};
 }
-/** The `freshSlots` of a `slotTaken` answer, narrowed to the lost services' lists. */
+/** The `freshSlots` of a `slotTaken` answer, narrowed to the lost visits' lists. */
 function freshSlotsOf(raw, lost) {
 	if (typeof raw !== "object" || raw === null) return {};
 	return Object.fromEntries(Object.entries(raw).filter((entry) => lost.has(entry[0]) && Array.isArray(entry[1])));
 }
-function windowQuery(serviceId, fromTs, toTs) {
+/**
+* The window query for ONE visit, named by its key (`a` or `a+b`): the first
+* service as `service_id`, the rest as `extra_service_ids`. The extras are
+* added only when there are some, so a one-service visit asks with exactly the
+* URL it always did — the slot cache and every seeded answer are keyed by it.
+*/
+function windowQuery(key, fromTs, toTs, resourceId) {
+	const [serviceId, ...extras] = key.split("+");
 	return new URLSearchParams({
 		service_id: serviceId,
+		...extras.length === 0 ? {} : { extra_service_ids: extras.join(",") },
+		...resourceId ? { resource_id: resourceId } : {},
 		from_ts: String(fromTs),
 		to_ts: String(toTs)
 	});
 }
+/**
+* The submission with each line's extras on it. meda's details screen builds
+* the body from its own types, which have one service per line, so the shell
+* is the only place that knows the rest of a person's visit. Index-aligned with
+* the basket the screen was drawn from; a body of another length is not one
+* this basket produced, and is sent as it came rather than with extras pinned
+* to the wrong people.
+*/
+function withExtraServices(submission, items) {
+	if (!items.some((item) => (item.extraServices ?? []).length > 0)) return submission;
+	if (submission.items.length !== items.length) {
+		console.warn("[@medalsocial/booking] The submission has %d lines for a basket of %d; not sent.", submission.items.length, items.length);
+		return null;
+	}
+	return {
+		...submission,
+		items: submission.items.map((line, index) => {
+			const extras = items[index].extraServices ?? [];
+			return extras.length === 0 ? line : {
+				...line,
+				extraServiceIds: extras.map((service) => service.id)
+			};
+		})
+	};
+}
 /** What the create route said, narrowed to what the machine can hold. */
 function asSubmitFailure(code) {
 	switch (code) {
@@ -108,8 +144,8 @@ function stylistLeftToFill(prefill) {
 	return prefill?.serviceId && prefill.resourceId ? prefill : null;
 }
 /** Whether the stylist list can now vouch for the pending link. */
-function canFinishStylist(pending, resources, primaryServiceId) {
-	return pending !== null && resources.length > 0 && primaryServiceId === pending.serviceId;
+function canFinishStylist(pending, resources, primaryVisit) {
+	return pending !== null && resources.length > 0 && primaryVisit === pending.serviceId;
 }
 /**
 * A saved child as the person the machine seats: by `personId` when Medal has
@@ -278,7 +314,12 @@ function useBooking(options) {
 		};
 	};
 	const pendingStylist = useRef(stylistLeftToFill(prefill));
-	/** Unfiltered openings, keyed by service id. */
+	/**
+	* Unfiltered openings, keyed by VISIT (`visitKey`): a service id for a
+	* one-service visit — which is all the server seed ever holds — and `a+b`
+	* for a person having both, whose list is the server's answer for the whole
+	* visit rather than either service's own.
+	*/
 	const [slots, setSlots] = useState(() => options.seed.slots ?? {});
 	const [slotsFailed, setSlotsFailed] = useState(false);
 	const [resources, setResources] = useState(() => options.seed.resources ?? []);
@@ -286,7 +327,7 @@ function useBooking(options) {
 	const [resourcesKnown, setResourcesKnown] = useState(() => options.seed.resources != null);
 	const [seededNextAvailable, setSeededNextAvailable] = useState(() => options.seed.resources ? options.seed.nextAvailable ?? {} : {});
 	const [seededSchedule] = useState(() => options.seed.schedules ?? {});
-	/** The last «next available» answer, and for WHICH service. */
+	/** The last «next available» answer, and for WHICH visit (its key). */
 	const [fetchedNextAvailable, setFetchedNextAvailable] = useState(null);
 	const [submitting, setSubmitting] = useState(false);
 	/**
@@ -400,6 +441,37 @@ function useBooking(options) {
 		return reseated;
 	};
 	/**
+	* Each draft line's extras back on it, through `toggleServiceFor` like a tap.
+	* Returns whether EVERY extra came back. The machine's refusals are checked
+	* here first rather than read off its state, which a dispatch does not hand
+	* back: an id the catalogue no longer books, one already on the line (a
+	* toggle would take it OFF again), one past `maxServicesPerPerson`, or one
+	* more taker than the service's `maxPerBooking` — each is skipped, as an
+	* unknown main service is, and makes the answer `false`.
+	*/
+	const restoreExtras = (draft, lines, bookable) => {
+		let whole = true;
+		const lists = lines.map((service) => [service]);
+		draft.items.forEach((item, index) => {
+			for (const id of item.extraServiceIds ?? []) {
+				const service = bookable.get(id);
+				const list = lists[index];
+				const takers = lists.filter((other) => other.some((entry) => entry.id === id)).length;
+				if (service === void 0 || list.some((entry) => entry.id === id) || list.length >= config.party.maxServicesPerPerson || takers + 1 > service.maxPerBooking) {
+					whole = false;
+					continue;
+				}
+				list.push(service);
+				dispatch({
+					type: "toggleServiceFor",
+					index,
+					service
+				});
+			}
+		});
+		return whole;
+	};
+	/**
 	* The booking a Vipps login interrupted, rebuilt through the machine's own
 	* actions — so it obeys every rule a tapped one does — and trusting nothing
 	* beyond the catalogue.
@@ -426,6 +498,7 @@ function useBooking(options) {
 			service
 		});
 		const reseated = reseatFamily(draft, resolved);
+		const wholeVisits = restoreExtras(draft, resolved, bookable);
 		if (draft.partyMode === "parallel") dispatch({
 			type: "setPartyMode",
 			mode: "parallel"
@@ -449,7 +522,7 @@ function useBooking(options) {
 				value: item.bookedForBirthYear
 			});
 		});
-		if (draft.startTs === null) return;
+		if (draft.startTs === null || !wholeVisits) return;
 		if (draft.partyResourceIds !== null && draft.partyResourceIds.length === resolved.length) {
 			restoredStylists.current = draft.partyResourceIds;
 			dispatch({
@@ -514,6 +587,7 @@ function useBooking(options) {
 		kit.drafts.stashDraft({
 			items: state.items.map((item) => ({
 				serviceId: item.service.id,
+				...item.extraServices?.length ? { extraServiceIds: item.extraServices.map((service) => service.id) } : {},
 				bookedForName: item.bookedForName ?? null,
 				bookedForBirthYear: item.bookedForBirthYear ?? null,
 				adult: item.adult === true,
@@ -575,20 +649,28 @@ function useBooking(options) {
 			});
 		}
 	}, [guardian, phone]);
-	const basketServiceIds = useMemo(() => [...new Set(state.items.map((item) => item.service.id))], [state.items]);
-	const basketKey = basketServiceIds.join("|");
+	const basketVisits = useMemo(() => slotKeysFor(state.items), [state.items]);
+	const basketKey = basketVisits.join("|");
 	const primaryServiceId = state.items[0]?.service.id ?? null;
+	/**
+	* The first person's whole visit, by key — what the stylists' «neste ledige»
+	* and the business's hours are asked for. Equal to `primaryServiceId` for a
+	* one-service visit, so the seed (keyed by service id, and only ever for one
+	* service) answers exactly the visits it can, and a visit with extras is
+	* fetched instead of being read off its first service's openings.
+	*/
+	const primaryVisit = state.items[0] ? visitKey(state.items[0]) : null;
 	const nextAvailableTs = useMemo(() => {
-		if (primaryServiceId === null) return {};
-		const seeded = seededNextAvailable[primaryServiceId];
+		if (primaryVisit === null) return {};
+		const seeded = seededNextAvailable[primaryVisit];
 		if (seeded) return seeded;
-		return fetchedNextAvailable?.serviceId === primaryServiceId ? fetchedNextAvailable.times : {};
+		return fetchedNextAvailable?.key === primaryVisit ? fetchedNextAvailable.times : {};
 	}, [
-		primaryServiceId,
+		primaryVisit,
 		seededNextAvailable,
 		fetchedNextAvailable
 	]);
-	const missingKey = basketServiceIds.filter((id) => !(id in slots)).join("|");
+	const missingKey = basketVisits.filter((key) => !(key in slots)).join("|");
 	/** Bumped to ask for the openings again after a failure. */
 	const [slotsAttempt, setSlotsAttempt] = useState(0);
 	const api = config.paths.api;
@@ -599,10 +681,10 @@ function useBooking(options) {
 		setSlotsFailed(false);
 		(async () => {
 			try {
-				const fetched = await Promise.all(wanted.map(async (serviceId) => {
-					const response = await fetch(`${api}/availability?${windowQuery(serviceId, fromTs, toTs)}`);
+				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 [serviceId, (await response.json()).slots ?? []];
+					return [key, (await response.json()).slots ?? []];
 				}));
 				if (cancelled) return;
 				setSlots((previous) => ({
@@ -624,26 +706,26 @@ function useBooking(options) {
 		slotsAttempt
 	]);
 	useEffect(() => {
-		if (primaryServiceId === null) return;
-		if (primaryServiceId in seededNextAvailable) return;
+		if (primaryVisit === null) return;
+		if (primaryVisit in seededNextAvailable) return;
 		let cancelled = false;
 		(async () => {
 			try {
-				const response = await fetch(`${api}/resources?${windowQuery(primaryServiceId, fromTs, toTs)}`);
+				const response = await fetch(`${api}/resources?${windowQuery(primaryVisit, fromTs, toTs)}`);
 				if (!response.ok) throw new Error(`resources ${response.status}`);
 				const body = await response.json();
 				if (cancelled) return;
 				setResources(body.resources ?? []);
 				setResourcesKnown(true);
 				setFetchedNextAvailable({
-					serviceId: primaryServiceId,
+					key: primaryVisit,
 					times: body.nextAvailableTs ?? {}
 				});
 			} catch {
 				if (!cancelled) {
 					setResourcesKnown(true);
 					setFetchedNextAvailable({
-						serviceId: primaryServiceId,
+						key: primaryVisit,
 						times: {}
 					});
 				}
@@ -654,19 +736,24 @@ function useBooking(options) {
 		};
 	}, [
 		api,
-		primaryServiceId,
+		primaryVisit,
 		fromTs,
 		toTs,
 		seededNextAvailable
 	]);
-	/** The stylist half of a «book again» link, once a list for its service has landed. */
+	/**
+	* The stylist half of a «book again» link, once a list for its service has
+	* landed. Compared by VISIT: the link named one service, and a visitor who
+	* has since added a wash to it is asking a different question — the list now
+	* in hand answers the longer visit, not the one the link vouched for.
+	*/
 	useEffect(() => {
 		const pending = pendingStylist.current;
-		if (pending && primaryServiceId !== null && primaryServiceId !== pending.serviceId) {
+		if (pending && primaryVisit !== null && primaryVisit !== pending.serviceId) {
 			pendingStylist.current = null;
 			return;
 		}
-		if (!canFinishStylist(pending, resources, primaryServiceId)) return;
+		if (!canFinishStylist(pending, resources, primaryVisit)) return;
 		pendingStylist.current = null;
 		dispatch({
 			type: "prefill",
@@ -675,7 +762,7 @@ function useBooking(options) {
 		});
 	}, [
 		resources,
-		primaryServiceId,
+		primaryVisit,
 		services
 	]);
 	/** A party link's stylist, once the family has its services and is on step 3. */
@@ -710,35 +797,51 @@ function useBooking(options) {
 			resourceId: null
 		});
 	}, [resources, primaryServiceId]);
-	/** The business's open dates over the window, for ONE service (cutoffs are per service). */
+	/**
+	* The open dates over the window, for the first person's VISIT (cutoffs are
+	* per service, and `visitTailMinutes` assumes the answer was for item 0's
+	* whole visit — see the machine).
+	*
+	* The seed is the SALON's week, which is what «first available» draws. A named
+	* stylist works a different week, so their hours are fetched with `resource_id`
+	* and the seed is not allowed to answer for them — a seeded salon week would
+	* otherwise paint every open day as theirs.
+	*/
 	const [fetchedSchedule, setFetchedSchedule] = useState(null);
 	const [scheduleFailedFor, setScheduleFailedFor] = useState(null);
+	const scheduleKey = primaryVisit === null ? null : state.resourceId === null ? primaryVisit : `${primaryVisit}#${state.resourceId}`;
 	const openDays = useMemo(() => {
-		if (primaryServiceId === null) return null;
-		const seeded = seededSchedule[primaryServiceId];
-		if (seeded) return seeded;
-		return fetchedSchedule?.serviceId === primaryServiceId ? fetchedSchedule.days : null;
+		if (primaryVisit === null || scheduleKey === null) return null;
+		if (fetchedSchedule?.key === scheduleKey) return fetchedSchedule.days;
+		if (state.resourceId === null) return seededSchedule[primaryVisit] ?? null;
+		if (scheduleFailedFor === scheduleKey) return null;
+		return seededSchedule[primaryVisit] ?? (fetchedSchedule?.key === primaryVisit ? fetchedSchedule.days : null);
 	}, [
-		primaryServiceId,
+		primaryVisit,
+		state.resourceId,
+		scheduleKey,
 		seededSchedule,
-		fetchedSchedule
+		fetchedSchedule,
+		scheduleFailedFor
 	]);
 	useEffect(() => {
-		if (primaryServiceId === null) return;
-		if (primaryServiceId in seededSchedule) return;
+		if (primaryVisit === null || scheduleKey === null) return;
+		if (state.resourceId === null && primaryVisit in seededSchedule) return;
 		let cancelled = false;
+		const key = scheduleKey;
+		const resourceId = state.resourceId;
 		(async () => {
 			try {
-				const response = await fetch(`${api}/schedule?${windowQuery(primaryServiceId, fromTs, toTs)}`);
+				const response = await fetch(`${api}/schedule?${windowQuery(primaryVisit, fromTs, toTs, resourceId)}`);
 				if (!response.ok) throw new Error(`schedule ${response.status}`);
 				const body = await response.json();
 				if (cancelled) return;
 				setFetchedSchedule({
-					serviceId: primaryServiceId,
+					key,
 					days: body.days ?? []
 				});
 			} catch {
-				if (!cancelled) setScheduleFailedFor(primaryServiceId);
+				if (!cancelled) setScheduleFailedFor(key);
 			}
 		})();
 		return () => {
@@ -746,10 +849,12 @@ function useBooking(options) {
 		};
 	}, [
 		api,
-		primaryServiceId,
+		primaryVisit,
 		fromTs,
 		toTs,
-		seededSchedule
+		seededSchedule,
+		state.resourceId,
+		scheduleKey
 	]);
 	/** A stylist's display name for an id; `''` from Medal reads as none. */
 	const resolveStylistName = useMemo(() => (resourceId) => {
@@ -768,7 +873,7 @@ function useBooking(options) {
 		if (!resourcesKnown || resources.length === 0) return;
 		if (state.step !== "when" || state.resourceId === null) return;
 		const chosen = resources.find((resource) => resource.id === state.resourceId);
-		if (chosen !== void 0 && state.items.every((item) => chosen.serviceIds.includes(item.service.id))) return;
+		if (chosen !== void 0 && state.items.every((item) => visitServicesOf(item).every((service) => chosen.serviceIds.includes(service.id)))) return;
 		dispatch({
 			type: "pickResource",
 			resourceId: null
@@ -798,9 +903,9 @@ function useBooking(options) {
 		state.partyMode
 	]);
 	const party = wizard.showsPartyMode(state);
-	const haveEveryService = basketServiceIds.every((id) => id in slots);
-	const scheduleSettled = openDays !== null || primaryServiceId !== null && scheduleFailedFor === primaryServiceId;
-	const nextAvailableLoading = party ? !haveEveryService && !slotsFailed : primaryServiceId !== null && !(primaryServiceId in seededNextAvailable) && fetchedNextAvailable?.serviceId !== primaryServiceId;
+	const haveEveryService = basketVisits.every((key) => key in slots);
+	const scheduleSettled = openDays !== null || scheduleKey !== null && scheduleFailedFor === scheduleKey;
+	const nextAvailableLoading = party ? !haveEveryService && !slotsFailed : primaryVisit !== null && !(primaryVisit in seededNextAvailable) && fetchedNextAvailable?.key !== primaryVisit;
 	/** The basket's openings, unfiltered — the parallel search needs two stylists. */
 	const basketSlots = useMemo(() => {
 		const out = {};
@@ -836,12 +941,12 @@ function useBooking(options) {
 		state.partyMode
 	]);
 	const singleSlots = useMemo(() => {
-		if (party || primaryServiceId === null) return [];
-		const list = slots[primaryServiceId] ?? [];
+		if (party || primaryVisit === null) return [];
+		const list = slots[primaryVisit] ?? [];
 		return state.resourceId === null ? [...list] : onlyResource(list, state.resourceId);
 	}, [
 		party,
-		primaryServiceId,
+		primaryVisit,
 		slots,
 		state.resourceId
 	]);
@@ -917,7 +1022,15 @@ function useBooking(options) {
 			return;
 		}
 		const resourceIds = wizard.itemResourceIds(state);
-		await send(submission, {
+		const body = withExtraServices(submission, state.items);
+		if (body === null) {
+			dispatch({
+				type: "submitFailed",
+				error: "invalidInput"
+			});
+			return;
+		}
+		await send(body, {
 			items: state.items,
 			startTs: state.startTs ?? 0,
 			partyMode: state.partyMode,
@@ -971,12 +1084,12 @@ function useBooking(options) {
 				}
 				if (payload?.error === "slotTaken") {
 					setTakenSlotTs(submitted.startTs);
-					const lost = new Set(submitted.items.map((item) => item.service.id));
+					const lost = new Set(submitted.items.map((item) => visitKey(item)));
 					const fresh = freshSlotsOf(payload?.freshSlots, lost);
 					setSlots((previous) => {
 						const next = { ...previous };
-						for (const serviceId of lost) if (serviceId in fresh) next[serviceId] = fresh[serviceId];
-						else delete next[serviceId];
+						for (const key of lost) if (key in fresh) next[key] = fresh[key];
+						else delete next[key];
 						return next;
 					});
 					const canSeed = resources.length > 0;
@@ -984,7 +1097,7 @@ function useBooking(options) {
 						...Object.fromEntries(Object.entries(previous).filter(([id]) => !lost.has(id))),
 						...canSeed ? Object.fromEntries(Object.entries(fresh).map(([id, list]) => [id, firstOpeningPerResource(list)])) : {}
 					}));
-					setFetchedNextAvailable((previous) => previous !== null && lost.has(previous.serviceId) ? null : previous);
+					setFetchedNextAvailable((previous) => previous !== null && lost.has(previous.key) ? null : previous);
 					kit.attempts.clearAttempt();
 					dispatch({ type: "slotTaken" });
 					return;
@@ -1076,6 +1189,32 @@ function useBooking(options) {
 			resourceServiceIds: chosenStylistServiceIds
 		});
 	}
+	/**
+	* The multi-select card: person `index` gains `service`, or loses it if they
+	* have it. Never moves the visitor — they say when their list is done with
+	* `continueFromService`. The named stylist's services ride along as for
+	* `pickServiceFor`, so a stylist who cannot do the longer visit is released.
+	*/
+	function toggleServiceFor(index, service) {
+		if (deepLinkPending.current) {
+			deepLinkPending.current = false;
+			partyStylist.current = deepLink.stylist;
+		}
+		dispatch({
+			type: "toggleServiceFor",
+			index,
+			service,
+			resourceServiceIds: chosenStylistServiceIds
+		});
+	}
+	/** «Neste» under a multi-select card: on to the hour once everybody has a service. */
+	function continueFromService() {
+		if (state.step !== "service" || !wizard.canAdvance(state)) return;
+		dispatch({
+			type: "goToStep",
+			step: "when"
+		});
+	}
 	function pickResource(resourceId) {
 		setStylistNotice(null);
 		dispatch({
@@ -1180,6 +1319,8 @@ function useBooking(options) {
 		},
 		pickService,
 		pickServiceFor,
+		toggleServiceFor,
+		continueFromService,
 		pickResource,
 		pickSlot,
 		pickPartySlot,