/**
 * 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, PricingServiceSelection, ServicePaymentOptions } from '../../services/payment/payment.js';
export declare const TestIds: {
    readonly paymentRoot: "payment-root";
    readonly paymentSubtotal: "payment-subtotal";
    readonly paymentTax: "payment-tax";
    readonly paymentTotal: "payment-total";
    readonly paymentPayNow: "payment-pay-now";
    readonly paymentPayLater: "payment-pay-later";
    readonly paymentLineItems: "payment-line-items";
    readonly paymentLineItemsList: "payment-line-items-list";
    readonly paymentLineItemRepeater: "payment-line-item-repeater";
    readonly paymentLineItemTotal: "payment-line-item-total";
    readonly paymentLineItemSubtotal: "payment-line-item-subtotal";
    readonly paymentLineItemDeposit: "payment-line-item-deposit";
    readonly paymentServiceOptions: "payment-service-options";
};
/**
 * 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;
    /** Pricing service selections for lazy loading (triggers API call) */
    pricingServiceSelections?: PricingServiceSelection[];
    /** Number of participants for lazy loading */
    totalParticipants?: 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: pricingServiceSelections + totalParticipants props - calls API via useEffect
 * 3. Reactive: no config/props - reads from BookingService signals
 *
 * @order 1
 * @component
 * @example
 * ```tsx
 * import { Payment } from '@wix/bookings/components';
 *
 * // SSR mode
 * function PaymentPage({ paymentDetails }) {
 *   return (
 *     <Payment.Root paymentServiceConfig={{ paymentDetails }}>
 *       <Payment.Total />
 *     </Payment.Root>
 *   );
 * }
 *
 * // Lazy loading mode
 * function LazyPayment({ slotServices }) {
 *   return (
 *     <Payment.Root slotServices={slotServices} totalParticipants={2}>
 *       {({ isLoading }) => isLoading ? <div>Loading...</div> : <Payment.Total />}
 *     </Payment.Root>
 *   );
 * }
 * ```
 */
export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for Payment.Subtotal component
 */
export interface SubtotalProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
    asChild?: boolean;
    children?: AsChildChildren<{
        subtotal: MoneyData | null;
        customPrice: string | null;
    }>;
}
/**
 * Displays the payment subtotal.
 * Always displays the monetary value. Exposes customPrice for custom rendering.
 *
 * @component
 * @example
 * ```tsx
 * <Payment.Subtotal className="text-lg" />
 * ```
 * @example
 * ```tsx
 * <Payment.Subtotal asChild>
 *   {({ subtotal, customPrice }) => (
 *     <div>
 *       {customPrice ? <span>{customPrice}</span> : <Money money={subtotal} />}
 *     </div>
 *   )}
 * </Payment.Subtotal>
 * ```
 */
export declare const Subtotal: React.ForwardRefExoticComponent<SubtotalProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for Payment.Tax component
 */
export interface TaxProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
    asChild?: boolean;
    children?: AsChildChildren<{
        tax: MoneyData | null;
    }>;
}
/**
 * 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.Total component
 */
export interface TotalProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
    asChild?: boolean;
    children?: AsChildChildren<{
        total: MoneyData | null;
        customPrice: string | null;
    }>;
}
/**
 * Displays the payment total.
 * Always displays the monetary value. Exposes customPrice for custom rendering.
 *
 * @component
 * @example
 * ```tsx
 * <Payment.Total className="text-2xl font-bold" />
 * ```
 * @example
 * ```tsx
 * <Payment.Total asChild>
 *   {({ total, customPrice }) => (
 *     <div>
 *       {customPrice ? <span>{customPrice}</span> : <Money money={total} />}
 *     </div>
 *   )}
 * </Payment.Total>
 * ```
 */
export declare const Total: React.ForwardRefExoticComponent<TotalProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for Payment.PayNow component
 */
export interface PayNowProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
    asChild?: boolean;
    children?: AsChildChildren<{
        payNow: MoneyData | null;
        isDeposit: boolean;
    }>;
}
/**
 * Displays the pay now amount (amount to pay upfront in deposit scenarios).
 * Only renders in deposit mode when payNow has a valid amount.
 *
 * @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 extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
    asChild?: boolean;
    children?: AsChildChildren<{
        payLater: MoneyData | null;
        isDeposit: boolean;
    }>;
}
/**
 * Displays the pay later amount (for deposit scenarios).
 * Only renders when in deposit mode and payLater has a valid amount.
 *
 * @component
 * @example
 * ```tsx
 * <Payment.PayLater className="text-secondary-foreground" />
 * ```
 */
export declare const PayLater: React.ForwardRefExoticComponent<PayLaterProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for Payment.ServiceOptions component
 */
