@wix/headless-bookings 0.0.38 → 0.0.40

package/dist/react/payment/Payment.js

@@ -1,17 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Payment - High-level component for displaying payment information
  * Provides components for displaying payment summary, totals, and line items
  */
 import React from 'react';
 import * as CorePayment from '../core/payment/Payment.js';
-import * as PaymentLineItem from './PaymentLineItem.js';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import { Money, GenericList } from '@wix/headless-components/react';
 var TestIds;
 (function (TestIds) {
     TestIds["paymentRoot"] = "payment-root";
-    TestIds["paymentSummary"] = "payment-summary";
     TestIds["paymentSubtotal"] = "payment-subtotal";
     TestIds["paymentTax"] = "payment-tax";
     TestIds["paymentDiscount"] = "payment-discount";
@@ -21,6 +19,10 @@ var TestIds;
     TestIds["paymentLineItems"] = "payment-line-items";
     TestIds["paymentLineItemsList"] = "payment-line-items-list";
     TestIds["paymentLineItemRepeater"] = "payment-line-item-repeater";
+    TestIds["paymentLineItemRoot"] = "payment-line-item-root";
+    TestIds["paymentLineItemPrice"] = "payment-line-item-price";
+    TestIds["paymentLineItemDiscount"] = "payment-line-item-discount";
+    TestIds["paymentLineItemDeposit"] = "payment-line-item-deposit";
 })(TestIds || (TestIds = {}));
 /**
  * Root component that provides payment context to the entire app.
@@ -33,13 +35,13 @@ var TestIds;
  * @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>
  *   );
  * }
@@ -48,7 +50,7 @@ var TestIds;
  * 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>
  *   );
  * }
@@ -61,40 +63,6 @@ export const Root = React.forwardRef((props, ref) => {
         } }));
 });
 Root.displayName = 'Payment.Root';
-/**
- * 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 const Summary = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
-    return (_jsx(CorePayment.Summary, { children: (summaryData) => {
-            const { subtotal, total, tax, discount, payNow, payLater, isDeposit, } = summaryData;
-            // Default rendering
-            const renderDefaultSummary = () => (_jsxs("div", { className: className, "data-testid": TestIds.paymentSummary, children: [_jsx("div", { "data-testid": TestIds.paymentSubtotal, children: subtotal && _jsx(Money, { money: subtotal }) }), _jsx("div", { "data-testid": TestIds.paymentTax, "data-has-tax": tax !== null && tax.amount > 0, children: tax && _jsx(Money, { money: tax }) }), _jsx("div", { "data-testid": TestIds.paymentDiscount, "data-has-discount": discount !== null && discount.amount > 0, children: discount && _jsx(Money, { money: discount }) }), _jsx("div", { "data-testid": TestIds.paymentTotal, children: total && _jsx(Money, { money: total }) }), _jsx("div", { "data-testid": TestIds.paymentPayNow, "data-has-deposit": isDeposit, children: payNow && _jsx(Money, { money: payNow }) }), _jsx("div", { "data-testid": TestIds.paymentPayLater, "data-has-deposit": isDeposit, children: payLater && _jsx(Money, { money: payLater }) })] }));
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentSummary, "data-has-tax": tax !== null && tax.amount > 0, "data-has-discount": discount !== null && discount.amount > 0, "data-has-deposit": isDeposit, customElement: children, customElementProps: summaryData, children: renderDefaultSummary() }));
-        } }));
-});
-Summary.displayName = 'Payment.Summary';
 /**
  * Displays the payment subtotal.
  *
@@ -106,7 +74,7 @@ Summary.displayName = 'Payment.Summary';
  */
 export const Subtotal = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CorePayment.Summary, { children: ({ subtotal }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentSubtotal, customElement: children, customElementProps: { subtotal }, children: subtotal ? _jsx(Money, { money: subtotal }) : null })) }));
