OverdueInvoicesTodo

A TodoList item for the invoices past their due date: how many, and since when the oldest one given is due. Renders nothing when none is overdue.

import { OverdueInvoicesTodo } from "@evolve-storefront/feature-invoice/overdue-invoices-todo";

Renders inside InvoiceProvider.

Preview

DefaultOpen in Storybook ↗

Usage

Every overdue invoice counted, dated by the oldest on the page.

const { data } = useInvoices({ status: ["OVERDUE"] });

<TodoList>
  <OverdueInvoicesTodo
    invoices={data?.items ?? []}
    count={data?.pagination.totalCount}
    renderLink={(children) => <Link href="/account/invoices?status=OVERDUE">{children}</Link>}
  />
</TodoList>;

Props

Prop	Type	Description
invoices	Pick<InvoiceSummary, "dueDate">[]	The first page of useInvoices({ status: ["OVERDUE"] }).
renderLink	(children: ReactNode) => ReactNode	Link the action to the overdue invoices; routing is the app's.
isDone?	boolean	Already dealt with, as a step of a checklist; styled through data-done, with a success mark before the title. The mark is decorative, so say it in detail.
count?	number | null	Every overdue invoice, the page's totalCount. Defaults to the page's length.

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

Examples

None OverdueNothing overdue: the item is not there, so the list can say there is nothing to do.

<OverdueInvoicesTodo invoices={[]} count={0} renderLink={renderLink} />;

Open in Storybook ↗