feature-invoice setup

Styles

Import them once, in the stylesheet where you load Tailwind:

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

Translations

The package ships its texts in @evolve-storefront/feature-invoice/messages. evolve messages merges them into your message files and never overwrites a text you changed.

InvoiceProvider

Single provider for the invoice feature. Supplies the injected auth/session/mode seam the data hooks read. Invoices are business-only and permission-gated: in mode: "business" the buyer must hold viewCapability (default VIEW_INVOICES, the schema enum value) for the feature to render/query.

import { InvoiceProvider } from "@evolve-storefront/feature-invoice/provider";

Prop	Type	Description
children	ReactNode
mode?	InvoiceMode
isAuthenticated?	boolean
businessUnitId?	string
capabilities?	string[]
viewCapability?	string	Capability that unlocks invoices in business mode.
returnUrls?	InvoiceReturnUrls	Where the payment provider returns the buyer after paying an invoice. Omit it in a storefront that never offers to pay one.

Prefetching on the server

Fetch the data in a Server Component so the page renders with it instead of a skeleton.

invoiceCreditQueryOptionsThe business unit's credit.

import { invoiceCreditQueryOptions } from "@evolve-storefront/feature-invoice/queries";

function invoiceCreditQueryOptions(
  args: { gqlClient: ClientFetcher; scope: InvoiceScope; enabled?: boolean | undefined; },
): OmitKeyof<UseQueryOptions<InvoiceCredit | null, Error, InvoiceCredit | null, readonly ["invoices", "credit", string]>, "queryFn"> & { queryFn?: QueryFunction<In…

Option	Type	Description
gqlClient	ClientFetcher
scope	InvoiceScope
enabled?	boolean

invoicePaymentMethodsQueryOptionsThe methods offered for one invoice.

import { invoicePaymentMethodsQueryOptions } from "@evolve-storefront/feature-invoice/queries";

Both scopes, since Customer.invoice(id) landed. It was business-only and returned null for a personal invoice, which made the pay picker say nothing was offered — truthful while there was no route to the invoice at all, and a lie the moment the detail page could be opened.

function invoicePaymentMethodsQueryOptions(
  args: InvoicePaymentMethodsArgs,
): OmitKeyof<UseQueryOptions<InvoicePaymentMethod[] | null, Error, InvoicePaymentMethod[] | null, readonly ["invoices", "payment-methods", string, string, string]>…

Option	Type	Description
gqlClient	ClientFetcher
scope	InvoiceScope
id	string
device	InvoiceClientDevice
enabled?	boolean

invoiceQueryOptionsA single invoice by id.

import { invoiceQueryOptions } from "@evolve-storefront/feature-invoice/queries";

function invoiceQueryOptions(
  args: { gqlClient: ClientFetcher; scope: InvoiceScope; id: string; enabled?: boolean | undefined; },
): OmitKeyof<UseQueryOptions<InvoiceSummary | null, Error, InvoiceSummary | null, readonly ["invoices", "detail", string, string]>, "queryFn"> & { queryFn?: QueryF…

Option	Type	Description
gqlClient	ClientFetcher
scope	InvoiceScope
id	string
enabled?	boolean

invoicesQueryOptionsA page of invoices for the scope, filtered by state.

import { invoicesQueryOptions } from "@evolve-storefront/feature-invoice/queries";

function invoicesQueryOptions(
  args: InvoiceListArgs,
): OmitKeyof<UseQueryOptions<InvoiceResult | null, Error, InvoiceResult | null, readonly ["invoices", "list", string, number, string, number | "default", string, s…

Option	Type	Description
gqlClient	ClientFetcher
scope	InvoiceScope
page?	number
pageSize?	number
status?	InvoiceStatus[]	Show only these states; omit for all of them. A list, as the schema argument is.
enabled?	boolean
searchTerm?	string
invoiceDateFrom?	string	yyyy-mm-dd, inclusive.
invoiceDateUntil?	string	yyyy-mm-dd, inclusive.

invoiceStatusCountsQueryOptionsHow many invoices each status holds under a search and date range, whatever the list's own status filter, as { OPEN: 3, … }.

import { invoiceStatusCountsQueryOptions } from "@evolve-storefront/feature-invoice/queries";

function invoiceStatusCountsQueryOptions(
  args: { gqlClient: ClientFetcher; scope: InvoiceScope; enabled?: boolean | undefined; } & InvoiceListFilterValues,
): OmitKeyof<UseQueryOptions<Partial<Record<InvoiceStatus, number>> | null, Error, Partial<Record<InvoiceStatus, number>> | null, readonly ["invoices", "list", str…