@wix/headless-bookings 0.0.66 → 0.0.68

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

@@ -14,13 +14,19 @@ export interface BookProps {
     label?: string;
     loadingState?: string;
     disabled?: boolean;
+    /**
+     * Called when checkout is required for payment.
+     * The navigateToCheckout function already has the checkoutId captured - just call it to navigate.
+     */
     onCheckout?: (result: {
-        checkoutId: string;
-        navigateToCheckout: (checkoutId: string) => void;
+        navigateToCheckout: () => void;
     }) => void;
+    /**
+     * Called when booking completes without requiring checkout (free/offline services).
+     * Receives the orderId which can be used to display confirmation or navigate to a thank you page.
+     */
     onComplete?: (result: {
         orderId: string;
-        navigateToThankYou: (orderId: string) => void;
     }) => void;
     onError?: (error: BookingError) => void;
 }
@@ -29,20 +35,20 @@ export interface BookProps {
  *
  * @example
  * ```tsx
- * // Simple usage
+ * // Simple usage - uses default navigation
  * <Booking.Actions.Book />
  *
- * // With callbacks
+ * // With callbacks - navigateToCheckout has checkoutId captured
  * <Booking.Actions.Book
- *   onCheckout={({ checkoutId, navigateToCheckout }) => navigateToCheckout(checkoutId)}
- *   onComplete={({ orderId }) => router.push(`/thank-you?orderId=${orderId}`)}
+ *   onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
+ *   onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
  *   onError={(error) => console.error(error.message)}
  * />
  *
  * // With render function
  * <Booking.Actions.Book
- *   onCheckout={({ checkoutId, navigateToCheckout }) => navigateToCheckout(checkoutId)}
- *   onComplete={({ orderId }) => router.push(`/thank-you?orderId=${orderId}`)}
+ *   onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
+ *   onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
  * >
  *   {({ isLoading, error, canBook, onClick, disabled }) => (
  *     <button onClick={onClick} disabled={disabled}>
@@ -54,8 +60,8 @@ export interface BookProps {
  * // With asChild
  * <Booking.Actions.Book
  *   asChild
- *   onCheckout={({ checkoutId, navigateToCheckout }) => navigateToCheckout(checkoutId)}
- *   onComplete={({ orderId }) => router.push(`/thank-you?orderId=${orderId}`)}
+ *   onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
+ *   onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
  * >
  *   <CustomBookButton />
  * </Booking.Actions.Book>

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

@@ -6,7 +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';
+import { navigateToCheckout as navigateToCheckoutUtil } from '../../utils/navigation.js';
 var TestIds;
 (function (TestIds) {
     TestIds["bookingActionBook"] = "booking-action-book";
@@ -16,20 +16,20 @@ var TestIds;
  *
  * @example
  * ```tsx
- * // Simple usage
+ * // Simple usage - uses default navigation
  * <Booking.Actions.Book />
  *
- * // With callbacks
+ * // With callbacks - navigateToCheckout has checkoutId captured
  * <Booking.Actions.Book
- *   onCheckout={({ checkoutId, navigateToCheckout }) => navigateToCheckout(checkoutId)}
- *   onComplete={({ orderId }) => router.push(`/thank-you?orderId=${orderId}`)}
+ *   onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
+ *   onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
  *   onError={(error) => console.error(error.message)}
  * />
  *
  * // With render function
  * <Booking.Actions.Book
- *   onCheckout={({ checkoutId, navigateToCheckout }) => navigateToCheckout(checkoutId)}
- *   onComplete={({ orderId }) => router.push(`/thank-you?orderId=${orderId}`)}
+ *   onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
+ *   onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
  * >
  *   {({ isLoading, error, canBook, onClick, disabled }) => (
  *     <button onClick={onClick} disabled={disabled}>
@@ -41,8 +41,8 @@ var TestIds;
  * // With asChild
  * <Booking.Actions.Book
  *   asChild
- *   onCheckout={({ checkoutId, navigateToCheckout }) => navigateToCheckout(checkoutId)}
- *   onComplete={({ orderId }) => router.push(`/thank-you?orderId=${orderId}`)}
+ *   onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
+ *   onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
  * >
  *   <CustomBookButton />
  * </Booking.Actions.Book>
@@ -51,14 +51,11 @@ 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: (result) => {
-            onCheckout?.({ ...result, navigateToCheckout });
-        }, onComplete: (result) => {
-            onComplete?.({
-                ...result,
-                navigateToThankYou: (orderId) => {
-                    console.log('navigateToThankYou', orderId);
-                },
+            onCheckout?.({
+                navigateToCheckout: () => navigateToCheckoutUtil(result.checkoutId),
             });
+        }, onComplete: (result) => {
+            onComplete?.({ orderId: result.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

@@ -44,10 +44,11 @@ export declare const Root: {
  * // Simple usage
  * <Booking.Actions.Book />
  *
- * // With callbacks
+ * // With callbacks - navigateToCheckout has checkoutId already captured
  * <Booking.Actions.Book
- *   onCheckoutRequired={({ checkoutId }) => router.push(`/checkout?id=${checkoutId}`)}
- *   onError={(error) => toast.error(error)}
+ *   onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
+ *   onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
+ *   onError={(error) => toast.error(error.message)}
  * />
  * ```
  */

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

@@ -60,10 +60,11 @@ Root.displayName = 'Booking.Root';
  * // Simple usage
  * <Booking.Actions.Book />
  *
- * // With callbacks
+ * // With callbacks - navigateToCheckout has checkoutId already captured
  * <Booking.Actions.Book
- *   onCheckoutRequired={({ checkoutId }) => router.push(`/checkout?id=${checkoutId}`)}
- *   onError={(error) => toast.error(error)}
+ *   onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
+ *   onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
+ *   onError={(error) => toast.error(error.message)}
  * />
  * ```
  */

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

@@ -32,11 +32,21 @@ export interface BookProps {
  * Core Book component - provides book action data via render props.
  * Used internally by higher-level Booking.Actions.Book component.
  *
+ * The onCheckout callback receives the checkoutId for internal use.
+ * The high-level component wraps this to provide a simpler API with
+ * navigateToCheckout() that has the checkoutId already captured.
+ *
  * @example
  * ```tsx
  * <Book
- *   onCheckout={({ checkoutId }) => navigate(`/checkout?id=${checkoutId}`)}
- *   onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
+ *   onCheckout={({ checkoutId }) => {
+ *     // Use checkoutId to navigate to checkout
+ *     navigateToCheckout(checkoutId);
+ *   }}
+ *   onComplete={({ orderId }) => {
+ *     // Use orderId to navigate to thank you page
+ *     navigate(`/thank-you?orderId=${orderId}`);
+ *   }}
  * >
  *   {({ isLoading, error, canBook, onClick, disabled }) => (
  *     <button onClick={onClick} disabled={disabled}>

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

@@ -11,11 +11,21 @@ import { BookResultType, } from '../../../services/booking/book-action/types.js'
  * Core Book component - provides book action data via render props.
  * Used internally by higher-level Booking.Actions.Book component.
  *
+ * The onCheckout callback receives the checkoutId for internal use.
+ * The high-level component wraps this to provide a simpler API with
+ * navigateToCheckout() that has the checkoutId already captured.
+ *
  * @example
  * ```tsx
  * <Book
- *   onCheckout={({ checkoutId }) => navigate(`/checkout?id=${checkoutId}`)}
- *   onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
+ *   onCheckout={({ checkoutId }) => {
+ *     // Use checkoutId to navigate to checkout
+ *     navigateToCheckout(checkoutId);
+ *   }}
+ *   onComplete={({ orderId }) => {
+ *     // Use orderId to navigate to thank you page
+ *     navigate(`/thank-you?orderId=${orderId}`);
+ *   }}
  * >
  *   {({ isLoading, error, canBook, onClick, disabled }) => (
  *     <button onClick={onClick} disabled={disabled}>

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

@@ -59,9 +59,7 @@ export interface DataProps {
         discount: MoneyData | null;
         payNow: MoneyData | null;
         payLater: MoneyData | null;
-        priceText: string | null;
-        hasPriceText: boolean;
-        isFree: boolean;
+        customPrice: string | null;
         hasTax: boolean;
         hasDiscount: boolean;
         isDeposit: boolean;
@@ -93,10 +91,8 @@ export interface LineItem {
     discount: MoneyData | null;
     /** Deposit amount */
     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;
+    /** Custom price text (for CUSTOM rate type services) */
+    customPrice: string | null;
 }
 /**
  * Props for LineItems render prop component
@@ -180,9 +176,7 @@ export interface LineItemInfoProps {
         tax: MoneyData | null;
         discount: MoneyData | null;
         deposit: MoneyData | null;
-        priceText: string | null;
-        hasPriceText: boolean;
-        isFree: boolean;
+        customPrice: string | null;
         hasDiscount: boolean;
         hasDeposit: boolean;
     }) => React.ReactNode;
@@ -195,9 +189,9 @@ export interface LineItemInfoProps {
  * @example
  * ```tsx
  * <LineItemInfo>
- *   {({ totalPrice, priceText, lineItem }) => (
+ *   {({ totalPrice, customPrice, lineItem }) => (
  *     <div>
- *       {priceText ? <span>{priceText}</span> : <Money money={totalPrice} />}
+ *       {customPrice ? <span>{customPrice}</span> : <Money money={totalPrice} />}
  *     </div>
  *   )}
  * </LineItemInfo>

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

@@ -77,13 +77,10 @@ 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 and isFree from first line item (single service mode)
+    // Get customPrice from first line item (single service mode)
     const additionalInfoList = paymentDetails?.additionalInfo?.lineItems || [];
     const firstLineItemInfo = additionalInfoList[0];
-    const priceText = firstLineItemInfo?.priceText || null;
-    const hasPriceText = !!priceText;
-    // Use isFree from service (NO_FEE rate type) if available, otherwise fallback to amount check
-    const isFree = firstLineItemInfo?.isFree ?? false;
+    const customPrice = firstLineItemInfo?.customPrice || null;
     // Computed flags
     const hasTax = tax !== null && tax.amount > 0;
     const hasDiscount = discount !== null && discount.amount > 0;
@@ -95,9 +92,7 @@ export function Data(props) {
         discount,
         payNow,
         payLater,
-        priceText,
-        hasPriceText,
-        isFree,
+        customPrice,
         hasTax,
         hasDiscount,
         isDeposit,
@@ -145,8 +140,7 @@ export function LineItems(props) {
             tax: convertMultiCurrencyPriceToMoneyData(pricesBreakdown?.taxDetails?.totalTax, currency),
             discount: convertMultiCurrencyPriceToMoneyData(pricesBreakdown?.totalDiscount, currency),
             deposit: convertMultiCurrencyPriceToMoneyData(pricesBreakdown?.depositAmount, currency),
-            priceText: additionalInfo?.priceText || null,
-            isFree: additionalInfo?.isFree ?? false,
+            customPrice: additionalInfo?.customPrice || null,
         };
     });
     const hasLineItems = lineItems.length > 0;
@@ -202,9 +196,9 @@ export function LineItemProvider(props) {
  * @example
  * ```tsx
  * <LineItemInfo>
- *   {({ totalPrice, priceText, lineItem }) => (
+ *   {({ totalPrice, customPrice, lineItem }) => (
  *     <div>
- *       {priceText ? <span>{priceText}</span> : <Money money={totalPrice} />}
+ *       {customPrice ? <span>{customPrice}</span> : <Money money={totalPrice} />}
  *     </div>
  *   )}
  * </LineItemInfo>
@@ -213,7 +207,6 @@ export function LineItemProvider(props) {
 export function LineItemInfo(props) {
     const { lineItem, currency } = useLineItemContext();
     // Computed flags
-    const hasPriceText = !!lineItem.priceText;
     const hasDiscount = lineItem.discount !== null && lineItem.discount.amount > 0;
     const hasDeposit = lineItem.deposit !== null && lineItem.deposit.amount > 0;
     return props.children({
@@ -224,9 +217,7 @@ export function LineItemInfo(props) {
         tax: lineItem.tax,
         discount: lineItem.discount,
         deposit: lineItem.deposit,
-        priceText: lineItem.priceText,
-        hasPriceText,
-        isFree: lineItem.isFree,
+        customPrice: lineItem.customPrice,
         hasDiscount,
         hasDeposit,
     });

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

@@ -63,15 +63,13 @@ export interface SubtotalProps {
     asChild?: boolean;
     children?: AsChildChildren<{
         subtotal: MoneyData | null;
-        priceText: string | null;
-        hasPriceText: boolean;
-        isFree: boolean;
+        customPrice: string | null;
     }>;
     className?: string;
 }
 /**
  * Displays the payment subtotal.
- * Always displays the monetary value but exposes priceText, hasPriceText, and isFree for custom rendering.
+ * Always displays the monetary value. Exposes customPrice for custom rendering.
  *
  * @component
  * @example
@@ -81,10 +79,9 @@ export interface SubtotalProps {
  * @example
  * ```tsx
  * <Payment.Subtotal asChild>
- *   {({ subtotal, priceText, hasPriceText, isFree }) => (
+ *   {({ subtotal, customPrice }) => (
  *     <div>
- *       <Money money={subtotal} />
- *       {hasPriceText && <span className="text-sm">({priceText})</span>}
+ *       {customPrice ? <span>{customPrice}</span> : <Money money={subtotal} />}
  *     </div>
  *   )}
  * </Payment.Subtotal>
@@ -140,15 +137,13 @@ export interface TotalProps {
     asChild?: boolean;
     children?: AsChildChildren<{
         total: MoneyData | null;
-        priceText: string | null;
-        hasPriceText: boolean;
-        isFree: boolean;
+        customPrice: string | null;
     }>;
     className?: string;
 }
 /**
  * Displays the payment total.
- * Always displays the monetary value but exposes priceText, hasPriceText, and isFree for custom rendering.
+ * Always displays the monetary value. Exposes customPrice for custom rendering.
  *
  * @component
  * @example
@@ -158,14 +153,9 @@ export interface TotalProps {
  * @example
  * ```tsx
  * <Payment.Total asChild>
- *   {({ total, priceText, hasPriceText, isFree }) => (
+ *   {({ total, customPrice }) => (
  *     <div>
- *       {isFree ? (
- *         <span className="text-green-500">Free</span>
- *       ) : (
- *         <Money money={total} />
- *       )}
- *       {hasPriceText && <span className="text-sm">({priceText})</span>}
+ *       {customPrice ? <span>{customPrice}</span> : <Money money={total} />}
  *     </div>
  *   )}
  * </Payment.Total>
@@ -302,15 +292,13 @@ export interface LineItemTotalProps {
     asChild?: boolean;
     children?: AsChildChildren<{
         totalPrice: MoneyData | null;
-        priceText: string | null;
-        hasPriceText: boolean;
-        isFree: boolean;
+        customPrice: string | null;
     }>;
     className?: string;
 }
 /**
  * Displays the line item total (total price after tax).
- * Shows priceText for CUSTOM rate type services, otherwise shows totalPrice.
+ * Shows customPrice for CUSTOM rate type services, otherwise shows totalPrice.
  *
  * @component
  * @example
@@ -326,15 +314,13 @@ export interface LineItemSubtotalProps {
     asChild?: boolean;
     children?: AsChildChildren<{
         subtotal: MoneyData | null;
-        priceText: string | null;
-        hasPriceText: boolean;
-        isFree: boolean;
+        customPrice: string | null;
     }>;
     className?: string;
 }
 /**
  * Displays the line item subtotal (full price before discounts).
- * Shows priceText for CUSTOM rate type services, otherwise shows subtotal.
+ * Shows customPrice for CUSTOM rate type services, otherwise shows subtotal.
  *
  * @component
  * @example

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

@@ -65,7 +65,7 @@ export const Root = React.forwardRef((props, ref) => {
 Root.displayName = 'Payment.Root';
 /**
  * Displays the payment subtotal.
- * Always displays the monetary value but exposes priceText, hasPriceText, and isFree for custom rendering.
+ * Always displays the monetary value. Exposes customPrice for custom rendering.
  *
  * @component
  * @example
@@ -75,10 +75,9 @@ Root.displayName = 'Payment.Root';
  * @example
  * ```tsx
  * <Payment.Subtotal asChild>
- *   {({ subtotal, priceText, hasPriceText, isFree }) => (
+ *   {({ subtotal, customPrice }) => (
  *     <div>
- *       <Money money={subtotal} />
- *       {hasPriceText && <span className="text-sm">({priceText})</span>}
+ *       {customPrice ? <span>{customPrice}</span> : <Money money={subtotal} />}
  *     </div>
  *   )}
  * </Payment.Subtotal>
@@ -86,7 +85,10 @@ Root.displayName = 'Payment.Root';
  */
 export const Subtotal = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CorePayment.Data, { children: ({ subtotal, priceText, hasPriceText, isFree }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentSubtotal, "data-has-price-text": hasPriceText, "data-is-free": isFree, customElement: children, customElementProps: { subtotal, priceText, hasPriceText, isFree }, children: subtotal && _jsx(Money, { money: subtotal }) })) }));
+    return (_jsx(CorePayment.Data, { children: ({ subtotal, customPrice }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentSubtotal, "data-has-custom-price": !!customPrice, customElement: children, customElementProps: {
+                subtotal,
+                customPrice,
+            }, children: subtotal && _jsx(Money, { money: subtotal }) })) }));
 });
 Subtotal.displayName = 'Payment.Subtotal';
 /**
@@ -121,7 +123,7 @@ export const Discount = React.forwardRef((props, ref) => {
 Discount.displayName = 'Payment.Discount';
 /**
  * Displays the payment total.
- * Always displays the monetary value but exposes priceText, hasPriceText, and isFree for custom rendering.
+ * Always displays the monetary value. Exposes customPrice for custom rendering.
  *
  * @component
  * @example
@@ -131,14 +133,9 @@ Discount.displayName = 'Payment.Discount';
  * @example
  * ```tsx
  * <Payment.Total asChild>
- *   {({ total, priceText, hasPriceText, isFree }) => (
+ *   {({ total, customPrice }) => (
  *     <div>
- *       {isFree ? (
- *         <span className="text-green-500">Free</span>
- *       ) : (
- *         <Money money={total} />
- *       )}
- *       {hasPriceText && <span className="text-sm">({priceText})</span>}
+ *       {customPrice ? <span>{customPrice}</span> : <Money money={total} />}
  *     </div>
  *   )}
  * </Payment.Total>
@@ -146,7 +143,10 @@ Discount.displayName = 'Payment.Discount';
  */
 export const Total = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CorePayment.Data, { children: ({ total, priceText, hasPriceText, isFree }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentTotal, "data-has-price-text": hasPriceText, "data-is-free": isFree, customElement: children, customElementProps: { total, priceText, hasPriceText, isFree }, children: total && _jsx(Money, { money: total }) })) }));
+    return (_jsx(CorePayment.Data, { children: ({ total, customPrice }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentTotal, "data-has-custom-price": !!customPrice, customElement: children, customElementProps: {
+                total,
+                customPrice,
+            }, children: total && _jsx(Money, { money: total }) })) }));
 });
 Total.displayName = 'Payment.Total';
 /**
@@ -261,7 +261,7 @@ export const LineItemRepeater = React.forwardRef((props, ref) => {
 LineItemRepeater.displayName = 'Payment.LineItemRepeater';
 /**
  * Displays the line item total (total price after tax).
- * Shows priceText for CUSTOM rate type services, otherwise shows totalPrice.
+ * Shows customPrice for CUSTOM rate type services, otherwise shows totalPrice.
  *
  * @component
  * @example
@@ -271,12 +271,12 @@ LineItemRepeater.displayName = 'Payment.LineItemRepeater';
  */
 export const LineItemTotal = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CorePayment.LineItemInfo, { children: ({ totalPrice, priceText, hasPriceText, isFree }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemTotal, "data-has-price-text": hasPriceText, "data-is-free": isFree, customElement: children, customElementProps: { totalPrice, priceText, hasPriceText, isFree }, children: priceText ? (_jsx("span", { children: priceText })) : (totalPrice && _jsx(Money, { money: totalPrice })) })) }));
