@b3dotfun/sdk 0.1.68-alpha.2 → 0.1.68-alpha.4

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

@@ -1,16 +1,17 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useTokenData } from "../../../../global-account/react/index.js";
 import { USDC_BASE } from "../../../../anyspend/constants/index.js";
+import { useTokenData } from "../../../../global-account/react/index.js";
 import { formatUnits, safeBigInt } from "../../../../shared/utils/number.js";
 import { useCallback, useMemo, useState } from "react";
 import { useAnyspendQuote } from "../../hooks/useAnyspendQuote.js";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "../AnySpendFingerprintWrapper.js";
+import { AnySpendCustomizationProvider } from "../context/AnySpendCustomizationContext.js";
 import { CheckoutCartPanel } from "./CheckoutCartPanel.js";
 import { CheckoutFormPanel } from "./CheckoutFormPanel.js";
 import { CheckoutLayout } from "./CheckoutLayout.js";
 import { CheckoutPaymentPanel } from "./CheckoutPaymentPanel.js";
-import { AnySpendCustomizationProvider } from "../context/AnySpendCustomizationContext.js";
+import { VariablePricingInput } from "./VariablePricingInput.js";
 const emptyAddress = { street: "", city: "", state: "", zip: "", country: "" };
 export function AnySpendCheckout({ mode = "page", recipientAddress, destinationTokenAddress, destinationTokenChainId, items, totalAmount: totalAmountOverride, organizationName, organizationLogo, themeColor, buttonText = "Pay", checkoutSessionId, onSuccess, onError, returnUrl, returnLabel, classes, footer, defaultPaymentMethod, senderAddress, slots, content, theme, showPoints, showOrderId, shipping: shippingProp, tax, discount: discountProp, summaryLines, 
 // New form props
@@ -18,7 +19,13 @@ formSchema, formComponent, onFormSubmit,
 // New shipping props
 shippingOptions, collectShippingAddress, onShippingChange: onShippingChangeProp, 
 // New discount props
-enableDiscountCode, onDiscountApplied: onDiscountAppliedProp, validateDiscount, feeOnTop, }) {
+enableDiscountCode, onDiscountApplied: onDiscountAppliedProp, validateDiscount, 
+// Variable pricing
+variablePricing, feeOnTop, }) {
+    // ===== Variable pricing state =====
+    const [variablePricingAmount, setVariablePricingAmount] = useState("0");
+    const isVariablePricingActive = variablePricing?.enabled === true;
+    const isVariablePricingValid = isVariablePricingActive ? variablePricingAmount !== "0" : true;
     // ===== Form state =====
     const [formData, setFormData] = useState({});
     const [selectedShipping, setSelectedShipping] = useState(null);
@@ -63,7 +70,25 @@ enableDiscountCode, onDiscountApplied: onDiscountAppliedProp, validateDiscount,
         return undefined;
     }, [appliedDiscount, discountProp]);
     // Compute total from items + adjustments (including dynamic shipping/discount)
+    // Variable pricing overrides the total when active
     const computedTotal = useMemo(() => {
+        if (isVariablePricingActive && variablePricingAmount !== "0") {
+            let total = safeBigInt(variablePricingAmount);
+            if (effectiveShipping?.amount)
+                total += safeBigInt(effectiveShipping.amount);
+            const taxAmt = typeof tax === "string" ? tax : tax?.amount;
+            if (taxAmt)
+                total += safeBigInt(taxAmt);
+            if (effectiveDiscount?.amount)
+                total -= safeBigInt(effectiveDiscount.amount);
+            if (summaryLines) {
+                for (const line of summaryLines)
+                    total += safeBigInt(line.amount);
+            }
+            if (total < BigInt(0))
+                total = BigInt(0);
+            return total.toString();
+        }
         if (totalAmountOverride)
             return totalAmountOverride;
         let total = BigInt(0);
@@ -84,7 +109,16 @@ enableDiscountCode, onDiscountApplied: onDiscountAppliedProp, validateDiscount,
         if (total < BigInt(0))
             total = BigInt(0);
         return total.toString();
-    }, [items, totalAmountOverride, effectiveShipping, tax, effectiveDiscount, summaryLines]);
+    }, [
+        items,
+        totalAmountOverride,
+        effectiveShipping,
+        tax,
+        effectiveDiscount,
+        summaryLines,
+        isVariablePricingActive,
+        variablePricingAmount,
+    ]);
     // Get destination token metadata
     const { data: tokenData } = useTokenData(destinationTokenChainId, destinationTokenAddress);
     const tokenSymbol = tokenData?.symbol || "";
