"use client"; import { CreditCard, Loader2, MoreVertical, Plus, Trash2 } from "lucide-react"; import { useState } from "react"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@/components/ui/alert-dialog"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { cn } from "@/lib/utils"; export interface PaymentMethod { id: string; type: "card" | "bank_account" | "paypal" | "other"; last4?: string; brand?: "visa" | "mastercard" | "amex" | "discover" | "other"; expiryMonth?: number; expiryYear?: number; holderName?: string; isDefault?: boolean; billingAddress?: { line1?: string; city?: string; state?: string; zip?: string; country?: string; }; } export interface BillingPaymentMethodProps { paymentMethods: PaymentMethod[]; onAdd?: () => void; onEdit?: (methodId: string) => void; onDelete?: (methodId: string) => void; onSetDefault?: (methodId: string) => void; className?: string; allowMultiple?: boolean; isLoading?: boolean; } function getCardBrandIcon(brand?: PaymentMethod["brand"]) { switch (brand) { case "visa": return "💳"; case "mastercard": return "💳"; case "amex": return "💳"; case "discover": return "💳"; default: return "💳"; } } function formatExpiry(month?: number, year?: number): string { if (!(month && year)) return ""; const monthStr = month.toString().padStart(2, "0"); const yearStr = year.toString().slice(-2); return `${monthStr}/${yearStr}`; } export default function BillingPaymentMethod({ paymentMethods, onAdd, onEdit, onDelete, onSetDefault, className, allowMultiple = true, isLoading = false, }: BillingPaymentMethodProps) { const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); const [deletingId, setDeletingId] = useState(null); const handleDelete = async (methodId: string) => { setDeletingId(methodId); setDeleteDialogOpen(true); }; const confirmDelete = async () => { if (deletingId) { await onDelete?.(deletingId); setDeletingId(null); } setDeleteDialogOpen(false); }; if (paymentMethods.length === 0) { return (

Payment methods Manage your payment methods

{onAdd && ( )}

No payment methods added yet

{onAdd && ( )}

); } return ( <>

Payment methods Manage your payment methods

{onAdd && allowMultiple && ( )}

{paymentMethods.map((method) => (

{method.type === "card" ? getCardBrandIcon(method.brand) : method.type === "paypal" ? "P" : "🏦"}

{method.type === "card" ? `${method.brand ? method.brand.charAt(0).toUpperCase() + method.brand.slice(1) : "Card"} •••• ${method.last4 || "0000"}` : method.type === "paypal" ? "PayPal" : method.type === "bank_account" ? `Bank Account •••• ${method.last4 || "0000"}` : "Other"}

{method.holderName && {method.holderName}} {method.expiryMonth && method.expiryYear && ( <> {method.holderName && ( )} Expires{" "} {formatExpiry( method.expiryMonth, method.expiryYear )} )}

{method.isDefault && ( Default )} {!method.isDefault && onSetDefault && ( )} {onEdit && ( onEdit(method.id)}> Edit )} {!method.isDefault && onSetDefault && ( onSetDefault(method.id)} > Set as default )} {onDelete && ( <> handleDelete(method.id)} > Delete )}

))}

Delete payment method? This action cannot be undone. This payment method will be permanently removed from your account. Cancel {deletingId && isLoading ? ( <> Deleting… ) : ( "Delete" )} ); }

Example Usage