@wix/headless-bookings 0.0.49 → 0.0.51

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

@@ -1,4 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Core Booking Components
+ * Provides low-level access to BookingService via render props and service setup
+ */
+import React from 'react';
 import { WixServices, useService } from '@wix/services-manager-react';
 import { createServicesMap } from '@wix/services-manager';
 import { BookingServiceDefinition, BookingService, } from '../../../services/booking/booking.js';
@@ -39,14 +44,42 @@ export function Root(props) {
  * </Booking.Data>
  * ```
  */
+/**
+ * Maps a TimeSlotLocationType to ServiceLocationType.
+ * These types are structurally similar but have subtle differences
+ * (e.g., _id being string | null | undefined vs string | undefined).
+ */
+function mapTimeSlotLocationToServiceLocation(timeSlotLocation) {
+    return {
+        ...timeSlotLocation,
+        _id: timeSlotLocation._id ?? undefined,
+    };
+}
+/**
+ * Resolves the location with fallback logic:
+ * 1. First, use the explicitly set booking location
+ * 2. If not set, fall back to the first service selection's slot location
+ */
+function resolveLocation(bookingLocation, serviceSelections) {
+    if (bookingLocation) {
+        return bookingLocation;
+    }
+    // Fallback to first slot's location
+    const firstSlotLocation = serviceSelections[0]?.timeSlot?.location;
+    if (firstSlotLocation) {
+        return mapTimeSlotLocationToServiceLocation(firstSlotLocation);
+    }
+    return null;
+}
 export function Data(props) {
     const { children } = props;
     const bookingService = useService(BookingServiceDefinition);
     const serviceSelections = bookingService.serviceSelections.get();
-    const location = bookingService.location.get();
+    const bookingLocation = bookingService.location.get();
     const timezone = bookingService.timezone.get();
     const formSubmission = bookingService.formSubmission.get();
     const { actions } = bookingService;
+    const location = resolveLocation(bookingLocation, serviceSelections);
     return children({
         serviceSelections,
         location,
@@ -55,3 +88,177 @@ export function Data(props) {
         actions,
     });
 }
+/**
+ * Context for the current BookingItem
+ */
+const BookingItemContext = React.createContext(null);
+/**
+ * Hook to access the current BookingItem from context.
+ * Must be used within BookingItemProvider.
+ *
+ * @throws Error if used outside of BookingItemProvider context
+ */
+export function useBookingItemContext() {
+    const context = React.useContext(BookingItemContext);
+    if (!context) {
+        throw new Error('BookingItem components must be used within BookingItemProvider');
+    }
+    return context;
+}
+/**
+ * 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 function BookingItemProvider(props) {
+    const { children, item } = props;
+    return (_jsx(BookingItemContext.Provider, { value: item, children: children }));
+}
+/**
+ * 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 function BookingItemInfo(props) {
+    const item = useBookingItemContext();
+    const staffName = item.staff?.[0]?.name || '';
+    return props.children({
+        service: item.service,
+        timeSlot: item.timeSlot,
+        staffName,
+        instanceId: item.instanceId,
+        index: item.index,
+        item,
+    });
+}
+// ============================================================================
+// Helper: Convert ServiceSelectionTimeSlot to SDK TimeSlot
+// ============================================================================
+/**
+ * Converts a ServiceSelectionTimeSlot to SDK TimeSlot format
+ * for compatibility with TimeSlot.Root component.
+ */
+function mapSelectionTimeSlotToTimeSlot(serviceSelectionTimeSlot) {
+    if (!serviceSelectionTimeSlot) {
+        return null;
+    }
+    const availableResources = serviceSelectionTimeSlot.resources?.length
+        ? [{ resources: serviceSelectionTimeSlot.resources }]
+        : undefined;
+    return {
+        localStartDate: serviceSelectionTimeSlot.startDate,
+        localEndDate: serviceSelectionTimeSlot.endDate,
+        bookable: true,
+        totalCapacity: serviceSelectionTimeSlot.totalCapacity,
+        remainingCapacity: serviceSelectionTimeSlot.remainingCapacity,
+        scheduleId: serviceSelectionTimeSlot.scheduleId,
+        eventInfo: serviceSelectionTimeSlot.eventInfo,
+        location: serviceSelectionTimeSlot.location,
+        availableResources,
+    };
+}
+// ============================================================================
+// Helper: Resolve Staff with Priority Logic
+// ============================================================================
+/**
+ * Gets selected staff resources with priority:
+ * 1. From selected time slot (if resources exist)
+ * 2. From service selection resources
+ * Returns null if no staff is chosen
+ */
+function getSelectedStaff(serviceSelection) {
+    // Priority 1: From selected time slot
+    if (serviceSelection.timeSlot?.resources?.length) {
+        return serviceSelection.timeSlot.resources;
+    }
+    // Priority 2: From service selection
+    if (serviceSelection.resources?.length) {
+        return serviceSelection.resources;
+    }
+    // No staff chosen
+    return null;
+}
+/**
+ * Creates a BookingItem from a ServiceSelection
+ */
+function createBookingItem(serviceSelection, index) {
+    return {
+        service: serviceSelection.service,
+        timeSlot: mapSelectionTimeSlotToTimeSlot(serviceSelection.timeSlot),
+        staff: getSelectedStaff(serviceSelection),
+        instanceId: serviceSelection.instanceId,
+        index,
+    };
+}
+/**
+ * Core component that provides access to booking items array via render props.
+ * Transforms serviceSelections into BookingItem objects.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Booking.ItemsData>
+ *   {({ items }) => (
+ *     items.length > 0 ? (
+ *       <div>{items.length} bookings</div>
+ *     ) : (
+ *       <div>No bookings</div>
+ *     )
+ *   )}
+ * </Booking.ItemsData>
+ * ```
+ */
+export function ItemsData(props) {
+    const { children } = props;
+    const bookingService = useService(BookingServiceDefinition);
+    const serviceSelections = bookingService.serviceSelections.get();
+    const items = serviceSelections.map((selection, index) => createBookingItem(selection, index));
+    return children({ items });
+}
+/**
+ * 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 function PaymentData(props) {
+    const { children } = props;
+    const bookingService = useService(BookingServiceDefinition);
+    const serviceSelections = bookingService.serviceSelections.get();
+    const slotServices = serviceSelections.map((selection) => ({
+        service: selection.service,
+        lineItemId: selection.instanceId,
+    }));
+    return children({ slotServices });
+}

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

@@ -11,7 +11,7 @@ import type { Service } from '@wix/auto_sdk_bookings_services';
  * - Offline payment: payNow = 0
  *
  * Force checkout when:
- * - Service has cancellation fee
+ * - Service has cancellation fee policy
  *
  * @param checkout - The checkout response from createCheckout
  * @param service - The service being booked

package/cjs/dist/services/booking/book-action/isCheckoutRequired.js

@@ -9,15 +9,15 @@
  * - Offline payment: payNow = 0
  *
  * Force checkout when:
- * - Service has cancellation fee
+ * - Service has cancellation fee policy
  *
  * @param checkout - The checkout response from createCheckout
  * @param service - The service being booked
  * @returns true if checkout page is required, false if can skip to order
  */
 export function isCheckoutRequired(checkout, service) {
-    // Force checkout for cancellation fee
-    const hasCancellationFee = service.bookingPolicy?.cancellationPolicy?.enabled;
+    // Force checkout for cancellation fee policy
+    const hasCancellationFee = service.bookingPolicy?.cancellationFeePolicy?.enabled;
     if (hasCancellationFee) {
         return true;
     }

package/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.Root with the location from the booking context.
+ * Children can use all Location.* components (Location.Name, Location.Address, etc.).
+ * Always renders with data-has-location attribute for CSS targeting.
+ *
+ * @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.
+ * Always renders with data-has-staff-name attribute for CSS targeting.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Booking.StaffName className="text-foreground" />
+ * ```
+ */
+export declare const StaffName: React.ForwardRefExoticComponent<StaffNameProps & React.RefAttributes<HTMLElement>>;