export interface ServiceOptionsProps {
    asChild?: boolean;
    /** Render prop receiving service payment options. This component renders no
     * visible DOM element by default — it is a flags-only data component. */
    children?: AsChildChildren<ServicePaymentOptions>;
}
/**
 * Exposes service payment options via render props.
 * Use this to determine which payment scenario to render without reading the service entity directly.
 *
 * Payment scenarios:
 * - `isOnline=true, isInPerson=false, isDeposit=false` → Pay now only (Due now = total)
 * - `isOnline=true, isInPerson=false, isDeposit=true` → Pay now + security deposit
 * - `isOnline=true, isInPerson=true` → Radio: Pay Online / Pay on Arrival
 * - `isOnline=false, isInPerson=true` → Pay on arrival only
 *
 * @component
 * Note: This component renders no visible DOM element. It is a flags-only data
 * component — use `asChild` with a render function to consume the flags.
 * For the actual split amounts (deposit / pay-later), use `Payment.PayNow` and
 * `Payment.PayLater`.
 *
 * @example
 * ```tsx
 * <Payment.ServiceOptions asChild>
 *   {({ isOnline, isInPerson, isDeposit }) => (
 *     // render the correct payment scenario
 *   )}
 * </Payment.ServiceOptions>
 * ```
 */
export declare const ServiceOptions: React.ForwardRefExoticComponent<ServiceOptionsProps & React.RefAttributes<HTMLElement>>;
/**
 * 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 handles loading/error states via GenericList.
 *
 * @component
 * @example
 * ```tsx
 * <Payment.LineItems>
 *   <Payment.LineItemsList
 *     emptyState={<div>No items</div>}
 *     loadingState={<div>Loading...</div>}
 *     errorState={<div>Failed to load</div>}
 *   >
 *     <Payment.LineItemRepeater>
 *       <Payment.LineItemPrice />
 *     </Payment.LineItemRepeater>
 *   </Payment.LineItemsList>
 * </Payment.LineItems>
 * ```
 */
export declare const LineItems: React.ForwardRefExoticComponent<LineItemsProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for Payment.LineItemsList component
 */
export interface LineItemsListProps {
    children?: React.ReactNode;
    /** Content to display when no items are available */
    emptyState?: React.ReactNode;
    /** Content to display when loading */
    loadingState?: React.ReactNode;
    /** Content to display when there's an error */
    errorState?: React.ReactNode;
    className?: string;
}
/**
 * List container for line items with empty/loading/error state support.
 *
 * @component
 * @example
 * ```tsx
 * <Payment.LineItemsList
 *   emptyState={<div>No items</div>}
 *   loadingState={<div>Loading...</div>}
 *   errorState={<div>Failed to load payment details</div>}
 * >
 *   <Payment.LineItemRepeater />
 * </Payment.LineItemsList>
 * ```
 */
export declare const LineItemsList: React.ForwardRefExoticComponent<LineItemsListProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for Payment.LineItemRepeater component
 */
export interface LineItemRepeaterProps {
    children: React.ReactNode;
}
/**
 * Repeater component that maps over line items and provides context per item.
 * Uses GenericList.Repeater internally with itemWrapper that provides LineItemContext.
 *
 * @component
 * @example
 * ```tsx
 * <Payment.LineItemRepeater>
 *   <Payment.LineItemTotal />
 * </Payment.LineItemRepeater>
 * ```
 */
export declare const LineItemRepeater: React.ForwardRefExoticComponent<LineItemRepeaterProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for Payment.LineItemTotal component
 */
export interface LineItemTotalProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
    asChild?: boolean;
    children?: AsChildChildren<{
        totalPrice: MoneyData | null;
        customPrice: string | null;
    }>;
}
/**
 * Displays the line item total (total price after tax).
 * Shows customPrice for CUSTOM rate type services, otherwise shows totalPrice.
 *
 * @component
 * @example
 * ```tsx
 * <Payment.LineItemTotal className="text-2xl font-bold" />
 * ```
 */
export declare const LineItemTotal: React.ForwardRefExoticComponent<LineItemTotalProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for Payment.LineItemSubtotal component
 */
export interface LineItemSubtotalProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
    asChild?: boolean;
    children?: AsChildChildren<{
        subtotal: MoneyData | null;
        customPrice: string | null;
    }>;
}
/**
 * Displays the line item subtotal (full price before discounts).
 * Shows customPrice for CUSTOM rate type services, otherwise shows subtotal.
 *
 * @component
 * @example
 * ```tsx
 * <Payment.LineItemSubtotal className="text-lg" />
 * ```
 */
export declare const LineItemSubtotal: React.ForwardRefExoticComponent<LineItemSubtotalProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for Payment.LineItemDeposit component
 */
export interface LineItemDepositProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
    asChild?: boolean;
    children?: AsChildChildren<{
        deposit: MoneyData | null;
    }>;
}
/**
 * Displays the line item deposit amount.
 * Uses data-has-deposit attribute for conditional visibility.
 *
 * @component
 * @example
 * ```tsx
 * <Payment.LineItemDeposit className="font-semibold" />
 * ```
 */
export declare const LineItemDeposit: React.ForwardRefExoticComponent<LineItemDepositProps & React.RefAttributes<HTMLElement>>;