/** * Core BookingForm Component * * Provides low-level access to booking form functionality via render props. * Wraps Form.Root and provides merged field map with booking defaults. * * 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 */ import * as React from 'react'; import { type FormValues } from '@wix/forms/components'; import { forms, submissions } from '@wix/forms'; import { BookingFormConfigurationError } from '../../../services/booking-form/booking-form.js'; import { Form } from '@wix/forms/components'; type FieldMap = Parameters[0]['fieldMap']; export type Submit = () => Promise; export type ValidateStep = (stepId: string) => Promise; export type FormHandle = { submit: Submit; validate: () => Promise; validateStep?: ValidateStep; }; /** * Render props data provided to BookingForm children */ export interface BookingFormRenderProps { /** 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 validate the form fields. Returns true if valid, false if there are errors. */ validateFormSubmission: () => Promise; /** Merged field map (DEFAULT_BOOKING_FIELD_MAP + user overrides) */ fields: FieldMap; /** Ref to access form methods imperatively (pass to Form.Fields) */ formRef: React.RefObject; } /** * Base props shared by all BookingForm config patterns */ interface BookingFormBaseProps { /** Optional service IDs to pass to FormService (will be merged into additionalMetadata) */ serviceIds?: string[]; /** Optional additional metadata to pass to FormService */ additionalMetadata?: Record; /** Optional namespace override for the form. Defaults to the bookings namespace. */ namespace?: string; /** Field map to override default booking field components */ fieldMap: FieldMap; /** Render prop function that receives form data and actions */ children: (data: BookingFormRenderProps) => React.ReactNode; } /** * Props for BookingForm with formId (client-side loading) */ interface BookingFormWithFormIdProps extends BookingFormBaseProps { /** The form ID to load (client-side loading) if not provided, the formId will be extracted from the selected service if available */ formId?: string; /** Pre-loaded form - not used in this mode */ form?: never; } /** * Props for BookingForm with pre-loaded form (SSR/SSG) * Returns undefined if formId should be extracted from services by the service layer */ interface BookingFormWithFormProps extends BookingFormBaseProps { /** Pre-loaded form object (SSR/SSG) - must be from bookings namespace */ form: forms.Form; /** Form ID - not used in this mode (extracted from form) */ formId?: never; } /** * Props for BookingForm render prop component. * Supports two patterns: * 1. Client-side: Provide formId to load form dynamically * 2. SSR/SSG: Provide pre-loaded form object */ export type BookingFormProps = BookingFormWithFormIdProps | BookingFormWithFormProps; /** * Core component that provides booking form data via render props. * Uses BookingFormService to manage form submission state. * * Supports two modes: * 1. Client-side: Provide formId to load the form dynamically * 2. SSR/SSG: Provide a pre-loaded form object * * This component: * - Sets up both FormService and BookingFormService in the same context * - BookingFormService internally accesses FormService for formValues * - Merges user's fieldMap with DEFAULT_BOOKING_FIELD_MAP * - Provides form data and actions via render props * - Form.* components (Form.Fields, Form.Loading, etc.) work because FormService is in context * * @component * @example * ```tsx * // Pattern 1: Client-side loading * import * as CoreBookingForm from '@wix/headless-bookings/react/core/booking-form'; * import { Form } from '@wix/forms/components'; * * * {({ formId, setFormSubmission, fields }) => ( * * )} * * ``` * * @example * ```tsx * // Pattern 2: SSR with pre-loaded form * import * as CoreBookingForm from '@wix/headless-bookings/react/core/booking-form'; * import { loadBookingFormConfig } from '@wix/headless-bookings/services'; * * // Server-side: Load form * const { form } = await loadBookingFormConfig('form-123'); * * // Client-side: Render with pre-loaded form * * {({ formId, setFormSubmission, fields }) => ( * * )} * * ``` * * @example * ```tsx * // With custom field overrides and saving form values * * {({ fields, formValues, setFormSubmission }) => ( * <> * * * * )} * * ``` */ export declare function Root(props: BookingFormProps): React.ReactNode; /** * Props for BookingForm.LoadError component */ export interface LoadErrorProps { /** The error that was caught */ error: Error; /** Whether to render as a child component */ asChild?: boolean; /** Custom content to render. If not provided, displays the error message. */ children?: React.ReactNode; /** Additional CSS class name */ className?: string; } /** * Component to display when BookingForm fails to load due to configuration errors. * This component should be used in an error boundary to catch BookingFormConfigurationError. * * @component * @example * ```tsx * import * as CoreBookingForm from '@wix/headless-bookings/react/core/booking-form'; * * // Default usage with className * * * // Custom content * *
*

Error Loading Form

*

Please try again later.

*
*
* * // With asChild for custom components * * * * ``` */ export declare const LoadError: React.ForwardRefExoticComponent>; /** * Type guard to check if an error is a BookingFormConfigurationError */ export declare function isBookingFormConfigurationError(error: unknown): error is BookingFormConfigurationError; export { BookingFormConfigurationError };