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>
55 lines
2.4 KiB
TypeScript
55 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { useTranslations } from "next-intl";
|
|
import { User, Shield, Bot, Bell, Apple, Key, Webhook, SlidersHorizontal, CreditCard } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const NAV_ITEMS = [
|
|
{ href: "/settings", key: "profile", icon: User, exact: true },
|
|
{ href: "/settings/security", key: "security", icon: Shield, exact: false },
|
|
{ href: "/settings/billing", key: "billing", icon: CreditCard, exact: false },
|
|
{ href: "/settings/ai", key: "aiModels", icon: Bot, exact: false },
|
|
{ href: "/settings/notifications", key: "notifications", icon: Bell, exact: false },
|
|
{ href: "/settings/features", key: "features", icon: SlidersHorizontal, exact: false },
|
|
{ href: "/settings/nutrition", key: "nutrition", icon: Apple, exact: false },
|
|
{ href: "/settings/api-keys", key: "apiKeys", icon: Key, exact: false },
|
|
{ href: "/settings/webhooks", key: "webhooks", icon: Webhook, exact: false },
|
|
] as const;
|
|
|
|
const DEVELOPER_ONLY_KEYS = new Set(["apiKeys", "webhooks"]);
|
|
|
|
export function SettingsSidebar({ showDeveloperNav }: { showDeveloperNav: boolean }) {
|
|
const pathname = usePathname();
|
|
const t = useTranslations("settings");
|
|
|
|
const visibleItems = NAV_ITEMS.filter((item) => showDeveloperNav || !DEVELOPER_ONLY_KEYS.has(item.key));
|
|
|
|
return (
|
|
<nav className="w-full md:w-48 md:shrink-0 md:sticky md:top-6">
|
|
<ul className="flex overflow-x-auto gap-1 pb-2 -mx-4 px-4 md:mx-0 md:px-0 md:flex-col md:overflow-visible md:gap-0.5 md:pb-0 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
|
|
{visibleItems.map(({ href, key, icon: Icon, exact }) => {
|
|
const active = exact ? pathname === href : pathname.startsWith(href);
|
|
return (
|
|
<li key={href} className="shrink-0 md:shrink">
|
|
<Link
|
|
href={href}
|
|
className={cn(
|
|
"flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm whitespace-nowrap transition-colors",
|
|
active
|
|
? "bg-accent text-accent-foreground font-medium"
|
|
: "text-muted-foreground hover:text-foreground hover:bg-accent/50"
|
|
)}
|
|
>
|
|
<Icon className="h-4 w-4 shrink-0" />
|
|
{t(key)}
|
|
</Link>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</nav>
|
|
);
|
|
}
|