mirror of
https://github.com/rgrgogu/new_starr.git
synced 2026-09-27 00:12:54 +08:00
724 lines
37 KiB
React
724 lines
37 KiB
React
import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
|
|
import { useDateFormat } from "@/hooks/useDateFormat";
|
|
import { useParams, useNavigate } from "react-router-dom";
|
|
import api from "@/utils/api.util";
|
|
import {
|
|
House, Timer, Layers, GitBranch, Medal, CircleStar, LockIcon,
|
|
SendHorizonal, CheckCheck, CheckCircle2, Clock, FileQuestion, ClipboardList,
|
|
} from "lucide-react";
|
|
import CourseBadge from "@/modules/admin/components/courses/CourseBadge";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import { useRef, useEffect, useState } from "react";
|
|
import { useScrollTrigger } from "../hooks/ScrollTrigger";
|
|
import {
|
|
Accordion, AccordionContent, AccordionItem, AccordionTrigger,
|
|
} from "@/components/ui/accordion";
|
|
import {
|
|
Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription,
|
|
} from "@/components/ui/dialog";
|
|
import { useClientCourses } from "@/contexts/ClientCoursesContext";
|
|
import { useClientTiers } from "@/contexts/ClientTiersProvider";
|
|
import { useCourseReadingProgress } from "@/contexts/ClientCourseReadingProgressContext";
|
|
import { PageMeta } from "@/contexts/MetadataContext";
|
|
import { toast } from "sonner";
|
|
import { resolveTierBadge } from "@/utils/tierBadge.util";
|
|
import { useClientAdvertisements } from "@/contexts/ClientAdvertisementContext";
|
|
import { Banner, BannerSkeleton } from "@/components/generic/Blocks/Client/Advertisements/Banner";
|
|
import { Sidebar, SidebarSkeleton } from "@/components/generic/Blocks/Client/Advertisements/Sidebar";
|
|
|
|
// ─── Helpers ──────────────────────────────────────────────────────────────────
|
|
|
|
function formatDuration(seconds = 0) {
|
|
if (!seconds) return null;
|
|
const h = Math.floor(seconds / 3600);
|
|
const m = Math.floor((seconds % 3600) / 60);
|
|
if (h > 0) return `${h}hr ${m}min`;
|
|
return `${m}min`;
|
|
}
|
|
|
|
|
|
// ─── Spine / card helpers ──────────────────────────────────────────────────────
|
|
|
|
const INTRO_HEIGHT = 50;
|
|
const CX = 0;
|
|
|
|
const useVisibleNodes = (refs, count) => {
|
|
const [visible, setVisible] = useState(new Set());
|
|
useEffect(() => {
|
|
setVisible(new Set());
|
|
const observers = [];
|
|
const id = setTimeout(() => {
|
|
refs.current.forEach((el, i) => {
|
|
if (!el) return;
|
|
const obs = new IntersectionObserver(
|
|
([entry]) => {
|
|
setVisible((prev) => {
|
|
const next = new Set(prev);
|
|
if (entry.isIntersecting) next.add(i);
|
|
return next;
|
|
});
|
|
},
|
|
{ threshold: 0.2 }
|
|
);
|
|
obs.observe(el);
|
|
observers.push(obs);
|
|
});
|
|
}, 50);
|
|
return () => { clearTimeout(id); observers.forEach((o) => o.disconnect()); };
|
|
}, [count]);
|
|
return visible;
|
|
};
|
|
|
|
// ─── Unit Accordion Block ─────────────────────────────────────────────────────
|
|
|
|
const UnitAccordionBlock = ({ unit, unitIndex, i, cardRefs, courseId, onToggle, isCompleted }) => {
|
|
const navigate = useNavigate();
|
|
const quiz = unit.quiz ?? null;
|
|
|
|
return (
|
|
<motion.div
|
|
ref={(el) => (cardRefs.current[i] = el)}
|
|
className="group rounded-xl border bg-card hover:bg-blue-400/10 hover:shadow-md hover:border-blue-400 transition-all"
|
|
initial={{ opacity: 0, y: 14 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.35, delay: i * 0.05, ease: "easeOut" }}
|
|
>
|
|
<Accordion
|
|
type="single"
|
|
collapsible
|
|
defaultValue={`unit-${unit.unit_id}`}
|
|
onValueChange={() => setTimeout(onToggle, 250)}
|
|
>
|
|
<AccordionItem value={`unit-${unit.unit_id}`} className="border-none">
|
|
<AccordionTrigger className="px-4 py-4 hover:no-underline">
|
|
<div className="flex flex-col items-start gap-3 w-full">
|
|
<div className="flex items-center justify-between w-full">
|
|
<span className="text-sm font-semibold uppercase tracking-widest text-muted-foreground">
|
|
Unit {unitIndex + 1}
|
|
</span>
|
|
</div>
|
|
<h1 className="text-2xl font-bold text-card-foreground group-hover:text-blue-600 dark:group-hover:text-blue-400">
|
|
{unit.title}
|
|
</h1>
|
|
<div className="[&_svg]:size-4 text-md text-muted-foreground flex items-center gap-4">
|
|
{unit.lessons?.length > 0 && (
|
|
<div className="flex items-center gap-1.5">
|
|
<Layers /> {unit.lessons.length} {unit.lessons.length === 1 ? "Lesson" : "Lessons"}
|
|
</div>
|
|
)}
|
|
{unit.duration_seconds > 0 && (
|
|
<div className="flex items-center gap-1.5">
|
|
<Timer /> {formatDuration(unit.duration_seconds)}
|
|
</div>
|
|
)}
|
|
{quiz && (
|
|
<div className="flex items-center gap-1.5">
|
|
<FileQuestion /> Quiz
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</AccordionTrigger>
|
|
<AccordionContent className="px-1.5 h-full">
|
|
<div className="flex flex-col gap-1 pt-0">
|
|
{(unit.lessons ?? []).map((lesson) => (
|
|
<div
|
|
key={lesson.lesson_id}
|
|
className="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-slate-200 dark:hover:bg-blue-500 transition-colors cursor-pointer"
|
|
onClick={() => navigate(`/course/${courseId}/unit`, { state: { lessonId: lesson.lesson_id, unitId: unit.unit_id } })}
|
|
>
|
|
<div className="flex items-center gap-3 select-none">
|
|
{isCompleted(lesson.uuid)
|
|
? <CheckCircle2 className="size-4 text-emerald-500 shrink-0" />
|
|
: <div className="w-4 h-4 rounded-full border border-muted-foreground/40 flex items-center justify-center flex-shrink-0" />
|
|
}
|
|
<span className="text-md text-card-foreground">{lesson.title}</span>
|
|
</div>
|
|
{lesson.duration_seconds > 0 && (
|
|
<span className="text-sm">{formatDuration(lesson.duration_seconds)}</span>
|
|
)}
|
|
</div>
|
|
))}
|
|
|
|
{/* Quiz row — shown after lessons if unit has a quiz */}
|
|
{quiz && (
|
|
<div
|
|
className="flex items-center justify-between py-2 px-3 mt-1 rounded-lg border border-dashed border-blue-300 dark:border-blue-700 bg-blue-50/60 dark:bg-blue-950/30 hover:bg-blue-100 dark:hover:bg-blue-900/40 transition-colors cursor-pointer"
|
|
onClick={() => navigate(`/course/${courseId}/unit`, { state: { quizUnitId: unit.unit_id } })}
|
|
>
|
|
<div className="flex items-center gap-3 select-none">
|
|
{quiz.has_passed
|
|
? <CheckCircle2 className="size-4 text-emerald-500 shrink-0" />
|
|
: <FileQuestion className="size-4 text-blue-500 shrink-0" />
|
|
}
|
|
<span className="text-sm font-medium text-blue-700 dark:text-blue-300">{quiz.title}</span>
|
|
</div>
|
|
<Badge className={quiz.has_passed
|
|
? "bg-green-100 text-green-700 border border-green-400 dark:bg-green-900/40 dark:text-green-400 dark:border-green-700 text-[10px]"
|
|
: "bg-blue-100 text-blue-700 border border-blue-300 dark:bg-blue-900/40 dark:text-blue-400 dark:border-blue-700 text-[10px]"
|
|
}>
|
|
{quiz.has_passed ? "Passed" : "Quiz"}
|
|
</Badge>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
// ─── Assessment Card ──────────────────────────────────────────────────────────
|
|
|
|
const AssessmentCard = ({ assessment, courseId, delay, nodeRef }) => {
|
|
const navigate = useNavigate();
|
|
const passed = assessment.has_passed;
|
|
|
|
return (
|
|
<motion.div
|
|
ref={nodeRef}
|
|
className="w-full rounded-2xl border bg-card p-5 flex flex-col gap-3 shadow-sm"
|
|
initial={{ opacity: 0, y: 14 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.35, delay, ease: "easeOut" }}
|
|
>
|
|
<div className="flex items-center w-full justify-between">
|
|
<div className="flex items-center gap-2.5">
|
|
<div className="h-9 w-9 rounded-lg bg-violet-100 dark:bg-violet-900/40 flex items-center justify-center shrink-0">
|
|
<ClipboardList className="h-4.5 w-4.5 text-violet-600 dark:text-violet-400" />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<p className="text-[10px] uppercase tracking-widest text-muted-foreground font-semibold">Final Assessment</p>
|
|
<p className="text-sm font-semibold leading-tight truncate">{assessment.title}</p>
|
|
</div>
|
|
</div>
|
|
{(() => {
|
|
const count = assessment.max_questions ?? assessment.question_count;
|
|
if (!count) return null;
|
|
return (
|
|
<div className="text-sm text-muted-foreground shrink-0">
|
|
{count} {count === 1 ? "question" : "questions"}
|
|
</div>
|
|
);
|
|
})()}
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
{passed ? (
|
|
<Badge className="bg-green-100 text-green-700 border border-green-400 dark:bg-green-900/40 dark:text-green-400 dark:border-green-700 gap-1">
|
|
<CheckCircle2 className="size-3" /> Passed
|
|
</Badge>
|
|
) : (
|
|
<Badge className="bg-muted text-muted-foreground border gap-1">
|
|
<Clock className="size-3" /> Not yet passed
|
|
</Badge>
|
|
)}
|
|
<Button
|
|
type="button"
|
|
size="sm"
|
|
variant={passed ? "outline" : "default"}
|
|
className="h-7 text-xs"
|
|
onClick={() => navigate(`/course/${courseId}/unit`, { state: { seekAssessment: true } })}
|
|
>
|
|
{passed ? "Review" : "Take Assessment"}
|
|
</Button>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
// ─── Certificate Card ─────────────────────────────────────────────────────────
|
|
|
|
const CertCard = ({ courseTitle, courseLevel, badgeColor, badgeImageUrl, pendingCert, certificate, delay, nodeRef }) => {
|
|
const { fmtDate } = useDateFormat();
|
|
const isIssued = !!certificate;
|
|
const isPending = !isIssued && !!pendingCert;
|
|
|
|
let issuedLabel = "Upon completion";
|
|
if (isIssued) issuedLabel = fmtDate(certificate.issued_at);
|
|
if (isPending) issuedLabel = fmtDate(pendingCert.issue_at);
|
|
|
|
return (
|
|
<Dialog>
|
|
<motion.div
|
|
ref={nodeRef}
|
|
className="w-[320px] rounded-2xl border bg-card p-6 flex flex-col items-center gap-4 shadow-sm"
|
|
initial={{ opacity: 0, y: 14 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.35, delay, ease: "easeOut" }}
|
|
>
|
|
<CourseBadge
|
|
title={courseTitle}
|
|
level={courseLevel}
|
|
color={badgeColor ?? "purple"}
|
|
imageUrl={badgeImageUrl}
|
|
/>
|
|
|
|
<div className="w-full flex items-end justify-between">
|
|
<div>
|
|
<p className="text-[10px] uppercase tracking-widest text-muted-foreground font-semibold">
|
|
{isIssued ? "Issued" : "Available"}
|
|
</p>
|
|
<p className="text-sm text-foreground mt-0.5">{issuedLabel}</p>
|
|
</div>
|
|
|
|
{isIssued ? (
|
|
<DialogTrigger asChild>
|
|
<Badge className="bg-green-100 text-green-700 border border-green-400 dark:bg-green-900/40 dark:text-green-400 dark:border-green-700 gap-1 cursor-pointer">
|
|
<CheckCircle2 className="size-3" /> Issued
|
|
</Badge>
|
|
</DialogTrigger>
|
|
) : isPending ? (
|
|
<DialogTrigger asChild>
|
|
<Badge className="bg-amber-100 text-amber-700 border border-amber-400 dark:bg-amber-900/40 dark:text-amber-400 dark:border-amber-700 gap-1 cursor-pointer">
|
|
<Clock className="size-3" /> Pending
|
|
</Badge>
|
|
</DialogTrigger>
|
|
) : (
|
|
<DialogTrigger asChild>
|
|
<Badge className="bg-muted text-muted-foreground border gap-1 cursor-pointer">
|
|
<Clock className="size-3" /> Not yet earned
|
|
</Badge>
|
|
</DialogTrigger>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
|
|
<DialogContent className="sm:max-w-sm">
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-2">
|
|
{isIssued
|
|
? <CheckCircle2 className="size-4 text-green-500" />
|
|
: <Clock className="size-4 text-muted-foreground" />}
|
|
{isIssued ? "Certificate Issued" : isPending ? "Certificate Pending" : "Certificate"}
|
|
</DialogTitle>
|
|
<DialogDescription asChild>
|
|
<div className="space-y-3 pt-1 text-sm text-muted-foreground">
|
|
{isIssued ? (
|
|
<>
|
|
<p>
|
|
Your certificate for this course was officially issued on{" "}
|
|
<span className="font-medium text-foreground">{fmtDate(certificate.issued_at)}</span>.
|
|
</p>
|
|
<div className="rounded-lg border bg-muted px-4 py-3">
|
|
<p className="text-sm font-semibold text-foreground">{courseTitle}</p>
|
|
</div>
|
|
<p>
|
|
You can view and download it from your <span className="font-medium text-foreground">Certificates</span> page.
|
|
</p>
|
|
</>
|
|
) : isPending ? (
|
|
<>
|
|
<p>
|
|
You passed the course assessment on{" "}
|
|
<span className="font-medium text-foreground">{fmtDate(pendingCert.passed_at)}</span>.
|
|
Your certificate is being processed and will be officially issued on:
|
|
</p>
|
|
<div className="rounded-lg border bg-muted px-4 py-3 text-center">
|
|
<p className="text-base font-semibold text-foreground">{fmtDate(pendingCert.issue_at)}</p>
|
|
</div>
|
|
<p>
|
|
Once issued, it will appear in your <span className="font-medium text-foreground">Certificates</span> page.
|
|
</p>
|
|
</>
|
|
) : (
|
|
<>
|
|
<p>
|
|
Complete all lessons and pass the course assessment to earn your certificate for:
|
|
</p>
|
|
<div className="rounded-lg border bg-muted px-4 py-3">
|
|
<p className="text-sm font-semibold text-foreground">{courseTitle}</p>
|
|
</div>
|
|
<p>
|
|
Your certificate will be issued within <span className="font-medium text-foreground">the hour</span> after passing and will appear in your <span className="font-medium text-foreground">Certificates</span> page.
|
|
</p>
|
|
</>
|
|
)}
|
|
</div>
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
// ─── Course Units (spine + cards) ─────────────────────────────────────────────
|
|
|
|
const CourseUnits = ({ units = [], courseId, courseTitle, courseLevel, badgeColor, badgeImageUrl, onToggle, isCompleted, pendingCert, certificate, assessment }) => {
|
|
const wrapRef = useRef(null);
|
|
const cardRefs = useRef([]);
|
|
|
|
// Build a flat ordered list of nodes: [unit, unit, ..., assessment?, cert]
|
|
// Quiz is rendered inside each unit accordion, not as a separate spine node.
|
|
const nodes = [
|
|
...units.map((unit) => ({ type: "unit", unit })),
|
|
...(assessment ? [{ type: "assessment", assessment }] : []),
|
|
{ type: "cert" },
|
|
];
|
|
const totalNodes = nodes.length;
|
|
const visibleNodes = useVisibleNodes(cardRefs, totalNodes);
|
|
const [mids, setMids] = useState([]);
|
|
const maxVisible = visibleNodes.size ? Math.max(...visibleNodes) : -1;
|
|
|
|
const measure = () => {
|
|
if (!wrapRef.current) return;
|
|
const base = wrapRef.current.getBoundingClientRect().top;
|
|
setMids(
|
|
cardRefs.current.map((el) => {
|
|
const r = el?.getBoundingClientRect();
|
|
return r ? Math.round((r.top + r.bottom) / 2 - base) : 0;
|
|
})
|
|
);
|
|
};
|
|
|
|
useEffect(() => {
|
|
const id = setTimeout(measure, 60);
|
|
window.addEventListener("resize", measure);
|
|
return () => { clearTimeout(id); window.removeEventListener("resize", measure); };
|
|
}, [totalNodes]);
|
|
|
|
const lastMid = mids.length ? mids[mids.length - 1] : 0;
|
|
const svgH = lastMid + 40;
|
|
const drawnTo = maxVisible >= 0 && mids[maxVisible] ? mids[maxVisible] : 0;
|
|
|
|
return (
|
|
<div ref={wrapRef} className="flex gap-5 px-4">
|
|
{/* Spine */}
|
|
<div className="relative flex-shrink-0 w-4" style={{ height: svgH }}>
|
|
{mids.length > 0 && (
|
|
<svg
|
|
className="absolute top-0 left-0 overflow-visible xs:hidden lg:block"
|
|
width={12}
|
|
height={svgH}
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<line x1={CX} y1={0} x2={CX} y2={svgH} stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" opacity={0.08} />
|
|
{Array.from({ length: 10 }).map((_, i) => {
|
|
const y1 = (mids[0] / 10) * i;
|
|
const y2 = (mids[0] / 10) * (i + 1);
|
|
const revealed = drawnTo >= y2;
|
|
return (
|
|
<motion.line
|
|
key={`intro-${i}`}
|
|
x1={CX} y1={y1} x2={CX} y2={y2}
|
|
stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"
|
|
animate={{ opacity: revealed ? (i + 1) / 10 : 0 }}
|
|
transition={{ duration: 0.4, ease: "easeOut" }}
|
|
/>
|
|
);
|
|
})}
|
|
{mids[0] != null && drawnTo > mids[0] && (
|
|
<motion.line
|
|
x1={CX} y1={mids[0]} x2={CX} y2={drawnTo}
|
|
stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"
|
|
initial={{ opacity: 0 }} animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.3 }}
|
|
/>
|
|
)}
|
|
{mids.map((mid, i) => {
|
|
const visible = visibleNodes.has(i);
|
|
// Last node (certificate) gets a gold fill
|
|
const isCert = i === totalNodes - 1;
|
|
return (
|
|
<g key={`node-${i}`}>
|
|
<motion.circle
|
|
cx={CX} cy={mid} r={isCert ? 7 : 5}
|
|
fill={isCert ? "#D4A017" : "currentColor"}
|
|
stroke={isCert ? "#D4A017" : "currentColor"}
|
|
strokeWidth="1.5"
|
|
initial={{ opacity: 0, scale: 0 }}
|
|
animate={{ opacity: visible ? 1 : 0, scale: visible ? 1 : 0 }}
|
|
transition={{ type: "spring", stiffness: 400, damping: 18, delay: 0.05 }}
|
|
style={{ transformOrigin: `${CX}px ${mid}px` }}
|
|
/>
|
|
</g>
|
|
);
|
|
})}
|
|
</svg>
|
|
)}
|
|
</div>
|
|
|
|
{/* Cards */}
|
|
<div className="xs:-ml-10 lg:-ml-0 flex flex-col gap-6 flex-1 max-w-3xl" style={{ paddingTop: INTRO_HEIGHT }}>
|
|
{nodes.map((node, ni) => {
|
|
const delay = ni * 0.05;
|
|
const nodeRef = (el) => (cardRefs.current[ni] = el);
|
|
|
|
if (node.type === "unit") {
|
|
const unitIndex = units.indexOf(node.unit);
|
|
return (
|
|
<UnitAccordionBlock
|
|
key={node.unit.unit_id}
|
|
unit={node.unit}
|
|
unitIndex={unitIndex}
|
|
i={ni}
|
|
cardRefs={cardRefs}
|
|
courseId={courseId}
|
|
onToggle={measure}
|
|
isCompleted={isCompleted}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (node.type === "assessment") {
|
|
return (
|
|
<AssessmentCard
|
|
key="assessment"
|
|
assessment={node.assessment}
|
|
courseId={courseId}
|
|
delay={delay}
|
|
nodeRef={nodeRef}
|
|
/>
|
|
);
|
|
}
|
|
|
|
// cert
|
|
return (
|
|
<CertCard
|
|
key="cert"
|
|
nodeRef={nodeRef}
|
|
delay={delay}
|
|
courseTitle={courseTitle}
|
|
courseLevel={courseLevel}
|
|
badgeColor={badgeColor}
|
|
badgeImageUrl={badgeImageUrl}
|
|
pendingCert={pendingCert}
|
|
certificate={certificate}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// ─── Course Details ───────────────────────────────────────────────────────────
|
|
|
|
const CourseDetails = () => {
|
|
const CourseBreadcrumb = useRef(null);
|
|
const triggered = useScrollTrigger(CourseBreadcrumb);
|
|
const { id: courseId } = useParams();
|
|
const navigate = useNavigate();
|
|
|
|
const { getCourse, course, courseBlocked, courseLoading, resetCourse } = useClientCourses();
|
|
const { myTier, getMyTier } = useClientTiers();
|
|
const { fetchCourseProgress, isCompleted, resetProgress } = useCourseReadingProgress();
|
|
const { advertisements, loading: adLoading, getActiveAdvertisements, handleAdCtaClick } = useClientAdvertisements();
|
|
|
|
const [tierMap, setTierMap] = useState({});
|
|
const [badgeImageUrl, setBadgeImageUrl] = useState(null);
|
|
useEffect(() => {
|
|
api.get("/client/tiers/categories")
|
|
.then(({ data }) => {
|
|
const m = {};
|
|
(data.data ?? []).forEach((c) => { m[c.slug] = c; });
|
|
setTierMap(m);
|
|
})
|
|
.catch(() => { });
|
|
}, []);
|
|
|
|
const hasCompleted = !!course?.is_completed;
|
|
|
|
useEffect(() => {
|
|
if (!myTier) getMyTier();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
getMyTier();
|
|
getCourse(courseId);
|
|
fetchCourseProgress(courseId);
|
|
getActiveAdvertisements(["course_details.banner", "course_details.sidebar"]);
|
|
return () => { resetCourse(); resetProgress(); setBadgeImageUrl(null); };
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [courseId]);
|
|
|
|
const bannerAd = advertisements["course_details.banner"] ?? null;
|
|
const sidebarAd = advertisements["course_details.sidebar"] ?? null;
|
|
|
|
// Resolve badge image once course loads — issue a client stream token for
|
|
// private S3 assets so the badge preview works on this page.
|
|
useEffect(() => {
|
|
if (!course?.badge_asset_id) {
|
|
setBadgeImageUrl(course?.badge_image_url ?? null);
|
|
return;
|
|
}
|
|
const STREAM_BASE = `${import.meta.env.VITE_API_URL}/client/media/stream`;
|
|
api.post("/client/media/token", { asset_id: course.badge_asset_id })
|
|
.then(({ data }) => {
|
|
const token = data.data?.token;
|
|
setBadgeImageUrl(token ? `${STREAM_BASE}/${token}` : null);
|
|
})
|
|
.catch(() => setBadgeImageUrl(course.badge_image_url ?? null));
|
|
}, [course?.badge_asset_id, course?.badge_image_url]);
|
|
|
|
if (courseBlocked) {
|
|
toast.error("You don't have access to this course. Upgrade your plan.");
|
|
navigate("/course", { replace: true });
|
|
return null;
|
|
}
|
|
|
|
const items = [
|
|
{ label: "Home", icon: <House className="size-4" />, to: `/dashboard` },
|
|
{ label: "Courses", to: `/course` },
|
|
{ label: course?.title ?? "Course" },
|
|
];
|
|
|
|
if (courseLoading) {
|
|
return (
|
|
<div className="my-17 p-8 lg:container lg:mx-auto space-y-4">
|
|
<Skeleton className="h-4 w-48" />
|
|
<Skeleton className="h-10 w-2/3" />
|
|
<Skeleton className="h-5 w-full max-w-2xl" />
|
|
<Skeleton className="h-5 w-full max-w-xl" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<PageMeta title={course ? `${course.title} - STARR` : undefined} description={course?.description} />
|
|
<div className="my-17">
|
|
|
|
<AnimatePresence>
|
|
{triggered && (
|
|
<motion.div
|
|
key="sticky-bar"
|
|
initial={{ y: -20, opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1 }}
|
|
exit={{ y: -20, opacity: 0 }}
|
|
transition={{ duration: 0.2, ease: "easeOut" }}
|
|
className="fixed top-[67px] left-0 right-0 z-10 bg-card border-b py-3 xs:px-4 md:px-6"
|
|
>
|
|
<div className="w-full flex items-center justify-between">
|
|
<AppBreadcrumb items={items} />
|
|
<div id="call-to-action">
|
|
<Button onClick={() => navigate(`/course/${courseId}/unit`)}>
|
|
{hasCompleted
|
|
? <><CheckCheck /> Start Again</>
|
|
: <><SendHorizonal /> Start Learning</>
|
|
}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
|
|
<div className="flex flex-col gap-8">
|
|
<div className="flex flex-col gap-6">
|
|
|
|
{/* Hero */}
|
|
<div className="bg-muted dark:bg-accent/50">
|
|
<div className="lg:container lg:mx-auto flex flex-col gap-6 xs:px-6 xs:py-6 lg:px-4 lg:py-8">
|
|
<div><AppBreadcrumb items={items} /></div>
|
|
<div className="flex lg:flex-row items-start justify-between w-full">
|
|
<div className="flex flex-col gap-4">
|
|
<div className="flex items-center gap-2">
|
|
{(() => {
|
|
const slug = course?.plan_tier ?? course?.subscription ?? "free";
|
|
const { label, cls } = resolveTierBadge(slug, tierMap);
|
|
return <Badge className={cls}>{label}</Badge>;
|
|
})()}
|
|
</div>
|
|
<h1 className="font-bold text-4xl">{course?.title ?? "Course Title"}</h1>
|
|
<p className="max-w-2xl lg:text-lg">{course?.description ?? ""}</p>
|
|
<div className="flex items-center gap-4">
|
|
{course?.duration_seconds > 0 && (
|
|
<div className="[&_svg]:size-4 flex gap-1.5 items-center">
|
|
<Timer />
|
|
{formatDuration(course.duration_seconds)}
|
|
</div>
|
|
)}
|
|
{course?.level && (
|
|
<div className="[&_svg]:size-4 flex gap-1.5 items-center">
|
|
<GitBranch />
|
|
{course.level.charAt(0).toUpperCase() + course.level.slice(1)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<Button
|
|
className="w-fit"
|
|
ref={CourseBreadcrumb}
|
|
onClick={() => navigate(`/course/${courseId}/unit`)}
|
|
>
|
|
{hasCompleted
|
|
? <><CheckCheck /> Start Again</>
|
|
: <><SendHorizonal /> Proceed</>
|
|
}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Advertisement Banner */}
|
|
<div className="lg:container lg:mx-auto xs:px-6 lg:px-4">
|
|
{adLoading["course_details.banner"] ? (
|
|
<BannerSkeleton />
|
|
) : (
|
|
<Banner ad={bannerAd} onCtaClick={handleAdCtaClick} />
|
|
)}
|
|
</div>
|
|
|
|
{/* Body */}
|
|
<div className="lg:container lg:mx-auto flex flex-col gap-6 xs:px-6 xs:py-0 lg:py-8">
|
|
<div className="flex flex-col lg:flex-row gap-8">
|
|
<div className="flex flex-col gap-4 flex-1 min-w-0">
|
|
<div className="font-bold text-2xl">About this course</div>
|
|
<div className="max-w-3xl space-y-4 lg:text-lg">
|
|
<p>{course?.description ?? ""}</p>
|
|
</div>
|
|
|
|
{/* Objectives */}
|
|
{course?.objectives?.length > 0 && (
|
|
<>
|
|
<div className="font-bold text-2xl">What you will learn</div>
|
|
<ul className="max-w-3xl list-disc list-inside space-y-1 lg:text-lg text-muted-foreground">
|
|
{course.objectives.map((obj) => (
|
|
<li key={obj.objective_id}>{obj.text}</li>
|
|
))}
|
|
</ul>
|
|
</>
|
|
)}
|
|
|
|
{/* Units */}
|
|
{course?.units?.length > 0 && (
|
|
<>
|
|
<div className="font-bold text-2xl">Course content</div>
|
|
<CourseUnits
|
|
units={course.units}
|
|
courseId={courseId}
|
|
courseTitle={course.title}
|
|
courseLevel={course.level}
|
|
badgeColor={course.badge_color ?? "purple"}
|
|
badgeImageUrl={badgeImageUrl}
|
|
isCompleted={isCompleted}
|
|
pendingCert={course.pending_certificate ?? null}
|
|
certificate={course.certificate ?? null}
|
|
assessment={course.assessment ?? null}
|
|
/>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Advertisement Sidebar */}
|
|
<aside className="hidden lg:block w-72 shrink-0 sticky top-24 h-fit">
|
|
{adLoading["course_details.sidebar"] ? (
|
|
<SidebarSkeleton />
|
|
) : (
|
|
<Sidebar ad={sidebarAd} onCtaClick={handleAdCtaClick} />
|
|
)}
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CourseDetails; |