@wix/headless-bookings 0.0.61 → 0.0.62

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/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,71 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 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, }) {
+    // Get BookingService to use when timeSlot/service are not provided
+    let bookingService = null;
+    try {
+        bookingService = useService(BookingServiceDefinition);
+    }
+    catch {
+        // BookingService not available - that's ok, user must provide timeSlot/service
+        bookingService = null;
+    }
+    // Wrap the provided navigateToBookingForm to handle optional parameters
+    const navigateToBookingForm = async ({ timeSlot, service, }) => {
+        // If timeSlot or service are not provided, try to get them from BookingService
+        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;
+                }
+            }
+        }
+        // Validate that we have both timeSlot and service
+        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.');
+        }
+        // Call the provided function with resolved values
+        return providedNavigateToBookingForm({
+            timeSlot: resolvedTimeSlot,
+            service: resolvedService,
+        });
+    };
+    return _jsx(_Fragment, { children: children({ navigateToBookingForm }) });
 }
 // ============================================================================
 // Timezone Component

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,44 @@ 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;
+    // Wrap defaultNavigateToBookingForm to match optional parameter signature
+    // The core component will handle getting timeSlot/service from BookingService if not provided
+    const navigateToBookingForm = providedNavigateToBookingForm ||
+        (async ({ timeSlot, service, }) => {
+            // This will be handled by the core component's wrapper
+            // which will resolve timeSlot/service from BookingService if needed
+            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';
 /**

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

@@ -0,0 +1,5 @@
+/**
+ * Bookings Utilities
+ * Exports utility functions for the bookings package
+ */
+export { navigateToBookingForm, navigateToCheckout } from './navigation.js';

package/cjs/dist/utils/index.js

@@ -0,0 +1,5 @@
+/**
+ * Bookings Utilities
+ * Exports utility functions for the bookings package
+ */
+export { navigateToBookingForm, navigateToCheckout } from './navigation.js';

package/cjs/dist/utils/navigation.d.ts

@@ -0,0 +1,7 @@
+import type { ServiceSelectionTimeSlot } from '../services/booking/booking.js';
+import type { Service } from '@wix/auto_sdk_bookings_services';
+export declare function navigateToCheckout(checkoutId: string): Promise<void>;
+export declare function navigateToBookingForm({ timeSlot, service, }: {
+    timeSlot: ServiceSelectionTimeSlot;
+    service: Service;
+}): Promise<void>;

package/cjs/dist/utils/navigation.js

@@ -0,0 +1,75 @@
+import { redirects } from '@wix/redirects';
+import { LocationType as TimeSlotLocationType } from '@wix/auto_sdk_bookings_availability-time-slots';
+import { LocationType as BookingsLocationType } from '@wix/auto_sdk_redirects_redirects';
+export async function navigateToCheckout(checkoutId) {
+    const { redirectSession } = await redirects.createRedirectSession({
+        ecomCheckout: { checkoutId },
+        callbacks: {
+            postFlowUrl: window.location.href,
+        },
+    });
+    if (redirectSession?.fullUrl) {
+        window.location.href = redirectSession.fullUrl;
+    }
+    else {
+        throw new Error('Failed to create redirect session');
+    }
+}
+function mapTimeSlotLocationToBookingLocation(timeSlotLocationType) {
+    switch (timeSlotLocationType) {
+        case TimeSlotLocationType.BUSINESS:
+            return BookingsLocationType.OWNER_BUSINESS;
+        case TimeSlotLocationType.CUSTOMER:
+            return BookingsLocationType.CUSTOM;
+        case TimeSlotLocationType.CUSTOM:
+            return BookingsLocationType.OWNER_CUSTOM;
+        default:
+            return BookingsLocationType.UNDEFINED;
+    }
+}
+export async function navigateToBookingForm({ timeSlot, service, }) {
+    if (!timeSlot) {
+        throw new Error('No time slot provided');
+    }
+    if (!service) {
+        throw new Error('No service provided');
+    }
+    // Get the first resource (staff member) if available
+    const selectedResource = timeSlot.resources?.[0];
+    const { redirectSession } = await redirects.createRedirectSession({
+        bookingsCheckout: {
+            slotAvailability: {
+                bookable: true,
+                slot: {
+                    ...timeSlot,
+                    serviceId: service._id ?? undefined,
+                    scheduleId: timeSlot.scheduleId,
+                    startDate: timeSlot.startDate,
+                    endDate: timeSlot.endDate,
+                    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+                    resource: selectedResource
+                        ? {
+                            _id: selectedResource._id,
+                            name: selectedResource.name,
+                        }
+                        : undefined,
+                    location: {
+                        _id: timeSlot.location?._id,
+                        name: timeSlot.location?.name,
+                        formattedAddress: timeSlot.location?.formattedAddress,
+                        locationType: mapTimeSlotLocationToBookingLocation(timeSlot.location?.locationType),
+                    },
+                },
+            },
+        },
+        callbacks: {
+            postFlowUrl: window.location.href,
+        },
+    });
+    if (redirectSession?.fullUrl) {
+        window.location.href = redirectSession.fullUrl;
+    }
+    else {
+        throw new Error('Failed to create redirect session');
+    }
+}

package/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/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/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/dist/react/core/time-slot-list/TimeSlotList.js

@@ -1,21 +1,71 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 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, }) {
+    // Get BookingService to use when timeSlot/service are not provided
+    let bookingService = null;
+    try {
+        bookingService = useService(BookingServiceDefinition);
+    }
+    catch {
+        // BookingService not available - that's ok, user must provide timeSlot/service
+        bookingService = null;
+    }
+    // Wrap the provided navigateToBookingForm to handle optional parameters
+    const navigateToBookingForm = async ({ timeSlot, service, }) => {
+        // If timeSlot or service are not provided, try to get them from BookingService
+        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;
+                }
+            }
+        }
+        // Validate that we have both timeSlot and service
+        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.');
+        }
+        // Call the provided function with resolved values
+        return providedNavigateToBookingForm({
+            timeSlot: resolvedTimeSlot,
+            service: resolvedService,
+        });
+    };
+    return _jsx(_Fragment, { children: children({ navigateToBookingForm }) });
 }
 // ============================================================================
 // Timezone Component

