"use client"; import { Calendar, Check, Clock, CreditCard, Loader2, TrendingUp, X, } 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 { Progress } from "@/registry/new-york/ui/progress"; import { Separator } from "@/registry/new-york/ui/separator"; export interface ScheduledPayment { id: string; date: Date; amount: number; currency?: string; status: "upcoming" | "processing" | "completed" | "failed" | "canceled"; description: string; paymentMethod?: { type: string; last4?: string; brand?: string; }; invoiceId?: string; invoiceNumber?: string; retryAttempts?: number; maxRetryAttempts?: number; } export interface BillingPaymentScheduleProps { payments: ScheduledPayment[]; onViewInvoice?: (invoiceId: string) => void; onRetry?: (paymentId: string) => Promise; onCancel?: (paymentId: string) => Promise; className?: string; currency?: string; showUpcomingOnly?: boolean; } 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 getStatusConfig(status: ScheduledPayment["status"]) { switch (status) { case "upcoming": return { label: "Upcoming", variant: "secondary" as const, className: "bg-blue-500/10 text-blue-600 border-blue-500/20", icon: Clock, }; case "processing": return { label: "Processing", variant: "secondary" as const, className: "bg-yellow-500/10 text-yellow-600 border-yellow-500/20", icon: Loader2, }; case "completed": return { label: "Completed", variant: "default" as const, className: "bg-green-500/10 text-green-600 border-green-500/20", icon: Check, }; case "failed": return { label: "Failed", variant: "destructive" as const, className: "bg-destructive/10 text-destructive border-destructive/20", icon: TrendingUp, }; case "canceled": return { label: "Canceled", variant: "secondary" as const, className: "", icon: X, }; default: return { label: "Unknown", variant: "secondary" as const, className: "", icon: Clock, }; } } function getDaysUntil(date: Date): number { const today = new Date(); today.setHours(0, 0, 0, 0); const targetDate = new Date(date); targetDate.setHours(0, 0, 0, 0); const diffTime = targetDate.getTime() - today.getTime(); const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); return diffDays; } export default function BillingPaymentSchedule({ payments, onViewInvoice, onRetry, onCancel, className, currency = "USD", showUpcomingOnly = false, }: BillingPaymentScheduleProps) { const [isRetrying, setIsRetrying] = useState(null); const filteredPayments = showUpcomingOnly ? payments.filter((p) => p.status === "upcoming") : payments; const sortedPayments = [...filteredPayments].sort( (a, b) => a.date.getTime() - b.date.getTime() ); const upcomingPayments = payments.filter((p) => p.status === "upcoming"); const nextPayment = upcomingPayments.length > 0 ? upcomingPayments.sort((a, b) => a.date.getTime() - b.date.getTime())[0] : null; const handleRetry = async (paymentId: string) => { if (!onRetry) return; setIsRetrying(paymentId); try { await onRetry(paymentId); } finally { setIsRetrying(null); } }; if (payments.length === 0) { return (

Payment Schedule View your upcoming and past scheduled payments

No scheduled payments

); } return (

Payment Schedule View your upcoming and past scheduled payments

{nextPayment && (

Next payment

{formatDate(nextPayment.date)}

)}

{nextPayment && (

Next Payment

Amount {formatPrice( nextPayment.amount, nextPayment.currency || currency )}

Date {formatDate(nextPayment.date)}

{nextPayment.paymentMethod && (

Payment Method

{nextPayment.paymentMethod.type} {nextPayment.paymentMethod.brand && ( <> {nextPayment.paymentMethod.brand} )} {nextPayment.paymentMethod.last4 && ( <> •••• {nextPayment.paymentMethod.last4} )}

)} {nextPayment.description && (

Description {nextPayment.description}

)}

{getDaysUntil(nextPayment.date)} day {getDaysUntil(nextPayment.date) !== 1 ? "s" : ""} until

)} {sortedPayments.length > 0 && ( <> {nextPayment && }

{showUpcomingOnly ? "Upcoming Payments" : "All Payments"}

{sortedPayments.map((payment) => { const statusConfig = getStatusConfig(payment.status); const StatusIcon = statusConfig.icon; const isUpcoming = payment.status === "upcoming"; const daysUntil = getDaysUntil(payment.date); return (

{payment.description}

{statusConfig.label}

{formatDate(payment.date)}

{isUpcoming && daysUntil >= 0 && ( <> {daysUntil === 0 ? "Today" : daysUntil === 1 ? "Tomorrow" : `${daysUntil} days`} )} {payment.invoiceNumber && ( <> {payment.invoiceNumber} )} {payment.paymentMethod && ( <>

{payment.paymentMethod.type} {payment.paymentMethod.last4 && ( {" "} •••• {payment.paymentMethod.last4} )}

)} {payment.status === "failed" && payment.retryAttempts !== undefined && payment.maxRetryAttempts !== undefined && ( <> Retry {payment.retryAttempts}/ {payment.maxRetryAttempts} )}

{formatPrice( payment.amount, payment.currency || currency )}

{payment.status === "failed" && onRetry && ( )} {isUpcoming && onCancel && ( )} {payment.invoiceId && onViewInvoice && ( )}

); })}

)}

); }

Next Payment

All Payments

Example Usage

Next Payment

All Payments