@wix/headless-bookings 0.0.22 → 0.0.24

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

@@ -0,0 +1,140 @@
+/**
+ * BookingForm Service - Manages form submission state for booking flows
+ *
+ * This service supports two modes:
+ * 1. Client-side: Provide formId to load the form dynamically
+ * 2. SSR/SSG: Provide a pre-loaded form object for server-side rendering
+ *
+ * When using a pre-loaded form, it must belong to the bookings namespace.
+ */
+import { type Signal, type ReadOnlySignal } from '@wix/services-definitions/core-services/signals';
+import type { FormValues } from '@wix/form-public';
+import { forms } from '@wix/forms';
+/**
+ * The required namespace for booking forms.
+ * All booking forms must belong to this namespace.
+ */
+export declare const BOOKING_FORM_NAMESPACE = "wix.bookings.v2.bookings";
+/**
+ * Validation result type for form validation.
+ * Fields with errors will be marked according to the validation failures.
+ */
+export interface ValidationResult {
+    /** Whether the form is valid */
+    valid: boolean;
+    /** Array of validation failure messages */
+    validationFailures: string[];
+}
+/**
+ * Configuration for BookingFormService.
+ * Supports two modes:
+ * 1. Client-side loading: Provide formId to fetch the form dynamically
+ * 2. SSR/SSG: Provide a pre-loaded form object (must be from bookings namespace)
+ *
+ * @example
+ * ```tsx
+ * // Pattern 1: Client-side loading
+ * const config = { formId: 'form-123' };
+ *
+ * // Pattern 2: Pre-loaded form (SSR/SSG)
+ * const config = { form: preloadedForm };
+ * ```
+ */
+export type BookingFormServiceConfig = {
+    /** The form ID to load (client-side loading) */
+    formId: string;
+} | {
+    /** Pre-loaded form object (SSR/SSG) - must be from bookings namespace */
+    form: forms.Form;
+};
+/**
+ * API interface for the BookingForm service.
+ * Manages form submission state and validation for booking forms.
+ *
+ * Supports two modes:
+ * - Client-side: formId is provided via config, form is loaded dynamically
+ * - SSR/SSG: Pre-loaded form is provided via config
+ */
+export interface BookingFormServiceAPI {
+    /** Signal containing the current form values from FormService (live state of form fields) */
+    formValues: ReadOnlySignal<FormValues>;
+    /** Signal containing form submission data (set before actual submission) */
+    formSubmission: Signal<FormValues | null>;
+    /** Submitted form ID (won't be supported on first phase) */
+    formSubmissionId: ReadOnlySignal<string | null>;
+    /** Signal containing the form ID (from config or extracted from form) */
+    formId: ReadOnlySignal<string>;
+    /** Signal containing the pre-loaded form (if provided via SSR) */
+    form: ReadOnlySignal<forms.Form | null>;
+    /** Action to store form submission data */
+    setFormSubmission: (formValues: FormValues) => void;
+    /** Action to validate form - internally delegates to Form.Fields ref */
+    validateFormSubmission: () => Promise<ValidationResult>;
+}
+/**
+ * Internal API interface that extends public API.
+ * Contains methods for internal use by core components.
+ */
+export interface BookingFormServiceInternalAPI extends BookingFormServiceAPI {
+    /** Internal: Register validate callback (called by core component) */
+    _setValidateCallback: (callback: () => Promise<ValidationResult>) => void;
+}
+/**
+ * Type guard to check if config has formId
+ */
+export declare function hasFormId(config: BookingFormServiceConfig): config is {
+    formId: string;
+};
+/**
+ * Type guard to check if config has pre-loaded form
+ */
+export declare function hasForm(config: BookingFormServiceConfig): config is {
+    form: forms.Form;
+};
+/**
+ * Service definition for BookingForm.
+ * Defines the contract that the BookingFormService must implement.
+ */
+export declare const BookingFormServiceDefinition: string & {
+    __api: BookingFormServiceAPI;
+    __config: {};
+    isServiceDefinition?: boolean;
+} & BookingFormServiceAPI;
+/**
+ * Implementation of BookingFormService.
+ *
+ * This service manages form submission state for booking flows.
+ * Supports two modes:
+ * 1. Client-side: formId is provided, form is loaded dynamically
+ * 2. SSR/SSG: Pre-loaded form is provided (must be from bookings namespace)
+ *
+ * NOTE: The Form.Fields ref is managed internally - the core component passes
+ * a validate callback that the service stores and calls when validateFormSubmission() is invoked.
+ *
+ * @example
+ * ```tsx
+ * // Pattern 1: Client-side loading
+ * const bookingFormService = useService(
+ *   BookingFormServiceDefinition.withConfig({ formId: 'form-123' })
+ * );
+ *
+ * // Pattern 2: SSR with pre-loaded form
+ * const bookingFormService = useService(
+ *   BookingFormServiceDefinition.withConfig({ form: preloadedForm })
+ * );
+ *
+ * // Store form submission
+ * bookingFormService.setFormSubmission(formValues);
+ *
+ * // Validate form
+ * const result = await bookingFormService.validateFormSubmission();
+ * if (result.valid) {
+ *   // Proceed with booking
+ * }
+ * ```
+ */
+export declare const BookingFormService: import("@wix/services-definitions").ServiceFactory<string & {
+    __api: BookingFormServiceAPI;
+    __config: {};
+    isServiceDefinition?: boolean;
+} & BookingFormServiceAPI, BookingFormServiceConfig>;

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

