invoices

Summary

The invoice history of a workspace, one card per invoice.

Raw wireframe

• .context/designs/web/store/invoices.html
• .context/designs/web/store/invoices-empty.html

Why it is drawn this way

The invoice number is derived. It is the last eight characters of the Stripe invoice ID, upper-cased.

The dollar sign is fixed. The amount is cents divided by 100 with a literal $ in front and the currency code after, whatever the currency is.

Period is one date. Only periodStartAt is printed. Paid On shows only when the invoice has paidAt.

Download opens a new tab. The button calls window.open(invoice.url) and renders only when the invoice has a URL. It is a button.

Fifty, with no paging. The query asks for take: 50 and the page has no pagination control.

No way back to billing. The page has no back link or breadcrumb.

Related

• billing
• subscription
• plans

Sources

• apps/website/src/app/workspace/[id]/billing/invoices/page.tsx
• packages/ui/src/utils/format.utils.ts