@riverbankcms/sdk 0.72.0 → 0.75.0

package/dist/client/bookingForm-GUP75FKN.mjs

@@ -0,0 +1,3022 @@
+"use client";
+import { DiscountCodeSection } from './chunk-OJPZEZU2.mjs';
+import { useDiscountCodeUi, usePolling } from './chunk-WJXXNDSE.mjs';
+import { SpinnerNode } from './chunk-TQ5MSPDX.mjs';
+import { scrollToBlock, buildCheckoutReturnUrls, formatPrice } from './chunk-2PHQZ666.mjs';
+import { FieldValidationMessage, getFieldValidationControlProps } from './chunk-3DCJ45Z2.mjs';
+import './chunk-3PEDD5KJ.mjs';
+import { isSpamProtectionEnabled, getChallengeUrl, AltchaWidget } from './chunk-YLMKMCSJ.mjs';
+import { BlockApiProvider, useBlockApi, FeedbackMessage } from './chunk-M3L3KYYR.mjs';
+import { mountReactIsland } from './chunk-N7PBWBWQ.mjs';
+import { defineIslandPropsDecoder, resolveBookingSiteId, resolveDefaultBookingServiceId, getBookingRedirectStateFromLocation, deriveBookingFormViewState, getBookingSuccessMessage, resolveAppointmentCheckoutVerificationState, themeButtonClassName, toSelectedCollectionOptionKind, assertNever, prepareBookingSubmission, formatBookingSubmissionPreparationError, resolveBookingPaymentStep, BOOKING_FORM_DATA_RESERVED_KEYS, okWith, err } from './chunk-FU2QRZMX.mjs';
+import { resolveBookingTimeZoneId, DEFAULT_BOOKING_TIME_ZONE, asFormId, asAppointmentResourceId, asCustomerPassId, asAppointmentServiceId, formatLocalScheduleDate, addLocalScheduleDays, parseBookingLocalDate, resolveFlexibleBalanceInitialPaymentCents, resolveFlexibleBalanceDueAt, getBookingInstalmentDepositRefundability, asPassId, splitAmountWithRemainderInFirst, addIntervalPreservingMonthAnchor, clampConfiguredAmount, getBookingInstalmentPlanIntervalCount, omitZeroAmountFutureRows, formatBookingInstant } from './chunk-PMAIXMAB.mjs';
+import React2, { useRef, useState, useMemo, useReducer, useEffect, useCallback, useLayoutEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// ../logger/src/noop.ts
+var noop = () => {
+};
+var logger = {
+  debug: noop,
+  info: noop,
+  warn: noop,
+  error: noop,
+  withFields: (_) => logger
+};
+var SuccessMessage = ({
+  message,
+  resourceName,
+  className
+}) => {
+  return /* @__PURE__ */ jsx(
+    FeedbackMessage,
+    {
+      tone: "success",
+      className: `ab-alert ab-alert--success ${className ?? ""}`,
+      role: "alert",
+      live: "polite",
+      children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("p", { className: "ab-text", children: message }),
+        resourceName ? /* @__PURE__ */ jsxs("p", { className: "ab-text ab-text--muted", children: [
+          "Practitioner: ",
+          resourceName
+        ] }) : null
+      ] })
+    }
+  );
+};
+
+// ../blocks/src/utils/date-formatting.ts
+var BOOKING_FETCH_CHUNK_DAYS = 14;
+var hasWarnedAboutRuntimeTimeZoneFallback = false;
+function warnRuntimeTimeZoneFallback() {
+  if (hasWarnedAboutRuntimeTimeZoneFallback) {
+    return;
+  }
+  hasWarnedAboutRuntimeTimeZoneFallback = true;
+  console.warn(
+    "[booking] Falling back to UTC because the browser timezone could not be resolved safely."
+  );
+}
+function getRuntimeTimeZone() {
+  try {
+    const resolvedTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    const timeZone = resolveBookingTimeZoneId(resolvedTimeZone);
+    if (!resolvedTimeZone || timeZone !== resolvedTimeZone.trim()) {
+      warnRuntimeTimeZoneFallback();
+    }
+    return timeZone;
+  } catch {
+    warnRuntimeTimeZoneFallback();
+    return DEFAULT_BOOKING_TIME_ZONE;
+  }
+}
+function formatDate(dateStr) {
+  return formatBookingInstant(`${dateStr}T00:00:00.000Z`, {
+    timeZone: DEFAULT_BOOKING_TIME_ZONE,
+    format: {
+      weekday: "long",
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    }
+  });
+}
+function formatTime(isoString) {
+  return formatBookingInstant(isoString, {
+    timeZone: DEFAULT_BOOKING_TIME_ZONE,
+    format: {
+      hour: "numeric",
+      minute: "2-digit",
+      timeZoneName: "short"
+    }
+  });
+}
+var MIN_AVAILABILITY_REFRESH_INTERVAL_MS = 15e3;
+function useVisibleTabPolling({
+  enabled,
+  intervalMs,
+  jitterMs,
+  minVisibleRefreshIntervalMs = MIN_AVAILABILITY_REFRESH_INTERVAL_MS,
+  onPoll
+}) {
+  const onPollRef = useRef(onPoll);
+  const inFlightRef = useRef(false);
+  const lastPollStartedAtRef = useRef(0);
+  onPollRef.current = onPoll;
+  useEffect(() => {
+    if (!enabled) return;
+    if (typeof window === "undefined" || typeof document === "undefined")
+      return;
+    let timeoutId = null;
+    let cancelled = false;
+    const runPoll = async (reason) => {
+      if (cancelled || document.visibilityState === "hidden" || inFlightRef.current) {
+        return;
+      }
+      const now = Date.now();
+      if (reason === "visible" && now - lastPollStartedAtRef.current < minVisibleRefreshIntervalMs) {
+        return;
+      }
+      lastPollStartedAtRef.current = now;
+      inFlightRef.current = true;
+      try {
+        await onPollRef.current();
+      } finally {
+        inFlightRef.current = false;
+      }
+    };
+    const schedule = () => {
+      const jitter = Math.floor(Math.random() * jitterMs);
+      timeoutId = window.setTimeout(() => {
+        void runPoll("timer").finally(() => {
+          if (!cancelled) schedule();
+        });
+      }, intervalMs + jitter);
+    };
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "visible") {
+        void runPoll("visible");
+      }
+    };
+    lastPollStartedAtRef.current = Date.now();
+    schedule();
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      cancelled = true;
+      if (timeoutId) window.clearTimeout(timeoutId);
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [enabled, intervalMs, jitterMs, minVisibleRefreshIntervalMs]);
+}
+
+// ../blocks/src/system/runtime/hooks/useAvailableDates.ts
+var AVAILABILITY_REFRESH_INTERVAL_MS = 3e4;
+var AVAILABILITY_REFRESH_JITTER_MS = 5e3;
+function useAvailableDates({
+  siteId: _siteId,
+  // siteId now comes from BlockApiProvider context
+  serviceId,
+  resourceId,
+  timezone,
+  initialDays = 30
+}) {
+  const api = useBlockApi();
+  const [availableDates, setAvailableDates] = useState(/* @__PURE__ */ new Set());
+  const [isLoading, setIsLoading] = useState(false);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [error, setError] = useState(null);
+  const [hasMore, setHasMore] = useState(false);
+  const [loadedRange, setLoadedRange] = useState(null);
+  const nextStartDateRef = useRef(null);
+  const requestIdRef = useRef(0);
+  const fetchDates = useCallback(
+    async (startDate, endDate, append = false, mode = "load") => {
+      if (!serviceId) return;
+      const requestId = ++requestIdRef.current;
+      if (mode === "refresh") {
+        setIsRefreshing(true);
+      } else {
+        setIsLoading(true);
+        setIsRefreshing(false);
+      }
+      setError(null);
+      try {
+        const data = await api.getAvailableDates({
+          serviceId,
+          startDate,
+          endDate,
+          timezone,
+          resourceId
+        });
+        if (requestId !== requestIdRef.current) return;
+        setAvailableDates((prev) => {
+          const newSet = append ? new Set(prev) : /* @__PURE__ */ new Set();
+          data.dates.forEach((d) => newSet.add(d));
+          return newSet;
+        });
+        setHasMore(data.hasMore);
+        nextStartDateRef.current = data.nextStartDate || null;
+        setLoadedRange((prev) => ({
+          start: append && prev ? prev.start : data.startDate,
+          end: data.endDate
+        }));
+      } catch (err2) {
+        if (requestId !== requestIdRef.current) return;
+        setError(
+          err2 instanceof Error ? err2.message : "Failed to load available dates"
+        );
+      } finally {
+        if (mode === "refresh" && requestId === requestIdRef.current) {
+          setIsRefreshing(false);
+        } else if (requestId === requestIdRef.current) {
+          setIsLoading(false);
+        }
+      }
+    },
+    [api, serviceId, resourceId, timezone]
+  );
+  useEffect(() => {
+    if (!serviceId) {
+      setAvailableDates(/* @__PURE__ */ new Set());
+      setLoadedRange(null);
+      setHasMore(false);
+      setIsRefreshing(false);
+      return;
+    }
+    const now = /* @__PURE__ */ new Date();
+    const today = formatLocalScheduleDate({
+      year: now.getFullYear(),
+      month: now.getMonth() + 1,
+      day: now.getDate()
+    });
+    const endDate = formatLocalScheduleDate(
+      addLocalScheduleDays(parseBookingLocalDate(today), initialDays)
+    );
+    fetchDates(today, endDate, false);
+  }, [serviceId, fetchDates, initialDays]);
+  useVisibleTabPolling({
+    enabled: Boolean(serviceId && loadedRange),
+    intervalMs: AVAILABILITY_REFRESH_INTERVAL_MS,
+    jitterMs: AVAILABILITY_REFRESH_JITTER_MS,
+    onPoll: () => {
+      if (!loadedRange) return;
+      return fetchDates(loadedRange.start, loadedRange.end, false, "refresh");
+    }
+  });
+  const loadMore = useCallback(() => {
+    if (!nextStartDateRef.current || isLoading) return;
+    const start = nextStartDateRef.current;
+    const end = formatLocalScheduleDate(
+      addLocalScheduleDays(
+        parseBookingLocalDate(start),
+        BOOKING_FETCH_CHUNK_DAYS
+      )
+    );
+    fetchDates(start, end, true);
+  }, [fetchDates, isLoading]);
+  return {
+    availableDates,
+    isLoading,
+    isRefreshing,
+    error,
+    hasMore,
+    loadMore,
+    loadedRange
+  };
+}
+var AVAILABILITY_REFRESH_INTERVAL_MS2 = 3e4;
+var AVAILABILITY_REFRESH_JITTER_MS2 = 5e3;
+function useAvailableSlots({
+  siteId: _siteId,
+  // siteId now comes from BlockApiProvider context
+  serviceId,
+  resourceId,
+  selectedDate,
+  timezone
+}) {
+  const api = useBlockApi();
+  const [slots, setSlots] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [hasLoaded, setHasLoaded] = useState(false);
+  const [error, setError] = useState(null);
+  const requestIdRef = useRef(0);
+  const fetchSlots = useCallback(
+    async (mode) => {
+      const requestId = ++requestIdRef.current;
+      if (!selectedDate || !serviceId) {
+        setSlots([]);
+        setIsLoading(false);
+        setIsRefreshing(false);
+        setHasLoaded(false);
+        setError(null);
+        return;
+      }
+      if (mode === "refresh") {
+        setIsRefreshing(true);
+      } else {
+        setIsLoading(true);
+        setIsRefreshing(false);
+        setSlots([]);
+      }
+      setError(null);
+      try {
+        const result = await api.getAvailableSlots({
+          serviceId,
+          startDate: selectedDate,
+          endDate: selectedDate,
+          timezone,
+          resourceId
+        });
+        if (requestId !== requestIdRef.current) return;
+        setSlots(
+          result.slots.map((slot) => ({
+            ...slot,
+            resourceId: asAppointmentResourceId(slot.resourceId)
+          }))
+        );
+        setHasLoaded(true);
+      } catch (err2) {
+        if (requestId !== requestIdRef.current) return;
+        setError(
+          err2 instanceof Error ? err2.message : "Failed to load available times"
+        );
+      } finally {
+        if (mode === "refresh" && requestId === requestIdRef.current) {
+          setIsRefreshing(false);
+        } else if (requestId === requestIdRef.current) {
+          setIsLoading(false);
+        }
+      }
+    },
+    [selectedDate, serviceId, resourceId, timezone, api]
+  );
+  useEffect(() => {
+    void fetchSlots("load");
+    return () => {
+      requestIdRef.current += 1;
+    };
+  }, [fetchSlots]);
+  useVisibleTabPolling({
+    enabled: Boolean(selectedDate && serviceId),
+    intervalMs: AVAILABILITY_REFRESH_INTERVAL_MS2,
+    jitterMs: AVAILABILITY_REFRESH_JITTER_MS2,
+    onPoll: () => fetchSlots("refresh")
+  });
+  return { slots, isLoading, isRefreshing, hasLoaded, error };
+}
+
+// ../blocks/src/system/runtime/hooks/useBookingSubmission.state.ts
+var initialBookingSubmissionState = {
+  status: { tag: "idle" },
+  feedback: { tag: "idle" }
+};
+function bookingSubmissionReducer(state, action) {
+  switch (action.type) {
+    case "submission-started":
+      return {
+        ...state,
+        status: { tag: "submitting" },
+        feedback: { tag: "idle" }
+      };
+    case "submission-succeeded":
+      return {
+        status: { tag: "idle" },
+        feedback: { tag: "success", message: action.message }
+      };
+    case "submission-failed":
+    case "issue-reported":
+      return {
+        status: { tag: "idle" },
+        feedback: { tag: "error", message: action.message }
+      };
+    case "feedback-cleared":
+      return {
+        ...state,
+        feedback: { tag: "idle" }
+      };
+    default:
+      return assertNever(action);
+  }
+}
+function selectIsSubmitting(state) {
+  return state.status.tag === "submitting";
+}
+
+// ../blocks/src/system/runtime/hooks/useBookingSubmission.ts
+function useBookingSubmission(_siteId) {
+  const api = useBlockApi();
+  const [state, dispatch] = useReducer(
+    bookingSubmissionReducer,
+    initialBookingSubmissionState
+  );
+  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,
+        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,
+        timezone: data.timezone,
+        discountCode: data.discountCode,
+        selectedCollectionOptionKind: data.selectedCollectionOptionKind,
+        altchaSolution: data.altchaSolution ?? null,
+        successUrl: data.successUrl,
+        cancelUrl: data.cancelUrl
+      });
+      dispatch({
+        type: "submission-succeeded",
+        message: response.type === "checkout_redirect" ? "Redirecting to secure checkout..." : "Booking submitted successfully."
+      });
+      return okWith(response);
+    } catch (error) {
+      console.error("Booking submission error:", error);
+      const message = error instanceof Error ? error.message : "Failed to book appointment";
+      dispatch({
+        type: "submission-failed",
+        message
+      });
+      return err(message);
+    }
+  };
+  return {
+    submit,
+    reportIssue: (message) => dispatch({ type: "issue-reported", message }),
+    clearFeedback: () => dispatch({ type: "feedback-cleared" }),
+    feedback: state.feedback,
+    isSubmitting: selectIsSubmitting(state)
+  };
+}
+
+// ../blocks/src/system/runtime/shared/bookingPaymentOptionCopy.ts
+function buildUpfrontBookingPaymentOptionCopy(formattedTotal) {
+  return {
+    title: "Pay in full",
+    description: "Pay everything today and your booking is confirmed.",
+    ctaLabel: `Pay ${formattedTotal} now`
+  };
+}
+function buildDeferredManualBookingPaymentOptionCopy() {
+  return {
+    title: "Pay offline",
+    description: "Book now and pay the business later, outside the platform.",
+    helperText: "Nothing is due today.",
+    ctaLabel: "Book now"
+  };
+}
+function buildInstalmentBookingPaymentOptionCopy(input) {
+  return {
+    title: "Payment plan",
+    description: describeInstalmentPlanCopy(input),
+    helperText: "You can pay the rest early any time in your customer portal.",
+    ctaLabel: `Pay ${input.formattedDueToday} now`
+  };
+}
+function describeInstalmentPlanCopy(input) {
+  if (input.depositRefundability) {
+    return `Pay ${input.formattedDueToday} today, then continue with scheduled payments. Your deposit is ${formatDepositRefundabilityLabel(input.depositRefundability)}.`;
+  }
+  if (input.futurePaymentCount === 0) {
+    return `Pay ${input.formattedDueToday} today.`;
+  }
+  if (input.futurePaymentCount === 1) {
+    return `Pay ${input.formattedDueToday} today, then one more payment later.`;
+  }
+  const formattedFirstFuture = input.formattedFirstFuture ?? input.formattedDueToday;
+  return `Pay ${input.formattedDueToday} today, then ${input.futurePaymentCount} more ${input.cadenceLabel} payments from ${formattedFirstFuture}.`;
+}
+function buildFlexibleBalanceBookingPaymentOptionCopy(input) {
+  return {
+    title: "Deposit now, pay the rest later",
+    description: `Pay ${input.formattedDueToday} today, then pay the remaining balance any time before ${input.dueDateLabel}. Your deposit is ${formatDepositRefundabilityLabel(input.depositRefundability)}.`,
+    helperText: "You can return in your customer portal to pay the rest before the due date.",
+    ctaLabel: `Pay ${input.formattedDueToday} now`
+  };
+}
+function formatDepositRefundabilityLabel(depositRefundability) {
+  return depositRefundability === "non_refundable" ? "non-refundable" : "refundable";
+}
+
+// ../blocks/src/system/runtime/shared/bookingPaymentOptions.ts
+function buildBookingPaymentSelectionViewModel(input) {
+  const currency = input.priceCurrency ?? "USD";
+  const totalCents = Math.max(0, input.priceAmount ?? 0);
+  const allowedOptions = input.paymentTerms?.allowedOptions ?? [{ kind: "upfront" }];
+  const mode = allowedOptions.length > 1 ? "choice_required" : "single_option";
+  return {
+    mode,
+    sectionTitle: mode === "choice_required" ? "Choose how you'd like to pay" : "Payment",
+    serviceTitle: input.serviceTitle,
+    options: allowedOptions.map((option) => buildBookingPaymentOptionViewModel({
+      option,
+      totalCents,
+      currency,
+      bookingStartAt: input.bookingStartAt,
+      locale: input.locale
+    }))
+  };
+}
+function buildBookingPaymentOptionViewModel(input) {
+  switch (input.option.kind) {
+    case "upfront": {
+      const formattedTotal = formatPrice(input.totalCents, input.currency, input.locale);
+      const copy = buildUpfrontBookingPaymentOptionCopy(formattedTotal);
+      return {
+        kind: "upfront",
+        title: copy.title,
+        description: copy.description,
+        summaryRows: [
+          { label: "Total", value: formattedTotal },
+          { label: "Due today", value: formattedTotal }
+        ],
+        ctaLabel: copy.ctaLabel
+      };
+    }
+    case "deferred_manual": {
+      const formattedTotal = formatPrice(input.totalCents, input.currency, input.locale);
+      const copy = buildDeferredManualBookingPaymentOptionCopy();
+      return {
+        kind: "deferred_manual",
+        title: copy.title,
+        description: copy.description,
+        summaryRows: [
+          { label: "Total", value: formattedTotal },
+          { label: "Due today", value: formatPrice(0, input.currency, input.locale) }
+        ],
+        helperText: copy.helperText,
+        ctaLabel: copy.ctaLabel
+      };
+    }
+    case "instalment_plan": {
+      const schedulePreview = buildInstalmentSchedulePreview({
+        totalCents: input.totalCents,
+        option: input.option,
+        bookingStartAt: input.bookingStartAt
+      });
+      const dueToday = schedulePreview[0]?.amountCents ?? input.totalCents;
+      const futureRows = schedulePreview.slice(1);
+      const formattedTotal = formatPrice(input.totalCents, input.currency, input.locale);
+      const formattedDueToday = formatPrice(dueToday, input.currency, input.locale);
+      const depositRefundability = getBookingInstalmentDepositRefundability(input.option.plan);
+      const copy = buildInstalmentBookingPaymentOptionCopy({
+        formattedDueToday,
+        futurePaymentCount: futureRows.length,
+        formattedFirstFuture: futureRows[0] ? formatPrice(futureRows[0].amountCents, input.currency, input.locale) : null,
+        cadenceLabel: getPaymentCadenceLabel(input.option.plan),
+        depositRefundability
+      });
+      return {
+        kind: "instalment_plan",
+        title: copy.title,
+        description: copy.description,
+        summaryRows: [
+          { label: "Total", value: formattedTotal },
+          { label: "Due today", value: formattedDueToday },
+          ...depositRefundability ? [{
+            label: "Deposit policy",
+            value: depositRefundability === "non_refundable" ? "Non-refundable" : "Refundable"
+          }] : [],
+          ...futureRows.map((row) => ({
+            label: formatScheduleDate(row.dueAt, input.locale),
+            value: formatPrice(row.amountCents, input.currency, input.locale)
+          }))
+        ],
+        helperText: copy.helperText,
+        ctaLabel: copy.ctaLabel
+      };
+    }
+    case "flexible_balance": {
+      const dueToday = resolveFlexibleBalanceInitialPaymentCents({
+        totalAmountCents: input.totalCents,
+        config: input.option.config
+      });
+      const formattedTotal = formatPrice(input.totalCents, input.currency, input.locale);
+      const formattedDueToday = formatPrice(dueToday, input.currency, input.locale);
+      const dueAt = resolveFlexibleBalanceDueAt({
+        bookingStartAt: input.bookingStartAt ?? (/* @__PURE__ */ new Date()).toISOString(),
+        dueDateRule: input.option.config.dueDateRule
+      });
+      const copy = buildFlexibleBalanceBookingPaymentOptionCopy({
+        formattedDueToday,
+        dueDateLabel: formatScheduleDate(dueAt, input.locale),
+        depositRefundability: input.option.config.depositRefundability
+      });
+      return {
+        kind: "flexible_balance",
+        title: copy.title,
+        description: copy.description,
+        summaryRows: [
+          { label: "Total", value: formattedTotal },
+          { label: "Due today", value: formattedDueToday },
+          { label: "Balance due by", value: formatScheduleDate(dueAt, input.locale) },
+          {
+            label: "Deposit policy",
+            value: input.option.config.depositRefundability === "non_refundable" ? "Non-refundable" : "Refundable"
+          }
+        ],
+        helperText: copy.helperText,
+        ctaLabel: copy.ctaLabel
+      };
+    }
+    default:
+      return assertNever(input.option);
+  }
+}
+function buildInstalmentSchedulePreview(input) {
+  const startAt = input.bookingStartAt ?? (/* @__PURE__ */ new Date()).toISOString();
+  switch (input.option.plan.kind) {
+    case "deposit_plus_one_remainder": {
+      const deposit = clampConfiguredAmount(input.option.plan.depositAmountCents, input.totalCents);
+      const remainder = Math.max(0, input.totalCents - deposit);
+      return compactSchedulePreview([
+        { dueAt: startAt, amountCents: deposit },
+        {
+          dueAt: addIntervalPreservingMonthAnchor(
+            startAt,
+            input.option.plan.remainderDueCount,
+            input.option.plan.intervalUnit
+          ),
+          amountCents: remainder
+        }
+      ]);
+    }
+    case "deposit_plus_scheduled_instalments": {
+      const plan = input.option.plan;
+      const deposit = clampConfiguredAmount(plan.depositAmountCents, input.totalCents);
+      const remaining = Math.max(0, input.totalCents - deposit);
+      const instalments = splitAmountWithRemainderInFirst(
+        remaining,
+        plan.instalmentCount
+      );
+      return compactSchedulePreview([
+        { dueAt: startAt, amountCents: deposit },
+        ...instalments.map((amountCents, index) => ({
+          dueAt: addIntervalPreservingMonthAnchor(
+            startAt,
+            plan.intervalCount * (index + 1),
+            plan.intervalUnit
+          ),
+          amountCents
+        }))
+      ]);
+    }
+    case "equal_scheduled_instalments": {
+      const plan = input.option.plan;
+      const instalments = splitAmountWithRemainderInFirst(
+        input.totalCents,
+        plan.instalmentCount
+      );
+      return compactSchedulePreview(instalments.map((amountCents, index) => ({
+        dueAt: index === 0 ? startAt : addIntervalPreservingMonthAnchor(
+          startAt,
+          plan.intervalCount * index,
+          plan.intervalUnit
+        ),
+        amountCents
+      })));
+    }
+    default:
+      return assertNever(input.option.plan);
+  }
+}
+function getPaymentCadenceLabel(plan) {
+  const intervalCount = getBookingInstalmentPlanIntervalCount(plan);
+  const unitLabel = intervalCount === 1 ? plan.intervalUnit : `${plan.intervalUnit}s`;
+  return intervalCount === 1 ? unitLabel : `every ${intervalCount} ${unitLabel}`;
+}
+function compactSchedulePreview(schedule) {
+  return omitZeroAmountFutureRows(schedule);
+}
+function formatScheduleDate(isoString, locale) {
+  const date = new Date(isoString);
+  if (!Number.isFinite(date.getTime())) {
+    return isoString;
+  }
+  return new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(date);
+}
+
+// ../blocks/src/system/runtime/nodes/booking-form.headless.state.ts
+var asBookingFieldId = (id) => id;
+function createEmptyBookingValidationErrors() {
+  return { formError: null, fieldErrors: {} };
+}
+function createFormBookingValidationError(formError) {
+  return { formError, fieldErrors: {} };
+}
+function createFieldBookingValidationErrors(fieldErrors) {
+  return { formError: null, fieldErrors };
+}
+function hasBookingValidationErrors(errors) {
+  return Boolean(errors.formError) || Object.keys(errors.fieldErrors).length > 0;
+}
+function clearBookingFormError(errors) {
+  return errors.formError ? { ...errors, formError: null } : errors;
+}
+function clearBookingFieldError(errors, fieldId) {
+  if (!(fieldId in errors.fieldErrors)) return errors;
+  return {
+    ...errors,
+    fieldErrors: omitRecordKey(errors.fieldErrors, fieldId)
+  };
+}
+function createInitialBookingFlowReducerState(input) {
+  const initialData = input.initialData ?? {};
+  return {
+    phase: "editing",
+    currentStepId: "service-selection",
+    selectedServiceId: toOptionalAppointmentServiceId(
+      toOptionalString(initialData.serviceId) ?? input.defaultServiceId
+    ),
+    selectedResourceId: toOptionalAppointmentResourceId(
+      toOptionalString(initialData.resourceId) ?? input.defaultResourceId
+    ),
+    selectedDate: toOptionalString(initialData.selectedDate),
+    selectedSlot: null,
+    fieldValues: collectInitialFieldValues(initialData),
+    touchedFields: {},
+    discountCode: toOptionalString(initialData.discountCode) ?? "",
+    selectedCollectionOptionKind: toSelectedCollectionOptionKind(
+      initialData.selectedCollectionOptionKind
+    ),
+    selectedAppointmentPackageId: toOptionalCustomerPassId(
+      toOptionalString(initialData.selectedAppointmentPackageId)
+    ),
+    altchaSolution: null,
+    validationErrors: createEmptyBookingValidationErrors(),
+    feedback: { kind: "none" }
+  };
+}
+function collectInitialFieldValues(initialData) {
+  const values = {};
+  for (const [key, value] of Object.entries(initialData)) {
+    if (BOOKING_FORM_DATA_RESERVED_KEYS.has(key) || !isBookingFieldValue(value)) {
+      continue;
+    }
+    values[key] = value;
+  }
+  return values;
+}
+function toOptionalString(value) {
+  if (typeof value !== "string") return void 0;
+  const trimmed = value.trim();
+  return trimmed.length > 0 ? trimmed : void 0;
+}
+function toOptionalBrandedId(value, brand) {
+  const trimmed = toOptionalString(value);
+  return trimmed ? brand(trimmed) : void 0;
+}
+function toOptionalAppointmentServiceId(value) {
+  return toOptionalBrandedId(value, asAppointmentServiceId);
+}
+function toOptionalAppointmentResourceId(value) {
+  return toOptionalBrandedId(value, asAppointmentResourceId);
+}
+function toOptionalCustomerPassId(value) {
+  return toOptionalBrandedId(value, asCustomerPassId);
+}
+function isBookingFieldValue(value) {
+  return value === null || typeof value === "string" || typeof value === "number" || typeof value === "boolean" || Array.isArray(value) && value.every((item) => typeof item === "string");
+}
+function bookingFlowReducer(state, event) {
+  switch (event.type) {
+    case "service-selected":
+      return {
+        ...state,
+        selectedServiceId: event.serviceId,
+        selectedResourceId: void 0,
+        selectedDate: void 0,
+        selectedSlot: null,
+        selectedAppointmentPackageId: void 0,
+        selectedCollectionOptionKind: void 0,
+        validationErrors: clearBookingFormError(state.validationErrors)
+      };
+    case "resource-selected":
+      return {
+        ...state,
+        selectedResourceId: event.resourceId ?? void 0,
+        selectedDate: void 0,
+        selectedSlot: null,
+        validationErrors: clearBookingFormError(state.validationErrors)
+      };
+    case "date-selected":
+      return {
+        ...state,
+        selectedDate: event.date ?? void 0,
+        selectedSlot: null,
+        feedback: clearAvailabilityFeedback(state.feedback),
+        validationErrors: clearBookingFormError(state.validationErrors)
+      };
+    case "slot-selected":
+      return {
+        ...state,
+        selectedSlot: event.slot,
+        feedback: clearAvailabilityFeedback(state.feedback),
+        validationErrors: clearBookingFormError(state.validationErrors)
+      };
+    case "field-updated":
+      return {
+        ...state,
+        fieldValues: {
+          ...state.fieldValues,
+          [event.fieldId]: event.value
+        },
+        validationErrors: clearBookingFieldError(
+          clearBookingFormError(state.validationErrors),
+          event.fieldId
+        )
+      };
+    case "field-touched":
+      return {
+        ...state,
+        touchedFields: {
+          ...state.touchedFields,
+          [event.fieldId]: true
+        }
+      };
+    case "payment-option-selected":
+      return {
+        ...state,
+        selectedCollectionOptionKind: event.kind ?? void 0,
+        selectedAppointmentPackageId: void 0,
+        validationErrors: clearBookingFormError(state.validationErrors)
+      };
+    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 };
+    case "step-changed":
+      return {
+        ...state,
+        currentStepId: event.stepId,
+        validationErrors: clearBookingFormError(state.validationErrors)
+      };
+    case "validation-errors-set":
+      return { ...state, validationErrors: event.errors };
+    case "feedback-set":
+      return {
+        ...state,
+        phase: event.feedback.kind === "success" ? "completed" : "editing",
+        feedback: event.feedback
+      };
+    case "availability-selection-invalidated":
+      if (state.phase !== "editing") {
+        return state;
+      }
+      return {
+        ...state,
+        currentStepId: "datetime-selection",
+        selectedDate: event.invalidation.kind === "date_unavailable" ? void 0 : state.selectedDate,
+        selectedSlot: null,
+        feedback: {
+          kind: "error",
+          scope: "availability",
+          message: event.invalidation.message
+        },
+        validationErrors: clearBookingFormError(state.validationErrors)
+      };
+    case "feedback-cleared":
+      return { ...state, phase: "editing", feedback: { kind: "none" } };
+    case "submission-started":
+      return { ...state, phase: "submitting" };
+    case "submission-finished":
+      return state.phase === "submitting" ? { ...state, phase: "editing" } : state;
+    case "reset":
+      return event.initial;
+    default:
+      return assertNever(event);
+  }
+}
+function clearAvailabilityFeedback(feedback) {
+  return feedback.kind === "error" && feedback.scope === "availability" ? { kind: "none" } : feedback;
+}
+function resolveAvailabilitySelectionInvalidation(input) {
+  if (input.selectedDate && !input.availableDates.includes(input.selectedDate)) {
+    return {
+      kind: "date_unavailable",
+      message: "That date is no longer available. Please choose another date."
+    };
+  }
+  if (input.selectedSlot && !input.slots.some((slot) => slot.key === input.selectedSlot?.key)) {
+    return {
+      kind: "slot_unavailable",
+      message: "That time is no longer available. Please choose another time."
+    };
+  }
+  return { kind: "preserve" };
+}
+function toBookingSlotView(slot) {
+  return {
+    key: `${slot.startAt}|${slot.endAt}|${slot.resourceId}`,
+    startAt: slot.startAt,
+    endAt: slot.endAt,
+    resourceId: asAppointmentResourceId(slot.resourceId),
+    ...slot.resourceName ? { resourceName: slot.resourceName } : {},
+    ...slot.label ? { label: slot.label } : {}
+  };
+}
+function toBookingSlotViews(slots) {
+  return slots.map(toBookingSlotView);
+}
+function toBookingFormData(state) {
+  return {
+    ...state.fieldValues,
+    serviceId: state.selectedServiceId,
+    resourceId: state.selectedResourceId ?? state.selectedSlot?.resourceId,
+    selectedDate: state.selectedDate,
+    selectedSlot: state.selectedSlot?.startAt,
+    discountCode: state.discountCode || void 0,
+    selectedCollectionOptionKind: state.selectedCollectionOptionKind,
+    selectedAppointmentPackageId: state.selectedAppointmentPackageId
+  };
+}
+function buildBookingStepResolution(input) {
+  const defaultServiceId = input.defaultServiceId ?? resolveDefaultBookingServiceId(input.form, input.services);
+  const paymentResolution = resolveBookingPaymentStep({
+    data: input.data,
+    services: input.services,
+    defaultServiceId
+  });
+  if (!input.form) return { steps: [], paymentResolution };
+  const hasValidConfiguredService = Boolean(defaultServiceId) && input.services.some((service) => service.id === defaultServiceId);
+  const needsServiceSelection = Boolean(input.requiresServiceSelection) || !hasValidConfiguredService && input.services.length > 1 || Boolean(input.requiresResourceSelection) || Boolean(
+    input.form.settings?.serviceIds && input.form.settings.serviceIds.length > 1
+  );
+  const selectedService = paymentResolution.service;
+  const needsPayment = paymentResolution.mode !== "hidden" || Boolean(
+    input.enableAppointmentPackages && selectedService && (selectedService.priceAmount ?? 0) > 0
+  );
+  const hasFields = Boolean(input.form.schema?.fields.length);
+  return {
+    steps: [
+      {
+        id: "service-selection",
+        label: "Select Service",
+        visible: needsServiceSelection
+      },
+      { id: "datetime-selection", label: "Select Date & Time", visible: true },
+      { id: "payment-selection", label: "Payment", visible: needsPayment },
+      { id: "custom-fields", label: "Your Information", visible: hasFields }
+    ],
+    paymentResolution
+  };
+}
+function validateBookingStep(input) {
+  switch (input.stepId) {
+    case "service-selection": {
+      let formError = null;
+      if (!input.data.serviceId) {
+        formError = "Please select a service";
+      }
+      if (input.requiresResourceSelection && !(input.data.resourceId ?? input.defaultResourceId)) {
+        formError = "Please select a practitioner";
+      }
+      return formError ? { ok: false, errors: createFormBookingValidationError(formError) } : { ok: true };
+    }
+    case "datetime-selection":
+      return input.data.selectedSlot ? { ok: true } : {
+        ok: false,
+        errors: createFormBookingValidationError(
+          "Please select a date and time"
+        )
+      };
+    case "payment-selection": {
+      if (input.data.selectedAppointmentPackageId) return { ok: true };
+      const resolution = input.paymentResolution ?? resolveBookingPaymentStep({
+        data: input.data,
+        services: input.services,
+        defaultServiceId: input.defaultServiceId
+      });
+      if (resolution.mode === "hidden" || resolution.mode === "disclosure_only") {
+        return { ok: true };
+      }
+      if (resolution.mode === "unsupported") {
+        return {
+          ok: false,
+          errors: createFormBookingValidationError(
+            resolution.errorMessage ?? "This service cannot be booked right now."
+          )
+        };
+      }
+      return input.data.selectedCollectionOptionKind ? { ok: true } : {
+        ok: false,
+        errors: createFormBookingValidationError(
+          "Please choose a payment option"
+        )
+      };
+    }
+    case "custom-fields": {
+      const errors = validateBookingFields({
+        fields: input.form?.schema?.fields ?? [],
+        values: input.data
+      });
+      return Object.keys(errors).length > 0 ? { ok: false, errors: createFieldBookingValidationErrors(errors) } : { ok: true };
+    }
+    default:
+      return assertNever(input.stepId);
+  }
+}
+function validateBookingFields(input) {
+  const errors = {};
+  for (const field of input.fields) {
+    const error = validateBookingField(field, input.values[field.id]);
+    if (error) {
+      errors[field.id] = error;
+    }
+  }
+  return errors;
+}
+function validateBookingField(field, value) {
+  if (field.required && isBlankFieldValue(value)) {
+    return `${field.label} is required`;
+  }
+  if (isBlankFieldValue(value)) return null;
+  const strValue = typeof value === "string" ? value : String(value);
+  switch (field.type) {
+    case "email":
+      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(strValue) ? null : "Please enter a valid email address";
+    case "url":
+      try {
+        new URL(strValue);
+        return null;
+      } catch {
+        return "Please enter a valid URL";
+      }
+    case "tel":
+      return /^[+\d\s\-()]+$/.test(strValue) ? null : "Please enter a valid phone number";
+    case "number": {
+      const num = Number(value);
+      if (Number.isNaN(num)) return "Please enter a valid number";
+      if (field.min !== void 0 && num < field.min) {
+        return `Value must be at least ${field.min}`;
+      }
+      if (field.max !== void 0 && num > field.max) {
+        return `Value must be at most ${field.max}`;
+      }
+      return null;
+    }
+  }
+  if (typeof value === "string") {
+    if (field.minLength && value.length < field.minLength) {
+      return `Must be at least ${field.minLength} characters`;
+    }
+    if (field.maxLength && value.length > field.maxLength) {
+      return `Must be at most ${field.maxLength} characters`;
+    }
+    if (field.pattern) {
+      try {
+        const regex = new RegExp(field.pattern);
+        if (!regex.test(value)) return "Please match the required format";
+      } catch {
+        return "Please match the required format";
+      }
+    }
+  }
+  return null;
+}
+function deriveBookingFlowSteps(input) {
+  const stepResolution = buildBookingStepResolution({
+    form: input.form,
+    services: input.services,
+    data: input.data,
+    defaultServiceId: input.defaultServiceId,
+    requiresServiceSelection: input.requiresServiceSelection,
+    requiresResourceSelection: input.requiresResourceSelection,
+    enableAppointmentPackages: input.enableAppointmentPackages
+  });
+  const stepPlan = stepResolution.steps.filter((step) => step.visible);
+  const currentStepIndex = Math.max(
+    0,
+    stepPlan.findIndex((step) => step.id === input.currentStepId)
+  );
+  const validations = /* @__PURE__ */ new Map();
+  for (const step of stepPlan) {
+    validations.set(
+      step.id,
+      validateBookingStep({
+        stepId: step.id,
+        form: input.form,
+        services: input.services,
+        data: input.data,
+        defaultServiceId: input.defaultServiceId,
+        defaultResourceId: input.defaultResourceId,
+        requiresResourceSelection: input.requiresResourceSelection,
+        paymentResolution: stepResolution.paymentResolution
+      })
+    );
+  }
+  const steps = stepPlan.map((step, index) => {
+    const validation = validations.get(step.id) ?? { ok: true };
+    const state = index < currentStepIndex ? "complete" : index === currentStepIndex ? "active" : "available";
+    return {
+      id: step.id,
+      label: step.label,
+      state,
+      index,
+      visibleIndex: index,
+      errors: validation.ok ? createEmptyBookingValidationErrors() : validation.errors,
+      canEnter: index <= currentStepIndex,
+      canLeave: validation.ok
+    };
+  });
+  return {
+    steps,
+    currentStepIndex,
+    currentStep: steps[currentStepIndex] ?? null,
+    stepIds: steps.map((step) => step.id),
+    validations
+  };
+}
+function buildBookingAvailabilityQuery(input) {
+  if (!input.serviceId) {
+    return {
+      ok: false,
+      reason: "missing-service",
+      key: `missing-service|${input.timezone}`
+    };
+  }
+  if (input.requireDate && !input.selectedDate) {
+    return {
+      ok: false,
+      reason: "missing-date",
+      key: `${input.serviceId}|${input.resourceId ?? "any"}|missing-date|${input.timezone}`
+    };
+  }
+  return {
+    ok: true,
+    key: `${input.serviceId}|${input.resourceId ?? "any"}|${input.selectedDate ?? "all-dates"}|${input.timezone}`,
+    serviceId: input.serviceId,
+    resourceId: input.resourceId,
+    selectedDate: input.selectedDate,
+    timezone: input.timezone
+  };
+}
+function deriveBookingFieldViews(input) {
+  return (input.form?.schema?.fields ?? []).map((field) => {
+    const fieldId = asBookingFieldId(field.id);
+    const inputId = `${input.idPrefix}-${fieldId}`;
+    const helpTextId = field.helpText ? `${inputId}-help` : null;
+    const fieldValue = input.values[field.id] ?? null;
+    const localError = input.touched?.[field.id] ? validateBookingField(field, fieldValue) : null;
+    const error = input.errors[field.id] ?? localError;
+    const errorId = error ? `${inputId}-error` : null;
+    const describedBy = [helpTextId, errorId].filter(Boolean).join(" ") || void 0;
+    return {
+      field,
+      id: fieldId,
+      label: field.label,
+      type: field.type,
+      value: fieldValue,
+      required: Boolean(field.required),
+      error,
+      helpText: field.helpText ?? null,
+      inputId,
+      labelId: `${inputId}-label`,
+      helpTextId,
+      errorId,
+      describedBy,
+      ariaInvalid: Boolean(error)
+    };
+  });
+}
+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 prepared = prepareBookingSubmission({
+    formId: input.formId,
+    data: toBookingFormData({
+      ...input.state,
+      altchaSolution: input.altchaSolution ?? input.state.altchaSolution
+    }),
+    services: input.services,
+    defaultServiceId: input.defaultServiceId,
+    defaultResourceId: input.defaultResourceId,
+    altchaSolution: input.altchaSolution ?? input.state.altchaSolution,
+    viewerTimeZone: input.viewerTimeZone
+  });
+  if (!prepared.ok) {
+    const message = formatBookingSubmissionPreparationError(prepared.error);
+    return {
+      ok: false,
+      errors: createFormBookingValidationError(message),
+      message
+    };
+  }
+  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
+    }
+  };
+}
+function resolveAppointmentPackagesModel(input) {
+  if (!input.enabled) {
+    return {
+      kind: "disabled",
+      enabled: false,
+      canLoad: false,
+      unavailableReason: "disabled",
+      state: { tag: "idle" },
+      items: [],
+      selected: null
+    };
+  }
+  if (!input.canLoad) {
+    const unavailableReason = input.unavailableReason === "missing-portal-auth" ? "missing-portal-auth" : "missing-priced-service";
+    return {
+      kind: "unavailable",
+      enabled: true,
+      canLoad: false,
+      unavailableReason,
+      state: { tag: "idle" },
+      items: [],
+      selected: null
+    };
+  }
+  switch (input.state.tag) {
+    case "idle":
+      return {
+        kind: "idle",
+        enabled: true,
+        canLoad: true,
+        unavailableReason: null,
+        state: input.state,
+        items: [],
+        selected: null
+      };
+    case "loading":
+      return {
+        kind: "loading",
+        enabled: true,
+        canLoad: true,
+        unavailableReason: null,
+        state: input.state,
+        items: [],
+        selected: null
+      };
+    case "error":
+      return {
+        kind: "error",
+        enabled: true,
+        canLoad: true,
+        unavailableReason: null,
+        state: input.state,
+        items: [],
+        selected: null
+      };
+    case "loaded": {
+      const items = input.items.map(toHeadlessEligibleAppointmentPackage);
+      const selected = input.selected ? toHeadlessEligibleAppointmentPackage(input.selected) : null;
+      return {
+        kind: "ready",
+        enabled: true,
+        canLoad: true,
+        unavailableReason: null,
+        state: { tag: "loaded", value: items },
+        items,
+        selected
+      };
+    }
+    default:
+      return assertNever(input.state);
+  }
+}
+function toHeadlessEligibleAppointmentPackage(appointmentPackage) {
+  return {
+    ...appointmentPackage,
+    customerPassId: asCustomerPassId(appointmentPackage.customerPassId),
+    passId: asPassId(appointmentPackage.passId)
+  };
+}
+function resolveHeadlessBookingStatus(input) {
+  if (input.phase === "submitting") return { tag: "submitting" };
+  if (input.phase === "completed" && input.feedback.kind === "success") {
+    return {
+      tag: "success",
+      resourceName: input.feedback.resourceName
+    };
+  }
+  if (input.feedback.kind === "error") {
+    return {
+      tag: "error",
+      message: input.feedback.message
+    };
+  }
+  return { tag: "ready" };
+}
+function resolveHeadlessBookingView(input) {
+  if (!input.form) {
+    return {
+      kind: "missing",
+      message: "Booking form not found."
+    };
+  }
+  if (input.feedback.kind === "success") {
+    return {
+      kind: "success",
+      message: input.feedback.message,
+      resourceName: input.feedback.resourceName
+    };
+  }
+  if (input.feedback.kind === "error") {
+    return {
+      kind: "error",
+      message: input.feedback.message
+    };
+  }
+  return { kind: "form" };
+}
+function describeUnknownError(error, fallback) {
+  return error instanceof Error ? error.message : fallback;
+}
+function isBlankFieldValue(value) {
+  if (value == null) return true;
+  if (typeof value === "string") return value.trim().length === 0;
+  if (value === false) return true;
+  if (Array.isArray(value)) return value.length === 0;
+  return false;
+}
+function omitRecordKey(record, key) {
+  if (!(key in record)) return record;
+  const { [key]: _removed, ...rest } = record;
+  return rest;
+}
+
+// ../blocks/src/system/runtime/hooks/useHeadlessBookingFlow.ts
+function useHeadlessBookingFlow(options) {
+  const viewerTimeZone = options.viewerTimeZone ?? getRuntimeTimeZone();
+  const formKey = asFormId(options.formId);
+  const defaultServiceId = toOptionalAppointmentServiceId(
+    options.initialServiceId ?? resolveDefaultBookingServiceId(options.form, options.services) ?? void 0
+  );
+  const defaultResourceId = toOptionalAppointmentResourceId(
+    options.initialResourceId
+  );
+  const initialState = useMemo(
+    () => createInitialBookingFlowReducerState({
+      defaultServiceId,
+      defaultResourceId,
+      initialData: options.initialData
+    }),
+    [defaultResourceId, defaultServiceId, options.initialData]
+  );
+  const [state, dispatch] = useReducer(bookingFlowReducer, initialState);
+  const api = useBlockApi();
+  const [resourcesState, setResourcesState] = useState({ tag: "idle" });
+  const resourcesRequestIdRef = useRef(0);
+  const [appointmentPackages, setAppointmentPackages] = useState({ tag: "idle" });
+  const appointmentPackagesRequestIdRef = useRef(0);
+  const selectedServiceId = state.selectedServiceId ?? defaultServiceId;
+  const selectedResourceId = state.selectedResourceId ?? defaultResourceId;
+  const selectedService = options.services.find((service) => service.id === selectedServiceId) ?? null;
+  const hasPortalBearerAuth = (api.config.authOverrides?.portal ?? api.config.auth).type === "bearer";
+  const canLoadAppointmentPackages = Boolean(
+    options.enableAppointmentPackages && hasPortalBearerAuth && selectedService && (selectedService.priceAmount ?? 0) > 0
+  );
+  const appointmentPackagesUnavailableReason = !options.enableAppointmentPackages ? "disabled" : !selectedService || (selectedService.priceAmount ?? 0) <= 0 ? "missing-priced-service" : !hasPortalBearerAuth ? "missing-portal-auth" : null;
+  const data = useMemo(() => toBookingFormData(state), [state]);
+  const availabilityDatesQuery = useMemo(
+    () => buildBookingAvailabilityQuery({
+      serviceId: selectedServiceId,
+      resourceId: selectedResourceId,
+      timezone: viewerTimeZone
+    }),
+    [selectedResourceId, selectedServiceId, viewerTimeZone]
+  );
+  const availabilitySlotsQuery = useMemo(
+    () => buildBookingAvailabilityQuery({
+      serviceId: selectedServiceId,
+      resourceId: selectedResourceId,
+      selectedDate: state.selectedDate,
+      timezone: viewerTimeZone,
+      requireDate: true
+    }),
+    [selectedResourceId, selectedServiceId, state.selectedDate, viewerTimeZone]
+  );
+  const stepState = useMemo(
+    () => deriveBookingFlowSteps({
+      form: options.form,
+      services: options.services,
+      data,
+      defaultServiceId,
+      defaultResourceId,
+      currentStepId: state.currentStepId,
+      requiresServiceSelection: options.requiresServiceSelection,
+      requiresResourceSelection: options.requiresResourceSelection,
+      enableAppointmentPackages: options.enableAppointmentPackages
+    }),
+    [
+      data,
+      defaultServiceId,
+      defaultResourceId,
+      options.enableAppointmentPackages,
+      options.form,
+      options.requiresResourceSelection,
+      options.requiresServiceSelection,
+      options.services,
+      state.currentStepId
+    ]
+  );
+  const {
+    availableDates,
+    isLoading: isLoadingDates,
+    error: datesError,
+    hasMore,
+    loadMore,
+    loadedRange: availableDatesLoadedRange
+  } = useAvailableDates({
+    siteId: options.siteId,
+    serviceId: availabilityDatesQuery.ok ? availabilityDatesQuery.serviceId : void 0,
+    resourceId: availabilityDatesQuery.ok ? availabilityDatesQuery.resourceId : void 0,
+    timezone: viewerTimeZone,
+    initialDays: 14
+  });
+  const {
+    slots,
+    isLoading: isLoadingSlots,
+    hasLoaded: hasLoadedSlots,
+    error: slotsError
+  } = useAvailableSlots({
+    siteId: options.siteId,
+    serviceId: availabilitySlotsQuery.ok ? availabilitySlotsQuery.serviceId : void 0,
+    resourceId: availabilitySlotsQuery.ok ? availabilitySlotsQuery.resourceId : void 0,
+    selectedDate: availabilitySlotsQuery.ok ? availabilitySlotsQuery.selectedDate ?? "" : "",
+    timezone: viewerTimeZone
+  });
+  const slotViews = useMemo(() => toBookingSlotViews(slots), [slots]);
+  const dateValues = useMemo(
+    () => [...availableDates].sort(),
+    [availableDates]
+  );
+  useEffect(() => {
+    if (state.phase !== "editing") return;
+    const canEvaluateDate = availabilityDatesQuery.ok && Boolean(availableDatesLoadedRange) && !isLoadingDates && !datesError;
+    const canEvaluateSlot = !state.selectedSlot || availabilitySlotsQuery.ok && hasLoadedSlots && !isLoadingSlots && !slotsError;
+    if (!canEvaluateDate || !canEvaluateSlot) return;
+    const invalidation = resolveAvailabilitySelectionInvalidation({
+      selectedDate: state.selectedDate,
+      selectedSlot: state.selectedSlot,
+      availableDates: dateValues,
+      slots: slotViews
+    });
+    if (invalidation.kind === "preserve") return;
+    dispatch({
+      type: "availability-selection-invalidated",
+      invalidation
+    });
+  }, [
+    availabilityDatesQuery.ok,
+    availabilitySlotsQuery.ok,
+    availableDatesLoadedRange,
+    dateValues,
+    datesError,
+    hasLoadedSlots,
+    isLoadingDates,
+    isLoadingSlots,
+    slotViews,
+    slotsError,
+    state.phase,
+    state.selectedDate,
+    state.selectedSlot
+  ]);
+  const fields = useMemo(
+    () => deriveBookingFieldViews({
+      form: options.form,
+      values: state.fieldValues,
+      errors: state.validationErrors.fieldErrors,
+      touched: state.touchedFields,
+      idPrefix: `booking-${options.formId}`
+    }),
+    [
+      options.form,
+      options.formId,
+      state.fieldValues,
+      state.touchedFields,
+      state.validationErrors.fieldErrors
+    ]
+  );
+  useEffect(() => {
+    const requestId = ++resourcesRequestIdRef.current;
+    let isCancelled = false;
+    if (!selectedServiceId) {
+      setResourcesState({ tag: "idle" });
+      return () => {
+        isCancelled = true;
+        resourcesRequestIdRef.current += 1;
+      };
+    }
+    setResourcesState({ tag: "loading" });
+    api.getBookingResources({ serviceId: selectedServiceId }).then((result) => {
+      if (isCancelled || requestId !== resourcesRequestIdRef.current) return;
+      setResourcesState({
+        tag: "loaded",
+        value: (result.options ?? []).map((option) => ({
+          id: asAppointmentResourceId(option.id),
+          label: option.label
+        }))
+      });
+    }).catch((error) => {
+      if (isCancelled || requestId !== resourcesRequestIdRef.current) return;
+      setResourcesState({
+        tag: "error",
+        message: describeUnknownError(
+          error,
+          "Failed to load booking resources."
+        )
+      });
+    });
+    return () => {
+      isCancelled = true;
+      resourcesRequestIdRef.current += 1;
+    };
+  }, [api, selectedServiceId]);
+  useEffect(() => {
+    const requestId = ++appointmentPackagesRequestIdRef.current;
+    let isCancelled = false;
+    if (!canLoadAppointmentPackages || !selectedServiceId) {
+      setAppointmentPackages({ tag: "idle" });
+      return () => {
+        isCancelled = true;
+        appointmentPackagesRequestIdRef.current += 1;
+      };
+    }
+    setAppointmentPackages({ tag: "loading" });
+    api.getEligibleAppointmentPackages({ serviceId: selectedServiceId }).then((result) => {
+      if (isCancelled || requestId !== appointmentPackagesRequestIdRef.current) {
+        return;
+      }
+      setAppointmentPackages({ tag: "loaded", value: result.packages });
+    }).catch((error) => {
+      if (isCancelled || requestId !== appointmentPackagesRequestIdRef.current) {
+        return;
+      }
+      setAppointmentPackages({
+        tag: "error",
+        message: describeUnknownError(
+          error,
+          "Could not check package credits."
+        )
+      });
+    });
+    return () => {
+      isCancelled = true;
+      appointmentPackagesRequestIdRef.current += 1;
+    };
+  }, [api, canLoadAppointmentPackages, selectedServiceId]);
+  useEffect(() => {
+    if (!state.selectedAppointmentPackageId) return;
+    if (appointmentPackages.tag !== "loaded") {
+      if (!canLoadAppointmentPackages) {
+        dispatch({ type: "appointment-package-selected", packageId: null });
+      }
+      return;
+    }
+    const stillEligible = appointmentPackages.value.some(
+      (appointmentPackage) => appointmentPackage.customerPassId === state.selectedAppointmentPackageId
+    );
+    if (!stillEligible) {
+      dispatch({ type: "appointment-package-selected", packageId: null });
+    }
+  }, [
+    appointmentPackages,
+    canLoadAppointmentPackages,
+    state.selectedAppointmentPackageId
+  ]);
+  const resources = useMemo(
+    () => resourcesState.tag === "loaded" ? resourcesState.value : [],
+    [resourcesState]
+  );
+  useEffect(() => {
+    if (options.shouldAutoSelectSingleResource === false) return;
+    if (selectedResourceId) return;
+    if (state.selectedDate || state.selectedSlot) return;
+    if (resources.length !== 1) return;
+    const onlyResource = resources[0];
+    if (onlyResource) {
+      dispatch({ type: "resource-selected", resourceId: onlyResource.id });
+    }
+  }, [
+    options.shouldAutoSelectSingleResource,
+    resources,
+    selectedResourceId,
+    state.selectedDate,
+    state.selectedSlot
+  ]);
+  const appointmentDiscountContext = selectedService && (selectedService.priceAmount ?? 0) > 0 ? { type: "appointment", serviceId: selectedService.id } : null;
+  const discountUi = useDiscountCodeUi({
+    api,
+    discountContext: appointmentDiscountContext,
+    subtotalCents: selectedService?.priceAmount ?? 0
+  });
+  const { submit, clearFeedback } = useBookingSubmission(options.siteId);
+  const submittingRef = useRef(false);
+  const latestRef = useLatestRef({
+    state,
+    data,
+    form: options.form,
+    formId: formKey,
+    services: options.services,
+    defaultServiceId,
+    defaultResourceId,
+    requiresResourceSelection: options.requiresResourceSelection,
+    successMessage: options.successMessage,
+    viewerTimeZone,
+    discountCode: discountUi.discountCode,
+    submit,
+    clearFeedback,
+    setDiscountCode: discountUi.setDiscountCode,
+    navigateToCheckout: options.navigateToCheckout ?? navigateToCheckout,
+    steps: stepState.steps,
+    currentStep: stepState.currentStep,
+    currentStepIndex: stepState.currentStepIndex,
+    stepIds: stepState.stepIds,
+    validations: stepState.validations,
+    initialState
+  });
+  const submitBooking = useCallback(
+    async (submitOptions) => {
+      const latest = latestRef.current;
+      if (submittingRef.current || latest.state.phase === "submitting") {
+        return {
+          ok: false,
+          reason: "blocked",
+          message: "submission-in-flight"
+        };
+      }
+      const plan = buildBookingSubmitPlan({
+        formId: latest.formId,
+        form: latest.form,
+        state: {
+          ...latest.state,
+          discountCode: latest.discountCode
+        },
+        services: latest.services,
+        defaultServiceId: latest.defaultServiceId,
+        defaultResourceId: latest.defaultResourceId,
+        requiresResourceSelection: latest.requiresResourceSelection,
+        altchaSolution: latest.state.altchaSolution,
+        viewerTimeZone: latest.viewerTimeZone,
+        redirect: submitOptions?.redirect ?? "manual",
+        successUrl: submitOptions?.successUrl,
+        cancelUrl: submitOptions?.cancelUrl
+      });
+      if (!plan.ok) {
+        dispatch({ type: "validation-errors-set", errors: plan.errors });
+        return {
+          ok: false,
+          reason: "validation-failed",
+          errors: plan.errors
+        };
+      }
+      submittingRef.current = true;
+      dispatch({ type: "submission-started" });
+      try {
+        const result = await latest.submit(plan.value);
+        if (!result.ok) {
+          dispatch({ type: "altcha-solution-invalidated" });
+          dispatch({
+            type: "feedback-set",
+            feedback: {
+              kind: "error",
+              scope: "submission",
+              message: result.error
+            }
+          });
+          return {
+            ok: false,
+            reason: "submission-failed",
+            message: result.error
+          };
+        }
+        if (result.data.type === "checkout_redirect") {
+          if (plan.redirect === "auto" && typeof window !== "undefined") {
+            latest.navigateToCheckout(result.data.checkoutUrl);
+          }
+          return {
+            ok: true,
+            outcome: {
+              kind: "checkout_redirect",
+              checkoutUrl: result.data.checkoutUrl
+            }
+          };
+        }
+        dispatch({
+          type: "feedback-set",
+          feedback: {
+            kind: "success",
+            message: getBookingSuccessMessage(latest.successMessage),
+            resourceName: result.data.appointment.resourceName
+          }
+        });
+        return {
+          ok: true,
+          outcome: {
+            kind: "booked",
+            appointmentId: result.data.appointment.id,
+            resourceName: result.data.appointment.resourceName
+          }
+        };
+      } finally {
+        submittingRef.current = false;
+        dispatch({ type: "submission-finished" });
+      }
+    },
+    [latestRef]
+  );
+  const actions = useMemo(
+    () => ({
+      selectService: (serviceId) => dispatch({
+        type: "service-selected",
+        serviceId: asAppointmentServiceId(serviceId)
+      }),
+      selectResource: (resourceId) => dispatch({
+        type: "resource-selected",
+        resourceId: resourceId ? asAppointmentResourceId(resourceId) : null
+      }),
+      selectDate: (date) => dispatch({ type: "date-selected", date }),
+      selectSlot: (slot) => dispatch({
+        type: "slot-selected",
+        slot: slot ? toBookingSlotView(slot) : null
+      }),
+      updateField: (fieldId, value) => dispatch({
+        type: "field-updated",
+        fieldId: asBookingFieldId(fieldId),
+        value
+      }),
+      markFieldTouched: (fieldId) => dispatch({ type: "field-touched", fieldId: asBookingFieldId(fieldId) }),
+      selectPaymentOption: (kind) => dispatch({ type: "payment-option-selected", kind }),
+      selectAppointmentPackage: (packageId) => dispatch({
+        type: "appointment-package-selected",
+        packageId: packageId ? asCustomerPassId(packageId) : null
+      }),
+      setDiscountCode: (code) => {
+        dispatch({ type: "discount-code-changed", code });
+        latestRef.current.setDiscountCode(code);
+      },
+      clearDiscountCode: () => {
+        dispatch({ type: "discount-code-changed", code: "" });
+        latestRef.current.setDiscountCode("");
+      },
+      setAltchaSolution: (solution) => dispatch({ type: "altcha-solution-set", solution }),
+      invalidateSpamProtection: () => dispatch({ type: "altcha-solution-invalidated" }),
+      next: async () => {
+        const latest = latestRef.current;
+        if (!latest.currentStep) return { ok: true };
+        const validation = latest.validations.get(latest.currentStep.id) ?? {
+          ok: true
+        };
+        if (!validation.ok) {
+          dispatch({
+            type: "validation-errors-set",
+            errors: validation.errors
+          });
+          return {
+            ok: false,
+            reason: "validation-failed",
+            errors: validation.errors
+          };
+        }
+        dispatch({
+          type: "validation-errors-set",
+          errors: createEmptyBookingValidationErrors()
+        });
+        const nextStepId = latest.stepIds[latest.currentStepIndex + 1];
+        if (nextStepId) dispatch({ type: "step-changed", stepId: nextStepId });
+        return { ok: true };
+      },
+      back: () => {
+        const latest = latestRef.current;
+        const previousStepId = latest.stepIds[latest.currentStepIndex - 1];
+        if (previousStepId) {
+          dispatch({ type: "step-changed", stepId: previousStepId });
+        }
+      },
+      goToStep: async (stepId) => {
+        if (!latestRef.current.stepIds.includes(stepId)) {
+          return { ok: false, reason: "blocked", message: "step-hidden" };
+        }
+        dispatch({ type: "step-changed", stepId });
+        return { ok: true };
+      },
+      submit: submitBooking,
+      reset: () => dispatch({ type: "reset", initial: latestRef.current.initialState }),
+      clearFeedback: () => {
+        dispatch({ type: "feedback-cleared" });
+        latestRef.current.clearFeedback();
+      }
+    }),
+    [latestRef, submitBooking]
+  );
+  const paymentResolution = useMemo(
+    () => resolvePaymentMode({
+      data,
+      defaultServiceId,
+      services: options.services
+    }),
+    [data, defaultServiceId, options.services]
+  );
+  const paymentSelection = useMemo(
+    () => selectedService && paymentResolution.mode !== "unsupported" ? buildBookingPaymentSelectionViewModel({
+      serviceTitle: selectedService.title,
+      paymentTerms: selectedService.paymentTerms,
+      priceAmount: selectedService.priceAmount,
+      priceCurrency: selectedService.priceCurrency,
+      bookingStartAt: state.selectedSlot?.startAt
+    }) : null,
+    [paymentResolution.mode, selectedService, state.selectedSlot?.startAt]
+  );
+  const appointmentPackageItems = appointmentPackages.tag === "loaded" ? appointmentPackages.value : [];
+  const selectedAppointmentPackage = appointmentPackageItems.find(
+    (appointmentPackage) => appointmentPackage.customerPassId === state.selectedAppointmentPackageId
+  ) ?? null;
+  const spamProtectionEnabled = options.spamProtectionEnabled ?? isSpamProtectionEnabled();
+  const status = resolveHeadlessBookingStatus({
+    feedback: state.feedback,
+    phase: state.phase
+  });
+  const view = resolveHeadlessBookingView({
+    form: options.form,
+    feedback: state.feedback
+  });
+  const appointmentPackagesModel = resolveAppointmentPackagesModel({
+    enabled: Boolean(options.enableAppointmentPackages),
+    canLoad: canLoadAppointmentPackages,
+    unavailableReason: appointmentPackagesUnavailableReason,
+    state: appointmentPackages,
+    items: appointmentPackageItems,
+    selected: selectedAppointmentPackage
+  });
+  const payment = paymentResolution.mode === "unsupported" ? {
+    kind: "unsupported",
+    mode: "unsupported",
+    selection: null,
+    selectedCollectionOptionKind: state.selectedCollectionOptionKind,
+    selectedAppointmentPackageId: state.selectedAppointmentPackageId,
+    appointmentPackages: appointmentPackagesModel,
+    errorMessage: paymentResolution.errorMessage ?? "This service cannot be booked right now."
+  } : {
+    kind: "ok",
+    mode: paymentResolution.mode,
+    selection: paymentSelection,
+    selectedCollectionOptionKind: state.selectedCollectionOptionKind,
+    selectedAppointmentPackageId: state.selectedAppointmentPackageId,
+    appointmentPackages: appointmentPackagesModel
+  };
+  return {
+    status,
+    view,
+    steps: stepState.steps,
+    currentStep: stepState.currentStep,
+    data,
+    services: {
+      items: options.services,
+      selected: selectedService,
+      defaultServiceId,
+      requiresSelection: Boolean(options.requiresServiceSelection)
+    },
+    resources: {
+      items: resources,
+      selected: resources.find((resource) => resource.id === selectedResourceId) ?? null,
+      selectedResourceId,
+      state: resourcesState,
+      requiresSelection: Boolean(options.requiresResourceSelection)
+    },
+    availability: {
+      selectedDate: state.selectedDate,
+      selectedSlot: state.selectedSlot,
+      availableDates: dateValues,
+      slots: slotViews,
+      datesState: datesError ? { tag: "error", message: datesError } : isLoadingDates ? { tag: "loading" } : { tag: "loaded", value: dateValues },
+      slotsState: slotsError ? { tag: "error", message: slotsError } : isLoadingSlots ? { tag: "loading" } : { tag: "loaded", value: slotViews },
+      timezone: viewerTimeZone,
+      hasMoreDates: hasMore,
+      loadMoreDates: loadMore
+    },
+    fields: {
+      items: fields,
+      values: state.fieldValues,
+      errors: state.validationErrors.fieldErrors,
+      touched: state.touchedFields
+    },
+    payment,
+    discount: {
+      code: discountUi.discountCode,
+      isOpen: discountUi.discountUiOpen,
+      manualCodeEntryAllowed: discountUi.manualCodeEntryAllowed,
+      loading: discountUi.discountsAvailableLoading,
+      autoAppliedDiscount: discountUi.autoAppliedDiscount,
+      setCode: actions.setDiscountCode,
+      setOpen: discountUi.setDiscountUiOpen,
+      clear: actions.clearDiscountCode
+    },
+    spamProtection: spamProtectionEnabled ? {
+      enabled: true,
+      provider: "altcha",
+      challenge: { url: getChallengeUrl(), auto: "onfocus" },
+      solution: state.altchaSolution
+    } : { enabled: false },
+    feedback: state.feedback,
+    actions
+  };
+}
+function navigateToCheckout(checkoutUrl) {
+  window.location.href = checkoutUrl;
+}
+function resolvePaymentMode(input) {
+  return resolveBookingPaymentStep(input);
+}
+function useLatestRef(value) {
+  const ref = useRef(value);
+  useLayoutEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref;
+}
+function useAppointmentCheckoutVerification(config) {
+  const api = useBlockApi();
+  const pollingConfig = useMemo(() => {
+    if (!config) return null;
+    return {
+      pollFn: () => api.getAppointmentBookingStatus({ sessionId: config.sessionId }),
+      isComplete: (result) => (result.paymentStatus === "completed" || result.paymentStatus === "not_required") && result.appointmentStatus === "confirmed",
+      isFailed: (result) => result.paymentStatus === "failed" || result.paymentStatus === "cancelled" || result.paymentStatus === "refunded" || result.appointmentStatus === "cancelled",
+      maxAttempts: config.maxAttempts,
+      interval: config.pollInterval
+    };
+  }, [api, config]);
+  const polling = usePolling(pollingConfig);
+  const state = resolveAppointmentCheckoutVerificationState({
+    config,
+    pollingStatus: polling.status,
+    result: polling.result,
+    error: polling.error
+  });
+  return {
+    state,
+    retry: polling.retry
+  };
+}
+var DatePicker = ({
+  value,
+  onChange,
+  dateOptions,
+  required = true,
+  isLoading = false,
+  isEmpty = false,
+  hasMore = false,
+  onLoadMore
+}) => {
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: "ab-stack--sm", children: [
+      /* @__PURE__ */ jsxs("label", { className: "ab-label", children: [
+        "Select Date",
+        required && /* @__PURE__ */ jsx("span", { className: "ab-required", children: "*" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "ab-skeleton" }),
+      /* @__PURE__ */ jsx("p", { className: "ab-text ab-text--muted ab-text--sm", children: "Loading available dates..." })
+    ] });
+  }
+  if (isEmpty) {
+    return /* @__PURE__ */ jsxs("div", { className: "ab-stack--sm", children: [
+      /* @__PURE__ */ jsxs("label", { className: "ab-label", children: [
+        "Select Date",
+        required && /* @__PURE__ */ jsx("span", { className: "ab-required", children: "*" })
+      ] }),
+      /* @__PURE__ */ jsx(FeedbackMessage, { tone: "warning", className: "ab-alert ab-alert--warning", role: "status", children: /* @__PURE__ */ jsxs("p", { className: "ab-text", children: [
+        "No available dates in this period.",
+        hasMore && onLoadMore && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onLoadMore,
+            className: "ab-link",
+            children: "Check later dates"
+          }
+        )
+      ] }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "ab-stack--sm", children: [
+    /* @__PURE__ */ jsxs("label", { htmlFor: "booking-date", className: "ab-label", children: [
+      "Select Date",
+      required && /* @__PURE__ */ jsx("span", { className: "ab-required", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        id: "booking-date",
+        value,
+        onChange: (e) => onChange(e.target.value),
+        required,
+        className: "ab-select",
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", children: "Choose a date..." }),
+          dateOptions.map((date) => /* @__PURE__ */ jsx("option", { value: date, children: formatDate(date) }, date))
+        ]
+      }
+    ),
+    hasMore && onLoadMore && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onLoadMore,
+        className: "ab-link",
+        children: "Load more dates \u2192"
+      }
+    )
+  ] });
+};
+var TimeSlotSelector = ({
+  value,
+  onChange,
+  slots,
+  isLoading,
+  required = true
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: "ab-stack--sm", children: [
+    /* @__PURE__ */ jsxs("label", { htmlFor: "booking-slot", className: "ab-label", children: [
+      "Select Time",
+      required && /* @__PURE__ */ jsx("span", { className: "ab-required", children: "*" })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info ab-center", role: "status", children: "Loading available times..." }) : slots.length === 0 ? /* @__PURE__ */ jsx(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info ab-center", role: "status", children: "No available times for this date" }) : /* @__PURE__ */ jsxs(
+      "select",
+      {
+        id: "booking-slot",
+        value,
+        onChange: (e) => onChange(e.target.value),
+        required,
+        className: "ab-select",
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", children: "Choose a time..." }),
+          slots.map((slot) => /* @__PURE__ */ jsx("option", { value: slot.startAt, children: formatTime(slot.startAt) }, slot.startAt))
+        ]
+      }
+    )
+  ] });
+};
+var paymentOptionLayoutStyle = {
+  alignItems: "flex-start",
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.25rem",
+  justifyContent: "flex-start",
+  width: "100%"
+};
+var summaryStackStyle = {
+  gap: "0.125rem"
+};
+function HeadlessBookingDefaultForm({
+  booking,
+  onSubmit
+}) {
+  const currentStep = booking.currentStep;
+  const currentStepIndex = currentStep?.visibleIndex ?? 0;
+  const isFirstStep = currentStepIndex === 0;
+  const isLastStep = currentStepIndex === booking.steps.length - 1;
+  const isSubmitting = booking.status.tag === "submitting";
+  const handlePrimaryAction = async () => {
+    const validation = await booking.actions.next();
+    if (!validation.ok) return;
+    if (isLastStep) {
+      await onSubmit();
+    }
+  };
+  if (!currentStep) {
+    return /* @__PURE__ */ jsx("div", { className: "rb-text-center rb-py-12", children: /* @__PURE__ */ jsx("p", { className: "status-muted", children: "No steps available" }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "multi-step-form", children: [
+    /* @__PURE__ */ jsx("div", { className: "rb-mb-8", children: /* @__PURE__ */ jsx(
+      DefaultBookingProgress,
+      {
+        steps: booking.steps,
+        currentIndex: currentStepIndex
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "step-content", children: /* @__PURE__ */ jsx(DefaultBookingStepContent, { booking }) }),
+    /* @__PURE__ */ jsx(DefaultBookingErrorSummary, { errors: currentStep.errors }),
+    /* @__PURE__ */ jsxs("div", { className: "rb-flex rb-gap-3 rb-mt-8", children: [
+      !isFirstStep ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: booking.actions.back,
+          className: themeButtonClassName({ variant: "outline", size: "md" }),
+          children: "Back"
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            void handlePrimaryAction();
+          },
+          disabled: isSubmitting,
+          className: themeButtonClassName({
+            variant: "primary",
+            size: "md",
+            extraClassName: "rb-flex-1"
+          }),
+          children: isSubmitting ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              SpinnerNode,
+              {
+                size: "sm",
+                color: "inherit",
+                className: "rb-mr-2",
+                srLabel: "Submitting"
+              }
+            ),
+            "Submitting..."
+          ] }) : isLastStep ? "Complete" : "Continue"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(DefaultBookingDiscount, { booking }),
+    /* @__PURE__ */ jsx(DefaultBookingFeedback, { booking }),
+    /* @__PURE__ */ jsx(DefaultBookingAltcha, { booking })
+  ] });
+}
+function DefaultBookingProgress({
+  steps,
+  currentIndex
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "rb-flex rb-items-center rb-justify-between", children: steps.map((step, index) => {
+    const isActive = index === currentIndex;
+    const isCompleted = index < currentIndex;
+    const isLast = index === steps.length - 1;
+    return /* @__PURE__ */ jsxs("div", { className: "rb-flex rb-items-center rb-flex-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "rb-flex rb-items-center rb-gap-2 rb-cursor-default", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `
+                  step-circle transition-theme-standard
+                  ${isActive ? "step-circle-active" : ""}
+                  ${isCompleted ? "step-circle-complete" : ""}
+                `,
+            children: isCompleted ? "\u2713" : index + 1
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `
+                  rb-caption rb-hidden rb-sm-inline
+                  ${isCompleted || !isActive ? "status-muted" : ""}
+                `,
+            children: step.label
+          }
+        )
+      ] }),
+      !isLast ? /* @__PURE__ */ jsx("div", { className: "step-connector rb-ml-2 rb-mr-2 rb-hidden rb-sm-block" }) : null
+    ] }, step.id);
+  }) });
+}
+function DefaultBookingStepContent({
+  booking
+}) {
+  const stepId = booking.currentStep?.id;
+  if (!stepId) return null;
+  switch (stepId) {
+    case "service-selection":
+      return /* @__PURE__ */ jsx(DefaultServiceSelectionStep, { booking });
+    case "datetime-selection":
+      return /* @__PURE__ */ jsx(DefaultDateTimeSelectionStep, { booking });
+    case "payment-selection":
+      return /* @__PURE__ */ jsx(HeadlessBookingPaymentSelectionStep, { booking });
+    case "custom-fields":
+      return /* @__PURE__ */ jsx(DefaultDynamicFields, { fields: booking.fields.items, booking });
+    default:
+      return assertNever(stepId);
+  }
+}
+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;
+  const allowAnyResource = !booking.resources.requiresSelection;
+  return /* @__PURE__ */ jsxs("div", { className: "ab-stack", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h2", { className: "ab-title", children: "Select Service" }),
+      /* @__PURE__ */ jsx("p", { className: "ab-text ab-text--muted", children: "Choose the service you'd like to book" })
+    ] }),
+    showServiceSelect ? /* @__PURE__ */ jsxs("div", { className: "ab-stack--sm", children: [
+      /* @__PURE__ */ jsx("label", { className: "ab-subtitle", children: "Service" }),
+      /* @__PURE__ */ jsx("div", { className: "ab-grid", children: services.map((service) => {
+        const isSelected = selectedServiceId === service.id;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => booking.actions.selectService(service.id),
+            className: `ab-card ${isSelected ? "ab-card--selected" : ""}`,
+            children: /* @__PURE__ */ jsxs("div", { className: "ab-row--between", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("div", { className: "ab-subtitle", children: service.title }),
+                service.description ? /* @__PURE__ */ jsx("div", { className: "ab-text ab-text--muted", children: service.description }) : null,
+                service.durationMinutes ? /* @__PURE__ */ jsxs("div", { className: "ab-text ab-text--muted", children: [
+                  service.durationMinutes,
+                  " minutes"
+                ] }) : null
+              ] }),
+              isSelected ? /* @__PURE__ */ jsx(SelectedCheck, {}) : null
+            ] })
+          },
+          service.id
+        );
+      }) })
+    ] }) : null,
+    booking.resources.state.tag === "loading" ? /* @__PURE__ */ jsxs("div", { className: "ab-center", children: [
+      /* @__PURE__ */ jsx(SpinnerNode, { size: "md", srLabel: "Loading practitioners" }),
+      /* @__PURE__ */ jsx("p", { className: "ab-text ab-text--muted", children: "Loading practitioners..." })
+    ] }) : null,
+    booking.resources.state.tag === "error" ? /* @__PURE__ */ jsx(FeedbackMessage, { tone: "error", className: "ab-alert ab-alert--error", role: "alert", children: booking.resources.state.message }) : null,
+    showResourceSelect && booking.resources.state.tag === "loaded" && resources.length === 0 ? /* @__PURE__ */ jsx(FeedbackMessage, { tone: "error", className: "ab-alert ab-alert--error", role: "alert", children: "No practitioners are available for this service right now." }) : null,
+    showResourceSelect && booking.resources.state.tag !== "loading" && (allowAnyResource || resources.length > 0) ? /* @__PURE__ */ jsxs("div", { className: "ab-stack--sm", children: [
+      /* @__PURE__ */ jsxs("label", { className: "ab-subtitle", children: [
+        "Practitioner",
+        booking.resources.requiresSelection ? "" : " (Optional)"
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "ab-text ab-text--muted", children: allowAnyResource ? 'Choose a specific practitioner or select "Any Available"' : "Choose the practitioner you'd like to book" }),
+      /* @__PURE__ */ jsxs("div", { className: "ab-grid", children: [
+        allowAnyResource ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => booking.actions.selectResource(null),
+            className: `ab-card ${!selectedResourceId ? "ab-card--selected" : ""}`,
+            children: /* @__PURE__ */ jsxs("div", { className: "ab-row--between", children: [
+              /* @__PURE__ */ jsx("div", { className: "ab-subtitle", children: "Any Available" }),
+              !selectedResourceId ? /* @__PURE__ */ jsx(SelectedCheck, {}) : null
+            ] })
+          }
+        ) : null,
+        resources.map((resource) => {
+          const isSelected = selectedResourceId === resource.id;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => booking.actions.selectResource(resource.id),
+              className: `ab-card ${isSelected ? "ab-card--selected" : ""}`,
+              children: /* @__PURE__ */ jsxs("div", { className: "ab-row--between", children: [
+                /* @__PURE__ */ jsx("div", { className: "ab-subtitle", children: resource.label }),
+                isSelected ? /* @__PURE__ */ jsx(SelectedCheck, {}) : null
+              ] })
+            },
+            resource.id
+          );
+        })
+      ] })
+    ] }) : null
+  ] });
+}
+function DefaultDateTimeSelectionStep({
+  booking
+}) {
+  const selectedDate = booking.availability.selectedDate ?? "";
+  const selectedSlotStart = booking.availability.selectedSlot?.startAt ?? "";
+  const singleService = booking.services.items.length === 1 ? booking.services.items[0] : void 0;
+  const slots = collapseHeadlessSlotsForDisplay({
+    slots: booking.availability.slots,
+    hasSelectedResource: Boolean(booking.resources.selectedResourceId)
+  });
+  const error = booking.availability.datesState.tag === "error" ? booking.availability.datesState.message : booking.availability.slotsState.tag === "error" ? booking.availability.slotsState.message : null;
+  return /* @__PURE__ */ jsxs("div", { className: "ab-stack", children: [
+    singleService ? /* @__PURE__ */ jsxs("div", { className: "ab-info-box", children: [
+      /* @__PURE__ */ jsx("h3", { className: "ab-subtitle", children: singleService.title }),
+      singleService.description ? /* @__PURE__ */ jsx("p", { className: "ab-text ab-text--muted", children: singleService.description }) : null,
+      singleService.durationMinutes ? /* @__PURE__ */ jsxs("p", { className: "ab-text ab-text--muted", children: [
+        "Duration: ",
+        singleService.durationMinutes,
+        " minutes"
+      ] }) : null
+    ] }) : null,
+    error ? /* @__PURE__ */ jsx(FeedbackMessage, { tone: "error", className: "ab-alert ab-alert--error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsx(
+      DatePicker,
+      {
+        value: selectedDate,
+        onChange: (date) => booking.actions.selectDate(date || null),
+        dateOptions: [...booking.availability.availableDates],
+        isLoading: booking.availability.datesState.tag === "loading",
+        isEmpty: booking.availability.datesState.tag !== "loading" && booking.availability.availableDates.length === 0,
+        hasMore: booking.availability.hasMoreDates,
+        onLoadMore: booking.availability.loadMoreDates
+      }
+    ),
+    selectedDate ? /* @__PURE__ */ jsx(
+      TimeSlotSelector,
+      {
+        value: selectedSlotStart,
+        onChange: (slotStartTime) => {
+          booking.actions.selectSlot(
+            booking.availability.slots.find(
+              (slot) => slot.startAt === slotStartTime
+            ) ?? null
+          );
+        },
+        slots,
+        isLoading: booking.availability.slotsState.tag === "loading"
+      }
+    ) : null
+  ] });
+}
+function HeadlessBookingPaymentSelectionStep({
+  booking
+}) {
+  const service = booking.services.selected;
+  const viewModel = booking.payment.selection;
+  if (booking.payment.kind === "unsupported") {
+    return /* @__PURE__ */ jsx(FeedbackMessage, { tone: "error", className: "ab-alert ab-alert--error", role: "alert", children: booking.payment.errorMessage });
+  }
+  if (!service || !viewModel) {
+    return /* @__PURE__ */ jsx(FeedbackMessage, { tone: "error", className: "ab-alert ab-alert--error", role: "alert", children: "Payment options are unavailable for this service right now." });
+  }
+  const packageOptions = booking.payment.appointmentPackages.items;
+  const hasPackageOptions = packageOptions.length > 0;
+  return /* @__PURE__ */ jsxs("div", { className: "ab-stack", children: [
+    /* @__PURE__ */ jsxs("div", { className: "ab-info-box", children: [
+      /* @__PURE__ */ jsx("h3", { className: "ab-subtitle", children: viewModel.sectionTitle }),
+      /* @__PURE__ */ jsx("p", { className: "ab-text ab-text--muted", children: service.title })
+    ] }),
+    booking.payment.appointmentPackages.state.tag === "loading" ? /* @__PURE__ */ jsx(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info", role: "status", children: "Checking package credits..." }) : null,
+    booking.payment.appointmentPackages.state.tag === "error" ? /* @__PURE__ */ jsxs(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info", role: "status", children: [
+      booking.payment.appointmentPackages.state.message,
+      " You can continue with the normal payment option."
+    ] }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "ab-stack", role: "list", "aria-label": "Payment options", children: [
+      packageOptions.map((appointmentPackage) => {
+        const isSelected = booking.payment.selectedAppointmentPackageId === appointmentPackage.customerPassId;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: themeButtonClassName({
+              variant: isSelected ? "primary" : "outline",
+              size: "md"
+            }),
+            style: paymentOptionLayoutStyle,
+            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`
+                }]
+              }
+            )
+          },
+          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: "ab-card",
+              style: paymentOptionLayoutStyle,
+              children: /* @__PURE__ */ jsx(
+                PaymentOptionContent,
+                {
+                  id: option.kind,
+                  title: option.title,
+                  description: option.description,
+                  summaryRows: option.summaryRows,
+                  helperText: option.helperText
+                }
+              )
+            },
+            option.kind
+          );
+        }
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: themeButtonClassName({
+              variant: isSelected ? "primary" : "outline",
+              size: "md"
+            }),
+            style: paymentOptionLayoutStyle,
+            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
+              }
+            )
+          },
+          option.kind
+        );
+      })
+    ] })
+  ] });
+}
+function PaymentOptionContent({
+  description,
+  helperText,
+  id,
+  summaryRows,
+  title
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { children: title }),
+    /* @__PURE__ */ jsx("span", { className: "ab-text ab-text--muted", children: description }),
+    /* @__PURE__ */ jsx("div", { className: "ab-stack", style: summaryStackStyle, children: summaryRows.map((row) => /* @__PURE__ */ jsxs("span", { className: "ab-text ab-text--muted", children: [
+      row.label,
+      ": ",
+      row.value
+    ] }, `${id}-${row.label}`)) }),
+    helperText ? /* @__PURE__ */ jsx("span", { className: "ab-text ab-text--muted", children: helperText }) : null
+  ] });
+}
+function DefaultDynamicFields({
+  booking,
+  fields
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "rb-space-y-6", children: fields.map((field) => /* @__PURE__ */ jsx(DefaultDynamicField, { booking, field }, field.id)) });
+}
+function DefaultDynamicField({
+  booking,
+  field
+}) {
+  const value = field.value ?? "";
+  const error = field.error;
+  const errorId = error ? field.errorId ?? `${field.inputId}-error` : null;
+  const describedBy = [field.helpTextId, errorId].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ jsxs("div", { className: "rb-space-y-2", children: [
+    /* @__PURE__ */ jsxs("label", { id: field.labelId, htmlFor: field.inputId, className: "form-label", children: [
+      field.label,
+      field.required ? /* @__PURE__ */ jsx("span", { className: "required-marker", children: "*" }) : null
+    ] }),
+    field.helpText ? /* @__PURE__ */ jsx("p", { id: field.helpTextId ?? void 0, className: "rb-caption status-muted", children: field.helpText }) : null,
+    /* @__PURE__ */ jsx(
+      DefaultFieldInput,
+      {
+        field,
+        value,
+        onChange: (nextValue) => booking.actions.updateField(field.id, nextValue),
+        onBlur: () => booking.actions.markFieldTouched(field.id),
+        error,
+        errorId: errorId ?? `${field.inputId}-error`,
+        describedBy
+      }
+    ),
+    error ? /* @__PURE__ */ jsx(
+      FieldValidationMessage,
+      {
+        id: errorId ?? `${field.inputId}-error`,
+        className: "rb-caption status-error",
+        children: error
+      }
+    ) : null
+  ] });
+}
+function DefaultFieldInput({
+  describedBy,
+  error,
+  errorId,
+  field,
+  onBlur,
+  onChange,
+  value
+}) {
+  const strValue = typeof value === "string" ? value : String(value ?? "");
+  const validationProps = getFieldValidationControlProps({
+    message: error,
+    messageId: errorId,
+    describedBy
+  });
+  const commonProps = {
+    id: field.inputId,
+    name: field.id,
+    onBlur,
+    required: field.required,
+    ...validationProps
+  };
+  switch (field.type) {
+    case "textarea":
+      return /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ...commonProps,
+          value: strValue,
+          onChange: (event) => onChange(event.target.value),
+          placeholder: field.field.placeholder,
+          minLength: field.field.minLength,
+          maxLength: field.field.maxLength,
+          rows: 4,
+          className: "form-textarea"
+        }
+      );
+    case "select":
+      if (field.field.multiple) {
+        return /* @__PURE__ */ jsx(
+          "select",
+          {
+            ...commonProps,
+            value: Array.isArray(value) ? value : [],
+            onChange: (event) => {
+              onChange(Array.from(
+                event.target.selectedOptions,
+                (option) => option.value
+              ));
+            },
+            multiple: true,
+            className: "form-select rb-h-32",
+            children: field.field.options?.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+          }
+        );
+      }
+      return /* @__PURE__ */ jsxs(
+        "select",
+        {
+          ...commonProps,
+          value: strValue,
+          onChange: (event) => onChange(event.target.value),
+          className: "form-select",
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: "Select an option..." }),
+            field.field.options?.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+          ]
+        }
+      );
+    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", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "radio",
+            name: field.id,
+            value: option.value,
+            checked: value === option.value,
+            onChange: (event) => onChange(event.target.value),
+            onBlur,
+            required: field.required,
+            ...validationProps,
+            className: "form-radio"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "rb-caption", children: option.label })
+      ] }, option.value)) });
+    case "checkbox":
+      if (field.field.options && field.field.options.length > 1) {
+        const checkedValues = Array.isArray(value) ? 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 })
+        ] }, 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",
+            id: field.inputId,
+            name: field.id,
+            checked: Boolean(value),
+            onChange: (event) => onChange(event.target.checked),
+            onBlur,
+            required: field.required,
+            ...validationProps,
+            className: "form-checkbox rb-mt-0.5"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "rb-caption", children: field.field.placeholder || field.label })
+      ] });
+    case "number":
+      return /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...commonProps,
+          type: "number",
+          value: strValue,
+          onChange: (event) => onChange(event.target.value),
+          placeholder: field.field.placeholder,
+          min: field.field.min,
+          max: field.field.max,
+          className: "form-input"
+        }
+      );
+    case "date":
+      return /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...commonProps,
+          type: "date",
+          value: strValue,
+          onChange: (event) => onChange(event.target.value),
+          min: field.field.min ? String(field.field.min) : void 0,
+          max: field.field.max ? String(field.field.max) : void 0,
+          className: "form-input"
+        }
+      );
+    case "time":
+      return /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...commonProps,
+          type: "time",
+          value: strValue,
+          onChange: (event) => onChange(event.target.value),
+          className: "form-input"
+        }
+      );
+    default:
+      return /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...commonProps,
+          type: field.type,
+          value: strValue,
+          onChange: (event) => onChange(event.target.value),
+          placeholder: field.field.placeholder,
+          minLength: field.field.minLength,
+          maxLength: field.field.maxLength,
+          pattern: field.field.pattern,
+          className: "form-input"
+        }
+      );
+  }
+}
+function DefaultBookingDiscount({
+  booking
+}) {
+  const shouldShowDiscountSection = !booking.payment.selectedAppointmentPackageId && !booking.discount.loading && (booking.discount.manualCodeEntryAllowed || Boolean(booking.discount.autoAppliedDiscount));
+  if (!shouldShowDiscountSection) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "rb-mt-6", children: [
+    booking.discount.manualCodeEntryAllowed ? /* @__PURE__ */ jsx(
+      DiscountCodeSection,
+      {
+        isOpen: booking.discount.isOpen,
+        code: booking.discount.code,
+        onOpen: () => booking.discount.setOpen(true),
+        onChange: booking.discount.setCode,
+        onRemove: () => {
+          booking.discount.clear();
+          booking.discount.setOpen(false);
+        }
+      }
+    ) : null,
+    booking.discount.autoAppliedDiscount && booking.discount.code.trim().length === 0 ? /* @__PURE__ */ jsx(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info rb-mt-4", role: "status", children: /* @__PURE__ */ jsxs("p", { className: "ab-text", children: [
+      "Discount available: ",
+      booking.discount.autoAppliedDiscount.publicLabel,
+      " ",
+      "will apply automatically at checkout."
+    ] }) }) : null
+  ] });
+}
+function DefaultBookingFeedback({
+  booking
+}) {
+  if (booking.feedback.kind !== "error") return null;
+  return /* @__PURE__ */ jsxs(FeedbackMessage, { tone: "error", className: "ab-alert ab-alert--error", role: "alert", children: [
+    /* @__PURE__ */ jsx("p", { className: "ab-text", children: booking.feedback.message }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: themeButtonClassName({ variant: "secondary", size: "sm" }),
+        onClick: booking.actions.clearFeedback,
+        children: "Dismiss"
+      }
+    )
+  ] });
+}
+function DefaultBookingAltcha({
+  booking
+}) {
+  if (!booking.spamProtection.enabled) return null;
+  return /* @__PURE__ */ jsx("div", { className: "ab-altcha", children: /* @__PURE__ */ jsx(
+    AltchaWidget,
+    {
+      challengeUrl: booking.spamProtection.challenge.url,
+      onSolutionChange: booking.actions.setAltchaSolution
+    }
+  ) });
+}
+function DefaultBookingErrorSummary({
+  errors
+}) {
+  if (!hasBookingValidationErrors(errors)) return null;
+  return /* @__PURE__ */ jsxs(FeedbackMessage, { tone: "error", className: "rb-mt-6 alert alert-error", role: "alert", children: [
+    errors.formError ? /* @__PURE__ */ jsx("p", { className: "rb-caption", children: /* @__PURE__ */ jsx("strong", { children: errors.formError }) }) : null,
+    Object.entries(errors.fieldErrors).map(([key, message]) => /* @__PURE__ */ jsx("p", { className: "rb-caption", children: message }, key))
+  ] });
+}
+function SelectedCheck() {
+  return /* @__PURE__ */ jsx("div", { className: "ab-check", children: /* @__PURE__ */ jsx(
+    "svg",
+    {
+      fill: "none",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "2",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      children: /* @__PURE__ */ jsx("path", { d: "M5 13l4 4L19 7" })
+    }
+  ) });
+}
+function collapseHeadlessSlotsForDisplay(input) {
+  const seenStartTimes = /* @__PURE__ */ new Set();
+  const visibleSlots = [];
+  for (const slot of input.slots) {
+    if (!input.hasSelectedResource) {
+      if (seenStartTimes.has(slot.startAt)) continue;
+      seenStartTimes.add(slot.startAt);
+    }
+    visibleSlots.push({
+      startAt: slot.startAt,
+      endAt: slot.endAt,
+      resourceId: asAppointmentResourceId(slot.resourceId)
+    });
+  }
+  return visibleSlots;
+}
+var PORTAL_REBOOK_QUERY_PARAM = "rebook";
+var PORTAL_REBOOK_QUERY_VALUE = "1";
+var REBOOK_COMPLETION_MODE_VERIFIED_CHECKOUT = "verified_checkout";
+var REBOOK_COMPLETION_MODE_BYPASSED = "bypassed";
+function getBookingRedirectLocationSnapshot() {
+  if (typeof window === "undefined") {
+    return { search: "", hash: "" };
+  }
+  return {
+    search: window.location.search,
+    hash: window.location.hash
+  };
+}
+function appendRebookFlag(url, enabled) {
+  if (!enabled) {
+    return url;
+  }
+  const nextUrl = new URL(url);
+  nextUrl.searchParams.set(
+    PORTAL_REBOOK_QUERY_PARAM,
+    PORTAL_REBOOK_QUERY_VALUE
+  );
+  return nextUrl.toString();
+}
+var BookingFormClient = ({
+  siteId: siteIdProp,
+  render
+}) => {
+  const siteId = resolveBookingSiteId(siteIdProp, null);
+  const viewerTimeZone = getRuntimeTimeZone();
+  const form = render.hydration.form;
+  const services = render.hydration.services;
+  const defaultServiceId = render.hydration.serviceId ?? resolveDefaultBookingServiceId(form, services);
+  const initialServiceId = render.hydration.serviceId ?? defaultServiceId ?? void 0;
+  const initialResourceId = render.hydration.resourceId ?? void 0;
+  const isPortalRebook = render.hydration.rebookContext?.kind === "portal_rebook";
+  const hasLoggedRebookCompletionRef = useRef(false);
+  const [redirectState] = useState(
+    () => getBookingRedirectStateFromLocation(getBookingRedirectLocationSnapshot())
+  );
+  const showSpamProtection = render.hydration.spamProtectionEnabled ?? isSpamProtectionEnabled();
+  const api = useBlockApi();
+  const hasPortalAuth = api.config.auth.type === "bearer" || api.config.authOverrides?.portal?.type === "bearer";
+  const formId = render.hydration.formId ?? form?.id ?? "booking-form";
+  const booking = useHeadlessBookingFlow({
+    siteId,
+    formId,
+    form,
+    services,
+    initialServiceId,
+    initialResourceId,
+    initialData: render.hydration.initialData ?? void 0,
+    requiresServiceSelection: render.hydration.requiresServiceSelection,
+    requiresResourceSelection: render.hydration.requiresResourceSelection,
+    shouldAutoSelectSingleResource: render.hydration.shouldAutoSelectSingleResource,
+    enableAppointmentPackages: hasPortalAuth,
+    spamProtectionEnabled: showSpamProtection,
+    successMessage: render.display.successMessage ?? void 0,
+    viewerTimeZone
+  });
+  React2.useEffect(() => {
+    if (!siteId) {
+      console.error("[BookingFormClient] ERROR: siteId is missing!");
+    }
+    if (!form) {
+      console.warn("[BookingFormClient] Form data not loaded");
+    }
+  }, [siteId, form]);
+  const bookingAnchorId = form ? `booking-form-${form.id}` : "booking-form";
+  const verification = useAppointmentCheckoutVerification(
+    redirectState.kind === "success" ? { sessionId: redirectState.sessionId } : null
+  );
+  const viewState = deriveBookingFormViewState({
+    localSuccessResourceName: booking.view.kind === "success" ? booking.view.resourceName : void 0,
+    redirectState,
+    verificationState: verification.state
+  });
+  React2.useEffect(() => {
+    if (viewState.kind === "error") {
+      scrollToBlock(bookingAnchorId);
+    }
+  }, [
+    bookingAnchorId,
+    viewState.kind,
+    viewState.kind === "error" ? viewState.message : null
+  ]);
+  React2.useEffect(() => {
+    if (viewState.kind === "success" && redirectState.kind === "success") {
+      scrollToBlock(bookingAnchorId);
+    }
+  }, [bookingAnchorId, redirectState.kind, viewState.kind]);
+  React2.useEffect(() => {
+    if (!isPortalRebook || viewState.kind !== "success") {
+      return;
+    }
+    if (hasLoggedRebookCompletionRef.current) {
+      return;
+    }
+    hasLoggedRebookCompletionRef.current = true;
+    logger.info("public:appointments:rebook:completed", {
+      siteId,
+      formId: render.hydration.formId,
+      serviceId: booking.services.selected?.id ?? initialServiceId ?? null,
+      resourceId: initialResourceId ?? null,
+      completionMode: redirectState.kind === "success" ? REBOOK_COMPLETION_MODE_VERIFIED_CHECKOUT : REBOOK_COMPLETION_MODE_BYPASSED
+    });
+  }, [
+    initialResourceId,
+    initialServiceId,
+    isPortalRebook,
+    redirectState.kind,
+    render.hydration.formId,
+    booking.services.selected?.id,
+    siteId,
+    viewState.kind
+  ]);
+  if (render.display.state === "missing" || !form || !render.hydration.formId) {
+    return /* @__PURE__ */ jsx(
+      FeedbackMessage,
+      {
+        tone: "error",
+        className: `ab-alert ab-alert--error ${render.display.className ?? ""}`.trim(),
+        role: "alert",
+        children: /* @__PURE__ */ jsx("p", { className: "ab-text", children: render.display.message ?? "Booking form not found. Please check your configuration." })
+      }
+    );
+  }
+  const handleComplete = async () => {
+    const { successUrl, cancelUrl } = buildCheckoutReturnUrls(
+      "booking",
+      bookingAnchorId
+    );
+    const result = await booking.actions.submit({
+      redirect: "manual",
+      successUrl: appendRebookFlag(successUrl, isPortalRebook),
+      cancelUrl: appendRebookFlag(cancelUrl, isPortalRebook)
+    });
+    if (!result.ok) return;
+    if (result.outcome.kind === "checkout_redirect") {
+      window.location.href = result.outcome.checkoutUrl;
+    }
+  };
+  if (viewState.kind === "success") {
+    return /* @__PURE__ */ jsx(
+      SuccessMessage,
+      {
+        message: getBookingSuccessMessage(render.display.successMessage),
+        resourceName: viewState.resourceName,
+        className: render.display.className ?? void 0
+      }
+    );
+  }
+  if (viewState.kind === "verifying") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: bookingAnchorId,
+        className: render.display.className ?? void 0,
+        children: /* @__PURE__ */ jsx(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info", role: "status", children: /* @__PURE__ */ jsx("p", { className: "ab-text", children: viewState.message }) })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { id: bookingAnchorId, className: render.display.className ?? void 0, children: [
+    render.hydration.noticeMessage ? /* @__PURE__ */ jsx(FeedbackMessage, { tone: "info", className: "ab-alert ab-alert--info rb-mb-4", role: "status", children: /* @__PURE__ */ jsx("p", { className: "ab-text", children: render.hydration.noticeMessage }) }) : null,
+    viewState.kind === "error" ? /* @__PURE__ */ jsx(FeedbackMessage, { tone: "error", className: "ab-alert ab-alert--error", role: "alert", children: /* @__PURE__ */ jsx("p", { className: "ab-text", children: viewState.message }) }) : null,
+    /* @__PURE__ */ jsx(HeadlessBookingDefaultForm, { booking, onSubmit: handleComplete })
+  ] });
+};
+var decode = defineIslandPropsDecoder("booking-form");
+var enhance = (root, props) => {
+  const { apiBaseUrl, portalToken } = props;
+  const formId = props.render.hydration.formId;
+  if (!formId) {
+    throw new Error("[sdk:islands] booking-form requires formId");
+  }
+  const siteId = props.siteId;
+  if (!siteId) {
+    throw new Error("[sdk:islands] booking-form requires siteId");
+  }
+  if (!apiBaseUrl) {
+    throw new Error("[sdk:islands] booking-form requires apiBaseUrl");
+  }
+  const apiConfig = {
+    baseUrl: apiBaseUrl,
+    auth: { type: "none" },
+    authOverrides: portalToken ? { portal: { type: "bearer", token: portalToken } } : void 0,
+    siteId
+  };
+  return mountReactIsland(root, ({ root: reactRoot }) => {
+    reactRoot.render(
+      /* @__PURE__ */ jsx(BlockApiProvider, { config: apiConfig, children: /* @__PURE__ */ jsx(BookingFormClient, { ...props }) })
+    );
+  });
+};
+
+export { decode, enhance };