@wix/headless-bookings 0.0.57 → 0.0.58

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

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

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

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

package/dist/react/payment/Payment.js

@@ -19,8 +19,8 @@ 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["paymentLineItemTotal"] = "payment-line-item-total";
+    TestIds["paymentLineItemSubtotal"] = "payment-line-item-subtotal";
     TestIds["paymentLineItemDiscount"] = "payment-line-item-discount";
     TestIds["paymentLineItemDeposit"] = "payment-line-item-deposit";
 })(TestIds || (TestIds = {}));
@@ -28,7 +28,7 @@ var 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
+ * 2. Lazy loading: pricingServiceSelections + numberOfParticipants props - calls API via useEffect
  * 3. Reactive: no config/props - reads from BookingService signals
  *
  * @order 1
@@ -57,24 +57,36 @@ var TestIds;
  * ```
  */
 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 }) => {
+    const { children, paymentServiceConfig, pricingServiceSelections, numberOfParticipants, asChild, className, ...attrs } = props;
+    return (_jsx(CorePayment.Root, { paymentServiceConfig: paymentServiceConfig, pricingServiceSelections: pricingServiceSelections, numberOfParticipants: numberOfParticipants, children: ({ isLoading, hasError }) => {
             return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentRoot, "data-loading": isLoading, "data-has-error": hasError, customElement: children, customElementProps: { isLoading, hasError }, ...attrs, children: children }));
         } }));
 });
 Root.displayName = 'Payment.Root';
 /**
  * Displays the payment subtotal.
+ * Always displays the monetary value but exposes priceText, hasPriceText, and isFree for custom rendering.
  *
  * @component
  * @example
  * ```tsx
  * <Payment.Subtotal className="text-lg" />
  * ```
+ * @example
+ * ```tsx
+ * <Payment.Subtotal asChild>
+ *   {({ subtotal, priceText, hasPriceText, isFree }) => (
+ *     <div>
+ *       <Money money={subtotal} />
+ *       {hasPriceText && <span className="text-sm">({priceText})</span>}
+ *     </div>
+ *   )}
+ * </Payment.Subtotal>
+ * ```
  */
 export const Subtotal = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    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 })) }));
+    return (_jsx(CorePayment.Data, { children: ({ subtotal, priceText, hasPriceText, isFree }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentSubtotal, "data-has-price-text": hasPriceText, "data-is-free": isFree, customElement: children, customElementProps: { subtotal, priceText, hasPriceText, isFree }, children: subtotal && _jsx(Money, { money: subtotal }) })) }));
 });
 Subtotal.displayName = 'Payment.Subtotal';
 /**
@@ -89,10 +101,7 @@ Subtotal.displayName = 'Payment.Subtotal';
  */
 export const Tax = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    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 }));
-        } }));
+    return (_jsx(CorePayment.Data, { children: ({ tax, hasTax }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentTax, "data-has-tax": hasTax, customElement: children, customElementProps: { tax }, children: hasTax && _jsx(Money, { money: tax }) })) }));
 });
 Tax.displayName = 'Payment.Tax';
 /**
@@ -107,24 +116,37 @@ Tax.displayName = 'Payment.Tax';
  */
 export const Discount = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    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 }));
-        } }));
+    return (_jsx(CorePayment.Data, { children: ({ discount, hasDiscount }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentDiscount, "data-has-discount": hasDiscount, customElement: children, customElementProps: { discount }, children: hasDiscount && _jsx(Money, { money: discount }) })) }));
 });
 Discount.displayName = 'Payment.Discount';
 /**
  * Displays the payment total.
+ * Always displays the monetary value but exposes priceText, hasPriceText, and isFree for custom rendering.
  *
  * @component
  * @example
  * ```tsx
  * <Payment.Total className="text-2xl font-bold" />
  * ```
+ * @example
+ * ```tsx
+ * <Payment.Total asChild>
+ *   {({ total, priceText, hasPriceText, isFree }) => (
+ *     <div>
+ *       {isFree ? (
+ *         <span className="text-green-500">Free</span>
+ *       ) : (
+ *         <Money money={total} />
+ *       )}
+ *       {hasPriceText && <span className="text-sm">({priceText})</span>}
+ *     </div>
+ *   )}
+ * </Payment.Total>
+ * ```
  */
 export const Total = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    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 })) }));
+    return (_jsx(CorePayment.Data, { children: ({ total, priceText, hasPriceText, isFree }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentTotal, "data-has-price-text": hasPriceText, "data-is-free": isFree, customElement: children, customElementProps: { total, priceText, hasPriceText, isFree }, children: total && _jsx(Money, { money: total }) })) }));
 });
 Total.displayName = 'Payment.Total';
 /**
@@ -139,10 +161,7 @@ Total.displayName = 'Payment.Total';
  */
 export const PayNow = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    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 }));
-        } }));
+    return (_jsx(CorePayment.Data, { children: ({ payNow, isDeposit }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentPayNow, "data-has-deposit": isDeposit, customElement: children, customElementProps: { payNow }, children: payNow && payNow.amount > 0 && _jsx(Money, { money: payNow }) })) }));
 });
 PayNow.displayName = 'Payment.PayNow';
 /**
@@ -157,10 +176,7 @@ PayNow.displayName = 'Payment.PayNow';
  */
 export const PayLater = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    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 }));
-        } }));
+    return (_jsx(CorePayment.Data, { children: ({ payLater, isDeposit }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentPayLater, "data-has-deposit": isDeposit, customElement: children, customElementProps: { payLater }, children: payLater && payLater.amount > 0 && _jsx(Money, { money: payLater }) })) }));
 });
 PayLater.displayName = 'Payment.PayLater';
 /**
@@ -219,84 +235,60 @@ export const LineItemsList = React.forwardRef((props, ref) => {
 });
 LineItemsList.displayName = 'Payment.LineItemsList';
 /**
- * Repeater component that renders LineItemRoot for each line item.
- * Supports asChild pattern for custom rendering.
+ * Internal component that wraps each line item with context provider.
+ */
+const LineItemWrapper = ({ item, currency, children, }) => {
+    return (_jsx(CorePayment.LineItemProvider, { lineItem: item, currency: currency, children: children }));
+};
+/**
+ * Repeater component that maps over line items and provides context per item.
+ * Uses GenericList.Repeater internally with itemWrapper that provides LineItemContext.
  *
  * @component
  * @example
  * ```tsx