+    return (_jsx(CorePayment.Data, { children: ({ subtotal }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentSubtotal, customElement: children, customElementProps: { subtotal }, children: subtotal ? _jsx(Money, { money: subtotal }) : null })) }));
 });
 Subtotal.displayName = 'Payment.Subtotal';
 /**
@@ -121,7 +89,10 @@ Subtotal.displayName = 'Payment.Subtotal';
  */
 export const Tax = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CorePayment.Summary, { children: ({ tax, hasTax }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentTax, "data-has-tax": hasTax, customElement: children, customElementProps: { tax, hasTax }, children: tax ? _jsx(Money, { money: tax }) : null })) }));
+    return (_jsx(CorePayment.Data, { children: ({ tax }) => {
+            const hasTax = tax !== null && tax.amount > 0;
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentTax, "data-has-tax": hasTax, customElement: children, customElementProps: { tax }, children: tax ? _jsx(Money, { money: tax }) : null }));
+        } }));
 });
 Tax.displayName = 'Payment.Tax';
 /**
@@ -136,7 +107,10 @@ Tax.displayName = 'Payment.Tax';
  */
 export const Discount = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CorePayment.Summary, { children: ({ discount, hasDiscount }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentDiscount, "data-has-discount": hasDiscount, customElement: children, customElementProps: { discount, hasDiscount }, children: discount ? _jsx(Money, { money: discount }) : null })) }));
+    return (_jsx(CorePayment.Data, { children: ({ discount }) => {
+            const hasDiscount = discount !== null && discount.amount > 0;
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentDiscount, "data-has-discount": hasDiscount, customElement: children, customElementProps: { discount }, children: discount ? _jsx(Money, { money: discount }) : null }));
+        } }));
 });
 Discount.displayName = 'Payment.Discount';
 /**
@@ -150,7 +124,7 @@ Discount.displayName = 'Payment.Discount';
  */
 export const Total = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CorePayment.Summary, { children: ({ total }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentTotal, customElement: children, customElementProps: { total }, children: total ? _jsx(Money, { money: total }) : null })) }));
+    return (_jsx(CorePayment.Data, { children: ({ total }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentTotal, customElement: children, customElementProps: { total }, children: total ? _jsx(Money, { money: total }) : null })) }));
 });
 Total.displayName = 'Payment.Total';
 /**
@@ -165,7 +139,10 @@ Total.displayName = 'Payment.Total';
  */
 export const PayNow = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CorePayment.Summary, { children: ({ payNow, isDeposit }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentPayNow, "data-has-deposit": isDeposit, customElement: children, customElementProps: { payNow, isDeposit }, children: payNow ? _jsx(Money, { money: payNow }) : null })) }));
+    return (_jsx(CorePayment.Data, { children: ({ payNow, total }) => {
+            const isDeposit = payNow !== null && total !== null && payNow.amount < total.amount;
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentPayNow, "data-has-deposit": isDeposit, customElement: children, customElementProps: { payNow }, children: payNow ? _jsx(Money, { money: payNow }) : null }));
+        } }));
 });
 PayNow.displayName = 'Payment.PayNow';
 /**
@@ -180,51 +157,36 @@ PayNow.displayName = 'Payment.PayNow';
  */
 export const PayLater = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CorePayment.Summary, { children: ({ payLater, isDeposit }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentPayLater, "data-has-deposit": isDeposit, customElement: children, customElementProps: { payLater, isDeposit }, children: payLater ? _jsx(Money, { money: payLater }) : null })) }));
