Billing Payment Failed

1"use client";
2 
3import {
4  AlertTriangle,
5  CreditCard,
6  Loader2,
7  Mail,
8  RefreshCw,
9} from "lucide-react";
10import { useState } from "react";
11import { cn } from "@/lib/utils";
12import { Badge } from "@/registry/new-york/ui/badge";
13import { Button } from "@/registry/new-york/ui/button";
14import {
15  Card,
16  CardContent,
17  CardDescription,
18  CardHeader,
19  CardTitle,
20} from "@/registry/new-york/ui/card";
21import { Separator } from "@/registry/new-york/ui/separator";
22 
23export interface PaymentFailureDetails {
24  invoiceId?: string;
25  invoiceNumber?: string;
26  amount: number;
27  currency?: string;
28  failedAt: Date;
29  reason:
30    | "insufficient_funds"
31    | "card_declined"
32    | "expired_card"
33    | "invalid_card"
34    | "processing_error"
35    | "fraud_detected"
36    | "other";
37  reasonMessage?: string;
38  paymentMethod?: {
39    type: string;
40    last4?: string;
41    brand?: string;
42    expiresAt?: Date;
43  };
44  gracePeriodEndsAt?: Date;
45  retryAttempts?: number;
46  maxRetryAttempts?: number;
47}
48 
49export interface BillingPaymentFailedProps {
50  failure: PaymentFailureDetails;
51  onRetry?: () => Promise<void>;
52  onUpdatePaymentMethod?: () => void;
53  onContactSupport?: () => void;
54  className?: string;
55  currency?: string;
56}
57 
58function formatDate(date: Date): string {
59  const year = date.getFullYear();
60  const month = date.toLocaleString("en-US", { month: "short" });
61  const day = date.getDate();
62  return `${month} ${day}, ${year}`;
63}
64 
65function formatPrice(amount: number, currency = "USD"): string {
66  return new Intl.NumberFormat("en-US", {
67    style: "currency",
68    currency,
69    minimumFractionDigits: 2,
70    maximumFractionDigits: 2,
71  }).format(amount);
72}
73 
74function getReasonConfig(reason: PaymentFailureDetails["reason"]) {
75  switch (reason) {
76    case "insufficient_funds":
77      return {
78        title: "Insufficient Funds",
79        message:
80          "Your payment was declined due to insufficient funds in your account.",
81        action:
82          "Please ensure you have sufficient funds or use a different payment method.",
83      };
84    case "card_declined":
85      return {
86        title: "Card Declined",
87        message: "Your card was declined by your bank.",
88        action: "Please contact your bank or use a different payment method.",
89      };
90    case "expired_card":
91      return {
92        title: "Expired Card",
93        message: "Your payment card has expired.",
94        action: "Please update your payment method with a valid card.",
95      };
96    case "invalid_card":
97// … truncated