- * // Standard usage
  * <Payment.LineItemRepeater>
- *   <Payment.LineItemPrice />
- * </Payment.LineItemRepeater>
- *
- * // AsChild usage with custom list
- * <Payment.LineItemRepeater asChild>
- *   {({ items, itemWrapper }) => (
- *     <ol>
- *       {items.map((item, index) => (
- *         <li key={item.id}>
- *           {itemWrapper({ item, index, children: <Payment.LineItemPrice /> })}
- *         </li>
- *       ))}
- *     </ol>
- *   )}
+ *   <Payment.LineItemTotal />
+ *   <Payment.LineItemDiscount />
  * </Payment.LineItemRepeater>
  * ```
  */
 export const LineItemRepeater = React.forwardRef((props, ref) => {
-    const { children, asChild } = props;
+    const { children } = props;
     const { currency } = useLineItemsContext();
-    // Custom itemWrapper that renders LineItemRoot for each line item
-    const lineItemWrapper = ({ item, children: itemChildren, }) => {
-        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 }));
+    return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: ({ item }) => (_jsx(LineItemWrapper, { item: item, currency: currency, children: children }, item.id)), children: undefined }));
 });
 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.
+ * Displays the line item total (total price after tax).
+ * Shows priceText for CUSTOM rate type services, otherwise shows totalPrice.
  *
  * @component
  * @example
  * ```tsx