+    return (_jsx(CorePayment.Data, { children: ({ payLater, payNow, total }) => {
+            const isDeposit = payNow !== null && total !== null && payNow.amount < total.amount;
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentPayLater, "data-has-deposit": isDeposit, customElement: children, customElementProps: { payLater }, children: payLater ? _jsx(Money, { money: payLater }) : null }));
+        } }));
 });
 PayLater.displayName = 'Payment.PayLater';
 /**
  * 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 const LineItems = React.forwardRef((props, ref) => {
     const { asChild, children, className, ...attributes } = props;
-    return (_jsx(CorePayment.LineItems, { children: ({ lineItems, currency }) => {
-            if (!lineItems.length)
-                return null;
-            // Map line items to include required id field for GenericList
-            const items = lineItems.map((item, index) => ({
-                ...item,
-                id: item.sdkLineItem.lineItemId || String(index),
-            }));
-            return (_jsx(GenericList.Root, { items: items, children: _jsx(LineItemsContext.Provider, { value: { currency }, children: _jsx(AsChildSlot, { ...attributes, ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItems, customElement: children, customElementProps: { lineItems, currency }, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }) }));
-        } }));
+    return (_jsx(CorePayment.LineItems, { children: ({ lineItems, currency, isLoading, error }) => (_jsx(GenericList.Root, { items: lineItems, isLoading: isLoading, error: error, children: _jsx(LineItemsContext.Provider, { value: { currency }, children: _jsx(AsChildSlot, { ...attributes, ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItems, "data-loading": isLoading, "data-error": !!error, customElement: children, customElementProps: { lineItems, currency, isLoading, error }, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }) })) }));
 });
 LineItems.displayName = 'Payment.LineItems';
 // Context for line items currency
@@ -237,23 +199,27 @@ function useLineItemsContext() {
     return context;
 }
 /**
- * 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>
  * ```
  */
 export const LineItemsList = React.forwardRef((props, ref) => {
-    const { children, emptyState, className, ...otherProps } = props;
-    return (_jsx(GenericList.Items, { ref: ref, emptyState: emptyState, className: className, "data-testid": TestIds.paymentLineItemsList, ...otherProps, children: children }));
+    const { children, emptyState, loadingState, errorState, className, ...otherProps } = props;
+    return (_jsx(GenericList.Items, { ref: ref, emptyState: emptyState, loadingState: loadingState, errorState: errorState, className: className, "data-testid": TestIds.paymentLineItemsList, ...otherProps, children: children }));
 });
 LineItemsList.displayName = 'Payment.LineItemsList';
 /**
- * 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
@@ -261,7 +227,7 @@ LineItemsList.displayName = 'Payment.LineItemsList';
  * ```tsx
  * // Standard usage
  * <Payment.LineItemRepeater>
- *   <LineItem.Price />
+ *   <Payment.LineItemPrice />
  * </Payment.LineItemRepeater>
  *
  * // AsChild usage with custom list
@@ -270,7 +236,7 @@ LineItemsList.displayName = 'Payment.LineItemsList';
  *     <ol>
  *       {items.map((item, index) => (
  *         <li key={item.id}>
- *           {itemWrapper({ item, index, children: <LineItem.Price /> })}
+ *           {itemWrapper({ item, index, children: <Payment.LineItemPrice /> })}
  *         </li>
  *       ))}
  *     </ol>
@@ -281,10 +247,89 @@ LineItemsList.displayName = 'Payment.LineItemsList';
 export const LineItemRepeater = React.forwardRef((props, ref) => {
     const { children, asChild } = props;
     const { currency } = useLineItemsContext();
-    // Custom itemWrapper that renders LineItem.Root for each line item
+    // Custom itemWrapper that renders LineItemRoot for each line item
     const lineItemWrapper = ({ item, children: itemChildren, }) => {
-        return (_jsx(PaymentLineItem.Root, { lineItem: item, currency: currency, "data-testid": TestIds.paymentLineItemRepeater, children: itemChildren || undefined }, item.id));
+        return (_jsx(LineItemRoot, { lineItem: item, currency: currency, "data-testid": TestIds.paymentLineItemRepeater, children: itemChildren || undefined }, item.id));
     };
     return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: lineItemWrapper, asChild: asChild, children: children }));
 });
 LineItemRepeater.displayName = 'Payment.LineItemRepeater';
+const LineItemContext = React.createContext(null);
+function useLineItemContext() {
+    const context = React.useContext(LineItemContext);
+    if (!context) {
+        throw new Error('useLineItemContext must be used within a Payment.LineItemRoot component');
+    }
+    return context;
+}
+/**
+ * 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 const LineItemRoot = React.forwardRef((props, ref) => {
+    const { lineItem, currency, children, asChild, className, ...attrs } = props;
+    return (_jsx(LineItemContext.Provider, { value: { lineItem, currency }, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": attrs['data-testid'] || TestIds.paymentLineItemRoot, customElement: children, customElementProps: { lineItem, currency }, ...attrs, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
+});
+LineItemRoot.displayName = 'Payment.LineItemRoot';
+/**
+ * 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 const LineItemPrice = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    const { lineItem } = useLineItemContext();
+    const { totalPrice, priceText } = lineItem;
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemPrice, "data-has-price-text": !!priceText, customElement: children, customElementProps: { totalPrice, priceText }, children: priceText ? _jsx("span", { children: priceText }) : totalPrice ? _jsx(Money, { money: totalPrice }) : null }));
+});
+LineItemPrice.displayName = 'Payment.LineItemPrice';
+/**
+ * Displays the line item discount.
+ * Uses data-has-discount attribute for conditional visibility.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Payment.LineItemDiscount className="text-green-500" />
+ * ```
+ */
+export const LineItemDiscount = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    const { lineItem } = useLineItemContext();
+    const { discount } = lineItem;
+    const hasDiscount = discount !== null && discount.amount > 0;
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemDiscount, "data-has-discount": hasDiscount, customElement: children, customElementProps: { discount }, children: discount ? _jsx(Money, { money: discount }) : null }));
+});
+LineItemDiscount.displayName = 'Payment.LineItemDiscount';
+/**
+ * Displays the line item deposit amount.
+ * Uses data-has-deposit attribute for conditional visibility.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Payment.LineItemDeposit className="font-semibold" />
+ * ```
+ */
+export const LineItemDeposit = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    const { lineItem } = useLineItemContext();
+    const { deposit } = lineItem;
+    const hasDeposit = deposit !== null && deposit.amount > 0;
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemDeposit, "data-has-deposit": hasDeposit, customElement: children, customElementProps: { deposit }, children: deposit ? _jsx(Money, { money: deposit }) : null }));
+});
+LineItemDeposit.displayName = 'Payment.LineItemDeposit';

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