+    return (_jsx(CorePayment.LineItemInfo, { children: ({ totalPrice, customPrice }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemTotal, "data-has-custom-price": !!customPrice, customElement: children, customElementProps: { totalPrice, customPrice }, children: customPrice ? (_jsx("span", { children: customPrice })) : (totalPrice && _jsx(Money, { money: totalPrice })) })) }));
 });
 LineItemTotal.displayName = 'Payment.LineItemTotal';
 /**
  * Displays the line item subtotal (full price before discounts).
- * Shows priceText for CUSTOM rate type services, otherwise shows subtotal.
+ * Shows customPrice for CUSTOM rate type services, otherwise shows subtotal.
  *
  * @component
  * @example
@@ -286,7 +286,7 @@ LineItemTotal.displayName = 'Payment.LineItemTotal';
  */
 export const LineItemSubtotal = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CorePayment.LineItemInfo, { children: ({ subtotal, priceText, hasPriceText, isFree }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemSubtotal, "data-has-price-text": hasPriceText, "data-is-free": isFree, customElement: children, customElementProps: { subtotal, priceText, hasPriceText, isFree }, children: priceText ? (_jsx("span", { children: priceText })) : (subtotal && _jsx(Money, { money: subtotal })) })) }));
+    return (_jsx(CorePayment.LineItemInfo, { children: ({ subtotal, customPrice }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemSubtotal, "data-has-custom-price": !!customPrice, customElement: children, customElementProps: { subtotal, customPrice }, children: customPrice ? (_jsx("span", { children: customPrice })) : (subtotal && _jsx(Money, { money: subtotal })) })) }));
 });
 LineItemSubtotal.displayName = 'Payment.LineItemSubtotal';
 /**

package/cjs/dist/services/booking/book-action/types.d.ts

@@ -44,7 +44,7 @@ export interface BookChildProps {
     isLoading: boolean;
     error: BookingError | null;
     canBook: boolean;
-    onClick: () => void;
+    onClick: () => Promise<void>;
     disabled: boolean;
 }
 /**
@@ -57,9 +57,17 @@ export interface BookProps {
     label?: string;
     loadingState?: string;
     disabled?: boolean;
+    /**
+     * Called when checkout is required for payment.
+     * The navigateToCheckout function has the checkoutId captured - just call it.
+     */
     onCheckout?: (result: {
-        checkoutId: string;
+        navigateToCheckout: () => void;
     }) => void;
