@wix/headless-bookings 0.0.23 → 0.0.25

package/cjs/dist/__mocks__/services.d.ts

@@ -0,0 +1,75 @@
+/**
+ * Shared mock data for booking service tests
+ */
+import type { Service } from '@wix/auto_sdk_bookings_services';
+import type { ServiceServiceConfig } from '../services/service/service.js';
+import type { ServiceListServiceConfig } from '../services/service-list/service-list.js';
+import type { PagingMetadata } from '../api/query-services/index.js';
+/**
+ * Booking app ID constant
+ */
+export declare const BOOKING_APP_ID = "13d21c63-b5ec-5912-8397-c3a5ddb27a97";
+/**
+ * Base mock service with all fields populated (APPOINTMENT type, FIXED pricing)
+ */
+export declare const mockService: Service;
+/**
+ * Mock service with VARIED pricing
+ */
+export declare const mockServiceVariedPrice: Service;
+/**
+ * Mock service with CUSTOM pricing
+ */
+export declare const mockServiceCustomPrice: Service;
+/**
+ * Mock service with NO_FEE pricing (free)
+ */
+export declare const mockServiceNoFee: Service;
+/**
+ * Mock CLASS type service
+ */
+export declare const mockServiceClass: Service;
+/**
+ * Mock COURSE type service
+ */
+export declare const mockServiceCourse: Service;
+/**
+ * Mock service without optional fields (minimal)
+ */
+export declare const mockServiceMinimal: Service;
+/**
+ * Array of mock services for list tests
+ */
+export declare const mockServices: Service[];
+/**
+ * Default paging metadata
+ */
+export declare const mockPagingMetadata: PagingMetadata;
+/**
+ * Paging metadata with more items available
+ */
+export declare const mockPagingMetadataWithMore: PagingMetadata;
+/**
+ * Empty paging metadata
+ */
+export declare const mockPagingMetadataEmpty: PagingMetadata;
+/**
+ * Service list config with services
+ */
+export declare const mockServiceListConfig: ServiceListServiceConfig;
+/**
+ * Service list config with hasNext for pagination testing
+ */
+export declare const mockServiceListConfigWithMore: ServiceListServiceConfig;
+/**
+ * Empty service list config
+ */
+export declare const mockEmptyServiceListConfig: ServiceListServiceConfig;
+/**
+ * Service config for single service
+ */
+export declare const mockServiceConfig: ServiceServiceConfig;
+/**
+ * Helper to create a large list of services for pagination tests
+ */
+export declare function createLargeServiceList(count: number): Service[];

package/cjs/dist/__mocks__/services.js

