Signed-off-by: rgrgogu <obsequio.rus@gmail.com>
This commit is contained in:
rgrgogu
2026-08-13 20:00:06 +08:00
parent 377a4d4b5e
commit 3c5432a32b
29 changed files with 104 additions and 1029 deletions
@@ -1,25 +1,19 @@
// LessonUpsellModal — shown when a learner clicks a locked standalone Lesson.
// Mirrors UnitUpsellModal.jsx: unlocks via any course reachable through its
// attached Units (aggregated across all of them, since a Lesson can sit in
// more than one), with an optional direct "Buy" listing if the lesson itself
// has an active product, plus a generic "View Plans" fallback.
// more than one), plus a generic "View Plans" fallback.
// Shared by LessonsList and Dashboard.
import { useNavigate } from "react-router-dom";
import { LockIcon, ShoppingCart, GraduationCap, Check } from "lucide-react";
import { LockIcon, Check } 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, cheapestTierSlug } from "@/utils/tierBadge.util";
export default function LessonUpsellModal({ open, onOpenChange, lesson, tierMap = {} }) {
const navigate = useNavigate();
const { fmtCurrency } = useDateFormat();
const courses = lesson?.courses ?? [];
const purchasable = lesson?.product?.is_active && !lesson?.has_purchased;
const awaitingStarterSet = purchasable && lesson?.purchase_eligible === false;
const canBuy = purchasable && !awaitingStarterSet;
const slug = cheapestTierSlug([lesson?.subscription, ...courses.map((c) => c.subscription)], tierMap);
const { rank, label, cls, panel } = resolveTierBadge(slug, tierMap);
@@ -33,27 +27,13 @@ export default function LessonUpsellModal({ open, onOpenChange, lesson, tierMap
footer={
<>
<Button variant="outline" onClick={() => onOpenChange(false)}>Close</Button>
{canBuy && (
<Button onClick={() => { onOpenChange(false); navigate(`/lessons/${lesson.uuid}/checkout`); }}>
<ShoppingCart /> Buy {fmtCurrency(lesson.product.price ?? 0, lesson.product.currency ?? "USD")}
</Button>
)}
<Button variant={canBuy ? "outline" : "default"} onClick={() => { onOpenChange(false); navigate("/plans"); }}>
<Button onClick={() => { onOpenChange(false); navigate("/plans"); }}>
<LockIcon /> View Plans
</Button>
</>
}
>
<div className="space-y-6 py-2">
{awaitingStarterSet && (
<div className="flex items-center gap-2.5 p-4 rounded-xl border border-amber-300 bg-amber-50 dark:border-amber-700 dark:bg-amber-950/40">
<GraduationCap className="size-4 text-amber-700 dark:text-amber-400 shrink-0" />
<p className="text-sm text-amber-800 dark:text-amber-300">
Complete your plan's starter content to unlock individual purchases like this one.
</p>
</div>
)}
{rank > 0 && (
<div className={`p-5 rounded-2xl border ${panel.bg} ${panel.border}`}>
<div className="flex items-center gap-3 mb-3">