Files
Epicure/apps/web/components/premium/upgrade-dialog.tsx
T
Arnaud 1fe379bcdc feat: version history as 10th feature flag, richer upgrade prompts, close unguarded photo-import tab (v0.80.0)
Recipe version history is now gated like the other 9 per-tier features (enabled by default, locked-vs-hidden treatment via isFeatureAvailableAnyTier). UpgradeDialog now shows a tagline + concrete bullet list per feature instead of one generic sentence.

Also closes a real gap: the AI-generate dialog's Photo tab hit /api/v1/ai/import-photo directly with no tier check in the UI (server route was already correctly gated) — a locked-out user could fill it in and hit a dead-end error instead of an upgrade prompt. Now threaded through the same lock/hide props as the dedicated PhotoImportButton.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-24 14:04:27 +02:00

153 lines
5.5 KiB
TypeScript

"use client";
import Link from "next/link";
import { Sparkles, Check } from "lucide-react";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
DialogFooter,
} from "@/components/ui/dialog";
// Marketing copy per feature — kept client-side (not sourced from
// lib/feature-flags.ts's FEATURE_DEFINITIONS) since that module pulls in
// the DB client for server-only helpers and can't be bundled for the
// browser. Falls back to a generic pitch for any key not listed here.
const FEATURE_COPY: Record<string, { tagline: string; bullets: string[] }> = {
recipe_variations: {
tagline: "Get AI-generated twists on any recipe you save — dietary swaps, flavor changes, or a whole new spin — without starting from scratch.",
bullets: [
"Dietary swaps (vegan, gluten-free, dairy-free, and more)",
"Flavor variations generated from your existing recipe",
"Saved as a new recipe, linked back to the original",
],
},
drink_pairing: {
tagline: "Never wonder what to serve alongside dinner again — get drink pairings suggested for any dish.",
bullets: [
"Wine, beer, cocktail, and non-alcoholic suggestions",
"Tailored to the specific dish, not generic pairing charts",
"Explains why each pairing works",
],
},
meal_pairing: {
tagline: "Turn a single recipe into a full meal — get side dish, salad, and sauce suggestions that actually complement it.",
bullets: [
"Starters, sides, salads, breads, and sauces suggested per dish",
"One click to generate and save any suggestion as its own recipe",
"Pick multiple pairings and generate them all at once",
],
},
recipe_import_url: {
tagline: "Stop retyping recipes from other sites — paste a link and get a fully structured recipe in seconds.",
bullets: [
"Works with most recipe blogs and sites",
"Extracts ingredients, steps, servings, and timing automatically",
"Edit anything before saving",
],
},
recipe_import_photo: {
tagline: "Digitize a cookbook page or handwritten family recipe just by photographing it.",
bullets: [
"Recognizes printed or handwritten recipes",
"Extracts ingredients and steps automatically",
"Saved as a private, editable recipe",
],
},
nutrition_estimation: {
tagline: "Know what's in every dish — get calorie and macro estimates for any recipe, no manual entry required.",
bullets: [
"Calories, protein, carbs, fat, fiber, and sodium per serving",
"Combines AI estimation with USDA reference data",
"Powers your weekly nutrition rollup on the meal plan",
],
},
markdown_export: {
tagline: "Take your recipes, meal plans, and shopping lists anywhere — export clean Markdown you can paste into any note app.",
bullets: [
"Works on recipes, collections, meal plans, and pantry lists",
"Copy to clipboard or download as a .md file",
"Clean formatting, no app lock-in",
],
},
weekly_nutrition: {
tagline: "See how your whole week stacks up against your nutrition goals, not just one meal at a time.",
bullets: [
"Daily average calories and macros across your meal plan week",
"Compared directly against your saved nutrition goals",
"Flags days with missing nutrition data",
],
},
version_history: {
tagline: "Never lose a good version of a recipe — every edit is saved, so you can compare or roll back anytime.",
bullets: [
"Every save keeps a full snapshot of the prior version",
"Side-by-side diff view to see exactly what changed",
"Restore any past version with one click",
],
},
grocery_delivery: {
tagline: "Skip the manual shopping trip — send your list straight to a grocery delivery provider.",
bullets: [
"One click from your shopping list to checkout",
"Keeps quantities and aisle grouping intact",
"No re-typing your list into another app",
],
},
};
export function UpgradeDialog({
open,
onOpenChange,
featureKey,
featureLabel,
}: {
open: boolean;
onOpenChange: (open: boolean) => void;
featureKey: string;
featureLabel: string;
}) {
const copy = FEATURE_COPY[featureKey];
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-sm">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<Sparkles className="h-5 w-5 text-primary" />
{featureLabel}
</DialogTitle>
<DialogDescription>
{copy?.tagline ?? `${featureLabel} is available on the Pro plan. Free accounts don't include it.`}
</DialogDescription>
</DialogHeader>
{copy && (
<ul className="space-y-1.5">
{copy.bullets.map((bullet) => (
<li key={bullet} className="flex items-start gap-2 text-sm">
<Check className="h-4 w-4 text-primary shrink-0 mt-0.5" />
<span>{bullet}</span>
</li>
))}
</ul>
)}
<p className="text-sm text-muted-foreground">
Included on the Pro plan (4.99/mo).
</p>
<DialogFooter className="sm:justify-start">
<Link
href={`/support?upgrade=${encodeURIComponent(featureKey)}`}
className={cn(buttonVariants({ variant: "default" }))}
>
I&apos;m interested let us know
</Link>
</DialogFooter>
</DialogContent>
</Dialog>
);
}