@wix/headless-bookings 0.0.30 → 0.0.32

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

@@ -0,0 +1,66 @@
+/**
+ * Payment Service Definition
+ * Defines interfaces and service contract for payment calculation management
+ */
+import type { Signal } from '@wix/services-definitions/core-services/signals';
+import type { CalculateTotalsResponse } from '@wix/auto_sdk_ecom_totals-calculator';
+import type { Service } from '@wix/auto_sdk_bookings_services';
+/**
+ * Payment option for line items
+ */
+export type PaymentOption = 'FULL_PAYMENT_ONLINE' | 'FULL_PAYMENT_OFFLINE';
+/**
+ * Additional computed info for a line item (not in SDK response)
+ */
+export interface LineItemAdditionalInfo {
+    /** Line item ID to match with SDK's calculatedLineItems */
+    lineItemId: string;
+    /** Custom price text (for CUSTOM rate type services) */
+    priceText?: string;
+}
+/**
+ * Payment calculation result with SDK response and additional computed info
+ */
+export interface PaymentDetails {
+    /** The raw SDK CalculateTotals response */
+    response: CalculateTotalsResponse;
+    /** Additional computed information per line item */
+    additionalInfo: {
+        lineItems: LineItemAdditionalInfo[];
+    };
+}
+/**
+ * Input for calculating payment for a slot/service
+ */
+export interface SlotService {
+    service: Service;
+    lineItemId: string;
+}
+/**
+ * Public config for PaymentService (SSR mode only):
+ * Pass `paymentDetails` pre-fetched via loadPaymentConfig
+ */
+export interface PaymentServiceConfig {
+    /** Pre-calculated payment details for SSR (no API call) */
+    paymentDetails?: PaymentDetails;
+}
+/**
+ * Internal config used by Core component to pass lazy loading data
+ * Not exposed publicly - Core merges this with PaymentServiceConfig
+ */
+export interface PaymentServiceInternalConfig extends PaymentServiceConfig {
+    /** Slot services for lazy loading (internal use) */
+    slotServices?: SlotService[];
+    /** Number of participants for lazy loading (internal use) */
+    numberOfParticipants?: number;
+}
+export interface PaymentServiceAPI {
+    paymentDetailsSignal: Signal<PaymentDetails | null>;
+    isLoadingSignal: Signal<boolean>;
+    errorSignal: Signal<string | null>;
+}
+export declare const PaymentServiceDefinition: string & {
+    __api: PaymentServiceAPI;
+    __config: {};
+    isServiceDefinition?: boolean;
+} & PaymentServiceAPI;

package/cjs/dist/services/payment/payment.def.js

@@ -0,0 +1,9 @@
+/**
+ * Payment Service Definition
+ * Defines interfaces and service contract for payment calculation management
+ */
+import { defineService } from '@wix/services-definitions';
+// ============================================================================
+// Service Definition
+// ============================================================================
+export const PaymentServiceDefinition = defineService('payment');

package/cjs/dist/services/payment/payment.js

