@wix/headless-bookings 0.0.50 → 0.0.52

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,53 @@ export function Root(props) {
  * </Booking.Data>
  * ```
  */
+/**
+ * Maps a TimeSlotLocationType to ServiceLocationType.
+ * TimeSlot location has flat structure: { name, formattedAddress, locationType }
+ * Service location has nested structure: { business: { name, address }, type }
+ */
+function mapTimeSlotLocationToServiceLocation(timeSlotLocation) {
+    // TimeSlot location has flat name/formattedAddress at top level
+    // Convert to nested business structure that CoreLocation expects
+    return {
+        _id: timeSlotLocation._id ?? undefined,
+        type: timeSlotLocation.locationType,
+        business: {
+            _id: timeSlotLocation._id ?? undefined,
+            name: timeSlotLocation.name ?? undefined,
+            address: timeSlotLocation.formattedAddress
+                ? {
+                    addressLine: timeSlotLocation.formattedAddress,
+                }
+                : 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 +99,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/react/index.d.ts

@@ -3,6 +3,7 @@ export * as BookingForm from './booking-form/BookingForm.js';
 export * as Service from './service/Service.js';
 export * as ServiceMedia from './service/ServiceMedia.js';
 export * as TimeSlotList from './time-slot-list/TimeSlotList.js';
+export * as TimeSlot from './time-slot-list/TimeSlot.js';
 export * as ServiceList from './service-list/ServiceList.js';
 export * as Location from './location/Location.js';
 export * as LocationList from './location/LocationList.js';

package/cjs/dist/react/index.js

@@ -3,6 +3,7 @@ export * as BookingForm from './booking-form/BookingForm.js';
 export * as Service from './service/Service.js';
 export * as ServiceMedia from './service/ServiceMedia.js';
 export * as TimeSlotList from './time-slot-list/TimeSlotList.js';
+export * as TimeSlot from './time-slot-list/TimeSlot.js';
 export * as ServiceList from './service-list/ServiceList.js';
 export * as Location from './location/Location.js';
 export * as LocationList from './location/LocationList.js';

package/cjs/dist/react/location/Location.js

@@ -89,7 +89,7 @@ Root.displayName = 'Location.Root';
 export const Name = React.forwardRef((props, ref) => {
     const { asChild, children, className, ...attrs } = props;
     const { name } = useLocationContext();
-    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.locationName, customElement: children, customElementProps: { name: name ?? '' }, ...attrs, children: _jsx("span", { children: name }) }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.locationName, customElement: children, customElementProps: { name: name ?? '' }, ...attrs, children: name ? _jsx("span", { children: name }) : null }));
 });
 Name.displayName = 'Location.Name';
 /**
@@ -117,7 +117,7 @@ export const Type = React.forwardRef((props, ref) => {
             locationType,
             isCustomerLocation,
             isCustomLocation,
-        }, ...attrs, children: _jsx("span", { children: locationType }) }));
+        }, ...attrs, children: locationType ? _jsx("span", { children: locationType }) : null }));
 });
 Type.displayName = 'Location.Type';
 /**

package/cjs/dist/services/payment/payment.def.d.ts

@@ -8,7 +8,7 @@ import type { Service } from '@wix/auto_sdk_bookings_services';
 /**
  * Payment option for line items
  */
-export type PaymentOption = 'FULL_PAYMENT_ONLINE' | 'FULL_PAYMENT_OFFLINE';
+export type PaymentOption = 'FULL_PAYMENT_ONLINE' | 'FULL_PAYMENT_OFFLINE' | 'DEPOSIT_ONLINE';
 /**
  * Additional computed info for a line item (not in SDK response)
  */

package/cjs/dist/services/payment/payment.js

@@ -25,11 +25,15 @@ function getAdditionalInfo(service, lineItemId) {
         : undefined;
     return { lineItemId, priceText };
 }
-function getPaymentOption(service) {
+function getPaymentOption(service, hasDeposit) {
     const options = service.payment?.options;
     if (options?.inPerson) {
         return 'FULL_PAYMENT_OFFLINE';
     }
+    // If deposit is configured, use DEPOSIT_ONLINE to get correct payNow/payLater split
+    if (hasDeposit) {
+        return 'DEPOSIT_ONLINE';
+    }
     return 'FULL_PAYMENT_ONLINE';
 }
 function buildLineItem(service, numberOfParticipants, lineItemId) {
@@ -37,11 +41,13 @@ function buildLineItem(service, numberOfParticipants, lineItemId) {
     const servicePrice = service.payment?.fixed?.price?.value;
     const price = Number(servicePrice || 0) * numberOfParticipants;
     // Get deposit if configured
-    const deposit = service.payment?.fixed?.deposit?.value
-        ? Number(service.payment.fixed.deposit.value) * numberOfParticipants
+    const depositValue = service.payment?.fixed?.deposit?.value;
+    const hasDeposit = !!depositValue && Number(depositValue) > 0;
+    const deposit = hasDeposit
+        ? Number(depositValue) * numberOfParticipants
         : undefined;
-    // Get payment option from service configuration
-    const paymentOption = getPaymentOption(service);
+    // Get payment option from service configuration (pass hasDeposit for correct API behavior)
+    const paymentOption = getPaymentOption(service, hasDeposit);
     return {
         _id: lineItemId,
         catalogReference: {

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