/**
* @fileoverview Commerce Primitive Components
*
* This module provides unstyled, composable components for building e-commerce functionality.
* These components follow the Radix UI primitive pattern, offering:
*
* - **Unstyled**: No default styling, only functional behavior
* - **Composable**: Support for the `asChild` pattern for flexible DOM structure
* - **Accessible**: Built-in ARIA attributes and proper semantics
* - **Flexible**: Render props pattern for maximum customization
*
* ## Architecture
*
* These components are the **primitive layer** that sits between:
* 1. **Core components** (pure logic, no DOM)
* 2. **Styled components** (project-specific styling)
*
* ## Usage
*
* ```tsx
* import { Commerce } from '@wix/ecom/react';
*
* function CheckoutButton() {
* return (
*
* );
* }
*
* function CustomDomButton() {
* return (
*
*
*
* );
* }
*
* function CustomCheckoutButton() {
* return (
*
* {({ proceedToCheckout, canCheckout, isLoading }, ref) => (
*
* )}
*
* );
* }
* ```
*
* @module Commerce
*/
import { AsChildChildren } from '@wix/headless-utils/react';
import { Root as CoreCheckoutRoot } from './core/Checkout.js';
import React from 'react';
import { type LineItem } from '../services/checkout-service.js';
/**
* Props for the Commerce Root component.
*/
export interface RootProps {
/** Configuration for the checkout service */
checkoutServiceConfig?: Parameters[0]['checkoutServiceConfig'];
/** Content to render inside the root component */
children?: React.ReactNode;
}
/**
* Root component that provides the Commerce context to its children.
* This component sets up the necessary services for managing commerce functionality.
*
* @component
* @example
* ```tsx
*
*
*
*
* ```
*/
export declare const Root: {
({ checkoutServiceConfig, children }: RootProps): import("react/jsx-runtime").JSX.Element;
displayName: string;
};
/**
* Props for the ActionCheckout component.
* Supports the asChild pattern for flexible composition.
*/
export interface ActionCheckoutProps extends Omit, 'children'> {
/** When true, the component will not render its own element but forward its props to its child */
asChild?: boolean;
/**
* Content to render inside the button.
* Can be static content or a render function for custom behavior.
*/
children?: AsChildChildren<{
/** Function to proceed to checkout */
proceedToCheckout: () => Promise;
/** Whether checkout is available */
canCheckout: boolean;
/** Whether checkout action is loading */
isLoading: boolean;
}>;
/** Text or content to display when not loading */
label?: string | React.ReactNode;
/** Text or content to display when loading */
loadingState?: string | React.ReactNode;
}
/**
* Props for ActionAddToCart and ActionBuyNow components.
* These components require line items to add to cart or purchase.
* Supports the asChild pattern for flexible composition.
*/
export interface ActionAddToCartProps extends Omit, 'children'> {
/** When true, the component will not render its own element but forward its props to its child */
asChild?: boolean;
/**
* Content to render inside the button.
* Can be static content or a render function for custom behavior.
*/
children?: React.ReactNode | React.ForwardRefRenderFunction Promise;
/** Line items that will be processed */
lineItems: LineItem[];
/** Error message if any */
error?: string | null;
}>;
/** Text or content to display when not loading */
label?: string | React.ReactNode;
/** Text or content to display when loading */
loadingState?: string | React.ReactNode;
/** Line items to add to cart or purchase */
lineItems: LineItem[];
/** Additional disabled state (combined with loading state) */
disabled?: boolean;
/** Callback fired after successful add to cart */
onSuccess?: () => void | Promise;
}
/**
* Props for ActionBuyNow component.
* Extends ActionAddToCartProps with the same interface.
* @deprecated Use ActionAddToCartProps instead - this is kept for backwards compatibility
*/
export interface ActionBuyNowRenderProps extends ActionAddToCartProps {
}
/**
* Props for the CheckoutTrigger component.
* Wraps CheckoutCore.Trigger for use in other packages.
*/
export interface CheckoutTriggerProps {
/** Content to render inside the trigger */
children: (props: {
createCheckout: (lineItems: LineItem[]) => Promise;
isLoading: boolean;
error: string | null;
}) => React.ReactNode;
}
/**
* CheckoutTrigger component that wraps CheckoutCore.Trigger.
* This wrapper provides a consistent interface for other packages to use.
*
* @component
* @example
* ```tsx
*
* {({ createCheckout, isLoading, error }) => (
*
* )}
*
* ```
*/
export declare const CheckoutTrigger: React.ForwardRefExoticComponent>;
/**
* Namespace containing all commerce action components.
* These components provide consistent interfaces for common e-commerce actions
* like checkout, adding to cart, and immediate purchase flows.
*
* All action components support:
* - Automatic loading state management
* - Disabled state handling
* - The asChild pattern for flexible composition
* - Accessible button semantics
* - Test IDs for automation
*
* @namespace
* @example
* ```tsx
* // Basic usage of all action types
* function ProductActions({ product, selectedVariant }) {
* const lineItems = [{
* catalogReference: {
* catalogItemId: product.id,
* appId: 'stores',
* options: selectedVariant.options
* },
* quantity: 1
* }];
*
* return (
*
*
*
*
*
*
*
* );
* }
*
* // Custom button with DOM structure
* function CustomDomButton() {
* return (
*