"use client"; import { Check, CreditCard, Crown, Sparkles, Zap } from "lucide-react"; import Link from "next/link"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; interface PlanFeature { name: string; included: boolean; } interface Settings59Props { badge?: { label: string; variant?: "default" | "secondary" | "outline"; }; heading?: string; description?: string; plan?: { name: string; price: string; interval: string; features: PlanFeature[]; renewalDate?: string; status: "active" | "canceled" | "past_due"; }; labels?: { currentPlan?: string; active?: string; canceled?: string; pastDue?: string; renewsOn?: string; changePlan?: string; cancelPlan?: string; reactivate?: string; perMonth?: string; perYear?: string; includedFeatures?: string; noSubscription?: string; }; changePlanUrl?: string; cancelPlanUrl?: string; reactivateUrl?: string; className?: string; } export const settings59Demo: Settings59Props = { badge: { label: "Billing", variant: "secondary" }, heading: "Current Plan", description: "Manage your subscription and billing details.", plan: { name: "Pro", price: "$29", interval: "month", features: [ { name: "Unlimited projects", included: true }, { name: "Priority support", included: true }, { name: "Advanced analytics", included: true }, { name: "Custom integrations", included: true }, { name: "Team collaboration", included: true }, { name: "API access", included: true }, ], renewalDate: "Feb 15, 2024", status: "active", }, labels: { currentPlan: "Current Plan", active: "Active", canceled: "Canceled", pastDue: "Past Due", renewsOn: "Renews on", changePlan: "Change Plan", cancelPlan: "Cancel Plan", reactivate: "Reactivate", perMonth: "/month", perYear: "/year", includedFeatures: "Included in your plan:", noSubscription: "No active subscription", }, changePlanUrl: "https://beste.co", cancelPlanUrl: "https://beste.co", reactivateUrl: "https://beste.co", }; export function Settings59({ badge, heading, description, plan, labels = {}, changePlanUrl, cancelPlanUrl, reactivateUrl, className, }: Settings59Props) { const { currentPlan: currentPlanLabel, active: activeLabel, canceled: canceledLabel, pastDue: pastDueLabel, renewsOn: renewsOnLabel, changePlan: changePlanLabel, cancelPlan: cancelPlanLabel, reactivate: reactivateLabel, perMonth: perMonthLabel, perYear: perYearLabel, includedFeatures: includedFeaturesLabel, noSubscription: noSubscriptionLabel, } = labels; const getStatusBadge = (status: "active" | "canceled" | "past_due") => { switch (status) { case "active": return ( {activeLabel} ); case "canceled": return ( {canceledLabel} ); case "past_due": return {pastDueLabel}; } }; const getPlanIcon = (planName: string) => { switch (planName.toLowerCase()) { case "pro": return ; case "enterprise": return ; default: return ; } }; return (

{badge?.label && ( {badge.label} )} {heading && (

{heading}

)} {description && (

{description}

)}

{plan ? (

{getPlanIcon(plan.name)}

{plan.name}

{getStatusBadge(plan.status)}

{currentPlanLabel}

{plan.price} {plan.interval === "month" ? perMonthLabel : perYearLabel}

{plan.renewalDate && plan.status === "active" && (

{renewsOnLabel} {plan.renewalDate}

)}

{includedFeaturesLabel}

{plan.features.map((feature, index) => (

{feature.name}

))}

{changePlanUrl ? ( ) : ( )} {plan.status === "active" && (cancelPlanUrl ? ( ) : ( ))} {plan.status === "canceled" && (reactivateUrl ? ( ) : ( ))}

) : (

{noSubscriptionLabel}

{changePlanUrl ? ( ) : ( )}

)}

); }