@@ -0,0 +1,167 @@
+/**
+ * Payment Service - Pricing calculation and payment details management
+ * Handles calculating total prices, taxes, discounts, and deposit information
+ * Supports two modes: SSR (config with pre-fetched data) and lazy loading (reactive)
+ */
+import { implementService } from '@wix/services-definitions';
+import { SignalsServiceDefinition } from '@wix/services-definitions/core-services/signals';
+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';
+export { PaymentServiceDefinition, } from './payment.def.js';
+// ============================================================================
+// Constants
+// ============================================================================
+const BOOKINGS_APP_DEF_ID = '13d21c63-b5ec-5912-8397-c3a5ddb27a97';
+// ============================================================================
+// Helper Functions
+// ============================================================================
+function getAdditionalInfo(service, lineItemId) {
+    const payment = service.payment;
+    const priceText = payment?.rateType === RateType.CUSTOM && payment.custom?.description
+        ? payment.custom.description
+        : undefined;
+    return { lineItemId, priceText };
+}
+function getPaymentOption(service) {
+    const options = service.payment?.options;
+    if (options?.inPerson) {
+        return 'FULL_PAYMENT_OFFLINE';
+    }
+    return 'FULL_PAYMENT_ONLINE';
+}
+function buildLineItem(service, numberOfParticipants, lineItemId) {
+    // Get fixed price from service
+    const servicePrice = service.payment?.fixed?.price?.value;
+    const price = Number(servicePrice || 0) * numberOfParticipants;
+    // Get deposit if configured
+    const deposit = service.payment?.fixed?.deposit?.value
+        ? Number(service.payment.fixed.deposit.value) * numberOfParticipants
+        : undefined;
+    // Get payment option from service configuration
+    const paymentOption = getPaymentOption(service);
+    return {
+        _id: lineItemId,
+        catalogReference: {
+            catalogItemId: service._id || '',
+            appId: BOOKINGS_APP_DEF_ID,
+        },
+        price: String(price),
+        ...(deposit ? { depositAmount: String(deposit) } : {}),
+        quantity: 1,
+        paymentOption,
+    };
+}
+async function calculatePaymentDetails(slotServices, numberOfParticipants) {
+    const lineItems = slotServices.map((input) => buildLineItem(input.service, numberOfParticipants, input.lineItemId));
+    const response = await calculateTotals({
+        lineItems,
+    });
+    const additionalInfoList = slotServices.map((input) => getAdditionalInfo(input.service, input.lineItemId));
+    return {
+        response,
+        additionalInfo: {
+            lineItems: additionalInfoList,
+        },
+    };
+}
+// ============================================================================
+// Service Implementation
+// ============================================================================
+export const PaymentService = implementService.withConfig()(PaymentServiceDefinition, ({ getService, config }) => {
+    const signalsService = getService(SignalsServiceDefinition);
+    // Try to get BookingService (optional - for reactive mode)
+    let bookingService = null;
+    try {
+        bookingService = getService(BookingServiceDefinition);
+    }
+    catch {
+        bookingService = null;
+    }
+    // Initialize signals
+    const paymentDetailsSignal = signalsService.signal(config.paymentDetails || null);
+    const isLoadingSignal = signalsService.signal(false);
+    const errorSignal = signalsService.signal(null);
+    // Internal calculate function
+    const calculate = async (slotServices, numberOfParticipants) => {
+        if (!slotServices.length) {
+            paymentDetailsSignal.set(null);
+            return;
+        }
+        isLoadingSignal.set(true);
+        errorSignal.set(null);
+        try {
+            const paymentDetails = await calculatePaymentDetails(slotServices, numberOfParticipants);
+            paymentDetailsSignal.set(paymentDetails);
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error
+                ? error.message
+                : 'Failed to calculate payment';
+            errorSignal.set(errorMessage);
+            console.error('Payment calculation error:', error);
+        }
+        finally {
+            isLoadingSignal.set(false);
+        }
+    };
+    // Mode 1: SSR - paymentDetails already set in signal initialization
+    if (config.paymentDetails) {
+        // No-op - data is pre-fetched
+    }
+    // Mode 2: Lazy loading - slotServices provided via internal config
+    else if (config.slotServices?.length) {
+        void calculate(config.slotServices, config.numberOfParticipants ?? 1);
+    }
+    // Mode 3: Reactive - observe BookingService signals (client-side only)
+    else if (typeof window !== 'undefined' && bookingService) {
+        signalsService.effect(() => {
+            const selections = bookingService?.serviceSelections.get() || [];
+            // For single service mode, take the first selection
+            const firstSelection = selections[0];
+            const numParticipants = firstSelection?.totalParticipants || 1;
+            const services = selections.map((selection) => ({
+                service: selection.service,
+                lineItemId: selection.instanceId,
+            }));
+            void calculate(services, numParticipants);
+        });
+    }
+    return {
+        paymentDetailsSignal,
+        isLoadingSignal,
+        errorSignal,
+    };
+});
+/**
+ * Load payment configuration for Server-Side Rendering (SSR).
+ * Calls the pricing APIs and returns pre-calculated payment details.
+ *
+ * @param params.slotServices - Slot/service inputs for calculation
+ * @param params.numberOfParticipants - Number of participants (default: 1)
+ */
+export async function loadPaymentConfig(params) {
+    try {
+        const { slotServices, numberOfParticipants = 1 } = params;
+        if (!slotServices.length) {
+            return {
+                type: 'success',
+                config: { paymentDetails: undefined },
+            };
+        }
+        const paymentDetails = await calculatePaymentDetails(slotServices, numberOfParticipants);
+        return {
+            type: 'success',
+            config: { paymentDetails },
+        };
+    }
+    catch (error) {
+        const errorMessage = error instanceof Error ? error.message : 'Failed to load payment config';
+        console.error('Failed to load payment config:', error);
+        return {
+            type: 'error',
+            error: errorMessage,
+        };
+    }
+}

