assets and tier plans revamp

src/modules/client/components/UnitUpsellModal.jsx

@@ -1,37 +1,63 @@
 // UnitUpsellModal — shown when a learner clicks a locked standalone Unit.
-// Units aren't independently purchasable (no Product row keyed to unit_id, only
-// to course_id), so unlike CourseCard's single "Buy $X" button, this lists every
-// course the unit is attached to so the learner can pick one to view/buy, plus a
-// generic "View Plans" fallback. Shared by UnitsList, UnitDetails, and Dashboard.
+// Unlocks two ways: the unit's own subscription tier (with an optional direct
+// "Buy" listing, same PayPal flow as Courses) and/or any course it's attached
+// to (a unit may sit under several courses at different tiers — no single
+// "Buy" in that case, just links to view/buy the course itself).
+// Shared by UnitsList, UnitDetails, 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 UnitUpsellModal({ open, onOpenChange, unit, tierMap = {} }) {
   const navigate = useNavigate();
+  const { fmtCurrency } = useDateFormat();
   const courses = unit?.courses ?? [];
+  const ownTier = unit?.subscription ? resolveTierBadge(unit.subscription, tierMap) : null;
+  const canBuy = unit?.product?.is_active && !unit?.has_purchased;
 
   return (
     <ResponsiveModal
       open={open}
       onOpenChange={onOpenChange}
       title={unit?.title ?? "Unit Details"}
-      description="This unit is part of one or more courses that require a plan upgrade."
+      description={
+        ownTier
+          ? "This unit requires a plan upgrade or individual purchase."
+          : "This unit 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(`/units/${unit.uuid}/checkout`); }}>
+              <ShoppingCart /> Buy {fmtCurrency(unit.product.price ?? 0, unit.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>