import { type GenericListItemsProps, type GenericListRepeaterProps, type MoneyProps } from '@wix/headless-components/react';
import { type AsChildChildren } from '@wix/headless-utils/react';
import React from 'react';
import { type OrderServiceConfig } from '../services/order-service.js';
import { InvoiceItem as InvoiceItemType } from '../services/invoice-item-service.js';
/**
 * Props for the Order Root component.
 */
export interface RootProps {
    /** Configuration for the order service */
    orderServiceConfig?: OrderServiceConfig;
    /** Child components */
    children: React.ReactNode;
}
/**
 * Order Root component that provides order service context to child components.
 * Must be used as the top-level component for order functionality.
 *
 * @order 1
 * @component
 * @example
 * ```tsx
 * <Order.Root orderServiceConfig={orderServiceConfig}>
 *   <Order.InvoiceItems className="px-6 border-b border-gray-300">
 *     <Order.InvoiceItemRepeater className="flex border-b border-gray-200 py-4 font-light text-gray-700">
 *       <InvoiceItem.Name className="w-[35%]" />
 *       <InvoiceItem.Price className="w-[25%]" />
 *       <InvoiceItem.Quantity className="w-[15%]" />
 *       <InvoiceItem.Total className="w-[25%] text-right" />
 *     </Order.InvoiceItemRepeater>
 *   </Order.InvoiceItems>
 * </Order.Root>
 * ```
 */
export declare const Root: (props: RootProps) => React.ReactNode;
/**
 * Props for the Order OrderNumber component.
 */
export interface OrderNumberProps {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Custom render function when using asChild */
    children?: AsChildChildren<{
        /** Order number */
        orderNumber: string;
    }>;
    /** CSS classes to apply to the default element */
    className?: string;
}
/**
 * Displays the order number.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <Order.OrderNumber className="font-light text-lg text-gray-700" />
 *
 * // asChild with primitive
 * <Order.OrderNumber asChild>
 *   <h2 className="text-xl font-bold text-gray-900" />
 * </Order.OrderNumber>
 *
 * // asChild with react component
 * <Order.OrderNumber
 *   asChild
 *   className="font-light text-sm text-gray-700"
 * >
 *   {({ orderNumber }) => (
 *     <span>Order No. #{orderNumber}</span>
 *   )}
 * </Order.OrderNumber>
 * ```
 */
export declare const OrderNumber: React.ForwardRefExoticComponent<OrderNumberProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for the Order GuestEmail component.
 */
export interface GuestEmailProps {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Custom render function when using asChild */
    children?: AsChildChildren<{
        /** Guest email */
        guestEmail: string;
    }>;
    /** CSS classes to apply to the default element */
    className?: string;
}
/**
 * Displays the guest email.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <Order.GuestEmail className="text-gray-600 font-light" />
 *
 * // asChild with primitive
 * <Order.GuestEmail asChild>
 *   <p className="text-sm text-gray-500 font-light" />
 * </Order.GuestEmail>
 *
 * // asChild with react component
 * <Order.GuestEmail asChild>
 *   {({ guestEmail }) => (
 *     <span>Email: {guestEmail}</span>
 *   )}
 * </Order.GuestEmail>
 * ```
 */
export declare const GuestEmail: React.ForwardRefExoticComponent<GuestEmailProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for the Order CreatedDate component.
 */
export interface CreatedDateProps {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Custom render function when using asChild */
    children?: AsChildChildren<{
        /** Created date */
        createdDate: Date;
        /** Formatted date */
        formattedDate: string;
    }>;
    /** CSS classes to apply to the default element */
    className?: string;
}
/**
 * Displays the order creation date.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <Order.CreatedDate className="text-gray-600 font-light" />
 *
 * // asChild with primitive
 * <Order.CreatedDate asChild>
 *   <p className="text-sm text-gray-500 font-light" />
 * </Order.CreatedDate>
 *
 * // asChild with react component
 * <Order.CreatedDate
 *   asChild
 *   className="font-light text-sm text-gray-700"
 * >
 *   {({ createdDate, formattedDate }) => (
 *     <span>Placed on: {formattedDate}</span>
 *   )}
 * </Order.CreatedDate>
 * ```
 */
export declare const CreatedDate: React.ForwardRefExoticComponent<CreatedDateProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for the Order DownloadTicketsButton component.
 */
