- Disable a feature for a tier to hide it for that tier's users (most features hide entirely; recipe variations instead shows a "Pro" badge in its tooltip and opens an upgrade prompt — see each feature's actual behavior in the app).
+ Disable a feature for a tier to gate it for that tier's users. If the feature is still enabled on at least one other tier, it stays visible with a "Pro" upsell (clicking opens an upgrade prompt) — it only disappears entirely once every tier has it off, since at that point there's no upgrade path to point at.
diff --git a/apps/web/components/nutrition/weekly-nutrition-bar.tsx b/apps/web/components/nutrition/weekly-nutrition-bar.tsx
index 9ed824b..5d4a3e6 100644
--- a/apps/web/components/nutrition/weekly-nutrition-bar.tsx
+++ b/apps/web/components/nutrition/weekly-nutrition-bar.tsx
@@ -2,6 +2,8 @@
import { useEffect, useState } from "react";
import { useTranslations } from "next-intl";
+import { UpgradeDialog } from "@/components/premium/upgrade-dialog";
+import { ProBadge } from "@/components/premium/pro-badge";
type NutritionTotals = {
calories: number;
@@ -34,6 +36,9 @@ type NutritionResponse = {
interface WeeklyNutritionBarProps {
weekStart: string;
+ /** Available on some tier but not the viewer's — shows a locked teaser
+ * (with a "Pro" upsell) instead of hiding, and skips fetching totals. */
+ locked?: boolean;
}
type BarItem = {
@@ -45,16 +50,39 @@ type BarItem = {
colorClass: string;
};
-export function WeeklyNutritionBar({ weekStart }: WeeklyNutritionBarProps) {
+export function WeeklyNutritionBar({ weekStart, locked = false }: WeeklyNutritionBarProps) {
const t = useTranslations("mealPlan.nutritionBar");
const [data, setData] = useState(null);
+ const [upgradeOpen, setUpgradeOpen] = useState(false);
useEffect(() => {
+ if (locked) return;
fetch(`/api/v1/meal-plans/${weekStart}/nutrition`)
.then((res) => (res.ok ? res.json() : null))
.then((json) => setData(json))
.catch(() => setData(null));
- }, [weekStart]);
+ }, [weekStart, locked]);
+
+ if (locked) {
+ return (
+ <>
+
+
+
+ );
+ }
if (!data || !data.goals) return null;
diff --git a/apps/web/components/pantry/pantry-page-header.tsx b/apps/web/components/pantry/pantry-page-header.tsx
index a211c90..bc96b5c 100644
--- a/apps/web/components/pantry/pantry-page-header.tsx
+++ b/apps/web/components/pantry/pantry-page-header.tsx
@@ -9,7 +9,15 @@ import { pantryToMarkdown } from "@/lib/markdown/pantry";
type PantryItem = { rawName: string; quantity: string | null; unit: string | null; expiresAt: string | null };
-export function PantryPageHeader({ items, canExportMarkdown = true }: { items: PantryItem[]; canExportMarkdown?: boolean }) {
+export function PantryPageHeader({
+ items,
+ markdownExportAvailable = true,
+ markdownExportLocked = false,
+}: {
+ items: PantryItem[];
+ markdownExportAvailable?: boolean;
+ markdownExportLocked?: boolean;
+}) {
const t = useTranslations("pantry");
const tCommon = useTranslations("common");
return (
@@ -27,7 +35,9 @@ export function PantryPageHeader({ items, canExportMarkdown = true }: { items: P
{tCommon("print")}
- {canExportMarkdown && }
+ {markdownExportAvailable && (
+
+ )}
);
diff --git a/apps/web/components/premium/pro-badge.tsx b/apps/web/components/premium/pro-badge.tsx
new file mode 100644
index 0000000..9317a76
--- /dev/null
+++ b/apps/web/components/premium/pro-badge.tsx
@@ -0,0 +1,12 @@
+import { Badge } from "@/components/ui/badge";
+
+/** Small "Pro" indicator for a feature that's locked for the viewer's tier
+ * but unlockable by upgrading (as opposed to a feature disabled for every
+ * tier, which hides instead of showing this). */
+export function ProBadge({ className }: { className?: string }) {
+ return (
+
+ Pro
+
+ );
+}
diff --git a/apps/web/components/recipe/drink-pairing-button.tsx b/apps/web/components/recipe/drink-pairing-button.tsx
index 32ecb3a..364a27c 100644
--- a/apps/web/components/recipe/drink-pairing-button.tsx
+++ b/apps/web/components/recipe/drink-pairing-button.tsx
@@ -2,7 +2,7 @@
import { useState } from "react";
import { useTranslations } from "next-intl";
-import { Wine, Sparkles, Loader2, Coffee, Beer, GlassWater, Leaf, Lock } from "lucide-react";
+import { Wine, Sparkles, Loader2, Coffee, Beer, GlassWater, Leaf } from "lucide-react";
import { FakeProgressBar } from "@/components/ui/fake-progress-bar";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
@@ -17,6 +17,7 @@ import {
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import { UpgradeDialog } from "@/components/premium/upgrade-dialog";
+import { ProBadge } from "@/components/premium/pro-badge";
type Drink = {
name: string;
@@ -87,12 +88,14 @@ export function DrinkPairingButton({ recipeId, locked = false }: { recipeId: str
+
} />
- {t("drinksTooltip")}
+
+ {t("drinksTooltip")}
+ {locked && }
+
diff --git a/apps/web/components/recipe/meal-pairing-button.tsx b/apps/web/components/recipe/meal-pairing-button.tsx
index 5273a48..51c33da 100644
--- a/apps/web/components/recipe/meal-pairing-button.tsx
+++ b/apps/web/components/recipe/meal-pairing-button.tsx
@@ -4,8 +4,9 @@ import { useState } from "react";
import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import { FakeProgressBar } from "@/components/ui/fake-progress-bar";
-import { UtensilsCrossed, Sparkles, Loader2, ChefHat, Salad, Wine, Cake, Sandwich, Soup, Check, Lock } from "lucide-react";
+import { UtensilsCrossed, Sparkles, Loader2, ChefHat, Salad, Wine, Cake, Sandwich, Soup, Check } from "lucide-react";
import { UpgradeDialog } from "@/components/premium/upgrade-dialog";
+import { ProBadge } from "@/components/premium/pro-badge";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
@@ -152,13 +153,14 @@ export function MealPairingButton({ recipeId, locked = false }: { recipeId: stri
if (pairings.length === 0) suggest();
}}
aria-label={t("pairMealTooltip")}
- className="relative"
>
- {locked && }
} />
- {t("pairMealTooltip")}
+
+ {t("pairMealTooltip")}
+ {locked && }
+
diff --git a/apps/web/components/recipe/nutrition-panel.tsx b/apps/web/components/recipe/nutrition-panel.tsx
index aaadb8b..e21b88a 100644
--- a/apps/web/components/recipe/nutrition-panel.tsx
+++ b/apps/web/components/recipe/nutrition-panel.tsx
@@ -4,6 +4,8 @@ import { useState } from "react";
import { useTranslations } from "next-intl";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
+import { UpgradeDialog } from "@/components/premium/upgrade-dialog";
+import { ProBadge } from "@/components/premium/pro-badge";
type NutritionData = {
perServing: {
@@ -20,20 +22,28 @@ interface NutritionPanelProps {
recipeId: string;
initialData?: NutritionData | null;
initialManual?: boolean;
- /** AI/USDA estimation feature toggled off for this tier — hides the
- * (re-)estimate action. Previously-stored data (manual or a past
- * estimate) still displays; there's just no button to refresh it. */
- estimateEnabled?: boolean;
+ /** AI/USDA estimation disabled for every tier — hides the (re-)estimate
+ * action entirely. Previously-stored data (manual or a past estimate)
+ * still displays; there's just no button to refresh it. */
+ estimateAvailable?: boolean;
+ /** Estimation is available on some tier but not the viewer's — the
+ * action still shows (with a "Pro" upsell) instead of hiding. */
+ estimateLocked?: boolean;
}
-export function NutritionPanel({ recipeId, initialData, initialManual, estimateEnabled = true }: NutritionPanelProps) {
+export function NutritionPanel({ recipeId, initialData, initialManual, estimateAvailable = true, estimateLocked = false }: NutritionPanelProps) {
const t = useTranslations("nutritionPanel");
const [nutrition, setNutrition] = useState(initialData ?? null);
const [manual, setManual] = useState(!!initialManual);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
+ const [upgradeOpen, setUpgradeOpen] = useState(false);
async function handleEstimate() {
+ if (estimateLocked) {
+ setUpgradeOpen(true);
+ return;
+ }
setLoading(true);
setError(null);
try {
@@ -54,13 +64,20 @@ export function NutritionPanel({ recipeId, initialData, initialManual, estimateE
}
if (!nutrition && !loading) {
- if (!estimateEnabled) return null;
+ if (!estimateAvailable) return null;
return (