@riverbankcms/sdk 0.151.0 → 0.153.0

package/dist/client/{bookingForm-3BCl4g_f.mjs → bookingForm-BJ3C4GlM.mjs}

@@ -1,19 +1,19 @@
 "use client";
-import { B as unsafeAsAppointmentServiceId, H as unsafeAsFormId, V as unsafeAsCustomerPassId, W as unsafeAsPassId, z as unsafeAsAppointmentResourceId } from "./colorStyles-DTunOThj.mjs";
-import { $t as BOOKING_FORM_DATA_RESERVED_KEYS, Cn as resolveBookingSignupOffer, Dn as formatBookingInstant, Ft as formatBookingCentsAsCurrencyInput, Gn as formatCurrencyAmount, Gt as resolveAppointmentCheckoutVerificationState, Ht as isBookingServiceSlidingAmountInRange, It as formatBookingSubmissionPreparationError, Jt as resolveDefaultBookingServiceId, Kt as resolveBookingPaymentStep, Lt as getBookingRedirectStateFromLocation, Mn as parseBookingLocalDate, Nn as resolveBookingTimeZoneId, Nt as logger, Pt as deriveBookingFormViewState, Qt as resolveSelectedAppointmentConsent, Rt as getBookingServiceSlidingScale, Ut as parseBookingCurrencyInputToCents, Wt as prepareBookingSubmission, Xt as toSelectedCollectionOptionKind, Yt as selectedBookingCollectionOptionKind, Zt as projectSelectedAppointmentConsentIntoForm, an as err, cn as reportWorkflowError, en as isBookingRequirementConsentFieldId, in as clearWorkflowFeedback, kn as formatLocalScheduleDate, ln as reportWorkflowSuccess, qt as resolveBookingSiteId, rn as assertNever, sn as okWith, t as defineIslandPropsDecoder, wn as addLocalScheduleDays, zt as getBookingSuccessCopy } from "./propsDecoder-DO5iXphQ.mjs";
-import { i as SpinnerNode, t as ThemedButton } from "./ThemedButton-DZKjtaDD.mjs";
-import { n as useBlockApi, t as BlockApiProvider } from "./context-GK4-AVAh.mjs";
-import { n as isSpamProtectionEnabled, r as AltchaWidget, t as getChallengeUrl } from "./src-B833rYRr.mjs";
-import { a as buildBookingPaymentSelectionViewModel, i as usePolling, n as BookingConsentAgreement, r as StepIndicator, s as useBookingNowIso, t as BookingMailingListNote } from "./BookingMailingListNote-DlDSs5Vm.mjs";
-import { o as DiscountCodeDisclosure, p as storeDemoBookingPassIfAvailable, t as BookingConfirmation } from "./DemoBookingPortalAccess-BMtvPTWE.mjs";
-import { i as useDiscountCodeUi, n as StateIcon, r as CheckIcon, t as TerminalPanel } from "./TerminalPanel-DOTSUCO0.mjs";
+import { d as unsafeAsCustomerPassId, f as unsafeAsFormId, l as unsafeAsAppointmentResourceId, m as unsafeAsPassId, u as unsafeAsAppointmentServiceId } from "./renderableMediaAssetAdmission-CHkXYDC_.mjs";
+import { Ai as formatCurrencyAmount, Ar as toSelectedCollectionOptionKind, At as buildBookingPaymentSelectionViewModel, Cr as parseBookingCurrencyInputToCents, Dr as resolveBookingSiteId, Er as resolveBookingPaymentStep, Hr as reportWorkflowError, Lr as assertNever, Mr as resolveSelectedAppointmentConsent, Mt as paymentChoiceDetails, Nr as BOOKING_FORM_DATA_RESERVED_KEYS, Nt as paymentChoicePrice, Or as resolveDefaultBookingServiceId, Pr as isBookingRequirementConsentFieldId, Rr as clearWorkflowFeedback, Sr as isBookingServiceSlidingAmountInRange, Tr as resolveAppointmentCheckoutVerificationState, Ur as reportWorkflowSuccess, Vr as okWith, _i as formatLocalScheduleDate, _r as getBookingRedirectStateFromLocation, bi as parseBookingLocalDate, gi as formatBookingInstant, gr as formatBookingSubmissionPreparationError, hi as addLocalScheduleDays, hr as formatBookingCentsAsCurrencyInput, jr as projectSelectedAppointmentConsentIntoForm, jt as buildReviewedBookingPaymentViewModel, kr as selectedBookingCollectionOptionKind, mi as resolveBookingSignupOffer, mr as deriveBookingFormViewState, pr as logger, t as defineIslandPropsDecoder, vr as getBookingServiceSlidingScale, wr as prepareBookingSubmission, xi as resolveBookingTimeZoneId, yr as getBookingSuccessCopy, zr as err } from "./propsDecoder-lf_dTeZS.mjs";
+import { i as SpinnerNode, t as ThemedButton } from "./ThemedButton-B7HFqFBg.mjs";
+import { t as buildCheckoutReturnUrls } from "./checkoutUrls-ChxwaNtO.mjs";
+import { n as scrollToBlock, t as CheckIcon } from "./CheckIcon-CpyXr-Kg.mjs";
+import { f as storeDemoBookingPassIfAvailable, p as DiscountCodeDisclosure, t as BookingConfirmation } from "./DemoBookingPortalAccess-ojwbVUmx.mjs";
 import { t as FeedbackMessage } from "./FeedbackMessage-CtLvvS_d.mjs";
