feat: add billing foundation and entitlement enforcement

- add workspace-scoped billing storage, usage tracking, and add-on catalog - enforce plan entitlements for search and deep research routes - expand pricing and account UI around billing state, usage, and upgrades
2026-05-22 17:50:28 +00:00
parent f1a46c79f2
commit 94b8c357b4
21 changed files with 2269 additions and 151 deletions
@@ -0,0 +1,70 @@
+import { Check } from 'lucide-react';
+import { getPlanCardBullets, getPlanDisplayMeta, getPublicPricingPlansForInterval, type BillingInterval } from '../../shared/billing/plans';
+import { Button } from './ui';
+import { formatPlanPeriod, formatPlanPrice } from '../lib/billing-ui';
+
+interface PricingCardsProps {
+  billingInterval: Extract<BillingInterval, 'monthly' | 'annual'>;
+  onGoToAuth: (mode: 'sign_in' | 'sign_up') => void;
+}
+
+export function PricingCards({ billingInterval, onGoToAuth }: PricingCardsProps) {
+  const pricingPlans = getPublicPricingPlansForInterval(billingInterval);
+
+  return (
+    <div className="grid gap-5 xl:grid-cols-4">
+      {pricingPlans.map((plan) => {
+        const display = getPlanDisplayMeta(plan.code);
+        const isFeatured = display.badgeLabel === 'Best Value';
+
+        return (
+          <div
+            key={plan.code}
+            className={`rounded-[2rem] border p-7 shadow-sm ${
+              isFeatured ? 'border-emerald-300 bg-emerald-50/60 shadow-emerald-100' : 'border-stone-200 bg-white'
+            }`}
+          >
+            <div className="flex items-start justify-between gap-4">
+              <div>
+                <p className="text-xl font-bold tracking-tight text-stone-900">{plan.name}</p>
+                <p className="mt-2 text-sm text-stone-600">{display.audience}</p>
+              </div>
+              {display.badgeLabel ? (
+                <span className="rounded-full bg-emerald-600 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-white">
+                  {display.badgeLabel}
+                </span>
+              ) : null}
+            </div>
+
+            <div className="mt-8 flex items-end gap-1">
+              <span className="text-4xl font-bold tracking-tight text-stone-950">{formatPlanPrice(plan.priceCents, plan.currencyCode)}</span>
+              <span className="pb-1 text-sm text-stone-500">{formatPlanPeriod(plan.billingInterval, plan.contactSalesRequired)}</span>
+            </div>
+
+            <p className="mt-3 text-sm leading-7 text-stone-600">{display.summary}</p>
+
+            <Button
+              type="button"
+              onClick={() => onGoToAuth(display.ctaMode)}
+              className={`mt-8 w-full rounded-2xl ${isFeatured ? 'bg-emerald-600 hover:bg-emerald-700' : ''}`}
+              variant={isFeatured ? 'primary' : 'secondary'}
+            >
+              {display.ctaLabel}
+            </Button>
+
+            <div className="mt-8 space-y-3">
+              {getPlanCardBullets(plan.code).map((item) => (
+                <div key={item} className="flex items-start gap-3 text-sm text-stone-700">
+                  <div className="mt-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-emerald-100 text-emerald-700">
+                    <Check className="h-3.5 w-3.5" />
+                  </div>
+                  <span>{item}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}