feat: per-tier feature toggles for recipe variations/pairings (v0.50.0)

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>
2026-07-18 23:35:12 +02:00
parent 12c2ec213a
commit 2f3ba14093
24 changed files with 5945 additions and 19 deletions
@@ -0,0 +1,88 @@
+"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>
+  );
+}