@hanzo/ui 5.3.36 → 5.3.39

package/dist/src/billing/components/overview-dashboard.js

@@ -0,0 +1,105 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useEffect, useRef } from 'react';
+function fmt(amount, currency = 'usd') {
+    return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(amount);
+}
+function fmtTokens(n) {
+    if (n >= 1000000000)
+        return `${(n / 1000000000).toFixed(1)}B`;
+    if (n >= 1000000)
+        return `${(n / 1000000).toFixed(1)}M`;
+    if (n >= 1000)
+        return `${(n / 1000).toFixed(0)}K`;
+    return String(n);
+}
+function daysUntil(d) {
+    const diff = new Date(d).getTime() - Date.now();
+    return Math.max(0, Math.ceil(diff / (1000 * 60 * 60 * 24)));
+}
+/* -- Fade-in animation wrapper -- */
+function FadeIn({ children, delay = 0, className = '' }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        el.style.opacity = '0';
+        el.style.transform = 'translateY(10px)';
+        const timer = setTimeout(() => {
+            el.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
+            el.style.opacity = '1';
+            el.style.transform = 'translateY(0)';
+        }, delay);
+        return () => clearTimeout(timer);
+    }, [delay]);
+    return _jsx("div", { ref: ref, className: className, children: children });
+}
+/* -- Animated number counter -- */
+function AnimatedNumber({ value, duration = 1200 }) {
+    const [display, setDisplay] = React.useState(0);
+    const prev = useRef(0);
+    useEffect(() => {
+        const start = prev.current;
+        const end = value;
+        if (start === end)
+            return;
+        const startTime = Date.now();
+        const tick = () => {
+            const elapsed = Date.now() - startTime;
+            const progress = Math.min(elapsed / duration, 1);
+            // Ease out cubic
+            const eased = 1 - Math.pow(1 - progress, 3);
+            setDisplay(Math.round(start + (end - start) * eased));
+            if (progress < 1)
+                requestAnimationFrame(tick);
+            else
+                prev.current = end;
+        };
+        requestAnimationFrame(tick);
+    }, [value, duration]);
+    return _jsx(_Fragment, { children: fmtTokens(display) });
+}
+/* -- Plan tier badge -- */
+const PLAN_TIERS = {
+    'developer': { label: 'Developer', color: 'text-white/50', glow: '' },
+    'pro': { label: 'Pro', color: 'text-sky-400', glow: 'shadow-[0_0_20px_rgba(56,189,248,0.15)]' },
+    'team': { label: 'Team', color: 'text-violet-400', glow: 'shadow-[0_0_20px_rgba(167,139,250,0.15)]' },
+    'enterprise': { label: 'Enterprise', color: 'text-amber-400', glow: 'shadow-[0_0_20px_rgba(251,191,36,0.15)]' },
+    'custom': { label: 'Custom', color: 'text-emerald-400', glow: 'shadow-[0_0_20px_rgba(52,211,153,0.15)]' },
+};
+/* -- Main component -- */
+export function OverviewDashboard(props) {
+    const currentPlan = props.plans.find(p => p.id === props.subscription.planId);
+    const recommendedPlan = props.plans.find(p => p.id === 'pro') ?? props.plans[1];
+    const mtdSpend = props.usage?.totalCost ?? 0;
+    const currency = props.usage?.currency ?? 'usd';
+    const periodEnd = props.subscription.currentPeriodEnd;
+    const daysLeft = daysUntil(periodEnd);
+    const totalCreditsRemaining = (props.balance?.available ?? 0) / 100;
+    const defaultPm = props.paymentMethods.find(m => m.is_default || m.isDefault) ?? props.paymentMethods[0];
+    const hasActivePlan = !!props.subscription.id && props.subscription.status === 'active';
+    // Trial status
+    const isTrialing = props.subscription.status === 'trialing';
+    const trialDaysLeft = isTrialing ? daysUntil(props.subscription.currentPeriodEnd) : 0;
+    // Token stats from usage
+    const aiRecord = props.usage?.records.find(r => r.meterId === 'ai' || r.unit?.toLowerCase().includes('token'));
+    const tokensThisPeriod = aiRecord?.current ?? 0;
+    const apiCallsRecord = props.usage?.records.find(r => r.meterId === 'api_calls');
+    const apiCallsThisPeriod = apiCallsRecord?.current ?? 0;
+    const tier = currentPlan ? (PLAN_TIERS[currentPlan.id] ?? PLAN_TIERS['developer']) : PLAN_TIERS['developer'];
+    // Spend bar heights (deterministic)
+    const barHeights = React.useMemo(() => Array.from({ length: 28 }, (_, i) => mtdSpend > 0 ? Math.max((i * 137 + 17) % 100, 4) : (i % 3 === 0 ? 2 : 1)), [mtdSpend]);
+    return (_jsxs("div", { className: "space-y-5", children: [isTrialing && (_jsx(FadeIn, { delay: 0, children: _jsxs("div", { className: "rounded-2xl border border-sky-500/25 bg-sky-500/[0.05] p-5 flex items-center justify-between gap-4", children: [_jsxs("div", { children: [_jsxs("p", { className: "text-sm font-semibold text-sky-400", children: ["Free trial active ", '\u00B7', " ", trialDaysLeft, " day", trialDaysLeft !== 1 ? 's' : '', " left"] }), _jsx("p", { className: "text-[13px] text-white/50 mt-1", children: "Add a payment method to continue after your trial ends." })] }), _jsx("button", { type: "button", onClick: () => props.onNavigate('payment'), className: "rounded-full bg-sky-500 px-5 py-2 text-sm font-semibold text-white transition hover:bg-sky-400 active:scale-[0.97] flex-shrink-0", children: "Add payment" })] }) })), _jsx(FadeIn, { delay: 0, children: _jsx("div", { className: `rounded-2xl border border-white/[0.08] bg-[#141419] overflow-hidden transition-all ${tier.glow}`, children: _jsxs("div", { className: "p-6", children: [_jsxs("div", { className: "flex items-start justify-between mb-5", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2.5 mb-1", children: [_jsxs("span", { className: `text-[11px] font-semibold uppercase tracking-widest ${tier.color}`, children: [tier.label, " Plan"] }), hasActivePlan && (_jsx("span", { className: "rounded-full bg-emerald-500/15 px-2 py-0.5 text-[10px] font-semibold text-emerald-400", children: "Active" }))] }), _jsx("h2", { className: "text-2xl font-bold text-white", children: tokensThisPeriod > 0
+                                                    ? _jsxs(_Fragment, { children: [_jsx(AnimatedNumber, { value: tokensThisPeriod }), " tokens"] })
+                                                    : props.usageLoading ? 'Loading\u2026' : '\u2014 tokens' }), _jsx("p", { className: "text-[13px] text-white/40 mt-1", children: "processed this billing period" })] }), _jsxs("div", { className: "text-right", children: [_jsx("p", { className: "text-[11px] text-white/30 mb-1", children: "API spend" }), _jsx("p", { className: "text-xl font-semibold text-white tabular-nums", children: fmt(mtdSpend, currency) }), _jsxs("p", { className: "text-[12px] text-white/30 mt-1", children: [daysLeft, "d until renewal"] })] })] }), _jsx("div", { className: "h-10 flex items-end gap-[2px]", children: barHeights.map((h, i) => (_jsx("div", { className: `flex-1 rounded-sm transition-all duration-700 ${mtdSpend > 0 ? 'bg-white/[0.12]' : 'bg-white/[0.04]'}`, style: { height: `${h}%`, transitionDelay: `${i * 20}ms` } }, i))) }), _jsxs("div", { className: "mt-5 grid grid-cols-3 gap-3", children: [_jsxs("div", { className: "rounded-xl border border-white/[0.06] bg-white/[0.02] p-3", children: [_jsx("p", { className: "text-[11px] text-white/30 mb-1", children: "Tokens / period" }), _jsx("p", { className: "text-base font-semibold text-white tabular-nums", children: tokensThisPeriod > 0 ? fmtTokens(tokensThisPeriod) : '\u2014' })] }), _jsxs("div", { className: "rounded-xl border border-white/[0.06] bg-white/[0.02] p-3", children: [_jsx("p", { className: "text-[11px] text-white/30 mb-1", children: "API calls" }), _jsx("p", { className: "text-base font-semibold text-white tabular-nums", children: apiCallsThisPeriod > 0 ? fmtTokens(apiCallsThisPeriod) : '\u2014' })] }), _jsxs("div", { className: "rounded-xl border border-white/[0.06] bg-white/[0.02] p-3", children: [_jsx("p", { className: "text-[11px] text-white/30 mb-1", children: "Credits left" }), _jsx("p", { className: "text-base font-semibold text-white tabular-nums", children: fmt(totalCreditsRemaining) })] })] })] }) }) }), !hasActivePlan && !isTrialing && recommendedPlan && (_jsx(FadeIn, { delay: 60, children: _jsxs("div", { className: "relative overflow-hidden rounded-2xl border border-white/[0.12] bg-gradient-to-br from-[#1a1a2e] to-[#141419] p-6", children: [_jsx("div", { className: "pointer-events-none absolute -top-12 left-1/2 h-32 w-64 -translate-x-1/2 rounded-full bg-sky-500/10 blur-2xl" }), _jsxs("div", { className: "relative", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: "text-sky-400", children: _jsx("path", { d: "M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" }) }), _jsx("span", { className: "text-sm font-semibold text-sky-400", children: "Unlock the full Hanzo AI suite" })] }), _jsxs("p", { className: "text-[22px] font-bold text-white mb-1", children: ["All AI models. One plan. ", _jsx("span", { className: "text-sky-400", children: "$20/mo." })] }), _jsxs("p", { className: "text-[13px] text-white/50 mb-5", children: ["14+ Zen AI models ", '\u00B7', " 1M+ token context ", '\u00B7', " Unlimited chat ", '\u00B7', " MCP tools ", '\u00B7', " Priority inference", recommendedPlan.trialDays ? ` \u00B7 ${recommendedPlan.trialDays}-day free trial` : ''] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("button", { type: "button", onClick: () => props.onUpgrade?.(recommendedPlan.id), className: "rounded-full bg-white px-6 py-2.5 text-sm font-bold text-black transition hover:bg-white/90 active:scale-[0.97]", children: recommendedPlan.trialDays ? `Start ${recommendedPlan.trialDays}-day free trial` : 'Upgrade to Unified AI' }), _jsxs("button", { type: "button", onClick: () => props.onNavigate('pricing'), className: "text-sm text-white/40 transition hover:text-white/70", children: ["View all plans ", '\u2192'] })] }), (recommendedPlan.annualPrice ?? 0) > 0 && (_jsxs("p", { className: "mt-3 text-[12px] text-emerald-400", children: ["Or go annual for $", recommendedPlan.annualPrice, "/yr ", '\u2014', " save $", (recommendedPlan.price * 12) - recommendedPlan.annualPrice] }))] })] }) })), _jsx(FadeIn, { delay: 80, children: _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsxs("button", { type: "button", onClick: () => props.onNavigate('credits'), className: "rounded-2xl border border-white/[0.08] bg-[#141419] p-5 text-left transition-all hover:border-white/[0.14] hover:bg-[#16161c] group active:scale-[0.99]", children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsx("p", { className: "text-[11px] uppercase tracking-widest text-white/30", children: "Credit Balance" }), _jsx("div", { className: "text-white/20 group-hover:text-white/40 transition-colors", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("circle", { cx: "8", cy: "8", r: "6" }), _jsx("path", { d: "M18.09 10.37A6 6 0 1 1 10.34 18" })] }) })] }), _jsx("p", { className: "text-2xl font-bold text-white tabular-nums", children: fmt(totalCreditsRemaining) }), _jsxs("p", { className: "text-[13px] text-white/35 mt-1.5 group-hover:text-white/50 transition-colors", children: [props.creditGrants.filter(g => g.active && !g.voided).length, " active grant", props.creditGrants.filter(g => g.active && !g.voided).length !== 1 ? 's' : ''] })] }), _jsxs("button", { type: "button", onClick: () => props.onNavigate('pricing'), className: "rounded-2xl border border-white/[0.08] bg-[#141419] p-5 text-left transition-all hover:border-white/[0.14] hover:bg-[#16161c] group active:scale-[0.99]", children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsx("p", { className: "text-[11px] uppercase tracking-widest text-white/30", children: "AI Plan" }), _jsx("div", { className: "text-white/20 group-hover:text-white/40 transition-colors", children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" }) }) })] }), _jsx("p", { className: `text-2xl font-bold ${tier.color || 'text-white'}`, children: currentPlan?.name ?? 'Developer' }), _jsx("p", { className: "text-[13px] text-white/35 mt-1.5 group-hover:text-white/50 transition-colors", children: isTrialing ? `Trial \u00B7 ${trialDaysLeft}d left` : hasActivePlan ? 'Active' : 'Upgrade to unlock all \u2192' })] }), _jsxs("button", { type: "button", onClick: () => props.onNavigate('payment'), className: "rounded-2xl border border-white/[0.08] bg-[#141419] p-5 text-left transition-all hover:border-white/[0.14] hover:bg-[#16161c] group active:scale-[0.99]", children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsx("p", { className: "text-[11px] uppercase tracking-widest text-white/30", children: "Payment" }), _jsx("div", { className: "text-white/20 group-hover:text-white/40 transition-colors", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { x: "2", y: "5", width: "20", height: "14", rx: "2" }), _jsx("path", { d: "M2 10h20" })] }) })] }), _jsx("p", { className: "text-2xl font-bold text-white", children: defaultPm?.card ? `\u2022\u2022\u2022\u2022 ${defaultPm.card.last4}` : defaultPm ? defaultPm.type : '\u2014' }), _jsx("p", { className: "text-[13px] text-white/35 mt-1.5 group-hover:text-white/50 transition-colors", children: defaultPm?.card ? defaultPm.card.brand : defaultPm ? 'Active' : 'Add a payment method' })] })] }) }), _jsx(FadeIn, { delay: 120, children: _jsxs("div", { className: "rounded-2xl border border-white/[0.08] bg-[#141419] overflow-hidden", children: [_jsx("div", { className: "px-6 py-4 border-b border-white/[0.06]", children: _jsx("h3", { className: "text-[14px] font-semibold text-white", children: "Quick access" }) }), _jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 divide-x divide-y divide-white/[0.05]", children: [
+                                { label: 'Usage', icon: _jsx("path", { d: "M3 3v18h18" }), section: 'usage' },
+                                { label: 'Invoices', icon: _jsxs(_Fragment, { children: [_jsx("path", { d: "M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z" }), _jsx("path", { d: "M8 7h8" }), _jsx("path", { d: "M8 11h8" })] }), section: 'invoices' },
+                                { label: 'Plans', icon: _jsx("path", { d: "M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" }), section: 'pricing' },
+                                { label: 'Credits', icon: _jsxs(_Fragment, { children: [_jsx("circle", { cx: "8", cy: "8", r: "6" }), _jsx("path", { d: "M18.09 10.37A6 6 0 1 1 10.34 18" })] }), section: 'credits' },
+                                { label: 'Alerts', icon: _jsxs(_Fragment, { children: [_jsx("path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" }), _jsx("path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" })] }), section: 'alerts' },
+                                { label: 'Team', icon: _jsxs(_Fragment, { children: [_jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }), _jsx("circle", { cx: "9", cy: "7", r: "4" })] }), section: 'team' },
+                            ].map((item) => (_jsxs("button", { type: "button", onClick: () => props.onNavigate(item.section), className: "flex flex-col items-center gap-2 px-4 py-5 text-left transition-colors hover:bg-white/[0.03] group", children: [_jsx("div", { className: "text-white/25 group-hover:text-white/50 transition-colors", children: _jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: item.icon }) }), _jsx("p", { className: "text-[12px] font-medium text-white/35 group-hover:text-white/60 transition-colors", children: item.label })] }, item.section))) })] }) }), props.invoices.length > 0 && (_jsx(FadeIn, { delay: 160, children: _jsxs("div", { className: "rounded-2xl border border-white/[0.08] bg-[#141419] overflow-hidden", children: [_jsxs("div", { className: "px-6 py-4 border-b border-white/[0.06] flex items-center justify-between", children: [_jsx("h3", { className: "text-[14px] font-semibold text-white", children: "Recent invoices" }), _jsxs("button", { type: "button", onClick: () => props.onNavigate('invoices'), className: "text-[12px] text-white/35 hover:text-white/60 transition-colors", children: ["View all ", '\u2192'] })] }), _jsx("div", { className: "divide-y divide-white/[0.04]", children: props.invoices.slice(0, 3).map((inv) => (_jsxs("div", { className: "flex items-center justify-between px-6 py-3.5 hover:bg-white/[0.02] transition-colors", children: [_jsxs("div", { children: [_jsxs("p", { className: "text-[13px] text-white/70", children: ["#", inv.invoiceNumber || inv.number || inv.id.slice(0, 10)] }), _jsx("p", { className: "text-[12px] text-white/30", children: new Date(inv.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) })] }), _jsxs("div", { className: "text-right", children: [_jsx("p", { className: "text-[13px] font-semibold text-white tabular-nums", children: fmt(inv.total, inv.currency) }), _jsx("span", { className: `text-[11px] font-medium ${inv.status === 'paid' ? 'text-emerald-400' :
+                                                    inv.status === 'failed' ? 'text-red-400' : 'text-amber-400'}`, children: inv.status.charAt(0).toUpperCase() + inv.status.slice(1) })] })] }, inv.id))) })] }) }))] }));
+}

