Billing Payment Method

1"use client";
2 
3import { CreditCard, Loader2, MoreVertical, Plus, Trash2 } from "lucide-react";
4import { useState } from "react";
5import { cn } from "@/lib/utils";
6import {
7  AlertDialog,
8  AlertDialogAction,
9  AlertDialogCancel,
10  AlertDialogContent,
11  AlertDialogDescription,
12  AlertDialogFooter,
13  AlertDialogHeader,
14  AlertDialogTitle,
15} from "@/registry/new-york/ui/alert-dialog";
16import { Badge } from "@/registry/new-york/ui/badge";
17import { Button } from "@/registry/new-york/ui/button";
18import {
19  Card,
20  CardContent,
21  CardDescription,
22  CardHeader,
23  CardTitle,
24} from "@/registry/new-york/ui/card";
25import {
26  DropdownMenu,
27  DropdownMenuContent,
28  DropdownMenuItem,
29  DropdownMenuSeparator,
30  DropdownMenuTrigger,
31} from "@/registry/new-york/ui/dropdown-menu";
32 
33export interface PaymentMethod {
34  id: string;
35  type: "card" | "bank_account" | "paypal" | "other";
36  last4?: string;
37  brand?: "visa" | "mastercard" | "amex" | "discover" | "other";
38  expiryMonth?: number;
39  expiryYear?: number;
40  holderName?: string;
41  isDefault?: boolean;
42  billingAddress?: {
43    line1?: string;
44    city?: string;
45    state?: string;
46    zip?: string;
47    country?: string;
48  };
49}
50 
51export interface BillingPaymentMethodProps {
52  paymentMethods: PaymentMethod[];
53  onAdd?: () => void;
54  onEdit?: (methodId: string) => void;
55  onDelete?: (methodId: string) => void;
56  onSetDefault?: (methodId: string) => void;
57  className?: string;
58  allowMultiple?: boolean;
59  isLoading?: boolean;
60}
61 
62function getCardBrandIcon(brand?: PaymentMethod["brand"]) {
63  switch (brand) {
64    case "visa":
65      return "💳";
66    case "mastercard":
67      return "💳";
68    case "amex":
69      return "💳";
70    case "discover":
71      return "💳";
72    default:
73      return "💳";
74  }
75}
76 
77function formatExpiry(month?: number, year?: number): string {
78  if (!(month && year)) return "";
79  const monthStr = month.toString().padStart(2, "0");
80  const yearStr = year.toString().slice(-2);
81  return `${monthStr}/${yearStr}`;
82}
83 
84export default function BillingPaymentMethod({
85  paymentMethods,
86  onAdd,
87  onEdit,
88  onDelete,
89  onSetDefault,
90  className,
91  allowMultiple = true,
92  isLoading = false,
93}: BillingPaymentMethodProps) {
94  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
95  const [deletingId, setDeletingId] = useState<string | null>(null);
96 
97  const handleDelete = async (methodId: string) => {
98    setDeletingId(methodId);
99    setDeleteDialogOpen(true);
100  };
101 
102  const confirmDelete = async () => {
103// … truncated