@wix/headless-bookings 0.0.30 → 0.0.32

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

@@ -0,0 +1,342 @@
+/**
+ * Payment - High-level component for displaying payment information
+ * Provides components for displaying payment summary, totals, and line items
+ */
+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';
+/**
+ * Props for Payment.Root component
+ */
+export interface RootProps {
+    children?: React.ReactNode | ((props: {
+        isLoading: boolean;
+        hasError: boolean;
+    }) => React.ReactNode);
+    /** Service config for SSR (pre-fetched paymentDetails) */
+    paymentServiceConfig?: PaymentServiceConfig;
+    /** Slot services for lazy loading (triggers API call) */
+    slotServices?: SlotService[];
+    /** Number of participants for lazy loading */
+    numberOfParticipants?: number;
+    asChild?: boolean;
+    className?: string;
+}
+/**
+ * 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
+ * 3. Reactive: no config/props - reads from BookingService signals
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { Payment, PaymentLineItem } from '@wix/bookings/components';
+ *
+ * // SSR mode
+ * function PaymentPage({ paymentDetails }) {
+ *   return (
+ *     <Payment.Root paymentServiceConfig={{ paymentDetails }}>
+ *       <Payment.Summary />
+ *     </Payment.Root>
+ *   );
+ * }
+ *
+ * // Lazy loading mode
+ * function LazyPayment({ slotServices }) {
+ *   return (
+ *     <Payment.Root slotServices={slotServices} numberOfParticipants={2}>
+ *       {({ isLoading }) => isLoading ? <div>Loading...</div> : <Payment.Summary />}
+ *     </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
+ */
+export interface SubtotalProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        subtotal: MoneyData | null;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the payment subtotal.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Payment.Subtotal className="text-lg" />
+ * ```
+ */
+export declare const Subtotal: React.ForwardRefExoticComponent<SubtotalProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Payment.Tax component
+ */
+export interface TaxProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        tax: MoneyData | null;
+        hasTax: boolean;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the payment tax.
+ * Uses data-has-tax attribute for conditional visibility.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Payment.Tax className="text-secondary-foreground" />
+ * ```
+ */
+export declare const Tax: React.ForwardRefExoticComponent<TaxProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Payment.Discount component
+ */
+export interface DiscountProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        discount: MoneyData | null;
+        hasDiscount: boolean;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the payment discount.
+ * Uses data-has-discount attribute for conditional visibility.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Payment.Discount className="text-green-500" />
+ * ```
+ */
+export declare const Discount: React.ForwardRefExoticComponent<DiscountProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Payment.Total component
+ */
+export interface TotalProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        total: MoneyData | null;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the payment total.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Payment.Total className="text-2xl font-bold" />
+ * ```
+ */
+export declare const Total: React.ForwardRefExoticComponent<TotalProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Payment.PayNow component
+ */
+export interface PayNowProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        payNow: MoneyData | null;
+        isDeposit: boolean;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the pay now amount (for deposit scenarios).
+ * Uses data-has-deposit attribute for conditional visibility.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Payment.PayNow className="font-semibold" />
+ * ```
+ */
+export declare const PayNow: React.ForwardRefExoticComponent<PayNowProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Payment.PayLater component
+ */
+export interface PayLaterProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        payLater: MoneyData | null;
+        isDeposit: boolean;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the pay later amount (for deposit scenarios).
+ * Uses data-has-deposit attribute for conditional visibility.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Payment.PayLater className="text-secondary-foreground" />
+ * ```
+ */
+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)
+ */
+export interface LineItemsProps {
+    asChild?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * 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.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Payment.LineItems>
+ *   <Payment.LineItemsList>
+ *     <Payment.LineItemRepeater>
+ *       <LineItem.Price />
+ *     </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>>;
+/**
+ * Props for Payment.LineItemsList component
+ */
+export interface LineItemsListProps {
+    children?: React.ReactNode;
+    emptyState?: React.ReactNode;
+    className?: string;
+}
+/**
+ * List container for line items with empty state support.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Payment.LineItemsList emptyState={<div>No items</div>}>
+ *   <Payment.LineItemRepeater />
+ * </Payment.LineItemsList>
+ * ```
+ */
+export declare const LineItemsList: React.ForwardRefExoticComponent<LineItemsListProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Render props for LineItemRepeater asChild pattern
+ */
+export interface LineItemRepeaterRenderProps {
+    items: LineItemType[];
+    itemWrapper: (props: {
+        item: LineItemType;
+        index: number;
+        children: React.ReactNode;
+    }) => React.ReactNode;
+}
+/**
+ * Props for Payment.LineItemRepeater component
+ */
+export interface LineItemRepeaterProps {
+    children?: React.ReactNode | ((props: LineItemRepeaterRenderProps) => React.ReactNode);
+    asChild?: boolean;
+}
+/**
+ * Repeater component that renders LineItem.Root for each line item.
+ * Supports asChild pattern for custom rendering.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Standard usage
+ * <Payment.LineItemRepeater>
+ *   <LineItem.Price />
+ * </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: <LineItem.Price /> })}
+ *         </li>
+ *       ))}
+ *     </ol>
+ *   )}
+ * </Payment.LineItemRepeater>
+ * ```
+ */
+export declare const LineItemRepeater: React.ForwardRefExoticComponent<LineItemRepeaterProps & React.RefAttributes<HTMLElement>>;
+export {};

package/dist/react/payment/Payment.js

@@ -0,0 +1,294 @@
+import { jsx as _jsx, jsxs as _jsxs } 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";
+    TestIds["paymentTotal"] = "payment-total";
+    TestIds["paymentPayNow"] = "payment-pay-now";
+    TestIds["paymentPayLater"] = "payment-pay-later";
+    TestIds["paymentLineItems"] = "payment-line-items";
+    TestIds["paymentLineItemsList"] = "payment-line-items-list";
+    TestIds["paymentLineItemRepeater"] = "payment-line-item-repeater";
+})(TestIds || (TestIds = {}));
+/**
+ * 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
+ * 3. Reactive: no config/props - reads from BookingService signals
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { Payment, PaymentLineItem } from '@wix/bookings/components';
+ *
+ * // SSR mode
+ * function PaymentPage({ paymentDetails }) {
+ *   return (
+ *     <Payment.Root paymentServiceConfig={{ paymentDetails }}>
+ *       <Payment.Summary />
+ *     </Payment.Root>
+ *   );
+ * }
+ *
+ * // Lazy loading mode
+ * function LazyPayment({ slotServices }) {
+ *   return (
+ *     <Payment.Root slotServices={slotServices} numberOfParticipants={2}>
+ *       {({ isLoading }) => isLoading ? <div>Loading...</div> : <Payment.Summary />}
+ *     </Payment.Root>
+ *   );
+ * }
+ * ```
+ */
+export const Root = React.forwardRef((props, ref) => {
+    const { children, paymentServiceConfig, slotServices, numberOfParticipants, asChild, className, ...attrs } = props;
+    return (_jsx(CorePayment.Root, { paymentServiceConfig: paymentServiceConfig, slotServices: slotServices, numberOfParticipants: numberOfParticipants, children: ({ isLoading, hasError }) => {
+            // Handle render function children regardless of asChild
+            const resolvedChildren = typeof children === 'function'
+                ? children({ isLoading, hasError })
+                : children;
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentRoot, "data-loading": isLoading, "data-has-error": hasError, customElement: resolvedChildren, customElementProps: { isLoading, hasError }, ...attrs, children: _jsx("div", { children: React.isValidElement(resolvedChildren) ? resolvedChildren : null }) }));
+        } }));
+});
+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.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Payment.Subtotal className="text-lg" />
+ * ```
+ */
+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 })) }));
+});
+Subtotal.displayName = 'Payment.Subtotal';
+/**
+ * Displays the payment tax.
+ * Uses data-has-tax attribute for conditional visibility.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Payment.Tax className="text-secondary-foreground" />
+ * ```
+ */
+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 })) }));
+});
+Tax.displayName = 'Payment.Tax';
+/**
+ * Displays the payment discount.
+ * Uses data-has-discount attribute for conditional visibility.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Payment.Discount className="text-green-500" />
+ * ```
+ */
+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 })) }));
+});
+Discount.displayName = 'Payment.Discount';
+/**
+ * Displays the payment total.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Payment.Total className="text-2xl font-bold" />
+ * ```
+ */
+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 })) }));
+});
+Total.displayName = 'Payment.Total';
+/**
+ * Displays the pay now amount (for deposit scenarios).
+ * Uses data-has-deposit attribute for conditional visibility.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Payment.PayNow className="font-semibold" />
+ * ```
+ */
+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 })) }));
+});
+PayNow.displayName = 'Payment.PayNow';
+/**
+ * Displays the pay later amount (for deposit scenarios).
+ * Uses data-has-deposit attribute for conditional visibility.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Payment.PayLater className="text-secondary-foreground" />
+ * ```
+ */
+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 })) }));
+});
+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.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Payment.LineItems>
+ *   <Payment.LineItemsList>
+ *     <Payment.LineItemRepeater>
+ *       <LineItem.Price />
+ *     </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 }) }) }) }));
+        } }));
+});
+LineItems.displayName = 'Payment.LineItems';
+// Context for line items currency
+const LineItemsContext = React.createContext(null);
+function useLineItemsContext() {
+    const context = React.useContext(LineItemsContext);
+    if (!context) {
+        throw new Error('useLineItemsContext must be used within a Payment.LineItems component');
+    }
+    return context;
+}
+/**
+ * List container for line items with empty state support.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Payment.LineItemsList emptyState={<div>No items</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 }));
+});
+LineItemsList.displayName = 'Payment.LineItemsList';
+/**
+ * Repeater component that renders LineItem.Root for each line item.
+ * Supports asChild pattern for custom rendering.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Standard usage
+ * <Payment.LineItemRepeater>
+ *   <LineItem.Price />
+ * </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: <LineItem.Price /> })}
+ *         </li>
+ *       ))}
+ *     </ol>
+ *   )}
+ * </Payment.LineItemRepeater>
+ * ```
+ */
+export const LineItemRepeater = React.forwardRef((props, ref) => {
+    const { children, asChild } = props;
+    const { currency } = useLineItemsContext();
+    // Custom itemWrapper that renders LineItem.Root 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(GenericList.Repeater, { ref: ref, itemWrapper: lineItemWrapper, asChild: asChild, children: children }));
+});
+LineItemRepeater.displayName = 'Payment.LineItemRepeater';