Billing Pricing Table

1"use client";
2 
3import { Check, HelpCircle, Loader2, X } from "lucide-react";
4import { useState } from "react";
5import { cn } from "@/lib/utils";
6import { Badge } from "@/registry/new-york/ui/badge";
7import { Button } from "@/registry/new-york/ui/button";
8import {
9  Card,
10  CardContent,
11  CardDescription,
12  CardHeader,
13  CardTitle,
14} from "@/registry/new-york/ui/card";
15import { Switch } from "@/registry/new-york/ui/switch";
16import {
17  Tooltip,
18  TooltipContent,
19  TooltipTrigger,
20} from "@/registry/new-york/ui/tooltip";
21 
22export interface PricingPlan {
23  id: string;
24  name: string;
25  description?: string;
26  price: {
27    monthly: number;
28    annual: number;
29  };
30  currency?: string;
31  isPopular?: boolean;
32  isCurrent?: boolean;
33  features: PricingFeature[];
34  ctaLabel?: string;
35  ctaVariant?: "default" | "outline";
36}
37 
38export interface PricingFeature {
39  name: string;
40  description?: string;
41  values: {
42    [planId: string]: string | boolean | number | null;
43  };
44  tooltip?: string;
45}
46 
47export interface BillingPricingTableProps {
48  plans: PricingPlan[];
49  billingPeriod?: "monthly" | "annual";
50  onBillingPeriodChange?: (period: "monthly" | "annual") => void;
51  onPlanSelect?: (planId: string) => void;
52  className?: string;
53  showAnnualSavings?: boolean;
54  currency?: string;
55  mobileView?: "table" | "cards";
56}
57 
58function formatPrice(
59  amount: number,
60  currency = "USD",
61  period: "monthly" | "annual" = "monthly"
62): string {
63  const formatter = new Intl.NumberFormat("en-US", {
64    style: "currency",
65    currency,
66    minimumFractionDigits: 0,
67    maximumFractionDigits: 0,
68  });
69 
70  const formatted = formatter.format(amount);
71  return period === "monthly" ? `${formatted}/mo` : `${formatted}/yr`;
72}
73 
74function formatFeatureValue(
75  value: string | boolean | number | null
76): React.ReactNode {
77  if (value === null || value === false) {
78    return <X className="size-4 text-muted-foreground" />;
79  }
80  if (value === true) {
81    return <Check className="size-4 text-primary" />;
82  }
83  if (typeof value === "string") {
84    return <span className="text-sm">{value}</span>;
85  }
86  return <span className="text-sm">{value}</span>;
87}
88 
89export default function BillingPricingTable({
90  plans,
91  billingPeriod = "monthly",
92  onBillingPeriodChange,
93  onPlanSelect,
94  className,
95  showAnnualSavings = true,
96  currency = "USD",
97  mobileView = "cards",
98}: BillingPricingTableProps) {
99  const [isLoading, setIsLoading] = useState<string | null>(null);
100 
101// … truncated