@riverbankcms/sdk 0.143.0 → 0.145.0

package/dist/client/{bookingForm-C0vk7pgS.mjs → bookingForm-BUaQ3S03.mjs}

@@ -1,18 +1,59 @@
 "use client";
-import { C as unsafeAsPassId, b as unsafeAsCustomerPassId, v as unsafeAsAppointmentResourceId, x as unsafeAsFormId, y as unsafeAsAppointmentServiceId } from "./colorStyles-3013aRAY.mjs";
-import { a as buildBookingPaymentSelectionViewModel, i as usePolling, n as StepIndicator, r as SpinnerNode, t as BookingConsentAgreement } from "./BookingConsentAgreement-BoCtvzzu.mjs";
-import { At as resolveSelectedAppointmentConsent, Bt as reportWorkflowError, Ct as prepareBookingSubmission, Dt as resolveDefaultBookingServiceId, Et as resolveBookingSiteId, Ft as assertNever, Gt as addLocalScheduleDays, It as clearWorkflowFeedback, Lt as err, Mt as isBookingRequirementConsentFieldId, Ot as toSelectedCollectionOptionKind, St as parseBookingCurrencyInputToCents, Tt as resolveBookingPaymentStep, Vt as reportWorkflowSuccess, Yt as formatBookingInstant, Zt as formatLocalScheduleDate, _t as formatBookingSubmissionPreparationError, bt as getBookingSuccessMessage, en as parseBookingLocalDate, ft as themeButtonClassName, gt as formatBookingCentsAsCurrencyInput, ht as deriveBookingFormViewState, jt as BOOKING_FORM_DATA_RESERVED_KEYS, kt as projectSelectedAppointmentConsentIntoForm, mt as logger, pn as formatCurrencyAmount, t as defineIslandPropsDecoder, tn as resolveBookingTimeZoneId, vt as getBookingRedirectStateFromLocation, wt as resolveAppointmentCheckoutVerificationState, xt as isBookingServiceSlidingAmountInRange, yt as getBookingServiceSlidingScale, zt as okWith } from "./propsDecoder-CIZ-hbIG.mjs";
-import { n as useBlockApi, t as BlockApiProvider } from "./context-BOimxE3U.mjs";
+import { C as unsafeAsPassId, b as unsafeAsCustomerPassId, v as unsafeAsAppointmentResourceId, x as unsafeAsFormId, y as unsafeAsAppointmentServiceId } from "./colorStyles-CuJBiS-1.mjs";
+import { i as buildBookingPaymentSelectionViewModel, n as StepIndicator, r as usePolling, t as BookingConsentAgreement } from "./BookingConsentAgreement-DlVOmpW4.mjs";
+import { $t as formatBookingInstant, At as resolveBookingSiteId, Bt as clearWorkflowFeedback, Ct as getBookingServiceSlidingScale, Dt as prepareBookingSubmission, Et as parseBookingCurrencyInputToCents, Ft as BOOKING_FORM_DATA_RESERVED_KEYS, Gt as reportWorkflowSuccess, It as isBookingRequirementConsentFieldId, Mt as toSelectedCollectionOptionKind, Nt as projectSelectedAppointmentConsentIntoForm, Ot as resolveAppointmentCheckoutVerificationState, Pt as resolveSelectedAppointmentConsent, St as getBookingRedirectStateFromLocation, Tt as isBookingServiceSlidingAmountInRange, Ut as okWith, Vt as err, Wt as reportWorkflowError, Yt as addLocalScheduleDays, _n as formatCurrencyAmount, an as resolveBookingTimeZoneId, bt as formatBookingCentsAsCurrencyInput, in as parseBookingLocalDate, jt as resolveDefaultBookingServiceId, kt as resolveBookingPaymentStep, t as defineIslandPropsDecoder, tn as formatLocalScheduleDate, vt as logger, wt as getBookingSuccessMessage, xt as formatBookingSubmissionPreparationError, yt as deriveBookingFormViewState, zt as assertNever } from "./propsDecoder-C3TP_z4x.mjs";
+import { n as useBlockApi, t as BlockApiProvider } from "./context-BFeY_Wbm.mjs";
 import { n as isSpamProtectionEnabled, r as AltchaWidget, t as getChallengeUrl } from "./src-B833rYRr.mjs";
