@wix/headless-bookings 0.0.55 → 0.0.57

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

@@ -1,58 +1,42 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
+/**
+ * Core BookingForm Component
+ *
+ * Provides low-level access to booking form functionality via render props.
+ * Wraps CoreForm.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 { useMemo, useRef, useCallback } from 'react';
 import { WixServices, useService } from '@wix/services-manager-react';
 import { createServicesMap } from '@wix/services-manager';
-import { BookingFormServiceDefinition, BookingFormService, BOOKING_FORM_NAMESPACE, } from '../../../services/booking-form/booking-form.js';
+import { UniqueFieldSuffixContextProvider, } from '@wix/form-public';
+import { BookingFormServiceDefinition, BookingFormService, BookingFormConfigurationError, BOOKING_FORM_NAMESPACE, extractFormIdFromConfig, } from '../../../services/booking-form/booking-form.js';
+import { BookingServiceDefinition } from '../../../services/booking/booking.js';
 import { FormServiceDefinition, FormService, } from '@wix/headless-forms/services';
-// TODO: remove this when form will be updated to support optional field map
-const DEFAULT_BOOKING_FIELD_MAP = {
-    TEXT_INPUT: () => null,
-    TEXT_AREA: () => null,
-    PHONE_INPUT: () => null,
-    EMAIL_INPUT: () => null,
-    NUMBER_INPUT: () => null,
-    CHECKBOX: () => null,
-    DROPDOWN: () => null,
-    DATE_PICKER: () => null,
-    SUBMIT_BUTTON: () => null,
-    RADIO_GROUP: () => null,
-    CHECKBOX_GROUP: () => null,
-    DATE_INPUT: () => null,
-    DATE_TIME_INPUT: () => null,
-    TIME_INPUT: () => null,
-    FILE_UPLOAD: () => null,
-    SIGNATURE: () => null,
-    TEXT: () => null,
-    MULTILINE_ADDRESS: () => null,
-    RATING_INPUT: () => null,
-    TAGS: () => null,
-    PRODUCT_LIST: () => null,
-    FIXED_PAYMENT: () => null,
-    PAYMENT_INPUT: () => null,
-    DONATION: () => null,
-    APPOINTMENT: () => null,
-    IMAGE_CHOICE: () => null,
-};
 // ============================================================================
 // 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) {
-    if ('formId' in props && props.formId) {
-        return props.formId;
-    }
-    if ('form' in props && props.form) {
-        const form = props.form;
-        const formId = form.id ||
-            form._id;
-        if (!formId) {
-            throw new Error('BookingForm: Could not extract form ID from provided form object.');
-        }
-        return formId;
+    // 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.');
     }
-    throw new Error('BookingForm: Either formId or form must be provided.');
+    return formId;
 }
 /**
  * Core component that provides booking form data via render props.
@@ -123,41 +107,75 @@ function extractFormIdFromProps(props) {
  * ```
  */
 export function Root(props) {
-    const { additionalMetadata, fieldMap: userFieldMap, children } = 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 formId = extractFormIdFromProps(props);
-    // Merge user's partial field map with booking defaults
-    const fields = useMemo(() => ({
-        // ...DEFAULT_BOOKING_FIELD_MAP, // TODO: Add default field map
-        ...userFieldMap,
-    }), [userFieldMap]);
+    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; otherwise pass formId
+    // 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 };
         }
-        return {
-            formId,
-            namespace: BOOKING_FORM_NAMESPACE,
-            ...(additionalMetadata && { additionalMetadata }),
-        };
-    }, [formId, additionalMetadata, 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 };
         }
-        return { formId };
-    }, [formId, preloadedForm]);
+        // formId is optional - service will extract from services if not provided
+        return formId ? { formId, serviceIds } : undefined;
+    }, [formId, preloadedForm, serviceIds]);
     // Both FormService and BookingFormService are added to the same WixServices context
     // This allows BookingFormService to access FormService via getService internally
     return (_jsx(WixServices, { servicesMap: createServicesMap()
             .addService(FormServiceDefinition, FormService, formServiceConfig)
-            .addService(BookingFormServiceDefinition, BookingFormService, bookingFormServiceConfig), children: _jsx(BookingFormContent, { formId: formId, fields: { ...DEFAULT_BOOKING_FIELD_MAP, ...fields }, children: children }) }));
+            .addService(BookingFormServiceDefinition, BookingFormService, bookingFormServiceConfig), children: _jsx(UniqueFieldSuffixContextProvider, { children: _jsx(BookingFormContent, { fields: fieldMap, children: children }) }) }));
 }
 /**
  * Internal component that consumes BookingFormService and provides render props.
@@ -165,17 +183,139 @@ export function Root(props) {
  *
  * Note: BookingFormService internally accesses FormService to get formValues,
  * so we only need to consume BookingFormService here.
+ *
+ * Also automatically syncs form submission to BookingService when available,
+ * so Booking.Actions.Book can check canBook() correctly.
+ *
+ * Note: BookingService must be available in a parent WixServices context
+ * (typically provided by Booking.Root) for the sync to work. If BookingService
+ * is not available, useService will throw. This is expected since Booking.Actions.Book
+ * requires Booking.Root to be in the component tree.
  */