+    /**
+     * Called when booking completes without requiring checkout (free/offline services).
+     * Receives the orderId which can be used to display confirmation or navigate to a thank you page.
+     */
     onComplete?: (result: {
         orderId: string;
     }) => void;

package/cjs/dist/services/payment/payment.def.d.ts

@@ -15,10 +15,8 @@ export type PaymentOption = 'FULL_PAYMENT_ONLINE' | 'FULL_PAYMENT_OFFLINE' | 'DE
 export interface LineItemAdditionalInfo {
     /** Line item ID to match with SDK's calculatedLineItems */
     lineItemId: string;
-    /** Custom price text (for CUSTOM rate type services) */
-    priceText?: string;
-    /** Whether this is a free service (NO_FEE rate type) */
-    isFree?: boolean;
+    /** Custom price (for CUSTOM rate type services) */
+    customPrice?: string;
 }
 /**
  * Payment calculation result with SDK response and additional computed info

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

@@ -20,11 +20,10 @@ const BOOKINGS_APP_DEF_ID = '13d21c63-b5ec-5912-8397-c3a5ddb27a97';
 // ============================================================================
 function getAdditionalInfo(service, lineItemId) {
     const payment = service.payment;
-    const priceText = payment?.rateType === RateType.CUSTOM && payment.custom?.description
+    const customPrice = payment?.rateType === RateType.CUSTOM && payment.custom?.description
         ? payment.custom.description
         : undefined;
-    const isFree = payment?.rateType === RateType.NO_FEE;
-    return { lineItemId, priceText, isFree };
+    return { lineItemId, customPrice };
 }
 function getPaymentOption(service, hasDeposit) {
     const options = service.payment?.options;

package/cjs/dist/utils/navigation.js

@@ -5,7 +5,8 @@ export async function navigateToCheckout(checkoutId) {
     const { redirectSession } = await redirects.createRedirectSession({
         ecomCheckout: { checkoutId },
         callbacks: {
-            postFlowUrl: window.location.href,
+            postFlowUrl: `${window.location.host}/booking/services`,
+            bookingsServiceListUrl: `${window.location.host}/booking/services`,
         },
     });
     if (redirectSession?.fullUrl) {

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

@@ -14,13 +14,19 @@ export interface BookProps {
     label?: string;
     loadingState?: string;
     disabled?: boolean;
+    /**
+     * Called when checkout is required for payment.
+     * The navigateToCheckout function already has the checkoutId captured - just call it to navigate.
+     */
     onCheckout?: (result: {
-        checkoutId: string;
-        navigateToCheckout: (checkoutId: string) => void;
+        navigateToCheckout: () => void;
     }) => void;
