@wix/headless-bookings 0.0.50 → 0.0.51

package/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;

package/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-bookings",
-  "version": "0.0.50",
+  "version": "0.0.51",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -72,5 +72,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "b53d33f9b4d27501462704339b690fd61f728decff76e086217fa104"
+  "falconPackageHash": "ef1225253b65e6a7c3e1ea15bc390bb4afebcfad2ef8f5c0d7337bde"
 }