@@ -0,0 +1,171 @@
+/**
+ * BookingForm Service - Manages form submission state for booking flows
+ *
+ * This service supports two modes:
+ * 1. Client-side: Provide formId to load the form dynamically
+ * 2. SSR/SSG: Provide a pre-loaded form object for server-side rendering
+ *
+ * When using a pre-loaded form, it must belong to the bookings namespace.
+ */
+import { defineService, implementService } from '@wix/services-definitions';
+import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
+import { FormServiceDefinition } from '@wix/headless-forms/services';
+// ============================================================================
+// Constants
+// ============================================================================
+/**
+ * The required namespace for booking forms.
+ * 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
+ */
+export function hasForm(config) {
+    return 'form' in config;
+}
+// ============================================================================
+// Service Definition
+// ============================================================================
+/**
+ * Service definition for BookingForm.
+ * Defines the contract that the BookingFormService must implement.
+ */
+export const BookingFormServiceDefinition = defineService('bookingForm');
+// ============================================================================
+// Service Implementation
+// ============================================================================
+// ============================================================================
+// Validation Helpers
+// ============================================================================
+/**
+ * Validates that a form belongs to the bookings namespace.
+ * @param form The form to validate
+ * @throws Error if the form is not from the bookings namespace
+ */
+function validateBookingFormNamespace(form) {
+    // Check if form has namespace property and validate it
+    // The namespace might be in different locations depending on the form structure
+    const formNamespace = form.namespace ||
+        form._namespace;
+    if (formNamespace && formNamespace !== BOOKING_FORM_NAMESPACE) {
+        throw new Error(`BookingFormService: Invalid form namespace. ` +
+            `Expected "${BOOKING_FORM_NAMESPACE}", but received "${formNamespace}". ` +
+            `Ensure the form is a booking form.`);
+    }
+}
+/**
+ * Extracts the form ID from either config type.
+ * @param config The service config
+ * @returns The form ID
+ */
+function extractFormId(config) {
+    if ('formId' in config) {
+        return config.formId;
+    }
+    // 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.');
+    }
+    return formId;
+}
+// ============================================================================
+// Service Implementation
+// ============================================================================
+/**
+ * Implementation of BookingFormService.
+ *
+ * This service manages form submission state for booking flows.
+ * Supports two modes:
+ * 1. Client-side: formId is provided, form is loaded dynamically
+ * 2. SSR/SSG: Pre-loaded form is provided (must be from bookings namespace)
+ *
+ * NOTE: The Form.Fields ref is managed internally - the core component passes
+ * a validate callback that the service stores and calls when validateFormSubmission() is invoked.
+ *
+ * @example
+ * ```tsx
+ * // Pattern 1: Client-side loading
+ * const bookingFormService = useService(
+ *   BookingFormServiceDefinition.withConfig({ formId: 'form-123' })
+ * );
+ *
+ * // Pattern 2: SSR with pre-loaded form
+ * const bookingFormService = useService(
+ *   BookingFormServiceDefinition.withConfig({ form: preloadedForm })
+ * );
+ *
+ * // Store form submission
+ * bookingFormService.setFormSubmission(formValues);
+ *
+ * // Validate form
+ * const result = await bookingFormService.validateFormSubmission();
+ * if (result.valid) {
+ *   // Proceed with booking
+ * }
+ * ```
+ */
+export const BookingFormService = implementService.withConfig()(BookingFormServiceDefinition, ({ getService, config }) => {
+    const signalsService = getService(SignalsServiceDefinition);
+    const formService = getService(FormServiceDefinition);
+    // Determine if we have a pre-loaded form
+    const hasPreloadedForm = 'form' in 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);
+    // Initialize formSubmission signal (stores form data to be submitted)
+    const formSubmission = signalsService.signal(null);
+    // Initialize submissionId signal (for future use)
+    const formSubmissionId = signalsService.signal(null);
+    // formId signal - readonly
+    const formId = signalsService.signal(formIdValue);
+    // form signal - contains pre-loaded form if provided
+    const form = signalsService.signal(hasPreloadedForm ? 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)
+    const _setValidateCallback = (callback) => {
+        _validateCallback = callback;
+    };
+    // Action to set form submission data
+    const setFormSubmission = (formValues) => {
+        formSubmission.set(formValues);
+    };
+    // Action to validate form - delegates to internally registered callback
+    const validateFormSubmission = async () => {
+        if (!_validateCallback) {
+            console.error('BookingFormService: Validate callback not registered. ' +
+                'Ensure BookingForm component is mounted.');
+            return { valid: false, validationFailures: ['Form not initialized'] };
+        }
+        return _validateCallback();
+    };
+    // Public API (what's exposed in BookingFormServiceAPI interface)
+    const publicApi = {
+        formValues: formService.formValuesSignal,
+        formSubmission,
+        formSubmissionId,
+        formId,
+        form,
+        setFormSubmission,
+        validateFormSubmission,
+        // Internal method for core component access
+        _setValidateCallback,
+    };
+    return publicApi;
+});

