units,lesson as standalone

2026-09-27 00:12:54 +08:00 · 2026-07-10 11:45:02 +08:00
parent 182bd93d10
commit 01a2c63b06
60 changed files with 3217 additions and 606 deletions
@@ -0,0 +1,70 @@
+// 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.
+
+import { useNavigate } from "react-router-dom";
+import { LockIcon, BookOpen } 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";
+
+export default function LessonUpsellModal({ open, onOpenChange, lesson, tierMap = {} }) {
+  const navigate = useNavigate();
+  const courses = lesson?.courses ?? [];
+
+  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."
+      footer={
+        <>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>Close</Button>
+          <Button onClick={() => { onOpenChange(false); navigate("/plans"); }}>
+            <LockIcon /> View Plans
+          </Button>
+        </>
+      }
+    >
+      <div className="space-y-3 py-2">
+        {courses.length === 0 ? (
+          <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>
+            );
+          })
+        )}
+      </div>
+    </ResponsiveModal>
+  );
+}