mirror of
https://github.com/rgrgogu/new_starr.git
synced 2026-09-27 00:12:54 +08:00
@@ -1,27 +1,30 @@
|
||||
import { useEffect } from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import {
|
||||
Card, CardContent, CardHeader, CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import {
|
||||
ArrowLeft, BookOpen, Clock, Check,
|
||||
Tag, LockIcon, Zap, CalendarDays,
|
||||
Star, Users, Trophy, Shield, Flame,
|
||||
} from "lucide-react";
|
||||
import { useClientTiers } from "@/contexts/ClientTiersProvider";
|
||||
import { useProfile } from "@/contexts/ProfileProvider";
|
||||
import { useDateFormat } from "@/hooks/useDateFormat";
|
||||
import { useCurrency } from "@/hooks/useCurrency";
|
||||
import { useCurrencyPreference } from "@/contexts/CurrencyPreferenceContext";
|
||||
import { PageMeta } from "@/contexts/MetadataContext";
|
||||
|
||||
// ─── Helpers ──────────────────────────────────────────────────────────────────
|
||||
|
||||
function formatDuration(days) {
|
||||
const UNIT_TO_DAYS = { minute: 1 / 1440, hour: 1 / 24, day: 1, month: 30, year: 365 };
|
||||
|
||||
function formatDuration(days, unit) {
|
||||
if (!days) return null;
|
||||
if (days % 365 === 0) return `${days / 365} year${days / 365 > 1 ? "s" : ""}`;
|
||||
if (days % 30 === 0) return `${days / 30} month${days / 30 > 1 ? "s" : ""}`;
|
||||
return `${days} days`;
|
||||
const multiplier = UNIT_TO_DAYS[unit] ?? 1;
|
||||
const value = Math.round((days / multiplier) * 1000) / 1000;
|
||||
const label = unit ?? "day";
|
||||
return `${value} ${label}${value !== 1 ? "s" : ""}`;
|
||||
}
|
||||
|
||||
function formatCourseDuration(seconds = 0) {
|
||||
@@ -29,31 +32,60 @@ function formatCourseDuration(seconds = 0) {
|
||||
const h = Math.floor(seconds / 3600);
|
||||
const m = Math.floor((seconds % 3600) / 60);
|
||||
if (h && m) return `${h}h ${m}m`;
|
||||
if (h) return `${h}h`;
|
||||
if (h) return `${h}h`;
|
||||
return `${m}m`;
|
||||
}
|
||||
|
||||
// ─── Tier config ──────────────────────────────────────────────────────────────
|
||||
|
||||
const TIER_STYLES = {
|
||||
free: {
|
||||
badge: "bg-gradient-to-r from-lime-400 to-lime-600 text-white",
|
||||
banner: "from-lime-50 to-green-50 dark:from-lime-950/30 dark:to-green-950/30 border-lime-200 dark:border-lime-800",
|
||||
icon: Tag,
|
||||
label: "Free",
|
||||
button: "default",
|
||||
badge: "bg-gradient-to-r from-lime-400 to-lime-600 text-white",
|
||||
heroBg: "from-lime-500 via-green-600 to-emerald-700",
|
||||
accentColor: "text-lime-600 dark:text-lime-400",
|
||||
accentBg: "bg-lime-50 dark:bg-lime-950/30",
|
||||
accentBorder: "border-lime-200 dark:border-lime-800",
|
||||
icon: Tag,
|
||||
label: "Free",
|
||||
tagline: "Start your learning journey — no cost, no commitment.",
|
||||
perks: [
|
||||
{ icon: BookOpen, text: "Access to free course library" },
|
||||
{ icon: Users, text: "Join our learning community" },
|
||||
{ icon: Shield, text: "Track your progress & achievements" },
|
||||
{ icon: Star, text: "No credit card required" },
|
||||
],
|
||||
},
|
||||
premium: {
|
||||
badge: "bg-gradient-to-r from-fuchsia-600 to-purple-600 text-white",
|
||||
banner: "from-fuchsia-50 to-purple-50 dark:from-fuchsia-950/30 dark:to-purple-950/30 border-fuchsia-200 dark:border-fuchsia-800",
|
||||
icon: Zap,
|
||||
label: "Premium",
|
||||
button: "default",
|
||||
badge: "bg-gradient-to-r from-fuchsia-500 to-purple-600 text-white",
|
||||
heroBg: "from-fuchsia-600 via-purple-700 to-violet-800",
|
||||
accentColor: "text-fuchsia-600 dark:text-fuchsia-400",
|
||||
accentBg: "bg-fuchsia-50 dark:bg-fuchsia-950/30",
|
||||
accentBorder: "border-fuchsia-200 dark:border-fuchsia-800",
|
||||
icon: Zap,
|
||||
label: "Premium",
|
||||
tagline: "Unlock expert knowledge and accelerate your career.",
|
||||
perks: [
|
||||
{ icon: BookOpen, text: "Full access to all premium courses" },
|
||||
{ icon: Clock, text: "Learn at your own pace, anytime" },
|
||||
{ icon: Trophy, text: "Earn certificates of completion" },
|
||||
{ icon: Shield, text: "Priority support & guidance" },
|
||||
],
|
||||
},
|
||||
exclusive: {
|
||||
badge: "bg-gradient-to-r from-rose-500 to-red-600 text-white",
|
||||
banner: "from-rose-50 to-red-50 dark:from-rose-950/30 dark:to-red-950/30 border-rose-200 dark:border-rose-800",
|
||||
icon: LockIcon,
|
||||
label: "Exclusive",
|
||||
button: "default",
|
||||
badge: "bg-gradient-to-r from-rose-500 to-red-600 text-white",
|
||||
heroBg: "from-rose-600 via-red-700 to-orange-800",
|
||||
accentColor: "text-rose-600 dark:text-rose-400",
|
||||
accentBg: "bg-rose-50 dark:bg-rose-950/30",
|
||||
accentBorder: "border-rose-200 dark:border-rose-800",
|
||||
icon: LockIcon,
|
||||
label: "Exclusive",
|
||||
tagline: "The ultimate learning experience for serious professionals.",
|
||||
perks: [
|
||||
{ icon: Star, text: "Everything in Premium unlocked" },
|
||||
{ icon: Users, text: "1-on-1 mentorship sessions" },
|
||||
{ icon: Trophy, text: "Exclusive expert-only content" },
|
||||
{ icon: Flame, text: "Early access to new releases" },
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
@@ -61,9 +93,9 @@ const TIER_STYLES = {
|
||||
|
||||
const ViewPlanSkeleton = () => (
|
||||
<div className="mt-17 bg-muted min-h-screen">
|
||||
<div className="p-6 lg:container lg:max-w-3xl lg:mx-auto space-y-4">
|
||||
<Skeleton className="h-8 w-32" />
|
||||
<Skeleton className="h-40 w-full rounded-2xl" />
|
||||
<Skeleton className="h-72 w-full" />
|
||||
<div className="p-6 lg:container lg:max-w-3xl lg:mx-auto space-y-4 mt-4">
|
||||
<Skeleton className="h-28 w-full rounded-2xl" />
|
||||
<Skeleton className="h-64 w-full rounded-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -75,173 +107,222 @@ const ViewPlan = () => {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const { myTier, getMyTier, plans, plansLoading, getPlans } = useClientTiers();
|
||||
const { fmtCurrency } = useDateFormat();
|
||||
const { profile, getProfile } = useProfile();
|
||||
const { fmtPlanPrice } = useCurrency();
|
||||
const { currency, setCurrency } = useCurrencyPreference();
|
||||
|
||||
useEffect(() => {
|
||||
getProfile();
|
||||
getMyTier();
|
||||
if (!plans.length) getPlans();
|
||||
}, [id]);
|
||||
|
||||
const plan = plans.find((p) => String(p.plan_id) === String(id)) ?? null;
|
||||
const loading = plansLoading;
|
||||
// Seed currency preference from the user's stored profile
|
||||
useEffect(() => {
|
||||
if (profile?.preferred_currency && profile.preferred_currency !== currency) {
|
||||
setCurrency(profile.preferred_currency);
|
||||
}
|
||||
}, [profile?.preferred_currency]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
const plan = plans.find((p) => String(p.plan_id) === String(id)) ?? null;
|
||||
const loading = plansLoading;
|
||||
|
||||
if (loading) return <ViewPlanSkeleton />;
|
||||
if (!plan) return null;
|
||||
|
||||
const style = TIER_STYLES[plan.tier] ?? TIER_STYLES.free;
|
||||
const Icon = style.icon;
|
||||
const duration = formatDuration(plan.duration_days);
|
||||
const style = TIER_STYLES[plan.tier] ?? TIER_STYLES.free;
|
||||
const Icon = style.icon;
|
||||
const duration = formatDuration(plan.duration_days, plan.duration_unit);
|
||||
const isCurrent = myTier?.tier === plan.tier && myTier?.status === "active";
|
||||
|
||||
const totalSeconds = (plan.courses ?? []).reduce((sum, c) => sum + (c.duration_seconds ?? 0), 0);
|
||||
const totalSeconds = (plan.courses ?? []).reduce((sum, c) => sum + (c.duration_seconds ?? 0), 0);
|
||||
const totalDuration = formatCourseDuration(totalSeconds);
|
||||
|
||||
return (
|
||||
<div className="mt-17 bg-muted min-h-screen">
|
||||
<PageMeta title={plan ? `${plan.label} - STARR` : undefined} />
|
||||
<div className="p-6 lg:container lg:max-w-3xl lg:mx-auto space-y-4">
|
||||
|
||||
{/* Back */}
|
||||
<div className="flex items-center gap-3">
|
||||
<Button variant="ghost" size="icon" onClick={() => navigate("/plans")}>
|
||||
<ArrowLeft className="size-4" />
|
||||
</Button>
|
||||
<div>
|
||||
<h1 className="text-base font-semibold">Plan Details</h1>
|
||||
<p className="text-xs text-muted-foreground">Review what's included before subscribing</p>
|
||||
{/* ── Hero Banner ───────────────────────────────────────────── */}
|
||||
<div className={`relative bg-gradient-to-br ${style.heroBg} overflow-hidden`}>
|
||||
{/* Decorative blobs */}
|
||||
<div className="absolute inset-0 pointer-events-none overflow-hidden">
|
||||
<div className="absolute -top-24 -right-24 w-96 h-96 rounded-full bg-white/5" />
|
||||
<div className="absolute -bottom-16 -left-16 w-72 h-72 rounded-full bg-white/5" />
|
||||
<div className="absolute top-1/2 left-1/3 w-48 h-48 rounded-full bg-white/5" />
|
||||
</div>
|
||||
|
||||
<div className="relative px-6 pt-8 pb-10 lg:container lg:max-w-3xl lg:mx-auto">
|
||||
<button
|
||||
onClick={() => navigate("/plans")}
|
||||
className="flex items-center gap-1.5 text-white/70 hover:text-white text-sm mb-8 transition-colors"
|
||||
>
|
||||
<ArrowLeft className="size-4" /> Back to Plans
|
||||
</button>
|
||||
|
||||
<Badge className={`${style.badge} mb-4 text-sm px-3 py-1`}>
|
||||
<Icon className="size-3.5 mr-1" /> {style.label}
|
||||
</Badge>
|
||||
|
||||
<h1 className="text-3xl sm:text-4xl font-extrabold text-white mb-2 leading-tight tracking-tight">
|
||||
{plan.label}
|
||||
</h1>
|
||||
<p className="text-white/70 text-sm mb-8 max-w-md leading-relaxed">
|
||||
{plan.description || style.tagline}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap items-end gap-4">
|
||||
<div>
|
||||
<span className="text-5xl font-black text-white leading-none">
|
||||
{fmtPlanPrice(plan)}
|
||||
</span>
|
||||
{duration && (
|
||||
<span className="text-white/60 text-sm ml-2">/ {duration}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isCurrent ? (
|
||||
<Badge className="bg-white/20 border border-white/30 text-white px-4 py-2 text-sm font-medium">
|
||||
<Check className="size-3.5 mr-1" /> Your Current Plan
|
||||
</Badge>
|
||||
) : !plan.is_active ? (
|
||||
<Badge className="bg-white/20 border border-white/30 text-white px-4 py-2 text-sm font-medium">
|
||||
Not Available at the Moment
|
||||
</Badge>
|
||||
) : (
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-white text-gray-900 hover:bg-white/90 font-bold shadow-xl"
|
||||
onClick={() => navigate(`/plans/checkout?plan_id=${plan.plan_id}`)}
|
||||
>
|
||||
Get Started →
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-6 lg:container lg:max-w-3xl lg:mx-auto space-y-5 py-6">
|
||||
|
||||
{/* ── What's included ───────────────────────────────────── */}
|
||||
<div className={`rounded-2xl border ${style.accentBorder} ${style.accentBg} p-5`}>
|
||||
<p className={`text-xs font-bold uppercase tracking-widest ${style.accentColor} mb-4`}>
|
||||
What's included
|
||||
</p>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
{style.perks.map(({ icon: PerkIcon, text }, i) => (
|
||||
<div key={i} className="flex items-center gap-3">
|
||||
<div className={`h-8 w-8 rounded-lg ${style.accentBg} border ${style.accentBorder} flex items-center justify-center shrink-0`}>
|
||||
<PerkIcon className={`size-4 ${style.accentColor}`} />
|
||||
</div>
|
||||
<span className="text-sm font-medium">{text}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Plan banner */}
|
||||
<Card className={`bg-gradient-to-r ${style.banner} border`}>
|
||||
<CardContent className="py-6 px-6">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div className="space-y-2">
|
||||
<Badge className={style.badge}>
|
||||
<Icon className="size-3.5" /> {style.label}
|
||||
</Badge>
|
||||
<h2 className="text-2xl font-bold">{plan.label}</h2>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-3xl font-bold">
|
||||
{fmtCurrency(plan.price, plan.currency)}
|
||||
</span>
|
||||
{duration && (
|
||||
<span className="text-sm text-muted-foreground flex items-center gap-1">
|
||||
<CalendarDays className="size-3.5" /> {duration}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isCurrent ? (
|
||||
<Badge className="bg-green-500 text-white self-start sm:self-center px-4 py-2 text-sm">
|
||||
<Check className="size-3.5" /> Current Plan
|
||||
</Badge>
|
||||
) : (
|
||||
<Button
|
||||
size="lg"
|
||||
className="self-start sm:self-center"
|
||||
onClick={() => navigate(`/plans/checkout?plan_id=${plan.plan_id}`)}
|
||||
>
|
||||
Get {style.label} Plan
|
||||
</Button>
|
||||
)}
|
||||
{/* ── Stats row ─────────────────────────────────────────── */}
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{[
|
||||
{ label: "Courses", value: plan.course_count ?? 0, icon: BookOpen },
|
||||
{ label: "Content", value: totalDuration ?? "—", icon: Clock },
|
||||
{ label: "Access", value: duration ?? "Lifetime", icon: CalendarDays },
|
||||
].map(({ label, value, icon: StatIcon }) => (
|
||||
<div key={label} className="rounded-xl bg-card border p-4 flex flex-col items-center gap-1 text-center">
|
||||
<StatIcon className={`size-4 ${style.accentColor}`} />
|
||||
<p className="text-2xl font-bold leading-none mt-1">{value}</p>
|
||||
<p className="text-xs text-muted-foreground">{label}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Summary stats */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
|
||||
<Card>
|
||||
<CardContent className=" flex flex-col gap-1">
|
||||
<p className="text-xs text-muted-foreground flex items-center gap-1.5">
|
||||
<BookOpen className="size-3.5" /> Courses
|
||||
</p>
|
||||
<p className="text-2xl font-bold">{plan.course_count ?? 0}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className=" flex flex-col gap-1">
|
||||
<p className="text-xs text-muted-foreground flex items-center gap-1.5">
|
||||
<Clock className="size-3.5" /> Total Duration
|
||||
</p>
|
||||
<p className="text-2xl font-bold">{totalDuration ?? "—"}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className=" flex flex-col gap-1">
|
||||
<p className="text-xs text-muted-foreground flex items-center gap-1.5">
|
||||
<CalendarDays className="size-3.5" /> Access
|
||||
</p>
|
||||
<p className="text-2xl font-bold">{duration ?? "Lifetime"}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Included courses */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium flex items-center gap-2">
|
||||
<BookOpen className="size-4" />
|
||||
Included Courses
|
||||
<Badge variant="secondary">{plan.course_count ?? 0}</Badge>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{/* ── Included Courses ──────────────────────────────────── */}
|
||||
<div className="rounded-2xl bg-card border overflow-hidden">
|
||||
<div className="px-5 py-4 border-b flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<BookOpen className={`size-4 ${style.accentColor}`} />
|
||||
<span className="text-sm font-semibold">Included Courses</span>
|
||||
</div>
|
||||
<Badge variant="secondary">{plan.course_count ?? 0}</Badge>
|
||||
</div>
|
||||
|
||||
<div className="divide-y">
|
||||
{plan.courses?.length > 0 ? (
|
||||
plan.courses.map((course, i) => (
|
||||
<div key={course.course_id}>
|
||||
{i > 0 && <Separator className="mb-3" />}
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="h-8 w-8 rounded-lg bg-secondary flex items-center justify-center shrink-0">
|
||||
<BookOpen className="size-4 text-secondary-foreground" />
|
||||
plan.courses.map((course) => (
|
||||
<div key={course.course_id} className="flex items-start gap-4 px-5 py-4">
|
||||
<div className={`h-10 w-10 rounded-xl ${style.accentBg} border ${style.accentBorder} flex items-center justify-center shrink-0`}>
|
||||
<BookOpen className={`size-5 ${style.accentColor}`} />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-semibold line-clamp-1">{course.title}</p>
|
||||
<div className="flex items-center gap-2 mt-1 flex-wrap">
|
||||
{course.level && (
|
||||
<Badge variant="outline" className="text-xs capitalize h-5">
|
||||
{course.level}
|
||||
</Badge>
|
||||
)}
|
||||
{formatCourseDuration(course.duration_seconds) && (
|
||||
<span className="text-xs text-muted-foreground flex items-center gap-1">
|
||||
<Clock className="size-3" />
|
||||
{formatCourseDuration(course.duration_seconds)}
|
||||
</span>
|
||||
)}
|
||||
{course.course_code && (
|
||||
<span className="text-xs text-muted-foreground">{course.course_code}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium line-clamp-2">{course.title}</p>
|
||||
<div className="flex items-center gap-3 mt-1 flex-wrap">
|
||||
{course.level && (
|
||||
<Badge variant="outline" className="text-xs capitalize h-5">
|
||||
{course.level}
|
||||
</Badge>
|
||||
)}
|
||||
{formatCourseDuration(course.duration_seconds) && (
|
||||
<span className="text-xs text-muted-foreground flex items-center gap-1">
|
||||
<Clock className="size-3" />
|
||||
{formatCourseDuration(course.duration_seconds)}
|
||||
</span>
|
||||
)}
|
||||
{course.course_code && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{course.course_code}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Check className="size-4 text-green-500 shrink-0 mt-0.5" />
|
||||
</div>
|
||||
<div className="h-6 w-6 rounded-full bg-green-100 dark:bg-green-950 flex items-center justify-center shrink-0">
|
||||
<Check className="size-3.5 text-green-600 dark:text-green-400" />
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-center text-muted-foreground/50">
|
||||
<BookOpen className="size-8 mb-2" />
|
||||
<p className="text-sm">No courses assigned to this plan yet.</p>
|
||||
<div className="flex flex-col items-center justify-center py-10 text-center px-6">
|
||||
<div className={`h-14 w-14 rounded-2xl ${style.accentBg} border ${style.accentBorder} flex items-center justify-center mb-3`}>
|
||||
<BookOpen className={`size-7 ${style.accentColor}`} />
|
||||
</div>
|
||||
<p className="font-semibold text-sm">Courses coming soon</p>
|
||||
<p className="text-xs text-muted-foreground mt-1 max-w-xs">
|
||||
We're curating the best content for this plan. Subscribe now and get instant access the moment they go live.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom CTA */}
|
||||
{/* ── Bottom CTA ────────────────────────────────────────── */}
|
||||
{!isCurrent && (
|
||||
<div className="flex justify-end gap-2 pb-6">
|
||||
<Button variant="outline" onClick={() => navigate("/plans")}>
|
||||
Back to Plans
|
||||
</Button>
|
||||
<Button
|
||||
|
||||
onClick={() => navigate(`/plans/checkout?plan_id=${plan.plan_id}`)}
|
||||
>
|
||||
Get {style.label} Plan — {fmtCurrency(plan.price, plan.currency)}
|
||||
</Button>
|
||||
<div className={`rounded-2xl bg-gradient-to-br ${style.heroBg} p-6 text-center relative overflow-hidden`}>
|
||||
<div className="absolute inset-0 pointer-events-none overflow-hidden">
|
||||
<div className="absolute -top-10 -right-10 w-40 h-40 rounded-full bg-white/5" />
|
||||
<div className="absolute -bottom-8 -left-8 w-32 h-32 rounded-full bg-white/5" />
|
||||
</div>
|
||||
<div className="relative">
|
||||
<p className="text-white font-bold text-lg mb-1">
|
||||
{plan.is_active ? "Ready to get started?" : "Coming Soon"}
|
||||
</p>
|
||||
<p className="text-white/70 text-sm mb-5 max-w-xs mx-auto">
|
||||
{plan.is_active ? style.tagline : "This plan is not available for purchase at the moment. Check back later."}
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-3 justify-center">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-white/80 hover:text-white hover:bg-white/10"
|
||||
onClick={() => navigate("/plans")}
|
||||
>
|
||||
View All Plans
|
||||
</Button>
|
||||
{plan.is_active && (
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-white text-gray-900 hover:bg-white/90 font-bold shadow-lg"
|
||||
onClick={() => navigate(`/plans/checkout?plan_id=${plan.plan_id}`)}
|
||||
>
|
||||
Get {style.label} Plan — {fmtPlanPrice(plan)}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -250,4 +331,4 @@ const ViewPlan = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default ViewPlan;
|
||||
export default ViewPlan;
|
||||
|
||||
Reference in New Issue
Block a user