@wix/headless-bookings 0.0.50 → 0.0.52

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

@@ -1,10 +1,12 @@
 /**
  * Booking - High-level component for managing bookings
- * Provides root component for booking context
+ * 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 } from '../core/booking/Booking.js';
+import { type AsChildChildren } from '@wix/headless-utils/react';
+export type { BookingData, DataProps, BookingItem, } from '../core/booking/Booking.js';
 /**
  * Props for Booking.Root component
  */
@@ -52,3 +54,212 @@ export declare const Root: {
 export declare const Actions: {
     Book: React.ForwardRefExoticComponent<import("./Book.js").BookProps & React.RefAttributes<HTMLButtonElement>>;
 };
+/**
+ * Hook to access the current BookingItem from context.
+ * Must be used within Booking.ItemRepeater.
+ *
+ * @throws Error if used outside of ItemRepeater context
+ */
+export declare const useBookingItem: typeof CoreBooking.useBookingItemContext;
+/**
+ * Props for Booking.ItemsRoot component (Container Level)
+ */
+export interface ItemsRootProps {
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * Container component that provides GenericList.Root context for booking items.
+ * Use Booking.Items inside for list container with emptyState support.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Booking.ItemsRoot>
+ *   <Booking.Items emptyState={<div>No bookings selected</div>}>
+ *     <Booking.ItemRepeater>
+ *       <div className="booking-card">
+ *         <Booking.Service>
+ *           <Service.Name />
+ *         </Booking.Service>
+ *       </div>
+ *     </Booking.ItemRepeater>
+ *   </Booking.Items>
+ * </Booking.ItemsRoot>
+ * ```
+ */
+export declare const ItemsRoot: React.ForwardRefExoticComponent<ItemsRootProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Props for Booking.Items component (List Container Level)
+ */
+export interface ItemsProps {
+    children: React.ReactNode;
+    /** Content to render when there are no booking items */
+    emptyState?: React.ReactNode;
+    className?: string;
+}
+/**
+ * List container component with emptyState support.
+ * Wraps GenericList.Items. Must be used within Booking.ItemsRoot.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Booking.ItemsRoot>
+ *   <Booking.Items emptyState={<div>No bookings selected</div>}>
+ *     <Booking.ItemRepeater>
+ *       <Booking.Service>
+ *         <Service.Name />
+ *       </Booking.Service>
+ *     </Booking.ItemRepeater>
+ *   </Booking.Items>
+ * </Booking.ItemsRoot>
+ * ```
+ */
+export declare const Items: React.ForwardRefExoticComponent<ItemsProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Booking.ItemRepeater component
+ */
+export interface ItemRepeaterProps {
+    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 Booking.Service, Booking.TimeSlot, etc.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Booking.ItemRepeater>
+ *   <div className="booking-card">
+ *     <Booking.Service>
+ *       <Service.Name />
+ *       <Service.Price />
+ *     </Booking.Service>
+ *     <Booking.TimeSlot>
+ *       <TimeSlot.StartDate />
+ *     </Booking.TimeSlot>
+ *     <Booking.StaffName />
+ *   </div>
+ * </Booking.ItemRepeater>
+ * ```
+ */
+export declare const ItemRepeater: React.ForwardRefExoticComponent<ItemRepeaterProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Booking.Service component
+ */
+export interface BookingServiceProps {
+    children: React.ReactNode;
+}
+/**
+ * Wraps Service.Root with the service from the current booking item context.
+ * Children can use all Service.* components (Service.Name, Service.Price, etc.).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Booking.Service>
+ *   <Service.Name className="text-xl font-bold" />
+ *   <Service.Description />
+ *   <Service.Price />
+ * </Booking.Service>
+ * ```
+ */
+export declare function Service(props: BookingServiceProps): React.ReactNode;
+/**
+ * Props for Booking.TimeSlot component
+ */
+export interface BookingTimeSlotProps {
+    children: React.ReactNode;
+}
+/**
+ * Wraps TimeSlot.Root with the timeSlot from the current booking item context.
+ * Children can use all TimeSlot.* components (TimeSlot.StartDate, TimeSlot.Duration, etc.).
+ * Always renders with data-has-time-slot attribute for CSS targeting.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Booking.TimeSlot>
+ *   <TimeSlot.StartDate />
+ *   <TimeSlot.Duration />
+ * </Booking.TimeSlot>
+ * ```
+ */
+export declare function TimeSlot(props: BookingTimeSlotProps): React.ReactNode;
+/**
+ * Props for Booking.Payment component
+ */
+export interface BookingPaymentProps {
+    children: React.ReactNode;
+}
+/**
+ * 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.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Booking.Root>
+ *   <Booking.ItemsRoot>
+ *     <Booking.Items>
+ *       <Booking.ItemRepeater>
+ *         <Booking.Service><Service.Name /></Booking.Service>
+ *       </Booking.ItemRepeater>
+ *     </Booking.Items>
+ *   </Booking.ItemsRoot>
+ *
+ *   <Booking.Payment>
+ *     <Payment.Total className="text-xl font-bold" />
+ *     <Payment.Subtotal />
+ *   </Booking.Payment>
+ * </Booking.Root>
+ * ```
+ */
+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
+ * <Booking.Location>
+ *   <Location.Name className="font-bold" />
+ *   <Location.Address />
+ *   <Location.Phone />
+ * </Booking.Location>
+ * ```
+ */
+export declare function Location(props: BookingLocationProps): React.ReactNode;
+/**
+ * Props for Booking.StaffName component
+ */
+export interface StaffNameProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        name: string;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the first staff member's name from the current booking item.
+ * Returns null when staff name is empty.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Booking.StaffName className="text-foreground" />
+ * ```
+ */
+export declare const StaffName: React.ForwardRefExoticComponent<StaffNameProps & React.RefAttributes<HTMLElement>>;

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

@@ -1,6 +1,31 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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 { Book } from './Book.js';
+import { AsChildSlot } from '@wix/headless-utils/react';
+import * as ServiceComponent from '../service/Service.js';
+import * as TimeSlotComponent from '../time-slot-list/TimeSlot.js';
+import * as PaymentComponent from '../payment/Payment.js';
+import * as CoreLocation from '../core/location/Location.js';
+import { GenericList } from '@wix/headless-components/react';
+// ============================================================================
+// TestIds
+// ============================================================================
+var TestIds;
+(function (TestIds) {
+    TestIds["bookingItemsRoot"] = "booking-items-root";
+    TestIds["bookingItems"] = "booking-items";
+    TestIds["bookingItem"] = "booking-item";
+    TestIds["bookingItemService"] = "booking-item-service";
+    TestIds["bookingItemTimeSlot"] = "booking-item-time-slot";
+    TestIds["bookingItemPayment"] = "booking-item-payment";
+    TestIds["bookingLocation"] = "booking-location";
+    TestIds["bookingStaffName"] = "booking-staff-name";
+})(TestIds || (TestIds = {}));
 /**
  * Root component that provides booking context to the entire app.
  *
@@ -24,6 +49,9 @@ export const Root = (props) => {
     return (_jsx(CoreBooking.Root, { bookingServiceConfig: bookingServiceConfig, children: children }));
 };
 Root.displayName = 'Booking.Root';
+// ============================================================================
+// Actions Namespace
+// ============================================================================
 /**
  * Actions namespace containing action components for booking
  *
@@ -42,3 +70,201 @@ Root.displayName = 'Booking.Root';
 export const Actions = {
     Book,
 };
+// ============================================================================
+// BookingItem Context (re-export from core)
+// ============================================================================
+/**
+ * Hook to access the current BookingItem from context.
+ * Must be used within Booking.ItemRepeater.
+ *
+ * @throws Error if used outside of ItemRepeater context
+ */
+export const useBookingItem = CoreBooking.useBookingItemContext;
+/**
+ * Container component that provides GenericList.Root context for booking items.
+ * Use Booking.Items inside for list container with emptyState support.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Booking.ItemsRoot>
+ *   <Booking.Items emptyState={<div>No bookings selected</div>}>
+ *     <Booking.ItemRepeater>
+ *       <div className="booking-card">
+ *         <Booking.Service>
+ *           <Service.Name />
+ *         </Booking.Service>
+ *       </div>
+ *     </Booking.ItemRepeater>
+ *   </Booking.Items>
+ * </Booking.ItemsRoot>
+ * ```
+ */
+export const ItemsRoot = React.forwardRef((props, ref) => {
+    const { children, ...otherProps } = props;
+    return (_jsx(CoreBooking.ItemsData, { children: ({ items }) => (_jsx(GenericList.Root, { ref: ref, items: items.map((item) => ({
+                ...item,
+                id: item.instanceId,
+            })), hasMore: false, isLoading: false, "data-testid": TestIds.bookingItemsRoot, ...otherProps, children: children })) }));
+});
+ItemsRoot.displayName = 'Booking.ItemsRoot';
+/**
+ * List container component with emptyState support.
+ * Wraps GenericList.Items. Must be used within Booking.ItemsRoot.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Booking.ItemsRoot>
+ *   <Booking.Items emptyState={<div>No bookings selected</div>}>
+ *     <Booking.ItemRepeater>
+ *       <Booking.Service>
+ *         <Service.Name />
+ *       </Booking.Service>
+ *     </Booking.ItemRepeater>
+ *   </Booking.Items>
+ * </Booking.ItemsRoot>
+ * ```
+ */
+export const Items = React.forwardRef((props, ref) => {
+    const { children, ...otherProps } = props;
+    return (_jsx(GenericList.Items, { ref: ref, "data-testid": TestIds.bookingItems, ...otherProps, children: children }));
+});
+Items.displayName = 'Booking.Items';
+/**
+ * Internal component that wraps each booking item with context provider.
+ */
+const BookingItemWrapper = ({ item, children, }) => {
+    return (_jsx(CoreBooking.BookingItemProvider, { item: item, children: children }));
+};
+/**
+ * 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 Booking.Service, Booking.TimeSlot, etc.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Booking.ItemRepeater>
+ *   <div className="booking-card">
+ *     <Booking.Service>
+ *       <Service.Name />
+ *       <Service.Price />
+ *     </Booking.Service>
+ *     <Booking.TimeSlot>
+ *       <TimeSlot.StartDate />
+ *     </Booking.TimeSlot>
+ *     <Booking.StaffName />
+ *   </div>
+ * </Booking.ItemRepeater>
+ * ```
+ */
+export const ItemRepeater = React.forwardRef((props, ref) => {
+    const { children } = props;
+    return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: ({ item }) => (_jsx(BookingItemWrapper, { item: item, children: children }, item.instanceId)), children: undefined }));
+});
+ItemRepeater.displayName = 'Booking.ItemRepeater';
+/**
+ * Wraps Service.Root with the service from the current booking item context.
+ * Children can use all Service.* components (Service.Name, Service.Price, etc.).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Booking.Service>
+ *   <Service.Name className="text-xl font-bold" />
+ *   <Service.Description />
+ *   <Service.Price />
+ * </Booking.Service>
+ * ```
+ */
+export function Service(props) {
+    const { children } = props;
+    return (_jsx(CoreBooking.BookingItemInfo, { children: ({ service }) => (_jsx(ServiceComponent.Root, { service: service, children: children })) }));
+}
+/**
+ * Wraps TimeSlot.Root with the timeSlot from the current booking item context.
+ * Children can use all TimeSlot.* components (TimeSlot.StartDate, TimeSlot.Duration, etc.).
+ * Always renders with data-has-time-slot attribute for CSS targeting.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Booking.TimeSlot>
+ *   <TimeSlot.StartDate />
+ *   <TimeSlot.Duration />
+ * </Booking.TimeSlot>
+ * ```
+ */
+export function TimeSlot(props) {
+    const { children } = props;
+    return (_jsx(CoreBooking.BookingItemInfo, { children: ({ timeSlot }) => timeSlot ? (_jsx(TimeSlotComponent.Root, { timeSlot: timeSlot, children: children })) : null }));
+}
+/**
+ * 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.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Booking.Root>
+ *   <Booking.ItemsRoot>
+ *     <Booking.Items>
+ *       <Booking.ItemRepeater>
+ *         <Booking.Service><Service.Name /></Booking.Service>
+ *       </Booking.ItemRepeater>
+ *     </Booking.Items>
+ *   </Booking.ItemsRoot>
+ *
+ *   <Booking.Payment>
+ *     <Payment.Total className="text-xl font-bold" />
+ *     <Payment.Subtotal />
+ *   </Booking.Payment>
+ * </Booking.Root>
+ * ```
+ */
+export function Payment(props) {
+    const { children } = props;
+    return (_jsx(CoreBooking.PaymentData, { children: ({ slotServices }) => (_jsx(PaymentComponent.Root, { slotServices: slotServices, children: children })) }));
+}
+/**
+ * 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
+ * <Booking.Location>
+ *   <Location.Name className="font-bold" />
+ *   <Location.Address />
+ *   <Location.Phone />
+ * </Booking.Location>
+ * ```
+ */
+export function Location(props) {
+    const { children } = props;
+    return (_jsx(CoreBooking.Data, { children: ({ location }) => location ? (_jsx(CoreLocation.Root, { location: location, children: children })) : null }));
+}
+/**
+ * Displays the first staff member's name from the current booking item.
+ * Returns null when staff name is empty.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Booking.StaffName className="text-foreground" />
+ * ```
+ */
+export const StaffName = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreBooking.BookingItemInfo, { children: ({ staffName }) => {
+            if (!staffName) {
+                return null;
+            }
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.bookingStaffName, customElement: children, customElementProps: { name: staffName }, children: _jsx("span", { children: staffName }) }));
+        } }));
+});
+StaffName.displayName = 'Booking.StaffName';

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

