@wix/headless-bookings 0.0.61 → 0.0.63

package/cjs/dist/__mocks__/time-slots.js

@@ -112,5 +112,6 @@ export function createMockTimeSlotListService(config = {}) {
                 dateRangeSignal.set({ start, end });
             }),
         },
+        dispose: vi.fn(),
     };
 }

package/cjs/dist/api/index.d.ts

@@ -4,12 +4,12 @@
  *
  * @module API
  */
-export { getServiceById, getServiceBySlug, queryServices, type PagingMetadata, type ServiceListFilters, type QueryServicesRequest, } from './query-services/index.js';
+export { getServiceById, getServiceBySlug, queryServices, type PagingMetadata, type ServiceListFilters, type QueryServicesRequest, SYNTHETIC_CUSTOM_ID, SYNTHETIC_CUSTOMER_ID, } from './query-services/index.js';
 export { fetchAvailability } from './fetch-availability/index.js';
 export { createBooking, type CreateBookingOptions, type Booking, type CreateBookingRequest, type CreateBookingResponse, type ParticipantNotification, type ContactDetails, } from './create-booking/index.js';
 export { createCheckout, ChannelType, type CreateCheckoutRequest, type CreateCheckoutResponse, } from './create-checkout/index.js';
 export { createOrder, type CreateOrderOptions, type CreateOrderResponse, } from './create-order/index.js';
-export { queryLocations, type QueryLocationsResult, type LocationData, } from './query-locations/index.js';
+export { queryLocations, getLocationById, type QueryLocationsResult, type LocationData, } from './query-locations/index.js';
 export { queryCategories, type QueryCategoriesResult, type Category, } from './query-categories/index.js';
 /**
  * PagingMetadata includes:

package/cjs/dist/api/index.js

@@ -4,12 +4,12 @@
  *
  * @module API
  */
-export { getServiceById, getServiceBySlug, queryServices, } from './query-services/index.js';
+export { getServiceById, getServiceBySlug, queryServices, SYNTHETIC_CUSTOM_ID, SYNTHETIC_CUSTOMER_ID, } from './query-services/index.js';
 export { fetchAvailability } from './fetch-availability/index.js';
 export { createBooking, } from './create-booking/index.js';
 export { createCheckout, ChannelType, } from './create-checkout/index.js';
 export { createOrder, } from './create-order/index.js';
-export { queryLocations, } from './query-locations/index.js';
+export { queryLocations, getLocationById, } from './query-locations/index.js';
 export { queryCategories, } from './query-categories/index.js';
 /**
  * PagingMetadata includes:

package/cjs/dist/api/query-locations/index.d.ts

@@ -36,3 +36,17 @@ export interface QueryLocationsResult {
  * ```
  */
 export declare function queryLocations(): Promise<QueryLocationsResult>;
+/**
+ * Fetches a single location by its business location ID
+ * @param locationId - The business location ID (GUID)
+ * @returns Promise resolving to the location or null if not found
+ *
+ * @example
+ * ```ts
+ * const location = await getLocationById('12345678-1234-1234-1234-123456789012');
+ * if (location) {
+ *   console.log(location.business?.name);
+ * }
+ * ```
+ */
+export declare function getLocationById(locationId: string): Promise<LocationData | null>;

package/cjs/dist/api/query-locations/index.js

@@ -28,3 +28,30 @@ export async function queryLocations() {
         hasCustomerLocations: response.customerLocations?.exists || false,
     };
 }
+/**
+ * Fetches a single location by its business location ID
+ * @param locationId - The business location ID (GUID)
+ * @returns Promise resolving to the location or null if not found
+ *
+ * @example
+ * ```ts
+ * const location = await getLocationById('12345678-1234-1234-1234-123456789012');
+ * if (location) {
+ *   console.log(location.business?.name);
+ * }
+ * ```
+ */
+export async function getLocationById(locationId) {
+    try {
+        const response = await queryLocationsApi({
+            filter: {
+                businessLocationIds: [locationId],
+            },
+        });
+        return response.businessLocations?.locations?.[0] ?? null;
+    }
+    catch (error) {
+        console.error(`Failed to load location for id "${locationId}":`, error);
+        return null;
+    }
+}

package/cjs/dist/api/query-services/index.d.ts