export interface DownloadTicketsButtonProps {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Custom render function when using asChild */
    children?: AsChildChildren<{
        /** Tickets PDF URL */
        ticketsPdfUrl: string;
    }>;
    /** CSS classes to apply to the default element */
    className?: string;
    /** The label to display inside the button */
    label?: React.ReactNode;
}
/**
 * Download tickets button that provides access to event tickets PDF.
 * Only shows when tickets are available for download.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <Order.DownloadTicketsButton
 *   label="Download Tickets"
 *   className="bg-blue-500 text-white px-4 py-2 rounded"
 * />
 *
 * // asChild with primitive
 * <Order.DownloadTicketsButton asChild>
 *   <button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
 *     Download Tickets
 *   </button>
 * </Order.DownloadTicketsButton>
 *
 * // asChild with react component
 * <Order.DownloadTicketsButton asChild>
 *   {({ ticketsPdfUrl }) =>
 *     <button
 *       className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
 *       onClick={() => window.open(ticketsPdfUrl, '_blank')}
 *     >
 *       Download Tickets
 *     </button>
 *   }
 * </Order.DownloadTicketsButton>
 * ```
 */
export declare const DownloadTicketsButton: React.ForwardRefExoticComponent<DownloadTicketsButtonProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for the Order InvoiceItems component.
 */
export interface InvoiceItemsProps extends GenericListItemsProps {
}
/**
 * Container for order invoice items.
 *
 * @component
 * @example
 * ```tsx
 * <Order.InvoiceItems className="px-6 border-b border-gray-300">
 *   <div className="flex border-b border-gray-200 py-4 font-light text-gray-700">
 *     <div className="w-[35%]">Ticket type</div>
 *     <div className="w-[25%]">Price</div>
 *     <div className="w-[15%]">Quantity</div>
 *     <div className="w-[25%] text-right">Total</div>
 *   </div>
 *   <Order.InvoiceItemRepeater className="flex border-b border-gray-200 py-4 font-light text-gray-700">
 *     <InvoiceItem.Name className="w-[35%]" />
 *     <InvoiceItem.Price className="w-[25%]" />
 *     <InvoiceItem.Quantity className="w-[15%]" />
 *     <InvoiceItem.Total className="w-[25%] text-right" />
 *   </Order.InvoiceItemRepeater>
 * </Order.InvoiceItems>
 * ```
 */
export declare const InvoiceItems: React.ForwardRefExoticComponent<InvoiceItemsProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for the Order InvoiceItemRepeater component.
 */
export interface InvoiceItemRepeaterProps extends Omit<GenericListRepeaterProps<InvoiceItemType>, 'itemWrapper'> {
}
/**
 * Repeater component that renders InvoiceItem.Root for each invoice item in the order.
 * Must be used within Order.InvoiceItems component.
 *
 * @component
 * @example
 * ```tsx
 * <Order.InvoiceItems>
 *   <Order.InvoiceItemRepeater className="flex border-b border-gray-200 py-4 font-light text-gray-700">
 *     <InvoiceItem.Name className="w-[35%]" />
 *     <InvoiceItem.Price className="w-[25%]" />
 *     <InvoiceItem.Quantity className="w-[15%]" />
 *     <InvoiceItem.Total className="w-[25%] text-right" />
 *   </Order.InvoiceItemRepeater>
 * </Order.InvoiceItems>
 * ```
 */
export declare const InvoiceItemRepeater: React.ForwardRefExoticComponent<InvoiceItemRepeaterProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for the Order Subtotal component.
 */
export interface SubtotalProps extends Omit<MoneyProps, 'money'> {
}
/**
 * Displays the order subtotal amount.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <Order.Subtotal className="text-lg font-light text-gray-700" />
 *
 * // asChild with primitive
 * <Order.Subtotal asChild>
 *   <p className="text-lg font-light text-gray-700" />
 * </Order.Subtotal>
 *
 * // asChild with react component
 * <Order.Subtotal
 *   asChild
 *   className="font-light text-gray-700 justify-between flex"
 * >
 *   {({ formattedMoney, formattedMoneyParts }) => (
 *     <div>
 *       <span>Subtotal:</span>
 *       <span>{formattedMoney}</span>
 *     </div>
 *   )}
 * </Order.Subtotal>
 * ```
 */
export declare const Subtotal: React.ForwardRefExoticComponent<SubtotalProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for the Order PaidPlanDiscount component.
 */
export interface PaidPlanDiscountProps extends Omit<MoneyProps, 'money' | 'children'> {
    children?: React.ReactNode | AsChildChildren<{
        /** Formatted paid plan discount value */
        formattedMoney: string;
        /** Formatted paid plan discount value parts */
        formattedMoneyParts: Intl.NumberFormatPart[];
        /** Paid plan discount rate */
        rate: number;
    }>;
}
/**
 * Displays the order paid plan discount.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <Order.PaidPlanDiscount className="text-gray-600 font-light" />
 *
 * // asChild with primitive
 * <Order.PaidPlanDiscount asChild>
 *   <p className="text-sm text-gray-600 font-light" />
 * </Order.PaidPlanDiscount>
 *
 * // asChild with react component
 * <Order.PaidPlanDiscount asChild>
 *   {({ formattedMoney, formattedMoneyParts, rate }) => (
 *     <div>
 *       <span>Paid Plan Discount ({rate}%)</span>
 *       <span>{formattedMoney}</span>
 *     </div>
 *   )}
 * </Order.PaidPlanDiscount>
 * ```
 */
