Files
Epicure/apps/web/app/(app)/settings/webhooks/page.tsx
T
Arnaud 8d5787e56e 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

67 lines
2.5 KiB
TypeScript

import type { Metadata } from "next";
import { headers } from "next/headers";
import { auth } from "@/lib/auth/server";
import { db, webhooks, users, eq } from "@epicure/db";
import { WebhooksManager } from "@/components/settings/webhooks-manager";
import { DeveloperLockedNotice } from "@/components/settings/developer-locked-notice";
import { DeveloperAccessToggle } from "@/components/settings/developer-access-toggle";
import { DisableDeveloperAccessButton } from "@/components/settings/disable-developer-access-button";
import { canSelfServeDeveloperAccess } from "@/lib/permissions";
import { getMessages } from "@/lib/i18n/server";
export const metadata: Metadata = {};
export default async function WebhooksPage() {
const session = await auth.api.getSession({ headers: await headers() });
if (!session) return null;
const m = getMessages((session.user as { locale?: string }).locale);
const dbUser = (await db.select({ isDeveloper: users.isDeveloper, tier: users.tier }).from(users).where(eq(users.id, session.user.id)).limit(1))[0];
const rows = dbUser?.isDeveloper
? await db
.select({
id: webhooks.id,
url: webhooks.url,
events: webhooks.events,
active: webhooks.active,
createdAt: webhooks.createdAt,
})
.from(webhooks)
.where(eq(webhooks.userId, session.user.id))
: [];
return (
<div className="space-y-8">
<section className="rounded-xl border p-6 space-y-4">
<div>
<h2 className="font-semibold text-lg">{m.settings.webhooksPage.title}</h2>
<p className="text-sm text-muted-foreground mt-1">
{m.settings.webhooksPage.description}
</p>
</div>
{!dbUser?.isDeveloper && dbUser && canSelfServeDeveloperAccess(dbUser) && (
<DeveloperAccessToggle message={m.settings.developerSelfServeNotice} />
)}
{!dbUser?.isDeveloper && (!dbUser || !canSelfServeDeveloperAccess(dbUser)) && (
<DeveloperLockedNotice message={m.settings.developerLockedNotice} />
)}
{dbUser?.isDeveloper && (
<>
<WebhooksManager
initialWebhooks={rows.map((w) => ({
id: w.id,
url: w.url,
events: w.events,
active: w.active,
createdAt: w.createdAt.toISOString(),
}))}
/>
<DisableDeveloperAccessButton />
</>
)}
</section>
</div>
);
}