@wix/headless-bookings 0.0.96 → 0.0.97

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

@@ -4,7 +4,7 @@
  */
 import React from 'react';
 import { Form } from '@wix/headless-forms/react';
-import * as CoreBookingForm from '../core/booking-form/BookingForm.js';
+import type { BookingFormRenderProps } from '../core/booking-form/BookingForm.js';
 type FieldMap = Parameters<typeof Form.Fields>[0]['fieldMap'];
 export declare const TestIds: {
     readonly bookingFormRoot: "booking-form-root";
@@ -23,8 +23,13 @@ export interface RootProps {
     additionalMetadata?: Record<string, string | string[]>;
     /** 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;
+    /**
+     * Child components - can be:
+     * - ReactNode for declarative usage
+     * - Render prop function for programmatic access to form data and actions
+     * - undefined to use default UI
+     */
+    children?: React.ReactNode | ((data: BookingFormRenderProps) => React.ReactNode);
     /** Whether to render as a child component */
     asChild?: boolean;
     /** CSS classes to apply to the root element */
@@ -78,6 +83,28 @@ export interface RootProps {
  *   <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>
+ *
+ * // With render props for programmatic access
+ * <BookingForm.Root formId="your-form-id" fieldMap={...}>
+ *   {({ fields, formValues, validateFormSubmission, setFormSubmission, formRef }) => (
+ *     <div>
+ *       <Form.Fields
+ *         fieldMap={fields}
+ *         formRef={formRef}
+ *         rowGapClassname="gap-y-4"
+ *         columnGapClassname="gap-x-2"
+ *       />
+ *       <button onClick={async () => {
+ *         const isValid = await validateFormSubmission();
+ *         if (isValid) {
+ *           setFormSubmission(formValues);
+ *         }
+ *       }}>
+ *         Validate & Submit
+ *       </button>
+ *     </div>
+ *   )}
+ * </BookingForm.Root>
  * ```
  */
 export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLDivElement>>;
@@ -107,157 +134,6 @@ export interface FieldsProps {
  * ```
  */
 export declare const Fields: React.ForwardRefExoticComponent<FieldsProps & React.RefAttributes<HTMLDivElement>>;
-/**
- * Props for BookingForm.Actions.ValidateFormSubmission component
- */
-export interface ValidateFormSubmissionProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onClick'> {
-    asChild?: boolean;
-    children?: React.ReactNode | ((props: {
-        onClick: () => Promise<void>;
-        valid: boolean | null;
-        validationFailures: string[];
-    }) => React.ReactNode);
-    label?: string;
-    /** Callback when validation completes */
-    onValidationComplete?: (result: {
-        valid: boolean;
-        validationFailures: string[];
-    }) => void;
-    onClick?: (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
- */
-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;
-    /** 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. */
-    validateFormSubmission: () => Promise<boolean>;
-}
-/**
- * Props for BookingForm.Data component
- */
-export interface DataProps {
-    /** 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[]>;
-    /** 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.
- * Use this when you need programmatic access to form state and actions.
- *
- * @component
- * @example
- * ```tsx
- * <BookingForm.Data formId="your-form-id">
- *   {({ formId, fields, formValues, formRef, validateFormSubmission, setFormSubmission }) => (
- *     <div>
- *       <Form.Fields
- *         fieldMap={fields}
- *         rowGapClassname="gap-y-4"
- *         columnGapClassname="gap-x-2"
- *         formRef={formRef}
- *       />
- *       <button onClick={async () => {
- *         const isValid = await validateFormSubmission();
- *         if (isValid) {
- *           // Store current form values before submission
- *           setFormSubmission(formValues);
- *         }
- *       }}>
- *         Validate & Submit
- *       </button>
- *     </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;
-}
 /**
  * Re-export LoadError component and utilities for error handling
  */

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

@@ -87,11 +87,44 @@ export const TestIds = {
  *   <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>
+ *
+ * // With render props for programmatic access
+ * <BookingForm.Root formId="your-form-id" fieldMap={...}>
+ *   {({ fields, formValues, validateFormSubmission, setFormSubmission, formRef }) => (
+ *     <div>
+ *       <Form.Fields
+ *         fieldMap={fields}
+ *         formRef={formRef}
+ *         rowGapClassname="gap-y-4"
+ *         columnGapClassname="gap-x-2"
+ *       />
+ *       <button onClick={async () => {
+ *         const isValid = await validateFormSubmission();
+ *         if (isValid) {
+ *           setFormSubmission(formValues);
+ *         }
+ *       }}>
+ *         Validate & Submit
+ *       </button>
+ *     </div>
+ *   )}
+ * </BookingForm.Root>
  * ```
  */
 export const Root = React.forwardRef((props, ref) => {
     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" })] })) }) }) })) }) }));
+    return (_jsx(BookingFormErrorBoundary, { fallback: loadErrorFallback, children: _jsx(CoreBookingForm.Root, { formId: formId, serviceIds: serviceIds, additionalMetadata: additionalMetadata, fieldMap: fieldMap, children: (renderProps) => {
+                // If children is a render prop function, call it with the render props
+                if (typeof children === 'function') {
+                    return children(renderProps);
+                }
+                // Otherwise, use declarative pattern with context
+                return (_jsx(BookingFormContext.Provider, { value: {
+                        fields: renderProps.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: renderProps.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);
@@ -126,131 +159,6 @@ 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, label, onValidationComplete, onClick, ...rest } = 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);
-                }
-                onClick?.(result);
-            };
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, "data-testid": TestIds.bookingFormActionValidateFormSubmission, "data-valid": valid, customElement: children, customElementProps: {
-                    onClick: handleClick,
-                    valid,
-                    validationFailures,
-                }, children: _jsx("button", { onClick: handleClick, children: 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.
- *
- * @component
- * @example
- * ```tsx
- * <BookingForm.Data formId="your-form-id">
- *   {({ formId, fields, formValues, formRef, validateFormSubmission, setFormSubmission }) => (
- *     <div>
- *       <Form.Fields
- *         fieldMap={fields}
- *         rowGapClassname="gap-y-4"
- *         columnGapClassname="gap-x-2"
- *         formRef={formRef}
- *       />
- *       <button onClick={async () => {
- *         const isValid = await validateFormSubmission();
- *         if (isValid) {
- *           // Store current form values before submission
- *           setFormSubmission(formValues);
- *         }
- *       }}>
- *         Validate & Submit
- *       </button>
- *     </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, 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,
-                validateFormSubmission,
-            }) }) }));
-}
-Data.displayName = 'BookingForm.Data';
 // ============================================================================
 // Error Handling
 // ============================================================================

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