@@ -7,9 +7,31 @@
  */
 import React from 'react';
 import { AsChildChildren } from '@wix/headless-utils/react';
-export { TimeSlotProvider } from '../core/time-slot-list/TimeSlot.js';
-export type { TimeSlotProviderProps } from '../core/time-slot-list/TimeSlot.js';
+import type { TimeSlot as TimeSlotType } from '@wix/auto_sdk_bookings_availability-time-slots';
 export type { StaffMemberData } from '../core/time-slot-list/TimeSlot.js';
+/**
+ * Props for TimeSlot.Root component
+ */
+export interface RootProps {
+    children?: React.ReactNode;
+    timeSlot: TimeSlotType;
+    asChild?: boolean;
+    className?: string;
+}
+/**
+ * Root component that provides time slot context.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlot.Root timeSlot={timeSlot}>
+ *   <TimeSlot.StartDate />
+ *   <TimeSlot.Duration />
+ * </TimeSlot.Root>
+ * ```
+ */
+export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLElement>>;
 /**
  * Props for TimeSlot.StartDate component
  */

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

@@ -10,8 +10,24 @@ import React from 'react';
 import { GenericList } from '@wix/headless-components/react';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import * as CoreTimeSlot from '../core/time-slot-list/TimeSlot.js';
-// Re-export TimeSlotProvider from core for use by TimeSlotRepeater
-export { TimeSlotProvider } from '../core/time-slot-list/TimeSlot.js';
+/**
+ * Root component that provides time slot context.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlot.Root timeSlot={timeSlot}>
+ *   <TimeSlot.StartDate />
+ *   <TimeSlot.Duration />
+ * </TimeSlot.Root>
+ * ```
+ */
+export const Root = React.forwardRef((props, ref) => {
+    const { children, timeSlot, asChild, className, ...attrs } = props;
+    return (_jsx(CoreTimeSlot.Root, { config: { timeSlot }, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, customElement: children, ...attrs, children: children }) }));
+});
+Root.displayName = 'TimeSlot.Root';
 // ============================================================================
 // TestIds
 // ============================================================================

