InvoiceHistoryCard

The InvoiceHistoryCard component displays a list of invoices with download links and billing portal access.

v0.3.0 Update: Component now accepts optional invoice data. Use presentational mode with data prop.

Installation

npm install @bettercone/ui

Features

✅ Invoice List - Displays invoices with date, amount, status
✅ Status Badges - Visual indicators (paid, open, void, uncollectible)
✅ Download Links - Direct download for paid invoices
✅ Portal Access - Link to billing portal for full history
✅ Localization - Full i18n support

Usage

import { AuthUIProvider, InvoiceHistoryCard } from '@bettercone/ui';
import { authClient } from '@/lib/auth-client';

export default function BillingPage() {
  return (
    <AuthUIProvider authClient={authClient}>
      {/* Shows "View in billing portal" message */}
      <InvoiceHistoryCard />
    </AuthUIProvider>
  );
}

import { InvoiceHistoryCard, type Invoice } from '@bettercone/ui';

export default function BillingPage() {
  const invoices: Invoice[] = [
    {
      id: "inv_123",
      number: "INV-001",
      amount: 2900,
      currency: "usd",
      status: "paid",
      createdAt: new Date("2024-11-01"),
      pdfUrl: "https://stripe.com/invoice.pdf",
    },
    {
      id: "inv_124",
      number: "INV-002",
      amount: 2900,
      currency: "usd",
      status: "open",
      createdAt: new Date("2024-12-01"),
    },
  ];

  return <InvoiceHistoryCard data={invoices} />;
}

import { InvoiceHistoryCard } from '@bettercone/ui';

<InvoiceHistoryCard
  data={invoices}
  localization={{
    invoiceHistory: "Histórico de Faturas",
    viewInPortal: "Ver no Portal",
    noInvoices: "Nenhuma fatura",
    download: "Baixar",
    date: "Data",
    amount: "Valor",
    status: "Status",
  }}
/>

Props

Prop

Type

Invoice Types

interface Invoice {
  id: string;
  number?: string;                 // Invoice number (INV-001)
  amount: number;                  // Amount in cents
  currency: string;                // ISO currency code (usd, eur, etc.)
  status: InvoiceStatus;
  createdAt: Date;
  paidAt?: Date;
  dueDate?: Date;
  pdfUrl?: string;                 // Download URL
  hostedInvoiceUrl?: string;       // Stripe hosted page
}

type InvoiceStatus = 
  | "draft"
  | "open"
  | "paid"
  | "void"
  | "uncollectible";

Status Badges

Status	Badge Color	Description
`paid`	Green	Invoice paid successfully
`open`	Blue	Invoice sent, awaiting payment
`void`	Gray	Invoice voided
`uncollectible`	Red	Marked as uncollectible
`draft`	Yellow	Draft invoice not yet sent

Examples

Example 1: Recent Invoices

import { InvoiceHistoryCard } from '@bettercone/ui';

<InvoiceHistoryCard 
  data={invoices}
  maxInvoices={3}
  className="shadow-sm"
/>

Example 2: With Portal Access

import { AuthUIProvider, InvoiceHistoryCard } from '@bettercone/ui';
import { authClient } from '@/lib/auth-client';

export default function BillingPage() {
  return (
    <AuthUIProvider authClient={authClient}>
      <InvoiceHistoryCard 
        data={recentInvoices}
        onBeforeManage={async () => {
          // Track analytics
          await analytics.track('billing_portal_opened');
        }}
      />
    </AuthUIProvider>
  );
}

Example 3: Custom Styling

<InvoiceHistoryCard
  data={invoices}
  classNames={{
    base: "border-2",
    header: "bg-muted",
    content: "p-6",
    footer: "border-t",
  }}
/>

Migration from v0.2.x

// Before (v0.2.x) - No breaking changes for this component
<InvoiceHistoryCard data={invoices} />

// After (v0.3.0) - Same API
<InvoiceHistoryCard data={invoices} />

// New in v0.3.0 - Portal access
<AuthUIProvider authClient={authClient}>
  <InvoiceHistoryCard />
</AuthUIProvider>

SubscriptionCard - Display subscription
PaymentMethodCard - Payment methods
BillingDashboard - Complete billing view

InvoiceHistoryCard

InvoiceHistoryCard

Installation

Features

Usage

Props

Invoice Types

Status Badges

Examples

Example 1: Recent Invoices

Example 2: With Portal Access

Example 3: Custom Styling

Migration from v0.2.x

See Also

On this page