@riverbankcms/sdk 0.144.0 → 0.145.0

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

@@ -1,19 +1,59 @@
 "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-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-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-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-CW3-78uu.mjs";
 import { t as mountReactIsland } from "./reactMount-SY8AVRof.mjs";
-import { t as buildRouteIslandApiConfig } from "./routeIslandApiConfig-NGYiUWXu.mjs";
+import { t as buildRouteIslandApiConfig } from "./routeIslandApiConfig-DzN1W0sq.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 +1937,7 @@ function useHeadlessBookingFlow(options) {
 		data,
 		services: {
 			items: options.services,
+			categories: readServiceCategories(options),
 			selected: selectedService,
 			defaultServiceId,
 			requiresSelection: Boolean(options.requiresServiceSelection)
@@ -1961,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;
 }
@@ -2182,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" });
 }
@@ -2276,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;
@@ -2291,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, {
@@ -2904,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";
@@ -2962,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,

package/dist/client/bookings.mjs

@@ -2786,7 +2786,7 @@ function parseEventPageSurfaceDestinationMode(value) {
 	return value === "cms-managed" || value === "system-managed" ? value : void 0;
 }
 function parseEventPageSurfaceSubject(value) {
-	if (!isRecord$6(value)) return err$1({ kind: "notObject" });
+	if (!isRecord$7(value)) return err$1({ kind: "notObject" });
 	switch (value.kind) {
 		case "eventSeries": {
 			const eventSeriesId = parseEventSeriesId(value.eventSeriesId);
@@ -2841,7 +2841,7 @@ function parseEventSeriesIdList(values) {
 	}
 	return ok$1(parsed);
 }
-function isRecord$6(value) {
+function isRecord$7(value) {
 	return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 //#endregion
@@ -3122,6 +3122,46 @@ function addLocalScheduleDays(date, days) {
 		day: utcDate.getUTCDate()
 	};
 }
+//#endregion
+//#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
+	};
+}
 function sessionStartMs(session) {
 	return Date.parse(session.startsAt);
 }
@@ -6777,16 +6817,18 @@ const themeV2RuntimeStyleFieldNames = [
 	"_frameStyles",
 	"_sectionStyles",
 	"_containerStyles",
-	"_cardStyles",
-	"_transitionStyles",
-	"styleGroup"
+	"_cardStyles"
 ];
 const themeV2BlockSpecificRawStyleFieldNames = [
 	"_contentCardStyles",
 	"_heroLayoutStyles",
 	"_textCardStyles"
 ];
-const themeV2NormalEditorRawStyleFieldNames = [...themeV2RuntimeStyleFieldNames, ...themeV2BlockSpecificRawStyleFieldNames];
+const themeV2NormalEditorRawStyleFieldNames = [
+	...themeV2RuntimeStyleFieldNames,
+	...themeV2BlockSpecificRawStyleFieldNames,
+	"styleGroup"
+];
 new Set(themeV2NormalEditorRawStyleFieldNames);
 [...themeV2RuntimeStyleFieldNames, ...themeV2BlockSpecificRawStyleFieldNames];
 const pageDesignEditorBackgroundOverrideOwner = "page-design-editor";
@@ -6975,7 +7017,7 @@ const boxBackgroundSchema = z.discriminatedUnion("type", [
 	})
 ]);
 function normalizeAuthoringOpacity(value) {
-	if (!isRecord$5(value)) return value;
+	if (!isRecord$6(value)) return value;
 	return {
 		...value,
 		opacity: normalizeOpacity(value.opacity)
@@ -6984,7 +7026,7 @@ function normalizeAuthoringOpacity(value) {
 function normalizeOpacity(value) {
 	return typeof value === "number" && value > 1 && value <= 100 ? value / 100 : value;
 }
-function isRecord$5(value) {
+function isRecord$6(value) {
 	return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 //#endregion
@@ -8666,7 +8708,7 @@ var BlockApiError = class extends Error {
 		this.name = "BlockApiError";
 	}
 };
-function isRecord$4(value) {
+function isRecord$5(value) {
 	return typeof value === "object" && value !== null;
 }
 function isJsonResponseContentType(contentType) {
@@ -8690,15 +8732,15 @@ async function parseJsonBody(response) {
 	}
 }
 function isFieldError(value) {
-	return isRecord$4(value) && !Array.isArray(value) && typeof value.field === "string" && typeof value.code === "string" && typeof value.message === "string";
+	return isRecord$5(value) && !Array.isArray(value) && typeof value.field === "string" && typeof value.code === "string" && typeof value.message === "string";
 }
 function fieldErrorsFromUnknown(value) {
 	if (!Array.isArray(value)) return void 0;
 	return value.every(isFieldError) ? value : void 0;
 }
 function getBlockApiErrorDetails(data) {
-	if (!isRecord$4(data)) return {};
-	const nestedError = isRecord$4(data.error) ? data.error : void 0;
+	if (!isRecord$5(data)) return {};
+	const nestedError = isRecord$5(data.error) ? data.error : void 0;
 	const message = typeof nestedError?.message === "string" ? nestedError.message : typeof data.message === "string" ? data.message : void 0;
 	const code = typeof nestedError?.code === "string" ? nestedError.code : typeof data.code === "string" ? data.code : void 0;
 	const fieldErrors = fieldErrorsFromUnknown(nestedError?.fieldErrors) ?? fieldErrorsFromUnknown(data.fieldErrors);
@@ -9669,12 +9711,12 @@ function resolveBookingSiteId(siteId, form) {
 	return siteId || form?.siteId || "";
 }
 function normalizeBookingFormConfig(form) {
-	if (!isRecord$3(form)) return null;
+	if (!isRecord$4(form)) return null;
 	const id = readNonEmptyString(form.id);
 	const name = readNonEmptyString(form.name);
 	if (!id || !name) return null;
-	const schemaSource = isRecord$3(form.schema) ? form.schema : isRecord$3(form.schemaJson) ? form.schemaJson : null;
-	const settingsSource = isRecord$3(form.settings) ? form.settings : isRecord$3(form.settingsJson) ? form.settingsJson : null;
+	const schemaSource = isRecord$4(form.schema) ? form.schema : isRecord$4(form.schemaJson) ? form.schemaJson : null;
+	const settingsSource = isRecord$4(form.settings) ? form.settings : isRecord$4(form.settingsJson) ? form.settingsJson : null;
 	return {
 		id,
 		name,
@@ -9694,8 +9736,8 @@ function normalizeBookingServices(services) {
 	};
 	if (!services) return [];
 	if (Array.isArray(services)) return services.filter(isBookingFormService).map(normalizeService);
-	if (isRecord$3(services) && "services" in services) return Array.isArray(services.services) ? services.services.filter(isBookingFormService).map(normalizeService) : [];
-	return isRecord$3(services) ? Object.values(services).filter(isBookingFormService).map(normalizeService) : [];
+	if (isRecord$4(services) && "services" in services) return Array.isArray(services.services) ? services.services.filter(isBookingFormService).map(normalizeService) : [];
+	return isRecord$4(services) ? Object.values(services).filter(isBookingFormService).map(normalizeService) : [];
 }
 function normalizeBookingSchema(value) {
 	if (!value) return void 0;
@@ -9706,7 +9748,7 @@ function normalizeBookingSchema(value) {
 	};
 }
 function readBookingFormField(value) {
-	if (!isRecord$3(value)) return null;
+	if (!isRecord$4(value)) return null;
 	const id = readNonEmptyString(value.id);
 	const label = readNonEmptyString(value.label);
 	const type = readBookingFieldType(value.type);
@@ -9749,7 +9791,7 @@ function readBookingFieldOptions(value) {
 	return options.length > 0 ? options : void 0;
 }
 function readBookingFieldOption(value) {
-	if (!isRecord$3(value)) return null;
+	if (!isRecord$4(value)) return null;
 	const optionValue = readNonEmptyString(value.value);
 	const label = readNonEmptyString(value.label);
 	return optionValue && label ? {
@@ -9769,7 +9811,7 @@ function normalizeBookingSettings(value) {
 	};
 }
 function isBookingFormService(value) {
-	return isRecord$3(value) && typeof value.id === "string" && typeof value.siteId === "string" && typeof value.title === "string" && (value.consent === void 0 || blockBookingConsentSchema.safeParse(value.consent).success);
+	return isRecord$4(value) && typeof value.id === "string" && typeof value.siteId === "string" && typeof value.title === "string" && (value.consent === void 0 || blockBookingConsentSchema.safeParse(value.consent).success);
 }
 function collectBookingCustomFields(data) {
 	const customFields = {};
@@ -9819,7 +9861,7 @@ function readStringArray(value) {
 	const strings = value.filter((item) => typeof item === "string");
 	return strings.length > 0 ? strings : void 0;
 }
-function isRecord$3(value) {
+function isRecord$4(value) {
 	return typeof value === "object" && value !== null;
 }
 function getBookingServicePaymentSelectionMode(service) {
@@ -11078,6 +11120,38 @@ function formatScheduleDate(isoString, locale) {
 	return new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(date);
 }
 //#endregion
+//#region ../blocks/src/system/runtime/nodes/booking-form.service-categories.ts
+function isRecord$3(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function readCategory(value) {
+	if (!isRecord$3(value)) return [];
+	const { id, name, description } = value;
+	if (typeof id !== "string" || id.trim() === "" || typeof name !== "string") return [];
+	return [{
+		id,
+		name,
+		description: typeof description === "string" ? description : null
+	}];
+}
+/**
+* The ordered service categories carried by a catalogue-shaped services
+* source (`{ services, categories }`). Every other shape has none, which
+* reads as a site without categories. Order is preserved: the database owns
+* it.
+*/
+function normalizeBookingServiceCategories(services) {
+	if (!isRecord$3(services) || !Array.isArray(services.categories)) return [];
+	return services.categories.flatMap(readCategory);
+}
+/**
+* The ordered service categories a headless booking override was given in
+* its loader data (`data.services`).
+*/
+function readOverrideServiceCategories(data) {
+	return isRecord$3(data) ? normalizeBookingServiceCategories(data.services) : [];
+}
+//#endregion
 //#region ../blocks/src/system/runtime/nodes/booking-form.validationErrors.ts
 function omitRecordKey(record, key) {
 	if (!(key in record)) return record;
@@ -11687,6 +11761,7 @@ function getAppointmentBookingOverrideInput(props) {
 			formId,
 			form,
 			services,
+			serviceCategories: readOverrideServiceCategories(props.data),
 			initialServiceId: defaultServiceId,
 			initialResourceId: toOptionalAppointmentResourceId(content.resourceId ?? form.settings?.resourceId),
 			requiresServiceSelection: Boolean(content.requiresServiceSelection),
@@ -12400,6 +12475,7 @@ function useHeadlessBookingFlow(options) {
 		data,
 		services: {
 			items: options.services,
+			categories: readServiceCategories(options),
 			selected: selectedService,
 			defaultServiceId,
 			requiresSelection: Boolean(options.requiresServiceSelection)
@@ -12464,6 +12540,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;
 }
@@ -14026,10 +14106,97 @@ function BookingConsentAgreement({ agreement, showTitle = true, title, titleId }
 	})] });
 }
 //#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" });
 }
@@ -14120,7 +14287,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;
@@ -14135,41 +14301,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, {
@@ -14748,12 +14880,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/shared/utils/checkoutUrls.ts
 /**
@@ -14871,6 +14997,7 @@ const BookingFormClient$1 = ({ 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,