export declare const PaidPlanDiscount: React.ForwardRefExoticComponent<PaidPlanDiscountProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for the Order CouponDiscount component.
 */
export interface CouponDiscountProps extends Omit<MoneyProps, 'money'> {
}
/**
 * Displays the order coupon discount.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <Order.CouponDiscount className="text-gray-600 font-light" />
 *
 * // asChild with primitive
 * <Order.CouponDiscount asChild>
 *   <p className="text-sm text-gray-600 font-light" />
 * </Order.CouponDiscount>
 *
 * // asChild with react component
 * <Order.CouponDiscount asChild>
 *   {({ formattedMoney, formattedMoneyParts }) => (
 *     <div>
 *       <span>Coupon Discount</span>
 *       <span>{formattedMoney}</span>
 *     </div>
 *   )}
 * </Order.CouponDiscount>
 * ```
 */
export declare const CouponDiscount: React.ForwardRefExoticComponent<CouponDiscountProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for the Order Tax component.
 */
export interface TaxProps extends Omit<MoneyProps, 'money' | 'children'> {
    children?: React.ReactNode | AsChildChildren<{
        formattedMoney: string;
        /** Formatted tax value parts */
        formattedMoneyParts: Intl.NumberFormatPart[];
        /** Tax rate */
        rate: number;
        /** Tax name */
        name: string;
    }>;
}
/**
 * Displays the order tax.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <Order.Tax className="text-gray-600 font-light" />
 *
 * // asChild with primitive
 * <Order.Tax asChild>
 *   <p className="text-sm text-gray-600 font-light" />
 * </Order.Tax>
 *
 * // asChild with react component
 * <Order.Tax
 *   asChild
 *   className="font-light text-gray-700 justify-between flex"
 * >
 *   {({ formattedMoney, formattedMoneyParts, rate, name }) => (
 *     <div>
 *       <span>{name} ({rate}%)</span>
 *       <span>{formattedMoney}</span>
 *     </div>
 *   )}
 * </Order.Tax>
 * ```
 */
export declare const Tax: React.ForwardRefExoticComponent<TaxProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for the Order Fee component.
 */
export interface FeeProps extends Omit<MoneyProps, 'money' | 'children'> {
    children?: React.ReactNode | AsChildChildren<{
        /** Formatted fee value */
        formattedMoney: string;
        /** Formatted fee value parts */
        formattedMoneyParts: Intl.NumberFormatPart[];
        /** Fee rate */
        rate: number;
    }>;
}
/**
 * Displays the order fee.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <Order.Fee className="text-gray-600 font-light" />
 *
 * // asChild with primitive
 * <Order.Fee asChild>
 *   <p className="text-sm text-gray-600 font-light" />
 * </Order.Fee>
 *
 * // asChild with react component
 * <Order.Fee
 *   asChild
 *   className="font-light text-gray-700 justify-between flex"
 * >
 *   {({ formattedMoney, formattedMoneyParts, rate }) => (
 *     <div>
 *       <span>Service Fee ({rate}%)</span>
 *       <span>{formattedMoney}</span>
 *     </div>
 *   )}
 * </Order.Fee>
 * ```
 */
export declare const Fee: React.ForwardRefExoticComponent<FeeProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for the Order Total component.
 */
export interface TotalProps extends Omit<MoneyProps, 'money'> {
}
/**
 * Displays the order total amount.
 * This represents the final amount to be paid including all fees and taxes.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <Order.Total className="text-xl font-light text-gray-700" />
 *
 * // asChild with primitive
 * <Order.Total asChild>
 *   <p className="text-2xl font-bold text-gray-900" />
 * </Order.Total>
 *
 * // asChild with react component
 * <Order.Total
 *   asChild
 *   className="font-light text-gray-700 justify-between flex py-5"
 * >
 *   {({ formattedMoney, formattedMoneyParts }) => (
 *     <div>
 *       <span>Total:</span>
 *       <span>{formattedMoney}</span>
 *     </div>
 *   )}
 * </Order.Total>
 * ```
 */
export declare const Total: React.ForwardRefExoticComponent<TotalProps & React.RefAttributes<HTMLElement>>;