package/dist/src/billing/components/payment-manager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"payment-manager.d.ts","sourceRoot":"","sources":["../../../../src/billing/components/payment-manager.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAE7C,MAAM,WAAW,yBAAyB;IACxC,cAAc,CAAC,EAAE,aAAa,EAAE,CAAA;IAChC,cAAc,CAAC,EAAE,aAAa,EAAE,CAAA;IAChC,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAChD,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACxC,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAC5C,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAA;IAC/C,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CACxC;AAqFD,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,2CAyNpE"}
+{"version":3,"file":"payment-manager.d.ts","sourceRoot":"","sources":["../../../../src/billing/components/payment-manager.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAoC,MAAM,UAAU,CAAA;AAG/E,MAAM,WAAW,yBAAyB;IACxC,cAAc,CAAC,EAAE,aAAa,EAAE,CAAA;IAChC,cAAc,CAAC,EAAE,aAAa,EAAE,CAAA;IAChC,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAChD,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACxC,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAC5C,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAA;IAC/C,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CACxC;AA+FD,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,2CAyKpE"}

package/dist/src/billing/components/payment-manager.js

@@ -1,66 +1,58 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-const defaultDraft = {
-    holderName: '',
-    type: 'card',
-    cardBrand: 'visa',
-    last4: '',
-    expMonth: '',
-    expYear: '',
+import { ConnectButton } from '@rainbow-me/rainbowkit';
+import { useAccount, useChainId } from 'wagmi';
+import { AnimatedCard } from './animated-card';
+// ── Display helpers ──────────────────────────────────────────────────────
+const CRYPTO_NETWORK_LABELS = {
+    bitcoin: 'Bitcoin (BTC)',
+    ethereum: 'Ethereum (ETH)',
+    solana: 'Solana (SOL)',
+    usdc: 'USDC',
+};
+const CHAIN_NAMES = {
+    1: 'Ethereum',
+    137: 'Polygon',
+    10: 'Optimism',
+    42161: 'Arbitrum',
+    8453: 'Base',
+    43114: 'Avalanche',
+    56: 'BSC',
 };
 function formatCardBrand(brand) {
     if (!brand)
         return 'Card';
     return brand.charAt(0).toUpperCase() + brand.slice(1);
 }
-function buildPaymentMethodFromDraft(draft) {
-    const now = new Date().toISOString();
-    const id = `pm_${Math.random().toString(36).slice(2, 12)}`;
-    if (draft.type === 'card') {
-        return {
-            id,
-            type: 'card',
-            is_default: false,
-            created_at: now,
-            isDefault: false,
-            card: {
-                brand: draft.cardBrand,
-                last4: draft.last4,
-                exp_month: Number(draft.expMonth),
-                exp_year: Number(draft.expYear),
-                funding: 'credit',
-            },
-            billing_details: {
-                name: draft.holderName,
-            },
-        };
-    }
-    return {
-        id,
-        type: draft.type,
-        is_default: false,
-        created_at: now,
-        isDefault: false,
-        billing_details: {
-            name: draft.holderName,
-        },
-    };
-}
 function methodDisplay(method) {
     if (method.type === 'card') {
-        return `${formatCardBrand(method.card?.brand || '')} •••• ${method.card?.last4 || '••••'}`;
+        return `${formatCardBrand(method.card?.brand || '')} \u2022\u2022\u2022\u2022 ${method.card?.last4 || '\u2022\u2022\u2022\u2022'}`;
     }
-    if (method.type === 'paypal') {
-        return `PayPal ${method.paypal?.email ? `(${method.paypal.email})` : ''}`;
+    if (method.type === 'crypto') {
+        const network = method.crypto?.network ?? 'ethereum';
+        const label = CRYPTO_NETWORK_LABELS[network] ?? network;
+        const addr = method.crypto?.walletAddress ?? '';
+        const shortAddr = addr.length > 12 ? `${addr.slice(0, 6)}\u2026${addr.slice(-4)}` : addr;
+        return `${label} ${shortAddr}`;
+    }
+    if (method.type === 'wire') {
+        return method.wire?.bankName ?? 'Wire transfer';
     }
     if (method.type === 'bank_account' || method.type === 'sepa_debit') {
-        return `${method.bank_account?.bankName || 'Bank account'} •••• ${method.bank_account?.last4 || '••••'}`;
+        return `${method.bank_account?.bankName || 'Bank account'} \u2022\u2022\u2022\u2022 ${method.bank_account?.last4 || '\u2022\u2022\u2022\u2022'}`;
     }
-    if (method.type === 'apple_pay') {
-        return 'Apple Pay';
+    return method.type;
+}
+function methodIcon(type) {
+    switch (type) {
+        case 'card': return '\uD83D\uDCB3';
+        case 'crypto': return '\uD83D\uDD17';
+        case 'wire': return '\uD83C\uDFE6';
+        case 'bank_account':
+        case 'sepa_debit': return '\uD83C\uDFDB\uFE0F';
+        default: return '\uD83D\uDCB0';
     }
-    return 'Google Pay';
 }
 function methodExpiration(method) {
     if (method.type !== 'card')
@@ -71,43 +63,63 @@ function methodExpiration(method) {
         return null;
     return `${String(month).padStart(2, '0')}/${String(year).slice(-2)}`;
 }
+function methodSubtext(method) {
+    if (method.type === 'crypto')
+        return method.crypto?.label || 'Crypto wallet';
+    if (method.type === 'wire') {
+        const parts = [];
+        if (method.wire?.swift)
+            parts.push(`SWIFT: ${method.wire.swift}`);
+        if (method.wire?.country)
+            parts.push(method.wire.country);
+        return parts.join(' \u00b7 ') || 'Wire transfer';
+    }
+    return null;
+}
+function copyToClipboard(text, label, setMsg) {
+    navigator.clipboard.writeText(text).then(() => {
+        setMsg(`${label} copied`);
+        setTimeout(() => setMsg(''), 2000);
+    });
+}
+// ── Styling ──────────────────────────────────────────────────────────────
+const TAB_CLASS = 'flex-1 rounded-lg px-3 py-2 text-sm font-medium transition';
+const TAB_ACTIVE = 'bg-bg-elevated text-text';
+const TAB_INACTIVE = 'text-text-muted hover:text-text-secondary';
+const INPUT_CLASS = 'w-full rounded-lg border border-border bg-bg-input px-3 py-2 text-sm text-text outline-none transition placeholder:text-text-dim focus:border-brand focus:ring-1 focus:ring-brand';
+const BTN_PRIMARY = 'w-full rounded-lg bg-text px-4 py-2.5 text-sm font-medium text-bg transition hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-60';
+// Main component
 export function PaymentMethodManager(props) {
     const { paymentMethods, initialMethods, onAdd, onRemove, onSetDefault, onMethodAdded, onMethodRemoved, onDefaultChanged, } = props;
-    const [methods, setMethods] = React.useState(paymentMethods && paymentMethods.length > 0
-        ? paymentMethods
-        : initialMethods || []);
-    const [draft, setDraft] = React.useState(defaultDraft);
-    const [isAdding, setIsAdding] = React.useState(false);
+    const [methods, setMethods] = React.useState(paymentMethods && paymentMethods.length > 0 ? paymentMethods : initialMethods || []);
     const [busyMethodId, setBusyMethodId] = React.useState(null);
     const [showForm, setShowForm] = React.useState(false);
+    const [activeTab, setActiveTab] = React.useState('card');
+    const [status, setStatus] = React.useState(null);
+    const [error, setError] = React.useState(null);
     React.useEffect(() => {
-        if (paymentMethods) {
+        if (paymentMethods)
             setMethods(paymentMethods);
-        }
     }, [paymentMethods]);
-    const canCreate = draft.holderName.trim().length > 1 &&
-        (draft.type !== 'card' || (draft.last4.length === 4 && draft.expMonth && draft.expYear));
-    const handleCreate = React.useCallback(async () => {
-        if (!canCreate)
-            return;
-        setIsAdding(true);
-        const method = buildPaymentMethodFromDraft(draft);
+    const addMethod = React.useCallback(async (method) => {
         try {
             await onAdd?.(method);
-            setMethods((prev) => [...prev, method]);
+            setMethods(prev => [...prev, method]);
             onMethodAdded?.(method);
-            setDraft(defaultDraft);
             setShowForm(false);
+            setError(null);
+            setStatus('Payment method added');
+            setTimeout(() => setStatus(null), 3000);
         }
-        finally {
-            setIsAdding(false);
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to add payment method');
         }
-    }, [canCreate, draft, onAdd, onMethodAdded]);
+    }, [onAdd, onMethodAdded]);
     const handleRemove = React.useCallback(async (id) => {
         setBusyMethodId(id);
         try {
             await onRemove?.(id);
-            setMethods((prev) => prev.filter((m) => m.id !== id));
+            setMethods(prev => prev.filter(m => m.id !== id));
             onMethodRemoved?.(id);
         }
         finally {
@@ -118,29 +130,201 @@ export function PaymentMethodManager(props) {
         setBusyMethodId(id);
         try {
             await onSetDefault?.(id);
-            setMethods((prev) => prev.map((method) => ({
-                ...method,
-                is_default: method.id === id,
-                isDefault: method.id === id,
-            })));
+            setMethods(prev => prev.map(m => ({ ...m, is_default: m.id === id, isDefault: m.id === id })));
             onDefaultChanged?.(id);
         }
         finally {
             setBusyMethodId(null);
         }
     }, [onDefaultChanged, onSetDefault]);
-    return (_jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "overflow-hidden rounded-xl border border-zinc-200 bg-white", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 border-b border-zinc-200 p-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold text-zinc-900", children: "Payment methods" }), _jsx("p", { className: "text-sm text-zinc-500", children: "Securely manage cards, wallets, and bank methods" })] }), _jsx("button", { type: "button", onClick: () => setShowForm((v) => !v), className: "rounded-lg bg-zinc-900 px-3 py-2 text-sm font-medium text-white transition hover:bg-zinc-700", children: showForm ? 'Cancel' : 'Add method' })] }), showForm ? (_jsxs("div", { className: "grid gap-3 border-b border-zinc-200 p-4 md:grid-cols-2 xl:grid-cols-5", children: [_jsx("input", { value: draft.holderName, onChange: (e) => setDraft((prev) => ({ ...prev, holderName: e.target.value })), placeholder: "Cardholder name", className: "rounded-lg border border-zinc-300 px-3 py-2 text-sm outline-none transition focus:border-zinc-900" }), _jsxs("select", { value: draft.type, onChange: (e) => setDraft((prev) => ({ ...prev, type: e.target.value })), className: "rounded-lg border border-zinc-300 px-3 py-2 text-sm outline-none transition focus:border-zinc-900", children: [_jsx("option", { value: "card", children: "Card" }), _jsx("option", { value: "paypal", children: "PayPal" }), _jsx("option", { value: "apple_pay", children: "Apple Pay" }), _jsx("option", { value: "google_pay", children: "Google Pay" }), _jsx("option", { value: "bank_account", children: "Bank account" })] }), _jsx("input", { value: draft.last4, onChange: (e) => setDraft((prev) => ({
-                                ...prev,
-                                last4: e.target.value.replace(/\D/g, '').slice(0, 4),
-                            })), placeholder: "Last 4 digits", className: "rounded-lg border border-zinc-300 px-3 py-2 text-sm outline-none transition focus:border-zinc-900" }), _jsx("input", { value: draft.expMonth, onChange: (e) => setDraft((prev) => ({
-                                ...prev,
-                                expMonth: e.target.value.replace(/\D/g, '').slice(0, 2),
-                            })), placeholder: "MM", className: "rounded-lg border border-zinc-300 px-3 py-2 text-sm outline-none transition focus:border-zinc-900" }), _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { value: draft.expYear, onChange: (e) => setDraft((prev) => ({
-                                        ...prev,
-                                        expYear: e.target.value.replace(/\D/g, '').slice(0, 4),
-                                    })), placeholder: "YYYY", className: "w-full rounded-lg border border-zinc-300 px-3 py-2 text-sm outline-none transition focus:border-zinc-900" }), _jsx("button", { type: "button", disabled: !canCreate || isAdding, onClick: handleCreate, className: "rounded-lg border border-zinc-300 px-3 py-2 text-sm font-medium text-zinc-700 transition hover:bg-zinc-100 disabled:cursor-not-allowed disabled:opacity-60", children: isAdding ? 'Saving…' : 'Save' })] })] })) : null, _jsx("div", { className: "divide-y divide-zinc-200", children: methods.length === 0 ? (_jsx("div", { className: "p-6 text-sm text-zinc-500", children: "No payment methods on file." })) : (methods.map((method) => {
+    return (_jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "overflow-hidden rounded-xl border border-border bg-bg-card", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 border-b border-border p-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold text-text", children: "Payment methods" }), _jsx("p", { className: "text-sm text-text-muted", children: "Add a card, crypto wallet, or bank wire transfer" })] }), _jsx("button", { type: "button", onClick: () => { setShowForm(v => !v); setError(null); }, className: "rounded-lg bg-text px-3 py-2 text-sm font-medium text-bg transition hover:opacity-80", children: showForm ? 'Cancel' : 'Add method' })] }), showForm && (_jsxs("div", { className: "border-b border-border p-4", children: [_jsx("div", { className: "mb-4 flex gap-1 rounded-xl bg-bg p-1", children: [
+                                ['card', 'Card'],
+                                ['crypto', 'Crypto'],
+                                ['wire', 'Bank Wire'],
+                            ].map(([id, label]) => (_jsx("button", { type: "button", onClick: () => { setActiveTab(id); setError(null); }, className: `${TAB_CLASS} ${activeTab === id ? TAB_ACTIVE : TAB_INACTIVE}`, children: label }, id))) }), activeTab === 'card' && (_jsx(CardForm, { onAdd: addMethod, setError: setError })), activeTab === 'crypto' && _jsx(CryptoForm, { onAdd: addMethod, setError: setError }), activeTab === 'wire' && _jsx(WireForm, { onAdd: addMethod }), error && _jsx("p", { className: "mt-3 text-sm text-danger", children: error })] })), status && (_jsx("div", { className: "border-b border-border px-4 py-2", children: _jsx("p", { className: "text-sm text-success", children: status }) })), _jsx("div", { className: "divide-y divide-border", children: methods.length === 0 ? (_jsx("div", { className: "p-6 text-sm text-text-muted", children: "No payment methods on file." })) : (methods.map(method => {
                         const isDefault = method.is_default || method.isDefault;
                         const isBusy = busyMethodId === method.id;
-                        return (_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 p-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-zinc-900", children: methodDisplay(method) }), _jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-2 text-xs text-zinc-500", children: [_jsxs("span", { children: ["Added ", new Date(method.created_at).toLocaleDateString('en-US')] }), methodExpiration(method) ? _jsxs("span", { children: ["Expires ", methodExpiration(method)] }) : null, isDefault ? (_jsx("span", { className: "rounded-full bg-zinc-900 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-white", children: "Default" })) : null] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [!isDefault ? (_jsx("button", { type: "button", disabled: isBusy, onClick: () => handleSetDefault(method.id), className: "rounded-md border border-zinc-300 px-3 py-1.5 text-xs font-medium text-zinc-700 transition hover:bg-zinc-100 disabled:cursor-not-allowed disabled:opacity-60", children: isBusy ? 'Saving…' : 'Set default' })) : null, _jsx("button", { type: "button", disabled: isBusy, onClick: () => handleRemove(method.id), className: "rounded-md border border-rose-200 px-3 py-1.5 text-xs font-medium text-rose-700 transition hover:bg-rose-50 disabled:cursor-not-allowed disabled:opacity-60", children: isBusy ? 'Removing…' : 'Remove' })] })] }, method.id));
+                        const sub = methodSubtext(method);
+                        return (_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 p-4", children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("span", { className: "mt-0.5 text-lg", children: methodIcon(method.type) }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-text", children: methodDisplay(method) }), _jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-2 text-xs text-text-muted", children: [_jsxs("span", { children: ["Added ", new Date(method.created_at).toLocaleDateString('en-US')] }), methodExpiration(method) ? _jsxs("span", { children: ["Expires ", methodExpiration(method)] }) : null, sub ? _jsx("span", { children: sub }) : null, isDefault && (_jsx("span", { className: "rounded-full bg-brand px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-brand-foreground", children: "Default" }))] })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [!isDefault && (_jsx("button", { type: "button", disabled: isBusy, onClick: () => handleSetDefault(method.id), className: "rounded-md border border-border px-3 py-1.5 text-xs font-medium text-text-secondary transition hover:bg-bg-elevated disabled:cursor-not-allowed disabled:opacity-60", children: isBusy ? 'Saving\u2026' : 'Set default' })), _jsx("button", { type: "button", disabled: isBusy, onClick: () => handleRemove(method.id), className: "rounded-md border border-rose-500/30 px-3 py-1.5 text-xs font-medium text-rose-500 transition hover:bg-rose-500/10 disabled:cursor-not-allowed disabled:opacity-60", children: isBusy ? 'Removing\u2026' : 'Remove' })] })] }, method.id));
                     })) })] }) }));
 }