- * <Payment.LineItemRoot lineItem={item} currency="USD">
- *   <Payment.LineItemPrice />
- *   <Payment.LineItemDiscount />
- * </Payment.LineItemRoot>
+ * <Payment.LineItemTotal className="text-2xl font-bold" />
  * ```
  */
-export 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 }) }) }));
+export const LineItemTotal = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CorePayment.LineItemInfo, { children: ({ totalPrice, priceText, hasPriceText, isFree }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemTotal, "data-has-price-text": hasPriceText, "data-is-free": isFree, customElement: children, customElementProps: { totalPrice, priceText, hasPriceText, isFree }, children: priceText ? (_jsx("span", { children: priceText })) : (totalPrice && _jsx(Money, { money: totalPrice })) })) }));
 });
-LineItemRoot.displayName = 'Payment.LineItemRoot';
+LineItemTotal.displayName = 'Payment.LineItemTotal';
 /**
- * Displays the line item price.
- * Shows priceText for CUSTOM rate type services, otherwise shows totalPrice.
+ * Displays the line item subtotal (full price before discounts).
+ * Shows priceText for CUSTOM rate type services, otherwise shows subtotal.
  *
  * @component
  * @example
  * ```tsx
- * <Payment.LineItemPrice className="text-lg font-bold" />
+ * <Payment.LineItemSubtotal className="text-lg" />
  * ```
  */
-export const LineItemPrice = React.forwardRef((props, ref) => {
+export const LineItemSubtotal = 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 }));
+    return (_jsx(CorePayment.LineItemInfo, { children: ({ subtotal, priceText, hasPriceText, isFree }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemSubtotal, "data-has-price-text": hasPriceText, "data-is-free": isFree, customElement: children, customElementProps: { subtotal, priceText, hasPriceText, isFree }, children: priceText ? (_jsx("span", { children: priceText })) : (subtotal && _jsx(Money, { money: subtotal })) })) }));
 });
-LineItemPrice.displayName = 'Payment.LineItemPrice';
+LineItemSubtotal.displayName = 'Payment.LineItemSubtotal';
 /**
  * Displays the line item discount.
  * Uses data-has-discount attribute for conditional visibility.
@@ -309,10 +301,7 @@ LineItemPrice.displayName = 'Payment.LineItemPrice';
  */
 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 }));
+    return (_jsx(CorePayment.LineItemInfo, { children: ({ discount, hasDiscount }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemDiscount, "data-has-discount": hasDiscount, customElement: children, customElementProps: { discount }, children: hasDiscount && _jsx(Money, { money: discount }) })) }));
 });
 LineItemDiscount.displayName = 'Payment.LineItemDiscount';
 /**
@@ -327,9 +316,6 @@ LineItemDiscount.displayName = 'Payment.LineItemDiscount';
  */
 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 }));
+    return (_jsx(CorePayment.LineItemInfo, { children: ({ deposit, hasDeposit }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemDeposit, "data-has-deposit": hasDeposit, customElement: children, customElementProps: { deposit }, children: hasDeposit && _jsx(Money, { money: deposit }) })) }));
 });
 LineItemDeposit.displayName = 'Payment.LineItemDeposit';

package/dist/services/index.d.ts

@@ -8,6 +8,6 @@ export { TimeSlotListService, TimeSlotListServiceDefinition, TimeSlotService, Ti
 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';
-export { PaymentService, PaymentServiceDefinition, type PaymentServiceAPI, type PaymentServiceConfig, type PaymentDetails, type SlotService, type LineItemAdditionalInfo, loadPaymentConfig, type SuccessPaymentConfigResult, type ErrorPaymentConfigResult, } from './payment/payment.js';
+export { PaymentService, PaymentServiceDefinition, type PaymentServiceAPI, type PaymentServiceConfig, type PaymentDetails, type PricingServiceSelection, type LineItemAdditionalInfo, loadPaymentConfig, type SuccessPaymentConfigResult, type ErrorPaymentConfigResult, } from './payment/payment.js';
 export { LocationListService, LocationListServiceDefinition, LocationType, loadLocationListServiceInitialData, locationListServiceBinding, type LocationListServiceAPI, type LocationListServiceConfig, type LocationListActions, type LocationData, type DisplayLocation, type LoadLocationListServiceResult, } from './location-list/location-list.js';
 export { StaffMemberListService, StaffMemberListServiceDefinition, loadStaffMemberListServiceInitialData, staffMemberListServiceBinding, type StaffMemberListServiceAPI, type StaffMemberListServiceConfig, type StaffMemberListActions, type StaffMemberData, type LoadStaffMemberListServiceResult, } from './staff-member-list/staff-member-list.js';