-import { a as CheckIcon, i as StateIcon, n as useDiscountCodeUi, r as TerminalPanel, t as scrollToBlock } from "./scrollToBlock-BPZl0gPZ.mjs";
-import { t as DiscountCodeDisclosure } from "./DiscountCodeDisclosure-B5S30nZk.mjs";
+import { a as CheckIcon, i as StateIcon, n as useDiscountCodeUi, r as TerminalPanel, t as scrollToBlock } from "./scrollToBlock-CWs8EIdo.mjs";
+import { t as DiscountCodeDisclosure } from "./DiscountCodeDisclosure-T9q623PQ.mjs";
+import { i as SpinnerNode, t as ThemedButton } from "./ThemedButton-LAJTNrS8.mjs";
 import { t as FeedbackMessage } from "./FeedbackMessage-CtLvvS_d.mjs";
 import { n as getFieldValidationControlProps, t as FieldValidationMessage } from "./FieldValidationMessage-AYanWFb-.mjs";
-import { t as buildCheckoutReturnUrls } from "./checkoutUrls-FL6lRkrt.mjs";
+import { t as buildCheckoutReturnUrls } from "./checkoutUrls-CW3-78uu.mjs";
 import { t as mountReactIsland } from "./reactMount-SY8AVRof.mjs";
-import { t as buildRouteIslandApiConfig } from "./routeIslandApiConfig-UNsfPcYq.mjs";
+import { t as buildRouteIslandApiConfig } from "./routeIslandApiConfig-DzN1W0sq.mjs";
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../core/src/appointment-service-categories.ts
+/**
+* Groups services under their categories.
+*
+* A service whose `categoryId` names no category in `categories` lands in
+* Other. The composite foreign key keeps that from happening with stored data,
+* so this is only the total, safe answer for a caller holding a stale list.
+*/
+function layoutServicesByCategory(categories, services, options) {
+	if (categories.length === 0) return {
+		kind: "uncategorized-site",
+		services: [...services]
+	};
+	const buckets = new Map(categories.map((category) => [category.id, []]));
+	const other = [];
+	for (const service of services) {
+		const bucket = service.categoryId === null ? void 0 : buckets.get(service.categoryId);
+		if (bucket !== void 0) bucket.push(service);
+		else other.push(service);
+	}
+	const groups = [];
+	for (const category of categories) {
+		const groupServices = buckets.get(category.id) ?? [];
+		if (groupServices.length === 0 && !options.keepEmptyGroups) continue;
+		groups.push({
+			category,
+			services: groupServices
+		});
+	}
+	if (groups.length === 0 && !options.keepEmptyGroups) return {
+		kind: "uncategorized-site",
+		services: other
+	};
+	return {
+		kind: "categorized-site",
+		groups,
+		other
+	};
+}
+//#endregion
 //#region ../blocks/src/system/runtime/components/booking/SuccessMessage.tsx
 const SuccessMessage = ({ message, resourceName, className }) => {
 	return /* @__PURE__ */ jsx(TerminalPanel, {
@@ -1896,6 +1937,7 @@ function useHeadlessBookingFlow(options) {
 		data,
 		services: {
 			items: options.services,
+			categories: readServiceCategories(options),
 			selected: selectedService,
 			defaultServiceId,
 			requiresSelection: Boolean(options.requiresServiceSelection)
@@ -1960,6 +2002,10 @@ function useHeadlessBookingFlow(options) {
 		actions
 	};
 }
+const EMPTY_SERVICE_CATEGORIES = [];
+function readServiceCategories(options) {
+	return options.serviceCategories ?? EMPTY_SERVICE_CATEGORIES;
+}
 function navigateToCheckout(checkoutUrl) {
 	window.location.href = checkoutUrl;
 }
@@ -2181,10 +2227,97 @@ const TimeSlotSelector = ({ value, onChange, slots, isLoading, timezone, require
 	});
 };
 //#endregion
-//#region ../blocks/src/system/runtime/nodes/booking-form.default-ui.tsx
+//#region ../blocks/src/system/runtime/nodes/booking-form.service-choices.tsx
 function optionCardClassName(isSelected) {
 	return `rb-option-card${isSelected ? " rb-option-card--selected" : ""}`;
 }
+function SelectedCheck() {
+	return /* @__PURE__ */ jsx("div", {
+		className: "rb-option-check",
+		children: /* @__PURE__ */ jsx(CheckIcon, {})
+	});
+}
+/**
+* The service buttons. A site with no categories keeps its single grid; a
+* categorised site gets a heading per category, then "Other", above the same
+* grid (issue 1403). Empty categories are skipped, and there are no intros
+* here, to keep the step compact.
+*/
+function DefaultServiceChoices({ booking }) {
+	const layout = layoutServicesByCategory(booking.services.categories, booking.services.items.map((service) => ({
+		service,
+		categoryId: service.categoryId ?? null
+	})), { keepEmptyGroups: false });
+	switch (layout.kind) {
+		case "uncategorized-site": return /* @__PURE__ */ jsxs("div", {
+			className: "rb-reg-stack rb-reg-stack--sm",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "ab-subtitle",
+				children: "Service"
+			}), /* @__PURE__ */ jsx(ServiceChoiceGrid, {
+				booking,
+				choices: layout.services
+			})]
+		});
+		case "categorized-site": return /* @__PURE__ */ jsx("div", {
+			className: "rb-reg-stack",
+			children: [...layout.groups.map((group) => ({
+				key: group.category.id,
+				heading: group.category.name,
+				choices: group.services
+			})), ...layout.other.length > 0 ? [{
+				key: "other",
+				heading: "Other",
+				choices: layout.other
+			}] : []].map((group) => /* @__PURE__ */ jsxs("div", {
+				className: "rb-reg-stack rb-reg-stack--sm",
+				"data-booking-service-group": group.key,
+				children: [/* @__PURE__ */ jsx("h3", {
+					className: "ab-subtitle",
+					children: group.heading
+				}), /* @__PURE__ */ jsx(ServiceChoiceGrid, {
+					booking,
+					choices: group.choices
+				})]
+			}, group.key))
+		});
+		default: return assertNever(layout);
+	}
+}
+function ServiceChoiceGrid({ booking, choices }) {
+	const selectedServiceId = booking.services.selected?.id;
+	return /* @__PURE__ */ jsx("div", {
+		className: "rb-reg-grid",
+		children: choices.map(({ service }) => {
+			const isSelected = selectedServiceId === service.id;
+			return /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => booking.actions.selectService(service.id),
+				className: optionCardClassName(isSelected),
+				"aria-pressed": isSelected,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "rb-flex-1",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "ab-subtitle",
+							children: service.title
+						}),
+						service.description ? /* @__PURE__ */ jsx("div", {
+							className: "ab-text rb-on-surface--muted",
+							children: service.description
+						}) : null,
+						service.durationMinutes ? /* @__PURE__ */ jsxs("div", {
+							className: "ab-text rb-on-surface--muted",
+							children: [service.durationMinutes, " minutes"]
+						}) : null
+					]
+				}), isSelected ? /* @__PURE__ */ jsx(SelectedCheck, {}) : null]
+			}, service.id);
+		})
+	});
+}
+//#endregion
+//#region ../blocks/src/system/runtime/nodes/booking-form.default-ui.tsx
 function formatBookingAmount(amount, currency) {
 	return formatCurrencyAmount(amount, currency, { decimals: "auto" });
 }