@@ -3,6 +3,11 @@
  * Fetches single or multiple services with pagination and sorting
  */
 import { type Service, type Paging, type Sorting } from '@wix/auto_sdk_bookings_services';
+/**
+ * Synthetic location ID constants for non-business locations
+ */
+export declare const SYNTHETIC_CUSTOM_ID = "custom";
+export declare const SYNTHETIC_CUSTOMER_ID = "customer";
 /**
  * Paging metadata from query services response.
  * Extends the SDK's Paging type with hasNext flag to indicate if more services are available.

package/cjs/dist/api/query-services/index.js

@@ -10,8 +10,8 @@ const BOOKING_APP_ID = '13d21c63-b5ec-5912-8397-c3a5ddb27a97';
 /**
  * Synthetic location ID constants for non-business locations
  */
-const SYNTHETIC_CUSTOM_ID = '__synthetic_custom__';
-const SYNTHETIC_CUSTOMER_ID = '__synthetic_customer__';
+export const SYNTHETIC_CUSTOM_ID = 'custom';
+export const SYNTHETIC_CUSTOMER_ID = 'customer';
 /**
  * Fetches a service by its ID
  * @param id - The service ID

package/cjs/dist/react/booking/Book.d.ts

@@ -16,9 +16,11 @@ export interface BookProps {
     disabled?: boolean;
     onCheckout?: (result: {
         checkoutId: string;
+        navigateToCheckout: (checkoutId: string) => void;
     }) => void;
     onComplete?: (result: {
         orderId: string;
+        navigateToThankYou: (orderId: string) => void;
     }) => void;
     onError?: (error: BookingError) => void;
 }

package/cjs/dist/react/booking/Book.js

@@ -6,6 +6,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import * as CoreBook from '../core/booking/Book.js';
+import { navigateToCheckout } from '../../utils/navigation.js';
 var TestIds;
 (function (TestIds) {
     TestIds["bookingActionBook"] = "booking-action-book";
@@ -49,6 +50,15 @@ var TestIds;
  */
 export const Book = React.forwardRef((props, ref) => {
     const { asChild, children, className, label = 'Book Now', loadingState = 'Booking...', disabled, onCheckout, onComplete, onError, } = props;
-    return (_jsx(CoreBook.Book, { onCheckout: onCheckout, onComplete: onComplete, onError: onError, disabled: disabled, children: (childProps) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.bookingActionBook, "data-in-progress": childProps.isLoading, customElement: children, customElementProps: childProps, children: _jsx("button", { onClick: childProps.onClick, disabled: childProps.disabled, children: childProps.isLoading ? loadingState : label }) })) }));
+    return (_jsx(CoreBook.Book, { onCheckout: (result) => {
+            onCheckout?.({ ...result, navigateToCheckout });
+        }, onComplete: (result) => {
+            onComplete?.({
+                ...result,
+                navigateToThankYou: (orderId) => {
+                    console.log('navigateToThankYou', orderId);
+                },
+            });
+        }, onError: onError, disabled: disabled, children: (childProps) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.bookingActionBook, "data-in-progress": childProps.isLoading, customElement: children, customElementProps: childProps, children: _jsx("button", { onClick: childProps.onClick, disabled: childProps.disabled, children: childProps.isLoading ? loadingState : label }) })) }));
 });
 Book.displayName = 'Booking.Actions.Book';

package/cjs/dist/react/core/location/Location.d.ts