+import { n as TerminalPanel, r as StateIcon, t as useDiscountCodeUi } from "./useDiscountCodeUi-B1Puub2v.mjs";
+import { a as useBookingNowIso, i as usePolling, n as BookingConsentAgreement, o as StepIndicator, r as PaymentChoiceRows, t as BookingMailingListNote } from "./BookingMailingListNote-DrchYW1m.mjs";
+import { n as useBlockApi, t as BlockApiProvider } from "./context-BOGe3rIA.mjs";
+import { n as isSpamProtectionEnabled, r as AltchaWidget, t as getChallengeUrl } from "./src-B833rYRr.mjs";
 import { i as getFieldValidationControlProps, r as FieldValidationMessage } from "./mailingListSignupCopy-DZSHZrm6.mjs";
-import { t as CheckboxChoice } from "./CheckboxChoice-M-3HycLw.mjs";
-import { t as buildCheckoutReturnUrls } from "./checkoutUrls-ChxwaNtO.mjs";
-import { t as scrollToBlock } from "./scrollToBlock-C86BYkyV.mjs";
+import { t as CheckboxChoice } from "./CheckboxChoice-Dq30m3DO.mjs";
 import { t as mountReactIsland } from "./reactMount-SY8AVRof.mjs";
-import { t as buildRouteIslandApiConfig } from "./routeIslandApiConfig-BNm0Z3-g.mjs";
+import { t as buildRouteIslandApiConfig } from "./routeIslandApiConfig-Bc_WVPS8.mjs";
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region ../core/src/appointment-service-categories.ts
@@ -572,6 +572,10 @@ function bookingSubmissionReducer(state, action) {
 			...clearWorkflowFeedback(state),
 			status: { tag: "submitting" }
 		};
