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,40 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { toast } from "sonner";
+
+/** Turning developer access off is always self-serve regardless of tier
+ * or who granted it — only turning it back on (for a free-tier user)
+ * requires an admin. */
+export function DisableDeveloperAccessButton() {
+  const router = useRouter();
+  const [disabling, setDisabling] = useState(false);
+
+  async function disable() {
+    setDisabling(true);
+    try {
+      const res = await fetch("/api/v1/users/me/developer-access", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ enabled: false }),
+      });
+      if (!res.ok) throw new Error();
+      router.refresh();
+    } catch {
+      toast.error("Couldn't disable developer access");
+      setDisabling(false);
+    }
+  }
+
+  return (
+    <button
+      type="button"
+      disabled={disabling}
+      onClick={() => { void disable(); }}
+      className="text-xs text-muted-foreground hover:text-destructive underline underline-offset-2"
+    >
+      {disabling ? "Disabling…" : "Disable developer access"}
+    </button>
+  );
+}