@@ -136,14 +170,27 @@ enableDiscountCode, onDiscountApplied: onDiscountAppliedProp, validateDiscount,
             meta.customerName = formData.name;
         if (checkoutSessionId)
             meta.checkoutSessionId = checkoutSessionId;
+        if (isVariablePricingActive && variablePricingAmount !== "0") {
+            meta.variablePricingAmount = variablePricingAmount;
+        }
         return Object.keys(meta).length > 0 ? meta : undefined;
-    }, [formData, selectedShipping, shippingAddress, appliedDiscount, checkoutSessionId]);
-    // Check if required form fields are filled
+    }, [
+        formData,
+        selectedShipping,
+        shippingAddress,
+        appliedDiscount,
+        checkoutSessionId,
+        isVariablePricingActive,
+        variablePricingAmount,
+    ]);
+    // Check if required form fields are filled and variable pricing is valid
     const isFormValid = useMemo(() => {
+        if (!isVariablePricingValid)
+            return false;
         if (!formSchema)
             return true;
         return formSchema.fields.filter(f => f.required).every(f => formData[f.id] != null && formData[f.id] !== "");
-    }, [formSchema, formData]);
+    }, [formSchema, formData, isVariablePricingValid]);
     // Check if we have a form panel to show
     const hasFormContent = (formSchema && formSchema.fields.length > 0) ||
         formComponent ||
@@ -151,5 +198,5 @@ enableDiscountCode, onDiscountApplied: onDiscountAppliedProp, validateDiscount,
         (shippingOptions && shippingOptions.length > 0) ||
         collectShippingAddress ||
         enableDiscountCode;
