@wix/headless-bookings 0.0.57 → 0.0.59

package/cjs/dist/__mocks__/booking.d.ts

@@ -1,6 +1,5 @@
-import type { Resource } from '@wix/auto_sdk_bookings_availability-time-slots';
 import type { FormValues } from '@wix/form-public';
-import type { ServiceSelection, ServiceSelectionTimeSlot, BookingServiceConfig, BookingService } from '../services/booking/booking.js';
+import type { ServiceSelection, ServiceSelectionTimeSlot, BookingServiceConfig, BookingService, ExtendedResource } from '../services/booking/booking.js';
 import type { Signal } from '@wix/services-definitions/core-services/signals';
 export declare function mockSignal<T>(initialValue: T): Signal<T>;
 export declare function createMockSignalsService(): {
@@ -12,15 +11,15 @@ export declare function createMockBookingService(initialSelections?: ServiceSele
 /**
  * Mock resource (staff member)
  */
-export declare const mockResource: Resource;
+export declare const mockResource: ExtendedResource;
 /**
  * Mock resource (another staff member)
  */
-export declare const mockResourceTwo: Resource;
+export declare const mockResourceTwo: ExtendedResource;
 /**
  * Mock resource (room)
  */
-export declare const mockResourceRoom: Resource;
+export declare const mockResourceRoom: ExtendedResource;
 /**
  * Mock location
  */

package/cjs/dist/__mocks__/booking.js

@@ -35,9 +35,9 @@ export function createMockBookingService(initialSelections = []) {
             addItem: vi.fn(),
             removeItem: vi.fn(),
             clearItems: vi.fn(),
-            setResourceById: vi.fn(),
-            getResourceById: vi.fn(),
-            clearResourceById: vi.fn(),
+            setResource: vi.fn(),
+            getResourceByType: vi.fn(),
+            clearResourceByType: vi.fn(),
             setLocation: vi.fn(),
             clearLocation: vi.fn(),
             setTimezone: vi.fn(),
@@ -56,6 +56,7 @@ export const mockResource = {
     name: 'John Doe',
     email: 'john.doe@example.com',
     tag: 'STAFF',
+    type: 'staff',
 };
 /**
  * Mock resource (another staff member)
@@ -65,6 +66,7 @@ export const mockResourceTwo = {
     name: 'Jane Smith',
     email: 'jane.smith@example.com',
     tag: 'STAFF',
+    type: 'staff',
 };
 /**
  * Mock resource (room)
@@ -73,6 +75,7 @@ export const mockResourceRoom = {
     _id: 'resource-room-1',
     name: 'Conference Room A',
     tag: 'RESOURCE',
+    type: 'room',
 };
 /**
  * Mock location

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

@@ -227,7 +227,7 @@ export function TimeSlot(props) {
  */
 export function Payment(props) {
     const { children } = props;
-    return (_jsx(CoreBooking.PaymentData, { children: ({ slotServices }) => (_jsx(PaymentComponent.Root, { slotServices: slotServices, children: children })) }));
+    return (_jsx(CoreBooking.PaymentData, { children: ({ pricingServiceSelections }) => (_jsx(PaymentComponent.Root, { pricingServiceSelections: pricingServiceSelections, children: children })) }));
 }
 /**
  * Wraps Location context with the location from the booking context.

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

@@ -7,7 +7,7 @@ import { type BookingServiceConfig, type ServiceSelection, type BookingServiceAc
 import type { FormValues } from '@wix/form-public';
 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';
+import type { PricingServiceSelection } from '../../../services/payment/payment.js';
 /**
  * Props for Booking.Root component
  */
@@ -167,8 +167,8 @@ export declare function ItemsData(props: ItemsDataProps): React.ReactNode;
  * Data exposed by PaymentData render prop
  */
 export interface PaymentDataRenderProps {
-    /** SlotServices array for Payment.Root */
-    slotServices: SlotService[];
+    /** Pricing service selections array for Payment.Root */
+    pricingServiceSelections: PricingServiceSelection[];
 }
 /**
  * Props for PaymentData render prop component

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

@@ -267,9 +267,9 @@ export function PaymentData(props) {
     const { children } = props;
     const bookingService = useService(BookingServiceDefinition);
     const serviceSelections = bookingService.serviceSelections.get();
-    const slotServices = serviceSelections.map((selection) => ({
+    const pricingServiceSelections = serviceSelections.map((selection) => ({
         service: selection.service,
         lineItemId: selection.instanceId,
     }));
-    return children({ slotServices });
+    return children({ pricingServiceSelections });
 }

package/cjs/dist/react/core/payment/Payment.d.ts

@@ -4,7 +4,7 @@
  * Note: Currently supports single service only
  */
 import React from 'react';
-import { type PaymentServiceConfig, type SlotService } from '../../../services/payment/payment.js';
+import { type PaymentServiceConfig, type PricingServiceSelection } from '../../../services/payment/payment.js';
 import type { MoneyData } from '@wix/headless-components/react';
 /**
  * Props for Payment.Root component
@@ -16,8 +16,8 @@ export interface RootProps {
     }) => React.ReactNode);
     /** Service config - SSR only (paymentDetails) */
     paymentServiceConfig?: PaymentServiceConfig;
-    /** Slot services for lazy loading (triggers API call) */
-    slotServices?: SlotService[];
+    /** Pricing service selections for lazy loading (triggers API call) */
+    pricingServiceSelections?: PricingServiceSelection[];
     /** Number of participants for lazy loading */
     numberOfParticipants?: number;
 }
@@ -25,7 +25,7 @@ export interface RootProps {
  * Root component that provides payment context.
  * Supports 3 modes:
  * 1. SSR: paymentServiceConfig.paymentDetails - pre-fetched data
- * 2. Lazy loading: slotServices + numberOfParticipants props - calls API on init
+ * 2. Lazy loading: pricingServiceSelections + numberOfParticipants props - calls API on init
  * 3. Reactive: no config/props - reads from BookingService signals
  *
  * @component
@@ -37,7 +37,7 @@ export interface RootProps {
  * </Payment.Root>
  *
  * // Lazy loading mode
- * <Payment.Root slotServices={[...]} numberOfParticipants={2}>
+ * <Payment.Root pricingServiceSelections={[...]} numberOfParticipants={2}>
  *   {({ isLoading }) => isLoading ? <div>Loading...</div> : <Payment.Total />}
  * </Payment.Root>
  *
@@ -59,6 +59,12 @@ export interface DataProps {
         discount: MoneyData | null;
         payNow: MoneyData | null;
         payLater: MoneyData | null;
+        priceText: string | null;
+        hasPriceText: boolean;
+        isFree: boolean;
+        hasTax: boolean;
+        hasDiscount: boolean;
+        isDeposit: boolean;
         currency: string;
         isLoading: boolean;
         error: string | null;
@@ -123,3 +129,76 @@ export interface LineItemsProps {
  * ```
  */
 export declare function LineItems(props: LineItemsProps): React.ReactNode;
+/**
+ * Context value for LineItem components
+ */
+export interface LineItemContextValue {
+    lineItem: LineItem;
+    currency: string;
+}
+/**
+ * Hook to access the current LineItem from context.
+ * Must be used within LineItemProvider.
+ *
+ * @throws Error if used outside of LineItemProvider context
+ */
+export declare function useLineItemContext(): LineItemContextValue;
+/**
+ * Props for LineItemProvider
+ */
+export interface LineItemProviderProps {
+    children: React.ReactNode;
+    lineItem: LineItem;
+    currency: string;
+}
+/**
+ * Provider component used by repeaters to provide LineItem context.
+ * Can be used by core consumers to create their own repeater.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * {lineItems.map((item) => (
+ *   <LineItemProvider key={item.id} lineItem={item} currency={currency}>
+ *     {children}
+ *   </LineItemProvider>
+ * ))}
+ * ```
+ */
+export declare function LineItemProvider(props: LineItemProviderProps): React.ReactNode;
+/**
+ * Props for LineItemInfo render prop component
+ */
+export interface LineItemInfoProps {
+    children: (data: {
+        lineItem: LineItem;
+        currency: string;
+        totalPrice: MoneyData | null;
+        subtotal: MoneyData | null;
+        tax: MoneyData | null;
+        discount: MoneyData | null;
+        deposit: MoneyData | null;
+        priceText: string | null;
+        hasPriceText: boolean;
+        isFree: boolean;
+        hasDiscount: boolean;
+        hasDeposit: boolean;
+    }) => React.ReactNode;
+}
+/**
+ * Core component that provides access to line item info via render props.
+ * Must be used within LineItemProvider.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <LineItemInfo>
+ *   {({ totalPrice, priceText, lineItem }) => (
+ *     <div>
+ *       {priceText ? <span>{priceText}</span> : <Money money={totalPrice} />}
+ *     </div>
+ *   )}
+ * </LineItemInfo>
+ * ```
+ */
+export declare function LineItemInfo(props: LineItemInfoProps): React.ReactNode;

package/cjs/dist/react/core/payment/Payment.js

@@ -1,4 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Core Payment Components
+ * Provides low-level access to PaymentService via render props
+ * Note: Currently supports single service only
+ */
+import React from 'react';
 import { WixServices, useService } from '@wix/services-manager-react';
 import { createServicesMap } from '@wix/services-manager';
 import { PaymentServiceDefinition, PaymentService, } from '../../../services/payment/payment.js';
@@ -20,7 +26,7 @@ function RootContent({ children, }) {
  * Root component that provides payment context.
  * Supports 3 modes:
  * 1. SSR: paymentServiceConfig.paymentDetails - pre-fetched data
- * 2. Lazy loading: slotServices + numberOfParticipants props - calls API on init
+ * 2. Lazy loading: pricingServiceSelections + numberOfParticipants props - calls API on init
  * 3. Reactive: no config/props - reads from BookingService signals
  *
  * @component
@@ -32,7 +38,7 @@ function RootContent({ children, }) {
  * </Payment.Root>
  *
  * // Lazy loading mode
- * <Payment.Root slotServices={[...]} numberOfParticipants={2}>
+ * <Payment.Root pricingServiceSelections={[...]} numberOfParticipants={2}>
  *   {({ isLoading }) => isLoading ? <div>Loading...</div> : <Payment.Total />}
  * </Payment.Root>
  *
@@ -43,11 +49,11 @@ function RootContent({ children, }) {
  * ```
  */
 export function Root(props) {
-    const { children, paymentServiceConfig = {}, slotServices, numberOfParticipants, } = props;
+    const { children, paymentServiceConfig = {}, pricingServiceSelections, numberOfParticipants, } = props;
     // Merge public config with lazy loading props into internal config
     const internalConfig = {
         ...paymentServiceConfig,
-        slotServices,
+        pricingServiceSelections,
         numberOfParticipants,
     };
     return (_jsx(WixServices, { servicesMap: createServicesMap().addService(PaymentServiceDefinition, PaymentService, internalConfig), children: _jsx(RootContent, { children: children }) }));
@@ -71,6 +77,16 @@ export function Data(props) {
     const discount = convertMultiCurrencyPriceToMoneyData(priceSummary?.discount, currency);
     const payNow = convertMultiCurrencyPriceToMoneyData(paymentDetails?.response?.payNow?.total, currency);
     const payLater = convertMultiCurrencyPriceToMoneyData(paymentDetails?.response?.payLater?.total, currency);
+    // Get priceText from first line item (single service mode)
+    const additionalInfoList = paymentDetails?.additionalInfo?.lineItems || [];
+    const firstLineItemInfo = additionalInfoList[0];
+    const priceText = firstLineItemInfo?.priceText || null;
+    const hasPriceText = !!priceText;
+    const isFree = total !== null && total.amount === 0 && !hasPriceText;
+    // Computed flags
+    const hasTax = tax !== null && tax.amount > 0;
+    const hasDiscount = discount !== null && discount.amount > 0;
+    const isDeposit = payNow !== null && total !== null && payNow.amount < total.amount;
     return props.children({
         subtotal,
         total,
@@ -78,6 +94,12 @@ export function Data(props) {
         discount,
         payNow,
         payLater,
+        priceText,
+        hasPriceText,
+        isFree,
+        hasTax,
+        hasDiscount,
+        isDeposit,
         currency,
         isLoading,
         error,
@@ -134,3 +156,79 @@ export function LineItems(props) {
         error,
     });
 }
+const LineItemContext = React.createContext(null);
+/**
+ * Hook to access the current LineItem from context.
+ * Must be used within LineItemProvider.
+ *
+ * @throws Error if used outside of LineItemProvider context
+ */
+export function useLineItemContext() {
+    const context = React.useContext(LineItemContext);
+    if (!context) {
+        throw new Error('LineItem components must be used within LineItemProvider');
+    }
+    return context;
+}
+/**
+ * Provider component used by repeaters to provide LineItem context.
+ * Can be used by core consumers to create their own repeater.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * {lineItems.map((item) => (
+ *   <LineItemProvider key={item.id} lineItem={item} currency={currency}>
+ *     {children}
+ *   </LineItemProvider>
+ * ))}
+ * ```
+ */
+export function LineItemProvider(props) {
+    const { children, lineItem, currency } = props;
+    const contextValue = {
+        lineItem,
+        currency,
+    };
+    return (_jsx(LineItemContext.Provider, { value: contextValue, children: children }));
+}
+/**
+ * Core component that provides access to line item info via render props.
+ * Must be used within LineItemProvider.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <LineItemInfo>
+ *   {({ totalPrice, priceText, lineItem }) => (
+ *     <div>
+ *       {priceText ? <span>{priceText}</span> : <Money money={totalPrice} />}
+ *     </div>
+ *   )}
+ * </LineItemInfo>
+ * ```
+ */
+export function LineItemInfo(props) {
+    const { lineItem, currency } = useLineItemContext();
+    // Computed flags
+    const hasPriceText = !!lineItem.priceText;
+    const isFree = lineItem.totalPrice !== null &&
+        lineItem.totalPrice.amount === 0 &&
+        !hasPriceText;
+    const hasDiscount = lineItem.discount !== null && lineItem.discount.amount > 0;
+    const hasDeposit = lineItem.deposit !== null && lineItem.deposit.amount > 0;
+    return props.children({
+        lineItem,
+        currency,
+        totalPrice: lineItem.totalPrice,
+        subtotal: lineItem.subtotal,
+        tax: lineItem.tax,
+        discount: lineItem.discount,
+        deposit: lineItem.deposit,
+        priceText: lineItem.priceText,
+        hasPriceText,
+        isFree,
+        hasDiscount,
+        hasDeposit,
+    });
+}

package/cjs/dist/react/core/staff-member/StaffMember.js

@@ -130,7 +130,8 @@ export function Actions(props) {
         if (!rawStaffMember?.staffMemberId || !bookingService)
             return;
         // Use resource type ID as the lookup key, staff member ID as the actual resource ID
-        bookingService.actions.setResourceById(STAFF_MEMBER_RESOURCE_TYPE_ID, {
+        bookingService.actions.setResource({
+            type: STAFF_MEMBER_RESOURCE_TYPE_ID,
             _id: rawStaffMember.staffMemberId,
             name: rawStaffMember.name,
         });

package/cjs/dist/react/payment/Payment.d.ts

@@ -5,8 +5,7 @@
 import React from 'react';
 import { AsChildChildren } from '@wix/headless-utils/react';
 import { MoneyData } from '@wix/headless-components/react';
-import type { PaymentServiceConfig, SlotService } from '../../services/payment/payment.js';
-import type { LineItem as CoreLineItem } from '../core/payment/Payment.js';
+import type { PaymentServiceConfig, PricingServiceSelection } from '../../services/payment/payment.js';
 /**
  * Props for Payment.Root component
  */
@@ -17,8 +16,8 @@ export interface RootProps {
     }) => React.ReactNode);
     /** Service config for SSR (pre-fetched paymentDetails) */
     paymentServiceConfig?: PaymentServiceConfig;
-    /** Slot services for lazy loading (triggers API call) */
-    slotServices?: SlotService[];
+    /** Pricing service selections for lazy loading (triggers API call) */
+    pricingServiceSelections?: PricingServiceSelection[];
     /** Number of participants for lazy loading */
     numberOfParticipants?: number;
     asChild?: boolean;
@@ -28,7 +27,7 @@ export interface RootProps {
  * Root component that provides payment context to the entire app.
  * Supports 3 modes:
  * 1. SSR: paymentServiceConfig.paymentDetails - pre-fetched data
- * 2. Lazy loading: slotServices + numberOfParticipants props - calls API via useEffect
+ * 2. Lazy loading: pricingServiceSelections + numberOfParticipants props - calls API via useEffect
  * 3. Reactive: no config/props - reads from BookingService signals
  *
  * @order 1
@@ -64,17 +63,32 @@ export interface SubtotalProps {
     asChild?: boolean;
     children?: AsChildChildren<{
         subtotal: MoneyData | null;
+        priceText: string | null;
+        hasPriceText: boolean;
+        isFree: boolean;
     }>;
     className?: string;
 }
 /**
  * Displays the payment subtotal.
+ * Always displays the monetary value but exposes priceText, hasPriceText, and isFree for custom rendering.
  *
  * @component
  * @example
  * ```tsx
  * <Payment.Subtotal className="text-lg" />
  * ```
+ * @example
+ * ```tsx
+ * <Payment.Subtotal asChild>
+ *   {({ subtotal, priceText, hasPriceText, isFree }) => (
+ *     <div>
+ *       <Money money={subtotal} />
+ *       {hasPriceText && <span className="text-sm">({priceText})</span>}
+ *     </div>
+ *   )}
+ * </Payment.Subtotal>
+ * ```
  */
 export declare const Subtotal: React.ForwardRefExoticComponent<SubtotalProps & React.RefAttributes<HTMLElement>>;
 /**
@@ -126,17 +140,36 @@ export interface TotalProps {
     asChild?: boolean;
     children?: AsChildChildren<{
         total: MoneyData | null;
+        priceText: string | null;
+        hasPriceText: boolean;
+        isFree: boolean;
     }>;
     className?: string;
 }
 /**
  * Displays the payment total.
+ * Always displays the monetary value but exposes priceText, hasPriceText, and isFree for custom rendering.
  *
  * @component
  * @example
  * ```tsx
  * <Payment.Total className="text-2xl font-bold" />
  * ```
+ * @example
+ * ```tsx
+ * <Payment.Total asChild>
+ *   {({ total, priceText, hasPriceText, isFree }) => (
+ *     <div>
+ *       {isFree ? (
+ *         <span className="text-green-500">Free</span>
+ *       ) : (
+ *         <Money money={total} />
+ *       )}
+ *       {hasPriceText && <span className="text-sm">({priceText})</span>}
+ *     </div>
+ *   )}
+ * </Payment.Total>
+ * ```
  */
 export declare const Total: React.ForwardRefExoticComponent<TotalProps & React.RefAttributes<HTMLElement>>;
 /**
@@ -240,101 +273,74 @@ export interface LineItemsListProps {
  * ```
  */
 export declare const LineItemsList: React.ForwardRefExoticComponent<LineItemsListProps & React.RefAttributes<HTMLElement>>;
-/**
- * Render props for LineItemRepeater asChild pattern
- */
-export interface LineItemRepeaterRenderProps {
-    items: CoreLineItem[];
-    itemWrapper: (props: {
-        item: CoreLineItem;
-        index: number;
-        children: React.ReactNode;
-    }) => React.ReactNode;
-}
 /**
  * Props for Payment.LineItemRepeater component
  */
 export interface LineItemRepeaterProps {
-    children?: React.ReactNode | ((props: LineItemRepeaterRenderProps) => React.ReactNode);
-    asChild?: boolean;
+    children: React.ReactNode;
 }
 /**
- * Repeater component that renders LineItemRoot for each line item.
- * Supports asChild pattern for custom rendering.
+ * Repeater component that maps over line items and provides context per item.
+ * Uses GenericList.Repeater internally with itemWrapper that provides LineItemContext.
  *
  * @component
  * @example
  * ```tsx
- * // Standard usage
  * <Payment.LineItemRepeater>
- *   <Payment.LineItemPrice />
- * </Payment.LineItemRepeater>
- *
- * // AsChild usage with custom list
- * <Payment.LineItemRepeater asChild>
- *   {({ items, itemWrapper }) => (
- *     <ol>
- *       {items.map((item, index) => (
- *         <li key={item.id}>
- *           {itemWrapper({ item, index, children: <Payment.LineItemPrice /> })}
- *         </li>
- *       ))}
- *     </ol>
- *   )}
+ *   <Payment.LineItemTotal />
+ *   <Payment.LineItemDiscount />
  * </Payment.LineItemRepeater>
  * ```
  */
 export declare const LineItemRepeater: React.ForwardRefExoticComponent<LineItemRepeaterProps & React.RefAttributes<HTMLElement>>;
 /**
- * Props for Payment.LineItemRoot component
+ * Props for Payment.LineItemTotal component
  */
-export interface LineItemRootProps {
-    lineItem: CoreLineItem;
-    currency: string;
-    children?: React.ReactNode | AsChildChildren<{
-        lineItem: CoreLineItem;
-        currency: string;
-    }>;
+export interface LineItemTotalProps {
     asChild?: boolean;
+    children?: AsChildChildren<{
+        totalPrice: MoneyData | null;
+        priceText: string | null;
+        hasPriceText: boolean;
+        isFree: boolean;
+    }>;
     className?: string;
-    'data-testid'?: string;
 }
 /**
- * Root component for a single line item.
- * Provides context for child components.
+ * Displays the line item total (total price after tax).
+ * Shows priceText for CUSTOM rate type services, otherwise shows totalPrice.
  *
  * @component
  * @example
  * ```tsx
- * <Payment.LineItemRoot lineItem={item} currency="USD">
- *   <Payment.LineItemPrice />
- *   <Payment.LineItemDiscount />
- * </Payment.LineItemRoot>
+ * <Payment.LineItemTotal className="text-2xl font-bold" />
  * ```
  */
-export declare const LineItemRoot: React.ForwardRefExoticComponent<LineItemRootProps & React.RefAttributes<HTMLElement>>;
+export declare const LineItemTotal: React.ForwardRefExoticComponent<LineItemTotalProps & React.RefAttributes<HTMLElement>>;
 /**
- * Props for Payment.LineItemPrice component
+ * Props for Payment.LineItemSubtotal component
  */
-export interface LineItemPriceProps {
+export interface LineItemSubtotalProps {
     asChild?: boolean;
     children?: AsChildChildren<{
-        totalPrice: MoneyData | null;
+        subtotal: MoneyData | null;
         priceText: string | null;
+        hasPriceText: boolean;
+        isFree: boolean;
     }>;
     className?: string;
 }
 /**
- * Displays the line item price.
- * Shows priceText for CUSTOM rate type services, otherwise shows totalPrice.
+ * Displays the line item subtotal (full price before discounts).
+ * Shows priceText for CUSTOM rate type services, otherwise shows subtotal.
  *
  * @component
  * @example
  * ```tsx
- * <Payment.LineItemPrice className="text-lg font-bold" />
+ * <Payment.LineItemSubtotal className="text-lg" />
  * ```
  */
-export declare const LineItemPrice: React.ForwardRefExoticComponent<LineItemPriceProps & React.RefAttributes<HTMLElement>>;
+export declare const LineItemSubtotal: React.ForwardRefExoticComponent<LineItemSubtotalProps & React.RefAttributes<HTMLElement>>;
 /**
  * Props for Payment.LineItemDiscount component
  */