@@ -27,6 +27,8 @@ export interface SyntheticLocation {
     synthetic: true;
     /** Optional ID for tracking (matches ServiceLocation._id) */
     _id?: string;
+    /** Optional name/label for the location */
+    name?: string;
 }
 /**
  * Union type - location prop accepts Service or Synthetic location

package/cjs/dist/react/core/location/Location.js

@@ -106,10 +106,23 @@ function computeLocationRenderProps(rawLocation) {
     if (isSyntheticLocation(rawLocation)) {
         const syntheticLoc = rawLocation;
         const locationType = syntheticLoc.locationType;
+        // Use provided name or default based on location type
+        let name;
+        if (syntheticLoc.name) {
+            name = syntheticLoc.name;
+        }
+        else {
+            name =
+                locationType === LocationType.CUSTOM
+                    ? 'Custom Locations'
+                    : locationType === LocationType.CUSTOMER
+                        ? "Client's Place"
+                        : undefined;
+        }
         return {
             locationType,
             address: null,
-            name: undefined,
+            name,
             locationId: syntheticLoc._id,
             isCustomerLocation: locationType === LocationType.CUSTOMER,
             isCustomLocation: locationType === LocationType.CUSTOM,

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

@@ -82,7 +82,6 @@ export function Info(props) {
     const endDate = new Date(timeSlot.localEndDate);
     const locationName = timeSlot.location?.name ?? '';
     const bookable = timeSlot.bookable ?? false;
-    // Calculate duration from start and end dates
     const durationInMinutes = Math.round((endDate.getTime() - startDate.getTime()) / (1000 * 60));
     return props.children({
         startDate,
@@ -166,7 +165,6 @@ export function StaffMembers(props) {
     const bookingService = useService(BookingServiceDefinition);
     const selectedStaffMemberId = bookingService.serviceSelections.get()[0]?.timeSlot?.resources?.[0]?._id;
     const staffMembers = timeSlot.availableResources[0].resources;
-    // Return null if only 1 staff member - nothing to choose from
     if (staffMembers.length <= 1) {
         return null;
     }

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

@@ -5,12 +5,49 @@
 import React from 'react';
 import { type TimeSlotListServiceConfig } from '../../../services/time-slot-list/index.js';
 import type { TimeSlot } from '@wix/auto_sdk_bookings_availability-time-slots';
+import { type ServiceSelectionTimeSlot } from '../../../services/booking/booking.js';
+import type { Service } from '@wix/auto_sdk_bookings_services';
+/**
+ * Render props data provided to TimeSlotList.Root children
+ */
+export interface TimeSlotListRootRenderProps {
+    /** Function to navigate to the booking form with the selected time slot */
+    navigateToBookingForm: ({ timeSlot, service, }: {
+        timeSlot?: ServiceSelectionTimeSlot;
+        service?: Service;
+    }) => Promise<void>;
+}
 /**
  * Props for Root component
  */
 export interface RootProps {
-    children: React.ReactNode;
+    children: (data: TimeSlotListRootRenderProps) => React.ReactNode;
     config: TimeSlotListServiceConfig;
+    /**
+     * Function to navigate to the booking form with the selected time slot.
+     * The timeSlot and service parameters are optional - if not provided,
+     * BookingService will be used to get them from the current service selections.
+     *
+     * @example
+     * ```tsx
+     * <Root
+     *   config={config}
+     *   navigateToBookingForm={async ({ timeSlot, service }) => {
+     *     // Custom navigation logic
+     *     await navigateToBookingForm({ timeSlot, service });
+     *   }}
+     * >
+     *   {({ navigateToBookingForm }) => (
+     *     // Use navigateToBookingForm in children
+     *     // Can call with: navigateToBookingForm() or navigateToBookingForm({ timeSlot, service })
+     *   )}
+     * </Root>
+     * ```
+     */
+    navigateToBookingForm: ({ timeSlot, service, }: {
+        timeSlot?: ServiceSelectionTimeSlot;
+        service?: Service;
+    }) => Promise<void>;
 }
 /**
  * Root component that provides TimeSlotListService context to its children.
@@ -18,8 +55,15 @@ export interface RootProps {
  * @component
  * @example
  * ```tsx
- * <Root config={{ services, timeSlots, timezone }}>
- *   {children}
+ * <Root
+ *   config={{ services, timeSlots, timezone }}
+ *   navigateToBookingForm={async (selection) => {
+ *     await navigateToBookingForm(selection);
+ *   }}
+ * >
+ *   {({ navigateToBookingForm }) => (
+ *     // Your components that can use navigateToBookingForm
+ *   )}
  * </Root>
  * ```
  */

package/cjs/dist/react/core/time-slot-list/TimeSlotList.js

@@ -1,21 +1,76 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Core TimeSlotList Components
+ * Provides low-level access to TimeSlotListService via render props
+ */
+import React from 'react';
 import { useService, WixServices } from '@wix/services-manager-react';
 import { createServicesMap } from '@wix/services-manager';
 import { TimeSlotListServiceDefinition, TimeSlotListService, } from '../../../services/time-slot-list/index.js';
