feat: self-serve developer access for paid tiers, split BYOK into its own permission (v0.72.0)

Splits what was one isDeveloper flag (gating webhooks, API keys, AND BYOK together) into two independent permissions: - isDeveloper (webhooks + self-serve API keys): admin-toggled as before, but now ALSO self-serve -- PATCH /api/v1/users/me/developer-access lets any paid-tier (tier !== "free") user turn it on themselves, no added fee. Free tier still needs an admin grant. Turning it off is always self-serve regardless of tier, since revoking your own access needs no gatekeeping. canSelfServeDeveloperAccess() in lib/permissions.ts is the single check for "is this tier eligible." - isByokEnabled (BYOK AI provider keys): new column, admin-only, no self-serve path at all -- routing real AI provider spend through Epicure on the user's own key warrants a manual admin check-in that webhooks/API access don't need. requireByok() replaces requireDeveloper() on the three ai-keys routes. Migration adds is_byok_enabled and grandfathers in anyone who already has a BYOK key configured (the earlier grandfather migration only covered the combined isDeveloper flag, which BYOK no longer reads). Settings UI: webhooks/API-keys pages show a self-serve "Enable" toggle for paid-tier non-developers instead of the locked notice (still shown to free-tier users), plus a "Disable developer access" link once enabled. Settings -> AI's BYOK section now checks isByokEnabled instead of isDeveloper -- unaffected by the self-serve change, still fully admin-gated. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-23 09:31:04 +02:00
parent eb99faf655
commit 8d5787e56e
27 changed files with 6338 additions and 68 deletions
@@ -0,0 +1,44 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { toast } from "sonner";
+import { Code2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+/** Shown instead of the locked notice on the webhooks/API-keys settings
+ * pages when the user is on a paid tier — self-serve, no admin needed, no
+ * added fee. Reloads the page on success since the manager component
+ * needs its initial data fetched server-side. */
+export function DeveloperAccessToggle({ message }: { message: string }) {
+  const router = useRouter();
+  const [enabling, setEnabling] = useState(false);
+
+  async function enable() {
+    setEnabling(true);
+    try {
+      const res = await fetch("/api/v1/users/me/developer-access", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ enabled: true }),
+      });
+      if (!res.ok) throw new Error();
+      router.refresh();
+    } catch {
+      toast.error("Couldn't enable developer access");
+      setEnabling(false);
+    }
+  }
+
+  return (
+    <div className="flex items-center justify-between gap-3 rounded-lg border bg-muted/30 p-4">
+      <div className="flex items-start gap-3 text-sm text-muted-foreground">
+        <Code2 className="h-4 w-4 shrink-0 mt-0.5" />
+        <p>{message}</p>
+      </div>
+      <Button type="button" size="sm" disabled={enabling} onClick={() => { void enable(); }}>
+        {enabling ? "Enabling…" : "Enable"}
+      </Button>
+    </div>
+  );
+}