@@ -2228,30 +2361,25 @@ function HeadlessBookingDefaultForm({ booking, onSubmit }) {
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "rb-wizard-actions",
-				children: [!isFirstStep ? /* @__PURE__ */ jsx("button", {
+				children: [!isFirstStep ? /* @__PURE__ */ jsx(ThemedButton, {
 					type: "button",
 					onClick: booking.actions.back,
-					className: themeButtonClassName({
-						variant: "outline",
-						size: "md"
-					}),
-					children: "Back"
-				}) : null, /* @__PURE__ */ jsx("button", {
+					variant: "outline",
+					size: "md",
+					label: "Back"
+				}) : null, /* @__PURE__ */ jsx(ThemedButton, {
 					type: "button",
 					onClick: () => {
 						handlePrimaryAction();
 					},
 					disabled: isSubmitting,
-					className: themeButtonClassName({
-						variant: "primary",
-						size: "md"
-					}),
-					children: isSubmitting ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerNode, {
-						size: "sm",
-						color: "inherit",
-						className: "rb-mr-2",
+					variant: "primary",
+					size: "md",
+					label: isLastStep ? "Complete" : "Continue",
+					pending: isSubmitting ? {
+						label: "Submitting...",
 						srLabel: "Submitting"
-					}), "Submitting..."] }) : isLastStep ? "Complete" : "Continue"
+					} : void 0
 				})]
 			}),
 			/* @__PURE__ */ jsx(DefaultBookingDiscount, { booking }),
