@wix/headless-bookings 0.0.38 → 0.0.40

package/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/dist/react/core/payment/Payment.d.ts

@@ -4,7 +4,7 @@
  * Note: Currently supports single service only
  */
 import React from 'react';
-import { type PaymentServiceConfig, type PaymentDetails, type SlotService } from '../../../services/payment/payment.js';
+import { type PaymentServiceConfig, type SlotService } from '../../../services/payment/payment.js';
 import type { MoneyData } from '@wix/headless-components/react';
 /**
  * Props for Payment.Root component
@@ -33,122 +33,89 @@ export interface RootProps {
  * ```tsx
  * // SSR mode
  * <Payment.Root paymentServiceConfig={{ paymentDetails }}>
- *   <Payment.Summary />
+ *   <Payment.Total />
  * </Payment.Root>
  *
  * // Lazy loading mode
  * <Payment.Root slotServices={[...]} numberOfParticipants={2}>
- *   {({ isLoading }) => isLoading ? <div>Loading...</div> : <Payment.Summary />}
+ *   {({ isLoading }) => isLoading ? <div>Loading...</div> : <Payment.Total />}
  * </Payment.Root>
  *
  * // Reactive mode
  * <Payment.Root>
- *   <Payment.Summary />
+ *   <Payment.Total />
  * </Payment.Root>
  * ```
  */
 export declare function Root(props: RootProps): React.ReactNode;
 /**
- * Props for Payment render prop component
+ * Props for Data render prop component
  */