package/cjs/dist/utils/money.d.ts

@@ -19,3 +19,14 @@ export declare function convertToMoneyData(sdkMoney: {
     currency?: string;
     formattedValue?: string | null;
 } | undefined): MoneyData | null;
+/**
+ * Converts ecom MultiCurrencyPrice format to MoneyData format
+ * MultiCurrencyPrice uses 'amount' as string, while MoneyData uses 'amount' as number
+ *
+ * @param price - The MultiCurrencyPrice object with amount as string
+ * @param currency - The currency code (from response level)
+ * @returns MoneyData object or null if conversion fails
+ */
+export declare function convertMultiCurrencyPriceToMoneyData(price: {
+    amount?: string;
+} | undefined, currency: string): MoneyData | null;

package/cjs/dist/utils/money.js

@@ -32,3 +32,19 @@ export function convertToMoneyData(sdkMoney) {
     }
     return null;
 }
+/**
+ * Converts ecom MultiCurrencyPrice format to MoneyData format
+ * MultiCurrencyPrice uses 'amount' as string, while MoneyData uses 'amount' as number
+ *
+ * @param price - The MultiCurrencyPrice object with amount as string
+ * @param currency - The currency code (from response level)
+ * @returns MoneyData object or null if conversion fails
+ */
+export function convertMultiCurrencyPriceToMoneyData(price, currency) {
+    if (!price?.amount)
+        return null;
+    const parsed = parseFloat(price.amount);
+    if (isNaN(parsed) || parsed < 0)
+        return null;
+    return { amount: parsed, currency };
+}

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