-function BookingFormContent({ formId, fields, children, }) {
+function BookingFormContent({ fields, children, }) {
     const bookingFormService = useService(BookingFormServiceDefinition);
+    // Try to get BookingService from parent context (provided by Booking.Root)
+    // Note: useService must be called unconditionally per React hooks rules.
+    // If BookingService is not available, useService will throw an error.
+    // This is expected - Booking.Actions.Book requires Booking.Root to be in the tree.
+    // We use a wrapper component pattern to handle this gracefully.
+    // 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);
+    // Create internal ref for form handle
+    const formRef = useRef(null);
+    // Create validate action that uses the form ref
+    const validate = 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) {
+            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();
     return children({
-        formId,
+        formId: resolvedFormId,
         formValues,
         formSubmission,
-        setFormSubmission: bookingFormService.setFormSubmission,
-        validateFormSubmission: bookingFormService.validateFormSubmission,
+        setFormSubmission,
+        validateFormSubmission: validate,
+        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.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import * as CoreBookingForm from '@wix/headless-bookings/react/core/booking-form';
+ *
+ * // Default usage with className
+ * <CoreBookingForm.LoadError error={error} className="text-destructive p-4" />
+ *
+ * // Custom content
+ * <CoreBookingForm.LoadError error={error}>
+ *   <div className="error-container">
+ *     <h3>Error Loading Form</h3>
+ *     <p>Please try again later.</p>
+ *   </div>
+ * </CoreBookingForm.LoadError>
+ *
+ * // With asChild for custom components
+ * <CoreBookingForm.LoadError error={error} asChild>
+ *   <CustomErrorComponent />
+ * </CoreBookingForm.LoadError>
+ * ```
+ */
+export const LoadError = React.forwardRef((props, ref) => {
+    const { error, asChild, children, className, ...otherProps } = props;
+    const errorData = { error, message: error.message };
+    if (asChild && React.isValidElement(children)) {
+        return React.cloneElement(children, {
+            ref,
+            className,
+            'data-testid': 'booking-form-load-error',
+            role: 'alert',
+            ...errorData,
+            ...otherProps,
+        });
+    }
+    return (_jsx("div", { ref: ref, className: className, "data-testid": "booking-form-load-error", role: "alert", ...otherProps, children: children ?? error.message }));
+});
+/**
+ * Type guard to check if an error is a BookingFormConfigurationError
+ */
+export function isBookingFormConfigurationError(error) {
+    return error instanceof BookingFormConfigurationError;
+}
+// Re-export the error class for convenience
+export { BookingFormConfigurationError };

package/cjs/dist/react/time-slot-list/TimeSlot.d.ts

@@ -8,6 +8,7 @@
 import React from 'react';
 import { AsChildChildren } from '@wix/headless-utils/react';
 import type { TimeSlot as TimeSlotType } from '@wix/auto_sdk_bookings_availability-time-slots';
+import * as CoreTimeSlot from '../core/time-slot-list/TimeSlot.js';
 export type { StaffMemberData } from '../core/time-slot-list/TimeSlot.js';
 /**
  * Props for TimeSlot.Root component
@@ -131,6 +132,7 @@ export interface SelectProps {
     }) => React.ReactNode);
     className?: string;
     label?: string;
+    onClicked?: (timeSlot: TimeSlotType) => void;
 }
 /**
  * Button to select this time slot.
@@ -150,6 +152,13 @@ export interface SelectProps {
  *   <button className="btn-primary">Book this slot</button>
  * </TimeSlot.Actions.Select>
  *
+ * // With onClicked callback for navigation
+ * <TimeSlot.Actions.Select
+ *   onClicked={(timeSlot) => {
+ *     router.push(`/booking/confirm/${timeSlot.localStartDate}`);
+ *   }}
+ * />
+ *
  * // Using render prop pattern
  * <TimeSlot.Actions.Select>
  *   {({ isSelected, bookable, onClick }) => (
@@ -171,6 +180,7 @@ export interface ClearStaffSelectionProps {
     }) => React.ReactNode);
     className?: string;
     label?: string;
+    onClicked?: (timeSlot: TimeSlotType) => void;
 }
 /**
  * Button to clear staff selection while keeping the slot selected.
@@ -191,6 +201,13 @@ export interface ClearStaffSelectionProps {
  *   <button className="btn-secondary">Clear staff</button>
  * </TimeSlot.Actions.ClearStaffSelection>
  *
+ * // With onClicked callback
+ * <TimeSlot.Actions.ClearStaffSelection
+ *   onClicked={(timeSlot) => {
+ *     console.log('Staff selection cleared for', timeSlot.localStartDate);
+ *   }}
+ * />
+ *
  * // Using render prop pattern
  * <TimeSlot.Actions.ClearStaffSelection>
  *   {({ onClick }) => <button onClick={onClick}>Change selection</button>}
@@ -324,6 +341,7 @@ export interface SelectStaffMemberProps {
     }) => React.ReactNode);
     className?: string;
     label?: string;
+    onClicked?: (staffMember: CoreTimeSlot.StaffMemberData) => void;
 }
 /**
  * Button to select this staff member.
@@ -343,6 +361,13 @@ export interface SelectStaffMemberProps {
  *   <button className="btn-primary">Choose Staff</button>
  * </TimeSlot.StaffMember.Actions.Select>
  *
+ * // With onClicked callback
+ * <TimeSlot.StaffMember.Actions.Select
+ *   onClicked={(staffMember) => {
+ *     console.log('Selected staff:', staffMember.name);
+ *   }}
+ * />
+ *
  * // Using render prop pattern
  * <TimeSlot.StaffMember.Actions.Select>
  *   {({ isSelected, onClick }) => (

package/cjs/dist/react/time-slot-list/TimeSlot.js

@@ -139,6 +139,13 @@ Duration.displayName = 'TimeSlot.Duration';
  *   <button className="btn-primary">Book this slot</button>
  * </TimeSlot.Actions.Select>
  *
+ * // With onClicked callback for navigation
+ * <TimeSlot.Actions.Select
+ *   onClicked={(timeSlot) => {
+ *     router.push(`/booking/confirm/${timeSlot.localStartDate}`);
+ *   }}
+ * />
+ *
  * // Using render prop pattern
  * <TimeSlot.Actions.Select>
  *   {({ isSelected, bookable, onClick }) => (
@@ -150,14 +157,18 @@ Duration.displayName = 'TimeSlot.Duration';
  * ```
  */
 export const Select = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label = 'Select' } = props;
-    return (_jsx(CoreTimeSlot.Actions, { children: ({ selectTimeSlot, isSelected, bookable }) => {
+    const { asChild, children, className, label = 'Select', onClicked } = props;
+    return (_jsx(CoreTimeSlot.Actions, { children: ({ selectTimeSlot, isSelected, bookable, timeSlot }) => {
+            const handleClick = () => {
+                selectTimeSlot();
+                onClicked?.(timeSlot);
+            };
             return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotActionSelect, "data-selected": isSelected, "data-bookable": bookable, customElement: children, customElementProps: {
-                    onClick: selectTimeSlot,
+                    onClick: handleClick,
                     disabled: !bookable,
                     isSelected,
                     bookable,
-                }, children: _jsx("button", { onClick: selectTimeSlot, disabled: !bookable, children: label }) }));
+                }, children: _jsx("button", { onClick: handleClick, disabled: !bookable, children: label }) }));
         } }));
 });
 Select.displayName = 'TimeSlot.Actions.Select';
