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 */}