-import { BookingServiceDefinition } from '../../../services/booking/booking.js';
+import { BookingServiceDefinition, } from '../../../services/booking/booking.js';
 /**
  * Root component that provides TimeSlotListService context to its children.
  *
  * @component
  * @example
  * ```tsx
- * <Root config={{ services, timeSlots, timezone }}>
- *   {children}
+ * <Root
+ *   config={{ services, timeSlots, timezone }}
+ *   navigateToBookingForm={async (selection) => {
+ *     await navigateToBookingForm(selection);
+ *   }}
+ * >
+ *   {({ navigateToBookingForm }) => (
+ *     // Your components that can use navigateToBookingForm
+ *   )}
  * </Root>
  * ```
  */
 export function Root(props) {
-    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(TimeSlotListServiceDefinition, TimeSlotListService, props.config), children: props.children }));
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(TimeSlotListServiceDefinition, TimeSlotListService, props.config), children: _jsx(RootContent, { navigateToBookingForm: props.navigateToBookingForm, children: props.children }) }));
+}
+/**
+ * Internal component that wraps navigateToBookingForm to handle optional parameters
+ */
+function RootContent({ navigateToBookingForm: providedNavigateToBookingForm, children, }) {
+    const timeSlotListService = useService(TimeSlotListServiceDefinition);
+    React.useEffect(() => {
+        return () => {
+            timeSlotListService.dispose();
+        };
+    }, [timeSlotListService]);
+    let bookingService = null;
+    try {
+        bookingService = useService(BookingServiceDefinition);
+    }
+    catch {
+        bookingService = null;
+    }
+    const navigateToBookingForm = async ({ timeSlot, service, }) => {
+        let resolvedTimeSlot = timeSlot;
+        let resolvedService = service;
+        if ((!resolvedTimeSlot || !resolvedService) && bookingService) {
+            const serviceSelections = bookingService.serviceSelections.get();
+            if (serviceSelections.length > 0) {
+                const firstSelection = serviceSelections[0];
+                if (firstSelection) {
+                    resolvedService = resolvedService || firstSelection.service;
+                    resolvedTimeSlot = resolvedTimeSlot || firstSelection.timeSlot;
+                }
+            }
+        }
+        if (!resolvedTimeSlot) {
+            throw new Error('timeSlot is required. Either provide it as a parameter or ensure BookingService has a service selection with a timeSlot.');
+        }
+        if (!resolvedService) {
+            throw new Error('service is required. Either provide it as a parameter or ensure BookingService has a service selection.');
+        }
+        return providedNavigateToBookingForm({
+            timeSlot: resolvedTimeSlot,
+            service: resolvedService,
+        });
+    };
+    return _jsx(_Fragment, { children: children({ navigateToBookingForm }) });
 }
 // ============================================================================
 // Timezone Component

package/cjs/dist/react/index.d.ts

@@ -1,5 +1,4 @@
 export * as Booking from './booking/Booking.js';
-export * as BookingForm from './booking-form/BookingForm.js';
 export * as Service from './service/Service.js';
 export * as ServiceMedia from './service/ServiceMedia.js';
 export * as TimeSlotList from './time-slot-list/TimeSlotList.js';

package/cjs/dist/react/index.js

@@ -1,5 +1,5 @@
 export * as Booking from './booking/Booking.js';
-export * as BookingForm from './booking-form/BookingForm.js';
+// export * as BookingForm from './booking-form/BookingForm.js';
 export * as Service from './service/Service.js';
 export * as ServiceMedia from './service/ServiceMedia.js';
 export * as TimeSlotList from './time-slot-list/TimeSlotList.js';

package/cjs/dist/react/location/Location.d.ts

@@ -23,6 +23,10 @@ export interface RootProps {
     children?: React.ReactNode | AsChildChildren<CoreLocation.LocationRenderProps>;
     /** CSS class name */
     className?: string;
+    /** Custom label for CUSTOM location type */
+    customLocationLabel?: string;
+    /** Custom label for CUSTOMER location type */
+    customerLocationLabel?: string;
     /** Data attributes */
     [key: `data-${string}`]: string | undefined;
 }

package/cjs/dist/react/location/Location.js

@@ -9,6 +9,7 @@ import React from 'react';
 import * as CoreLocation from '../core/location/Location.js';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import { Address } from '@wix/headless-components/react';