package/cjs/dist/services/index.d.ts

@@ -6,3 +6,4 @@ export { ServiceService, ServiceServiceDefinition, type ServiceServiceAPI, type
 export { BookingService, BookingServiceDefinition, type BookingServiceConfig, type Location, type BookingServiceActions, type ServiceSelection, type ServiceSelectionTimeSlot, } from './booking/booking.js';
 export { TimeSlotListService, TimeSlotListServiceDefinition, ViewMode, loadTimeSlotListConfig, type TimeSlotListServiceAPI, type TimeSlotListServiceActions, type TimeSlotListServiceConfig, type SlotSelection, type TimeSlot, type LoadTimeSlotListConfigOptions, type LoadTimeSlotListConfigResult, } from './time-slot-list/index.js';
 export { ServiceListService, ServiceListServiceDefinition, type ServiceListServiceAPI, type ServiceListServiceConfig, type ServiceListFilters, type ServiceListActions, type QueryOptions, loadServiceListServiceInitialData, type SuccessServiceListServiceConfigResult, type ErrorServiceListServiceConfigResult, } from './service-list/service-list.js';
+export { BookingFormService, BookingFormServiceDefinition, type BookingFormServiceAPI, type BookingFormServiceConfig, type BookingFormServiceInternalAPI, type ValidationResult, } from './booking-form/booking-form.js';

package/cjs/dist/services/index.js

@@ -6,3 +6,4 @@ export { ServiceService, ServiceServiceDefinition, loadServiceServiceInitialData
 export { BookingService, BookingServiceDefinition, } from './booking/booking.js';
 export { TimeSlotListService, TimeSlotListServiceDefinition, ViewMode, loadTimeSlotListConfig, } from './time-slot-list/index.js';
 export { ServiceListService, ServiceListServiceDefinition, loadServiceListServiceInitialData, } from './service-list/service-list.js';
+export { BookingFormService, BookingFormServiceDefinition, } from './booking-form/booking-form.js';

package/cjs/dist/services/service/service.js

@@ -185,7 +185,10 @@ export const ServiceService = implementService.withConfig()(ServiceServiceDefini
             if (!bookableSignal.get() || !bookingService)
                 return;
             const currentService = serviceSignal.get();
-            bookingService.actions.updateItem({ service: currentService });
+            bookingService.actions.setItem({
+                service: currentService,
+                resources: [],
+            });
         },
         add: () => {
             if (!bookableSignal.get() || !bookingService)

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

@@ -0,0 +1,156 @@
+/**
+ * BookingForm - High-level component for rendering booking forms
+ * Provides components for displaying and managing booking form fields
+ */
+import React from 'react';
+import { Form } from '@wix/headless-forms/react';
+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;
+    /** 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>;
+    /** Child components - if not provided, Form.Fields is rendered with default field map */
+    children?: React.ReactNode;
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** CSS classes to apply to the root element */
+    className?: string;
+    /** Row gap class name for Form.Fields when using default rendering */
+    rowGapClassname?: string;
+    /** Column gap class name for Form.Fields when using default rendering */
+    columnGapClassname?: string;
+}
+/**
+ * Root component for booking form that wraps CoreBookingForm.Root.
+ * Automatically loads form and handles submission in standalone mode.
+ * Uses DEFAULT_BOOKING_FIELD_MAP for field rendering with optional user overrides.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { BookingForm } from '@wix/headless-bookings/react';
+ *
+ * // Minimal usage - uses default field components
+ * <BookingForm.Root formId="your-form-id" />
+ *
+ * // With custom styling
+ * <BookingForm.Root
+ *   formId="your-form-id"
+ *   className="my-form-container"
+ *   rowGapClassname="gap-y-6"
+ *   columnGapClassname="gap-x-4"
+ * />
+ *
+ * // With custom field overrides
+ * <BookingForm.Root
+ *   formId="your-form-id"
+ *   fieldMap={{ TEXT_INPUT: MyCustomTextInput }}
+ * />
+ *
+ * // With full control over form structure
+ * <BookingForm.Root formId="your-form-id">
+ *   <Form.Loading className="flex justify-center p-4" />
+ *   <Form.LoadingError className="text-destructive px-4 py-3 rounded mb-4" />
+ *   <BookingForm.Fields />
+ *   <Form.Error className="text-destructive p-4 rounded-lg mb-4" />
+ *   <Form.Submitted className="text-green-500 p-4 rounded-lg mb-4" />
+ * </BookingForm.Root>
+ * ```
+ */
+export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Props for BookingForm.Fields component
+ */
+export interface FieldsProps {
+    /** Optional override for row gap class name */
+    rowGapClassname?: string;
+    /** Optional override for column gap class name */
+    columnGapClassname?: string;
+    /** CSS classes to apply */
+    className?: string;
+}
+/**
+ * Fields component that renders Form.Fields with the merged field map.
+ * Must be used within BookingForm.Root.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <BookingForm.Root formId="your-form-id">
+ *   <Form.Loading className="p-4" />
+ *   <BookingForm.Fields rowGapClassname="gap-y-6" />
+ *   <Form.Error className="text-destructive" />
+ * </BookingForm.Root>
+ * ```
+ */
+export declare const Fields: React.ForwardRefExoticComponent<FieldsProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Render props for BookingForm.Data component
+ */
+export interface DataRenderProps {
+    /** The form ID being used */
+    formId: string;
+    /** Merged field map (DEFAULT_BOOKING_FIELD_MAP + user overrides) */
+    fields: FieldMap;
+    /** Current form values from FormService (live state of form fields) */
+    formValues: Record<string, unknown>;
+    /** Current form submission data */
+    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[];
+    }>;
+}
+/**
+ * Props for BookingForm.Data component
+ */
+export interface DataProps {
+    /** The form ID to load (required - standalone mode) */
+    formId: 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>;
+    /** Render prop function that receives form data and actions */
+    children: (data: DataRenderProps) => React.ReactNode;
+}
+/**
+ * Data component that provides booking form data via render props.
+ * Use this when you need programmatic access to form state and actions.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <BookingForm.Data formId="your-form-id">
+ *   {({ formId, fields, formValues, setFormSubmission, validateFormSubmission }) => (
+ *     <div>
+ *       <Form.Fields fieldMap={fields} rowGapClassname="gap-y-4" columnGapClassname="gap-x-2" />
+ *       <button onClick={async () => {
+ *         const result = await validateFormSubmission();
+ *         if (result.valid) {
+ *           // Store current form values before submission
+ *           setFormSubmission(formValues);
+ *         }
+ *       }}>
+ *         Validate & Submit
+ *       </button>
+ *     </div>
+ *   )}
+ * </BookingForm.Data>
+ * ```
+ */
+export declare function Data(props: DataProps): React.ReactNode;
+export declare namespace Data {
+    var displayName: string;
+}
+export {};

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

@@ -0,0 +1,126 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * BookingForm - High-level component for rendering booking forms
+ * Provides components for displaying and managing booking form fields
+ */
+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';
+var TestIds;
+(function (TestIds) {
+    TestIds["bookingFormRoot"] = "booking-form-root";
+    TestIds["bookingFormFields"] = "booking-form-fields";
+})(TestIds || (TestIds = {}));
+/**
+ * Root component for booking form that wraps CoreBookingForm.Root.
+ * Automatically loads form and handles submission in standalone mode.
+ * Uses DEFAULT_BOOKING_FIELD_MAP for field rendering with optional user overrides.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { BookingForm } from '@wix/headless-bookings/react';
+ *
+ * // Minimal usage - uses default field components
+ * <BookingForm.Root formId="your-form-id" />
+ *
+ * // With custom styling
+ * <BookingForm.Root
+ *   formId="your-form-id"
+ *   className="my-form-container"
+ *   rowGapClassname="gap-y-6"
+ *   columnGapClassname="gap-x-4"
+ * />
+ *
+ * // With custom field overrides
+ * <BookingForm.Root
+ *   formId="your-form-id"
+ *   fieldMap={{ TEXT_INPUT: MyCustomTextInput }}
+ * />
+ *
+ * // With full control over form structure
+ * <BookingForm.Root formId="your-form-id">
+ *   <Form.Loading className="flex justify-center p-4" />
+ *   <Form.LoadingError className="text-destructive px-4 py-3 rounded mb-4" />
+ *   <BookingForm.Fields />
+ *   <Form.Error className="text-destructive p-4 rounded-lg mb-4" />
+ *   <Form.Submitted className="text-green-500 p-4 rounded-lg mb-4" />
+ * </BookingForm.Root>
+ * ```
+ */
+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" })] })) }) }) })) }));
+});
+Root.displayName = 'BookingForm.Root';
+const BookingFormContext = React.createContext(null);
+/**
+ * Hook to access BookingForm context
+ * @internal
+ */
+function useBookingFormContext() {
+    const context = React.useContext(BookingFormContext);
+    if (!context) {
+        throw new Error('useBookingFormContext must be used within a BookingForm.Root component');
+    }
+    return context;
+}
+/**
+ * Fields component that renders Form.Fields with the merged field map.
+ * Must be used within BookingForm.Root.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <BookingForm.Root formId="your-form-id">
+ *   <Form.Loading className="p-4" />
+ *   <BookingForm.Fields rowGapClassname="gap-y-6" />
+ *   <Form.Error className="text-destructive" />
+ * </BookingForm.Root>
+ * ```
+ */
+export const Fields = React.forwardRef((props, ref) => {
+    const context = useBookingFormContext();
+    const { rowGapClassname = context.rowGapClassname, columnGapClassname = context.columnGapClassname, className, ...otherProps } = props;
+    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';
+/**
+ * Data component that provides booking form data via render props.
+ * Use this when you need programmatic access to form state and actions.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <BookingForm.Data formId="your-form-id">
+ *   {({ formId, fields, formValues, setFormSubmission, validateFormSubmission }) => (
+ *     <div>
+ *       <Form.Fields fieldMap={fields} rowGapClassname="gap-y-4" columnGapClassname="gap-x-2" />
+ *       <button onClick={async () => {
+ *         const result = await validateFormSubmission();
+ *         if (result.valid) {
+ *           // Store current form values before submission
+ *           setFormSubmission(formValues);
+ *         }
+ *       }}>
+ *         Validate & Submit
+ *       </button>
+ *     </div>
+ *   )}
+ * </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,
+        }) }));
+}
+Data.displayName = 'BookingForm.Data';