"use client"; import { AlertTriangle, CreditCard, Loader2, Mail, RefreshCw, } from "lucide-react"; import { useState } from "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 { Separator } from "@/registry/new-york/ui/separator"; export interface PaymentFailureDetails { invoiceId?: string; invoiceNumber?: string; amount: number; currency?: string; failedAt: Date; reason: | "insufficient_funds" | "card_declined" | "expired_card" | "invalid_card" | "processing_error" | "fraud_detected" | "other"; reasonMessage?: string; paymentMethod?: { type: string; last4?: string; brand?: string; expiresAt?: Date; }; gracePeriodEndsAt?: Date; retryAttempts?: number; maxRetryAttempts?: number; } export interface BillingPaymentFailedProps { failure: PaymentFailureDetails; onRetry?: () => Promise; onUpdatePaymentMethod?: () => void; onContactSupport?: () => void; className?: string; currency?: string; } 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: 2, maximumFractionDigits: 2, }).format(amount); } function getReasonConfig(reason: PaymentFailureDetails["reason"]) { switch (reason) { case "insufficient_funds": return { title: "Insufficient Funds", message: "Your payment was declined due to insufficient funds in your account.", action: "Please ensure you have sufficient funds or use a different payment method.", }; case "card_declined": return { title: "Card Declined", message: "Your card was declined by your bank.", action: "Please contact your bank or use a different payment method.", }; case "expired_card": return { title: "Expired Card", message: "Your payment card has expired.", action: "Please update your payment method with a valid card.", }; case "invalid_card": return { title: "Invalid Card", message: "The card information provided is invalid.", action: "Please verify your card details or use a different payment method.", }; case "processing_error": return { title: "Processing Error", message: "An error occurred while processing your payment.", action: "Please try again or contact support if the issue persists.", }; case "fraud_detected": return { title: "Fraud Detection", message: "Your payment was flagged for security reasons.", action: "Please contact support to resolve this issue.", }; case "other": return { title: "Payment Failed", message: "Your payment could not be processed.", action: "Please try again or contact support for assistance.", }; default: return { title: "Payment Failed", message: "Your payment could not be processed.", action: "Please try again or contact support for assistance.", }; } } export default function BillingPaymentFailed({ failure, onRetry, onUpdatePaymentMethod, onContactSupport, className, currency = "USD", }: BillingPaymentFailedProps) { const [isRetrying, setIsRetrying] = useState(false); const reasonConfig = getReasonConfig(failure.reason); const failureCurrency = failure.currency || currency; const isCardExpired = failure.reason === "expired_card" || (failure.paymentMethod?.expiresAt && new Date(failure.paymentMethod.expiresAt) < new Date()); const handleRetry = async () => { if (!onRetry) return; setIsRetrying(true); try { await onRetry(); } finally { setIsRetrying(false); } }; return (

{reasonConfig.title}

{failure.reasonMessage || reasonConfig.message}

Failed

Payment Details

{failure.invoiceNumber && (

Invoice: {failure.invoiceNumber}

)}

Amount: {formatPrice(failure.amount, failureCurrency)}

Failed on: {formatDate(failure.failedAt)}

{failure.paymentMethod && (

Payment Method:

{failure.paymentMethod.type} {failure.paymentMethod.brand && ( <> {failure.paymentMethod.brand} )} {failure.paymentMethod.last4 && ( <> •••• {failure.paymentMethod.last4} )} {isCardExpired && ( <> Expired )}

)} {failure.retryAttempts !== undefined && failure.maxRetryAttempts !== undefined && (

Retry Attempts: {failure.retryAttempts} / {failure.maxRetryAttempts}

)}

{failure.gracePeriodEndsAt && ( <>

Grace Period

Your service will continue until{" "} {formatDate(failure.gracePeriodEndsAt)} . Please update your payment method before this date to avoid service interruption.

)}

{reasonConfig.action}

{onRetry && ( )} {onUpdatePaymentMethod && ( )} {onContactSupport && ( )}

); }

Payment Details

Example Usage

Payment Details