+import { LocationType } from '../../services/location-list/location-list.def.js';
 // Re-export useLocationContext from core
 export { useLocationContext } from '../core/location/Location.js';
 // ==========================================
@@ -63,10 +64,27 @@ const useLocationContext = CoreLocation.useLocationContext;
  * ```
  */
 export const Root = React.forwardRef((props, ref) => {
-    const { location, asChild, children, className, ...attrs } = props;
+    const { location, asChild, children, className, customLocationLabel, customerLocationLabel, ...attrs } = props;
     // Extract data-* attributes
     const dataAttrs = Object.fromEntries(Object.entries(attrs).filter(([key]) => key.startsWith('data-')));
-    return (_jsx(CoreLocation.Root, { location: location, children: _jsx(CoreLocation.Data, { children: (renderProps) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.locationRoot, "data-location-type": renderProps.locationType, customElement: children, customElementProps: renderProps, ...dataAttrs, children: children })) }) }));
+    // If location is synthetic and labels are provided, update the synthetic location's name
+    let processedLocation = location;
+    if (location && 'synthetic' in location && location.synthetic === true) {
+        const syntheticLoc = location;
+        const shouldUpdateName = (syntheticLoc.locationType === LocationType.CUSTOM &&
+            customLocationLabel !== undefined) ||
+            (syntheticLoc.locationType === LocationType.CUSTOMER &&
+                customerLocationLabel !== undefined);
+        if (shouldUpdateName) {
+            processedLocation = {
+                ...syntheticLoc,
+                name: syntheticLoc.locationType === LocationType.CUSTOM
+                    ? customLocationLabel
+                    : customerLocationLabel,
+            };
+        }
+    }
+    return (_jsx(CoreLocation.Root, { location: processedLocation, children: _jsx(CoreLocation.Data, { children: (renderProps) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.locationRoot, "data-location-type": renderProps.locationType, customElement: children, customElementProps: renderProps, ...dataAttrs, children: children })) }) }));
 });
 Root.displayName = 'Location.Root';
 /**

package/cjs/dist/react/location/LocationList.d.ts

@@ -17,6 +17,10 @@ export interface RootProps {
     locationListConfig?: LocationListServiceConfig;
     className?: string;
     variant?: ListVariant;
+    /** Custom label for CUSTOM location type */
+    customLocationLabel?: string;
+    /** Custom label for CUSTOMER location type */
+    customerLocationLabel?: string;
 }
 /**
  * Root component that provides the LocationList service context for rendering locations lists.

package/cjs/dist/react/location/LocationList.js

@@ -9,9 +9,15 @@ import React from 'react';
 import { GenericList, } from '@wix/headless-components/react';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import { useService } from '@wix/services-manager-react';
+import { LocationType, } from '../../services/location-list/location-list.def.js';
 import { BookingServiceDefinition } from '../../services/booking/booking.js';
 import * as CoreLocationList from '../core/location-list/LocationList.js';
 import * as Location from './Location.js';
+const LocationLabelsContext = React.createContext(null);
+function useLocationLabelsContext() {
+    const context = React.useContext(LocationLabelsContext);
+    return context || {};
+}
 // ============================================================================
 // TestIds
 // ============================================================================
@@ -45,11 +51,11 @@ var TestIds;
  * ```
  */
 export const Root = React.forwardRef((props, ref) => {
-    const { children, locationListConfig, className, variant } = props;
+    const { children, locationListConfig, className, variant, customLocationLabel, customerLocationLabel, } = props;
     const config = locationListConfig || {
         locations: [],
     };
-    return (_jsx(CoreLocationList.Root, { locationListServiceConfig: config, children: _jsx(RootContent, { className: className, ref: ref, variant: variant, children: children }) }));
+    return (_jsx(LocationLabelsContext.Provider, { value: { customLocationLabel, customerLocationLabel }, children: _jsx(CoreLocationList.Root, { locationListServiceConfig: config, children: _jsx(RootContent, { className: className, ref: ref, variant: variant, children: children }) }) }));
 });
 Root.displayName = 'LocationList.Root';
 /**
@@ -85,15 +91,35 @@ export const Locations = React.forwardRef((props, ref) => {
 Locations.displayName = 'LocationList.Locations';
 export const LocationRepeater = React.forwardRef((props, ref) => {
     const { children } = props;
+    const { customLocationLabel, customerLocationLabel } = useLocationLabelsContext();
     // Custom itemWrapper that wraps each item in Location.Root
     const locationItemWrapper = ({ item: displayLocation, children: itemChildren, }) => {
         // Convert DisplayLocation to LocationInput
         // If location is null, create a SyntheticLocation
-        const location = displayLocation.location ?? {
-            locationType: displayLocation.type,
-            synthetic: true,
-            _id: displayLocation.id,
-        };
+        let location;
+        if (displayLocation.location) {
+            location = displayLocation.location;
+        }
+        else {
+            const locationType = displayLocation.type;
+            // Determine the name based on labels or defaults
+            let name;
+            if (locationType === LocationType.CUSTOM &&
+                customLocationLabel !== undefined) {
+                name = customLocationLabel;
+            }
+            else if (locationType === LocationType.CUSTOMER &&
+                customerLocationLabel !== undefined) {
+                name = customerLocationLabel;
+            }
+            // If no label provided, name will be undefined and defaults will be used in computeLocationRenderProps
+            location = {
+                locationType,
+                synthetic: true,
+                _id: displayLocation.id,
+                name,
+            };
+        }
         return (_jsx(Location.Root, { location: location, "data-testid": TestIds.locationListLocation, "data-location-id": displayLocation.id, "data-location-type": displayLocation.type, "data-item-id": displayLocation.id, children: itemChildren }, displayLocation.id));
     };
     return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: locationItemWrapper, children: children }));

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

@@ -6,7 +6,9 @@ import React from 'react';
 import { ListVariant } from '@wix/headless-components/react';
 import { AsChildChildren } from '@wix/headless-utils/react';
 import type { TimeSlot as TimeSlotType } from '@wix/auto_sdk_bookings_availability-time-slots';
+import type { Service } from '@wix/auto_sdk_bookings_services';
 import type { TimeSlotListServiceConfig } from '../../services/time-slot-list/time-slot-list.def.js';
+import { ServiceSelectionTimeSlot } from '../../services/booking/booking.js';
 export type { StartDateProps as TimeSlotStartDateProps, EndDateProps as TimeSlotEndDateProps, DurationProps as TimeSlotDurationProps, SelectProps as TimeSlotSelectProps, LocationNameProps as TimeSlotLocationNameProps, StaffMembersProps as TimeSlotStaffMembersProps, StaffMemberRepeaterProps as TimeSlotStaffMemberRepeaterProps, StaffMemberNameProps as TimeSlotStaffMemberNameProps, SelectStaffMemberProps as TimeSlotSelectStaffMemberProps, ClearStaffSelectionProps as TimeSlotClearStaffSelectionProps, } from './TimeSlot.js';
 /**
  * Render props for TimeSlotList.Timezone component
@@ -49,8 +51,23 @@ export declare const Timezone: React.ForwardRefExoticComponent<TimezoneProps & R
  * Props for TimeSlotList.Root component
  */
 export interface RootProps {
-    children: React.ReactNode;
+    children: React.ReactNode | ((data: {
+        navigateToBookingForm: ({ timeSlot, service, }: {
+            timeSlot?: ServiceSelectionTimeSlot;
+            service?: Service;
+        }) => Promise<void>;
+    }) => React.ReactNode);
     config: TimeSlotListServiceConfig;
+    /**
+     * Function to navigate to the booking form.
+     * The timeSlot and service parameters are optional - if not provided,
+     * BookingService will be used to get them from the current service selections.
+     * If not provided, will use the default navigation utility.
+     */
+    navigateToBookingForm?: ({ timeSlot, service, }: {
+        timeSlot?: ServiceSelectionTimeSlot;
+        service?: Service;
+    }) => Promise<void>;
     className?: string;
     variant?: ListVariant;
 }