package/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/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,44 @@ 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;
+    // Wrap defaultNavigateToBookingForm to match optional parameter signature
+    // The core component will handle getting timeSlot/service from BookingService if not provided
+    const navigateToBookingForm = providedNavigateToBookingForm ||
+        (async ({ timeSlot, service, }) => {
+            // This will be handled by the core component's wrapper
+            // which will resolve timeSlot/service from BookingService if needed
+            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';
 /**

package/dist/utils/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Bookings Utilities
+ * Exports utility functions for the bookings package
+ */
+export { navigateToBookingForm, navigateToCheckout } from './navigation.js';

package/dist/utils/index.js

@@ -0,0 +1,5 @@
+/**
+ * Bookings Utilities
+ * Exports utility functions for the bookings package
+ */
+export { navigateToBookingForm, navigateToCheckout } from './navigation.js';

package/dist/utils/navigation.d.ts

@@ -0,0 +1,7 @@
+import type { ServiceSelectionTimeSlot } from '../services/booking/booking.js';
+import type { Service } from '@wix/auto_sdk_bookings_services';
+export declare function navigateToCheckout(checkoutId: string): Promise<void>;
+export declare function navigateToBookingForm({ timeSlot, service, }: {
+    timeSlot: ServiceSelectionTimeSlot;
+    service: Service;
+}): Promise<void>;

package/dist/utils/navigation.js

@@ -0,0 +1,75 @@
+import { redirects } from '@wix/redirects';
+import { LocationType as TimeSlotLocationType } from '@wix/auto_sdk_bookings_availability-time-slots';
+import { LocationType as BookingsLocationType } from '@wix/auto_sdk_redirects_redirects';
+export async function navigateToCheckout(checkoutId) {
+    const { redirectSession } = await redirects.createRedirectSession({
+        ecomCheckout: { checkoutId },
+        callbacks: {
+            postFlowUrl: window.location.href,
+        },
+    });
+    if (redirectSession?.fullUrl) {
+        window.location.href = redirectSession.fullUrl;
+    }
+    else {
+        throw new Error('Failed to create redirect session');
+    }
+}
+function mapTimeSlotLocationToBookingLocation(timeSlotLocationType) {
+    switch (timeSlotLocationType) {
+        case TimeSlotLocationType.BUSINESS:
+            return BookingsLocationType.OWNER_BUSINESS;
+        case TimeSlotLocationType.CUSTOMER:
+            return BookingsLocationType.CUSTOM;
+        case TimeSlotLocationType.CUSTOM:
+            return BookingsLocationType.OWNER_CUSTOM;
+        default:
+            return BookingsLocationType.UNDEFINED;
+    }
+}
+export async function navigateToBookingForm({ timeSlot, service, }) {
+    if (!timeSlot) {
+        throw new Error('No time slot provided');
+    }
+    if (!service) {
+        throw new Error('No service provided');
+    }
+    // Get the first resource (staff member) if available
+    const selectedResource = timeSlot.resources?.[0];
+    const { redirectSession } = await redirects.createRedirectSession({
+        bookingsCheckout: {
+            slotAvailability: {
+                bookable: true,
+                slot: {
+                    ...timeSlot,
+                    serviceId: service._id ?? undefined,
+                    scheduleId: timeSlot.scheduleId,
+                    startDate: timeSlot.startDate,
+                    endDate: timeSlot.endDate,
+                    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+                    resource: selectedResource
+                        ? {
+                            _id: selectedResource._id,
+                            name: selectedResource.name,
+                        }
+                        : undefined,
+                    location: {
+                        _id: timeSlot.location?._id,
+                        name: timeSlot.location?.name,
+                        formattedAddress: timeSlot.location?.formattedAddress,
+                        locationType: mapTimeSlotLocationToBookingLocation(timeSlot.location?.locationType),
+                    },
+                },
+            },
+        },
+        callbacks: {
+            postFlowUrl: window.location.href,
+        },
+    });
+    if (redirectSession?.fullUrl) {
+        window.location.href = redirectSession.fullUrl;
+    }
+    else {
+        throw new Error('Failed to create redirect session');
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-bookings",
-  "version": "0.0.61",
+  "version": "0.0.62",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -72,5 +72,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "cd07fd84714c0aeec8926487334181ea2b0381b631c601891b559528"
+  "falconPackageHash": "a7ee3575b035403add534d60cde7f1bc57053324c9c08aa82811ca8b"
 }