`src/app/pricing/UpgradeButton.tsx`

57 lines
"use client";
import { useState } from "react";

export default function UpgradeButton({
  tier,
  label,
  current,
}: {
  tier: "STANDARD" | "PREMIUM";
  label: string;
  current: boolean;
}) {
  const [loading, setLoading] = useState(false);
  const [err, setErr] = useState("");

  if (current) {
    return (
      <div style={{ padding: "10px 0", fontWeight: 700, color: "#16a34a" }}>✓ Your plan</div>
    );
  }

  async function go() {
    setLoading(true);
    setErr("");
    try {
      const res = await fetch("/api/billing/checkout", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ tier }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "checkout failed");
      window.location.href = data.url;
    } catch (e) {
      setErr((e as Error).message);
      setLoading(false);
    }
  }

  return (
    <div>
      <button
        onClick={go}
        disabled={loading}
        style={{
          width: "100%", padding: "11px 0", borderRadius: 8, border: "none",
          background: "#111827", color: "#fff", fontWeight: 700, cursor: "pointer",
          opacity: loading ? 0.6 : 1,
        }}
      >
        {loading ? "Redirecting…" : `Upgrade to ${label}`}
      </button>
      {err && <div style={{ color: "#b91c1c", fontSize: 12, marginTop: 6 }}>{err}</div>}
    </div>
  );
}