@wix/headless-bookings 0.0.95 → 0.0.97

package/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/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/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, ref: 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.

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

@@ -7,24 +7,14 @@
  *
  * 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 { type ReadOnlySignal } from '@wix/services-definitions/core-services/signals';
 import { forms } from '@wix/forms';
+import { FormServiceConfig } from '@wix/headless-forms/services';
 /**
  * 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[];
-}
 /**
  * Error thrown when BookingFormService cannot be initialized due to missing configuration.
  * This occurs when:
@@ -61,7 +51,9 @@ export declare class BookingFormConfigurationError extends Error {
 export type BookingFormServiceConfig = {
     /** The form ID to load (client-side loading) */
     formId: string;
-    /** Optional list of service IDs associated with this booking form */
+    /** Optional additional metadata to pass to FormService */
+    additionalMetadata?: Record<string, string | string[]>;
+    /** Optional list of service IDs to pass to FormService */
     serviceIds?: string[];
 } | {
     /** Pre-loaded form object (SSR/SSG) - must be from bookings namespace */
@@ -76,28 +68,11 @@ export type BookingFormServiceConfig = {
  * - 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;
+    /**
+     * Signal containing the form service config.
+     * Contains either a pre-loaded form (SSR/SSG) or formId with metadata (client-side).
+     */
+    formServiceConfig: ReadOnlySignal<FormServiceConfig | null>;
 }
 export { hasFormId, hasForm, extractFormIdFromForm, extractFormIdFromConfig, type FormIdConfig, } from './utils.js';
 /**
@@ -117,8 +92,16 @@ export declare const BookingFormServiceDefinition: string & {
  * 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.
+ * Initialization:
+ * - Requires either a config (formId or form) OR BookingService with selected services
+ * - If config is not provided, formId is extracted from selected services
+ * - For multiple services, uses DEFAULT_FORM_ID; for single service, uses service's form ID
+ * - Service IDs are extracted from config.serviceIds or from selected services
+ *
+ * Validation:
+ * - The Form.Fields core component registers a validation callback via setValidateCallback
+ * - The validateFormSubmission() method calls this registered callback
+ * - The callback may be null initially until the core component registers it
  *
  * @example
  * ```tsx
@@ -127,17 +110,27 @@ export declare const BookingFormServiceDefinition: string & {
  *   BookingFormServiceDefinition.withConfig({ formId: 'form-123' })
  * );
  *
+ * // Pattern 1b: Client-side loading with service IDs
+ * const bookingFormService = useService(
+ *   BookingFormServiceDefinition.withConfig({
+ *     formId: 'form-123',
+ *     serviceIds: ['service-1', 'service-2']
+ *   })
+ * );
+ *
  * // Pattern 2: SSR with pre-loaded form
  * const bookingFormService = useService(
  *   BookingFormServiceDefinition.withConfig({ form: preloadedForm })
  * );
  *
- * // Store form submission
- * bookingFormService.setFormSubmission(formValues);
+ * // Pattern 3: No config - formId extracted from BookingService
+ * const bookingFormService = useService(
+ *   BookingFormServiceDefinition.withConfig(undefined)
+ * );
  *
- * // Validate form
- * const result = await bookingFormService.validateFormSubmission();
- * if (result.valid) {
+ * // Validate form (callback must be registered by core component first)
+ * const result = await bookingFormService.validateFormSubmission?.();
+ * if (result?.valid) {
  *   // Proceed with booking
  * }
  * ```