client revised

src/modules/client/components/LessonUpsellModal.jsx

@@ -1,37 +1,35 @@
 // LessonUpsellModal — shown when a learner clicks a locked standalone Lesson.
-// Mirrors UnitUpsellModal.jsx: unlocks via the lesson's own subscription tier
-// (with an optional direct "Buy" listing) and/or any course reachable through
-// its attached Units (aggregated across all of them, since a Lesson can sit
-// in more than one) plus a generic "View Plans" fallback.
+// Mirrors UnitUpsellModal.jsx: unlocks via any course reachable through its
+// attached Units (aggregated across all of them, since a Lesson can sit in
+// more than one), with an optional direct "Buy" listing if the lesson itself
+// has an active product, plus a generic "View Plans" fallback.
 // Shared by LessonsList and Dashboard.
 
 import { useNavigate } from "react-router-dom";
-import { LockIcon, BookOpen, ShoppingCart, GraduationCap } from "lucide-react";
+import { LockIcon, ShoppingCart, GraduationCap, Check } from "lucide-react";
 import ResponsiveModal from "@/components/generic/ResponsiveModal";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { useDateFormat } from "@/hooks/useDateFormat";
-import { resolveTierBadge } from "@/utils/tierBadge.util";
+import { resolveTierBadge, cheapestTierSlug } from "@/utils/tierBadge.util";
 
 export default function LessonUpsellModal({ open, onOpenChange, lesson, tierMap = {} }) {
   const navigate = useNavigate();
   const { fmtCurrency } = useDateFormat();
   const courses = lesson?.courses ?? [];
-  const ownTier = lesson?.subscription ? resolveTierBadge(lesson.subscription, tierMap) : null;
   const purchasable = lesson?.product?.is_active && !lesson?.has_purchased;
   const awaitingStarterSet = purchasable && lesson?.purchase_eligible === false;
   const canBuy = purchasable && !awaitingStarterSet;
 
+  const slug = cheapestTierSlug([lesson?.subscription, ...courses.map((c) => c.subscription)], tierMap);
+  const { rank, label, cls, panel } = resolveTierBadge(slug, tierMap);
+
   return (
     <ResponsiveModal
       open={open}
       onOpenChange={onOpenChange}
       title={lesson?.title ?? "Lesson Details"}
-      description={
-        ownTier
-          ? "This lesson requires a plan upgrade or individual purchase."
-          : "This lesson is part of one or more courses that require a plan upgrade."
-      }
+      description="Upgrade your plan to access this lesson."
       footer={
         <>
           <Button variant="outline" onClick={() => onOpenChange(false)}>Close</Button>
@@ -46,19 +44,7 @@ export default function LessonUpsellModal({ open, onOpenChange, lesson, tierMap
         </>
       }
     >
-      <div className="space-y-3 py-2">
-        {ownTier && (
-          <div className="flex items-center justify-between gap-3 p-4 rounded-xl border bg-muted/40">
-            <div className="flex items-center gap-2.5 min-w-0">
-              <LockIcon className="size-4 text-muted-foreground shrink-0" />
-              <div className="min-w-0">
-                <p className="text-sm font-medium">Requires</p>
-                <Badge className={`${ownTier.cls} mt-1`}>{ownTier.label}</Badge>
-              </div>
-            </div>
-          </div>
-        )}
-
+      <div className="space-y-6 py-2">
         {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" />
@@ -68,38 +54,21 @@ export default function LessonUpsellModal({ open, onOpenChange, lesson, tierMap
           </div>
         )}
 
-        {courses.length === 0 && !ownTier ? (
-          <p className="text-sm text-muted-foreground">
-            Upgrade your plan to access this content.
-          </p>
-        ) : (
-          courses.map((course) => {
-            const { label, cls } = resolveTierBadge(course.subscription, tierMap);
-            return (
-              <div
-                key={course.course_id}
-                className="flex items-center justify-between gap-3 p-4 rounded-xl border bg-muted/40"
-              >
-                <div className="flex items-center gap-2.5 min-w-0">
-                  <BookOpen className="size-4 text-muted-foreground shrink-0" />
-                  <div className="min-w-0">
-                    <p className="text-sm font-medium truncate">{course.title}</p>
-                    <Badge className={`${cls} mt-1`}>
-                      <LockIcon className="size-3" /> {label}
-                    </Badge>
-                  </div>
-                </div>
-                <Button
-                  size="sm"
-                  variant="outline"
-                  className="shrink-0"
-                  onClick={() => { onOpenChange(false); navigate(`/course/${course.course_id}`); }}
-                >
-                  View Course
-                </Button>
-              </div>
-            );
-          })
+        {rank > 0 && (
+          <div className={`p-5 rounded-2xl border ${panel.bg} ${panel.border}`}>
+            <div className="flex items-center gap-3 mb-3">
+              <Badge className={cls}>
+                <LockIcon className="size-3" /> {label}
+              </Badge>
+            </div>
+            <ul className="space-y-2 text-sm [&_svg]:size-4 mb-4">
+              <li className="flex items-center gap-2"><Check /> Access to {label} content</li>
+              <li className="flex items-center gap-2"><Check /> Certificates & achievements</li>
+            </ul>
+            <p className="text-sm text-muted-foreground">
+              Upgrade to a <span className="font-medium">{label}</span> plan to unlock this lesson.
+            </p>
+          </div>
         )}
       </div>
     </ResponsiveModal>