-    return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprint, children: _jsx(AnySpendCustomizationProvider, { slots: slots, content: content, theme: theme, children: _jsx(CheckoutLayout, { mode: mode, paymentPanel: _jsxs(_Fragment, { children: [hasFormContent && (_jsxs("div", { className: "mb-6", children: [_jsx(CheckoutFormPanel, { formSchema: formSchema, formComponent: formComponent, shippingOptions: shippingOptions, collectShippingAddress: collectShippingAddress, enableDiscountCode: enableDiscountCode, validateDiscount: validateDiscount, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, classes: classes, formData: formData, onFormDataChange: handleFormDataChange, selectedShipping: selectedShipping, onShippingChange: handleShippingChange, appliedDiscount: appliedDiscount, onDiscountApplied: handleDiscountApplied, onDiscountRemoved: handleDiscountRemoved, shippingAddress: shippingAddress, onShippingAddressChange: setShippingAddress, checkoutFormSlot: slots?.checkoutForm }), _jsx("div", { className: "mt-6 border-t border-gray-200 dark:border-neutral-700" })] })), _jsx(CheckoutPaymentPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: computedTotal, buttonText: buttonText, themeColor: themeColor, returnUrl: returnUrl, returnLabel: returnLabel, onSuccess: onSuccess, onError: onError, classes: classes, defaultPaymentMethod: defaultPaymentMethod, senderAddress: senderAddress, showPoints: showPoints, showOrderId: showOrderId, callbackMetadata: checkoutFormMetadata, isFormValid: isFormValid, feeOnTop: feeOnTop })] }), cartPanel: _jsx(CheckoutCartPanel, { items: items, totalAmount: computedTotal, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, organizationName: organizationName, organizationLogo: organizationLogo, classes: classes, footer: footer, shipping: effectiveShipping, tax: typeof tax === "string" ? { amount: tax } : tax, discount: effectiveDiscount, summaryLines: summaryLines, usdEquivalent: usdEquivalent }), classes: classes }) }) }));
+    return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprint, children: _jsx(AnySpendCustomizationProvider, { slots: slots, content: content, theme: theme, children: _jsx(CheckoutLayout, { mode: mode, paymentPanel: _jsxs(_Fragment, { children: [isVariablePricingActive && tokenData && variablePricing && (_jsx(VariablePricingInput, { config: variablePricing, tokenDecimals: tokenDecimals, tokenSymbol: tokenSymbol, themeColor: themeColor, onChange: setVariablePricingAmount })), hasFormContent && (_jsxs("div", { className: "mb-6", children: [_jsx(CheckoutFormPanel, { formSchema: formSchema, formComponent: formComponent, shippingOptions: shippingOptions, collectShippingAddress: collectShippingAddress, enableDiscountCode: enableDiscountCode, validateDiscount: validateDiscount, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, classes: classes, formData: formData, onFormDataChange: handleFormDataChange, selectedShipping: selectedShipping, onShippingChange: handleShippingChange, appliedDiscount: appliedDiscount, onDiscountApplied: handleDiscountApplied, onDiscountRemoved: handleDiscountRemoved, shippingAddress: shippingAddress, onShippingAddressChange: setShippingAddress, checkoutFormSlot: slots?.checkoutForm }), _jsx("div", { className: "mt-6 border-t border-gray-200 dark:border-neutral-700" })] })), _jsx(CheckoutPaymentPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: computedTotal, buttonText: buttonText, themeColor: themeColor, returnUrl: returnUrl, returnLabel: returnLabel, onSuccess: onSuccess, onError: onError, classes: classes, defaultPaymentMethod: defaultPaymentMethod, senderAddress: senderAddress, showPoints: showPoints, showOrderId: showOrderId, callbackMetadata: checkoutFormMetadata, isFormValid: isFormValid, feeOnTop: feeOnTop })] }), cartPanel: _jsx(CheckoutCartPanel, { items: items, totalAmount: computedTotal, tokenSymbol: tokenSymbol, tokenDecimals: tokenDecimals, organizationName: organizationName, organizationLogo: organizationLogo, classes: classes, footer: footer, shipping: effectiveShipping, tax: typeof tax === "string" ? { amount: tax } : tax, discount: effectiveDiscount, summaryLines: summaryLines, usdEquivalent: usdEquivalent }), classes: classes }) }) }));
 }

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

