Skip to content
EvolveEvolveEvolve

feature-invoice

@evolve-storefront/feature-invoice · v1.0.0 · Storybook ↗

Invoices for business buyers: list them and filter by status, open one, download its PDF, and start a payment of the full amount. Only buyers whose company role allows it see them. The package ships the data hooks and ready-made components; your app composes them into its own pages.

Get started

  1. Install the package with the peer dependencies it needs. It comes from the Evolve registry, which needs a one-time sign-in.

    pnpm add @evolve-storefront/feature-invoice @labdigital/graphql-fetcher @tanstack/react-query graphql next next-intl react
    Requirements6
    @labdigital/graphql-fetcher>=3
    @tanstack/react-query>=5
    graphql>=16
    next>=16.2.11 <17
    next-intl>=4
    react>=19

  2. Import its styles in the stylesheet where you load Tailwind. Without them the components render unstyled.

    @import "@evolve-storefront/feature-invoice/styles.css";

  3. Wrap your app in InvoiceProvider. Setup lists its props.

  4. Add its translations to your message files with evolve messages.

Then render it on a page:

"use client";


import { useInvoice } from "@evolve-storefront/feature-invoice/hooks";
import { InvoiceDetail, InvoiceDetailSkeleton } from "@evolve-storefront/feature-invoice/invoice-detail";
import { InvoiceProvider } from "@evolve-storefront/feature-invoice/provider";


type Props = { id: string; isAuthenticated: boolean; businessUnitId: string; capabilities: string[] };


export function InvoicePage({ id, ...session }: Props) {
  return (
    <InvoiceProvider mode="business" {...session}>
      <InvoiceView id={id} />
    </InvoiceProvider>
  );
}


function InvoiceView({ id }: { id: string }) {
  const { data: invoice, isPending } = useInvoice(id);
  // The query waits for the session, so it stays pending rather than settling empty.
  if (isPending) return <InvoiceDetailSkeleton />;
  return invoice ? <InvoiceDetail invoice={invoice} /> : null;
}

Components

What you place on your pages. Each one has a preview, its props, and how to change its layout.

CreditSummaryHow 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.
InvoiceDetailPure presentation of a single invoice.
InvoiceListPure presentation of the invoice list.
OverdueInvoicesTodoA TodoList item for the invoices past their due date: how many, and since when the oldest one given is due.
RecentInvoicesThe invoices still to be paid, on a dashboard, as a rail of cards with a link to the full list.

Hooks

7 hooks to read and change the data yourself, for when you build your own UI. The example above only needs useInvoice. All hooks

More in this package

  • Setup and server: what the package needs in your project.
  • Advanced: contexts, graphql documents, data and cache helpers, errors, other functions and constants, types.