@@ -0,0 +1,193 @@
+/**
+ * Core Payment Components
+ * Provides low-level access to PaymentService via render props
+ * Note: Currently supports single service only
+ */
+import React from 'react';
+import { type PaymentServiceConfig, type PaymentDetails, type SlotService } from '../../../services/payment/payment.js';
+import type { MoneyData } from '@wix/headless-components/react';
+/**
+ * Props for Payment.Root component
+ */
+export interface RootProps {
+    children: React.ReactNode | ((props: {
+        isLoading: boolean;
+        hasError: boolean;
+    }) => React.ReactNode);
+    /** Service config - SSR only (paymentDetails) */
+    paymentServiceConfig?: PaymentServiceConfig;
+    /** Slot services for lazy loading (triggers API call) */
+    slotServices?: SlotService[];
+    /** Number of participants for lazy loading */
+    numberOfParticipants?: number;
+}
+/**
+ * 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
+ * 3. Reactive: no config/props - reads from BookingService signals
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // SSR mode
+ * <Payment.Root paymentServiceConfig={{ paymentDetails }}>
+ *   <Payment.Summary />
+ * </Payment.Root>
+ *
+ * // Lazy loading mode
+ * <Payment.Root slotServices={[...]} numberOfParticipants={2}>
+ *   {({ isLoading }) => isLoading ? <div>Loading...</div> : <Payment.Summary />}
+ * </Payment.Root>
+ *
+ * // Reactive mode
+ * <Payment.Root>
+ *   <Payment.Summary />
+ * </Payment.Root>
+ * ```
+ */
+export declare function Root(props: RootProps): React.ReactNode;
+/**
+ * Props for Payment 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 {
+    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;
+    }) => 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.
+ *
+ * @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';
+/**
+ * Combined line item with SDK data and additional computed info
+ */
+export interface CombinedLineItem {
+    /** SDK line item data */
+    sdkLineItem: ApiCalculatedLineItem;
+    /** Additional computed info */
+    additionalInfo: LineItemAdditionalInfo | undefined;
+}
+/**
+ * Props for LineItems render prop component
+ */
+export interface LineItemsProps {
+    children: (data: {
+        lineItems: CombinedLineItem[];
+        hasLineItems: boolean;
+        currency: string;
+    }) => 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).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Payment.LineItems>
+ *   {({ lineItems, hasLineItems, currency }) => (
+ *     <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>
+ *       ))}
+ *     </ul>
+ *   )}
+ * </Payment.LineItems>
+ * ```
+ */
+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

@@ -0,0 +1,202 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { WixServices, useService } from '@wix/services-manager-react';
+import { createServicesMap } from '@wix/services-manager';
+import { PaymentServiceDefinition, PaymentService, } from '../../../services/payment/payment.js';
+import { convertMultiCurrencyPriceToMoneyData } from '../../../utils/money.js';
+/**
+ * Internal content component that reads from service
+ */
+function RootContent({ children, }) {
+    const paymentService = useService(PaymentServiceDefinition);
+    const isLoading = paymentService.isLoadingSignal.get();
+    const error = paymentService.errorSignal.get();
+    const hasError = !!error;
+    if (typeof children === 'function') {
+        return children({ isLoading, hasError });
+    }
+    return 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
+ * 3. Reactive: no config/props - reads from BookingService signals
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // SSR mode
+ * <Payment.Root paymentServiceConfig={{ paymentDetails }}>
+ *   <Payment.Summary />
+ * </Payment.Root>
+ *
+ * // Lazy loading mode
+ * <Payment.Root slotServices={[...]} numberOfParticipants={2}>
+ *   {({ isLoading }) => isLoading ? <div>Loading...</div> : <Payment.Summary />}
+ * </Payment.Root>
+ *
+ * // Reactive mode
+ * <Payment.Root>
+ *   <Payment.Summary />
+ * </Payment.Root>
+ * ```
+ */
+export function Root(props) {
+    const { children, paymentServiceConfig = {}, slotServices, numberOfParticipants, } = props;
+    // Merge public config with lazy loading props into internal config
+    const internalConfig = {
+        ...paymentServiceConfig,
+        slotServices,
+        numberOfParticipants,
+    };
+    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.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Payment.Payment>
+ *   {({ paymentDetails, isLoading, error }) => (
+ *     isLoading ? <div>Loading...</div> : <div>{JSON.stringify(paymentDetails)}</div>
+ *   )}
+ * </Payment.Payment>
+ * ```
+ */
+export function Payment(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,
+    });
+}
+/**
+ * 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).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Payment.LineItems>
+ *   {({ lineItems, hasLineItems, currency }) => (
+ *     <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>
+ *       ))}
+ *     </ul>
+ *   )}
+ * </Payment.LineItems>
+ * ```
+ */
+export function LineItems(props) {
+    const paymentService = useService(PaymentServiceDefinition);
+    const paymentDetails = paymentService.paymentDetailsSignal.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,
+    });
+}

package/dist/react/index.d.ts

@@ -5,3 +5,5 @@ export * as ServiceMedia from './service/ServiceMedia.js';
 export * as TimeSlotList from './time-slot-list/TimeSlotList.js';
 export * as ServiceList from './service-list/ServiceList.js';
 export * as Location from './location/Location.js';
+export * as Payment from './payment/Payment.js';
+export * as PaymentLineItem from './payment/PaymentLineItem.js';

package/dist/react/index.js

@@ -5,3 +5,5 @@ export * as ServiceMedia from './service/ServiceMedia.js';
 export * as TimeSlotList from './time-slot-list/TimeSlotList.js';
 export * as ServiceList from './service-list/ServiceList.js';
 export * as Location from './location/Location.js';
+export * as Payment from './payment/Payment.js';
+export * as PaymentLineItem from './payment/PaymentLineItem.js';