@@ -180,6 +191,13 @@ Select.displayName = 'TimeSlot.Actions.Select';
  *   <button className="btn-secondary">Clear staff</button>
  * </TimeSlot.Actions.ClearStaffSelection>
  *
+ * // With onClicked callback
+ * <TimeSlot.Actions.ClearStaffSelection
+ *   onClicked={(timeSlot) => {
+ *     console.log('Staff selection cleared for', timeSlot.localStartDate);
+ *   }}
+ * />
+ *
  * // Using render prop pattern
  * <TimeSlot.Actions.ClearStaffSelection>
  *   {({ onClick }) => <button onClick={onClick}>Change selection</button>}
@@ -187,14 +205,18 @@ Select.displayName = 'TimeSlot.Actions.Select';
  * ```
  */
 export const ClearStaffSelection = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label = 'Change' } = props;
-    return (_jsx(CoreTimeSlot.Actions, { children: ({ clearStaffSelection }) => {
+    const { asChild, children, className, label = 'Change', onClicked } = props;
+    return (_jsx(CoreTimeSlot.Actions, { children: ({ clearStaffSelection, timeSlot }) => {
             if (!clearStaffSelection) {
                 return null;
             }
+            const handleClick = () => {
+                clearStaffSelection();
+                onClicked?.(timeSlot);
+            };
             return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotActionClearStaffSelection, customElement: children, customElementProps: {
-                    onClick: clearStaffSelection,
-                }, children: _jsx("button", { onClick: clearStaffSelection, children: label }) }));
+                    onClick: handleClick,
+                }, children: _jsx("button", { onClick: handleClick, children: label }) }));
         } }));
 });
 ClearStaffSelection.displayName = 'TimeSlot.Actions.ClearStaffSelection';
@@ -324,6 +346,13 @@ StaffMemberName.displayName = 'TimeSlot.StaffMember.Name';
  *   <button className="btn-primary">Choose Staff</button>
  * </TimeSlot.StaffMember.Actions.Select>
  *
+ * // With onClicked callback
+ * <TimeSlot.StaffMember.Actions.Select
+ *   onClicked={(staffMember) => {
+ *     console.log('Selected staff:', staffMember.name);
+ *   }}
+ * />
+ *
  * // Using render prop pattern
  * <TimeSlot.StaffMember.Actions.Select>
  *   {({ isSelected, onClick }) => (
@@ -335,11 +364,17 @@ StaffMemberName.displayName = 'TimeSlot.StaffMember.Name';
  * ```
  */
 export const SelectStaffMember = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label = 'Select' } = props;
