Arnaud
8d5787e56e
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>
45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
"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>
|
|
);
|
|
}
|