mirror of
https://github.com/rgrgogu/new_starr.git
synced 2026-09-27 00:12:54 +08:00
client revised
This commit is contained in:
rgrgogu
@@ -43,7 +43,9 @@ export const LessonCard = ({ lesson, tierMap = {}, onViewDetails }) => {
|
||||
{label}
|
||||
</Badge>
|
||||
{locked && (
|
||||
<Badge variant="outline" className="text-muted-foreground">Locked</Badge>
|
||||
<Badge variant="secondary">
|
||||
<LockIcon className="size-3" /> Locked
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,37 +1,35 @@
|
||||
// LessonUpsellModal — shown when a learner clicks a locked standalone Lesson.
|
||||
// Mirrors UnitUpsellModal.jsx: unlocks via the lesson's own subscription tier
|
||||
// (with an optional direct "Buy" listing) and/or any course reachable through
|
||||
// its attached Units (aggregated across all of them, since a Lesson can sit
|
||||
// in more than one) plus a generic "View Plans" fallback.
|
||||
// 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.
|
||||
// Shared by LessonsList and Dashboard.
|
||||
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { LockIcon, BookOpen, ShoppingCart, GraduationCap } from "lucide-react";
|
||||
import { LockIcon, ShoppingCart, GraduationCap, 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 } from "@/utils/tierBadge.util";
|
||||
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 ownTier = lesson?.subscription ? resolveTierBadge(lesson.subscription, tierMap) : null;
|
||||
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);
|
||||
|
||||
return (
|
||||
<ResponsiveModal
|
||||
open={open}
|
||||
onOpenChange={onOpenChange}
|
||||
title={lesson?.title ?? "Lesson Details"}
|
||||
description={
|
||||
ownTier
|
||||
? "This lesson requires a plan upgrade or individual purchase."
|
||||
: "This lesson is part of one or more courses that require a plan upgrade."
|
||||
}
|
||||
description="Upgrade your plan to access this lesson."
|
||||
footer={
|
||||
<>
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>Close</Button>
|
||||
@@ -46,19 +44,7 @@ export default function LessonUpsellModal({ open, onOpenChange, lesson, tierMap
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="space-y-3 py-2">
|
||||
{ownTier && (
|
||||
<div 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">
|
||||
<LockIcon className="size-4 text-muted-foreground shrink-0" />
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium">Requires</p>
|
||||
<Badge className={`${ownTier.cls} mt-1`}>{ownTier.label}</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<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" />
|
||||
@@ -68,38 +54,21 @@ export default function LessonUpsellModal({ open, onOpenChange, lesson, tierMap
|
||||
</div>
|
||||
)}
|
||||
|
||||
{courses.length === 0 && !ownTier ? (
|
||||
<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>
|
||||
);
|
||||
})
|
||||
{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 lesson.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ResponsiveModal>
|
||||
|
||||
@@ -4,10 +4,11 @@
|
||||
// exact feature text is present in its own list.
|
||||
|
||||
import * as LucideIcons from "lucide-react";
|
||||
import { Check, Minus, Tag } from "lucide-react";
|
||||
import { Check, Minus, Tag, Lock } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { resolveTierBadge } from "@/utils/tierBadge.util";
|
||||
import { getBundleContent, overlapsExistingAccess, isPlanCurrent } from "@/utils/planBundle.util";
|
||||
|
||||
export default function PlanComparisonTable({ plans, myTier, tierMap, fmtCurrency, onSelect }) {
|
||||
const featureRows = [...new Set(
|
||||
@@ -23,9 +24,8 @@ export default function PlanComparisonTable({ plans, myTier, tierMap, fmtCurrenc
|
||||
{plans.map((plan) => {
|
||||
const { label, cls } = resolveTierBadge(plan.tier, tierMap);
|
||||
const Icon = LucideIcons[tierMap[plan.tier]?.badge_icon] ?? Tag;
|
||||
// A user can hold more than one active tier concurrently — check
|
||||
// membership in the full active set, not just the best one.
|
||||
const isCurrent = (myTier?.active_tiers ?? []).some((t) => t.tier === plan.tier);
|
||||
const isCurrent = isPlanCurrent(plan, myTier);
|
||||
const isBlockedByOverlap = !isCurrent && overlapsExistingAccess(plan, myTier?.my_grants);
|
||||
return (
|
||||
<th key={plan.plan_id} className="p-4 text-center align-bottom min-w-[160px]">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
@@ -33,6 +33,11 @@ export default function PlanComparisonTable({ plans, myTier, tierMap, fmtCurrenc
|
||||
<span className="font-semibold text-foreground">{plan.label}</span>
|
||||
<span className="text-lg font-bold">{fmtCurrency(plan.price, plan.currency)}</span>
|
||||
{isCurrent && <Badge variant="secondary" className="text-xs">Current Plan</Badge>}
|
||||
{isBlockedByOverlap && (
|
||||
<Badge variant="secondary" className="text-xs gap-1">
|
||||
<Lock className="size-3" /> Already Included
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</th>
|
||||
);
|
||||
@@ -41,12 +46,15 @@ export default function PlanComparisonTable({ plans, myTier, tierMap, fmtCurrenc
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="border-b bg-muted/30">
|
||||
<td className="p-3 font-medium text-muted-foreground">Courses included</td>
|
||||
{plans.map((plan) => (
|
||||
<td key={plan.plan_id} className="p-3 text-center">
|
||||
{plan.course_count > 0 ? plan.course_count : "—"}
|
||||
</td>
|
||||
))}
|
||||
<td className="p-3 font-medium text-muted-foreground">Items included</td>
|
||||
{plans.map((plan) => {
|
||||
const bundle = getBundleContent(plan);
|
||||
return (
|
||||
<td key={plan.plan_id} className="p-3 text-center">
|
||||
{bundle ? `${bundle.items.length} ${bundle.noun.toLowerCase()}${bundle.items.length !== 1 ? "s" : ""}` : "—"}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
{featureRows.map((text, i) => (
|
||||
<tr key={text} className={`border-b ${i % 2 === 1 ? "bg-muted/30" : ""}`}>
|
||||
@@ -76,18 +84,17 @@ export default function PlanComparisonTable({ plans, myTier, tierMap, fmtCurrenc
|
||||
<tr>
|
||||
<td className="p-4" />
|
||||
{plans.map((plan) => {
|
||||
// A user can hold more than one active tier concurrently — check
|
||||
// membership in the full active set, not just the best one.
|
||||
const isCurrent = (myTier?.active_tiers ?? []).some((t) => t.tier === plan.tier);
|
||||
const isCurrent = isPlanCurrent(plan, myTier);
|
||||
const isBlockedByOverlap = !isCurrent && overlapsExistingAccess(plan, myTier?.my_grants);
|
||||
return (
|
||||
<td key={plan.plan_id} className="p-4 text-center">
|
||||
<Button
|
||||
size="sm"
|
||||
variant={isCurrent ? "secondary" : "default"}
|
||||
disabled={isCurrent || !plan.is_active}
|
||||
variant={isCurrent || isBlockedByOverlap ? "secondary" : "default"}
|
||||
disabled={isCurrent || isBlockedByOverlap || !plan.is_active}
|
||||
onClick={() => onSelect(plan)}
|
||||
>
|
||||
{isCurrent ? "Current" : !plan.is_active ? "Not Available" : "Select"}
|
||||
{isCurrent ? "Current" : isBlockedByOverlap ? "Included" : !plan.is_active ? "Not Available" : "Select"}
|
||||
</Button>
|
||||
</td>
|
||||
);
|
||||
|
||||
@@ -40,6 +40,11 @@ export const UnitCard = ({ unit, tierMap = {}, onViewDetails }) => {
|
||||
{locked ? <LockIcon className="size-3" /> : <Tag className="size-3" />}
|
||||
{label}
|
||||
</Badge>
|
||||
{locked && (
|
||||
<Badge variant="secondary">
|
||||
<LockIcon className="size-3" /> Locked
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
|
||||
@@ -1,38 +1,35 @@
|
||||
// UnitUpsellModal — shown when a learner clicks a locked standalone Unit.
|
||||
// Unlocks two ways: the unit's own subscription tier (with an optional direct
|
||||
// "Buy" listing, same PayPal flow as Courses) and/or any course it's attached
|
||||
// to (a unit may sit under several courses at different tiers — no single
|
||||
// "Buy" in that case, just links to view/buy the course itself).
|
||||
// Unlocks via any course it's attached to (links to view/buy the course), with
|
||||
// an optional direct "Buy" listing if the unit itself has an active product
|
||||
// (same PayPal flow as Courses).
|
||||
// Shared by UnitsList, UnitDetails, and Dashboard.
|
||||
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { LockIcon, BookOpen, ShoppingCart, GraduationCap } from "lucide-react";
|
||||
import { LockIcon, ShoppingCart, GraduationCap, 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 } from "@/utils/tierBadge.util";
|
||||
import { resolveTierBadge, cheapestTierSlug } from "@/utils/tierBadge.util";
|
||||
|
||||
export default function UnitUpsellModal({ open, onOpenChange, unit, tierMap = {} }) {
|
||||
const navigate = useNavigate();
|
||||
const { fmtCurrency } = useDateFormat();
|
||||
const courses = unit?.courses ?? [];
|
||||
const ownTier = unit?.subscription ? resolveTierBadge(unit.subscription, tierMap) : null;
|
||||
const purchasable = unit?.product?.is_active && !unit?.has_purchased;
|
||||
// purchase_eligible is undefined for callers that haven't fetched it yet — treat as eligible (no regression).
|
||||
const awaitingStarterSet = purchasable && unit?.purchase_eligible === false;
|
||||
const canBuy = purchasable && !awaitingStarterSet;
|
||||
|
||||
const slug = cheapestTierSlug([unit?.subscription, ...courses.map((c) => c.subscription)], tierMap);
|
||||
const { rank, label, cls, panel } = resolveTierBadge(slug, tierMap);
|
||||
|
||||
return (
|
||||
<ResponsiveModal
|
||||
open={open}
|
||||
onOpenChange={onOpenChange}
|
||||
title={unit?.title ?? "Unit Details"}
|
||||
description={
|
||||
ownTier
|
||||
? "This unit requires a plan upgrade or individual purchase."
|
||||
: "This unit is part of one or more courses that require a plan upgrade."
|
||||
}
|
||||
description="Upgrade your plan to access this unit."
|
||||
footer={
|
||||
<>
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>Close</Button>
|
||||
@@ -47,19 +44,7 @@ export default function UnitUpsellModal({ open, onOpenChange, unit, tierMap = {}
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="space-y-3 py-2">
|
||||
{ownTier && (
|
||||
<div 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">
|
||||
<LockIcon className="size-4 text-muted-foreground shrink-0" />
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium">Requires</p>
|
||||
<Badge className={`${ownTier.cls} mt-1`}>{ownTier.label}</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<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" />
|
||||
@@ -69,38 +54,21 @@ export default function UnitUpsellModal({ open, onOpenChange, unit, tierMap = {}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{courses.length === 0 && !ownTier ? (
|
||||
<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>
|
||||
);
|
||||
})
|
||||
{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 unit.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ResponsiveModal>
|
||||
|
||||
Reference in New Issue
Block a user