@riverbankcms/sdk 0.144.0 → 0.146.0

package/dist/client/{bookingForm-iJ_nCsNF.mjs → bookingForm-AMr-s5vw.mjs}

@@ -1,19 +1,60 @@
 "use client";
 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-DoAILrkN.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-DPXtCZWP.mjs";
-import { n as useBlockApi, t as BlockApiProvider } from "./context-CDLCfDep.mjs";
+import { i as buildBookingPaymentSelectionViewModel, n as StepIndicator, r as usePolling, t as BookingConsentAgreement } from "./BookingConsentAgreement-BQKL045f.mjs";
+import { At as resolveAppointmentCheckoutVerificationState, Ct as formatBookingSubmissionPreparationError, Dt as isBookingServiceSlidingAmountInRange, Et as getBookingSuccessMessage, Ft as projectSelectedAppointmentConsentIntoForm, Gt as okWith, Ht as clearWorkflowFeedback, It as resolveSelectedAppointmentConsent, Kt as reportWorkflowError, Lt as BOOKING_FORM_DATA_RESERVED_KEYS, Mt as resolveBookingSiteId, Nt as resolveDefaultBookingServiceId, Ot as parseBookingCurrencyInputToCents, Pt as toSelectedCollectionOptionKind, Rt as isBookingRequirementConsentFieldId, St as formatBookingCentsAsCurrencyInput, Tt as getBookingServiceSlidingScale, Ut as err, Vt as assertNever, Zt as addLocalScheduleDays, bt as logger, jt as resolveBookingPaymentStep, kt as prepareBookingSubmission, on as parseBookingLocalDate, qt as reportWorkflowSuccess, rn as formatLocalScheduleDate, sn as resolveBookingTimeZoneId, t as defineIslandPropsDecoder, tn as formatBookingInstant, wt as getBookingRedirectStateFromLocation, xt as deriveBookingFormViewState, yn as formatCurrencyAmount } from "./propsDecoder-Dcgsncxb.mjs";
+import { n as useBlockApi, t as BlockApiProvider } from "./context-Bc8T6pCe.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-0-C3DVhK.mjs";
-import { t as DiscountCodeDisclosure } from "./DiscountCodeDisclosure-X528hUTf.mjs";
-import { i as SpinnerNode, t as ThemedButton } from "./ThemedButton-BwNFVwi4.mjs";
+import { a as CheckIcon, i as StateIcon, n as useDiscountCodeUi, r as TerminalPanel, t as scrollToBlock } from "./scrollToBlock-BNgaEUpo.mjs";
+import { t as DiscountCodeDisclosure } from "./DiscountCodeDisclosure-CsOtjFY7.mjs";
+import { i as SpinnerNode, t as ThemedButton } from "./ThemedButton-CE5KYT6z.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-CW3-78uu.mjs";
+import { t as CheckboxChoice } from "./CheckboxChoice--W2n6yKs.mjs";
 import { t as mountReactIsland } from "./reactMount-SY8AVRof.mjs";