package/dist/react/time-slot-list/TimeSlotList.js

@@ -7,8 +7,8 @@ import React from 'react';
 import { GenericList } from '@wix/headless-components/react';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import * as CoreTimeSlotList from '../core/time-slot-list/TimeSlotList.js';
-import { TimeSlotProvider, Info as CoreTimeSlotInfo, } from '../core/time-slot-list/TimeSlot.js';
-import { StartDate as TimeSlotStartDate, EndDate as TimeSlotEndDate, Duration, Actions as TimeSlotActions, Location, StaffMembers, StaffMemberRepeater, StaffMember, } from './TimeSlot.js';
+import * as CoreTimeSlot from '../core/time-slot-list/TimeSlot.js';
+import { StartDate as TimeSlotStartDate, EndDate as TimeSlotEndDate, Duration, Actions as TimeSlotActions, Location, StaffMembers, StaffMemberRepeater, StaffMember, Root as TimeSlotRoot, } from './TimeSlot.js';
 // ============================================================================
 // Utilities
 // ============================================================================
@@ -122,9 +122,7 @@ TimeSlots.displayName = 'TimeSlotList.TimeSlots';
  * Supports both ReactNode and function children patterns.
  */
 const TimeSlotItemWrapper = ({ timeSlot, children, }) => {
-    return (_jsx(TimeSlotProvider, { timeSlot: timeSlot, children: _jsx(CoreTimeSlotInfo, { children: (props) => {
-                return (_jsx("div", { "data-testid": TestIds.timeSlotListTimeSlot, "data-bookable": props.bookable, "data-selected": props.isSelected, children: typeof children === 'function' ? children(props) : children }));
-            } }) }));
+    return (_jsx(TimeSlotRoot, { timeSlot: timeSlot, children: _jsx(CoreTimeSlot.Info, { children: (props) => (_jsx("div", { "data-testid": TestIds.timeSlotListTimeSlot, "data-bookable": props.bookable, "data-selected": props.isSelected, children: typeof children === 'function' ? children(props) : children })) }) }));
 };
 /**
  * Repeater component that renders each time slot.

package/dist/services/index.d.ts

@@ -4,7 +4,7 @@
  */
 export { ServiceService, ServiceServiceDefinition, type ServiceServiceAPI, type ServiceServiceConfig, type ServiceActions, type ServicePaymentData, loadServiceServiceInitialData, type SuccessServiceServiceConfigResult, type NotFoundServiceServiceConfigResult, } from './service/service.js';
 export { BookingService, BookingServiceDefinition, type BookingServiceConfig, type BookingServiceActions, type ServiceSelection, type ServiceSelectionTimeSlot, } from './booking/booking.js';
