debug: assets picker

Signed-off-by: rgrgogu <obsequio.rus@gmail.com>

src/modules/client/components/CourseUpsellModal.jsx

@@ -0,0 +1,65 @@
+// CourseUpsellModal — shown when a learner reaches a locked Course's primary
+// action button (Proceed/Start Learning). Offers plan upgrade, or buying the
+// course individually when it has an active product. Shared by CourseList,
+// Dashboard, and CourseDetails.
+
+import { useNavigate } from "react-router-dom";
+import { LockIcon, Check, ShoppingCart } from "lucide-react";
+import ResponsiveModal from "@/components/generic/ResponsiveModal";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { resolveTierBadge } from "@/utils/tierBadge.util";
+import { useDateFormat } from "@/hooks/useDateFormat";
+
+export default function CourseUpsellModal({ open, onOpenChange, course, tierMap = {} }) {
+  const navigate = useNavigate();
+  const { fmtCurrency } = useDateFormat();
+
+  const slug = course?.subscription ?? "free";
+  const { rank, label, cls, panel } = resolveTierBadge(slug, tierMap);
+
+  return (
+    <ResponsiveModal
+      open={open}
+      onOpenChange={onOpenChange}
+      title={course?.title ?? "Course Details"}
+      description={course?.product ? "Purchase this course or upgrade your plan." : "Upgrade your plan to access this course."}
+      footer={
+        <>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>Close</Button>
+          {course?.product?.is_active && (
+            <Button
+              variant="outline"
+              onClick={() => { onOpenChange(false); navigate(`/course/${course.course_id}/checkout`); }}
+            >
+              <ShoppingCart className="size-4" />
+              Buy {fmtCurrency(course.product.price ?? 0, course.product.currency ?? "USD")}
+            </Button>
+          )}
+          <Button onClick={() => { onOpenChange(false); navigate("/subscriptions"); }}>
+            <LockIcon /> View Plans
+          </Button>
+        </>
+      }
+    >
+      <div className="space-y-6 py-2">
+        {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 course.
+            </p>
+          </div>
+        )}
+      </div>
+    </ResponsiveModal>
+  );
+}

src/modules/client/components/LessonUpsellModal.jsx

