@wix/headless-bookings 0.0.65 → 0.0.67

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 }) => router.push(`/checkout?id=${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 }) => router.push(`/checkout?id=${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 }) => router.push(`/checkout?id=${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 }) => router.push(`/checkout?id=${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 }) => router.push(`/checkout?id=${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 }) => router.push(`/checkout?id=${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/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/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 }) => router.push(`/checkout?id=${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 }) => router.push(`/checkout?id=${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 }) => router.push(`/checkout?id=${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 }) => router.push(`/checkout?id=${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 }) => router.push(`/checkout?id=${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 }) => router.push(`/checkout?id=${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/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/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.65",
+  "version": "0.0.67",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -72,5 +72,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "a7381beae4b122c7bdbd9d7b7f4079f31688f2a11cd3c6d246e683c5"
+  "falconPackageHash": "f753dc96a84c513f1de40c287b7dca7b153ceea1706ec4a28ee69f97"
 }