Arnaud
f871f4f588
Implements plans/STRIPE_PLAN.md sections 1-9 for solo Pro/Family
billing (family multi-user sharing, section 1a, deliberately deferred
-- flagged in that plan as the most novel/error-prone piece).
Decisions locked in: cancel/downgrade at period end (Stripe Portal
default), no trial period.
- lib/stripe.ts: single client factory reading STRIPE_SECRET_KEY via
site-settings (DB overrides env, same pattern as every other
provider key in this codebase).
- Webhook route rewritten on the real `stripe` SDK
(stripe.webhooks.constructEvent replaces the hand-rolled HMAC
verifier) and now handles the full event set: checkout.session.completed,
customer.subscription.{updated,deleted}, invoice.{payment_failed,paid}.
past_due deliberately never downgrades tier on its own -- Stripe
retries the card first, recovering via invoice.paid or eventually
giving up via subscription.deleted. Every handler audit-logs under
billing.<event>. Dedup via the existing processed_stripe_events
table, unchanged.
- Schema: tierDefinitions gained stripe{ProductId,PriceIdMonthly,
PriceIdYearly} (the lookup table mapping a Price back to a tier on
checkout); users gained stripeSubscriptionId/subscriptionStatus/
currentPeriodEnd.
- New POST /api/v1/billing/checkout (creates a subscription Checkout
Session, allow_promotion_codes: true), POST /api/v1/billing/portal
(Stripe's hosted self-serve cancel/upgrade/card-update), GET
/api/v1/billing/status.
- /settings/billing: current plan + renewal date, past_due warning,
usage-vs-limits (reuses the existing UsageQuotaSection), plan
comparison cards with per-tier Checkout buttons, manage-billing
button once a Stripe customer exists.
- /admin/billing: connection status (test/live mode detection),
subscriber counts, past-due list, recent billing audit events, link
to Stripe Dashboard. Tier Limits page extended with the three Stripe
price fields per tier (own render branch, not the numeric+Unlimited-
switch machinery the existing fields use).
Before going live: an admin needs to create real Products/Prices in
Stripe, enter the IDs on Tier Limits, and configure the Stripe-side
webhook endpoint -- all operational steps the plan always called for,
none of it code.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
86 lines
3.0 KiB
TypeScript
86 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { toast } from "sonner";
|
|
import { Check } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type Tier = "free" | "pro" | "family";
|
|
|
|
type PlanCard = {
|
|
tier: Tier;
|
|
name: string;
|
|
monthlyPrice: string;
|
|
yearlyPrice: string | null;
|
|
features: string[];
|
|
purchasable: boolean;
|
|
};
|
|
|
|
export function BillingPlanCards({ currentTier, plans }: { currentTier: Tier; plans: PlanCard[] }) {
|
|
const [checkingOut, setCheckingOut] = useState<Tier | null>(null);
|
|
|
|
async function checkout(tier: "pro" | "family") {
|
|
setCheckingOut(tier);
|
|
try {
|
|
const res = await fetch("/api/v1/billing/checkout", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ tier, interval: "month" }),
|
|
});
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => ({}));
|
|
throw new Error((data as { error?: string }).error ?? "Checkout failed");
|
|
}
|
|
const { url } = (await res.json()) as { url: string };
|
|
window.location.assign(url);
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : "Checkout failed");
|
|
setCheckingOut(null);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
|
{plans.map((plan) => {
|
|
const isCurrent = plan.tier === currentTier;
|
|
return (
|
|
<Card key={plan.tier} className={cn(isCurrent && "border-primary")}>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle>{plan.name}</CardTitle>
|
|
{isCurrent && <Badge>Current plan</Badge>}
|
|
</div>
|
|
<p className="text-2xl font-bold">{plan.monthlyPrice}</p>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<ul className="space-y-1.5 text-sm">
|
|
{plan.features.map((f) => (
|
|
<li key={f} className="flex items-start gap-2">
|
|
<Check className="h-4 w-4 text-primary shrink-0 mt-0.5" />
|
|
<span>{f}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
{!isCurrent && plan.purchasable && plan.tier !== "free" && (
|
|
<Button
|
|
className="w-full"
|
|
disabled={checkingOut !== null}
|
|
onClick={() => { void checkout(plan.tier as "pro" | "family"); }}
|
|
>
|
|
{checkingOut === plan.tier ? "Redirecting…" : `Switch to ${plan.name}`}
|
|
</Button>
|
|
)}
|
|
{!isCurrent && !plan.purchasable && plan.tier !== "free" && (
|
|
<p className="text-xs text-muted-foreground">Not available yet — pricing not configured.</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|