+    /**
+     * Called when booking completes without requiring checkout (free/offline services).
+     * Receives the orderId which can be used to display confirmation or navigate to a thank you page.
+     */
     onComplete?: (result: {
         orderId: string;
-        navigateToThankYou: (orderId: string) => void;
     }) => void;
     onError?: (error: BookingError) => void;
 }
@@ -29,20 +35,20 @@ export interface BookProps {
  *
  * @example
  * ```tsx
- * // Simple usage
+ * // Simple usage - uses default navigation
  * <Booking.Actions.Book />
  *
- * // With callbacks
+ * // With callbacks - navigateToCheckout has checkoutId captured
  * <Booking.Actions.Book
- *   onCheckout={({ checkoutId, navigateToCheckout }) => navigateToCheckout(checkoutId)}
- *   onComplete={({ orderId }) => router.push(`/thank-you?orderId=${orderId}`)}
+ *   onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
+ *   onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
  *   onError={(error) => console.error(error.message)}
  * />
  *
  * // With render function
  * <Booking.Actions.Book
- *   onCheckout={({ checkoutId, navigateToCheckout }) => navigateToCheckout(checkoutId)}
- *   onComplete={({ orderId }) => router.push(`/thank-you?orderId=${orderId}`)}
+ *   onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
+ *   onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
  * >
  *   {({ isLoading, error, canBook, onClick, disabled }) => (
  *     <button onClick={onClick} disabled={disabled}>
@@ -54,8 +60,8 @@ export interface BookProps {
  * // With asChild
  * <Booking.Actions.Book
  *   asChild
- *   onCheckout={({ checkoutId, navigateToCheckout }) => navigateToCheckout(checkoutId)}
- *   onComplete={({ orderId }) => router.push(`/thank-you?orderId=${orderId}`)}
+ *   onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
+ *   onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
  * >
  *   <CustomBookButton />
  * </Booking.Actions.Book>

package/dist/react/booking/Book.js

@@ -6,7 +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';
+import { navigateToCheckout as navigateToCheckoutUtil } from '../../utils/navigation.js';
 var TestIds;
 (function (TestIds) {
     TestIds["bookingActionBook"] = "booking-action-book";
@@ -16,20 +16,20 @@ var TestIds;
  *
  * @example
  * ```tsx
- * // Simple usage
+ * // Simple usage - uses default navigation
  * <Booking.Actions.Book />
  *
- * // With callbacks
+ * // With callbacks - navigateToCheckout has checkoutId captured
  * <Booking.Actions.Book
- *   onCheckout={({ checkoutId, navigateToCheckout }) => navigateToCheckout(checkoutId)}
- *   onComplete={({ orderId }) => router.push(`/thank-you?orderId=${orderId}`)}
+ *   onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
+ *   onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
  *   onError={(error) => console.error(error.message)}
  * />
  *
  * // With render function
  * <Booking.Actions.Book
- *   onCheckout={({ checkoutId, navigateToCheckout }) => navigateToCheckout(checkoutId)}
- *   onComplete={({ orderId }) => router.push(`/thank-you?orderId=${orderId}`)}
+ *   onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
+ *   onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
  * >
  *   {({ isLoading, error, canBook, onClick, disabled }) => (
  *     <button onClick={onClick} disabled={disabled}>
@@ -41,8 +41,8 @@ var TestIds;
  * // With asChild
  * <Booking.Actions.Book
  *   asChild
- *   onCheckout={({ checkoutId, navigateToCheckout }) => navigateToCheckout(checkoutId)}
- *   onComplete={({ orderId }) => router.push(`/thank-you?orderId=${orderId}`)}
+ *   onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
+ *   onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
  * >
  *   <CustomBookButton />
  * </Booking.Actions.Book>
@@ -51,14 +51,11 @@ 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: (result) => {
-            onCheckout?.({ ...result, navigateToCheckout });
-        }, onComplete: (result) => {
-            onComplete?.({
-                ...result,
-                navigateToThankYou: (orderId) => {
-                    console.log('navigateToThankYou', orderId);
-                },
+            onCheckout?.({
+                navigateToCheckout: () => navigateToCheckoutUtil(result.checkoutId),
             });
+        }, onComplete: (result) => {
+            onComplete?.({ orderId: result.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/booking/Booking.d.ts

@@ -44,10 +44,11 @@ export declare const Root: {
  * // Simple usage
  * <Booking.Actions.Book />
  *
- * // With callbacks
+ * // With callbacks - navigateToCheckout has checkoutId already captured
  * <Booking.Actions.Book
- *   onCheckoutRequired={({ checkoutId }) => router.push(`/checkout?id=${checkoutId}`)}
- *   onError={(error) => toast.error(error)}
+ *   onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
+ *   onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
+ *   onError={(error) => toast.error(error.message)}
  * />
  * ```
  */

package/dist/react/booking/Booking.js

@@ -60,10 +60,11 @@ Root.displayName = 'Booking.Root';
  * // Simple usage
  * <Booking.Actions.Book />
  *
- * // With callbacks
+ * // With callbacks - navigateToCheckout has checkoutId already captured
  * <Booking.Actions.Book
- *   onCheckoutRequired={({ checkoutId }) => router.push(`/checkout?id=${checkoutId}`)}
- *   onError={(error) => toast.error(error)}
+ *   onCheckout={({ navigateToCheckout }) => navigateToCheckout()}
+ *   onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
+ *   onError={(error) => toast.error(error.message)}
  * />
  * ```
  */

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

@@ -32,11 +32,21 @@ export interface BookProps {
  * Core Book component - provides book action data via render props.
  * Used internally by higher-level Booking.Actions.Book component.
  *
+ * The onCheckout callback receives the checkoutId for internal use.
+ * The high-level component wraps this to provide a simpler API with
+ * navigateToCheckout() that has the checkoutId already captured.
+ *
  * @example
  * ```tsx
  * <Book
- *   onCheckout={({ checkoutId }) => navigate(`/checkout?id=${checkoutId}`)}
- *   onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
+ *   onCheckout={({ checkoutId }) => {
+ *     // Use checkoutId to navigate to checkout
+ *     navigateToCheckout(checkoutId);
+ *   }}
+ *   onComplete={({ orderId }) => {
+ *     // Use orderId to navigate to thank you page
+ *     navigate(`/thank-you?orderId=${orderId}`);
+ *   }}
  * >
  *   {({ isLoading, error, canBook, onClick, disabled }) => (
  *     <button onClick={onClick} disabled={disabled}>

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

@@ -11,11 +11,21 @@ import { BookResultType, } from '../../../services/booking/book-action/types.js'
  * Core Book component - provides book action data via render props.
  * Used internally by higher-level Booking.Actions.Book component.
  *
+ * The onCheckout callback receives the checkoutId for internal use.
+ * The high-level component wraps this to provide a simpler API with
+ * navigateToCheckout() that has the checkoutId already captured.
+ *
  * @example
  * ```tsx
  * <Book
- *   onCheckout={({ checkoutId }) => navigate(`/checkout?id=${checkoutId}`)}
- *   onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
+ *   onCheckout={({ checkoutId }) => {
+ *     // Use checkoutId to navigate to checkout
+ *     navigateToCheckout(checkoutId);
+ *   }}
+ *   onComplete={({ orderId }) => {
+ *     // Use orderId to navigate to thank you page
+ *     navigate(`/thank-you?orderId=${orderId}`);
+ *   }}
  * >
  *   {({ isLoading, error, canBook, onClick, disabled }) => (
  *     <button onClick={onClick} disabled={disabled}>

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

@@ -59,9 +59,7 @@ export interface DataProps {
         discount: MoneyData | null;
         payNow: MoneyData | null;
         payLater: MoneyData | null;
-        priceText: string | null;
-        hasPriceText: boolean;
-        isFree: boolean;
+        customPrice: string | null;
         hasTax: boolean;
         hasDiscount: boolean;
         isDeposit: boolean;
@@ -93,10 +91,8 @@ export interface LineItem {
     discount: MoneyData | null;
     /** Deposit amount */
     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;
+    /** Custom price text (for CUSTOM rate type services) */
+    customPrice: string | null;
 }
 /**
  * Props for LineItems render prop component
@@ -180,9 +176,7 @@ export interface LineItemInfoProps {
         tax: MoneyData | null;
         discount: MoneyData | null;
         deposit: MoneyData | null;
-        priceText: string | null;
-        hasPriceText: boolean;
-        isFree: boolean;
+        customPrice: string | null;
         hasDiscount: boolean;
         hasDeposit: boolean;
     }) => React.ReactNode;
@@ -195,9 +189,9 @@ export interface LineItemInfoProps {
  * @example
  * ```tsx
  * <LineItemInfo>
- *   {({ totalPrice, priceText, lineItem }) => (
+ *   {({ totalPrice, customPrice, lineItem }) => (
  *     <div>
- *       {priceText ? <span>{priceText}</span> : <Money money={totalPrice} />}
+ *       {customPrice ? <span>{customPrice}</span> : <Money money={totalPrice} />}
  *     </div>
  *   )}
  * </LineItemInfo>

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

@@ -77,13 +77,10 @@ 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 and isFree from first line item (single service mode)
+    // Get customPrice from first line item (single service mode)
     const additionalInfoList = paymentDetails?.additionalInfo?.lineItems || [];
     const firstLineItemInfo = additionalInfoList[0];
-    const priceText = firstLineItemInfo?.priceText || null;
-    const hasPriceText = !!priceText;
-    // Use isFree from service (NO_FEE rate type) if available, otherwise fallback to amount check
-    const isFree = firstLineItemInfo?.isFree ?? false;
+    const customPrice = firstLineItemInfo?.customPrice || null;
     // Computed flags
     const hasTax = tax !== null && tax.amount > 0;
     const hasDiscount = discount !== null && discount.amount > 0;
@@ -95,9 +92,7 @@ export function Data(props) {
         discount,
         payNow,
         payLater,
-        priceText,
-        hasPriceText,
-        isFree,
+        customPrice,
         hasTax,
         hasDiscount,
         isDeposit,
@@ -145,8 +140,7 @@ export function LineItems(props) {
             tax: convertMultiCurrencyPriceToMoneyData(pricesBreakdown?.taxDetails?.totalTax, currency),
             discount: convertMultiCurrencyPriceToMoneyData(pricesBreakdown?.totalDiscount, currency),
             deposit: convertMultiCurrencyPriceToMoneyData(pricesBreakdown?.depositAmount, currency),
-            priceText: additionalInfo?.priceText || null,
-            isFree: additionalInfo?.isFree ?? false,
+            customPrice: additionalInfo?.customPrice || null,
         };
     });
     const hasLineItems = lineItems.length > 0;
@@ -202,9 +196,9 @@ export function LineItemProvider(props) {
  * @example
  * ```tsx
  * <LineItemInfo>
- *   {({ totalPrice, priceText, lineItem }) => (
+ *   {({ totalPrice, customPrice, lineItem }) => (
  *     <div>
- *       {priceText ? <span>{priceText}</span> : <Money money={totalPrice} />}
+ *       {customPrice ? <span>{customPrice}</span> : <Money money={totalPrice} />}
  *     </div>
  *   )}
  * </LineItemInfo>
@@ -213,7 +207,6 @@ export function LineItemProvider(props) {
 export function LineItemInfo(props) {
     const { lineItem, currency } = useLineItemContext();
     // Computed flags
-    const hasPriceText = !!lineItem.priceText;
     const hasDiscount = lineItem.discount !== null && lineItem.discount.amount > 0;
     const hasDeposit = lineItem.deposit !== null && lineItem.deposit.amount > 0;
     return props.children({
@@ -224,9 +217,7 @@ export function LineItemInfo(props) {
         tax: lineItem.tax,
         discount: lineItem.discount,
         deposit: lineItem.deposit,
-        priceText: lineItem.priceText,
-        hasPriceText,
-        isFree: lineItem.isFree,
+        customPrice: lineItem.customPrice,
         hasDiscount,
         hasDeposit,
     });

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

@@ -63,15 +63,13 @@ export interface SubtotalProps {
     asChild?: boolean;
     children?: AsChildChildren<{
         subtotal: MoneyData | null;
-        priceText: string | null;
-        hasPriceText: boolean;
-        isFree: boolean;
+        customPrice: string | null;
     }>;
     className?: string;
 }
 /**
  * Displays the payment subtotal.
- * Always displays the monetary value but exposes priceText, hasPriceText, and isFree for custom rendering.
+ * Always displays the monetary value. Exposes customPrice for custom rendering.
  *
  * @component
  * @example
@@ -81,10 +79,9 @@ export interface SubtotalProps {
  * @example
  * ```tsx
  * <Payment.Subtotal asChild>
- *   {({ subtotal, priceText, hasPriceText, isFree }) => (
+ *   {({ subtotal, customPrice }) => (
  *     <div>
- *       <Money money={subtotal} />
- *       {hasPriceText && <span className="text-sm">({priceText})</span>}
+ *       {customPrice ? <span>{customPrice}</span> : <Money money={subtotal} />}
  *     </div>
  *   )}
  * </Payment.Subtotal>
@@ -140,15 +137,13 @@ export interface TotalProps {
     asChild?: boolean;
     children?: AsChildChildren<{
         total: MoneyData | null;
-        priceText: string | null;
-        hasPriceText: boolean;
-        isFree: boolean;
+        customPrice: string | null;
     }>;
     className?: string;
 }
 /**
  * Displays the payment total.
- * Always displays the monetary value but exposes priceText, hasPriceText, and isFree for custom rendering.
+ * Always displays the monetary value. Exposes customPrice for custom rendering.
  *
  * @component
  * @example
@@ -158,14 +153,9 @@ export interface TotalProps {
  * @example
  * ```tsx
  * <Payment.Total asChild>
- *   {({ total, priceText, hasPriceText, isFree }) => (
+ *   {({ total, customPrice }) => (
  *     <div>
- *       {isFree ? (
- *         <span className="text-green-500">Free</span>
- *       ) : (
- *         <Money money={total} />
- *       )}
- *       {hasPriceText && <span className="text-sm">({priceText})</span>}
+ *       {customPrice ? <span>{customPrice}</span> : <Money money={total} />}
  *     </div>
  *   )}
  * </Payment.Total>
@@ -302,15 +292,13 @@ export interface LineItemTotalProps {
     asChild?: boolean;
     children?: AsChildChildren<{
         totalPrice: MoneyData | null;
-        priceText: string | null;
-        hasPriceText: boolean;
-        isFree: boolean;
+        customPrice: string | null;
     }>;
     className?: string;
 }
 /**
  * Displays the line item total (total price after tax).
- * Shows priceText for CUSTOM rate type services, otherwise shows totalPrice.
+ * Shows customPrice for CUSTOM rate type services, otherwise shows totalPrice.
  *
  * @component
  * @example
@@ -326,15 +314,13 @@ export interface LineItemSubtotalProps {
     asChild?: boolean;
     children?: AsChildChildren<{
         subtotal: MoneyData | null;
-        priceText: string | null;
-        hasPriceText: boolean;
-        isFree: boolean;
+        customPrice: string | null;
     }>;
     className?: string;
 }
 /**
  * Displays the line item subtotal (full price before discounts).
- * Shows priceText for CUSTOM rate type services, otherwise shows subtotal.
+ * Shows customPrice for CUSTOM rate type services, otherwise shows subtotal.
  *
  * @component
  * @example

package/dist/react/payment/Payment.js

@@ -65,7 +65,7 @@ export const Root = React.forwardRef((props, ref) => {
 Root.displayName = 'Payment.Root';
 /**
  * Displays the payment subtotal.
- * Always displays the monetary value but exposes priceText, hasPriceText, and isFree for custom rendering.
+ * Always displays the monetary value. Exposes customPrice for custom rendering.
  *
  * @component
  * @example
@@ -75,10 +75,9 @@ Root.displayName = 'Payment.Root';
  * @example
  * ```tsx
  * <Payment.Subtotal asChild>
- *   {({ subtotal, priceText, hasPriceText, isFree }) => (
+ *   {({ subtotal, customPrice }) => (
  *     <div>
- *       <Money money={subtotal} />
- *       {hasPriceText && <span className="text-sm">({priceText})</span>}
+ *       {customPrice ? <span>{customPrice}</span> : <Money money={subtotal} />}
  *     </div>
  *   )}
  * </Payment.Subtotal>
@@ -86,7 +85,10 @@ Root.displayName = 'Payment.Root';
  */
 export const Subtotal = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CorePayment.Data, { children: ({ subtotal, priceText, hasPriceText, isFree }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentSubtotal, "data-has-price-text": hasPriceText, "data-is-free": isFree, customElement: children, customElementProps: { subtotal, priceText, hasPriceText, isFree }, children: subtotal && _jsx(Money, { money: subtotal }) })) }));
+    return (_jsx(CorePayment.Data, { children: ({ subtotal, customPrice }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentSubtotal, "data-has-custom-price": !!customPrice, customElement: children, customElementProps: {
+                subtotal,
+                customPrice,
+            }, children: subtotal && _jsx(Money, { money: subtotal }) })) }));
 });
 Subtotal.displayName = 'Payment.Subtotal';
 /**
@@ -121,7 +123,7 @@ export const Discount = React.forwardRef((props, ref) => {
 Discount.displayName = 'Payment.Discount';
 /**
  * Displays the payment total.
- * Always displays the monetary value but exposes priceText, hasPriceText, and isFree for custom rendering.
+ * Always displays the monetary value. Exposes customPrice for custom rendering.
  *
  * @component
  * @example
@@ -131,14 +133,9 @@ Discount.displayName = 'Payment.Discount';
  * @example
  * ```tsx
  * <Payment.Total asChild>
- *   {({ total, priceText, hasPriceText, isFree }) => (
+ *   {({ total, customPrice }) => (
  *     <div>
- *       {isFree ? (
- *         <span className="text-green-500">Free</span>
- *       ) : (
- *         <Money money={total} />
- *       )}
- *       {hasPriceText && <span className="text-sm">({priceText})</span>}
+ *       {customPrice ? <span>{customPrice}</span> : <Money money={total} />}
  *     </div>
  *   )}
  * </Payment.Total>
@@ -146,7 +143,10 @@ Discount.displayName = 'Payment.Discount';
  */
 export const Total = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CorePayment.Data, { children: ({ total, priceText, hasPriceText, isFree }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentTotal, "data-has-price-text": hasPriceText, "data-is-free": isFree, customElement: children, customElementProps: { total, priceText, hasPriceText, isFree }, children: total && _jsx(Money, { money: total }) })) }));
+    return (_jsx(CorePayment.Data, { children: ({ total, customPrice }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentTotal, "data-has-custom-price": !!customPrice, customElement: children, customElementProps: {
+                total,
+                customPrice,
+            }, children: total && _jsx(Money, { money: total }) })) }));
 });
 Total.displayName = 'Payment.Total';
 /**
@@ -261,7 +261,7 @@ export const LineItemRepeater = React.forwardRef((props, ref) => {
 LineItemRepeater.displayName = 'Payment.LineItemRepeater';
 /**
  * Displays the line item total (total price after tax).
- * Shows priceText for CUSTOM rate type services, otherwise shows totalPrice.
+ * Shows customPrice for CUSTOM rate type services, otherwise shows totalPrice.
  *
  * @component
  * @example
@@ -271,12 +271,12 @@ LineItemRepeater.displayName = 'Payment.LineItemRepeater';
  */
 export const LineItemTotal = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CorePayment.LineItemInfo, { children: ({ totalPrice, priceText, hasPriceText, isFree }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemTotal, "data-has-price-text": hasPriceText, "data-is-free": isFree, customElement: children, customElementProps: { totalPrice, priceText, hasPriceText, isFree }, children: priceText ? (_jsx("span", { children: priceText })) : (totalPrice && _jsx(Money, { money: totalPrice })) })) }));