-export { TimeSlotListService, TimeSlotListServiceDefinition, ViewMode, loadTimeSlotListConfig, type TimeSlotListServiceAPI, type TimeSlotListServiceActions, type TimeSlotListServiceConfig, type LoadTimeSlotListConfigOptions, type LoadTimeSlotListConfigResult, } from './time-slot-list/index.js';
+export { TimeSlotListService, TimeSlotListServiceDefinition, TimeSlotService, TimeSlotServiceDefinition, ViewMode, loadTimeSlotListConfig, type TimeSlotListServiceAPI, type TimeSlotListServiceActions, type TimeSlotListServiceConfig, type TimeSlotServiceAPI, type TimeSlotServiceConfig, type LoadTimeSlotListConfigOptions, type LoadTimeSlotListConfigResult, } from './time-slot-list/index.js';
 export { ServiceListService, ServiceListServiceDefinition, type ServiceListServiceAPI, type ServiceListServiceConfig, type ServiceListFilters, type ServiceListActions, type QueryOptions, loadServiceListServiceInitialData, type SuccessServiceListServiceConfigResult, type ErrorServiceListServiceConfigResult, } from './service-list/service-list.js';
 export { executeBookAction, canBook, buildBookingRequest, buildCheckoutRequest, type CanBookParams, type BookResult, type BookingError, type BookActionParams, type BookChildProps, type BookProps, type BuildCheckoutParams, } from './booking/book-action/index.js';
 export { BookingFormService, BookingFormServiceDefinition, type BookingFormServiceAPI, type BookingFormServiceConfig, type BookingFormServiceInternalAPI, type ValidationResult, } from './booking-form/booking-form.js';

package/dist/services/index.js

@@ -4,7 +4,7 @@
  */
 export { ServiceService, ServiceServiceDefinition, loadServiceServiceInitialData, } from './service/service.js';
 export { BookingService, BookingServiceDefinition, } from './booking/booking.js';
-export { TimeSlotListService, TimeSlotListServiceDefinition, ViewMode, loadTimeSlotListConfig, } from './time-slot-list/index.js';
+export { TimeSlotListService, TimeSlotListServiceDefinition, TimeSlotService, TimeSlotServiceDefinition, ViewMode, loadTimeSlotListConfig, } from './time-slot-list/index.js';
 export { ServiceListService, ServiceListServiceDefinition, loadServiceListServiceInitialData, } from './service-list/service-list.js';
 export { executeBookAction, canBook, buildBookingRequest, buildCheckoutRequest, } from './booking/book-action/index.js';
 export { BookingFormService, BookingFormServiceDefinition, } from './booking-form/booking-form.js';

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

