"use client"; import { AlertTriangle, Calendar, TrendingUp } from "lucide-react"; import { cn } from "@/lib/utils"; import { Badge } from "@/registry/new-york/ui/badge"; import { Button } from "@/registry/new-york/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/registry/new-york/ui/card"; import { Progress } from "@/registry/new-york/ui/progress"; import { Separator } from "@/registry/new-york/ui/separator"; import { Switch } from "@/registry/new-york/ui/switch"; export interface SubscriptionUsage { label: string; used: number; limit: number | null; unit?: string; warningThreshold?: number; } export interface BillingSubscriptionCardProps { plan: { id: string; name: string; price: number; currency?: string; billingPeriod: "monthly" | "annual"; }; usage?: SubscriptionUsage[]; nextBillingDate?: Date; autoRenew?: boolean; status?: "active" | "canceled" | "expired" | "past_due"; onUpgrade?: () => void; onDowngrade?: () => void; onCancel?: () => void; onManage?: () => void; className?: string; showUsageDetails?: boolean; } function formatDate(date: Date): string { const year = date.getFullYear(); const month = date.toLocaleString("en-US", { month: "short" }); const day = date.getDate(); return `${month} ${day}, ${year}`; } function formatPrice(amount: number, currency = "USD"): string { return new Intl.NumberFormat("en-US", { style: "currency", currency, minimumFractionDigits: 0, maximumFractionDigits: 0, }).format(amount); } function getStatusConfig(status: string) { switch (status) { case "active": return { label: "Active", variant: "default" as const, className: "bg-green-500/10 text-green-600 border-green-500/20", }; case "canceled": return { label: "Canceled", variant: "secondary" as const, className: "bg-yellow-500/10 text-yellow-600 border-yellow-500/20", }; case "expired": return { label: "Expired", variant: "destructive" as const, className: "bg-destructive/10 text-destructive border-destructive/20", }; case "past_due": return { label: "Past Due", variant: "destructive" as const, className: "bg-destructive/10 text-destructive border-destructive/20", }; default: return { label: "Unknown", variant: "secondary" as const, className: "", }; } } export default function BillingSubscriptionCard({ plan, usage = [], nextBillingDate, autoRenew = true, status = "active", onUpgrade, onDowngrade, onCancel, onManage, className, showUsageDetails = true, }: BillingSubscriptionCardProps) { const statusConfig = getStatusConfig(status); const currency = plan.currency || "USD"; return (

{plan.name} {statusConfig.label}

{formatPrice(plan.price, currency)}/ {plan.billingPeriod === "monthly" ? "month" : "year"}

{onManage && ( )}

{showUsageDetails && usage.length > 0 && (

Usage

{usage.map((item, idx) => { const percentage = item.limit !== null ? (item.used / item.limit) * 100 : 0; const isWarning = item.warningThreshold !== undefined && percentage >= item.warningThreshold; const isOverLimit = item.limit !== null && item.used > item.limit; return (

{item.label} {item.used.toLocaleString()} {item.unit && ` ${item.unit}`} {item.limit !== null && ( <> / {item.limit.toLocaleString()} )} {item.limit === null && " (Unlimited)"}

{item.limit !== null && ( )} {isWarning && !isOverLimit && (

You've used {percentage.toFixed(0)}% of your limit

)} {isOverLimit && (

You've exceeded your limit

)}

); })}

)} {nextBillingDate && ( <> {showUsageDetails && usage.length > 0 && }

Next billing date

{formatDate(nextBillingDate)}

)}

Auto-renewal {autoRenew ? "Your subscription will renew automatically" : "Your subscription will not renew"}

{onUpgrade && ( )} {onDowngrade && ( )} {onCancel && ( )}

); }

Usage

Example Usage

Usage