/**
* Booking - High-level component for managing bookings
* Provides root component for booking context and booking item display components
*/
import React from 'react';
import * as CoreBooking from '../core/booking/Booking.js';
import type { BookingServiceConfig } from '../../services/booking/booking.js';
export type { BookingData, DataProps, BookingItem, } from '../core/booking/Booking.js';
export declare const TestIds: {
readonly bookingItemsRoot: "booking-items-root";
readonly bookingItems: "booking-items";
readonly bookingItem: "booking-item";
readonly bookingItemService: "booking-item-service";
readonly bookingItemTimeSlot: "booking-item-time-slot";
readonly bookingItemPayment: "booking-item-payment";
readonly bookingLocation: "booking-location";
readonly bookingStaffName: "booking-staff-name";
};
/**
* Props for Booking.Root component
*/
export interface BookingRootProps {
children: React.ReactNode;
bookingServiceConfig?: BookingServiceConfig;
}
/**
* Root component that provides booking context to the entire app.
*
* @order 1
* @component
* @example
* ```tsx
* import { Booking } from '@wix/bookings/components';
*
* function App() {
* return (
*
* {children}
*
* );
* }
* ```
*/
export declare const Root: {
(props: BookingRootProps): React.ReactNode;
displayName: string;
};
/**
* Actions namespace containing action components for booking
*
* @example
* ```tsx
* // Simple usage
*
*
* // With callbacks - navigateToCheckout has checkoutId captured, triggers loading when called
* navigateToCheckout({ postFlowUrl: '/thank-you' })}
* onComplete={({ orderId }) => navigate(`/thank-you?orderId=${orderId}`)}
* onError={(error) => toast.error(error.message)}
* />
* ```
*/
export declare const Actions: {
Book: React.ForwardRefExoticComponent>;
};
/**
* Hook to access the current BookingItem from context.
* Must be used within Booking.BookingItemRepeater.
*
* @throws Error if used outside of BookingItemRepeater context
*/
export declare const useBookingItem: typeof CoreBooking.useBookingItemContext;
/**
* Props for Booking.BookingItems component
*/
export interface BookingItemsProps {
children: React.ReactNode;
/** Content to render when there are no booking items */
emptyState?: React.ReactNode;
className?: string;
}
/**
* Container component for booking items with emptyState support.
* Provides GenericList context and renders items.
*
* @component
* @example
* ```tsx
* No bookings selected}>
*
*
*
*
*
*
* ```
*/
export declare const BookingItems: React.ForwardRefExoticComponent>;
/**
* Props for Booking.BookingItemRepeater component
*/
export interface BookingItemRepeaterProps {
children: React.ReactNode;
}
/**
* Repeater component that maps over booking items and provides context per item.
* Uses GenericList.Repeater internally with itemWrapper that provides BookingItemContext.
* Children have access to BookingItem.Service, BookingItem.TimeSlot, etc.
*
* @component
* @example
* ```tsx
*
*
*
*
*
*
*
*
*
*
*
*
* ```
*/
export declare const BookingItemRepeater: React.ForwardRefExoticComponent>;
/**
* Props for Booking.Payment component
*/
export interface BookingPaymentProps {
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.).
* Supports asChild to expose { isLoading, hasError } to children.
*
* @component
* @example
* ```tsx
* // Standard usage
*
*
*
*
*
* // With asChild to access isLoading
*
* {({ isLoading }) => isLoading ? : }
*
* ```
*/
export declare function Payment(props: BookingPaymentProps): React.ReactNode;
/**
* Props for Booking.Location component
*/
export interface BookingLocationProps {
children: React.ReactNode;
}
/**
* Wraps Location context with the location from the booking context.
* Children can use all Location.* components (Location.Name, Location.Address, etc.).
* Returns null if no location is set.
*
* @component
* @example
* ```tsx
*
*
*
*
*
* ```
*/
export declare function Location(props: BookingLocationProps): React.ReactNode;