add: ver()

Signed-off-by: Kenneth Obsequio <k80308392@gmail.com>
2026-09-27 00:12:54 +08:00 · 2026-07-08 11:31:54 +08:00
parent 6624c0d27f
commit 182bd93d10
46 changed files with 4407 additions and 98 deletions
@@ -0,0 +1,70 @@
+// 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.
+
+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 UnitUpsellModal({ open, onOpenChange, unit, tierMap = {} }) {
+  const navigate = useNavigate();
+  const courses = unit?.courses ?? [];
+
+  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."
+      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>
+  );
+}