-import { t as buildRouteIslandApiConfig } from "./routeIslandApiConfig-NGYiUWXu.mjs";
+import { t as buildRouteIslandApiConfig } from "./routeIslandApiConfig-CWLP7wu3.mjs";
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
 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, {
@@ -1897,6 +1938,7 @@ function useHeadlessBookingFlow(options) {
 		data,
 		services: {
 			items: options.services,
+			categories: readServiceCategories(options),
 			selected: selectedService,
 			defaultServiceId,
 			requiresSelection: Boolean(options.requiresServiceSelection)
@@ -1961,6 +2003,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;
 }
@@ -2182,10 +2228,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" });
 }
@@ -2276,7 +2409,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;
@@ -2291,41 +2423,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, {
@@ -2715,7 +2813,7 @@ function DefaultFieldInput({ describedBy, error, errorId, field, onBlur, onChang
 		case "radio": return /* @__PURE__ */ jsx("div", {
 			className: "rb-space-y-2",
 			children: field.field.options?.map((option) => /* @__PURE__ */ jsxs("label", {
-				className: "rb-flex rb-items-center rb-gap-2 rb-cursor-pointer",
+				className: "form-check",
 				children: [/* @__PURE__ */ jsx("input", {
 					type: "radio",
 					name: field.id,
@@ -2727,7 +2825,7 @@ function DefaultFieldInput({ describedBy, error, errorId, field, onBlur, onChang
 					...validationProps,
 					className: "form-radio"
 				}), /* @__PURE__ */ jsx("span", {
-					className: "rb-caption",
+					className: "form-check-label",
 					children: option.label
 				})]
 			}, option.value))
@@ -2737,47 +2835,20 @@ function DefaultFieldInput({ describedBy, error, errorId, field, onBlur, onChang
 				const checkedValues = toStringArray(value);
 				return /* @__PURE__ */ jsx("div", {
 					className: "rb-space-y-2",
-					children: field.field.options.map((option) => /* @__PURE__ */ jsxs("label", {
-						className: "rb-flex rb-items-center rb-gap-2 rb-cursor-pointer",
-						children: [/* @__PURE__ */ jsx("input", {
-							type: "checkbox",
-							name: field.id,
-							value: option.value,
-							checked: checkedValues.includes(option.value),
-							onChange: (event) => {
-								onChange(event.target.checked ? [...checkedValues, option.value] : checkedValues.filter((item) => item !== option.value));
-							},
-							onBlur,
-							...validationProps,
-							className: "form-checkbox"
-						}), /* @__PURE__ */ jsx("span", {
-							className: "rb-caption",
-							children: option.label
-						})]
+					children: field.field.options.map((option) => /* @__PURE__ */ jsx(CheckboxChoice, {
+						name: field.id,
+						value: option.value,
+						checked: checkedValues.includes(option.value),
+						onChange: (event) => {
+							onChange(event.target.checked ? [...checkedValues, option.value] : checkedValues.filter((item) => item !== option.value));
+						},
+						onBlur,
+						...validationProps,
+						label: option.label
 					}, option.value))
 				});
 			}
-			return /* @__PURE__ */ jsxs("label", {
-				className: "rb-flex rb-items-center rb-gap-2 rb-cursor-pointer",
-				children: [/* @__PURE__ */ jsx("input", {
-					type: "checkbox",
-					id: field.inputId,
-					name: field.id,
-					checked: Boolean(value),
-					onChange: (event) => onChange(event.target.checked),
-					onBlur,
-					required: field.required,
-					...validationProps,
-					className: "form-checkbox"
-				}), /* @__PURE__ */ jsx("span", {
-					className: "rb-caption",
-					children: field.field.placeholder || field.label
-				})]
-			});
-		case "booking_requirement_consent": return /* @__PURE__ */ jsxs("label", {
-			className: "rb-flex rb-items-start rb-gap-2 rb-cursor-pointer",
-			children: [/* @__PURE__ */ jsx("input", {
-				type: "checkbox",
+			return /* @__PURE__ */ jsx(CheckboxChoice, {
 				id: field.inputId,
 				name: field.id,
 				checked: Boolean(value),
@@ -2785,11 +2856,18 @@ function DefaultFieldInput({ describedBy, error, errorId, field, onBlur, onChang
 				onBlur,
 				required: field.required,
 				...validationProps,
-				className: "form-checkbox rb-mt-0.5"
-			}), /* @__PURE__ */ jsx("span", {
-				className: "rb-caption",
-				children: field.field.checkboxLabel
-			})]
+				label: field.field.placeholder || field.label
+			});
+		case "booking_requirement_consent": return /* @__PURE__ */ jsx(CheckboxChoice, {
+			id: field.inputId,
+			name: field.id,
+			checked: Boolean(value),
+			onChange: (event) => onChange(event.target.checked),
+			onBlur,
+			required: field.required,
+			...validationProps,
+			label: field.field.checkboxLabel,
+			presentation: "tile"
 		});
 		case "number": return /* @__PURE__ */ jsx("input", {
 			...commonProps,
@@ -2904,12 +2982,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";
@@ -2962,6 +3034,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,