@@ -5,7 +5,9 @@
 import React from 'react';
 import { type BookingServiceConfig, type ServiceSelection, type BookingServiceActions } from '../../../services/booking/booking.js';
 import type { FormValues } from '@wix/form-public';
-import type { Location as TimeSlotLocationType } from '@wix/auto_sdk_bookings_availability-time-slots';
+import type { TimeSlot, Resource } from '@wix/auto_sdk_bookings_availability-time-slots';
+import type { Service, Location as ServiceLocationType } from '@wix/auto_sdk_bookings_services';
+import type { SlotService } from '../../../services/payment/payment.js';
 /**
  * Props for Booking.Root component
  */
@@ -35,7 +37,7 @@ export declare function Root(props: RootProps): React.ReactNode;
  */
 export interface BookingData {
     serviceSelections: ServiceSelection[];
-    location: TimeSlotLocationType | null;
+    location: ServiceLocationType | null;
     timezone: string | undefined;
     formSubmission: FormValues | null;
     actions: BookingServiceActions;
@@ -46,22 +48,148 @@ export interface BookingData {
 export interface DataProps {
     children: (data: BookingData) => React.ReactNode;
 }
+export declare function Data(props: DataProps): React.ReactNode;
+/**
+ * Unified data object for a single booking item.
+ * Contains resolved data ready for use - no raw serviceSelection duplication.
+ */
+export interface BookingItem {
+    /** SDK Service object */
+    service: Service;
+    /** Adapted SDK TimeSlot (or null if no time slot selected) */
+    timeSlot: TimeSlot | null;
+    /** Resolved staff: timeSlot.resources ?? selection.resources, or null if none */
+    staff: Resource[] | null;
+    /** Unique identifier for this booking instance */
+    instanceId: string;
+    /** Position in the serviceSelections array */
+    index: number;
+}
+/**
+ * Hook to access the current BookingItem from context.
+ * Must be used within BookingItemProvider.
+ *
+ * @throws Error if used outside of BookingItemProvider context
+ */
+export declare function useBookingItemContext(): BookingItem;
+/**
+ * Props for BookingItemProvider
+ */
+export interface BookingItemProviderProps {
+    children: React.ReactNode;
+    item: BookingItem;
+}
+/**
+ * Provider component used by repeaters to provide BookingItem context.
+ * Can be used by core consumers to create their own repeater.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * {items.map((item) => (
+ *   <BookingItemProvider key={item.instanceId} item={item}>
+ *     {children}
+ *   </BookingItemProvider>
+ * ))}
+ * ```
+ */
+export declare function BookingItemProvider(props: BookingItemProviderProps): React.ReactNode;
+/**
+ * Props for BookingItemInfo render prop component
+ */
+export interface BookingItemInfoProps {
+    children: (data: {
+        /** SDK Service object */
+        service: Service;
+        /** Adapted SDK TimeSlot (or null if no time slot selected) */
+        timeSlot: TimeSlot | null;
+        /** First staff member's name, empty string if none */
+        staffName: string;
+        /** Unique identifier for this booking instance */
+        instanceId: string;
+        /** Position in the serviceSelections array */
+        index: number;
+        /** The raw BookingItem object */
+        item: BookingItem;
+    }) => React.ReactNode;
+}
+/**
+ * Core component that provides access to booking item info via render props.
+ * Must be used within BookingItemProvider.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <BookingItemInfo>
+ *   {({ service, timeSlot, staffName }) => (
+ *     <div>
+ *       <span>{service.name}</span>
+ *       <span>{staffName}</span>
+ *     </div>
+ *   )}
+ * </BookingItemInfo>
+ * ```
+ */
+export declare function BookingItemInfo(props: BookingItemInfoProps): React.ReactNode;
+/**
+ * Data exposed by ItemsData render prop
+ */
+export interface ItemsDataRenderProps {
+    /** Array of BookingItem objects */
+    items: BookingItem[];
+}
 /**
- * Core component that provides access to booking data via render props.
- * Used internally by higher-level Booking components.
+ * Props for ItemsData render prop component
+ */
+export interface ItemsDataProps {
+    children: (data: ItemsDataRenderProps) => React.ReactNode;
+}
+/**
+ * Core component that provides access to booking items array via render props.
+ * Transforms serviceSelections into BookingItem objects.
  *
  * @component
  * @example
  * ```tsx
- * <Booking.Data>
- *   {({ serviceSelections, location, timezone, formSubmission, actions }) => (
- *     serviceSelections.length > 0 ? (
- *       <div>{serviceSelections.map(item => item.service.name).join(', ')}</div>
+ * <Booking.ItemsData>
+ *   {({ items }) => (
+ *     items.length > 0 ? (
+ *       <div>{items.length} bookings</div>
  *     ) : (
- *       <div>No services selected</div>
+ *       <div>No bookings</div>
  *     )
  *   )}
- * </Booking.Data>
+ * </Booking.ItemsData>
  * ```
  */
-export declare function Data(props: DataProps): React.ReactNode;
+export declare function ItemsData(props: ItemsDataProps): React.ReactNode;
+/**
+ * Data exposed by PaymentData render prop
+ */
+export interface PaymentDataRenderProps {
+    /** SlotServices array for Payment.Root */
+    slotServices: SlotService[];
+}
+/**
+ * Props for PaymentData render prop component
+ */
+export interface PaymentDataProps {
+    children: (data: PaymentDataRenderProps) => React.ReactNode;
+}
+/**
+ * Core component that provides payment data via render props.
+ * Computes slotServices from serviceSelections.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Booking.PaymentData>
+ *   {({ slotServices }) => (
+ *     <Payment.Root slotServices={slotServices}>
+ *       <Payment.TotalPrice />
+ *     </Payment.Root>
+ *   )}
+ * </Booking.PaymentData>
+ * ```
+ */
+export declare function PaymentData(props: PaymentDataProps): React.ReactNode;