Arnaud
2f3ba14093
Admins can now disable specific AI features per tier from Admin > Tier Limits — new feature_flags table (feature x tier -> enabled, defaulting to true so adding a new gated feature never needs a backfill). Covers recipe variations, drink pairing, and meal pairing to start. When disabled for a user's tier, the button stays visible (with a small lock badge) but opens an upgrade dialog instead of running; the API route rejects the call server-side either way (requireFeatureEnabled, re-reads tier from the DB rather than trusting the session's cache, same rationale as checkAndIncrementTierLimit). The upgrade dialog is informational only — no Stripe checkout exists yet (STRIPE_PLAN.md is still just a plan) — its CTA links to /support prefilled as an upgrade-interest suggestion. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
89 lines
3.0 KiB
TypeScript
89 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { toast } from "sonner";
|
|
import { Switch } from "@/components/ui/switch";
|
|
|
|
type Tier = "free" | "pro" | "family";
|
|
|
|
type FeatureDef = { key: string; label: string; description: string };
|
|
|
|
type Matrix = Record<string, Record<Tier, boolean>>;
|
|
|
|
const TIER_LABELS: Record<Tier, string> = { free: "Free", pro: "Pro", family: "Family" };
|
|
const TIERS: Tier[] = ["free", "pro", "family"];
|
|
|
|
export function FeatureFlagsForm({
|
|
features,
|
|
initialMatrix,
|
|
}: {
|
|
features: FeatureDef[];
|
|
initialMatrix: Matrix;
|
|
}) {
|
|
const [matrix, setMatrix] = useState<Matrix>(initialMatrix);
|
|
const [saving, setSaving] = useState<string | null>(null);
|
|
|
|
async function toggle(featureKey: string, tier: Tier, enabled: boolean) {
|
|
const cellKey = `${featureKey}:${tier}`;
|
|
setSaving(cellKey);
|
|
const prev = matrix[featureKey]![tier];
|
|
setMatrix((m) => ({ ...m, [featureKey]: { ...m[featureKey]!, [tier]: enabled } }));
|
|
try {
|
|
const res = await fetch("/api/v1/admin/feature-flags", {
|
|
method: "PATCH",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ featureKey, tier, enabled }),
|
|
});
|
|
if (!res.ok) throw new Error();
|
|
} catch {
|
|
setMatrix((m) => ({ ...m, [featureKey]: { ...m[featureKey]!, [tier]: prev } }));
|
|
toast.error("Failed to update feature flag");
|
|
} finally {
|
|
setSaving(null);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<section className="rounded-xl border p-6 space-y-4">
|
|
<div>
|
|
<h2 className="font-semibold text-lg">Feature Toggles</h2>
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
Disable a feature for a tier to keep its button visible but gated — clicking it shows an upgrade prompt instead of running.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="text-left border-b">
|
|
<th className="py-2 pr-4 font-medium text-muted-foreground">Feature</th>
|
|
{TIERS.map((tier) => (
|
|
<th key={tier} className="py-2 px-4 font-medium text-muted-foreground text-center">{TIER_LABELS[tier]}</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{features.map((f) => (
|
|
<tr key={f.key} className="border-b last:border-0">
|
|
<td className="py-3 pr-4">
|
|
<p className="font-medium">{f.label}</p>
|
|
<p className="text-xs text-muted-foreground">{f.description}</p>
|
|
</td>
|
|
{TIERS.map((tier) => (
|
|
<td key={tier} className="py-3 px-4 text-center">
|
|
<Switch
|
|
checked={matrix[f.key]?.[tier] ?? true}
|
|
disabled={saving === `${f.key}:${tier}`}
|
|
onCheckedChange={(checked) => { void toggle(f.key, tier, checked); }}
|
|
/>
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|