feat(billing): P1f Stripe UI — admin config panel + member dues card

Settings: StripeBillingPanel (admin) — mode, publishable key, write-only secret/webhook secret, per-tier price ids, grace days; shows the per-space webhook URL + which events to subscribe + Portal-activation reminder. /me: DuesCard — status from getMyBilling, 'Pay dues' (startDuesCheckout redirect) when not active, 'Manage billing' (startBillingPortal) when a customer exists. Self-contained client components; settings page composes the panel after SettingsClient.
2026-05-17 03:38:00 -07:00
parent 0a11d36de1
commit 1f61029f32
4 changed files with 198 additions and 7 deletions
@@ -0,0 +1,58 @@
+'use client'
+
+import { useState } from 'react'
+import { toast } from 'sonner'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { startDuesCheckout, startBillingPortal } from '@/lib/actions'
+
+type Billing = { status: string | null; currentPeriodEnd: string | null; hasCustomer: boolean } | null
+
+const PAID = new Set(['active', 'trialing'])
+
+export function DuesCard({ billing }: { billing: Billing }) {
+  const [busy, setBusy] = useState(false)
+  const paid = !!billing?.status && PAID.has(billing.status)
+
+  async function go(fn: () => Promise<{ error?: string } | { data: { url: string } }>) {
+    setBusy(true)
+    const res = await fn()
+    if ('error' in res && res.error) { setBusy(false); return toast.error(res.error) }
+    window.location.href = (res as { data: { url: string } }).data.url
+  }
+
+  return (
+    <div className="bg-card rounded border border-border p-4">
+      <div className="flex items-center justify-between gap-3 flex-wrap">
+        <div>
+          <p className="font-sans text-sm font-medium text-foreground">Membership dues</p>
+          {billing?.status ? (
+            <p className="font-mono text-[10px] text-muted-foreground mt-0.5">
+              {billing.status}
+              {billing.currentPeriodEnd
+                ? ` · renews ${new Date(billing.currentPeriodEnd).toLocaleDateString()}`
+                : ''}
+            </p>
+          ) : (
+            <p className="font-mono text-[10px] text-muted-foreground mt-0.5">No active dues subscription.</p>
+          )}
+        </div>
+        {billing?.status && (
+          <Badge variant={paid ? 'default' : 'outline'}>{paid ? 'Current' : 'Action needed'}</Badge>
+        )}
+      </div>
+      <div className="flex gap-2 mt-3">
+        {!paid && (
+          <Button size="sm" disabled={busy} onClick={() => go(startDuesCheckout)}>
+            {busy ? 'Opening…' : 'Pay dues'}
+          </Button>
+        )}
+        {billing?.hasCustomer && (
+          <Button size="sm" variant="outline" disabled={busy} onClick={() => go(startBillingPortal)}>
+            Manage billing
+          </Button>
+        )}
+      </div>
+    </div>
+  )
+}