@wix/headless-bookings 0.0.60 → 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/booking/Booking.d.ts

@@ -192,31 +192,32 @@ export declare function TimeSlot(props: BookingTimeSlotProps): React.ReactNode;
  * Props for Booking.Payment component
  */
 export interface BookingPaymentProps {
-    children: React.ReactNode;
+    children?: React.ReactNode | ((props: {
+        isLoading: boolean;
+        hasError: boolean;
+    }) => React.ReactNode);
+    asChild?: boolean;
+    className?: string;
 }
 /**
  * Wraps Payment.Root with all services from all booking items.
  * Should be used outside of ItemRepeater - it calculates payment for all items.
  * Children can use all Payment.* components (Payment.Total, Payment.Subtotal, etc.).
- * Always renders with data-has-payment attribute for CSS targeting.
+ * Supports asChild to expose { isLoading, hasError } to children.
  *
  * @component
  * @example
  * ```tsx
- * <Booking.Root>
- *   <Booking.ItemsRoot>
- *     <Booking.Items>
- *       <Booking.ItemRepeater>
- *         <Booking.Service><Service.Name /></Booking.Service>
- *       </Booking.ItemRepeater>
- *     </Booking.Items>
- *   </Booking.ItemsRoot>
+ * // Standard usage
+ * <Booking.Payment>
+ *   <Payment.Total className="text-xl font-bold" />
+ *   <Payment.Subtotal />
+ * </Booking.Payment>
  *
- *   <Booking.Payment>
- *     <Payment.Total className="text-xl font-bold" />
- *     <Payment.Subtotal />
- *   </Booking.Payment>
- * </Booking.Root>
+ * // With asChild to access isLoading
+ * <Booking.Payment asChild>
+ *   {({ isLoading }) => isLoading ? <Skeleton /> : <PaymentSection />}
+ * </Booking.Payment>
  * ```
  */
 export declare function Payment(props: BookingPaymentProps): React.ReactNode;

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

@@ -204,30 +204,26 @@ export function TimeSlot(props) {
  * Wraps Payment.Root with all services from all booking items.
  * Should be used outside of ItemRepeater - it calculates payment for all items.
  * Children can use all Payment.* components (Payment.Total, Payment.Subtotal, etc.).
- * Always renders with data-has-payment attribute for CSS targeting.
+ * Supports asChild to expose { isLoading, hasError } to children.
  *
  * @component
  * @example
  * ```tsx
- * <Booking.Root>
- *   <Booking.ItemsRoot>
- *     <Booking.Items>
- *       <Booking.ItemRepeater>
- *         <Booking.Service><Service.Name /></Booking.Service>
- *       </Booking.ItemRepeater>
- *     </Booking.Items>
- *   </Booking.ItemsRoot>
+ * // Standard usage
+ * <Booking.Payment>
+ *   <Payment.Total className="text-xl font-bold" />
+ *   <Payment.Subtotal />
+ * </Booking.Payment>
  *
- *   <Booking.Payment>
- *     <Payment.Total className="text-xl font-bold" />
- *     <Payment.Subtotal />
- *   </Booking.Payment>
- * </Booking.Root>
+ * // With asChild to access isLoading
+ * <Booking.Payment asChild>
+ *   {({ isLoading }) => isLoading ? <Skeleton /> : <PaymentSection />}
+ * </Booking.Payment>
  * ```
  */
 export function Payment(props) {
-    const { children } = props;
-    return (_jsx(CoreBooking.PaymentData, { children: ({ pricingServiceSelections }) => (_jsx(PaymentComponent.Root, { pricingServiceSelections: pricingServiceSelections, children: children })) }));
+    const { children, asChild, className } = props;
+    return (_jsx(CoreBooking.PaymentData, { children: ({ pricingServiceSelections }) => (_jsx(PaymentComponent.Root, { pricingServiceSelections: pricingServiceSelections, asChild: asChild, className: className, children: children })) }));
 }
 /**
  * Wraps Location context with the location from the booking context.

package/cjs/dist/react/core/payment/Payment.d.ts

@@ -95,6 +95,8 @@ export interface LineItem {
     deposit: MoneyData | null;
     /** Custom price text (for CUSTOM rate type) */
     priceText: string | null;
+    /** Whether this is a free service (NO_FEE rate type) */
+    isFree: boolean;
 }
 /**
  * Props for LineItems render prop component

package/cjs/dist/react/core/payment/Payment.js

@@ -77,12 +77,13 @@ export function Data(props) {
     const discount = convertMultiCurrencyPriceToMoneyData(priceSummary?.discount, currency);
     const payNow = convertMultiCurrencyPriceToMoneyData(paymentDetails?.response?.payNow?.total, currency);
     const payLater = convertMultiCurrencyPriceToMoneyData(paymentDetails?.response?.payLater?.total, currency);
-    // Get priceText from first line item (single service mode)
+    // Get priceText and isFree from first line item (single service mode)
     const additionalInfoList = paymentDetails?.additionalInfo?.lineItems || [];
     const firstLineItemInfo = additionalInfoList[0];
     const priceText = firstLineItemInfo?.priceText || null;
     const hasPriceText = !!priceText;
-    const isFree = total !== null && total.amount === 0 && !hasPriceText;
+    // Use isFree from service (NO_FEE rate type) if available, otherwise fallback to amount check
+    const isFree = firstLineItemInfo?.isFree ?? false;
     // Computed flags
     const hasTax = tax !== null && tax.amount > 0;
     const hasDiscount = discount !== null && discount.amount > 0;
@@ -145,6 +146,7 @@ export function LineItems(props) {
             discount: convertMultiCurrencyPriceToMoneyData(pricesBreakdown?.totalDiscount, currency),
             deposit: convertMultiCurrencyPriceToMoneyData(pricesBreakdown?.depositAmount, currency),
             priceText: additionalInfo?.priceText || null,
+            isFree: additionalInfo?.isFree ?? false,
         };
     });
     const hasLineItems = lineItems.length > 0;
@@ -212,9 +214,6 @@ export function LineItemInfo(props) {
     const { lineItem, currency } = useLineItemContext();
     // Computed flags
     const hasPriceText = !!lineItem.priceText;
-    const isFree = lineItem.totalPrice !== null &&
-        lineItem.totalPrice.amount === 0 &&
-        !hasPriceText;
     const hasDiscount = lineItem.discount !== null && lineItem.discount.amount > 0;
     const hasDeposit = lineItem.deposit !== null && lineItem.deposit.amount > 0;
     return props.children({
@@ -227,7 +226,7 @@ export function LineItemInfo(props) {
         deposit: lineItem.deposit,
         priceText: lineItem.priceText,
         hasPriceText,
-        isFree,
+        isFree: lineItem.isFree,
         hasDiscount,
         hasDeposit,
     });

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/payment/Payment.d.ts

@@ -179,12 +179,13 @@ export interface PayNowProps {
     asChild?: boolean;
     children?: AsChildChildren<{
         payNow: MoneyData | null;
+        isDeposit: boolean;
     }>;
     className?: string;
 }
 /**
- * Displays the pay now amount (for deposit scenarios).
- * Uses data-has-deposit attribute for conditional visibility.
+ * Displays the pay now amount (amount to pay upfront in deposit scenarios).
+ * Only renders in deposit mode when payNow has a valid amount.
  *
  * @component
  * @example
@@ -200,12 +201,13 @@ export interface PayLaterProps {
     asChild?: boolean;
     children?: AsChildChildren<{
         payLater: MoneyData | null;
+        isDeposit: boolean;
     }>;
     className?: string;
 }
 /**
  * Displays the pay later amount (for deposit scenarios).
- * Uses data-has-deposit attribute for conditional visibility.
+ * Only renders when in deposit mode and payLater has a valid amount.
  *
  * @component
  * @example

package/cjs/dist/react/payment/Payment.js

@@ -150,8 +150,8 @@ export const Total = React.forwardRef((props, ref) => {
 });
 Total.displayName = 'Payment.Total';
 /**
- * Displays the pay now amount (for deposit scenarios).
- * Uses data-has-deposit attribute for conditional visibility.
+ * Displays the pay now amount (amount to pay upfront in deposit scenarios).
+ * Only renders in deposit mode when payNow has a valid amount.
  *
  * @component
  * @example
@@ -161,12 +161,12 @@ Total.displayName = 'Payment.Total';
  */
 export const PayNow = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CorePayment.Data, { children: ({ payNow, isDeposit }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentPayNow, "data-has-deposit": isDeposit, customElement: children, customElementProps: { payNow }, children: payNow && payNow.amount > 0 && _jsx(Money, { money: payNow }) })) }));
