@wix/headless-bookings 0.0.56 → 0.0.58

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

@@ -7,10 +7,44 @@ 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';
+import { BookingFormConfigurationError } from '../../services/booking-form/booking-form.js';
+/**
+ * Internal ErrorBoundary for catching BookingFormConfigurationError
+ */
+class BookingFormErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    render() {
+        const { error } = this.state;
+        const { children, fallback } = this.props;
+        if (error) {
+            // If it's a configuration error, render the fallback
+            if (error instanceof BookingFormConfigurationError) {
+                if (typeof fallback === 'function') {
+                    return fallback(error);
+                }
+                if (fallback) {
+                    return fallback;
+                }
+                // Default fallback UI
+                return _jsx("div", { "data-testid": "booking-form-load-error", children: error.message });
+            }
+            // Re-throw non-configuration errors
+            throw error;
+        }
+        return children;
+    }
+}
 var TestIds;
 (function (TestIds) {
     TestIds["bookingFormRoot"] = "booking-form-root";
     TestIds["bookingFormFields"] = "booking-form-fields";
+    TestIds["bookingFormActionValidateFormSubmission"] = "booking-form-action-validate-form-submission";
 })(TestIds || (TestIds = {}));
 /**
  * Root component for booking form that wraps CoreBookingForm.Root.
@@ -26,6 +60,12 @@ var TestIds;
  * // Minimal usage - uses default field components
  * <BookingForm.Root formId="your-form-id" />
  *
+ * // With serviceIds
+ * <BookingForm.Root
+ *   formId="your-form-id"
+ *   serviceIds={['service-1', 'service-2']}
+ * />
+ *
  * // With custom styling
  * <BookingForm.Root
  *   formId="your-form-id"
@@ -51,8 +91,8 @@ var TestIds;
  * ```
  */
 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" })] })) }) }) })) }));
+    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" })] })) }) }) })) }) }));
 });
 Root.displayName = 'BookingForm.Root';
 const BookingFormContext = React.createContext(null);