@@ -0,0 +1,308 @@
+/**
+ * Shared mock data for booking service tests
+ */
+import { RateType, ServiceType } from '@wix/auto_sdk_bookings_services';
+/**
+ * Booking app ID constant
+ */
+export const BOOKING_APP_ID = '13d21c63-b5ec-5912-8397-c3a5ddb27a97';
+/**
+ * Base mock service with all fields populated (APPOINTMENT type, FIXED pricing)
+ */
+export const mockService = {
+    _id: 'test-service-id',
+    name: 'Test Service Name',
+    description: 'Test service description',
+    tagLine: 'Test tagline',
+    type: ServiceType.APPOINTMENT,
+    category: {
+        _id: 'category-1',
+        name: 'Test Category',
+    },
+    payment: {
+        rateType: RateType.FIXED,
+        fixed: {
+            price: {
+                value: '50.00',
+                currency: 'USD',
+            },
+        },
+    },
+    schedule: {
+        availabilityConstraints: {
+            sessionDurations: [60],
+        },
+    },
+    locations: [
+        {
+            _id: 'location-1',
+            type: 'BUSINESS',
+            business: {
+                _id: 'business-loc-1',
+                name: 'Main Office',
+                address: {
+                    formatted: '123 Main St, City, ST 12345',
+                },
+            },
+        },
+    ],
+    media: {
+        mainMedia: {
+            image: 'wix:image://v1/test-image.jpg',
+        },
+        coverMedia: {
+            image: 'wix:image://v1/test-cover.jpg',
+        },
+        items: [
+            { image: 'wix:image://v1/image1.jpg' },
+            { image: 'wix:image://v1/image2.jpg' },
+        ],
+    },
+    bookingPolicy: {
+        cancellationPolicy: {
+            enabled: true,
+            limitLatestCancellation: true,
+            latestCancellationInMinutes: 60,
+        },
+        limitLateBookingPolicy: {
+            enabled: true,
+            latestBookingInMinutes: 30,
+        },
+        limitEarlyBookingPolicy: {
+            enabled: true,
+            earliestBookingInMinutes: 10080, // 7 days
+        },
+        reschedulePolicy: {
+            enabled: true,
+            limitLatestReschedule: true,
+            latestRescheduleInMinutes: 120,
+        },
+        waitlistPolicy: {
+            enabled: true,
+            capacity: 10,
+        },
+        bookAfterStartPolicy: {
+            enabled: true,
+        },
+        participantsPolicy: {
+            maxParticipantsPerBooking: 5,
+        },
+    },
+    defaultCapacity: 20,
+};
+/**
+ * Mock service with VARIED pricing
+ */
+export const mockServiceVariedPrice = {
+    ...mockService,
+    _id: 'test-service-varied',
+    name: 'Varied Price Service',
+    payment: {
+        rateType: RateType.VARIED,
+        varied: {
+            defaultPrice: {
+                value: '50.00',
+                currency: 'USD',
+            },
+            minPrice: {
+                value: '30.00',
+                currency: 'USD',
+            },
+            maxPrice: {
+                value: '100.00',
+                currency: 'USD',
+            },
+        },
+    },
+};
+/**
+ * Mock service with CUSTOM pricing
+ */
+export const mockServiceCustomPrice = {
+    ...mockService,
+    _id: 'test-service-custom',
+    name: 'Custom Price Service',
+    payment: {
+        rateType: RateType.CUSTOM,
+        custom: {
+            description: 'Contact for pricing',
+        },
+    },
+};
+/**
+ * Mock service with NO_FEE pricing (free)
+ */
+export const mockServiceNoFee = {
+    ...mockService,
+    _id: 'test-service-no-fee',
+    name: 'Free Service',
+    payment: {
+        rateType: RateType.NO_FEE,
+    },
+};
+/**
+ * Mock CLASS type service
+ */
+export const mockServiceClass = {
+    ...mockService,
+    _id: 'test-service-class',
+    name: 'Class Service',
+    type: ServiceType.CLASS,
+    defaultCapacity: 15,
+};
+/**
+ * Mock COURSE type service
+ */
+export const mockServiceCourse = {
+    ...mockService,
+    _id: 'test-service-course',
+    name: 'Course Service',
+    type: ServiceType.COURSE,
+    defaultCapacity: 25,
+    schedule: {
+        ...mockService.schedule,
+        firstSessionStart: new Date('2024-01-15T09:00:00Z'),
+        lastSessionEnd: new Date('2024-03-15T17:00:00Z'),
+    },
+};
+/**
+ * Mock service without optional fields (minimal)
+ */
+export const mockServiceMinimal = {
+    _id: 'test-service-minimal',
+    name: 'Minimal Service',
+    description: '',
+};
+/**
+ * Array of mock services for list tests
+ */
+export const mockServices = [
+    {
+        _id: 'service-1',
+        name: 'Service One',
+        description: 'Description for service one',
+        type: ServiceType.APPOINTMENT,
+        payment: {
+            rateType: RateType.FIXED,
+            fixed: {
+                price: {
+                    value: '50.00',
+                    currency: 'USD',
+                },
+            },
+        },
+    },
+    {
+        _id: 'service-2',
+        name: 'Service Two',
+        description: 'Description for service two',
+        type: ServiceType.CLASS,
+        payment: {
+            rateType: RateType.FIXED,
+            fixed: {
+                price: {
+                    value: '75.00',
+                    currency: 'USD',
+                },
+            },
+        },
+        defaultCapacity: 15,
+    },
+    {
+        _id: 'service-3',
+        name: 'Service Three',
+        description: 'Description for service three',
+        type: ServiceType.COURSE,
+        payment: {
+            rateType: RateType.CUSTOM,
+            custom: {
+                description: 'Contact for pricing',
+            },
+        },
+        defaultCapacity: 25,
+    },
+];
+/**
+ * Default paging metadata
+ */
+export const mockPagingMetadata = {
+    limit: 10,
+    offset: 0,
+    count: 3,
+    hasNext: false,
+};
+/**
+ * Paging metadata with more items available
+ */
+export const mockPagingMetadataWithMore = {
+    limit: 10,
+    offset: 0,
+    count: 10,
+    hasNext: true,
+};
+/**
+ * Empty paging metadata
+ */
+export const mockPagingMetadataEmpty = {
+    limit: 10,
+    offset: 0,
+    count: 0,
+    hasNext: false,
+};
+/**
+ * Service list config with services
+ */
+export const mockServiceListConfig = {
+    services: mockServices,
+    options: {
+        appId: BOOKING_APP_ID,
+        pagingMetadata: mockPagingMetadata,
+    },
+};
+/**
+ * Service list config with hasNext for pagination testing
+ */
+export const mockServiceListConfigWithMore = {
+    services: mockServices,
+    options: {
+        appId: BOOKING_APP_ID,
+        pagingMetadata: mockPagingMetadataWithMore,
+    },
+};
+/**
+ * Empty service list config
+ */
+export const mockEmptyServiceListConfig = {
+    services: [],
+    options: {
+        appId: BOOKING_APP_ID,
+        pagingMetadata: mockPagingMetadataEmpty,
+    },
+};
+/**
+ * Service config for single service
+ */
+export const mockServiceConfig = {
+    service: mockService,
+    appId: BOOKING_APP_ID,
+};
+/**
+ * Helper to create a large list of services for pagination tests
+ */
+export function createLargeServiceList(count) {
+    return Array.from({ length: count }, (_, i) => ({
+        _id: `service-${i}`,
+        name: `Service ${i}`,
+        description: `Description for service ${i}`,
+        type: ServiceType.APPOINTMENT,
+        payment: {
+            rateType: RateType.FIXED,
+            fixed: {
+                price: {
+                    value: '50.00',
+                    currency: 'USD',
+                },
+            },
+        },
+    }));
+}

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