@@ -2280,7 +2408,6 @@ function DefaultBookingStepContent({ booking, errorSummaryId }) {
 function DefaultServiceSelectionStep({ booking }) {
 	const services = booking.services.items;
 	const resources = booking.resources.items;
-	const selectedServiceId = booking.services.selected?.id;
 	const selectedResourceId = booking.resources.selectedResourceId;
 	const showServiceSelect = booking.services.requiresSelection || services.length > 1;
 	const showResourceSelect = booking.resources.requiresSelection || resources.length > 1;
@@ -2295,41 +2422,7 @@ function DefaultServiceSelectionStep({ booking }) {
 				className: "ab-text rb-on-surface--muted",
 				children: "Choose the service you'd like to book"
 			})] }),
-			showServiceSelect ? /* @__PURE__ */ jsxs("div", {
-				className: "rb-reg-stack rb-reg-stack--sm",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "ab-subtitle",
-					children: "Service"
-				}), /* @__PURE__ */ jsx("div", {
-					className: "rb-reg-grid",
-					children: services.map((service) => {
-						const isSelected = selectedServiceId === service.id;
-						return /* @__PURE__ */ jsxs("button", {
-							type: "button",
-							onClick: () => booking.actions.selectService(service.id),
-							className: optionCardClassName(isSelected),
-							"aria-pressed": isSelected,
-							children: [/* @__PURE__ */ jsxs("div", {
-								className: "rb-flex-1",
-								children: [
-									/* @__PURE__ */ jsx("div", {
-										className: "ab-subtitle",
-										children: service.title
-									}),
-									service.description ? /* @__PURE__ */ jsx("div", {
-										className: "ab-text rb-on-surface--muted",
-										children: service.description
-									}) : null,
-									service.durationMinutes ? /* @__PURE__ */ jsxs("div", {
-										className: "ab-text rb-on-surface--muted",
-										children: [service.durationMinutes, " minutes"]
-									}) : null
-								]
-							}), isSelected ? /* @__PURE__ */ jsx(SelectedCheck, {}) : null]
-						}, service.id);
-					})
-				})]
-			}) : null,
+			showServiceSelect ? /* @__PURE__ */ jsx(DefaultServiceChoices, { booking }) : null,
 			booking.resources.state.tag === "loading" ? /* @__PURE__ */ jsxs("div", {
 				className: "ab-center",
 				children: [/* @__PURE__ */ jsx(SpinnerNode, {
@@ -2879,14 +2972,12 @@ function DefaultBookingFeedback({ booking }) {
 		children: [/* @__PURE__ */ jsx("p", {
 			className: "ab-text",
 			children: booking.feedback.message
-		}), /* @__PURE__ */ jsx("button", {
+		}), /* @__PURE__ */ jsx(ThemedButton, {
 			type: "button",
-			className: themeButtonClassName({
-				variant: "secondary",
-				size: "sm"
-			}),
-			onClick: booking.actions.clearFeedback,
-			children: "Dismiss"
+			variant: "secondary",
+			size: "sm",
+			label: "Dismiss",
+			onClick: booking.actions.clearFeedback
 		})]
 	});
 }
@@ -2910,12 +3001,6 @@ function DefaultBookingErrorSummary({ errors, id }) {
 		children: [errors.formError ? /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("strong", { children: errors.formError }) }) : null, Object.entries(errors.fieldErrors).map(([key, message]) => /* @__PURE__ */ jsx("p", { children: message }, key))]
 	});
 }
-function SelectedCheck() {
-	return /* @__PURE__ */ jsx("div", {
-		className: "rb-option-check",
-		children: /* @__PURE__ */ jsx(CheckIcon, {})
-	});
-}
 //#endregion
 //#region ../blocks/src/system/runtime/nodes/booking-form.client.tsx
 const PORTAL_REBOOK_QUERY_PARAM = "rebook";
@@ -2968,6 +3053,7 @@ const BookingFormClient = ({ siteId: siteIdProp, render }) => {
 		formId: render.hydration.formId ?? form?.id ?? "booking-form",
 		form,
 		services,
+		serviceCategories: render.hydration.serviceCategories,
 		initialServiceId,
 		initialResourceId,
 		initialData: render.hydration.initialData ?? void 0,