@b3dotfun/sdk 0.1.66 → 0.1.68

package/dist/esm/anyspend/react/components/checkout/CartSummary.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../shared/utils/cn.js";
+import { formatTokenAmount, safeBigInt } from "../../../../shared/utils/number.js";
+import { useMemo } from "react";
+export function CartSummary({ total, tokenSymbol, classes, subtotal, tokenDecimals = 18, shipping, tax, discount, summaryLines, usdEquivalent, }) {
+    const hasAdjustments = !!shipping?.amount || !!tax?.amount || !!discount?.amount || (summaryLines && summaryLines.length > 0);
+    const formattedShipping = useMemo(() => (shipping?.amount ? formatTokenAmount(safeBigInt(shipping.amount), tokenDecimals) : null), [shipping?.amount, tokenDecimals]);
+    const formattedTax = useMemo(() => (tax?.amount ? formatTokenAmount(safeBigInt(tax.amount), tokenDecimals) : null), [tax?.amount, tokenDecimals]);
+    const formattedDiscount = useMemo(() => (discount?.amount ? formatTokenAmount(safeBigInt(discount.amount), tokenDecimals) : null), [discount?.amount, tokenDecimals]);
+    const formattedSummaryLines = useMemo(() => summaryLines?.map(line => ({
+        ...line,
+        formattedAmount: formatTokenAmount(safeBigInt(line.amount), tokenDecimals),
+        isNegative: safeBigInt(line.amount) < BigInt(0),
+    })), [summaryLines, tokenDecimals]);
+    return (_jsxs("div", { className: cn("border-t border-gray-200 pt-3 dark:border-neutral-700", classes?.cartSummary), children: [hasAdjustments && subtotal && (_jsxs("div", { className: cn("flex items-center justify-between py-1", classes?.cartSubtotal), children: [_jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Subtotal" }), _jsxs("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [subtotal, " ", tokenSymbol] })] })), formattedShipping && (_jsxs("div", { className: cn("flex items-center justify-between py-1", classes?.cartSummaryLine), children: [_jsx("span", { className: cn("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineLabel), children: shipping?.label || "Shipping" }), _jsxs("span", { className: cn("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineAmount), children: [formattedShipping, " ", tokenSymbol] })] })), formattedTax && (_jsxs("div", { className: cn("flex items-center justify-between py-1", classes?.cartSummaryLine), children: [_jsxs("span", { className: cn("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineLabel), children: [tax?.label || "Tax", tax?.rate && _jsxs("span", { className: "ml-1 text-xs text-gray-400 dark:text-gray-500", children: ["(", tax.rate, ")"] })] }), _jsxs("span", { className: cn("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineAmount), children: [formattedTax, " ", tokenSymbol] })] })), formattedDiscount && (_jsxs("div", { className: cn("flex items-center justify-between py-1", classes?.cartDiscount), children: [_jsxs("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [discount?.label || "Discount", discount?.code && (_jsx("span", { className: "ml-1 rounded bg-green-50 px-1.5 py-0.5 text-xs font-medium text-green-600 dark:bg-green-900/20 dark:text-green-400", children: discount.code }))] }), _jsxs("span", { className: "text-sm font-medium text-green-600 dark:text-green-400", children: ["-", formattedDiscount, " ", tokenSymbol] })] })), formattedSummaryLines?.map(line => (_jsxs("div", { className: cn("flex items-center justify-between py-1", classes?.cartSummaryLine), children: [_jsxs("span", { className: cn("text-sm text-gray-500 dark:text-gray-400", classes?.cartSummaryLineLabel), children: [line.label, line.description && (_jsxs("span", { className: "ml-1 text-xs text-gray-400 dark:text-gray-500", children: ["(", line.description, ")"] }))] }), _jsxs("span", { className: cn("text-sm", line.isNegative ? "font-medium text-green-600 dark:text-green-400" : "text-gray-500 dark:text-gray-400", classes?.cartSummaryLineAmount), children: [line.formattedAmount, " ", tokenSymbol] })] }, line.label))), _jsxs("div", { className: cn("flex flex-col", hasAdjustments && "mt-1 border-t border-gray-100 pt-2 dark:border-neutral-800"), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: "Total" }), _jsxs("span", { className: cn("text-base font-semibold text-gray-900 dark:text-gray-100", classes?.cartTotal), children: [total, " ", tokenSymbol] })] }), usdEquivalent && (_jsx("div", { className: "flex justify-end", children: _jsxs("span", { className: "text-xs text-gray-400 dark:text-gray-500", children: ["~", usdEquivalent, " USD"] }) }))] })] }));
+}

package/dist/esm/anyspend/react/components/checkout/CheckoutCartPanel.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from "react";
+import type { CheckoutItem, CheckoutSummaryLine, AnySpendCheckoutClasses } from "./AnySpendCheckout";
+interface CheckoutCartPanelProps {
+    items: CheckoutItem[];
+    totalAmount: string;
+    tokenSymbol?: string;
+    tokenDecimals?: number;
+    organizationName?: string;
+    organizationLogo?: string;
+    classes?: AnySpendCheckoutClasses;
+    /** Custom footer. Pass `null` to hide, or a ReactNode to replace the default PoweredByBranding. */
+    footer?: ReactNode | null;
+    shipping?: {
+        amount: string;
+        label?: string;
+    };
+    tax?: {
+        amount: string;
+        label?: string;
+        rate?: string;
+    };
+    discount?: {
+        amount: string;
+        label?: string;
+        code?: string;
+    };
+    summaryLines?: CheckoutSummaryLine[];
+    /** Formatted USD equivalent (e.g. "$5.56") — shown for non-stablecoin tokens */
+    usdEquivalent?: string | null;
+}
+export declare function CheckoutCartPanel({ items, totalAmount, tokenSymbol, tokenDecimals, organizationName, organizationLogo, classes, footer, shipping, tax, discount, summaryLines, usdEquivalent, }: CheckoutCartPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/anyspend/react/components/checkout/CheckoutCartPanel.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../shared/utils/cn.js";
+import { formatTokenAmount, safeBigInt } from "../../../../shared/utils/number.js";
+import { useMemo } from "react";
+import { CartItemRow } from "./CartItemRow.js";
+import { CartSummary } from "./CartSummary.js";
+import { PoweredByBranding } from "./PoweredByBranding.js";
+export function CheckoutCartPanel({ items, totalAmount, tokenSymbol = "", tokenDecimals = 18, organizationName, organizationLogo, classes, footer, shipping, tax, discount, summaryLines, usdEquivalent, }) {
+    const formattedTotal = useMemo(() => formatTokenAmount(safeBigInt(totalAmount), tokenDecimals), [totalAmount, tokenDecimals]);
+    // Compute subtotal from items only (before adjustments)
+    const formattedSubtotal = useMemo(() => {
+        let subtotal = BigInt(0);
+        for (const item of items) {
+            subtotal += safeBigInt(item.amount) * BigInt(item.quantity);
+        }
+        return formatTokenAmount(subtotal, tokenDecimals);
+    }, [items, tokenDecimals]);
+    return (_jsxs("div", { className: cn("anyspend-cart-panel flex flex-col", classes?.cartPanel), children: [_jsx("h2", { className: cn("anyspend-cart-title mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100", classes?.cartTitle), children: "Order Summary" }), _jsx("div", { className: "anyspend-cart-items divide-y divide-gray-100 dark:divide-gray-800", children: items.map((item, index) => {
+                    const itemTotal = safeBigInt(item.amount) * BigInt(item.quantity);
+                    const formattedPrice = `${formatTokenAmount(itemTotal, tokenDecimals)} ${tokenSymbol}`;
+                    return _jsx(CartItemRow, { item: item, formattedPrice: formattedPrice, classes: classes }, item.id || index);
+                }) }), _jsx(CartSummary, { total: formattedTotal, tokenSymbol: tokenSymbol, classes: classes, subtotal: formattedSubtotal, tokenDecimals: tokenDecimals, shipping: shipping, tax: tax, discount: discount, summaryLines: summaryLines, usdEquivalent: usdEquivalent }), footer === undefined ? (_jsx(PoweredByBranding, { organizationName: organizationName, organizationLogo: organizationLogo, classes: classes })) : (footer)] }));
+}

package/dist/esm/anyspend/react/components/checkout/CheckoutFormField.d.ts

@@ -0,0 +1,10 @@
+import type { CheckoutFormField as FormFieldType } from "../../../types/forms";
+interface CheckoutFormFieldProps {
+    field: FormFieldType;
+    value: unknown;
+    onChange: (id: string, value: unknown) => void;
+    error?: string;
+    className?: string;
+}
+export declare function CheckoutFormFieldComponent({ field, value, onChange, error, className }: CheckoutFormFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/anyspend/react/components/checkout/CheckoutFormField.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../shared/utils/cn.js";
+const inputBaseClass = "w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 outline-none transition-colors focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-neutral-600 dark:bg-neutral-800 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:border-blue-400";
+const labelClass = "mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300";
+export function CheckoutFormFieldComponent({ field, value, onChange, error, className }) {
+    const handleChange = (val) => {
+        onChange(field.id, val);
+    };
+    const renderField = () => {
+        switch (field.type) {
+            case "text":
+            case "email":
+            case "phone":
+            case "number":
+                return (_jsx("input", { type: field.type === "phone" ? "tel" : field.type, value: value || "", onChange: e => handleChange(e.target.value), placeholder: field.placeholder, required: field.required, className: cn("anyspend-form-input", inputBaseClass, error && "border-red-400 focus:border-red-500 focus:ring-red-500"), minLength: field.validation?.minLength, maxLength: field.validation?.maxLength, min: field.validation?.min, max: field.validation?.max, pattern: field.validation?.pattern }));
+            case "textarea":
+                return (_jsx("textarea", { value: value || "", onChange: e => handleChange(e.target.value), placeholder: field.placeholder, required: field.required, rows: 3, className: cn("anyspend-form-textarea", inputBaseClass, "resize-y", error && "border-red-400 focus:border-red-500 focus:ring-red-500"), minLength: field.validation?.minLength, maxLength: field.validation?.maxLength }));
+            case "select":
+                return (_jsxs("select", { value: value || "", onChange: e => handleChange(e.target.value), required: field.required, className: cn("anyspend-form-select", inputBaseClass, "cursor-pointer", error && "border-red-400"), children: [_jsx("option", { value: "", children: field.placeholder || "Select..." }), field.options?.map(opt => (_jsx("option", { value: opt.value, children: opt.label }, opt.value)))] }));
+            case "checkbox":
+                return (_jsxs("label", { className: "anyspend-form-checkbox flex cursor-pointer items-center gap-2", children: [_jsx("input", { type: "checkbox", checked: !!value, onChange: e => handleChange(e.target.checked), className: "h-4 w-4 rounded border-gray-300 text-blue-500 focus:ring-blue-500" }), _jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: field.placeholder || field.label })] }));
+            default:
+                return (_jsx("input", { type: "text", value: value || "", onChange: e => handleChange(e.target.value), placeholder: field.placeholder, required: field.required, className: cn("anyspend-form-input", inputBaseClass, error && "border-red-400") }));
+        }
+    };
+    return (_jsxs("div", { className: cn("anyspend-form-field space-y-1", className), "data-field-id": field.id, "data-field-type": field.type, children: [field.type !== "checkbox" && (_jsxs("label", { className: cn("anyspend-form-label", labelClass), children: [field.label, field.required && _jsx("span", { className: "ml-0.5 text-red-500", children: "*" })] })), renderField(), error && _jsx("p", { className: "anyspend-form-error text-xs text-red-500", children: error })] }));
+}

package/dist/esm/anyspend/react/components/checkout/CheckoutFormPanel.d.ts

@@ -0,0 +1,39 @@
+import type { CheckoutFormSchema, CheckoutFormComponentProps, AddressData, ShippingOption, DiscountResult } from "../../../types/forms";
+import type { AnySpendCheckoutClasses } from "../types/classes";
+interface CheckoutFormPanelProps {
+    /** JSON form definition */
+    formSchema?: CheckoutFormSchema | null;
+    /** Custom React component to render instead of schema-based form */
+    formComponent?: React.ComponentType<CheckoutFormComponentProps>;
+    /** Shipping options */
+    shippingOptions?: ShippingOption[] | null;
+    /** Whether to collect a shipping address */
+    collectShippingAddress?: boolean;
+    /** Enable discount code input */
+    enableDiscountCode?: boolean;
+    /** Validate a discount code */
+    validateDiscount?: (code: string) => Promise<DiscountResult>;
+    /** Token info for display */
+    tokenSymbol?: string;
+    tokenDecimals?: number;
+    /** CSS class overrides */
+    classes?: AnySpendCheckoutClasses;
+    /** Current form data (lifted state) */
+    formData: Record<string, unknown>;
+    /** Update form data */
+    onFormDataChange: (data: Record<string, unknown>) => void;
+    /** Shipping selection */
+    selectedShipping: ShippingOption | null;
+    onShippingChange: (option: ShippingOption) => void;
+    /** Discount state */
+    appliedDiscount: DiscountResult | null;
+    onDiscountApplied: (result: DiscountResult) => void;
+    onDiscountRemoved: () => void;
+    /** Shipping address */
+    shippingAddress: AddressData;
+    onShippingAddressChange: (address: AddressData) => void;
+    /** Slot overrides */
+    checkoutFormSlot?: (props: CheckoutFormComponentProps) => React.ReactNode;
+}
+export declare function CheckoutFormPanel({ formSchema, formComponent: FormComponent, shippingOptions, collectShippingAddress, enableDiscountCode, validateDiscount, tokenSymbol, tokenDecimals, classes, formData, onFormDataChange, selectedShipping, onShippingChange, appliedDiscount, onDiscountApplied, onDiscountRemoved, shippingAddress, onShippingAddressChange, checkoutFormSlot, }: CheckoutFormPanelProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/esm/anyspend/react/components/checkout/CheckoutFormPanel.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../shared/utils/cn.js";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { CheckoutFormFieldComponent } from "./CheckoutFormField.js";
+import { AddressForm } from "./AddressForm.js";
+import { ShippingSelector } from "./ShippingSelector.js";
+import { DiscountCodeInput } from "./DiscountCodeInput.js";
+const emptyAddress = { street: "", city: "", state: "", zip: "", country: "" };
+export function CheckoutFormPanel({ formSchema, formComponent: FormComponent, shippingOptions, collectShippingAddress, enableDiscountCode, validateDiscount, tokenSymbol, tokenDecimals, classes, formData, onFormDataChange, selectedShipping, onShippingChange, appliedDiscount, onDiscountApplied, onDiscountRemoved, shippingAddress, onShippingAddressChange, checkoutFormSlot, }) {
+    const [errors, setErrors] = useState({});
+    const hasFormFields = formSchema && formSchema.fields.length > 0;
+    const hasShipping = shippingOptions && shippingOptions.length > 0;
+    const hasAnyContent = hasFormFields || FormComponent || checkoutFormSlot || hasShipping || collectShippingAddress || enableDiscountCode;
+    // All hooks must be called before any early returns
+    const formDataRef = useRef(formData);
+    formDataRef.current = formData;
+    const handleFieldChange = useCallback((id, value) => {
+        onFormDataChange({ ...formDataRef.current, [id]: value });
+        setErrors(prev => {
+            if (!prev[id])
+                return prev;
+            const next = { ...prev };
+            delete next[id];
+            return next;
+        });
+    }, [onFormDataChange]);
+    const handleFormSubmit = useCallback((data) => {
+        onFormDataChange(data);
+    }, [onFormDataChange]);
+    const handleValidationChange = useCallback((_isValid) => {
+        // Validation is handled internally via errors state
+    }, []);
+    const handleDiscountApply = useCallback(async (code) => {
+        if (!validateDiscount) {
+            return { valid: false, error: "Discount validation not available" };
+        }
+        const result = await validateDiscount(code);
+        if (result.valid) {
+            onDiscountApplied(result);
+        }
+        return result;
+    }, [validateDiscount, onDiscountApplied]);
+    // Separate address fields from regular fields
+    const { regularFields, addressFields } = useMemo(() => {
+        if (!formSchema)
+            return { regularFields: [], addressFields: [] };
+        return {
+            regularFields: formSchema.fields.filter(f => f.type !== "address"),
+            addressFields: formSchema.fields.filter(f => f.type === "address"),
+        };
+    }, [formSchema]);
+    if (!hasAnyContent)
+        return null;
+    // Shared shipping + discount section
+    const shippingAndDiscount = (_jsxs(_Fragment, { children: [hasShipping && shippingOptions && (_jsx(ShippingSelector, { options: shippingOptions, selectedId: selectedShipping?.id || null, onSelect: onShippingChange, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals })), enableDiscountCode && validateDiscount && (_jsx(DiscountCodeInput, { onApply: handleDiscountApply, appliedDiscount: appliedDiscount, onRemove: onDiscountRemoved, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals }))] }));
+    // Render custom form slot if provided
+    if (checkoutFormSlot) {
+        return (_jsxs("div", { className: cn("anyspend-form-panel space-y-4", classes?.formPanel), children: [_jsx("div", { className: "anyspend-form-slot", children: checkoutFormSlot({
+                        onSubmit: handleFormSubmit,
+                        onValidationChange: handleValidationChange,
+                        formData,
+                        setFormData: onFormDataChange,
+                    }) }), shippingAndDiscount] }));
+    }
+    // Render custom form component if provided
+    if (FormComponent) {
+        return (_jsxs("div", { className: cn("anyspend-form-panel space-y-4", classes?.formPanel), children: [_jsx("div", { className: "anyspend-form-component", children: _jsx(FormComponent, { onSubmit: handleFormSubmit, onValidationChange: handleValidationChange, formData: formData, setFormData: onFormDataChange }) }), shippingAndDiscount] }));
+    }
+    // Schema-based form rendering
+    return (_jsxs("div", { className: cn("anyspend-form-panel space-y-4", classes?.formPanel), children: [regularFields.length > 0 && (_jsx("div", { className: "anyspend-form-fields space-y-3", children: regularFields.map(field => (_jsx(CheckoutFormFieldComponent, { field: field, value: formData[field.id], onChange: handleFieldChange, error: errors[field.id] }, field.id))) })), addressFields.map(field => (_jsxs("div", { className: "anyspend-form-address space-y-2", children: [_jsx("h3", { className: "anyspend-form-address-title text-sm font-semibold text-gray-900 dark:text-gray-100", children: field.label }), _jsx(AddressForm, { value: formData[field.id] || emptyAddress, onChange: addr => handleFieldChange(field.id, addr), required: field.required })] }, field.id))), collectShippingAddress && addressFields.length === 0 && (_jsxs("div", { className: "anyspend-shipping-address space-y-2", children: [_jsx("h3", { className: "anyspend-shipping-address-title text-sm font-semibold text-gray-900 dark:text-gray-100", children: "Shipping Address" }), _jsx(AddressForm, { value: shippingAddress, onChange: onShippingAddressChange, required: true })] })), shippingAndDiscount] }));
+}

package/dist/esm/anyspend/react/components/checkout/CheckoutLayout.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+interface CheckoutLayoutProps {
+    mode: "page" | "embedded";
+    paymentPanel: ReactNode;
+    cartPanel: ReactNode;
+    classes?: AnySpendCheckoutClasses;
+}
+export declare function CheckoutLayout({ mode, paymentPanel, cartPanel, classes }: CheckoutLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/anyspend/react/components/checkout/CheckoutLayout.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../shared/utils/cn.js";
+export function CheckoutLayout({ mode, paymentPanel, cartPanel, classes }) {
+    const rightColumnWidth = mode === "page" ? 380 : 340;
+    return (_jsx("div", { className: cn("anyspend-checkout mx-auto w-full", classes?.root), style: {
+            ...(mode === "page" ? { maxWidth: 1100, padding: "2rem 1rem" } : undefined),
+            "--anyspend-cart-width": `${rightColumnWidth}px`,
+        }, children: _jsxs("div", { className: cn("anyspend-checkout-grid", classes?.layout), children: [_jsx("div", { className: cn("anyspend-payment-col order-2", "rounded-2xl border border-gray-200 bg-white p-6 shadow-sm dark:border-neutral-700 dark:bg-neutral-900", classes?.paymentColumn), children: paymentPanel }), _jsx("div", { className: cn("anyspend-cart-col order-1", "rounded-2xl border border-gray-200 bg-gray-50 p-6 dark:border-neutral-700 dark:bg-neutral-800/50", classes?.cartColumn), children: cartPanel })] }) }));
+}

package/dist/esm/anyspend/react/components/checkout/CheckoutOrderStatus.d.ts

@@ -0,0 +1,28 @@
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+interface CheckoutOrderStatusProps {
+    /** The order ID to track */
+    orderId: string;
+    /** Theme color (hex) */
+    themeColor?: string;
+    /** Return URL for the terminal success state */
+    returnUrl?: string;
+    /** Label for the return button */
+    returnLabel?: string;
+    /** Called when the order reaches "executed" */
+    onSuccess?: (result: {
+        txHash?: string;
+        orderId?: string;
+    }) => void;
+    /** Called when the order reaches a failure/expired/refunded terminal state */
+    onError?: (error: Error) => void;
+    /** Called when the user clicks "Try again" on failure */
+    onRetry?: () => void;
+    /** Show the points row in the order status summary. Defaults to false. */
+    showPoints?: boolean;
+    /** Show the order ID row in the order status summary. Defaults to false. */
+    showOrderId?: boolean;
+    /** Custom class names */
+    classes?: AnySpendCheckoutClasses;
+}
+export declare function CheckoutOrderStatus({ orderId, themeColor, returnUrl, returnLabel, onSuccess, onError, onRetry, showPoints, showOrderId, classes, }: CheckoutOrderStatusProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/anyspend/react/components/checkout/CheckoutOrderStatus.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { getErrorDisplay, getExplorerTxUrl, getStatusDisplay } from "../../../../anyspend/index.js";
+import { useAnyspendOrderAndTransactions } from "../../../../anyspend/react/hooks/useAnyspendOrderAndTransactions.js";
+import { useOnOrderSuccess } from "../../../../anyspend/react/hooks/useOnOrderSuccess.js";
+import { TextShimmer } from "../../../../global-account/react/index.js";
+import { cn } from "../../../../shared/utils/cn.js";
+import { formatNumber } from "../../../../shared/utils/formatNumber.js";
+import { ExternalLink, Loader2, RefreshCcw } from "lucide-react";
+import { motion } from "motion/react";
+import { useEffect, useRef } from "react";
+import { useAnySpendCustomization } from "../context/AnySpendCustomizationContext.js";
+import { OrderStatus } from "../common/OrderStatus.js";
+export function CheckoutOrderStatus({ orderId, themeColor, returnUrl, returnLabel, onSuccess, onError, onRetry, showPoints = false, showOrderId = false, classes, }) {
+    // Stable refs for callback props to avoid re-triggering effects
+    const onErrorRef = useRef(onError);
+    onErrorRef.current = onError;
+    const { orderAndTransactions, isLoadingOrderAndTransactions } = useAnyspendOrderAndTransactions(orderId);
+    const order = orderAndTransactions?.data?.order;
+    const executeTx = orderAndTransactions?.data?.executeTx;
+    const points = orderAndTransactions?.data?.points;
+    const { content } = useAnySpendCustomization();
+    // Fire onSuccess when order reaches "executed"
+    useOnOrderSuccess({
+        orderData: orderAndTransactions,
+        orderId,
+        onSuccess: (txHash) => onSuccess?.({ orderId, txHash }),
+    });
+    // Fire onError once for terminal failure states
+    const onErrorCalled = useRef(false);
+    useEffect(() => {
+        if (!order || onErrorCalled.current)
+            return;
+        if (order.status === "failure" || order.status === "expired" || order.status === "refunded") {
+            const { description } = getStatusDisplay(order);
+            onErrorRef.current?.(new Error(description || `Order ${order.status}`));
+            onErrorCalled.current = true;
+        }
+    }, [order]);
+    // Reset error flag if orderId changes
+    const prevOrderId = useRef(orderId);
+    useEffect(() => {
+        if (prevOrderId.current !== orderId) {
+            onErrorCalled.current = false;
+            prevOrderId.current = orderId;
+        }
+    }, [orderId]);
+    // Clear persisted orderId when order reaches a terminal state
+    const orderStatus = order?.status;
+    useEffect(() => {
+        if (orderStatus && ["executed", "failure", "expired", "refunded"].includes(orderStatus)) {
+            sessionStorage.removeItem("anyspend_checkout_orderId");
+        }
+    }, [orderStatus]);
+    // Loading state
+    if (isLoadingOrderAndTransactions || !order) {
+        return (_jsxs("div", { className: cn("flex flex-col items-center gap-3 py-12", classes?.orderStatusPanel), children: [_jsx(Loader2, { className: "h-6 w-6 animate-spin text-gray-400" }), _jsx(TextShimmer, { duration: 1.5, className: "text-sm", children: "Loading order status..." })] }));
+    }
+    const isExecuted = order.status === "executed";
+    const isRefunding = order.status === "refunding";
+    return (_jsxs(motion.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3, ease: "easeOut" }, className: cn("anyspend-checkout-order-status flex flex-col items-center gap-5 py-6", classes?.orderStatusPanel), children: [_jsx(OrderStatus, { order: order }), (showPoints || showOrderId) && (_jsx(motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, delay: 0.15 }, className: "bg-as-surface-secondary border-as-border-secondary w-full rounded-xl border px-4 py-3", children: _jsxs("div", { className: "flex flex-col gap-2 text-sm", children: [showPoints && points != null && points > 0 && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full justify-between", children: [_jsx("span", { className: "text-as-tertiary", children: "Points" }), _jsxs("span", { className: "text-as-brand font-semibold", children: ["+", formatNumber(points), " pts"] })] }), showOrderId && _jsx("div", { className: "divider w-full" })] })), showOrderId && (_jsxs("div", { className: "flex w-full items-center justify-between gap-3", children: [_jsx("span", { className: "text-as-tertiary shrink-0", children: "Order ID" }), _jsx("span", { className: "text-as-primary min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", children: order.id })] }))] }) })), isExecuted && executeTx && (_jsxs(motion.a, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, delay: 0.3, ease: "easeOut" }, href: getExplorerTxUrl(order.dstChain, executeTx.txHash), target: "_blank", rel: "noopener noreferrer", className: cn("flex items-center gap-1.5 text-sm text-blue-600 hover:underline dark:text-blue-400", classes?.transactionLink), children: ["View Transaction", _jsx(ExternalLink, { className: "h-3.5 w-3.5" })] })), order.status === "failure" && order.errorDetails && (_jsx(motion.p, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.2, delay: 0.2 }, className: "max-w-[40ch] text-center text-sm text-red-500 dark:text-red-400", children: getErrorDisplay(order.errorDetails) })), (order.status === "failure" || order.status === "expired") && onRetry && (_jsxs(motion.button, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, delay: 0.3 }, onClick: onRetry, className: cn("flex items-center gap-2 rounded-xl px-6 py-3 text-sm font-medium transition-colors", "bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-neutral-800 dark:text-gray-300 dark:hover:bg-neutral-700", classes?.retryButton), children: [_jsx(RefreshCcw, { className: "h-4 w-4" }), content.retryButtonLabel || "Try Again"] })), (isExecuted || order.status === "refunded") && returnUrl && (_jsx(motion.a, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, delay: 0.4 }, href: returnUrl, className: cn("inline-flex rounded-xl px-6 py-3 text-sm font-medium transition-colors", classes?.returnButton), style: { backgroundColor: themeColor || "#111827", color: "#fff" }, children: content.returnButtonLabel || returnLabel || "Return to Store" })), isRefunding && (_jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Please wait while your funds are being returned." }))] }));
+}

package/dist/esm/anyspend/react/components/checkout/CheckoutPaymentPanel.d.ts

@@ -0,0 +1,31 @@
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+export type PaymentMethod = "crypto" | "card" | "coinbase";
+interface CheckoutPaymentPanelProps {
+    recipientAddress: string;
+    destinationTokenAddress: string;
+    destinationTokenChainId: number;
+    totalAmount: string;
+    buttonText?: string;
+    themeColor?: string;
+    returnUrl?: string;
+    returnLabel?: string;
+    onSuccess?: (result: {
+        txHash?: string;
+        orderId?: string;
+    }) => void;
+    onError?: (error: Error) => void;
+    callbackMetadata?: Record<string, unknown>;
+    classes?: AnySpendCheckoutClasses;
+    /** Which payment method to expand initially. Defaults to none (all collapsed). */
+    defaultPaymentMethod?: PaymentMethod;
+    /** Optional sender (payer) address — pre-fills token balances in the crypto panel */
+    senderAddress?: string;
+    /** Show the points row in the order status summary. Defaults to false. */
+    showPoints?: boolean;
+    /** Show the order ID row in the order status summary. Defaults to false. */
+    showOrderId?: boolean;
+    /** Whether the checkout form is valid. When false, payment methods are disabled. */
+    isFormValid?: boolean;
+}
+export declare function CheckoutPaymentPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, buttonText, themeColor, returnUrl, returnLabel, onSuccess, onError, callbackMetadata, classes, defaultPaymentMethod, senderAddress, showPoints, showOrderId, isFormValid, }: CheckoutPaymentPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/anyspend/react/components/checkout/CheckoutPaymentPanel.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../shared/utils/cn.js";
+import { CreditCard, Wallet } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { useCallback, useEffect, useState } from "react";
+import { CheckoutOrderStatus } from "./CheckoutOrderStatus.js";
+import { CoinbaseCheckoutPanel } from "./CoinbaseCheckoutPanel.js";
+import { CryptoPayPanel } from "./CryptoPayPanel.js";
+import { FiatCheckoutPanel } from "./FiatCheckoutPanel.js";
+const SESSION_STORAGE_KEY = "anyspend_checkout_orderId";
+function RadioCircle({ selected, themeColor }) {
+    return (_jsx("div", { className: cn("flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-full border-2 transition-colors", selected ? "border-blue-600" : "border-gray-300 dark:border-neutral-600"), style: selected && themeColor ? { borderColor: themeColor } : undefined, children: selected && (_jsx("div", { className: "h-2 w-2 rounded-full bg-blue-600", style: themeColor ? { backgroundColor: themeColor } : undefined })) }));
+}
+/** Card brand logos - all use consistent 32x20 viewBox */
+function VisaLogo() {
+    return (_jsxs("svg", { viewBox: "0 0 32 20", style: { width: 32, height: 20 }, "aria-label": "Visa", children: [_jsx("rect", { width: "32", height: "20", rx: "3", fill: "#1A1F71" }), _jsx("text", { x: "16", y: "13.5", textAnchor: "middle", fill: "white", fontSize: "9", fontWeight: "bold", fontFamily: "sans-serif", fontStyle: "italic", children: "VISA" })] }));
+}
+function MastercardLogo() {
+    return (_jsxs("svg", { viewBox: "0 0 32 20", style: { width: 32, height: 20 }, "aria-label": "Mastercard", children: [_jsx("rect", { width: "32", height: "20", rx: "3", fill: "#252525" }), _jsx("circle", { cx: "12.5", cy: "10", r: "6", fill: "#EB001B" }), _jsx("circle", { cx: "19.5", cy: "10", r: "6", fill: "#F79E1B" }), _jsx("path", { d: "M16 5.6a6 6 0 0 1 0 8.8 6 6 0 0 1 0-8.8z", fill: "#FF5F00" })] }));
+}
+function AmexLogo() {
+    return (_jsxs("svg", { viewBox: "0 0 32 20", style: { width: 32, height: 20 }, "aria-label": "Amex", children: [_jsx("rect", { width: "32", height: "20", rx: "3", fill: "#006FCF" }), _jsx("text", { x: "16", y: "13", textAnchor: "middle", fill: "white", fontSize: "7", fontWeight: "bold", fontFamily: "sans-serif", children: "AMEX" })] }));
+}
+/** Coinbase mark */
+function CoinbaseLogo() {
+    return (_jsxs("svg", { viewBox: "0 0 24 24", style: { width: 20, height: 20 }, "aria-label": "Coinbase", children: [_jsx("circle", { cx: "12", cy: "12", r: "12", fill: "#0052FF" }), _jsx("path", { d: "M12 4.5a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15zm-1.8 4.8h3.6c.33 0 .6.27.6.6v4.2c0 .33-.27.6-.6.6h-3.6a.6.6 0 0 1-.6-.6V9.9c0-.33.27-.6.6-.6z", fill: "white" })] }));
+}
+export function CheckoutPaymentPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, buttonText, themeColor, returnUrl, returnLabel, onSuccess, onError, callbackMetadata, classes, defaultPaymentMethod, senderAddress, showPoints, showOrderId, isFormValid = true, }) {
+    const [paymentMethod, setPaymentMethod] = useState(defaultPaymentMethod ?? null);
+    // Restore activeOrderId from sessionStorage (handles page refresh / Coinbase return)
+    const [activeOrderId, setActiveOrderId] = useState(() => {
+        if (typeof window !== "undefined") {
+            return sessionStorage.getItem(SESSION_STORAGE_KEY) || null;
+        }
+        return null;
+    });
+    // Persist activeOrderId to sessionStorage
+    useEffect(() => {
+        if (activeOrderId) {
+            sessionStorage.setItem(SESSION_STORAGE_KEY, activeOrderId);
+        }
+        else {
+            sessionStorage.removeItem(SESSION_STORAGE_KEY);
+        }
+    }, [activeOrderId]);
+    const handleOrderCreated = useCallback((orderId) => {
+        setActiveOrderId(orderId);
+    }, []);
+    const handleRetry = useCallback(() => {
+        setActiveOrderId(null);
+    }, []);
+    if (activeOrderId) {
+        return (_jsx(CheckoutOrderStatus, { orderId: activeOrderId, themeColor: themeColor, returnUrl: returnUrl, returnLabel: returnLabel, onSuccess: onSuccess, onError: onError, onRetry: handleRetry, showPoints: showPoints, showOrderId: showOrderId, classes: classes }));
+    }
+    const accordionButtonClass = (active) => cn("anyspend-payment-method-btn flex w-full items-center gap-3 px-4 py-4 text-left transition-colors", active
+        ? "bg-white dark:bg-neutral-900"
+        : "bg-white hover:bg-gray-50 dark:bg-neutral-900 dark:hover:bg-neutral-800", classes?.paymentMethodButton);
+    const expandedPanelClass = cn("anyspend-payment-method-panel border-t border-gray-100 bg-white px-4 py-4 dark:border-neutral-800 dark:bg-neutral-900");
+    return (_jsxs("div", { className: cn("anyspend-payment-panel flex flex-col gap-5", classes?.paymentPanel), children: [_jsx("h2", { className: cn("anyspend-payment-title text-lg font-semibold text-gray-900 dark:text-gray-100", classes?.paymentTitle), children: "Payment" }), !isFormValid && (_jsx("p", { className: "text-sm text-amber-600 dark:text-amber-400", children: "Please complete the required fields above before proceeding to payment." })), _jsxs("div", { className: cn("anyspend-payment-methods divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-200 dark:divide-neutral-700 dark:border-neutral-700", !isFormValid && "pointer-events-none opacity-50", classes?.paymentMethodSelector), children: [_jsxs("div", { className: "anyspend-method-crypto", children: [_jsxs("button", { onClick: () => setPaymentMethod(paymentMethod === "crypto" ? null : "crypto"), className: accordionButtonClass(paymentMethod === "crypto"), children: [_jsx(RadioCircle, { selected: paymentMethod === "crypto", themeColor: themeColor }), _jsx(Wallet, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }), _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Pay with crypto" })] }), _jsx(AnimatePresence, { initial: false, children: paymentMethod === "crypto" && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: _jsx("div", { className: expandedPanelClass, children: _jsx(CryptoPayPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, buttonText: buttonText, themeColor: themeColor, onOrderCreated: handleOrderCreated, onError: onError, callbackMetadata: callbackMetadata, classes: classes, senderAddress: senderAddress }) }) }, "crypto-panel")) })] }), _jsxs("div", { className: "anyspend-method-card", children: [_jsxs("button", { onClick: () => setPaymentMethod(paymentMethod === "card" ? null : "card"), className: accordionButtonClass(paymentMethod === "card"), children: [_jsx(RadioCircle, { selected: paymentMethod === "card", themeColor: themeColor }), _jsx(CreditCard, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }), _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Credit or debit card" }), _jsxs("div", { className: "ml-auto flex items-center gap-1", children: [_jsx(VisaLogo, {}), _jsx(MastercardLogo, {}), _jsx(AmexLogo, {})] })] }), _jsx(AnimatePresence, { initial: false, children: paymentMethod === "card" && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: _jsx("div", { className: expandedPanelClass, children: _jsx(FiatCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onOrderCreated: handleOrderCreated, onError: onError, callbackMetadata: callbackMetadata, classes: classes }) }) }, "card-panel")) })] }), _jsxs("div", { className: "anyspend-method-coinbase", children: [_jsxs("button", { onClick: () => setPaymentMethod(paymentMethod === "coinbase" ? null : "coinbase"), className: accordionButtonClass(paymentMethod === "coinbase"), children: [_jsx(RadioCircle, { selected: paymentMethod === "coinbase", themeColor: themeColor }), _jsx(CoinbaseLogo, {}), _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Coinbase Pay" })] }), _jsx(AnimatePresence, { initial: false, children: paymentMethod === "coinbase" && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: _jsx("div", { className: expandedPanelClass, children: _jsx(CoinbaseCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onOrderCreated: handleOrderCreated, onError: onError, callbackMetadata: callbackMetadata, classes: classes }) }) }, "coinbase-panel")) })] })] })] }));
+}

package/dist/esm/anyspend/react/components/checkout/CheckoutSuccess.d.ts

@@ -0,0 +1,10 @@
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+interface CheckoutSuccessProps {
+    txHash?: string;
+    orderId?: string;
+    returnUrl?: string;
+    returnLabel?: string;
+    classes?: AnySpendCheckoutClasses;
+}
+export declare function CheckoutSuccess({ txHash, orderId, returnUrl, returnLabel, classes }: CheckoutSuccessProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/anyspend/react/components/checkout/CheckoutSuccess.js

@@ -0,0 +1,28 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../shared/utils/cn.js";
+import { ExternalLink } from "lucide-react";
+import { motion } from "motion/react";
+import { useAnySpendCustomization } from "../context/AnySpendCustomizationContext.js";
+import { AnimatedCheckmark } from "../icons/AnimatedCheckmark.js";
+export function CheckoutSuccess({ txHash, orderId, returnUrl, returnLabel, classes }) {
+    const { content, slots } = useAnySpendCustomization();
+    if (slots.successScreen) {
+        return (_jsx(_Fragment, { children: slots.successScreen({
+                title: typeof content.successTitle === "string" ? content.successTitle : "Payment Successful",
+                description: typeof content.successDescription === "string"
+                    ? content.successDescription
+                    : "Your payment has been processed successfully.",
+                txHash,
+                orderId,
+                explorerUrl: txHash ? `https://explorer.b3.fun/tx/${txHash}` : undefined,
+                onDone: () => {
+                    if (returnUrl)
+                        window.location.href = returnUrl;
+                },
+                returnUrl,
+                returnLabel: content.returnButtonLabel || returnLabel,
+            }) }));
+    }
+    return (_jsxs("div", { className: cn("anyspend-checkout-success flex flex-col items-center py-8 text-center", classes?.successPanel), children: [_jsx("div", { className: "anyspend-success-icon mb-4", children: _jsx(AnimatedCheckmark, { className: "h-16 w-16" }) }), _jsx(motion.h2, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3, delay: 1.0, ease: "easeOut" }, className: "anyspend-success-title text-xl font-semibold text-gray-900 dark:text-gray-100", children: content.successTitle || "Payment Successful" }), _jsx(motion.p, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3, delay: 1.15, ease: "easeOut" }, className: "anyspend-success-description mt-2 text-sm text-gray-500 dark:text-gray-400", children: content.successDescription || "Your payment has been processed successfully." }), txHash && (_jsxs(motion.a, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, delay: 0.5, ease: "easeOut" }, href: `https://explorer.b3.fun/tx/${txHash}`, target: "_blank", rel: "noopener noreferrer", className: "anyspend-success-tx-link mt-4 flex items-center gap-1.5 text-sm text-blue-600 hover:underline dark:text-blue-400", children: ["View Transaction", _jsx(ExternalLink, { className: "h-3.5 w-3.5" })] })), !txHash && orderId && (_jsxs(motion.p, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, delay: 0.5, ease: "easeOut" }, className: "anyspend-success-order-id mt-4 text-xs text-gray-400 dark:text-gray-500", children: ["Order ID: ", orderId] })), returnUrl && (_jsx(motion.a, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3, delay: 0.6, ease: "easeOut" }, href: returnUrl, className: cn("anyspend-success-return-btn mt-6 inline-flex rounded-xl px-6 py-3 text-sm font-medium transition-colors", classes?.returnButton), style: { backgroundColor: "#111827", color: "#fff" }, children: content.returnButtonLabel || returnLabel || "Return to Store" }))] }));
+}

package/dist/esm/anyspend/react/components/checkout/CoinbaseCheckoutPanel.d.ts

@@ -0,0 +1,20 @@
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+interface CoinbaseCheckoutPanelProps {
+    recipientAddress: string;
+    destinationTokenAddress: string;
+    destinationTokenChainId: number;
+    totalAmount: string;
+    themeColor?: string;
+    /** @deprecated Use onOrderCreated instead. Kept for backward compatibility. */
+    onSuccess?: (result: {
+        txHash?: string;
+        orderId?: string;
+    }) => void;
+    /** Called when order is created — triggers lifecycle tracking in parent */
+    onOrderCreated?: (orderId: string) => void;
+    onError?: (error: Error) => void;
+    callbackMetadata?: Record<string, unknown>;
+    classes?: AnySpendCheckoutClasses;
+}
+export declare function CoinbaseCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onOrderCreated, onError, callbackMetadata, }: CoinbaseCheckoutPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};