-export interface PaymentProps {
-    children: (data: {
-        paymentDetails: PaymentDetails | null;
-        isLoading: boolean;
-        error: string | null;
-    }) => React.ReactNode;
-}
-/**
- * Core component that provides access to full payment details via render props.
- *
- * @component
- * @example
- * ```tsx
- * <Payment.Payment>
- *   {({ paymentDetails, isLoading, error }) => (
- *     isLoading ? <div>Loading...</div> : <div>{JSON.stringify(paymentDetails)}</div>
- *   )}
- * </Payment.Payment>
- * ```
- */
-export declare function Payment(props: PaymentProps): React.ReactNode;
-/**
- * Props for Summary render prop component
- */
-export interface SummaryProps {
+export interface DataProps {
     children: (data: {
         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;
+        currency: string;
+        isLoading: boolean;
+        error: string | null;
     }) => React.ReactNode;
 }
 /**
- * Core component that provides access to payment summary totals via render props.
- * Returns all pricing totals with MoneyData format for the Money component.
- * Use data-attributes for conditional visibility via CSS.
+ * Core component that provides access to converted payment data.
+ * Returns MoneyData for each price field, ready for rendering.
  *
  * @component
- * @example
- * ```tsx
- * <Payment.Summary>
- *   {({ subtotal, tax, total, hasTax, hasDiscount, discount, isDeposit, payNow }) => (
- *     <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 function Summary(props: SummaryProps): React.ReactNode;
-import type { CalculatedLineItem as ApiCalculatedLineItem } from '@wix/auto_sdk_ecom_totals-calculator';
-import type { LineItemAdditionalInfo } from '../../../services/payment/payment.js';
+export declare function Data(props: DataProps): React.ReactNode;
 /**
- * Combined line item with SDK data and additional computed info
+ * Line item with pre-converted MoneyData prices
  */
-export interface CombinedLineItem {
-    /** SDK line item data */
-    sdkLineItem: ApiCalculatedLineItem;
-    /** Additional computed info */
-    additionalInfo: LineItemAdditionalInfo | undefined;
+export interface LineItem {
+    /** Unique identifier */
+    id: string;
+    /** Total price after tax */
+    totalPrice: MoneyData | null;
+    /** Subtotal (full price before discounts) */
+    subtotal: MoneyData | null;
+    /** Tax amount */
+    tax: MoneyData | null;
+    /** Discount amount */
+    discount: MoneyData | null;
+    /** Deposit amount */
+    deposit: MoneyData | null;
+    /** Custom price text (for CUSTOM rate type) */
+    priceText: string | null;
 }
 /**
  * Props for LineItems render prop component
  */
 export interface LineItemsProps {
     children: (data: {
-        lineItems: CombinedLineItem[];
+        lineItems: LineItem[];
         hasLineItems: boolean;
         currency: string;
+        isLoading: boolean;
+        error: string | null;
     }) => React.ReactNode;
 }
 /**
  * Core component that provides access to calculated line items via render props.
- * Combines SDK line items with additional computed info.
- * Note: Currently supports single service only (always 1 line item).
+ * Returns line items with pre-converted MoneyData prices.
  *
  * @component
  * @example
  * ```tsx
  * <Payment.LineItems>
- *   {({ lineItems, hasLineItems, currency }) => (
+ *   {({ lineItems, hasLineItems, currency, isLoading, error }) => (
  *     <ul data-has-items={hasLineItems}>
  *       {lineItems.map((item) => (
- *         <Payment.LineItem key={item.sdkLineItem.lineItemId} lineItem={item} currency={currency}>
- *           {({ totalPriceAfterTaxAndDiscount }) => (
- *             <li><Money money={totalPriceAfterTaxAndDiscount} /></li>
- *           )}
- *         </Payment.LineItem>
+ *         <li key={item.id}>
+ *           <Money money={item.totalPrice} />
+ *         </li>
  *       ))}
  *     </ul>
  *   )}
@@ -156,38 +123,3 @@ export interface LineItemsProps {
  * ```
  */
 export declare function LineItems(props: LineItemsProps): React.ReactNode;
-/**
- * Props for LineItem render prop component
- */
-export interface LineItemProps {
-    lineItem: CombinedLineItem;
-    currency: string;
-    children: (data: {
-        totalPrice: MoneyData | null;
-        subtotal: MoneyData | null;
-        tax: MoneyData | null;
-        discount: MoneyData | null;
-        deposit: MoneyData | null;
-        priceText: string | null;
-    }) => React.ReactNode;
-}
-/**
- * Core component that provides access to a single line item via render props.
- * Use data-attributes for conditional visibility via CSS.
- *
- * @component
- * @example
- * ```tsx
- * <Payment.LineItem lineItem={item} currency="USD">
- *   {({ totalPrice, subtotal, tax, discount, deposit, priceText }) => (
- *     <div>
- *       <span><Money money={totalPrice} /></span>
- *       <span data-has-discount={!!discount?.amount}><Money money={discount} /></span>
- *       <span data-has-deposit={!!deposit?.amount}><Money money={deposit} /></span>
- *       <span data-has-price-text={!!priceText}>{priceText}</span>
- *     </div>
- *   )}
- * </Payment.LineItem>
- * ```
- */
-export declare function LineItem(props: LineItemProps): React.ReactNode;

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

@@ -28,17 +28,17 @@ function RootContent({ children, }) {
  * ```tsx
  * // SSR mode
  * <Payment.Root paymentServiceConfig={{ paymentDetails }}>
- *   <Payment.Summary />
+ *   <Payment.Total />
  * </Payment.Root>
  *
  * // Lazy loading mode
  * <Payment.Root slotServices={[...]} numberOfParticipants={2}>
- *   {({ isLoading }) => isLoading ? <div>Loading...</div> : <Payment.Summary />}
+ *   {({ isLoading }) => isLoading ? <div>Loading...</div> : <Payment.Total />}
  * </Payment.Root>
  *
  * // Reactive mode
  * <Payment.Root>
- *   <Payment.Summary />
+ *   <Payment.Total />
  * </Payment.Root>
  * ```
  */
@@ -53,93 +53,40 @@ export function Root(props) {
     return (_jsx(WixServices, { servicesMap: createServicesMap().addService(PaymentServiceDefinition, PaymentService, internalConfig), children: _jsx(RootContent, { children: children }) }));
 }
 /**
- * Core component that provides access to full payment details via render props.
+ * Core component that provides access to converted payment data.
+ * Returns MoneyData for each price field, ready for rendering.
  *
  * @component
- * @example
- * ```tsx
- * <Payment.Payment>
- *   {({ paymentDetails, isLoading, error }) => (
- *     isLoading ? <div>Loading...</div> : <div>{JSON.stringify(paymentDetails)}</div>
- *   )}
- * </Payment.Payment>
- * ```
  */
-export function Payment(props) {
+export function Data(props) {
     const paymentService = useService(PaymentServiceDefinition);
     const paymentDetails = paymentService.paymentDetailsSignal.get();
     const isLoading = paymentService.isLoadingSignal.get();
     const error = paymentService.errorSignal.get();
-    return props.children({ paymentDetails, isLoading, error });
-}
-/**
- * Core component that provides access to payment summary totals via render props.
- * Returns all pricing totals with MoneyData format for the Money component.
- * Use data-attributes for conditional visibility via CSS.
- *
- * @component
- * @example
- * ```tsx
- * <Payment.Summary>
- *   {({ subtotal, tax, total, hasTax, hasDiscount, discount, isDeposit, payNow }) => (
- *     <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 function Summary(props) {
-    const paymentService = useService(PaymentServiceDefinition);
-    const paymentDetails = paymentService.paymentDetailsSignal.get();
     const currency = paymentDetails?.response?.currency || 'USD';
     const priceSummary = paymentDetails?.response?.priceSummary;
-    // Always present
     const subtotal = convertMultiCurrencyPriceToMoneyData(priceSummary?.subtotal, currency);
     const total = convertMultiCurrencyPriceToMoneyData(priceSummary?.total, currency);
-    // May or may not exist
     const tax = convertMultiCurrencyPriceToMoneyData(priceSummary?.tax, currency);
-    const hasTax = tax !== null && tax.amount > 0;
     const discount = convertMultiCurrencyPriceToMoneyData(priceSummary?.discount, currency);
-    const hasDiscount = discount !== null && discount.amount > 0;
-    // Deposit scenarios only
     const payNow = convertMultiCurrencyPriceToMoneyData(paymentDetails?.response?.payNow?.total, currency);
     const payLater = convertMultiCurrencyPriceToMoneyData(paymentDetails?.response?.payLater?.total, currency);
-    const isDeposit = payNow !== null && total !== null && payNow.amount < total.amount;
-    return props.children({
-        subtotal,
-        total,
-        currency,
-        tax,
-        hasTax,
-        discount,
-        hasDiscount,
-        payNow,
-        payLater,
-        isDeposit,
-    });
+    return props.children({ subtotal, total, tax, discount, payNow, payLater, currency, isLoading, error });
 }
 /**
  * Core component that provides access to calculated line items via render props.
- * Combines SDK line items with additional computed info.
- * Note: Currently supports single service only (always 1 line item).
+ * Returns line items with pre-converted MoneyData prices.
  *
  * @component
  * @example
  * ```tsx
  * <Payment.LineItems>
- *   {({ lineItems, hasLineItems, currency }) => (
+ *   {({ lineItems, hasLineItems, currency, isLoading, error }) => (
  *     <ul data-has-items={hasLineItems}>
  *       {lineItems.map((item) => (
- *         <Payment.LineItem key={item.sdkLineItem.lineItemId} lineItem={item} currency={currency}>
- *           {({ totalPriceAfterTaxAndDiscount }) => (
- *             <li><Money money={totalPriceAfterTaxAndDiscount} /></li>
- *           )}
- *         </Payment.LineItem>
+ *         <li key={item.id}>
+ *           <Money money={item.totalPrice} />
+ *         </li>
  *       ))}
  *     </ul>
  *   )}
@@ -149,54 +96,25 @@ export function Summary(props) {
 export function LineItems(props) {
     const paymentService = useService(PaymentServiceDefinition);
     const paymentDetails = paymentService.paymentDetailsSignal.get();
+    const isLoading = paymentService.isLoadingSignal.get();
+    const error = paymentService.errorSignal.get();
     const sdkLineItems = paymentDetails?.response?.calculatedLineItems || [];
     const additionalInfoList = paymentDetails?.additionalInfo?.lineItems || [];
     const currency = paymentDetails?.response?.currency || 'USD';
-    // Combine SDK line items with additional info
-    const lineItems = sdkLineItems.map((sdkLineItem) => ({
-        sdkLineItem,
-        additionalInfo: additionalInfoList.find((info) => info.lineItemId === sdkLineItem.lineItemId),
-    }));
-    const hasLineItems = lineItems.length > 0;
-    return props.children({ lineItems, hasLineItems, currency });
-}
-/**
- * Core component that provides access to a single line item via render props.
- * Use data-attributes for conditional visibility via CSS.
- *
- * @component
- * @example
- * ```tsx
- * <Payment.LineItem lineItem={item} currency="USD">
- *   {({ totalPrice, subtotal, tax, discount, deposit, priceText }) => (
- *     <div>
- *       <span><Money money={totalPrice} /></span>
- *       <span data-has-discount={!!discount?.amount}><Money money={discount} /></span>
- *       <span data-has-deposit={!!deposit?.amount}><Money money={deposit} /></span>
- *       <span data-has-price-text={!!priceText}>{priceText}</span>
- *     </div>
- *   )}
- * </Payment.LineItem>
- * ```
- */
-export function LineItem(props) {
-    const { lineItem, currency, children } = props;
-    const { sdkLineItem, additionalInfo } = lineItem;
-    const pricesBreakdown = sdkLineItem?.pricesBreakdown;
-    // Prices (from SDK)
-    const totalPrice = convertMultiCurrencyPriceToMoneyData(pricesBreakdown?.totalPriceAfterTax, currency);
-    const subtotal = convertMultiCurrencyPriceToMoneyData(pricesBreakdown?.fullPrice, currency);
-    const tax = convertMultiCurrencyPriceToMoneyData(pricesBreakdown?.taxDetails?.totalTax, currency);
-    const discount = convertMultiCurrencyPriceToMoneyData(pricesBreakdown?.totalDiscount, currency);
-    const deposit = convertMultiCurrencyPriceToMoneyData(pricesBreakdown?.depositAmount, currency);
-    // Custom price text (for CUSTOM rate type)
-    const priceText = additionalInfo?.priceText || null;
-    return children({
-        totalPrice,
-        subtotal,
-        tax,
-        discount,
-        deposit,
-        priceText,
+    // Convert SDK line items to LineItem with MoneyData prices
+    const lineItems = sdkLineItems.map((sdkLineItem) => {
+        const pricesBreakdown = sdkLineItem?.pricesBreakdown;
+        const additionalInfo = additionalInfoList.find((info) => info.lineItemId === sdkLineItem.lineItemId);
+        return {
+            id: sdkLineItem.lineItemId || '',
+            totalPrice: convertMultiCurrencyPriceToMoneyData(pricesBreakdown?.totalPriceAfterTax, currency),
+            subtotal: convertMultiCurrencyPriceToMoneyData(pricesBreakdown?.fullPrice, currency),
+            tax: convertMultiCurrencyPriceToMoneyData(pricesBreakdown?.taxDetails?.totalTax, currency),
+            discount: convertMultiCurrencyPriceToMoneyData(pricesBreakdown?.totalDiscount, currency),
+            deposit: convertMultiCurrencyPriceToMoneyData(pricesBreakdown?.depositAmount, currency),
+            priceText: additionalInfo?.priceText || null,
+        };
     });
+    const hasLineItems = lineItems.length > 0;
+    return props.children({ lineItems, hasLineItems, currency, isLoading, error });
 }