@wix/headless-bookings 0.0.38 → 0.0.40

package/dist/react/core/time-slot-list/TimeSlot.d.ts

@@ -7,34 +7,26 @@
  */
 import React from 'react';
 import type { TimeSlot as TimeSlotType } from '@wix/auto_sdk_bookings_availability-time-slots';
+import { type TimeSlotServiceConfig } from '../../../services/time-slot-list/time-slot.js';
 /**
- * Context value for TimeSlot components
+ * Props for TimeSlot.Root component
  */
-export interface TimeSlotContextValue {
-    /** The current time slot data */
-    timeSlot: TimeSlotType;
-    /** Whether this time slot is currently selected */
-    isSelected: boolean;
-    /** Action to select this time slot */
-    selectTimeSlot: () => void;
-}
-/**
- * Hook to access TimeSlot context
- * @throws Error if used outside of TimeSlotProvider
- */
-export declare function useTimeSlotContext(): TimeSlotContextValue;
-/**
- * Props for TimeSlotProvider
- */
-export interface TimeSlotProviderProps {
+export interface RootProps {
     children: React.ReactNode;
-    timeSlot: TimeSlotType;
+    config: TimeSlotServiceConfig;
 }
 /**
- * Provider component used by TimeSlotRepeater to provide context.
- * Not used directly by consumers - only by TimeSlotList.TimeSlotRepeater.
+ * Root component that provides TimeSlot context.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlot.Root config={{ timeSlot }}>
+ *   {children}
+ * </TimeSlot.Root>
+ * ```
  */
-export declare function TimeSlotProvider(props: TimeSlotProviderProps): React.ReactNode;
+export declare function Root(props: RootProps): React.ReactNode;
 /**
  * Context value for StaffMember components
  */

package/dist/react/core/time-slot-list/TimeSlot.js

@@ -7,41 +7,24 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * which provides the TimeSlotProvider context.
  */
 import React from 'react';
-import { useService } from '@wix/services-manager-react';
+import { useService, WixServices } from '@wix/services-manager-react';
+import { createServicesMap } from '@wix/services-manager';
 import { TimeSlotListServiceDefinition } from '../../../services/time-slot-list/time-slot-list.def.js';
 import { ANY_STAFF_MEMBER_ID, BookingServiceDefinition, } from '../../../services/booking/booking.js';
-const TimeSlotContext = React.createContext(null);
+import { TimeSlotServiceDefinition, TimeSlotService, } from '../../../services/time-slot-list/time-slot.js';
 /**
- * Hook to access TimeSlot context
- * @throws Error if used outside of TimeSlotProvider
- */
-export function useTimeSlotContext() {
-    const context = React.useContext(TimeSlotContext);
-    if (!context) {
-        throw new Error('TimeSlot components must be used within TimeSlotList.TimeSlotRepeater');
-    }
-    return context;
-}
-/**
- * Provider component used by TimeSlotRepeater to provide context.
- * Not used directly by consumers - only by TimeSlotList.TimeSlotRepeater.
+ * Root component that provides TimeSlot context.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlot.Root config={{ timeSlot }}>
+ *   {children}
+ * </TimeSlot.Root>
+ * ```
  */
-export function TimeSlotProvider(props) {
-    const { children, timeSlot } = props;
-    const service = useService(TimeSlotListServiceDefinition);
-    const bookingService = useService(BookingServiceDefinition);
-    const selectedTimeSlot = bookingService.serviceSelections.get()[0]?.timeSlot;
-    const isSelected = selectedTimeSlot?.startDate === timeSlot.localStartDate &&
-        selectedTimeSlot?.location?._id === timeSlot.location?._id;
-    const selectTimeSlot = () => {
-        service.actions.selectSlot(timeSlot);
-    };
-    const contextValue = {
-        timeSlot,
-        isSelected,
-        selectTimeSlot,
-    };
-    return (_jsx(TimeSlotContext.Provider, { value: contextValue, children: children }));
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(TimeSlotServiceDefinition, TimeSlotService, props.config), children: props.children }));
 }
 const StaffMemberContext = React.createContext(null);
 /**
@@ -89,7 +72,12 @@ export function StaffMemberProvider(props) {
  * ```
  */
 export function Info(props) {
-    const { timeSlot, isSelected } = useTimeSlotContext();
+    const timeSlotService = useService(TimeSlotServiceDefinition);
+    const timeSlot = timeSlotService.timeSlotSignal.get();
+    const bookingService = useService(BookingServiceDefinition);
+    const selectedTimeSlot = bookingService.serviceSelections.get()[0]?.timeSlot;
+    const isSelected = selectedTimeSlot?.startDate === timeSlot.localStartDate &&
+        selectedTimeSlot?.location?._id === timeSlot.location?._id;
     const startDate = new Date(timeSlot.localStartDate);
     const endDate = new Date(timeSlot.localEndDate);
     const locationName = timeSlot.location?.name ?? '';
@@ -127,9 +115,16 @@ export function Info(props) {
  * ```
  */
 export function Actions(props) {
-    const { selectTimeSlot, timeSlot, isSelected } = useTimeSlotContext();
+    const timeSlotService = useService(TimeSlotServiceDefinition);
+    const timeSlot = timeSlotService.timeSlotSignal.get();
     const service = useService(TimeSlotListServiceDefinition);
     const bookingService = useService(BookingServiceDefinition);
+    const selectedTimeSlot = bookingService.serviceSelections.get()[0]?.timeSlot;
+    const isSelected = selectedTimeSlot?.startDate === timeSlot.localStartDate &&
+        selectedTimeSlot?.location?._id === timeSlot.location?._id;
+    const selectTimeSlot = () => {
+        service.actions.selectSlot(timeSlot);
+    };
     const bookable = timeSlot.bookable ?? false;
     const selectedStaffMemberId = bookingService.serviceSelections.get()[0]?.timeSlot?.resources?.[0]?._id;
     const staffFromSlot = timeSlot.availableResources[0].resources.map((r) => r._id);
@@ -165,7 +160,8 @@ export function Actions(props) {
  * ```
  */
 export function StaffMembers(props) {
-    const { timeSlot } = useTimeSlotContext();
+    const timeSlotService = useService(TimeSlotServiceDefinition);
+    const timeSlot = timeSlotService.timeSlotSignal.get();
     const service = useService(TimeSlotListServiceDefinition);
     const bookingService = useService(BookingServiceDefinition);
     const selectedStaffMemberId = bookingService.serviceSelections.get()[0]?.timeSlot?.resources?.[0]?._id;

package/dist/react/index.d.ts

@@ -6,4 +6,3 @@ export * as TimeSlotList from './time-slot-list/TimeSlotList.js';
 export * as ServiceList from './service-list/ServiceList.js';
 export * as Location from './location/Location.js';
 export * as Payment from './payment/Payment.js';
-export * as PaymentLineItem from './payment/PaymentLineItem.js';

package/dist/react/index.js

@@ -6,4 +6,3 @@ export * as TimeSlotList from './time-slot-list/TimeSlotList.js';
 export * as ServiceList from './service-list/ServiceList.js';
 export * as Location from './location/Location.js';
 export * as Payment from './payment/Payment.js';
-export * as PaymentLineItem from './payment/PaymentLineItem.js';

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

@@ -6,7 +6,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 { CombinedLineItem } from '../core/payment/Payment.js';
+import type { LineItem as CoreLineItem } from '../core/payment/Payment.js';
 /**
  * Props for Payment.Root component
  */
@@ -35,13 +35,13 @@ export interface RootProps {
  * @component
  * @example
  * ```tsx
- * import { Payment, PaymentLineItem } from '@wix/bookings/components';
+ * import { Payment } from '@wix/bookings/components';
  *
  * // SSR mode
  * function PaymentPage({ paymentDetails }) {
  *   return (
  *     <Payment.Root paymentServiceConfig={{ paymentDetails }}>
- *       <Payment.Summary />
+ *       <Payment.Total />
  *     </Payment.Root>
  *   );
  * }
@@ -50,57 +50,13 @@ export interface RootProps {
  * function LazyPayment({ slotServices }) {
  *   return (
  *     <Payment.Root slotServices={slotServices} numberOfParticipants={2}>
- *       {({ isLoading }) => isLoading ? <div>Loading...</div> : <Payment.Summary />}
+ *       {({ isLoading }) => isLoading ? <div>Loading...</div> : <Payment.Total />}
  *     </Payment.Root>
  *   );
  * }
  * ```
  */
 export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLElement>>;
-/**
- * Props for Payment.Summary component
- */
-export interface SummaryProps {
-    asChild?: boolean;
-    children?: AsChildChildren<{
-        subtotal: MoneyData | null;
-        total: MoneyData | null;
-        currency: string;
-        tax: MoneyData | null;
-        hasTax: boolean;
-        discount: MoneyData | null;
-        hasDiscount: boolean;
-        payNow: MoneyData | null;
-        payLater: MoneyData | null;
-        isDeposit: boolean;
-    }>;
-    className?: string;
-}
-/**
- * Displays the payment summary with totals.
- * Uses data-attributes for conditional visibility via CSS.
- *
- * @component
- * @example
- * ```tsx
- * // Default usage - renders subtotal, tax, discount, total
- * <Payment.Summary className="space-y-2" />
- *
- * // Custom rendering with full summary data
- * <Payment.Summary asChild>
- *   {({ subtotal, tax, hasTax, discount, hasDiscount, total, payNow, isDeposit }) => (
- *     <div>
- *       <div>Subtotal: <Money money={subtotal} /></div>
- *       <div data-has-tax={hasTax}>Tax: <Money money={tax} /></div>
- *       <div data-has-discount={hasDiscount}>Discount: <Money money={discount} /></div>
- *       <div>Total: <Money money={total} /></div>
- *       <div data-has-deposit={isDeposit}>Pay Now: <Money money={payNow} /></div>
- *     </div>
- *   )}
- * </Payment.Summary>
- * ```
- */
-export declare const Summary: React.ForwardRefExoticComponent<SummaryProps & React.RefAttributes<HTMLElement>>;
 /**
  * Props for Payment.Subtotal component
  */
@@ -128,7 +84,6 @@ export interface TaxProps {
     asChild?: boolean;
     children?: AsChildChildren<{
         tax: MoneyData | null;
-        hasTax: boolean;
     }>;
     className?: string;
 }
@@ -150,7 +105,6 @@ export interface DiscountProps {
     asChild?: boolean;
     children?: AsChildChildren<{
         discount: MoneyData | null;
-        hasDiscount: boolean;
     }>;
     className?: string;
 }
@@ -192,7 +146,6 @@ export interface PayNowProps {
     asChild?: boolean;
     children?: AsChildChildren<{
         payNow: MoneyData | null;
-        isDeposit: boolean;
     }>;
     className?: string;
 }
@@ -214,7 +167,6 @@ export interface PayLaterProps {
     asChild?: boolean;
     children?: AsChildChildren<{
         payLater: MoneyData | null;
-        isDeposit: boolean;
     }>;
     className?: string;
 }
@@ -229,12 +181,6 @@ export interface PayLaterProps {
  * ```
  */
 export declare const PayLater: React.ForwardRefExoticComponent<PayLaterProps & React.RefAttributes<HTMLElement>>;
-/**
- * Type for line item with required id field for GenericList
- */
-type LineItemType = CombinedLineItem & {
-    id: string;
-};
 /**
  * Props for Payment.LineItems component (Container Level)
  */
@@ -246,31 +192,22 @@ export interface LineItemsProps {
 /**
  * Container component for line items.
  * Follows the 3-level List/Options/Repeater pattern.
- * Provides context and doesn't render when there are no line items.
+ * Provides context and handles loading/error states via GenericList.
  *
  * @component
  * @example
  * ```tsx
  * <Payment.LineItems>
- *   <Payment.LineItemsList>
+ *   <Payment.LineItemsList
+ *     emptyState={<div>No items</div>}
+ *     loadingState={<div>Loading...</div>}
+ *     errorState={<div>Failed to load</div>}
+ *   >
  *     <Payment.LineItemRepeater>
- *       <LineItem.Price />
+ *       <Payment.LineItemPrice />
  *     </Payment.LineItemRepeater>
  *   </Payment.LineItemsList>
  * </Payment.LineItems>
- *
- * // With asChild pattern for custom container
- * <Payment.LineItems asChild>
- *   {({ lineItems, currency }) => (
- *     <div className="border rounded p-4">
- *       <Payment.LineItemsList>
- *         <Payment.LineItemRepeater>
- *           <LineItem.Price />
- *         </Payment.LineItemRepeater>
- *       </Payment.LineItemsList>
- *     </div>
- *   )}
- * </Payment.LineItems>
  * ```
  */
 export declare const LineItems: React.ForwardRefExoticComponent<LineItemsProps & React.RefAttributes<HTMLElement>>;
@@ -279,16 +216,25 @@ export declare const LineItems: React.ForwardRefExoticComponent<LineItemsProps &
  */
 export interface LineItemsListProps {
     children?: React.ReactNode;
+    /** Content to display when no items are available */
     emptyState?: React.ReactNode;
+    /** Content to display when loading */
+    loadingState?: React.ReactNode;
+    /** Content to display when there's an error */
+    errorState?: React.ReactNode;
     className?: string;
 }
 /**
- * List container for line items with empty state support.
+ * List container for line items with empty/loading/error state support.
  *
  * @component
  * @example
  * ```tsx
- * <Payment.LineItemsList emptyState={<div>No items</div>}>
+ * <Payment.LineItemsList
+ *   emptyState={<div>No items</div>}
+ *   loadingState={<div>Loading...</div>}
+ *   errorState={<div>Failed to load payment details</div>}
+ * >
  *   <Payment.LineItemRepeater />
  * </Payment.LineItemsList>
  * ```
@@ -298,9 +244,9 @@ export declare const LineItemsList: React.ForwardRefExoticComponent<LineItemsLis
  * Render props for LineItemRepeater asChild pattern
  */
 export interface LineItemRepeaterRenderProps {
-    items: LineItemType[];
+    items: CoreLineItem[];
     itemWrapper: (props: {
-        item: LineItemType;
+        item: CoreLineItem;
         index: number;
         children: React.ReactNode;
     }) => React.ReactNode;
@@ -313,7 +259,7 @@ export interface LineItemRepeaterProps {
     asChild?: boolean;
 }
 /**
- * Repeater component that renders LineItem.Root for each line item.
+ * Repeater component that renders LineItemRoot for each line item.
  * Supports asChild pattern for custom rendering.
  *
  * @component
@@ -321,7 +267,7 @@ export interface LineItemRepeaterProps {
  * ```tsx
  * // Standard usage
  * <Payment.LineItemRepeater>
- *   <LineItem.Price />
+ *   <Payment.LineItemPrice />
  * </Payment.LineItemRepeater>
  *
  * // AsChild usage with custom list
@@ -330,7 +276,7 @@ export interface LineItemRepeaterProps {
  *     <ol>
  *       {items.map((item, index) => (
  *         <li key={item.id}>
- *           {itemWrapper({ item, index, children: <LineItem.Price /> })}
+ *           {itemWrapper({ item, index, children: <Payment.LineItemPrice /> })}
  *         </li>
  *       ))}
  *     </ol>
@@ -339,4 +285,95 @@ export interface LineItemRepeaterProps {
  * ```
  */
 export declare const LineItemRepeater: React.ForwardRefExoticComponent<LineItemRepeaterProps & React.RefAttributes<HTMLElement>>;
-export {};
+/**
+ * Props for Payment.LineItemRoot component
+ */
+export interface LineItemRootProps {
+    lineItem: CoreLineItem;
+    currency: string;
+    children?: React.ReactNode | AsChildChildren<{
+        lineItem: CoreLineItem;
+        currency: string;
+    }>;
+    asChild?: boolean;
+    className?: string;
+    'data-testid'?: string;
+}
+/**
+ * Root component for a single line item.
+ * Provides context for child components.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Payment.LineItemRoot lineItem={item} currency="USD">
+ *   <Payment.LineItemPrice />
+ *   <Payment.LineItemDiscount />
+ * </Payment.LineItemRoot>
+ * ```
+ */
+export declare const LineItemRoot: React.ForwardRefExoticComponent<LineItemRootProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Payment.LineItemPrice component
+ */
+export interface LineItemPriceProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        totalPrice: MoneyData | null;
+        priceText: string | null;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the line item price.
+ * Shows priceText for CUSTOM rate type services, otherwise shows totalPrice.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Payment.LineItemPrice className="text-lg font-bold" />
+ * ```
+ */
+export declare const LineItemPrice: React.ForwardRefExoticComponent<LineItemPriceProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Payment.LineItemDiscount component
+ */
+export interface LineItemDiscountProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        discount: MoneyData | null;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the line item discount.
+ * Uses data-has-discount attribute for conditional visibility.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Payment.LineItemDiscount className="text-green-500" />
+ * ```
+ */
+export declare const LineItemDiscount: React.ForwardRefExoticComponent<LineItemDiscountProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Payment.LineItemDeposit component
+ */
+export interface LineItemDepositProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        deposit: MoneyData | null;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the line item deposit amount.
+ * Uses data-has-deposit attribute for conditional visibility.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Payment.LineItemDeposit className="font-semibold" />
+ * ```
+ */
+export declare const LineItemDeposit: React.ForwardRefExoticComponent<LineItemDepositProps & React.RefAttributes<HTMLElement>>;