+function detectBrandPM(digits) {
+    if (digits.startsWith('4'))
+        return 'visa';
+    if (/^5[1-5]/.test(digits) || /^2[2-7]/.test(digits))
+        return 'mastercard';
+    if (/^3[47]/.test(digits))
+        return 'amex';
+    if (/^6(?:011|5)/.test(digits))
+        return 'discover';
+    return '';
+}
+function CardForm({ onAdd, setError }) {
+    const [number, setNumberRaw] = React.useState('');
+    const [name, setName] = React.useState('');
+    const [expiry, setExpiryRaw] = React.useState('');
+    const [cvc, setCvc] = React.useState('');
+    const [zip, setZip] = React.useState('');
+    const [loading, setLoading] = React.useState(false);
+    const [cvvFocused, setCvvFocused] = React.useState(false);
+    const rawNumber = number.replace(/\D/g, '');
+    const brand = detectBrandPM(rawNumber);
+    const cvcLength = brand === 'amex' ? 4 : 3;
+    const authToken = React.useMemo(() => {
+        return typeof window !== 'undefined' ? (localStorage.getItem('hanzo-auth-token') ?? undefined) : undefined;
+    }, []);
+    const handleSubmit = React.useCallback(async (e) => {
+        e.preventDefault();
+        setError('');
+        if (rawNumber.length < 13) {
+            setError('Invalid card number');
+            return;
+        }
+        if (!expiry.includes('/')) {
+            setError('Invalid expiry');
+            return;
+        }
+        const [mm, yy] = expiry.split('/');
+        if (!mm || !yy || mm.length !== 2 || yy.length !== 2) {
+            setError('Invalid expiry');
+            return;
+        }
+        if (cvc.length < 3) {
+            setError('Invalid CVC');
+            return;
+        }
+        if (!name.trim()) {
+            setError('Name required');
+            return;
+        }
+        setLoading(true);
+        try {
+            const base = process.env.NEXT_PUBLIC_COMMERCE_API ?? 'https://api.hanzo.ai/api/v1';
+            const headers = { 'Content-Type': 'application/json' };
+            if (authToken)
+                headers['Authorization'] = `Bearer ${authToken}`;
+            const res = await fetch(`${base}/billing/card/tokenize`, {
+                method: 'POST',
+                headers,
+                body: JSON.stringify({
+                    number: rawNumber,
+                    expiry_month: mm,
+                    expiry_year: `20${yy}`,
+                    cvc,
+                    name: name.trim(),
+                    zip: zip.trim(),
+                }),
+            });
+            if (!res.ok) {
+                const d = await res.json().catch(() => ({}));
+                throw new Error(d.error ?? `Error ${res.status}`);
+            }
+            const data = await res.json();
+            const method = {
+                id: `pm_${Math.random().toString(36).slice(2, 12)}`,
+                type: 'card',
+                is_default: false,
+                isDefault: false,
+                created_at: new Date().toISOString(),
+                card: {
+                    brand: data.brand,
+                    last4: data.last4,
+                    exp_month: parseInt(mm, 10),
+                    exp_year: parseInt(`20${yy}`, 10),
+                    funding: 'credit',
+                },
+                billing_details: { name: name.trim() },
+                _sourceToken: data.token,
+            };
+            await onAdd(method);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Card error');
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [rawNumber, expiry, cvc, name, zip, authToken, onAdd, setError]);
+    const canSubmit = !loading && rawNumber.length >= 13 && !!expiry && !!cvc && !!name.trim();
+    return (_jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [_jsx("div", { style: { display: 'flex', justifyContent: 'center', padding: '8px 0' }, children: _jsx(AnimatedCard, { number: rawNumber, name: name, expiry: expiry.replace('/', ''), cvv: cvc, cvvFocused: cvvFocused }) }), _jsx("input", { type: "text", inputMode: "numeric", autoComplete: "cc-number", placeholder: "Card number", value: number, onChange: e => {
+                    const d = e.target.value.replace(/\D/g, '').slice(0, 16);
+                    setNumberRaw(d.replace(/(.{4})/g, '$1 ').trim());
+                }, className: INPUT_CLASS, disabled: loading, maxLength: 19 }), _jsx("input", { type: "text", autoComplete: "cc-name", placeholder: "Cardholder name", value: name, onChange: e => setName(e.target.value), className: INPUT_CLASS, disabled: loading }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx("input", { type: "text", inputMode: "numeric", autoComplete: "cc-exp", placeholder: "MM/YY", value: expiry, onChange: e => {
+                            const d = e.target.value.replace(/\D/g, '').slice(0, 4);
+                            setExpiryRaw(d.length >= 3 ? d.slice(0, 2) + '/' + d.slice(2) : d);
+                        }, className: INPUT_CLASS, disabled: loading, maxLength: 5 }), _jsx("input", { type: "password", inputMode: "numeric", autoComplete: "cc-csc", placeholder: "CVC", value: cvc, onChange: e => setCvc(e.target.value.replace(/\D/g, '').slice(0, cvcLength)), onFocus: () => setCvvFocused(true), onBlur: () => setCvvFocused(false), className: INPUT_CLASS, disabled: loading, maxLength: cvcLength })] }), _jsx("input", { type: "text", autoComplete: "postal-code", placeholder: "ZIP (optional)", value: zip, onChange: e => setZip(e.target.value.slice(0, 10)), className: INPUT_CLASS, disabled: loading }), _jsx("button", { type: "submit", className: BTN_PRIMARY, disabled: !canSubmit, children: loading ? 'Processing...' : 'Save card' }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '6px', fontSize: '11px', color: 'rgba(255,255,255,0.3)' }, children: [_jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2" }), _jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })] }), "Secured by Hanzo Commerce ", '\u00b7', " PCI DSS compliant"] })] }));
+}
+// Crypto form -- wagmi + viem + RainbowKit
+function CryptoForm({ onAdd, setError }) {
+    const { address, isConnected } = useAccount();
+    const chainId = useChainId();
+    const [label, setLabel] = React.useState('');
+    const [saving, setSaving] = React.useState(false);
+    const chainName = CHAIN_NAMES[chainId] ?? `Chain ${chainId}`;
+    const saveWallet = React.useCallback(async () => {
+        if (!address)
+            return;
+        setSaving(true);
+        try {
+            const method = {
+                id: `pm_${Math.random().toString(36).slice(2, 12)}`,
+                type: 'crypto',
+                is_default: false,
+                isDefault: false,
+                created_at: new Date().toISOString(),
+                crypto: {
+                    network: 'ethereum',
+                    walletAddress: address,
+                    label: label || `${chainName} wallet`,
+                },
+                billing_details: {},
+            };
+            await onAdd(method);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to save wallet');
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [address, chainId, chainName, label, onAdd, setError]);
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-xs text-text-muted", children: "Connect your wallet to save it as a payment method. Supports Ethereum, Polygon, Arbitrum, Optimism, Base, Avalanche, BSC, and more." }), _jsx("div", { className: "flex justify-center", children: _jsx(ConnectButton, { showBalance: false }) }), isConnected && address && (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "rounded-lg border border-border bg-bg p-3", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsxs("p", { className: "text-xs text-text-dim", children: ["Connected on ", chainName] }) }), _jsx("p", { className: "mt-1 font-mono text-sm text-text break-all", children: address })] }), _jsx("input", { value: label, onChange: e => setLabel(e.target.value), placeholder: `Label (e.g. "My ${chainName} wallet")`, className: INPUT_CLASS }), _jsx("button", { type: "button", disabled: saving, onClick: saveWallet, className: BTN_PRIMARY, children: saving ? 'Saving wallet\u2026' : 'Save wallet as payment method' })] })), _jsx("p", { className: "text-xs text-text-dim", children: "Non-EVM chains (Solana, TON, Bitcoin) coming soon." })] }));
+}
+// Wire form -- bank details with copy-to-clipboard
+const BANK_DETAILS = [
+    { label: 'Beneficiary Bank', value: 'Bank of America, NA 222 Broadway, New York, NY 10038' },
+    { label: 'Beneficiary', value: 'Hanzo, Inc, 4811 Mastin Street, Merriam, KS 66203' },
+    { label: 'Routing \u2014 ACH', value: '113000023 / 111000025' },
+    { label: 'Routing \u2014 Wire', value: '026009593' },
+    { label: 'SWIFT', value: 'BOFAUS3N' },
+    { label: 'Reference', value: 'Hanzo' },
+];
+function WireForm({ onAdd }) {
+    const [copyMsg, setCopyMsg] = React.useState('');
+    const [saving, setSaving] = React.useState(false);
+    const saveWire = React.useCallback(async () => {
+        setSaving(true);
+        try {
+            const method = {
+                id: `pm_${Math.random().toString(36).slice(2, 12)}`,
+                type: 'wire',
+                is_default: false,
+                isDefault: false,
+                created_at: new Date().toISOString(),
+                wire: {
+                    bankName: 'Bank of America',
+                    accountHolder: 'Hanzo, Inc',
+                    routingNumber: '026009593',
+                    swift: 'BOFAUS3N',
+                    country: 'US',
+                },
+                billing_details: {},
+            };
+            await onAdd(method);
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [onAdd]);
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-xs text-text-muted", children: "Send a wire transfer to the account below. Click any field to copy." }), _jsx("div", { className: "space-y-2", children: BANK_DETAILS.map(({ label, value }) => (_jsxs("button", { type: "button", onClick: () => copyToClipboard(value, label, setCopyMsg), className: "w-full rounded-lg border border-border bg-bg p-3 text-left transition hover:border-border-strong group", children: [_jsx("p", { className: "text-[11px] uppercase tracking-wide text-text-dim", children: label }), _jsxs("div", { className: "mt-0.5 flex items-center justify-between", children: [_jsx("p", { className: "text-sm text-text", children: value }), _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "shrink-0 text-text-dim group-hover:text-text-muted", children: [_jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), _jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] })] })] }, label))) }), copyMsg && _jsx("p", { className: "text-xs text-success", children: copyMsg }), _jsx("button", { type: "button", disabled: saving, onClick: saveWire, className: BTN_PRIMARY, children: saving ? 'Saving\u2026' : 'Confirm wire sent' })] }));
+}

package/dist/src/billing/components/promotions-panel.d.ts

@@ -0,0 +1,7 @@
+import type { DiscountCode, SubscriptionDiscount } from '../types';
+export interface PromotionsPanelProps {
+    discount?: SubscriptionDiscount | null;
+    onApplyDiscount?: (code: string) => Promise<DiscountCode | null>;
+}
+export declare function PromotionsPanel({ discount, onApplyDiscount }: PromotionsPanelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=promotions-panel.d.ts.map

package/dist/src/billing/components/promotions-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"promotions-panel.d.ts","sourceRoot":"","sources":["../../../../src/billing/components/promotions-panel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAElE,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAA;IACtC,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,YAAY,GAAG,IAAI,CAAC,CAAA;CACjE;AAOD,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,EAAE,oBAAoB,2CAoGlF"}

package/dist/src/billing/components/promotions-panel.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+function formatDiscount(d) {
+    if (d.kind === 'percent')
+        return `${d.value}% off`;
+    return `$${d.value} off`;
+}
+export function PromotionsPanel({ discount, onApplyDiscount }) {
+    const [code, setCode] = React.useState('');
+    const [applying, setApplying] = React.useState(false);
+    const [result, setResult] = React.useState(null);
+    const handleApply = React.useCallback(async () => {
+        if (!onApplyDiscount || !code.trim())
+            return;
+        setApplying(true);
+        setResult(null);
+        try {
+            const disc = await onApplyDiscount(code.trim());
+            if (disc && disc.valid) {
+                setResult({
+                    success: true,
+                    message: `Applied: ${disc.name || disc.code} (${formatDiscount(disc)})`,
+                });
+                setCode('');
+            }
+            else {
+                setResult({ success: false, message: 'Invalid or expired code' });
+            }
+        }
+        catch (err) {
+            setResult({ success: false, message: err instanceof Error ? err.message : 'Failed to apply code' });
+        }
+        finally {
+            setApplying(false);
+        }
+    }, [onApplyDiscount, code]);
+    return (_jsxs("div", { className: "space-y-4", children: [discount && (_jsxs("div", { className: "overflow-hidden rounded-xl border border-emerald-500/30 bg-emerald-500/5", children: [_jsx("div", { className: "border-b border-emerald-500/20 px-4 py-3", children: _jsx("h4", { className: "text-sm font-semibold text-emerald-500", children: "Active discount" }) }), _jsxs("div", { className: "p-4", children: [_jsx("p", { className: "text-lg font-semibold text-text", children: discount.name || discount.code || 'Discount' }), _jsxs("p", { className: "mt-1 text-sm text-text-secondary", children: [formatDiscount(discount), discount.duration === 'repeating' && discount.durationInMonths
+                                        ? ` for ${discount.durationInMonths} months`
+                                        : discount.duration === 'forever'
+                                            ? ' forever'
+                                            : discount.duration === 'once'
+                                                ? ' (one-time)'
+                                                : ''] })] })] })), _jsxs("div", { className: "overflow-hidden rounded-xl border border-border bg-bg-card", children: [_jsxs("div", { className: "border-b border-border p-4", children: [_jsx("h3", { className: "text-lg font-semibold text-text", children: "Promotions & Discounts" }), _jsx("p", { className: "text-sm text-text-muted", children: "Enter a promo code, referral code, or discount code to apply to your subscription." })] }), _jsxs("div", { className: "p-4", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx("input", { value: code, onChange: (e) => {
+                                            setCode(e.target.value.toUpperCase());
+                                            setResult(null);
+                                        }, placeholder: "Enter promo code", className: "flex-1 rounded-lg border border-border bg-bg-input px-3 py-2 text-sm font-mono uppercase text-text outline-none transition placeholder:text-text-dim focus:border-brand" }), _jsx("button", { type: "button", disabled: !code.trim() || applying || !onApplyDiscount, onClick: handleApply, className: "rounded-lg bg-text px-5 py-2 text-sm font-medium text-bg transition hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-60", children: applying ? 'Applying...' : 'Apply' })] }), result && (_jsx("p", { className: `mt-2 text-sm ${result.success ? 'text-success' : 'text-danger'}`, children: result.message }))] })] }), _jsxs("div", { className: "rounded-xl border border-dashed border-border p-6 text-center", children: [_jsx("p", { className: "text-sm text-text-muted", children: "Watch for promotional offers, seasonal discounts, and referral bonuses." }), _jsx("p", { className: "mt-1 text-xs text-text-dim", children: "Credits and promotions are applied automatically at billing time." })] })] }));
+}