diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/billing/invoices/components/billing-history.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/billing/invoices/components/billing-history.tsx index 044b8a17cea..6962bc0d6f7 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/billing/invoices/components/billing-history.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/billing/invoices/components/billing-history.tsx @@ -25,6 +25,34 @@ import { ToolTipLabel } from "@/components/ui/tooltip"; import { ThirdwebMiniLogo } from "../../../../../../../components/ThirdwebMiniLogo"; import { searchParams } from "../search-params"; +function getStatusBadge(invoice: Stripe.Invoice) { + switch (invoice.status) { + case "paid": + return Paid; + case "open": + // we treat "uncollectible" as unpaid + case "uncollectible": { + // if the invoice has a due date, use that, otherwise use the effective at date (which is the date the invoice was created) + const effectiveDueDate = invoice.due_date || invoice.effective_at; + + // if the invoice due date is in the past, we want to display it as past due + if (effectiveDueDate && effectiveDueDate * 1000 < Date.now()) { + return Past Due; + } + return Open; + } + case "void": + return Void; + + default: + return Unknown; + } +} + +function isInvoicePayable(invoice: Stripe.Invoice) { + return invoice.status === "open" || invoice.status === "uncollectible"; +} + export function BillingHistory(props: { teamSlug: string; invoices: Stripe.Invoice[]; @@ -57,27 +85,6 @@ export function BillingHistory(props: { }); }; - const getStatusBadge = (invoice: Stripe.Invoice) => { - switch (invoice.status) { - case "paid": - return Paid; - case "open": - // we treate "uncollectible" as unpaid - case "uncollectible": { - // if the invoice due date is in the past, we want to display it as past due - if (invoice.due_date && invoice.due_date * 1000 < Date.now()) { - return Past Due; - } - return Open; - } - case "void": - return Void; - - default: - return Unknown; - } - }; - if (props.invoices.length === 0) { if (props.status === "open") { return ( @@ -126,7 +133,7 @@ export function BillingHistory(props: { {getStatusBadge(invoice)}
- {invoice.status === "open" && ( + {isInvoicePayable(invoice) && ( <> {/* always show the crypto payment button */}