@@ -87,6 +127,77 @@ 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, className, label = 'Validate', onValidationComplete, } = 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);
+                }
+            };
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.bookingFormActionValidateFormSubmission, "data-valid": valid, customElement: children, customElementProps: {
+                    onClick: handleClick,
+                    valid,
+                    validationFailures,
+                }, children: _jsx("button", { onClick: handleClick, 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.
@@ -95,12 +206,17 @@ Fields.displayName = 'BookingForm.Fields';
  * @example
  * ```tsx
  * <BookingForm.Data formId="your-form-id">
- *   {({ formId, fields, formValues, setFormSubmission, validateFormSubmission }) => (
+ *   {({ formId, fields, formValues, formRef, validate, setFormSubmission }) => (
  *     <div>
- *       <Form.Fields fieldMap={fields} rowGapClassname="gap-y-4" columnGapClassname="gap-x-2" />
+ *       <Form.Fields
+ *         fieldMap={fields}
+ *         rowGapClassname="gap-y-4"
+ *         columnGapClassname="gap-x-2"
+ *         formRef={formRef}
+ *       />
  *       <button onClick={async () => {
- *         const result = await validateFormSubmission();
- *         if (result.valid) {
+ *         const isValid = await validate();
+ *         if (isValid) {
  *           // Store current form values before submission
  *           setFormSubmission(formValues);
  *         }
@@ -110,17 +226,35 @@ Fields.displayName = 'BookingForm.Fields';
  *     </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, 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,
-        }) }));
+    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,
+                validate: validateFormSubmission,
+            }) }) }));
 }
 Data.displayName = 'BookingForm.Data';
+// ============================================================================
+// Error Handling
+// ============================================================================
+/**
+ * Re-export LoadError component and utilities for error handling
+ */
+export { LoadError, isBookingFormConfigurationError, BookingFormConfigurationError, } from '../core/booking-form/BookingForm.js';

package/dist/react/core/booking/Booking.d.ts

@@ -7,7 +7,7 @@ import { type BookingServiceConfig, type ServiceSelection, type BookingServiceAc
 import type { FormValues } from '@wix/form-public';
 import type { TimeSlot, Resource } from '@wix/auto_sdk_bookings_availability-time-slots';
 import type { Service, Location as ServiceLocationType } from '@wix/auto_sdk_bookings_services';
-import type { SlotService } from '../../../services/payment/payment.js';
+import type { PricingServiceSelection } from '../../../services/payment/payment.js';
 /**
  * Props for Booking.Root component
  */
@@ -167,8 +167,8 @@ export declare function ItemsData(props: ItemsDataProps): React.ReactNode;
  * Data exposed by PaymentData render prop
  */
 export interface PaymentDataRenderProps {
-    /** SlotServices array for Payment.Root */
-    slotServices: SlotService[];
+    /** Pricing service selections array for Payment.Root */
+    pricingServiceSelections: PricingServiceSelection[];
 }
 /**
  * Props for PaymentData render prop component

package/dist/react/core/booking/Booking.js

@@ -267,9 +267,9 @@ export function PaymentData(props) {
     const { children } = props;
     const bookingService = useService(BookingServiceDefinition);
     const serviceSelections = bookingService.serviceSelections.get();
-    const slotServices = serviceSelections.map((selection) => ({
+    const pricingServiceSelections = serviceSelections.map((selection) => ({
         service: selection.service,
         lineItemId: selection.instanceId,
     }));
-    return children({ slotServices });
+    return children({ pricingServiceSelections });
 }

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

@@ -9,11 +9,18 @@
  * 2. SSR/SSG: Provide a pre-loaded form object for server-side rendering
  */
 import * as React from 'react';
-import type { FormValues } from '@wix/form-public';
-import { forms } from '@wix/forms';
-import { type ValidationResult } from '../../../services/booking-form/booking-form.js';
+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 { Form } from '@wix/headless-forms/react';
 type FieldMap = Parameters<typeof Form.Fields>[0]['fieldMap'];
+export type Submit = () => Promise<submissions.GetSubmissionResponse['submission'] | undefined>;
+export type ValidateStep = (stepId: string) => Promise<boolean>;
+export type FormHandle = {
+    submit: Submit;
+    validate: () => Promise<boolean>;
+    validateStep?: ValidateStep;
+};
 /**
  * Render props data provided to BookingForm children
  */
@@ -26,19 +33,23 @@ export interface BookingFormRenderProps {
     formSubmission: FormValues | null;
     /** Action to store form submission data */
     setFormSubmission: (formValues: FormValues) => void;
-    /** Action to validate the form */
-    validateFormSubmission: () => Promise<ValidationResult>;
+    /** 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) */
     fields: FieldMap;
+    /** Ref to access form methods imperatively (pass to Form.Fields) */
+    formRef: React.RefObject<FormHandle | null>;
 }
 /**
  * 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<string, string | string[]>;
-    /** Optional partial field map to override default booking field components */
-    fieldMap?: Partial<FieldMap>;
+    /** Field map to override default booking field components */
+    fieldMap: FieldMap;
     /** Render prop function that receives form data and actions */
     children: (data: BookingFormRenderProps) => React.ReactNode;
 }
@@ -46,13 +57,14 @@ interface BookingFormBaseProps {
  * Props for BookingForm with formId (client-side loading)
  */
 interface BookingFormWithFormIdProps extends BookingFormBaseProps {
-    /** The form ID to load (client-side loading) */
-    formId: string;
+    /** 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 */
@@ -136,4 +148,94 @@ export type BookingFormProps = BookingFormWithFormIdProps | BookingFormWithFormP
  * ```
  */
 export declare function Root(props: BookingFormProps): React.ReactNode;
-export {};
+/**
+ * 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
+ */
+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
+ * <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 declare const LoadError: React.ForwardRefExoticComponent<LoadErrorProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Type guard to check if an error is a BookingFormConfigurationError
+ */
+export declare function isBookingFormConfigurationError(error: unknown): error is BookingFormConfigurationError;
+export { BookingFormConfigurationError };