tier plans missing

src/modules/client/components/LessonUpsellModal.jsx

@@ -6,7 +6,7 @@
 // Shared by LessonsList and Dashboard.
 
 import { useNavigate } from "react-router-dom";
-import { LockIcon, BookOpen, ShoppingCart } from "lucide-react";
+import { LockIcon, BookOpen, ShoppingCart, GraduationCap } from "lucide-react";
 import ResponsiveModal from "@/components/generic/ResponsiveModal";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -18,7 +18,9 @@ export default function LessonUpsellModal({ open, onOpenChange, lesson, tierMap
   const { fmtCurrency } = useDateFormat();
   const courses = lesson?.courses ?? [];
   const ownTier = lesson?.subscription ? resolveTierBadge(lesson.subscription, tierMap) : null;
-  const canBuy = lesson?.product?.is_active && !lesson?.has_purchased;
+  const purchasable = lesson?.product?.is_active && !lesson?.has_purchased;
+  const awaitingStarterSet = purchasable && lesson?.purchase_eligible === false;
+  const canBuy = purchasable && !awaitingStarterSet;
 
   return (
     <ResponsiveModal
@@ -57,6 +59,15 @@ export default function LessonUpsellModal({ open, onOpenChange, lesson, tierMap
           </div>
         )}
 
+        {awaitingStarterSet && (
+          <div className="flex items-center gap-2.5 p-4 rounded-xl border border-amber-300 bg-amber-50 dark:border-amber-700 dark:bg-amber-950/40">
+            <GraduationCap className="size-4 text-amber-700 dark:text-amber-400 shrink-0" />
+            <p className="text-sm text-amber-800 dark:text-amber-300">
+              Complete your plan's starter content to unlock individual purchases like this one.
+            </p>
+          </div>
+        )}
+
         {courses.length === 0 && !ownTier ? (
           <p className="text-sm text-muted-foreground">
             Upgrade your plan to access this content.