@@ -34,7 +34,8 @@ export interface PaymentDetails {
  */
 export interface SlotService {
     service: Service;
-    lineItemId: string;
+    /** Optional line item ID. If not provided, one will be generated. */
+    lineItemId?: string;
 }
 /**
  * Public config for PaymentService (SSR mode only):

package/dist/services/payment/payment.js

@@ -9,6 +9,7 @@ import { calculateTotals, } from '@wix/auto_sdk_ecom_totals-calculator';
 import { BookingServiceDefinition } from '../booking/booking.js';
 import { RateType } from '@wix/auto_sdk_bookings_services';
 import { PaymentServiceDefinition, } from './payment.def.js';
+import { generateLineItemId } from '../../utils/guid.js';
 export { PaymentServiceDefinition, } from './payment.def.js';
 // ============================================================================
 // Constants
@@ -54,11 +55,16 @@ function buildLineItem(service, numberOfParticipants, lineItemId) {
     };
 }
 async function calculatePaymentDetails(slotServices, numberOfParticipants) {
-    const lineItems = slotServices.map((input) => buildLineItem(input.service, numberOfParticipants, input.lineItemId));
+    // Ensure all slot services have a lineItemId
+    const data = slotServices.map((slot) => ({
+        ...slot,
+        lineItemId: slot.lineItemId || generateLineItemId(),
+    }));
+    const lineItems = data.map((item) => buildLineItem(item.service, numberOfParticipants, item.lineItemId));
     const response = await calculateTotals({
         lineItems,
     });
-    const additionalInfoList = slotServices.map((input) => getAdditionalInfo(input.service, input.lineItemId));
+    const additionalInfoList = data.map((item) => getAdditionalInfo(item.service, item.lineItemId));
     return {
         response,
         additionalInfo: {

package/dist/services/time-slot-list/index.d.ts

@@ -4,3 +4,4 @@
  */
 export { TimeSlotListServiceDefinition, ViewMode, type DateRange, type TimeSlotListServiceAPI, type TimeSlotListServiceActions, type TimeSlotListServiceConfig, type TimeSlotsFilters, } from './time-slot-list.def.js';
 export { TimeSlotListService, loadTimeSlotListConfig, type LoadTimeSlotListConfigOptions, type LoadTimeSlotListConfigResult, } from './time-slot-list.js';
+export { TimeSlotService, TimeSlotServiceDefinition, type TimeSlotServiceAPI, type TimeSlotServiceConfig, } from './time-slot.js';

package/dist/services/time-slot-list/index.js

@@ -4,3 +4,4 @@
  */
 export { TimeSlotListServiceDefinition, ViewMode, } from './time-slot-list.def.js';
 export { TimeSlotListService, loadTimeSlotListConfig, } from './time-slot-list.js';
+export { TimeSlotService, TimeSlotServiceDefinition, } from './time-slot.js';

package/dist/services/time-slot-list/time-slot.d.ts

@@ -0,0 +1,35 @@
+/**
+ * TimeSlot Service
+ * Manages individual time slot data
+ */
+import { type Signal } from '@wix/services-definitions/core-services/signals';
+import type { TimeSlot } from '@wix/auto_sdk_bookings_availability-time-slots';
+/**
+ * API interface for the TimeSlot service
+ */
+export interface TimeSlotServiceAPI {
+    /** Reactive signal containing the time slot data */
+    timeSlotSignal: Signal<TimeSlot>;
+}
+/**
+ * Service definition for TimeSlot
+ */
+export declare const TimeSlotServiceDefinition: string & {
+    __api: TimeSlotServiceAPI;
+    __config: {};
+    isServiceDefinition?: boolean;
+} & TimeSlotServiceAPI;
+/**
+ * Configuration for TimeSlotService
+ */
+export interface TimeSlotServiceConfig {
+    timeSlot: TimeSlot;
+}
+/**
+ * Implementation of TimeSlotService
+ */
+export declare const TimeSlotService: import("@wix/services-definitions").ServiceFactory<string & {
+    __api: TimeSlotServiceAPI;
+    __config: {};
+    isServiceDefinition?: boolean;
+} & TimeSlotServiceAPI, TimeSlotServiceConfig>;

package/dist/services/time-slot-list/time-slot.js

@@ -0,0 +1,20 @@
+/**
+ * TimeSlot Service
+ * Manages individual time slot data
+ */
+import { defineService, implementService } from '@wix/services-definitions';
+import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
+/**
+ * Service definition for TimeSlot
+ */
+export const TimeSlotServiceDefinition = defineService('time-slot');
+/**
+ * Implementation of TimeSlotService
+ */
+export const TimeSlotService = implementService.withConfig()(TimeSlotServiceDefinition, ({ getService, config }) => {
+    const signalsService = getService(SignalsServiceDefinition);
+    const timeSlotSignal = signalsService.signal(config.timeSlot);
+    return {
+        timeSlotSignal,
+    };
+});

package/dist/utils/guid.d.ts

@@ -0,0 +1,7 @@
+/**
+ * ID generation utilities
+ */
+/**
+ * Generates a unique line item ID in Ecom's GUID format
+ */
+export declare function generateLineItemId(): string;

package/dist/utils/guid.js

@@ -0,0 +1,12 @@
+/**
+ * ID generation utilities
+ */
+/**
+ * Generates a unique line item ID in Ecom's GUID format
+ */
+export function generateLineItemId() {
+    const s4 = () => Math.floor((1 + Math.random()) * 0x10000)
+        .toString(16)
+        .substring(1);
+    return `${s4()}${s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-bookings",
-  "version": "0.0.38",
+  "version": "0.0.40",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -72,5 +72,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "9f684dcab2e31f9a11e4fa26eb6c63aef1f039fd24342eb4e056f05d"
+  "falconPackageHash": "74b83da9361fcd8b13b0615fe645d53672b0f2db9714094ec5026205"
 }