CreditSummary

How much of the business unit's credit is left: a bar of what remains out of the limit, and the credit in use, which is not the open invoices' total. Feed it useInvoiceCredit().data. Past the limit the bar is empty and the line says by how much.

import { CreditSummary } from "@evolve-storefront/feature-invoice/credit-summary";

Renders inside InvoiceProvider.

Preview

DefaultOpen in Storybook ↗

Usage

Credit left out of the limit, and the credit in use. In use is not open invoices: an order bought on account uses credit before it is invoiced.

const { data: credit, isPending } = useInvoiceCredit();

if (isPending) return <CreditSummarySkeleton />;
if (!credit) return null;
return <CreditSummary credit={credit} />;

Props

Prop	Type	Description
credit	InvoiceCredit
headingLevel?	HeadingLevel	Heading level of the title. Defaults to 2, a section of the page.

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

CreditSummarySkeleton

Stands in for CreditSummary while useInvoiceCredit() is pending.

Examples

Over The LimitPast the limit: the bar is empty and the line says by how much, in the warning tone.

<CreditSummary credit={credit} />; // available below zero

Open in Storybook ↗

LoadingWhile useInvoiceCredit() is pending; the title is static, so it renders at once.

<CreditSummarySkeleton />;

Open in Storybook ↗