+		case "submission-reviewed": return {
+			status: { tag: "idle" },
+			feedback: { tag: "idle" }
+		};
 		case "submission-succeeded": return {
 			status: { tag: "idle" },
 			feedback: reportWorkflowSuccess(state, action.message).feedback
@@ -628,32 +632,11 @@ function useBookingSubmission(_siteId) {
 	const submit = async (data) => {
 		dispatch({ type: "submission-started" });
 		try {
-			const response = data.kind === "appointment_package" ? await api.submitBookingWithPackage({
-				formId: data.formId,
-				serviceId: data.serviceId,
-				resourceId: data.resourceId || null,
-				startAt: data.startAt,
-				endAt: data.endAt,
-				customFields: data.customFields,
-				mailingListOptIn: data.mailingListOptIn,
-				timezone: data.timezone,
-				customerPassId: data.customerPassId
-			}) : await api.submitBooking({
-				formId: data.formId,
-				serviceId: data.serviceId,
-				resourceId: data.resourceId || null,
-				startAt: data.startAt,
-				endAt: data.endAt,
-				customFields: data.customFields,
-				mailingListOptIn: data.mailingListOptIn,
-				timezone: data.timezone,
-				discountCode: data.discountCode,
-				selectedSlidingAmount: data.selectedSlidingAmount,
-				selectedCollectionOptionKind: data.selectedCollectionOptionKind,
-				altchaSolution: data.altchaSolution ?? null,
-				successUrl: data.successUrl,
-				cancelUrl: data.cancelUrl
-			});
+			const response = await executeBookingSubmission(api, data);
+			if (response.type === "review_required" || response.type === "payment_choice_required") {
+				dispatch({ type: "submission-reviewed" });
+				return okWith(response);
+			}
 			storeDemoBookingPassIfAvailable(response.customer.email, response.demoBookingPass);
 			dispatch({
 				type: "submission-succeeded",
@@ -681,6 +664,35 @@ function useBookingSubmission(_siteId) {
 		isSubmitting: selectIsSubmitting(state)
 	};
 }
+function executeBookingSubmission(api, data) {
+	return data.kind === "appointment_package" ? api.submitBookingWithPackage({
+		formId: data.formId,
+		serviceId: data.serviceId,
+		resourceId: data.resourceId || null,
+		startAt: data.startAt,
+		endAt: data.endAt,
+		customFields: data.customFields,
+		mailingListOptIn: data.mailingListOptIn,
+		timezone: data.timezone,
+		customerPassId: data.customerPassId
+	}) : api.submitBooking({
+		formId: data.formId,
+		serviceId: data.serviceId,
+		resourceId: data.resourceId || null,
+		startAt: data.startAt,
+		endAt: data.endAt,
+		customFields: data.customFields,
+		mailingListOptIn: data.mailingListOptIn,
+		timezone: data.timezone,
+		shownTerms: data.shownTerms,
+		discountCode: data.discountCode,
+		selectedSlidingAmount: data.selectedSlidingAmount,
+		selectedCollectionOptionKind: data.selectedCollectionOptionKind,
+		altchaSolution: data.altchaSolution ?? null,
+		successUrl: data.successUrl,
+		cancelUrl: data.cancelUrl
+	});
+}
 //#endregion
 //#region ../blocks/src/system/runtime/nodes/booking-form.validationErrors.ts
 function omitRecordKey(record, key) {
@@ -789,6 +801,7 @@ function createInitialBookingFlowReducerState(input) {
 		selectedSlidingAmountInput: toOptionalString(initialData.selectedSlidingAmountInput) ?? bookingSlidingAmountDefault(input.services, input.defaultServiceId),
 		selectedCollectionOptionKind: toSelectedCollectionOptionKind(initialData.selectedCollectionOptionKind),
 		selectedAppointmentPackageId: toOptionalCustomerPassId(toOptionalString(initialData.selectedAppointmentPackageId)),
+		review: null,
 		altchaSolution: null,
 		validationErrors: createEmptyBookingValidationErrors(),
 		feedback: { kind: "none" }
@@ -891,6 +904,25 @@ function reduceBookingFlowEvent(state, event) {
 			phase: "editing",
 			feedback: { kind: "none" }
 		};
+		case "review-required": return {
+			...state,
+			phase: "editing",
+			review: event.review,
+			feedback: { kind: "none" }
+		};
+		case "payment-choice-required": return {
+			...state,
+			phase: "editing",
+			review: null,
+			paymentChoices: event.paymentChoices,
+			selectedCollectionOptionKind: void 0,
+			currentStepId: "payment-selection",
+			feedback: {
+				kind: "error",
+				scope: "submission",
+				message: "The payment details have changed. Please review them before continuing."
+			}
+		};
 		case "submission-started": return {
 			...state,
 			phase: "submitting"
@@ -1028,7 +1060,7 @@ function resolveBookingStepVisibility(input, defaultServiceId, payment) {
 			!hasValidConfiguredService && input.services.length > 1,
 			(input.form?.settings?.serviceIds?.length ?? 0) > 1
 		].some(Boolean),
-		needsPayment: needsBookingPaymentStep(input, payment),
+		needsPayment: Boolean(input.forcePaymentSelection) || needsBookingPaymentStep(input, payment),
 		hasFields: Boolean(input.form?.schema?.fields.length)
 	};
 }
@@ -1196,24 +1228,11 @@ function deriveBookingFieldViews(input) {
 	});
 }
 function buildBookingSubmitPlan(input) {
-	if (input.requiresResourceSelection && !(input.state.selectedResourceId ?? input.defaultResourceId)) {
-		const message = "Please select a practitioner";
-		return {
-			ok: false,
-			errors: createFormBookingValidationError(message),
-			message
-		};
-	}
-	const fieldErrors = validateBookingFields({
-		fields: input.form?.schema?.fields ?? [],
-		values: input.state.fieldValues
-	});
-	if (Object.keys(fieldErrors).length > 0) return {
-		ok: false,
-		errors: createFieldBookingValidationErrors(fieldErrors),
-		message: "Please check the highlighted fields."
-	};
+	const invalid = validateBookingSubmissionContact(input);
+	if (invalid) return invalid;
 	const prepared = prepareBookingSubmission({
+		shownTerms: input.shownTerms,
+		promisedDiscountId: input.promisedDiscountId,
 		formId: input.formId,
 		nowIso: input.nowIso,
 		data: bookingFormDataWithEligibleOptIn(toBookingFormData(input.state), Boolean(input.mailingListEligible)),
@@ -1234,17 +1253,39 @@ function buildBookingSubmitPlan(input) {
 	return {
 		ok: true,
 		redirect: input.redirect,
-		value: prepared.value.kind === "appointment_package" ? {
-			...prepared.value,
-			endAt: input.state.selectedSlot?.endAt ?? prepared.value.endAt,
-			resourceId: prepared.value.resourceId ?? input.state.selectedSlot?.resourceId
-		} : {
-			...prepared.value,
-			endAt: input.state.selectedSlot?.endAt ?? prepared.value.endAt,
-			resourceId: prepared.value.resourceId ?? input.state.selectedSlot?.resourceId,
-			successUrl: input.successUrl,
-			cancelUrl: input.cancelUrl
-		}
+		value: finalizeBookingSubmissionCommand(prepared.value, input)
+	};
+}
+function validateBookingSubmissionContact(input) {
+	if (input.requiresResourceSelection && !(input.state.selectedResourceId ?? input.defaultResourceId)) {
+		const message = "Please select a practitioner";
+		return {
+			ok: false,
+			errors: createFormBookingValidationError(message),
+			message
+		};
+	}
+	const fieldErrors = validateBookingFields({
+		fields: input.form?.schema?.fields ?? [],
+		values: input.state.fieldValues
+	});
+	if (Object.keys(fieldErrors).length > 0) return {
+		ok: false,
+		errors: createFieldBookingValidationErrors(fieldErrors),
+		message: "Please check the highlighted fields."
+	};
+	return null;
+}
+function finalizeBookingSubmissionCommand(value, input) {
+	const selected = {
+		...value,
+		endAt: input.state.selectedSlot?.endAt ?? value.endAt,
+		resourceId: value.resourceId ?? input.state.selectedSlot?.resourceId
+	};
+	return selected.kind === "appointment_package" ? selected : {
+		...selected,
+		successUrl: input.successUrl,
+		cancelUrl: input.cancelUrl
 	};
 }
 function resolveAppointmentPackagesModel(input) {
@@ -1360,7 +1401,10 @@ function isBlankFieldValue(value) {
 }
 /** Reconcile customer intent as part of the edit, never from a rendering effect. */
 function bookingFlowReducer(state, event, context) {
-	const changed = reduceBookingFlowEvent(state, event);
+	const changed = reduceBookingFlowEvent(state.review && changesBookingIntent(event) ? {
+		...state,
+		review: null
+	} : state, event);
 	const next = event.type === "service-selected" ? {
 		...changed,
 		selectedSlidingAmountInput: bookingSlidingAmountDefault(context.services, event.serviceId)
@@ -1451,7 +1495,28 @@ function planBookingSubmissionStart(input) {
 		},
 		events: []
 	};
-	const plan = buildBookingSubmitPlan(input);
+	if (input.intent.kind === "accept-review" && input.intent.review !== input.state.review) return {
+		kind: "blocked",
+		result: {
+			ok: false,
+			reason: "blocked",
+			message: "booking-review-changed"
+		},
+		events: []
+	};
+	if (input.intent.kind === "submit" && input.state.review) return {
+		kind: "review",
+		result: {
+			ok: false,
+			reason: "review-required",
+			review: input.state.review
+		},
+		events: []
+	};
+	const plan = buildBookingSubmitPlan({
+		...input,
+		shownTerms: input.intent.kind === "accept-review" ? input.intent.review.terms : void 0
+	});
 	return plan.ok ? {
 		kind: "submit",
 		plan,
@@ -1497,41 +1562,46 @@ function isBookingPaymentEvent(event) {
 	return event.type === "payment-option-selected" || event.type === "sliding-amount-changed" || event.type === "appointment-package-selected" || event.type === "discount-code-changed" || event.type === "altcha-solution-set" || event.type === "altcha-solution-invalidated";
 }
 function applyBookingPaymentEvent(state, event) {
+	const change = bookingPaymentEventChange(event);
+	return {
+		...state,
+		...change,
+		validationErrors: event.type === "altcha-solution-invalidated" ? state.validationErrors : clearBookingFormError(state.validationErrors)
+	};
+}
+function bookingPaymentEventChange(event) {
 	switch (event.type) {
 		case "payment-option-selected": return {
-			...state,
 			selectedCollectionOptionKind: event.kind ?? void 0,
-			selectedAppointmentPackageId: void 0,
-			validationErrors: clearBookingFormError(state.validationErrors)
+			selectedAppointmentPackageId: void 0
 		};
 		case "sliding-amount-changed": return {
-			...state,
 			selectedSlidingAmountInput: event.value,
-			selectedAppointmentPackageId: void 0,
-			validationErrors: clearBookingFormError(state.validationErrors)
+			selectedAppointmentPackageId: void 0
 		};
 		case "appointment-package-selected": return {
-			...state,
 			selectedAppointmentPackageId: event.packageId ?? void 0,
-			selectedCollectionOptionKind: void 0,
-			validationErrors: clearBookingFormError(state.validationErrors)
-		};
-		case "discount-code-changed": return {
-			...state,
-			discountCode: event.code,
-			validationErrors: clearBookingFormError(state.validationErrors)
-		};
-		case "altcha-solution-set": return {
-			...state,
-			altchaSolution: event.solution,
-			validationErrors: clearBookingFormError(state.validationErrors)
-		};
-		case "altcha-solution-invalidated": return {
-			...state,
-			altchaSolution: null
+			selectedCollectionOptionKind: void 0
 		};
+		case "discount-code-changed": return { discountCode: event.code };
+		case "altcha-solution-set": return { altchaSolution: event.solution };
+		case "altcha-solution-invalidated": return { altchaSolution: null };
 	}
 }
+function changesBookingIntent(event) {
+	return changesBookingPaymentFacts(event) || [
+		"field-updated",
+		"discount-code-changed",
+		"appointment-package-selected"
+	].includes(event.type);
+}
+/** Applies server-owned recovery facts to the existing catalogue model. */
+function applyBookingPaymentChoices(services, choices) {
+	return choices ? services.map((service) => choices.id === service.id ? {
+		...service,
+		...choices
+	} : service) : services;
+}
 //#endregion
 //#region ../blocks/src/system/runtime/hooks/useBookingChoices.ts
 /** Accept remote facts here; payment/navigation controllers do not own request lifetime. */
@@ -1626,6 +1696,30 @@ function useBookingChoicesRequest(key, load, accept, errorMessage) {
 //#region ../blocks/src/system/runtime/nodes/booking-form.submit-success.ts
 function planBookingSubmissionCompletion(input) {
 	const { data } = input;
+	if (data.type === "review_required") return {
+		navigation: { kind: "none" },
+		events: [{
+			type: "review-required",
+			review: data.review
+		}],
+		result: {
+			ok: false,
+			reason: "review-required",
+			review: data.review
+		}
+	};
+	if (data.type === "payment_choice_required") return {
+		navigation: { kind: "none" },
+		events: [{
+			type: "payment-choice-required",
+			paymentChoices: data.paymentChoices
+		}],
+		result: {
+			ok: false,
+			reason: "payment-choice-required",
+			paymentChoices: data.paymentChoices
+		}
+	};
 	const extras = {
 		...data.demoBookingPass ? { demoBookingPass: data.demoBookingPass } : {},
 		...data.mailingListSignupNote ? { mailingListSignupNote: data.mailingListSignupNote } : {},
@@ -1703,7 +1797,11 @@ function useBookingFlowController(input) {
 			navigate("back");
 		},
 		goToStep: async (stepId) => navigate(stepId),
-		submit: submitBooking,
+		submit: (options) => submitBooking({ kind: "submit" }, options),
+		acceptReview: (review, options) => submitBooking({
+			kind: "accept-review",
+			review
+		}, options),
 		setDiscountCode: (code) => {
 			input.dispatch({
 				type: "discount-code-changed",
@@ -1735,10 +1833,11 @@ function useBookingFlowController(input) {
 }
 function useBookingSubmitAction(latestRef) {
 	const submittingRef = useRef(false);
-	return useCallback(async (options) => {
+	return useCallback(async (intent, options) => {
 		const latest = latestRef.current;
 		const start = planBookingSubmissionStart({
 			...latest,
+			intent,
 			inFlight: submittingRef.current,
 			state: {
 				...latest.state,
@@ -1753,6 +1852,11 @@ function useBookingSubmitAction(latestRef) {
 		submittingRef.current = true;
 		try {
 			const result = await latest.submit(start.plan.value);
+			if (isOutdatedBookingReview(result, latest.state, latestRef.current.state)) return {
+				ok: false,
+				reason: "blocked",
+				message: "booking-details-changed"
+			};
 			if (!result.ok) return failBookingSubmission(result.error, latest.dispatch);
 			return completeBookingSubmission({
 				data: result.data,
@@ -1833,6 +1937,12 @@ function failBookingSubmission(message, dispatch) {
 		message
 	};
 }
+function sameBookingIntent(left, right) {
+	return left.selectedServiceId === right.selectedServiceId && left.selectedResourceId === right.selectedResourceId && left.selectedSlot?.key === right.selectedSlot?.key && left.selectedSlidingAmountInput === right.selectedSlidingAmountInput && left.selectedCollectionOptionKind === right.selectedCollectionOptionKind && left.selectedAppointmentPackageId === right.selectedAppointmentPackageId && left.discountCode === right.discountCode && left.fieldValues === right.fieldValues;
+}
+function isOutdatedBookingReview(result, submitted, current) {
+	return result.ok && (result.data.type === "review_required" || result.data.type === "payment_choice_required") && !sameBookingIntent(submitted, current);
+}
 //#endregion
 //#region ../blocks/src/system/runtime/hooks/useHeadlessBookingFlow.ts
 function useHeadlessBookingFlow(options) {
@@ -1853,14 +1963,15 @@ function useHeadlessBookingFlow(options) {
 		options.services
 	]);
 	const [state, dispatch] = useReducer((previous, event) => bookingFlowReducer(previous, event, {
-		services: options.services,
+		services: applyBookingPaymentChoices(options.services, previous.paymentChoices),
 		defaultServiceId,
 		nowIso: bookingNowIso
 	}), initialState);
 	const api = useBlockApi();
 	const selectedServiceId = state.selectedServiceId ?? defaultServiceId;
 	const selectedResourceId = state.selectedResourceId ?? defaultResourceId;
-	const selectedService = options.services.find((service) => service.id === selectedServiceId) ?? null;
+	const services = useMemo(() => applyBookingPaymentChoices(options.services, state.paymentChoices), [options.services, state.paymentChoices]);
+	const selectedService = services.find((service) => service.id === selectedServiceId) ?? null;
 	const runtimeForm = useSelectedAppointmentConsentForm(options.form, selectedService);
 	const hasPortalBearerAuth = (api.config.authOverrides?.portal ?? api.config.auth).type === "bearer";
 	const selectedServiceSlidingScale = getBookingServiceSlidingScale(selectedService);
@@ -1895,7 +2006,8 @@ function useHeadlessBookingFlow(options) {
 	const stepState = useMemo(() => deriveBookingFlowSteps({
 		form: runtimeForm,
 		nowIso: bookingNowIso,
-		services: options.services,
+		services,
+		forcePaymentSelection: state.paymentChoices?.id === selectedServiceId,
 		data,
 		defaultServiceId,
 		defaultResourceId,
@@ -1914,7 +2026,9 @@ function useHeadlessBookingFlow(options) {
 		runtimeForm,
 		options.requiresResourceSelection,
 		options.requiresServiceSelection,
-		options.services,
+		services,
+		state.paymentChoices,
+		selectedServiceId,
 		state.currentStepId
 	]);
 	const { availableDates, isLoading: isLoadingDates, error: datesError, hasMore, loadMore, loadedRange: availableDatesLoadedRange } = useAvailableDates({
@@ -2002,7 +2116,8 @@ function useHeadlessBookingFlow(options) {
 		nowIso: bookingNowIso,
 		form: runtimeForm,
 		formId: formKey,
-		services: options.services,
+		services,
+		promisedDiscountId: resolveDisclosedBookingDiscountId(discountUi),
 		defaultServiceId,
 		defaultResourceId,
 		requiresResourceSelection: options.requiresResourceSelection,
@@ -2089,6 +2204,8 @@ function useHeadlessBookingFlow(options) {
 		confirmationSummary: paymentConfirmationSummary
 	};
 	return {
+		review: state.review,
+		paymentAnchorAt: bookingNowIso,
 		mailingList,
 		mailingListOptIn: state.mailingListOptIn,
 		status,
@@ -2097,7 +2214,7 @@ function useHeadlessBookingFlow(options) {
 		currentStep: stepState.currentStep,
 		data,
 		services: {
-			items: options.services,
+			items: services,
 			categories: readServiceCategories(options),
 			selected: selectedService,
 			defaultServiceId,
@@ -2170,6 +2287,9 @@ function readServiceCategories(options) {
 function navigateToCheckout(checkoutUrl) {
 	window.location.href = checkoutUrl;
 }
+function resolveDisclosedBookingDiscountId(discount) {
+	return discount.discountsAvailableLoading || discount.discountCode.trim() ? void 0 : discount.autoAppliedDiscount?.id;
+}
 //#endregion
 //#region ../blocks/src/system/runtime/hooks/useAppointmentCheckoutVerification.ts
 const APPOINTMENT_CHECKOUT_MAX_ATTEMPTS = 12;
@@ -2505,8 +2625,8 @@ function resolvePrimaryActionLabel(isLastStep, requiresPayment) {
 	if (!isLastStep) return "Continue";
 	return requiresPayment ? "Continue to payment" : "Complete";
 }
-function formatBookingConfirmationDateTime(booking) {
-	const startAt = booking.currentStep?.id === "datetime-selection" ? booking.availability.selectedSlot?.startAt : void 0;
+function formatBookingConfirmationDateTime(booking, includeSelection = false) {
+	const startAt = includeSelection || booking.currentStep?.id === "datetime-selection" ? booking.availability.selectedSlot?.startAt : void 0;
 	return startAt ? new Intl.DateTimeFormat(void 0, {
 		dateStyle: "medium",
 		timeStyle: "short",
@@ -2538,8 +2658,9 @@ function BookingFormSubmitActions({ booking, onSubmit }) {
 	const handlePrimaryAction = async () => {
 		if ((await booking.actions.next()).ok && isLastStep) await onSubmit();
 	};
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(BookingPaymentConfirmationText, {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(BookingSubmissionSummary, {
 		booking,
+		isLastStep,
 		summary: paymentSummary
 	}), /* @__PURE__ */ jsxs("div", {
 		className: "rb-wizard-actions",
@@ -2557,7 +2678,7 @@ function BookingFormSubmitActions({ booking, onSubmit }) {
 			disabled: isSubmitting,
 			variant: "primary",
 			size: "md",
-			label: resolvePrimaryActionLabel(isLastStep, Boolean(paymentSummary)),
+			label: bookingPrimaryActionLabel(booking, isLastStep, paymentSummary),
 			pending: isSubmitting ? {
 				label: "Submitting...",
 				srLabel: "Submitting"
@@ -2565,6 +2686,72 @@ function BookingFormSubmitActions({ booking, onSubmit }) {
 		})]
 	})] });
 }
+function reviewedActionLabel(review) {
+	if (review.terms.dueNowCents > 0) return "Continue to payment";
+	return review.terms.totalCents > 0 ? `Confirm booking at ${formatCurrencyAmount(review.terms.totalCents, review.terms.currency, { decimals: "auto" })}` : "Confirm booking";
+}
+function BookingOfferReview({ review, booking }) {
+	const payment = buildReviewedBookingPaymentViewModel({
+		terms: review.terms,
+		bookingStartAt: booking.availability.selectedSlot?.startAt ?? null,
+		anchorAt: booking.paymentAnchorAt
+	});
+	const money = (amount) => formatCurrencyAmount(amount, review.terms.currency, { decimals: "auto" });
+	return /* @__PURE__ */ jsxs("section", {
+		className: "rb-reg-summary",
+		"aria-label": "Updated booking price",
+		"aria-live": "polite",
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "ab-text",
+				children: review.reason === "discount_unavailable" ? "The discount previously shown is no longer available for this booking. Please review the updated price before continuing." : review.reason === "payment_terms_changed" ? "The payment details have changed. Please review them before continuing." : "The amount due has changed. Please review the updated price before continuing."
+			}),
+			/* @__PURE__ */ jsxs("dl", { children: [
+				/* @__PURE__ */ jsx("dt", { children: "Price" }),
+				/* @__PURE__ */ jsx("dd", { children: money(review.subtotalCents) }),
+				review.discountCents > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", { children: "Discount" }), /* @__PURE__ */ jsx("dd", { children: money(review.discountCents) })] }) : null,
+				review.creditCents > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", { children: "Account credit applied" }), /* @__PURE__ */ jsx("dd", { children: money(review.creditCents) })] }) : null,
+				payment ? payment.summaryRows.map((row) => /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx("dt", { children: row.label }), /* @__PURE__ */ jsx("dd", { children: row.value })] }, row.label)) : /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx("dt", { children: "Total" }),
+					/* @__PURE__ */ jsx("dd", { children: money(review.terms.totalCents) }),
+					/* @__PURE__ */ jsx("dt", { children: "Due today" }),
+					/* @__PURE__ */ jsx("dd", { children: money(0) })
+				] })
+			] }),
+			payment?.helperText ? /* @__PURE__ */ jsx("p", {
+				className: "ab-text rb-on-surface--muted",
+				children: payment.helperText
+			}) : null
+		]
+	});
+}
+function bookingPrimaryActionLabel(booking, isLastStep, summary) {
+	return isLastStep && booking.review ? reviewedActionLabel(booking.review) : resolvePrimaryActionLabel(isLastStep, Boolean(summary));
+}
+function BookingSubmissionSummary({ booking, isLastStep, summary }) {
+	return isLastStep && booking.review ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(BookingReviewIdentity, { booking }), /* @__PURE__ */ jsx(BookingOfferReview, {
+		review: booking.review,
+		booking
+	})] }) : /* @__PURE__ */ jsx(BookingPaymentConfirmationText, {
+		booking,
+		summary
+	});
+}
+function BookingReviewIdentity({ booking }) {
+	const service = booking.services.selected;
+	if (!service) return null;
+	const dateTime = formatBookingConfirmationDateTime(booking, true);
+	return /* @__PURE__ */ jsxs("p", {
+		className: "ab-text rb-on-surface--muted",
+		children: [
+			service.title,
+			" · ",
+			service.durationMinutes,
+			" min",
+			dateTime ? ` · ${dateTime}` : ""
+		]
+	});
+}
 //#endregion
 //#region ../blocks/src/system/runtime/nodes/booking-form.default-ui.tsx
 function formatBookingAmount(amount, currency) {
@@ -2847,53 +3034,32 @@ function HeadlessBookingPaymentSelectionStep({ booking }) {
 					})
 				]
 			}) : null,
-			/* @__PURE__ */ jsxs("div", {
-				className: "rb-reg-stack rb-reg-stack--sm",
-				role: "list",
-				"aria-label": "Payment options",
-				children: [packageOptions.map((appointmentPackage) => {
-					const isSelected = booking.payment.selectedAppointmentPackageId === appointmentPackage.customerPassId;
-					return /* @__PURE__ */ jsxs("button", {
-						type: "button",
-						className: optionCardClassName(isSelected),
-						onClick: () => booking.actions.selectAppointmentPackage(appointmentPackage.customerPassId),
-						"aria-pressed": isSelected,
-						children: [/* @__PURE__ */ jsx(PaymentOptionContent, {
-							id: appointmentPackage.customerPassId,
-							title: appointmentPackage.passName,
-							description: "Use 1 package credit",
-							summaryRows: [{
-								label: "Balance",
-								value: `${appointmentPackage.creditsRemaining} of ${appointmentPackage.creditsTotal} credits remaining`
-							}]
-						}), isSelected ? /* @__PURE__ */ jsx(SelectedCheck, {}) : null]
-					}, appointmentPackage.customerPassId);
-				}), viewModel.options.map((option) => {
-					const isSelected = !booking.payment.selectedAppointmentPackageId && (booking.payment.selectedCollectionOptionKind === option.kind || viewModel.mode === "single_option");
-					if (viewModel.mode === "single_option" && !hasPackageOptions) return /* @__PURE__ */ jsx("div", {
-						className: "rb-reg-summary",
-						children: /* @__PURE__ */ jsx(PaymentOptionContent, {
-							id: option.kind,
-							title: option.title,
-							description: option.description,
-							summaryRows: option.summaryRows,
-							helperText: option.helperText
-						})
-					}, option.kind);
-					return /* @__PURE__ */ jsxs("button", {
-						type: "button",
-						className: optionCardClassName(isSelected),
-						onClick: () => booking.actions.selectPaymentOption(option.kind),
-						"aria-pressed": isSelected,
-						children: [/* @__PURE__ */ jsx(PaymentOptionContent, {
-							id: option.kind,
-							title: option.title,
-							description: option.description,
-							summaryRows: option.summaryRows,
-							helperText: option.helperText
-						}), isSelected ? /* @__PURE__ */ jsx(SelectedCheck, {}) : null]
-					}, option.kind);
-				})]
+			viewModel.mode === "single_option" && !hasPackageOptions ? viewModel.options.map((option) => /* @__PURE__ */ jsx("div", {
+				className: "rb-reg-summary",
+				children: /* @__PURE__ */ jsx(PaymentOptionContent, {
+					id: option.kind,
+					title: option.title,
+					description: option.description,
+					summaryRows: option.summaryRows,
+					helperText: option.helperText
+				})
+			}, option.kind)) : /* @__PURE__ */ jsx(PaymentChoiceRows, {
+				label: "Payment options",
+				rows: [...packageOptions.map((appointmentPackage) => ({
+					id: appointmentPackage.customerPassId,
+					label: appointmentPackage.passName,
+					details: ["Use 1 package credit", `Balance: ${appointmentPackage.creditsRemaining} of ${appointmentPackage.creditsTotal} credits remaining`],
+					price: "1 credit",
+					selected: booking.payment.selectedAppointmentPackageId === appointmentPackage.customerPassId,
+					onSelect: () => booking.actions.selectAppointmentPackage(appointmentPackage.customerPassId)
+				})), ...viewModel.options.map((option) => ({
+					id: option.kind,
+					label: option.title,
+					details: paymentChoiceDetails(option),
+					price: paymentChoicePrice(option.amounts),
+					selected: !booking.payment.selectedAppointmentPackageId && (booking.payment.selectedCollectionOptionKind === option.kind || viewModel.mode === "single_option"),
+					onSelect: () => booking.actions.selectPaymentOption(option.kind)
+				}))]
 			})
 		]
 	});
@@ -3155,7 +3321,7 @@ function DefaultBookingDiscount({ booking }) {
 				booking.discount.clear();
 				booking.discount.setOpen(false);
 			}
-		}) : null, booking.discount.autoAppliedDiscount && booking.discount.code.trim().length === 0 ? /* @__PURE__ */ jsx(FeedbackMessage, {
+		}) : null, !booking.review && booking.discount.autoAppliedDiscount && booking.discount.code.trim().length === 0 ? /* @__PURE__ */ jsx(FeedbackMessage, {
 			tone: "info",
 			className: "alert alert-info rb-mt-4",
 			role: "status",
@@ -3305,11 +3471,12 @@ function appendRebookFlag(url, enabled) {
 function createBookingFormSubmitHandler(input) {
 	return async () => {
 		const { successUrl, cancelUrl } = buildCheckoutReturnUrls("booking", input.bookingAnchorId);
-		const result = await input.booking.actions.submit({
+		const options = {
 			redirect: "manual",
 			successUrl: appendRebookFlag(successUrl, input.isPortalRebook),
 			cancelUrl: appendRebookFlag(cancelUrl, input.isPortalRebook)
-		});
+		};
+		const result = input.booking.review ? await input.booking.actions.acceptReview(input.booking.review, options) : await input.booking.actions.submit(options);
 		if (!result.ok) return;
 		storeDemoBookingPassIfAvailable(result.outcome.customerEmail, result.outcome.demoBookingPass);
 		if (result.outcome.kind === "checkout_redirect") {