@@ -0,0 +1,156 @@
+/**
+ * BookingForm - High-level component for rendering booking forms
+ * Provides components for displaying and managing booking form fields
+ */
+import React from 'react';
+import { Form } from '@wix/headless-forms/react';
+type FieldMap = Parameters<typeof Form.Fields>[0]['fieldMap'];
+/**
+ * Props for BookingForm.Root component
+ */
+export interface RootProps {
+    /** The form ID to load (required - standalone mode) */
+    formId: 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>;
+    /** Child components - if not provided, Form.Fields is rendered with default field map */
+    children?: React.ReactNode;
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** CSS classes to apply to the root element */
+    className?: string;
+    /** Row gap class name for Form.Fields when using default rendering */
+    rowGapClassname?: string;
+    /** Column gap class name for Form.Fields when using default rendering */
+    columnGapClassname?: string;
+}
+/**
+ * Root component for booking form that wraps CoreBookingForm.Root.
+ * Automatically loads form and handles submission in standalone mode.
+ * Uses DEFAULT_BOOKING_FIELD_MAP for field rendering with optional user overrides.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { BookingForm } from '@wix/headless-bookings/react';
+ *
+ * // Minimal usage - uses default field components
+ * <BookingForm.Root formId="your-form-id" />
+ *
+ * // With custom styling
+ * <BookingForm.Root
+ *   formId="your-form-id"
+ *   className="my-form-container"
+ *   rowGapClassname="gap-y-6"
+ *   columnGapClassname="gap-x-4"
+ * />
+ *
+ * // With custom field overrides
+ * <BookingForm.Root
+ *   formId="your-form-id"
+ *   fieldMap={{ TEXT_INPUT: MyCustomTextInput }}
+ * />
+ *
+ * // With full control over form structure
+ * <BookingForm.Root formId="your-form-id">
+ *   <Form.Loading className="flex justify-center p-4" />
+ *   <Form.LoadingError className="text-destructive px-4 py-3 rounded mb-4" />
+ *   <BookingForm.Fields />
+ *   <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>
+ * ```
+ */
+export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Props for BookingForm.Fields component
+ */
+export interface FieldsProps {
+    /** Optional override for row gap class name */
+    rowGapClassname?: string;
+    /** Optional override for column gap class name */
+    columnGapClassname?: string;
+    /** CSS classes to apply */
+    className?: string;
+}
+/**
+ * Fields component that renders Form.Fields with the merged field map.
+ * Must be used within BookingForm.Root.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <BookingForm.Root formId="your-form-id">
+ *   <Form.Loading className="p-4" />
+ *   <BookingForm.Fields rowGapClassname="gap-y-6" />
+ *   <Form.Error className="text-destructive" />
+ * </BookingForm.Root>
+ * ```
+ */
+export declare const Fields: React.ForwardRefExoticComponent<FieldsProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * 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;
+    /** Action to validate the form */
+    validateFormSubmission: () => Promise<{
+        valid: boolean;
+        validationFailures: string[];
+    }>;
+}
+/**
+ * Props for BookingForm.Data component
+ */
+export interface DataProps {
+    /** The form ID to load (required - standalone mode) */
+    formId: 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>;
+    /** Render prop function that receives form data and actions */
+    children: (data: DataRenderProps) => 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, setFormSubmission, validateFormSubmission }) => (
+ *     <div>
+ *       <Form.Fields fieldMap={fields} rowGapClassname="gap-y-4" columnGapClassname="gap-x-2" />
+ *       <button onClick={async () => {
+ *         const result = await validateFormSubmission();
+ *         if (result.valid) {
+ *           // Store current form values before submission
+ *           setFormSubmission(formValues);
+ *         }
+ *       }}>
+ *         Validate & Submit
+ *       </button>
+ *     </div>
+ *   )}
+ * </BookingForm.Data>
+ * ```
+ */
+export declare function Data(props: DataProps): React.ReactNode;
+export declare namespace Data {
+    var displayName: string;
+}
+export {};

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

@@ -0,0 +1,126 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * BookingForm - High-level component for rendering booking forms
+ * Provides components for displaying and managing booking form fields
+ */
+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';
+var TestIds;
+(function (TestIds) {
+    TestIds["bookingFormRoot"] = "booking-form-root";
+    TestIds["bookingFormFields"] = "booking-form-fields";
+})(TestIds || (TestIds = {}));
+/**
+ * Root component for booking form that wraps CoreBookingForm.Root.
+ * Automatically loads form and handles submission in standalone mode.
+ * Uses DEFAULT_BOOKING_FIELD_MAP for field rendering with optional user overrides.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { BookingForm } from '@wix/headless-bookings/react';
+ *
+ * // Minimal usage - uses default field components
+ * <BookingForm.Root formId="your-form-id" />
+ *
+ * // With custom styling
+ * <BookingForm.Root
+ *   formId="your-form-id"
+ *   className="my-form-container"
+ *   rowGapClassname="gap-y-6"
+ *   columnGapClassname="gap-x-4"
+ * />
+ *
+ * // With custom field overrides
+ * <BookingForm.Root
+ *   formId="your-form-id"
+ *   fieldMap={{ TEXT_INPUT: MyCustomTextInput }}
+ * />
+ *
+ * // With full control over form structure
+ * <BookingForm.Root formId="your-form-id">
+ *   <Form.Loading className="flex justify-center p-4" />
+ *   <Form.LoadingError className="text-destructive px-4 py-3 rounded mb-4" />
+ *   <BookingForm.Fields />
+ *   <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>
+ * ```
+ */
+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" })] })) }) }) })) }));
+});
+Root.displayName = 'BookingForm.Root';
+const BookingFormContext = React.createContext(null);
+/**
+ * Hook to access BookingForm context
+ * @internal
+ */
+function useBookingFormContext() {
+    const context = React.useContext(BookingFormContext);
+    if (!context) {
+        throw new Error('useBookingFormContext must be used within a BookingForm.Root component');
+    }
+    return context;
+}
+/**
+ * Fields component that renders Form.Fields with the merged field map.
+ * Must be used within BookingForm.Root.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <BookingForm.Root formId="your-form-id">
+ *   <Form.Loading className="p-4" />
+ *   <BookingForm.Fields rowGapClassname="gap-y-6" />
+ *   <Form.Error className="text-destructive" />
+ * </BookingForm.Root>
+ * ```
+ */
+export const Fields = React.forwardRef((props, ref) => {
+    const context = useBookingFormContext();
+    const { rowGapClassname = context.rowGapClassname, columnGapClassname = context.columnGapClassname, className, ...otherProps } = props;
+    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';
+/**
+ * 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, setFormSubmission, validateFormSubmission }) => (
+ *     <div>
+ *       <Form.Fields fieldMap={fields} rowGapClassname="gap-y-4" columnGapClassname="gap-x-2" />
+ *       <button onClick={async () => {
+ *         const result = await validateFormSubmission();
+ *         if (result.valid) {
+ *           // Store current form values before submission
+ *           setFormSubmission(formValues);
+ *         }
+ *       }}>
+ *         Validate & Submit
+ *       </button>
+ *     </div>
+ *   )}
+ * </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,
+        }) }));
+}
+Data.displayName = 'BookingForm.Data';