assets and tier plans revamp

src/modules/client/components/LessonUpsellModal.jsx

@@ -1,37 +1,63 @@
 // LessonUpsellModal — shown when a learner clicks a locked standalone Lesson.
-// Mirrors UnitUpsellModal.jsx: a Lesson isn't independently purchasable, so this
-// lists every course that would unlock it (aggregated across all its attached
-// Units, since a Lesson can sit in more than one) plus a generic "View Plans"
-// fallback. Shared by LessonsList and Dashboard.
+// 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.
+// Shared by LessonsList and Dashboard.
 
 import { useNavigate } from "react-router-dom";
-import { LockIcon, BookOpen } from "lucide-react";
+import { LockIcon, BookOpen, ShoppingCart } 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";
 
 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 canBuy = lesson?.product?.is_active && !lesson?.has_purchased;
 
   return (
     <ResponsiveModal
       open={open}
       onOpenChange={onOpenChange}
       title={lesson?.title ?? "Lesson Details"}
-      description="This lesson is part of one or more courses that require a plan upgrade."
+      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."
+      }
       footer={
         <>
           <Button variant="outline" onClick={() => onOpenChange(false)}>Close</Button>
-          <Button onClick={() => { onOpenChange(false); navigate("/plans"); }}>
+          {canBuy && (
+            <Button onClick={() => { onOpenChange(false); navigate(`/lessons/${lesson.uuid}/checkout`); }}>
+              <ShoppingCart /> Buy {fmtCurrency(lesson.product.price ?? 0, lesson.product.currency ?? "USD")}
+            </Button>
+          )}
+          <Button variant={canBuy ? "outline" : "default"} onClick={() => { onOpenChange(false); navigate("/plans"); }}>
             <LockIcon /> View Plans
           </Button>
         </>
       }
     >
       <div className="space-y-3 py-2">
-        {courses.length === 0 ? (
+        {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>
+        )}
+
+        {courses.length === 0 && !ownTier ? (
           <p className="text-sm text-muted-foreground">
             Upgrade your plan to access this content.
           </p>