@@ -0,0 +1,17 @@
+export interface VariablePricingConfig {
+    enabled: boolean;
+    minAmount?: string;
+    maxAmount?: string;
+    suggestedAmount?: string;
+    label?: string;
+    currency?: string;
+}
+interface VariablePricingInputProps {
+    config: VariablePricingConfig;
+    tokenDecimals: number;
+    tokenSymbol: string;
+    themeColor?: string;
+    onChange: (amountWei: string) => void;
+}
+export declare function VariablePricingInput({ config, tokenDecimals, tokenSymbol, themeColor, onChange, }: VariablePricingInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,142 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../shared/utils/cn.js";
+import { formatUnits } from "../../../../shared/utils/number.js";
+import { AnimatePresence, motion } from "motion/react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+export function VariablePricingInput({ config, tokenDecimals, tokenSymbol, themeColor, onChange, }) {
+    const currency = config.currency || tokenSymbol;
+    // Convert suggested amount from wei to display
+    const initialValue = useMemo(() => {
+        if (config.suggestedAmount) {
+            try {
+                return formatUnits(config.suggestedAmount, tokenDecimals);
+            }
+            catch {
+                return "";
+            }
+        }
+        return "";
+    }, [config.suggestedAmount, tokenDecimals]);
+    const [displayValue, setDisplayValue] = useState(initialValue);
+    const [error, setError] = useState(null);
+    // Min/max in display units
+    const minDisplay = useMemo(() => {
+        if (!config.minAmount)
+            return null;
+        try {
+            return parseFloat(formatUnits(config.minAmount, tokenDecimals));
+        }
+        catch {
+            return null;
+        }
+    }, [config.minAmount, tokenDecimals]);
+    const maxDisplay = useMemo(() => {
+        if (!config.maxAmount)
+            return null;
+        try {
+            return parseFloat(formatUnits(config.maxAmount, tokenDecimals));
+        }
+        catch {
+            return null;
+        }
+    }, [config.maxAmount, tokenDecimals]);
+    // Preset amounts
+    const presetAmounts = useMemo(() => {
+        const presets = [];
+        if (config.suggestedAmount) {
+            try {
+                const suggested = parseFloat(formatUnits(config.suggestedAmount, tokenDecimals));
+                const candidates = [suggested / 2, suggested, suggested * 2];
+                for (const val of candidates) {
+                    if (val <= 0)
+                        continue;
+                    if (minDisplay !== null && val < minDisplay)
+                        continue;
+                    if (maxDisplay !== null && val > maxDisplay)
+                        continue;
+                    const display = val % 1 === 0 ? val.toString() : val.toFixed(2);
+                    presets.push({ label: `${display}`, value: display });
+                }
+            }
+            catch {
+                // skip presets
+            }
+        }
+        return presets;
+    }, [config.suggestedAmount, tokenDecimals, minDisplay, maxDisplay]);
+    const validate = useCallback((value) => {
+        const parsed = parseFloat(value);
+        if (!value || isNaN(parsed))
+            return "Please enter a valid number";
+        if (parsed <= 0)
+            return "Please enter an amount";
+        if (minDisplay !== null && parsed < minDisplay) {
+            const display = minDisplay % 1 === 0 ? minDisplay.toString() : minDisplay.toFixed(2);
+            return `Minimum amount is ${display} ${currency}`;
+        }
+        if (maxDisplay !== null && parsed > maxDisplay) {
+            const display = maxDisplay % 1 === 0 ? maxDisplay.toString() : maxDisplay.toFixed(2);
+            return `Maximum amount is ${display} ${currency}`;
+        }
+        return null;
+    }, [minDisplay, maxDisplay, currency]);
+    const convertToWei = useCallback((value) => {
+        try {
+            const [whole, frac = ""] = value.split(".");
+            const paddedFrac = frac.padEnd(tokenDecimals, "0").slice(0, tokenDecimals);
+            const factor = BigInt(10) ** BigInt(tokenDecimals);
+            return (BigInt(whole || "0") * factor + BigInt(paddedFrac)).toString();
+        }
+        catch {
+            return "0";
+        }
+    }, [tokenDecimals]);
+    const handleChange = useCallback((value) => {
+        setDisplayValue(value);
+        const validationError = validate(value);
+        setError(validationError);
+        if (!validationError && value && parseFloat(value) > 0) {
+            onChange(convertToWei(value));
+        }
+        else {
+            onChange("0");
+        }
+    }, [validate, convertToWei, onChange]);
+    const handlePresetClick = useCallback((value) => {
+        setDisplayValue(value);
+        setError(null);
+        onChange(convertToWei(value));
+    }, [convertToWei, onChange]);
+    // Notify parent with initial value on mount
+    useEffect(() => {
+        if (initialValue && !validate(initialValue)) {
+            onChange(convertToWei(initialValue));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const formatHint = () => {
+        if (minDisplay !== null && maxDisplay !== null) {
+            const minStr = minDisplay % 1 === 0 ? minDisplay.toString() : minDisplay.toFixed(2);
+            const maxStr = maxDisplay % 1 === 0 ? maxDisplay.toString() : maxDisplay.toFixed(2);
+            return `${minStr} – ${maxStr} ${currency}`;
+        }
+        if (minDisplay !== null) {
+            const minStr = minDisplay % 1 === 0 ? minDisplay.toString() : minDisplay.toFixed(2);
+            return `Min: ${minStr} ${currency}`;
+        }
+        if (maxDisplay !== null) {
+            const maxStr = maxDisplay % 1 === 0 ? maxDisplay.toString() : maxDisplay.toFixed(2);
+            return `Max: ${maxStr} ${currency}`;
+        }
+        return null;
+    };
+    const hint = formatHint();
+    return (_jsxs("div", { className: "anyspend-variable-pricing mb-6", children: [_jsx("label", { htmlFor: "variable-pricing-amount", className: "mb-3 block text-lg font-semibold text-gray-900 dark:text-gray-100", children: config.label || "Enter amount" }), presetAmounts.length > 0 && (_jsx("div", { className: "mb-3 flex flex-wrap gap-2", children: presetAmounts.map(preset => (_jsxs("button", { type: "button", onClick: () => handlePresetClick(preset.value), className: cn("rounded-full border px-4 py-2 text-sm font-medium transition-colors", displayValue === preset.value
+                        ? "border-transparent text-white"
+                        : "border-gray-200 text-gray-700 hover:bg-gray-50 dark:border-neutral-600 dark:text-gray-300 dark:hover:bg-neutral-800"), style: displayValue === preset.value ? { backgroundColor: themeColor || "hsl(var(--as-brand))" } : undefined, children: [preset.label, " ", currency] }, preset.value))) })), _jsxs("div", { className: "relative", children: [_jsx("input", { id: "variable-pricing-amount", type: "text", inputMode: "decimal", value: displayValue, onChange: e => {
+                            // Normalize comma decimal separators for locale compatibility
+                            const normalized = e.target.value.replace(",", ".");
+                            handleChange(normalized);
+                        }, className: "w-full rounded-xl border border-gray-200 bg-gray-50 px-4 py-3.5 pr-16 text-lg font-semibold text-gray-900 placeholder:text-gray-300 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-neutral-600 dark:bg-neutral-800 dark:text-gray-100 dark:placeholder:text-neutral-600 dark:focus:border-blue-400", placeholder: "0.00" }), _jsx("span", { className: "absolute right-4 top-1/2 -translate-y-1/2 text-sm font-medium text-gray-400 dark:text-gray-500", children: currency })] }), hint && _jsx("p", { className: "mt-1.5 text-xs text-gray-500 dark:text-gray-400", children: hint }), _jsx(AnimatePresence, { initial: false, children: error && (_jsx(motion.p, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: "auto" }, exit: { opacity: 0, height: 0 }, transition: { duration: 0.15, ease: "easeOut" }, className: "mt-1.5 text-sm text-red-500", children: error }, "variable-price-error")) })] }));
+}

package/dist/esm/anyspend/react/components/index.d.ts

@@ -1,5 +1,5 @@
 export { AnySpendCheckout } from "./checkout/AnySpendCheckout";
-export type { AnySpendCheckoutProps, CheckoutItem, CheckoutSummaryLine, AnySpendCheckoutClasses, CheckoutFormSchema, CheckoutFormComponentProps, ShippingOption, DiscountResult, AddressData, } from "./checkout/AnySpendCheckout";
+export type { AnySpendCheckoutProps, CheckoutItem, CheckoutSummaryLine, AnySpendCheckoutClasses, CheckoutFormSchema, CheckoutFormComponentProps, ShippingOption, DiscountResult, AddressData, VariablePricingConfig, } from "./checkout/AnySpendCheckout";
 export { AnySpendCheckoutTrigger } from "./checkout/AnySpendCheckoutTrigger";
 export type { AnySpendCheckoutTriggerProps } from "./checkout/AnySpendCheckoutTrigger";
 export type { PaymentMethod } from "./checkout/CheckoutPaymentPanel";