RecentInvoices

The invoices still to be paid, on a dashboard, as a rail of cards with a link to the full list. Nothing outstanding gets a line saying so instead of a rail.

import { RecentInvoices } from "@evolve-storefront/feature-invoice/recent-invoices";

Renders inside InvoiceProvider.

Preview

DefaultOpen in Storybook ↗

Usage

Three cards at most, and the link to every invoice.

const { data, isPending } = useInvoices({ pageSize: 3, status: OUTSTANDING_INVOICE_STATUSES });

if (isPending) return <RecentInvoicesSkeleton />;
return (
  <RecentInvoices
    invoices={data?.items ?? []}
    renderAllLink={(children) => <Link href="/account/financial">{children}</Link>}
    renderItem={(invoice) => <InvoiceCard invoice={invoice} actions={<InvoicePayButton invoice={invoice} payHref={payHref(invoice)} />} />}
  />
);

Props

Prop	Type	Description
invoices	InvoiceSummary[]	The latest outstanding invoices, newest first: useInvoices({ pageSize: limit, status: OUTSTANDING_INVOICE_STATUSES }).
limit?	number	How many to show. Defaults to 3.
renderItem?	((invoice: InvoiceSummary) => ReactNode)	One card. Defaults to InvoiceCard with no actions; pass them to pay or download.
renderAllLink?	((children: ReactNode) => ReactNode)	Link the "all invoices" label to the invoices page; routing is the app's.
headingLevel?	HeadingLevel

Any other props go to the root element, like on a plain HTML element.

Loading and empty states

Render these while the data loads or when there is nothing to show, so the page does not jump when it arrives.

Loading

RecentInvoicesSkeleton

Placeholder for RecentInvoices: the heading and three cards' worth of rail.

Examples

Nothing OutstandingNothing outstanding says so rather than showing an empty rail.

<RecentInvoices invoices={[]} />;

Open in Storybook ↗

LoadingThe heading and three cards' worth of rail, while useInvoices is pending.

if (isPending) return <RecentInvoicesSkeleton />;

Open in Storybook ↗