+    return (_jsx(CorePayment.Data, { children: ({ payNow, isDeposit }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentPayNow, "data-has-deposit": isDeposit, customElement: children, customElementProps: { payNow, isDeposit }, children: isDeposit && payNow && payNow.amount > 0 && (_jsx(Money, { money: payNow })) })) }));
 });
 PayNow.displayName = 'Payment.PayNow';
 /**
  * Displays the pay later amount (for deposit scenarios).
- * Uses data-has-deposit attribute for conditional visibility.
+ * Only renders when in deposit mode and payLater has a valid amount.
  *
  * @component
  * @example
@@ -176,7 +176,7 @@ PayNow.displayName = 'Payment.PayNow';
  */
 export const PayLater = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CorePayment.Data, { children: ({ payLater, isDeposit }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentPayLater, "data-has-deposit": isDeposit, customElement: children, customElementProps: { payLater }, children: payLater && payLater.amount > 0 && _jsx(Money, { money: payLater }) })) }));
+    return (_jsx(CorePayment.Data, { children: ({ payLater, isDeposit }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentPayLater, "data-has-deposit": isDeposit, customElement: children, customElementProps: { payLater, isDeposit }, children: isDeposit && payLater && payLater.amount > 0 && (_jsx(Money, { money: payLater })) })) }));
 });
 PayLater.displayName = 'Payment.PayLater';
 /**

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/services/payment/payment.def.d.ts

@@ -17,6 +17,8 @@ export interface LineItemAdditionalInfo {
     lineItemId: string;
     /** Custom price text (for CUSTOM rate type services) */
     priceText?: string;
+    /** Whether this is a free service (NO_FEE rate type) */
+    isFree?: boolean;
 }
 /**
  * Payment calculation result with SDK response and additional computed info

package/cjs/dist/services/payment/payment.js

@@ -23,7 +23,8 @@ function getAdditionalInfo(service, lineItemId) {
     const priceText = payment?.rateType === RateType.CUSTOM && payment.custom?.description
         ? payment.custom.description
         : undefined;
-    return { lineItemId, priceText };
+    const isFree = payment?.rateType === RateType.NO_FEE;
+    return { lineItemId, priceText, isFree };
 }
 function getPaymentOption(service, hasDeposit) {
     const options = service.payment?.options;

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');
+    }
+}