@@ -11,7 +11,7 @@
 import * as React from 'react';
 import { type FormValues } from '@wix/form-public';
 import { forms, submissions } from '@wix/forms';
-import { BookingFormConfigurationError, type ValidationResult } from '../../../services/booking-form/booking-form.js';
+import { BookingFormConfigurationError } from '../../../services/booking-form/booking-form.js';
 import { Form } from '@wix/headless-forms/react';
 type FieldMap = Parameters<typeof Form.Fields>[0]['fieldMap'];
 export type Submit = () => Promise<submissions.GetSubmissionResponse['submission'] | undefined>;
@@ -25,14 +25,10 @@ export type FormHandle = {
  * Render props data provided to BookingForm children
  */
 export interface BookingFormRenderProps {
-    /** The form ID being used */
-    formId: string;
     /** Current form values from FormService (live state of form fields) */
     formValues: FormValues;
     /** Current form submission data (values stored before submission) */
     formSubmission: FormValues | null;
-    /** Action to store form submission data */
-    setFormSubmission: (formValues: FormValues) => void;
     /** Action to validate the form fields. Returns true if valid, false if there are errors. */
     validateFormSubmission: () => Promise<boolean>;
     /** Merged field map (DEFAULT_BOOKING_FIELD_MAP + user overrides) */
@@ -148,52 +144,6 @@ export type BookingFormProps = BookingFormWithFormIdProps | BookingFormWithFormP
  * ```
  */
 export declare function Root(props: BookingFormProps): React.ReactNode;
-/**
- * Render props for BookingForm.Actions component
- */
-export interface ActionsRenderProps {
-    /** Action to validate the form submission */
-    validateFormSubmission: () => Promise<ValidationResult>;
-    /** The form ID being used */
-    formId: string;
-    /** Current form values */
-    formValues: FormValues;
-    /** Current form submission data */
-    formSubmission: FormValues | null;
-}
-/**
- * Props for BookingForm.Actions component
- */
-export interface ActionsProps {
-    children: (data: ActionsRenderProps) => React.ReactNode;
-}
-/**
- * Core component that provides booking form actions via render props.
- * Must be used within BookingForm.Root context.
- *
- * @component
- * @example
- * ```tsx
- * <CoreBookingForm.Root formId="form-123">
- *   {({ fields }) => (
- *     <>
- *       <Form.Fields fieldMap={fields} />
- *       <CoreBookingForm.Actions>
- *         {({ validateFormSubmission, formId }) => (
- *           <button onClick={async () => {
- *             const result = await validateFormSubmission();
- *             console.log('Validation result:', result);
- *           }}>
- *             Validate Form
- *           </button>
- *         )}
- *       </CoreBookingForm.Actions>
- *     </>
- *   )}
- * </CoreBookingForm.Root>
- * ```
- */
-export declare function Actions(props: ActionsProps): React.ReactNode;
 /**
  * Props for BookingForm.LoadError component
  */

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

@@ -10,33 +10,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * 2. SSR/SSG: Provide a pre-loaded form object for server-side rendering
  */
 import * as React from 'react';
-import { useMemo, useRef, useCallback } from 'react';
+import { useRef, useCallback } from 'react';
 import { WixServices, useService } from '@wix/services-manager-react';
 import { createServicesMap } from '@wix/services-manager';
-import { BookingFormServiceDefinition, BookingFormService, BookingFormConfigurationError, BOOKING_FORM_NAMESPACE, extractFormIdFromConfig, } from '../../../services/booking-form/booking-form.js';
+import { BookingFormServiceDefinition, BookingFormService, BookingFormConfigurationError, } from '../../../services/booking-form/booking-form.js';
 import { BookingServiceDefinition } from '../../../services/booking/booking.js';
 import { Form } from '@wix/headless-forms/react';
+import { FormServiceDefinition } from '@wix/headless-forms/services';
+import { SignalsServiceDefinition } from '@wix/services-definitions/core-services/signals';
 // ============================================================================
 // Component
 // ============================================================================
-/**
- * Extracts the form ID from props (either directly or from form object)
- * Returns undefined if formId should be extracted from services by the service layer
- */
-function extractFormIdFromProps(props) {
-    // Convert props to config-like object for the utility
-    const config = props.form
-        ? { form: props.form }
-        : props.formId
-            ? { formId: props.formId }
-            : undefined;
-    const formId = extractFormIdFromConfig(config);
-    // If form was provided but we couldn't extract formId, that's an error
-    if (props.form && !formId) {
-        throw new Error('BookingForm: Could not extract form ID from provided form object.');
-    }
-    return formId;
-}
 /**
  * Core component that provides booking form data via render props.
  * Uses BookingFormService to manage form submission state.
@@ -107,78 +91,24 @@ function extractFormIdFromProps(props) {
  */
 export function Root(props) {
     const { serviceIds, additionalMetadata, fieldMap, children } = props;
-    // Determine if we have a pre-loaded form
-    const hasPreloadedForm = 'form' in props && props.form;
-    const preloadedForm = hasPreloadedForm ? props.form : null;
-    // Extract formId from props
-    const propsFormId = extractFormIdFromProps(props);
-    // Try to get BookingService if available (to extract formId and serviceIds from services)
-    let bookingService = null;
-    try {
-        bookingService = useService(BookingServiceDefinition);
-    }
-    catch {
-        // BookingService not available - that's ok if formId and serviceIds were provided explicitly
-        bookingService = null;
-    }
-    // Determine final formId: use props formId if provided, otherwise extract from services
-    let formId = propsFormId;
-    if (!formId && bookingService) {
-        const serviceSelections = bookingService.serviceSelections.get();
-        const services = serviceSelections.length
-            ? serviceSelections.map((s) => s.service)
-            : [];
-        formId = services.find((s) => s.form?._id)?.form?._id;
-    }
-    // Determine final serviceIds: use props serviceIds if provided, otherwise extract from services
-    let resolvedServiceIds = serviceIds;
-    if (!resolvedServiceIds && bookingService) {
-        const serviceSelections = bookingService.serviceSelections.get();
-        resolvedServiceIds = serviceSelections
-            .map((s) => s.service._id)
-            .filter((id) => Boolean(id));
-    }
-    // Merge serviceIds into additionalMetadata
-    const mergedMetadata = {
-        ...additionalMetadata,
-        ...(resolvedServiceIds &&
-            resolvedServiceIds.length > 0 && { serviceIds: resolvedServiceIds }),
-    };
-    // Build formServiceConfig for FormService
-    // If we have a pre-loaded form, pass it directly
-    // If we have formId, pass it with namespace and metadata
-    const formServiceConfig = useMemo(() => {
-        if (preloadedForm) {
-            return { form: preloadedForm };
-        }
-        // Only provide config if formId is available
-        if (formId) {
-            return {
-                formId,
-                namespace: BOOKING_FORM_NAMESPACE,
-                ...(Object.keys(mergedMetadata).length > 0 && {
-                    additionalMetadata: mergedMetadata,
-                }),
-            };
-        }
-    }, [formId, mergedMetadata, preloadedForm]);
-    // Build bookingFormServiceConfig
-    const bookingFormServiceConfig = useMemo(() => {
-        if (preloadedForm) {
-            return { form: preloadedForm };
-        }
-        // formId is optional - service will extract from services if not provided
-        return formId ? { formId, serviceIds } : undefined;
-    }, [formId, preloadedForm, serviceIds]);
     // Create formRef to pass to Form.Root and BookingFormContent
     const formRef = useRef(null);
-    // If formServiceConfig is not available, we can't render the form
+    const bookingFormServiceConfig = props.form
+        ? { form: props.form }
+        : props.formId
+            ? { formId: props.formId, additionalMetadata, serviceIds }
+            : undefined;
+    // Use Form.Root to set up FormService, then nest WixServices for BookingFormService
+    // This allows BookingFormService to access FormService via getService internally
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(BookingFormServiceDefinition, BookingFormService, bookingFormServiceConfig), disposeOnUnmount: true, children: _jsx(FormWrapper, { formRef: formRef, children: _jsx(BookingFormContent, { fields: fieldMap, formRef: formRef, children: children }) }) }));
+}
+function FormWrapper({ children, formRef, }) {
+    const bookingFormService = useService(BookingFormServiceDefinition);
+    const formServiceConfig = bookingFormService.formServiceConfig.get();
     if (!formServiceConfig) {
         return null;
     }
-    // Use Form.Root to set up FormService, then nest WixServices for BookingFormService
-    // This allows BookingFormService to access FormService via getService internally
-    return (_jsx(Form.Root, { formServiceConfig: formServiceConfig, formRef: formRef, children: _jsx(WixServices, { servicesMap: createServicesMap().addService(BookingFormServiceDefinition, BookingFormService, bookingFormServiceConfig), disposeOnUnmount: true, children: _jsx(BookingFormContent, { fields: fieldMap, formRef: formRef, children: children }) }) }));
+    return (_jsx(Form.Root, { formServiceConfig: formServiceConfig, formRef: formRef, children: children }));
 }
 /**
  * Internal component that consumes BookingFormService and provides render props.
@@ -205,72 +135,31 @@ function BookingFormContent({ fields, formRef, children, }) {
     // For now, we'll always attempt to get it and let it throw if not available
     // The user should wrap BookingForm with Booking.Root when using Booking.Actions.Book
     const bookingService = useService(BookingServiceDefinition);
+    const formService = useService(FormServiceDefinition);
+    const signalsService = useService(SignalsServiceDefinition);
     // Create validateFormSubmission action that uses the form ref
     const validateFormSubmission = useCallback(() => {
         return formRef.current?.validate() ?? Promise.resolve(false);
     }, []);
-    // Wrap setFormSubmission to also sync to BookingService when available
-    const setFormSubmission = useCallback((formValues) => {
-        // Set in BookingFormService (always)
-        bookingFormService.setFormSubmission(formValues);
-        // Also set in BookingService if available (for canBook check)
-        // This allows Booking.Actions.Book to work correctly
-        if (bookingService) {
+    const formValues = formService.formValuesSignal.get();
+    const formServiceConfig = bookingFormService.formServiceConfig.get();
+    signalsService.effect(() => {
+        const formValues = formService.formValuesSignal.get();
+        if (formValues && Object.values(formValues).filter(Boolean).length > 0) {
             bookingService.actions.setFormSubmission(formValues);
         }
-    }, [bookingFormService, bookingService]);
-    const formSubmission = bookingFormService.formSubmission.get();
-    const formValues = bookingFormService.formValues.get();
-    // Get formId from service (it extracts from services if not provided in config)
-    const resolvedFormId = bookingFormService.formId.get();
+    });
+    if (!formServiceConfig) {
+        return null;
+    }
     return children({
-        formId: resolvedFormId,
         formValues,
-        formSubmission,
-        setFormSubmission,
+        formSubmission: formService.formValuesSignal.get(),
         validateFormSubmission,
         formRef,
         fields,
     });
 }
-/**
- * Core component that provides booking form actions via render props.
- * Must be used within BookingForm.Root context.
- *
- * @component
- * @example
- * ```tsx
- * <CoreBookingForm.Root formId="form-123">
- *   {({ fields }) => (
- *     <>
- *       <Form.Fields fieldMap={fields} />
- *       <CoreBookingForm.Actions>
- *         {({ validateFormSubmission, formId }) => (
- *           <button onClick={async () => {
- *             const result = await validateFormSubmission();
- *             console.log('Validation result:', result);
- *           }}>
- *             Validate Form
- *           </button>
- *         )}
- *       </CoreBookingForm.Actions>
- *     </>
- *   )}
- * </CoreBookingForm.Root>
- * ```
- */
-export function Actions(props) {
-    const bookingFormService = useService(BookingFormServiceDefinition);
-    const formSubmission = bookingFormService.formSubmission.get();
-    const formValues = bookingFormService.formValues.get();
-    const formId = bookingFormService.formId.get();
-    return props.children({
-        validateFormSubmission: bookingFormService.validateFormSubmission,
-        formId,
-        formValues,
-        formSubmission,
-    });
-}
 /**
  * Component to display when BookingForm fails to load due to configuration errors.
  * This component should be used in an error boundary to catch BookingFormConfigurationError.