@wix/headless-bookings 0.0.55 → 0.0.57

package/cjs/dist/services/booking-form/booking-form.js

@@ -10,6 +10,8 @@
 import { defineService, implementService } from '@wix/services-definitions';
 import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
 import { FormServiceDefinition } from '@wix/headless-forms/services';
+import { BookingServiceDefinition, } from '../booking/booking.js';
+import { hasForm, extractFormIdFromConfig } from './utils.js';
 // ============================================================================
 // Constants
 // ============================================================================
@@ -18,22 +20,25 @@ import { FormServiceDefinition } from '@wix/headless-forms/services';
  * All booking forms must belong to this namespace.
  */
 export const BOOKING_FORM_NAMESPACE = 'wix.bookings.v2.bookings';
-// ============================================================================
-// Helper Types
-// ============================================================================
-/**
- * Type guard to check if config has formId
- */
-export function hasFormId(config) {
-    return 'formId' in config;
-}
 /**
- * Type guard to check if config has pre-loaded form
+ * Error thrown when BookingFormService cannot be initialized due to missing configuration.
+ * This occurs when:
+ * - No config (formId or form) was provided
+ * - AND the component is not wrapped with Booking.Root (no BookingService available)
  */
-export function hasForm(config) {
-    return 'form' in config;
+export class BookingFormConfigurationError extends Error {
+    constructor(message) {
+        super(message ||
+            'BookingFormService: Cannot initialize - no formId or form provided in config and no BookingService available. ' +
+                'Either provide a formId/form in the config, or wrap with Booking.Root.');
+        this.name = 'BookingFormConfigurationError';
+    }
 }
 // ============================================================================
+// Re-export utilities
+// ============================================================================
+export { hasFormId, hasForm, extractFormIdFromForm, extractFormIdFromConfig, } from './utils.js';
+// ============================================================================
 // Service Definition
 // ============================================================================
 /**
@@ -64,20 +69,21 @@ function validateBookingFormNamespace(form) {
     }
 }
 /**
- * Extracts the form ID from either config type.
- * @param config The service config
+ * Extracts the form ID from either config type or from services.
+ * @param config The service config (optional)
+ * @param services The list of services to extract formId from if config is not provided
  * @returns The form ID
  */
-function extractFormId(config) {
-    if ('formId' in config) {
-        return config.formId;
+function extractFormId(config, services) {
+    // Try to extract from config first
+    let formId = extractFormIdFromConfig(config);
+    // Fallback to extracting from services
+    if (!formId) {
+        formId = services.find((s) => s.form?._id)?.form?._id;
     }
-    // Extract from form object - forms typically have an 'id' or '_id' property
-    const form = config.form;
-    const formId = form.id ||
-        form._id;
     if (!formId) {
-        throw new Error('BookingFormService: Could not extract form ID from provided form object.');
+        throw new BookingFormConfigurationError('BookingFormService: no formId found in config or services. ' +
+            'Either provide a formId in the config, or ensure Booking.Root has selected services with a form.');
     }
     return formId;
 }
@@ -120,14 +126,38 @@ function extractFormId(config) {
 export const BookingFormService = implementService.withConfig()(BookingFormServiceDefinition, ({ getService, config }) => {
     const signalsService = getService(SignalsServiceDefinition);
     const formService = getService(FormServiceDefinition);
+    // BookingService is optional - may not be available if not wrapped with Booking.Root
+    let bookingService = null;
+    try {
+        bookingService = getService(BookingServiceDefinition);
+    }
+    catch {
+        // BookingService not available - that's ok if formId was provided explicitly
+        bookingService = null;
+    }
+    const getServices = () => {
+        if (!bookingService) {
+            return [];
+        }
+        const serviceSelections = bookingService.serviceSelections.peek();
+        return serviceSelections.length
+            ? serviceSelections.map((s) => s.service)
+            : [];
+    };
+    // Validate that we have either config or bookingService with serviceSelections
+    // If neither is available, we can't extract formId and can't initialize the service
+    const hasServiceSelections = getServices().length > 0;
+    if (!config && (!bookingService || !hasServiceSelections)) {
+        throw new BookingFormConfigurationError();
+    }
     // Determine if we have a pre-loaded form
-    const hasPreloadedForm = 'form' in config;
+    const hasPreloadedForm = hasForm(config);
     // If form is provided, validate namespace
     if (hasPreloadedForm) {
         validateBookingFormNamespace(config.form);
     }
     // Extract formId from config (either directly or from form object)
-    const formIdValue = extractFormId(config);
+    const formIdValue = extractFormId(config, getServices());
     // Initialize formSubmission signal (stores form data to be submitted)
     const formSubmission = signalsService.signal(null);
     // Initialize submissionId signal (for future use)
@@ -135,7 +165,7 @@ export const BookingFormService = implementService.withConfig()(BookingFormServi
     // formId signal - readonly
     const formId = signalsService.signal(formIdValue);
     // form signal - contains pre-loaded form if provided
-    const form = signalsService.signal(hasPreloadedForm ? config.form : null);
+    const form = signalsService.signal(hasForm(config) ? config.form : null);
     // Internal: Store validate callback (set by core component, not exposed publicly)
     let _validateCallback = null;
     // Internal: Register validate callback (called by core component via closure)
@@ -155,6 +185,18 @@ export const BookingFormService = implementService.withConfig()(BookingFormServi
         }
         return _validateCallback();
     };
+    // Auto-sync formValues to BookingService.formSubmission (client-side only)
+    // This keeps Booking.Data.formSubmission updated as the user types
+    // and ensures the book action gets the latest form values
+    // Only set up sync if BookingService is available
+    if (bookingService) {
+        signalsService.effect(() => {
+            const formValues = formService.formValuesSignal.get();
+            if (formValues && Object.keys(formValues).length > 0) {
+                bookingService.actions.setFormSubmission(formValues);
+            }
+        });
+    }
     // Public API (what's exposed in BookingFormServiceAPI interface)
     const publicApi = {
         formValues: formService.formValuesSignal,

package/cjs/dist/services/booking-form/utils.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Utility functions for BookingForm
+ *
+ * Note: This file should not import from booking-form.ts to avoid circular dependencies.
+ * Type guards use generic types that will be compatible with BookingFormServiceConfig.
+ */
+import { forms } from '@wix/forms';
+/**
+ * Type guard to check if config has formId
+ */
+export declare function hasFormId<T extends {
+    formId: string;
+    serviceIds?: string[];
+} | {
+    form: forms.Form;
+}>(config: T | undefined): config is T & {
+    formId: string;
+    serviceIds?: string[];
+};
+/**
+ * Type guard to check if config has pre-loaded form
+ */
+export declare function hasForm<T extends {
+    formId: string;
+    serviceIds?: string[];
+} | {
+    form: forms.Form;
+}>(config: T | undefined): config is T & {
+    form: forms.Form;
+};
+/**
+ * Extracts the form ID from a form object.
+ * @param form The form object to extract ID from
+ * @returns The form ID or undefined if not found
+ */
+export declare function extractFormIdFromForm(form: forms.Form): string | undefined;
+/**
+ * Configuration object that may contain formId or form.
+ * Used by extractFormIdFromConfig.
+ */
+export type FormIdConfig = {
+    formId: string;
+    serviceIds?: string[];
+} | {
+    form: forms.Form;
+} | undefined;
+/**
+ * Extracts the form ID from a config object (either formId directly or from form object).
+ * @param config The config object containing either formId or form
+ * @returns The form ID or undefined if not found/extractable
+ */
+export declare function extractFormIdFromConfig(config: FormIdConfig): string | undefined;

package/cjs/dist/services/booking-form/utils.js

@@ -0,0 +1,47 @@
+/**
+ * Utility functions for BookingForm
+ *
+ * Note: This file should not import from booking-form.ts to avoid circular dependencies.
+ * Type guards use generic types that will be compatible with BookingFormServiceConfig.
+ */
+// ============================================================================
+// Type Guards
+// ============================================================================
+/**
+ * Type guard to check if config has formId
+ */
+export function hasFormId(config) {
+    return config != null && 'formId' in config;
+}
+/**
+ * Type guard to check if config has pre-loaded form
+ */
+export function hasForm(config) {
+    return config != null && 'form' in config;
+}
+// ============================================================================
+// Form ID Extraction
+// ============================================================================
+/**
+ * Extracts the form ID from a form object.
+ * @param form The form object to extract ID from
+ * @returns The form ID or undefined if not found
+ */
+export function extractFormIdFromForm(form) {
+    return (form.id ||
+        form._id);
+}
+/**
+ * Extracts the form ID from a config object (either formId directly or from form object).
+ * @param config The config object containing either formId or form
+ * @returns The form ID or undefined if not found/extractable
+ */
+export function extractFormIdFromConfig(config) {
+    if (hasFormId(config)) {
+        return config.formId;
+    }
+    if (hasForm(config)) {
+        return extractFormIdFromForm(config.form);
+    }
+    return undefined;
+}

package/dist/react/booking-form/BookingForm.d.ts

@@ -4,17 +4,20 @@
  */
 import React from 'react';
 import { Form } from '@wix/headless-forms/react';
+import * as CoreBookingForm from '../core/booking-form/BookingForm.js';
 type FieldMap = Parameters<typeof Form.Fields>[0]['fieldMap'];
 /**
  * Props for BookingForm.Root component
  */
 export interface RootProps {
     /** The form ID to load (required - standalone mode) */
-    formId: string;
+    formId?: string;
+    /** Optional service IDs to pass to FormService (will be merged into additionalMetadata) */
+    serviceIds?: string[];
     /** Optional additional metadata to pass to FormService */
     additionalMetadata?: Record<string, string | string[]>;
-    /** Optional partial field map to override default booking field components */
-    fieldMap?: Partial<FieldMap>;
+    /** Field map to override default booking field components */
+    fieldMap: FieldMap;
     /** Child components - if not provided, Form.Fields is rendered with default field map */
     children?: React.ReactNode;
     /** Whether to render as a child component */
@@ -25,6 +28,8 @@ export interface RootProps {
     rowGapClassname?: string;
     /** Column gap class name for Form.Fields when using default rendering */
     columnGapClassname?: string;
+    /** Custom fallback UI for load errors. Can be a ReactNode or a function that receives the error. */
+    loadErrorFallback?: React.ReactNode | ((error: Error) => React.ReactNode);
 }
 /**
  * Root component for booking form that wraps CoreBookingForm.Root.
@@ -40,6 +45,12 @@ export interface RootProps {
  * // Minimal usage - uses default field components
  * <BookingForm.Root formId="your-form-id" />
  *
+ * // With serviceIds
+ * <BookingForm.Root
+ *   formId="your-form-id"
+ *   serviceIds={['service-1', 'service-2']}
+ * />
+ *
  * // With custom styling
  * <BookingForm.Root
  *   formId="your-form-id"
@@ -91,6 +102,74 @@ export interface FieldsProps {
  * ```
  */
 export declare const Fields: React.ForwardRefExoticComponent<FieldsProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Props for BookingForm.Actions.ValidateFormSubmission component
+ */
+export interface ValidateFormSubmissionProps {
+    asChild?: boolean;
+    children?: React.ReactNode | ((props: {
+        onClick: () => Promise<void>;
+        valid: boolean | null;
+        validationFailures: string[];
+    }) => React.ReactNode);
+    className?: string;
+    label?: string;
+    /** Callback when validation completes */
+    onValidationComplete?: (result: {
+        valid: boolean;
+        validationFailures: string[];
+    }) => void;
+}
+/**
+ * Button to validate the booking form submission.
+ * Must be used within BookingForm.Root or BookingForm.Data context.
+ * Default label is "Validate".
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Within BookingForm.Root
+ * <BookingForm.Root formId="your-form-id" fieldMap={...}>
+ *   <BookingForm.Fields />
+ *   <BookingForm.Actions.ValidateFormSubmission />
+ * </BookingForm.Root>
+ *
+ * // With custom label
+ * <BookingForm.Actions.ValidateFormSubmission label="Check Form" />
+ *
+ * // With asChild
+ * <BookingForm.Actions.ValidateFormSubmission asChild>
+ *   <button className="btn-primary">Validate Booking</button>
+ * </BookingForm.Actions.ValidateFormSubmission>
+ *
+ * // Using render prop pattern with validation callback
+ * <BookingForm.Actions.ValidateFormSubmission
+ *   onValidationComplete={(result) => {
+ *     if (result.valid) {
+ *       console.log('Form is valid!');
+ *     } else {
+ *       console.log('Validation errors:', result.validationFailures);
+ *     }
+ *   }}
+ * >
+ *   {({ onClick, valid, validationFailures }) => (
+ *     <button onClick={onClick}>
+ *       {valid === null ? 'Validate' : valid ? 'Valid ✓' : 'Invalid ✗'}
+ *       {validationFailures.length > 0 && (
+ *         <span> ({validationFailures.length} errors)</span>
+ *       )}
+ *     </button>
+ *   )}
+ * </BookingForm.Actions.ValidateFormSubmission>
+ * ```
+ */
+export declare const ValidateFormSubmission: React.ForwardRefExoticComponent<ValidateFormSubmissionProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Actions namespace for BookingForm
+ */
+export declare const Actions: {
+    ValidateFormSubmission: React.ForwardRefExoticComponent<ValidateFormSubmissionProps & React.RefAttributes<HTMLButtonElement>>;
+};
 /**
  * Render props for BookingForm.Data component
  */
@@ -105,24 +184,27 @@ export interface DataRenderProps {
     formSubmission: Record<string, unknown> | null;
     /** Action to store form submission data */
     setFormSubmission: (formValues: Record<string, unknown>) => void;
-    /** Action to validate the form */
-    validateFormSubmission: () => Promise<{
-        valid: boolean;
-        validationFailures: string[];
-    }>;
+    /** Ref to access form methods imperatively (pass to Form.Fields) */
+    formRef: React.RefObject<CoreBookingForm.FormHandle | null>;
+    /** Action to validate the form fields. Returns true if valid, false if there are errors. */
+    validate: () => Promise<boolean>;
 }
 /**
  * Props for BookingForm.Data component
  */
 export interface DataProps {
-    /** The form ID to load (required - standalone mode) */
-    formId: string;
+    /** The form ID to load (if not provided, the formId will be extracted from the selected service if available) */
+    formId?: string;
+    /** Optional service IDs to pass to FormService (will be merged into additionalMetadata) */
+    serviceIds?: string[];
     /** Optional additional metadata to pass to FormService */
     additionalMetadata?: Record<string, string | string[]>;
-    /** Optional partial field map to override default booking field components */
-    fieldMap?: Partial<FieldMap>;
+    /** Field map to override default booking field components */
+    fieldMap: FieldMap;
     /** Render prop function that receives form data and actions */
     children: (data: DataRenderProps) => React.ReactNode;
+    /** Custom fallback UI for load errors. Can be a ReactNode or a function that receives the error. */
+    loadErrorFallback?: React.ReactNode | ((error: Error) => React.ReactNode);
 }
 /**
  * Data component that provides booking form data via render props.
@@ -132,12 +214,17 @@ export interface DataProps {
  * @example
  * ```tsx
  * <BookingForm.Data formId="your-form-id">
- *   {({ formId, fields, formValues, setFormSubmission, validateFormSubmission }) => (
+ *   {({ formId, fields, formValues, formRef, validate, setFormSubmission }) => (
  *     <div>
- *       <Form.Fields fieldMap={fields} rowGapClassname="gap-y-4" columnGapClassname="gap-x-2" />
+ *       <Form.Fields
+ *         fieldMap={fields}
+ *         rowGapClassname="gap-y-4"
+ *         columnGapClassname="gap-x-2"
+ *         formRef={formRef}
+ *       />
  *       <button onClick={async () => {
- *         const result = await validateFormSubmission();
- *         if (result.valid) {
+ *         const isValid = await validate();
+ *         if (isValid) {
  *           // Store current form values before submission
  *           setFormSubmission(formValues);
  *         }
@@ -147,10 +234,23 @@ export interface DataProps {
  *     </div>
  *   )}
  * </BookingForm.Data>
+ *
+ * // With serviceIds
+ * <BookingForm.Data
+ *   formId="your-form-id"
+ *   serviceIds={['service-1', 'service-2']}
+ * >
+ *   {({ fields, formRef }) => (
+ *     <Form.Fields fieldMap={fields} formRef={formRef} />
+ *   )}
+ * </BookingForm.Data>
  * ```
  */
 export declare function Data(props: DataProps): React.ReactNode;
 export declare namespace Data {
     var displayName: string;
 }
-export {};
+/**
+ * Re-export LoadError component and utilities for error handling
+ */
+export { LoadError, isBookingFormConfigurationError, BookingFormConfigurationError, } from '../core/booking-form/BookingForm.js';

package/dist/react/booking-form/BookingForm.js

@@ -7,10 +7,44 @@ import React from 'react';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import { Form } from '@wix/headless-forms/react';
 import * as CoreBookingForm from '../core/booking-form/BookingForm.js';
+import { BookingFormConfigurationError } from '../../services/booking-form/booking-form.js';
+/**
+ * Internal ErrorBoundary for catching BookingFormConfigurationError
+ */
+class BookingFormErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    render() {
+        const { error } = this.state;
+        const { children, fallback } = this.props;
+        if (error) {
+            // If it's a configuration error, render the fallback
+            if (error instanceof BookingFormConfigurationError) {
+                if (typeof fallback === 'function') {
+                    return fallback(error);
+                }
+                if (fallback) {
+                    return fallback;
+                }
+                // Default fallback UI
+                return _jsx("div", { "data-testid": "booking-form-load-error", children: error.message });
+            }
+            // Re-throw non-configuration errors
+            throw error;
+        }
+        return children;
+    }
+}
 var TestIds;
 (function (TestIds) {
     TestIds["bookingFormRoot"] = "booking-form-root";
     TestIds["bookingFormFields"] = "booking-form-fields";
+    TestIds["bookingFormActionValidateFormSubmission"] = "booking-form-action-validate-form-submission";
 })(TestIds || (TestIds = {}));
 /**
  * Root component for booking form that wraps CoreBookingForm.Root.
@@ -26,6 +60,12 @@ var TestIds;
  * // Minimal usage - uses default field components
  * <BookingForm.Root formId="your-form-id" />
  *
+ * // With serviceIds
+ * <BookingForm.Root
+ *   formId="your-form-id"
+ *   serviceIds={['service-1', 'service-2']}
+ * />
+ *
  * // With custom styling
  * <BookingForm.Root
  *   formId="your-form-id"
@@ -51,8 +91,8 @@ var TestIds;
  * ```
  */
 export const Root = React.forwardRef((props, ref) => {
-    const { children, asChild, className, formId, additionalMetadata, fieldMap, rowGapClassname = 'gap-y-4', columnGapClassname = 'gap-x-2', ...otherProps } = props;
-    return (_jsx(CoreBookingForm.Root, { formId: formId, additionalMetadata: additionalMetadata, fieldMap: fieldMap, children: ({ fields }) => (_jsx(BookingFormContext.Provider, { value: { fields, rowGapClassname, columnGapClassname }, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.bookingFormRoot, ...otherProps, children: _jsx("div", { children: children ?? (_jsxs(_Fragment, { children: [_jsx(Form.Loading, { className: "flex justify-center p-4 text-foreground" }), _jsx(Form.LoadingError, { className: "bg-destructive/10 border border-destructive/20 text-destructive px-4 py-3 rounded-lg mb-4" }), _jsx(Form.Fields, { fieldMap: fields, rowGapClassname: rowGapClassname, columnGapClassname: columnGapClassname }), _jsx(Form.Error, { className: "mt-4 bg-destructive/10 border border-destructive/20 text-destructive px-4 py-3 rounded-lg" }), _jsx(Form.Submitted, { className: "mt-4 bg-green-500/10 border border-green-500/20 text-green-500 px-4 py-3 rounded-lg" })] })) }) }) })) }));
+    const { children, asChild, className, formId, serviceIds, additionalMetadata, fieldMap, rowGapClassname = 'gap-y-4', columnGapClassname = 'gap-x-2', loadErrorFallback, ...otherProps } = props;
+    return (_jsx(BookingFormErrorBoundary, { fallback: loadErrorFallback, children: _jsx(CoreBookingForm.Root, { formId: formId, serviceIds: serviceIds, additionalMetadata: additionalMetadata, fieldMap: fieldMap, children: ({ fields }) => (_jsx(BookingFormContext.Provider, { value: { fields, rowGapClassname, columnGapClassname }, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.bookingFormRoot, ...otherProps, children: _jsx("div", { children: children ?? (_jsxs(_Fragment, { children: [_jsx(Form.Loading, { className: "flex justify-center p-4 text-foreground" }), _jsx(Form.LoadingError, { className: "bg-destructive/10 border border-destructive/20 text-destructive px-4 py-3 rounded-lg mb-4" }), _jsx(Form.Fields, { fieldMap: fields, rowGapClassname: rowGapClassname, columnGapClassname: columnGapClassname }), _jsx(Form.Error, { className: "mt-4 bg-destructive/10 border border-destructive/20 text-destructive px-4 py-3 rounded-lg" }), _jsx(Form.Submitted, { className: "mt-4 bg-green-500/10 border border-green-500/20 text-green-500 px-4 py-3 rounded-lg" })] })) }) }) })) }) }));
 });
 Root.displayName = 'BookingForm.Root';
 const BookingFormContext = React.createContext(null);
@@ -87,6 +127,77 @@ export const Fields = React.forwardRef((props, ref) => {
     return (_jsx("div", { ref: ref, className: className, "data-testid": TestIds.bookingFormFields, ...otherProps, children: _jsx(Form.Fields, { fieldMap: context.fields, rowGapClassname: rowGapClassname, columnGapClassname: columnGapClassname }) }));
 });
 Fields.displayName = 'BookingForm.Fields';
+/**
+ * Button to validate the booking form submission.
+ * Must be used within BookingForm.Root or BookingForm.Data context.
+ * Default label is "Validate".
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Within BookingForm.Root
+ * <BookingForm.Root formId="your-form-id" fieldMap={...}>
+ *   <BookingForm.Fields />
+ *   <BookingForm.Actions.ValidateFormSubmission />
+ * </BookingForm.Root>
+ *
+ * // With custom label
+ * <BookingForm.Actions.ValidateFormSubmission label="Check Form" />
+ *
+ * // With asChild
+ * <BookingForm.Actions.ValidateFormSubmission asChild>
+ *   <button className="btn-primary">Validate Booking</button>
+ * </BookingForm.Actions.ValidateFormSubmission>
+ *
+ * // Using render prop pattern with validation callback
+ * <BookingForm.Actions.ValidateFormSubmission
+ *   onValidationComplete={(result) => {
+ *     if (result.valid) {
+ *       console.log('Form is valid!');
+ *     } else {
+ *       console.log('Validation errors:', result.validationFailures);
+ *     }
+ *   }}
+ * >
+ *   {({ onClick, valid, validationFailures }) => (
+ *     <button onClick={onClick}>
+ *       {valid === null ? 'Validate' : valid ? 'Valid ✓' : 'Invalid ✗'}
+ *       {validationFailures.length > 0 && (
+ *         <span> ({validationFailures.length} errors)</span>
+ *       )}
+ *     </button>
+ *   )}
+ * </BookingForm.Actions.ValidateFormSubmission>
+ * ```
+ */
+export const ValidateFormSubmission = React.forwardRef((props, ref) => {
+    const { asChild, children, className, label = 'Validate', onValidationComplete, } = props;
+    const [valid, setValid] = React.useState(null);
+    const [validationFailures, setValidationFailures] = React.useState([]);
+    return (_jsx(CoreBookingForm.Actions, { children: ({ validateFormSubmission }) => {
+            const handleClick = async () => {
+                const result = await validateFormSubmission();
+                setValid(result.valid);
+                setValidationFailures(result.validationFailures);
+                if (onValidationComplete) {
+                    onValidationComplete(result);
+                }
+            };
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.bookingFormActionValidateFormSubmission, "data-valid": valid, customElement: children, customElementProps: {
+                    onClick: handleClick,
+                    valid,
+                    validationFailures,
+                }, children: _jsx("button", { onClick: handleClick, children: label }) }));
+        } }));
+});
+ValidateFormSubmission.displayName =
+    'BookingForm.Actions.ValidateFormSubmission';
+/**
+ * Actions namespace for BookingForm
+ */
+export const Actions = {
+    ValidateFormSubmission,
+};
 /**
  * Data component that provides booking form data via render props.
  * Use this when you need programmatic access to form state and actions.
@@ -95,12 +206,17 @@ Fields.displayName = 'BookingForm.Fields';
  * @example
  * ```tsx
  * <BookingForm.Data formId="your-form-id">
- *   {({ formId, fields, formValues, setFormSubmission, validateFormSubmission }) => (
+ *   {({ formId, fields, formValues, formRef, validate, setFormSubmission }) => (
  *     <div>
- *       <Form.Fields fieldMap={fields} rowGapClassname="gap-y-4" columnGapClassname="gap-x-2" />
+ *       <Form.Fields
+ *         fieldMap={fields}
+ *         rowGapClassname="gap-y-4"
+ *         columnGapClassname="gap-x-2"
+ *         formRef={formRef}
+ *       />
  *       <button onClick={async () => {
- *         const result = await validateFormSubmission();
- *         if (result.valid) {
+ *         const isValid = await validate();
+ *         if (isValid) {
  *           // Store current form values before submission
  *           setFormSubmission(formValues);
  *         }
@@ -110,17 +226,35 @@ Fields.displayName = 'BookingForm.Fields';
  *     </div>
  *   )}
  * </BookingForm.Data>
+ *
+ * // With serviceIds
+ * <BookingForm.Data
+ *   formId="your-form-id"
+ *   serviceIds={['service-1', 'service-2']}
+ * >
+ *   {({ fields, formRef }) => (
+ *     <Form.Fields fieldMap={fields} formRef={formRef} />
+ *   )}
+ * </BookingForm.Data>
  * ```
  */
 export function Data(props) {
-    const { formId, additionalMetadata, fieldMap, children } = props;
-    return (_jsx(CoreBookingForm.Root, { formId: formId, additionalMetadata: additionalMetadata, fieldMap: fieldMap, children: ({ formId: id, fields, formValues, formSubmission, setFormSubmission, validateFormSubmission, }) => children({
-            formId: id,
-            fields,
-            formValues,
-            formSubmission,
-            setFormSubmission,
-            validateFormSubmission,
-        }) }));
+    const { formId, serviceIds, additionalMetadata, fieldMap, children, loadErrorFallback, } = props;
+    return (_jsx(BookingFormErrorBoundary, { fallback: loadErrorFallback, children: _jsx(CoreBookingForm.Root, { formId: formId, serviceIds: serviceIds, additionalMetadata: additionalMetadata, fieldMap: fieldMap, children: ({ formId: id, fields, formValues, formSubmission, setFormSubmission, validateFormSubmission, formRef, }) => children({
+                formId: id,
+                fields,
+                formValues,
+                formSubmission,
+                setFormSubmission,
+                formRef,
+                validate: validateFormSubmission,
+            }) }) }));
 }
 Data.displayName = 'BookingForm.Data';
+// ============================================================================
+// Error Handling
+// ============================================================================
+/**
+ * Re-export LoadError component and utilities for error handling
+ */
+export { LoadError, isBookingFormConfigurationError, BookingFormConfigurationError, } from '../core/booking-form/BookingForm.js';