+    return (_jsx(CorePayment.LineItemInfo, { children: ({ totalPrice, customPrice }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemTotal, "data-has-custom-price": !!customPrice, customElement: children, customElementProps: { totalPrice, customPrice }, children: customPrice ? (_jsx("span", { children: customPrice })) : (totalPrice && _jsx(Money, { money: totalPrice })) })) }));
 });
 LineItemTotal.displayName = 'Payment.LineItemTotal';
 /**
  * Displays the line item subtotal (full price before discounts).
- * Shows priceText for CUSTOM rate type services, otherwise shows subtotal.
+ * Shows customPrice for CUSTOM rate type services, otherwise shows subtotal.
  *
  * @component
  * @example
@@ -286,7 +286,7 @@ LineItemTotal.displayName = 'Payment.LineItemTotal';
  */
 export const LineItemSubtotal = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CorePayment.LineItemInfo, { children: ({ subtotal, priceText, hasPriceText, isFree }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemSubtotal, "data-has-price-text": hasPriceText, "data-is-free": isFree, customElement: children, customElementProps: { subtotal, priceText, hasPriceText, isFree }, children: priceText ? (_jsx("span", { children: priceText })) : (subtotal && _jsx(Money, { money: subtotal })) })) }));
+    return (_jsx(CorePayment.LineItemInfo, { children: ({ subtotal, customPrice }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemSubtotal, "data-has-custom-price": !!customPrice, customElement: children, customElementProps: { subtotal, customPrice }, children: customPrice ? (_jsx("span", { children: customPrice })) : (subtotal && _jsx(Money, { money: subtotal })) })) }));
 });
 LineItemSubtotal.displayName = 'Payment.LineItemSubtotal';
 /**

package/dist/services/booking/book-action/types.d.ts

@@ -44,7 +44,7 @@ export interface BookChildProps {
     isLoading: boolean;
     error: BookingError | null;
     canBook: boolean;
-    onClick: () => void;
+    onClick: () => Promise<void>;
     disabled: boolean;
 }
 /**
@@ -57,9 +57,17 @@ export interface BookProps {
     label?: string;
     loadingState?: string;
     disabled?: boolean;
+    /**
+     * Called when checkout is required for payment.
+     * The navigateToCheckout function has the checkoutId captured - just call it.
+     */
     onCheckout?: (result: {
-        checkoutId: string;
+        navigateToCheckout: () => void;
     }) => void;