@@ -27,7 +27,7 @@ export default function LessonUpsellModal({ open, onOpenChange, lesson, tierMap
       footer={
         <>
           <Button variant="outline" onClick={() => onOpenChange(false)}>Close</Button>
-          <Button onClick={() => { onOpenChange(false); navigate("/plans"); }}>
+          <Button onClick={() => { onOpenChange(false); navigate("/subscriptions"); }}>
             <LockIcon /> View Plans
           </Button>
         </>

src/modules/client/components/LockedContentPanel.jsx

@@ -36,7 +36,7 @@ export default function LockedContentPanel({ course, item, tierMap = {} }) {
       </div>
       <div className="flex flex-col items-center gap-2">
         <div className="flex items-center gap-2">
-          <Button onClick={() => navigate('/plans')} className="gap-1.5">
+          <Button onClick={() => navigate('/subscriptions')} className="gap-1.5">
             <Zap className="size-4" /> View Available Plans
           </Button>
         </div>

src/modules/client/components/UnitUpsellModal.jsx

@@ -25,7 +25,7 @@ export default function UnitUpsellModal({ open, onOpenChange, unit, tierMap = {}
       footer={
         <>
           <Button variant="outline" onClick={() => onOpenChange(false)}>Close</Button>
-          <Button onClick={() => { onOpenChange(false); navigate("/plans"); }}>
+          <Button onClick={() => { onOpenChange(false); navigate("/subscriptions"); }}>
             <LockIcon /> View Plans
           </Button>
         </>

src/modules/client/components/blocks/ReadCourse.jsx

@@ -99,7 +99,7 @@ const ReadCourse = ({ title = "Read Course", courses = [], groupId, taskListId,
               To complete this activity, subscribe to one of our available tier plans.
             </p>
           </div>
-          <Button size="sm" variant="outline" className="shrink-0 border-amber-300 dark:border-amber-700 text-amber-800 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-amber-900/40" onClick={() => navigate('/plans')}>
+          <Button size="sm" variant="outline" className="shrink-0 border-amber-300 dark:border-amber-700 text-amber-800 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-amber-900/40" onClick={() => navigate('/subscriptions')}>
             <Zap className="size-3.5" /> View Plans
           </Button>
         </div>
@@ -125,7 +125,7 @@ const ReadCourse = ({ title = "Read Course", courses = [], groupId, taskListId,
               return (
                 <div
                   key={course.id}
-                  onClick={() => navigate('/plans')}
+                  onClick={() => navigate('/subscriptions')}
                   className="bg-card rounded-2xl border border-dashed p-4 flex flex-col gap-3 hover:bg-muted/60 hover:shadow-sm transition-all cursor-pointer group w-96 shrink-0 opacity-80"
                 >
                   <div className="flex items-center gap-1.5">
@@ -144,7 +144,7 @@ const ReadCourse = ({ title = "Read Course", courses = [], groupId, taskListId,
                     </p>
                   </div>
                   <div className="mt-auto">
-                    <Button size="sm" className="w-full gap-1.5" onClick={(e) => { e.stopPropagation(); navigate('/plans'); }}>
+                    <Button size="sm" className="w-full gap-1.5" onClick={(e) => { e.stopPropagation(); navigate('/subscriptions'); }}>
                       <Zap className="size-3.5" /> Upgrade to unlock
                     </Button>
                   </div>

src/modules/client/components/blocks/ReadLesson.jsx

@@ -69,7 +69,7 @@ const ReadLesson = ({ title = "Read Lessons", lessons = [], groupId, taskListId,
                             To complete this activity, subscribe to one of our available tier plans.
                         </p>
                     </div>
-                    <Button size="sm" variant="outline" className="shrink-0 border-amber-300 dark:border-amber-700 text-amber-800 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-amber-900/40" onClick={() => navigate('/plans')}>
+                    <Button size="sm" variant="outline" className="shrink-0 border-amber-300 dark:border-amber-700 text-amber-800 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-amber-900/40" onClick={() => navigate('/subscriptions')}>
                         <Zap className="size-3.5" /> View Plans
                     </Button>
                 </div>
@@ -93,7 +93,7 @@ const ReadLesson = ({ title = "Read Lessons", lessons = [], groupId, taskListId,
                             return (
                                 <div
                                     key={lesson.id}
-                                    onClick={() => navigate('/plans')}
+                                    onClick={() => navigate('/subscriptions')}
                                     className="bg-card rounded-2xl border border-dashed p-4 flex flex-col gap-3 hover:bg-muted/60 hover:shadow-sm transition-all cursor-pointer group w-96 shrink-0 opacity-80"
                                 >
                                     <div className="flex items-center gap-1.5">
@@ -117,7 +117,7 @@ const ReadLesson = ({ title = "Read Lessons", lessons = [], groupId, taskListId,
                                         </p>
                                     </div>
                                     <div className="mt-auto">
-                                        <Button size="sm" className="w-full gap-1.5" onClick={(e) => { e.stopPropagation(); navigate('/plans'); }}>
+                                        <Button size="sm" className="w-full gap-1.5" onClick={(e) => { e.stopPropagation(); navigate('/subscriptions'); }}>
                                             <Zap className="size-3.5" /> Upgrade to unlock
                                         </Button>
                                     </div>

src/modules/client/components/blocks/ReadUnit.jsx

@@ -87,7 +87,7 @@ const ReadUnit = ({ title = "Read Units", units = [], groupId, taskListId, taskI
                                 To complete this activity, subscribe to one of our available tier plans.
                             </p>
                         </div>
-                        <Button size="sm" variant="outline" className="shrink-0 border-amber-300 dark:border-amber-700 text-amber-800 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-amber-900/40" onClick={() => navigate('/plans')}>
+                        <Button size="sm" variant="outline" className="shrink-0 border-amber-300 dark:border-amber-700 text-amber-800 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-amber-900/40" onClick={() => navigate('/subscriptions')}>
                             <Zap className="size-3.5" /> View Plans
                         </Button>
                     </div>
@@ -112,7 +112,7 @@ const ReadUnit = ({ title = "Read Units", units = [], groupId, taskListId, taskI
                                 return (
                                     <div
                                         key={unit.id}
-                                        onClick={() => navigate('/plans')}
+                                        onClick={() => navigate('/subscriptions')}
                                         className="bg-card rounded-2xl border border-dashed p-4 flex flex-col gap-3 hover:bg-muted/60 hover:shadow-sm transition-all cursor-pointer group w-96 shrink-0 opacity-80"
                                     >
                                         <div className="flex items-center gap-1.5">
@@ -136,7 +136,7 @@ const ReadUnit = ({ title = "Read Units", units = [], groupId, taskListId, taskI
                                             </p>
                                         </div>
                                         <div className="mt-auto">
-                                            <Button size="sm" className="w-full gap-1.5" onClick={(e) => { e.stopPropagation(); navigate('/plans'); }}>
+                                            <Button size="sm" className="w-full gap-1.5" onClick={(e) => { e.stopPropagation(); navigate('/subscriptions'); }}>
                                                 <Zap className="size-3.5" /> Upgrade to unlock
                                             </Button>
                                         </div>