90 lines
3.1 KiB
TypeScript
90 lines
3.1 KiB
TypeScript
import {Alert, Button} from '@plunk/ui';
|
|
import {AlertTriangle, ExternalLink} from 'lucide-react';
|
|
import {useBillingInvoices} from '../lib/hooks/useBillingInvoices';
|
|
|
|
interface UnpaidInvoiceBannerProps {
|
|
projectId: string;
|
|
hasSubscription: boolean;
|
|
}
|
|
|
|
export function UnpaidInvoiceBanner({projectId, hasSubscription}: UnpaidInvoiceBannerProps) {
|
|
const {invoicesData, isLoading} = useBillingInvoices(projectId, hasSubscription);
|
|
|
|
// Don't show banner if not loading and either no subscription or no unpaid invoices
|
|
if (!hasSubscription || isLoading || !invoicesData?.hasUnpaidInvoices) {
|
|
return null;
|
|
}
|
|
|
|
const formatCurrency = (amount: number, currency: string) => {
|
|
return new Intl.NumberFormat('en-US', {
|
|
style: 'currency',
|
|
currency: currency.toUpperCase(),
|
|
}).format(amount / 100);
|
|
};
|
|
|
|
const formatDate = (dateString: string | null) => {
|
|
if (!dateString) return 'Soon';
|
|
return new Date(dateString).toLocaleDateString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
});
|
|
};
|
|
|
|
const totalUnpaid = invoicesData.unpaidInvoices.reduce((sum, invoice) => sum + invoice.amountDue, 0);
|
|
const currency = invoicesData.unpaidInvoices[0]?.currency || 'usd';
|
|
const oldestDueDate = invoicesData.unpaidInvoices.reduce(
|
|
(oldest, invoice) => {
|
|
if (!invoice.dueDate) return oldest;
|
|
if (!oldest) return invoice.dueDate;
|
|
return new Date(invoice.dueDate) < new Date(oldest) ? invoice.dueDate : oldest;
|
|
},
|
|
null as string | null,
|
|
);
|
|
|
|
const handlePayNow = () => {
|
|
const firstInvoice = invoicesData.unpaidInvoices[0];
|
|
if (firstInvoice?.hostedInvoiceUrl) {
|
|
window.open(firstInvoice.hostedInvoiceUrl, '_blank');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Alert variant="destructive" className="mb-6 bg-red-50 border-red-300">
|
|
<AlertTriangle className="h-5 w-5 text-red-600" />
|
|
<div className="ml-3 flex-1">
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<h3 className="font-semibold text-red-900 mb-1">
|
|
{invoicesData.unpaidInvoices.length === 1
|
|
? 'You have an unpaid invoice'
|
|
: `You have ${invoicesData.unpaidInvoices.length} unpaid invoices`}
|
|
</h3>
|
|
<p className="text-sm text-red-800">
|
|
Total amount due: <span className="font-semibold">{formatCurrency(totalUnpaid, currency)}</span>
|
|
{oldestDueDate && (
|
|
<>
|
|
{' '}
|
|
• Due by: <span className="font-semibold">{formatDate(oldestDueDate)}</span>
|
|
</>
|
|
)}
|
|
</p>
|
|
<p className="text-xs text-red-700 mt-1">
|
|
Please pay your outstanding invoices to avoid service interruption.
|
|
</p>
|
|
</div>
|
|
<Button
|
|
variant="default"
|
|
size="sm"
|
|
onClick={handlePayNow}
|
|
className="ml-4 bg-red-600 hover:bg-red-700 text-white flex items-center gap-2"
|
|
>
|
|
Pay Now
|
|
<ExternalLink className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Alert>
|
|
);
|
|
}
|