@@ -62,15 +79,21 @@ export interface RootProps {
  * @example
  * ```tsx
  * import { TimeSlotList } from '@wix/bookings/components';
+ * import { navigateToBookingForm } from '@wix/headless-bookings/utils';
  *
  * function TimeSlotsPage({ config }) {
  *   return (
- *     <TimeSlotList.Root config={config}>
- *       <TimeSlotList.TimeSlots>
- *         <TimeSlotList.TimeSlotRepeater>
- *           {children}
- *         </TimeSlotList.TimeSlotRepeater>
- *       </TimeSlotList.TimeSlots>
+ *     <TimeSlotList.Root
+ *       config={config}
+ *       navigateToBookingForm={navigateToBookingForm}
+ *     >
+ *       {({ navigateToBookingForm }) => (
+ *         <TimeSlotList.TimeSlots>
+ *           <TimeSlotList.TimeSlotRepeater>
+ *             {children}
+ *           </TimeSlotList.TimeSlotRepeater>
+ *         </TimeSlotList.TimeSlots>
+ *       )}
  *     </TimeSlotList.Root>
  *   );
  * }

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

@@ -9,6 +9,7 @@ import { AsChildSlot } from '@wix/headless-utils/react';
 import * as CoreTimeSlotList from '../core/time-slot-list/TimeSlotList.js';
 import * as CoreTimeSlot from '../core/time-slot-list/TimeSlot.js';
 import { StartDate as TimeSlotStartDate, EndDate as TimeSlotEndDate, Duration, Actions as TimeSlotActions, Location, StaffMembers, StaffMemberRepeater, StaffMember, Root as TimeSlotRoot, } from './TimeSlot.js';
+import { navigateToBookingForm as defaultNavigateToBookingForm } from '../../utils/navigation.js';
 // ============================================================================
 // Utilities
 // ============================================================================
@@ -28,6 +29,7 @@ var TestIds;
     TestIds["timeSlotListTimeSlot"] = "time-slot-list-time-slot";
     TestIds["timeSlotListTimezone"] = "time-slot-list-timezone";
     TestIds["timeSlotListLoadMore"] = "time-slot-list-load-more";
+    TestIds["timeSlotListContinue"] = "time-slot-list-continue";
     TestIds["timeSlotListDateRangeInput"] = "time-slot-list-date-range-input";
 })(TestIds || (TestIds = {}));
 /**
@@ -62,23 +64,40 @@ Timezone.displayName = 'TimeSlotList.Timezone';
  * @example
  * ```tsx
  * import { TimeSlotList } from '@wix/bookings/components';
+ * import { navigateToBookingForm } from '@wix/headless-bookings/utils';
  *
  * function TimeSlotsPage({ config }) {
  *   return (
- *     <TimeSlotList.Root config={config}>
- *       <TimeSlotList.TimeSlots>
- *         <TimeSlotList.TimeSlotRepeater>
- *           {children}
- *         </TimeSlotList.TimeSlotRepeater>
- *       </TimeSlotList.TimeSlots>
+ *     <TimeSlotList.Root
+ *       config={config}
+ *       navigateToBookingForm={navigateToBookingForm}
+ *     >
+ *       {({ navigateToBookingForm }) => (
+ *         <TimeSlotList.TimeSlots>
+ *           <TimeSlotList.TimeSlotRepeater>
+ *             {children}
+ *           </TimeSlotList.TimeSlotRepeater>
+ *         </TimeSlotList.TimeSlots>
+ *       )}
  *     </TimeSlotList.Root>
  *   );
  * }
  * ```
  */
 export const Root = React.forwardRef((props, ref) => {
-    const { children, config, className, variant } = props;
-    return (_jsx(CoreTimeSlotList.Root, { config: config, children: _jsx(RootContent, { className: className, ref: ref, variant: variant, children: children }) }));
+    const { children, config, className, variant, navigateToBookingForm: providedNavigateToBookingForm, } = props;
+    const navigateToBookingForm = providedNavigateToBookingForm ||
+        (async ({ timeSlot, service, }) => {
+            if (!timeSlot || !service) {
+                throw new Error('timeSlot and service are required when using default navigation. Either provide them or ensure BookingService has service selections.');
+            }
+            return defaultNavigateToBookingForm({ timeSlot, service });
+        });
+    return (_jsx(CoreTimeSlotList.Root, { config: config, navigateToBookingForm: navigateToBookingForm, children: (coreData) => (_jsx(RootContent, { className: className, ref: ref, variant: variant, children: typeof children === 'function'
+                ? children({
+                    navigateToBookingForm: coreData.navigateToBookingForm,
+                })
+                : children })) }));
 });
 Root.displayName = 'TimeSlotList.Root';
 /**