/** * Book - High-level headless component for the book action button * Wraps core Book with AsChildSlot pattern for customization */ import React from 'react'; import type { BookChildProps, BookingError } from '../../services/booking/book-action/types.js'; export declare const TestIds: { readonly bookingActionBook: "booking-action-book"; }; /** * Props for the high-level Book component */ export interface BookProps extends Omit, 'children' | 'disabled' | 'onError' | 'onClick'> { asChild?: boolean; children?: React.ReactNode | ((props: BookChildProps) => React.ReactNode); label?: string; loadingState?: React.ReactNode; disabled?: boolean; /** * Called when checkout is required for payment. * Receives navigateToCheckout function that accepts postFlowUrl. * The navigateToCheckout function already has the checkoutId captured - just call it to navigate. * * To keep loading active during navigation, return navigateToCheckout(): * `onCheckout={(navigateToCheckout) => navigateToCheckout({ postFlowUrl: '/thank-you' })}` */ onCheckout?: (navigateToCheckout: (options: { postFlowUrl: string; }) => Promise) => void | Promise; /** * 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. * * Return a Promise to keep loading active until it resolves. */ onComplete?: (result: { orderId: string; }) => void | Promise; onError?: (error: BookingError) => void; onClick?: (data: BookChildProps) => void; } /** * Book action button component with AsChildSlot pattern. * * Loading state flow: * 1. User clicks → loading during booking API call * 2. Booking completes → onCheckout/onComplete callback is awaited * 3. If callback returns navigateToCheckout() → loading stays until navigation * 4. If callback returns void → loading stops immediately * * @example * ```tsx * // Basic usage - call navigateToCheckout when ready * navigateToCheckout({ postFlowUrl: '/thank-you' })} * /> * * // With callbacks * navigateToCheckout({ postFlowUrl: '/thank-you' })} * onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)} * onError={(error) => console.error(error.message)} * /> * * // With render function * navigateToCheckout({ postFlowUrl: '/thank-you' })} * onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)} * > * {({ isLoading, error, canBook, onClick, disabled }) => ( * * )} * * * // With asChild * navigateToCheckout({ postFlowUrl: '/thank-you' })} * onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)} * > * * * ``` */ export declare const Book: React.ForwardRefExoticComponent>;