// Billing UI: upgrade modal, post-checkout welcome toast, settings panel. // Real state comes from ForgeDB.getBilling(); checkout/portal redirects via // ForgeBilling. Mirrors the high-fidelity prototype in the design handoff. const { useState: useStateBill, useEffect: useEffectBill } = React; // 1 tailoring ≈ 33¢. Display math throughout the panel uses these constants. const TAILORING_COST = 33; const MONTHLY_BUDGET_TAILORINGS = 15; // = $5.00 / 33¢ // Reason → header copy. The same modal handles all four entry points // (top-bar pill, "+ New base resume", "Buy credits", out-of-tailorings gate). const UPGRADE_REASONS = { general: { eyebrow: "Upgrade", title: "Get five base resumes\nand monthly credits.", context: null, }, addResume: { eyebrow: "Free limit reached", title: "Keep up to five\nbase resumes on Pro.", context: "You're using your one Free base resume. Pro lets you keep separate masters per role-shape — useful for career-changers and consultants.", }, addCredits: { eyebrow: "Credits are a Pro thing", title: "Top-up credits\nrequire Pro.", context: "On Free, you can use the 2 signup tailorings or bring your own API key. Pro includes $5 of credits each month and unlocks $10 top-up packs.", }, outOfTailorings: { eyebrow: "0 tailorings left", title: "Nice work —\nfancy a few more?", context: "You've used your signup tailorings. Add your own API key to keep going on Free, or upgrade to Pro for $5 of credits each month and room for 5 masters.", }, }; function UpgradeModal({ open, reason = "general", onClose }) { const [period, setPeriod] = useStateBill("monthly"); const [loading, setLoading] = useStateBill(false); const [error, setError] = useStateBill(null); const r = UPGRADE_REASONS[reason] || UPGRADE_REASONS.general; useEffectBill(() => { if (!open) return; setError(null); setLoading(false); const onKey = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [open, onClose]); if (!open) return null; const price = period === "monthly" ? "15" : "12.50"; const sub = period === "monthly" ? "per month, billed monthly" : "per month, billed $150/yr"; const onContinue = async () => { setError(null); setLoading(true); try { await window.ForgeBilling.startCheckout(period); // Page is redirecting to Stripe; nothing else to do here. } catch (e) { setLoading(false); setError(e.message || "Couldn't start checkout"); } }; return (
e.stopPropagation()} style={{ width: "100%", maxWidth: 520, background: "var(--paper-3)", border: "1px solid var(--border)", borderRadius: 16, padding: "36px 36px 28px", boxShadow: "0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.4)", position: "relative", fontFamily: "Inter, sans-serif", color: "var(--ink)", }} > — {r.eyebrow}

{r.title.split("\n").map((line, i, arr) => ( {line}{i < arr.length - 1 &&
} ))}

{r.context && (

{r.context}

)}
{["monthly", "yearly"].map((p) => ( ))}
$ {price} {sub}
{error && (
{error}
)}
Secured by Cancel anytime 14-day refund
); } function WelcomeToast({ show, onDismiss }) { const [vis, setVis] = useStateBill(show); useEffectBill(() => { if (show) { setVis(true); const t = setTimeout(() => { setVis(false); setTimeout(() => onDismiss && onDismiss(), 300); }, 5400); return () => clearTimeout(t); } }, [show, onDismiss]); if (!show) return null; return (
Welcome to Pro.
5 base resumes, monthly credits, cover letters — all unlocked.
); } function formatRenewDate(iso) { if (!iso) return null; const d = new Date(iso); if (isNaN(d.getTime())) return null; return d.toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" }); } function BillingPanel({ billing, onUpgrade, onAddCreditsFree, onManage, onTopUp }) { const isPro = billing && billing.plan === "pro"; const monthlyTailoringsLeft = Math.floor((billing?.monthly_credits_remaining ?? 0) / TAILORING_COST); const freeTailoringsLeft = Math.floor((billing?.signup_credits_remaining ?? 0) / TAILORING_COST); const topupTailoringsLeft = Math.floor((billing?.topup_credits_remaining ?? 0) / TAILORING_COST); const renewLabel = formatRenewDate(billing?.subscription_renews_at); const periodPriceLabel = billing?.subscription_period === "yearly" ? "$150/year" : "$15/month"; return (
Plan & billing
{isPro ? "Pro" : "Free"} {isPro && ( Active )}
{isPro ? `${periodPriceLabel}${renewLabel ? ` · next bill ${renewLabel}` : ""}` : "1 base resume · BYOK or signup credits"}
{isPro ? ( ) : ( )}
{isPro ? "Monthly credits" : "Free tailorings"} {isPro ? `${monthlyTailoringsLeft}/${MONTHLY_BUDGET_TAILORINGS} LEFT` : `${freeTailoringsLeft}/2 LEFT`}
{isPro && renewLabel && (
Resets {renewLabel} · no rollover
)}
{Array.from({ length: isPro ? MONTHLY_BUDGET_TAILORINGS : 2 }).map((_, i) => { const used = isPro ? i >= monthlyTailoringsLeft : i >= freeTailoringsLeft; return (
); })}
{isPro && topupTailoringsLeft > 0 && (
Top-up balance ~{topupTailoringsLeft} TAILORINGS
)}
{isPro ? "Monthly credits reset each billing cycle. Top-up packs stack on top and never expire." : "Free includes 2 ResumeForge-credit tailorings on signup. After that, paste your own API key or upgrade to Pro for monthly credits + 5 masters."}
); } Object.assign(window, { UpgradeModal, WelcomeToast, BillingPanel, UPGRADE_REASONS });