-    return (_jsx(CoreTimeSlot.StaffMemberActions, { children: ({ selectStaffMember, isSelected }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotStaffMemberActionSelect, "data-selected": isSelected, customElement: children, customElementProps: {
-                onClick: selectStaffMember,
-                isSelected,
-            }, children: _jsx("button", { onClick: selectStaffMember, children: label }) })) }));
+    const { asChild, children, className, label = 'Select', onClicked } = props;
+    return (_jsx(CoreTimeSlot.StaffMemberActions, { children: ({ selectStaffMember, isSelected, staffMember }) => {
+            const handleClick = () => {
+                selectStaffMember();
+                onClicked?.(staffMember);
+            };
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotStaffMemberActionSelect, "data-selected": isSelected, customElement: children, customElementProps: {
+                    onClick: handleClick,
+                    isSelected,
+                }, children: _jsx("button", { onClick: handleClick, children: label }) }));
+        } }));
 });
 SelectStaffMember.displayName = 'TimeSlot.StaffMember.Actions.Select';
 /**

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

@@ -25,24 +25,44 @@ export interface ValidationResult {
     /** Array of validation failure messages */
     validationFailures: string[];
 }
+/**
+ * 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 declare class BookingFormConfigurationError extends Error {
+    constructor(message?: 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)
  *
+ * Note: The config itself is optional. If not provided, the formId will be
+ * extracted from the selected service if available.
+ *
  * @example
  * ```tsx
  * // Pattern 1: Client-side loading
  * const config = { formId: 'form-123' };
  *
+ * // Pattern 1b: Client-side loading with service IDs
+ * const config = { formId: 'form-123', serviceIds: ['service-1', 'service-2'] };
+ *
  * // Pattern 2: Pre-loaded form (SSR/SSG)
  * const config = { form: preloadedForm };
+ *
+ * // Pattern 3: No config (formId extracted from service)
+ * // config = undefined
  * ```
  */
 export type BookingFormServiceConfig = {
     /** The form ID to load (client-side loading) */
     formId: string;
+    /** Optional list of service IDs associated with this booking form */
+    serviceIds?: string[];
 } | {
     /** Pre-loaded form object (SSR/SSG) - must be from bookings namespace */
     form: forms.Form;
@@ -79,18 +99,7 @@ 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;
-};
+export { hasFormId, hasForm, extractFormIdFromForm, extractFormIdFromConfig, type FormIdConfig, } from './utils.js';
 /**
  * Service definition for BookingForm.
  * Defines the contract that the BookingFormService must implement.
@@ -137,4 +146,4 @@ export declare const BookingFormService: import("@wix/services-definitions").Ser
     __api: BookingFormServiceAPI;
     __config: {};
     isServiceDefinition?: boolean;
-} & BookingFormServiceAPI, BookingFormServiceConfig>;
+} & BookingFormServiceAPI, BookingFormServiceConfig | undefined>;