+    /**
+     * Called when booking completes without requiring checkout (free/offline services).
+     * Receives the orderId which can be used to display confirmation or navigate to a thank you page.
+     */
     onComplete?: (result: {
         orderId: string;
     }) => void;

package/dist/services/payment/payment.def.d.ts

@@ -15,10 +15,8 @@ export type PaymentOption = 'FULL_PAYMENT_ONLINE' | 'FULL_PAYMENT_OFFLINE' | 'DE
 export interface LineItemAdditionalInfo {
     /** Line item ID to match with SDK's calculatedLineItems */
     lineItemId: string;
-    /** Custom price text (for CUSTOM rate type services) */
-    priceText?: string;
-    /** Whether this is a free service (NO_FEE rate type) */
-    isFree?: boolean;
+    /** Custom price (for CUSTOM rate type services) */
+    customPrice?: string;
 }
 /**
  * Payment calculation result with SDK response and additional computed info

package/dist/services/payment/payment.js

@@ -20,11 +20,10 @@ const BOOKINGS_APP_DEF_ID = '13d21c63-b5ec-5912-8397-c3a5ddb27a97';
 // ============================================================================
 function getAdditionalInfo(service, lineItemId) {
     const payment = service.payment;
-    const priceText = payment?.rateType === RateType.CUSTOM && payment.custom?.description
+    const customPrice = payment?.rateType === RateType.CUSTOM && payment.custom?.description
         ? payment.custom.description
         : undefined;
-    const isFree = payment?.rateType === RateType.NO_FEE;
-    return { lineItemId, priceText, isFree };
+    return { lineItemId, customPrice };
 }
 function getPaymentOption(service, hasDeposit) {
     const options = service.payment?.options;

package/dist/utils/navigation.js

@@ -5,7 +5,8 @@ export async function navigateToCheckout(checkoutId) {
     const { redirectSession } = await redirects.createRedirectSession({
         ecomCheckout: { checkoutId },
         callbacks: {
-            postFlowUrl: window.location.href,
+            postFlowUrl: `${window.location.host}/booking/services`,
+            bookingsServiceListUrl: `${window.location.host}/booking/services`,
         },
     });
     if (redirectSession?.fullUrl) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-bookings",
-  "version": "0.0.66",
+  "version": "0.0.68",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -72,5 +72,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "cdf272bf09b943d1c3a3edba1a82225f2117165605b07f82878cc26c"
+  "falconPackageHash": "3b008d24daecb8e73bbbb513fa6c77a3915d21d91e398a5574be74a6"
 }