@wix/headless-bookings 0.0.39 → 0.0.41

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

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