"use client"; import { Check, Loader2, Sparkles, TrendingUp, X } from "lucide-react"; import { useState } from "react"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Separator } from "@/components/ui/separator"; import { cn } from "@/lib/utils"; export interface UpgradeFeature { name: string; description?: string; icon?: React.ComponentType<{ className?: string }>; } export interface BillingUpgradePromptProps { currentPlan: { id: string; name: string; }; recommendedPlan: { id: string; name: string; price: number; currency?: string; billingPeriod?: "monthly" | "annual"; }; features?: UpgradeFeature[]; reason?: "usage_limit" | "feature_unlock" | "recommended" | "custom"; customMessage?: string; onUpgrade?: () => void; onDismiss?: () => void; onLearnMore?: () => void; className?: string; variant?: "banner" | "card" | "modal"; showSavings?: boolean; savingsAmount?: number; limitedTime?: boolean; } function formatPrice(amount: number, currency = "USD"): string { return new Intl.NumberFormat("en-US", { style: "currency", currency, minimumFractionDigits: 0, maximumFractionDigits: 0, }).format(amount); } export default function BillingUpgradePrompt({ currentPlan, recommendedPlan, features = [], reason = "recommended", customMessage, onUpgrade, onDismiss, onLearnMore, className, variant = "card", showSavings = false, savingsAmount = 0, limitedTime = false, }: BillingUpgradePromptProps) { const [isLoading, setIsLoading] = useState(false); const [isDismissed, setIsDismissed] = useState(false); const handleUpgrade = async () => { setIsLoading(true); try { await onUpgrade?.(); } finally { setIsLoading(false); } }; const handleDismiss = () => { setIsDismissed(true); onDismiss?.(); }; if (isDismissed) return null; const getReasonMessage = () => { switch (reason) { case "usage_limit": return `You've used 90% of your ${currentPlan.name} plan limit. Upgrade to continue using all features.`; case "feature_unlock": return `Unlock advanced features with ${recommendedPlan.name}.`; case "recommended": return `${recommendedPlan.name} is recommended for your usage.`; case "custom": return ( customMessage || `Upgrade to ${recommendedPlan.name} for more features.` ); default: return `Upgrade to ${recommendedPlan.name} for more features.`; } }; const currency = recommendedPlan.currency || "USD"; const price = formatPrice(recommendedPlan.price, currency); const period = recommendedPlan.billingPeriod === "annual" ? "/year" : "/month"; if (variant === "banner") { return (

Upgrade to {recommendedPlan.name}

{limitedTime && ( Limited time )}

{getReasonMessage()}

{features.length > 0 && (

{features.slice(0, 3).map((feature, idx) => (

{feature.name}

))} {features.length > 3 && ( +{features.length - 3} more )}

)}

{onDismiss && ( )} {onLearnMore && ( )} {onUpgrade && ( )}

); } return ( {onDismiss && ( )}

Upgrade to {recommendedPlan.name} {limitedTime && ( Limited time )}

{getReasonMessage()}

{price} {period}

{showSavings && savingsAmount > 0 && ( Save {formatPrice(savingsAmount, currency)}/year )}

{features.length > 0 && ( <>

What you'll get:

{features.map((feature, idx) => (

{feature.icon ? ( ) : ( )}

{feature.name} {feature.description && ( {feature.description} )}

))}

)}

{onUpgrade && ( )} {onLearnMore && ( )}

); }

What you'll get:

Example Usage