QuoteList

Pure presentation of a quote or quote-request list. It never fetches; the caller passes the resolved page (via useQuotes / useQuoteRequests) and owns pagination. Requests and quotes are shown as distinct lists — render one QuoteList per kind.

import { QuoteList } from "@evolve-storefront/feature-quote/quote-list";

Renders inside QuoteProvider.

Preview

QuotesOpen in Storybook ↗

Usage

Quotes list.

// One page of offers, so no pager renders and nothing is passed for it.
<QuoteList kind="quote" entries={data.quotes} pagination={data.pagination} renderItem={renderItem} />;

Props

No props of its own.

Change the layout

Pass children to QuoteList to arrange its parts yourself. Every part is exported from @evolve-storefront/feature-quote/quote-list.

QuoteCardSummary card for one quote or quote request: the buyer's own reference as the headline (the record id where there is none), thumbnails of what is in it, and the seller's quote number, dates and net total as facts.

validUntil goes to the badge as well, so a quote read before its deadline passed still shows as expired once it has.

Prop	Type	Description
entry	QuoteListEntry
actions?	ReactNode	Per-row action (e.g. a "View" link) — composed by the caller.
requestedBy?	string	Who asked, where the page knows. It joins the date rather than taking a row of its own: on a company's list the two are one fact — when, and by which colleague. More Not a field on the quote. The requester is the project's to resolve, so a consumer that has a directory passes a name and one that does not passes nothing.
now?	Date	"Now" for the validity check; defaults to the current time. More The badge also derives EXPIRED from it, so a list rendered against a fixed time — a story, a snapshot — needs the same one its rows do.

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

QuoteListControlsA status filter and a sort for the quotes list.

Prop	Type	Description
onStatusChange	(status: QuoteStatus | null) => void	Hands over the chosen status, or null for all. Feed it to useQuotes.
onSortChange	(sort: QuoteSortOrder) => void	Hands over the chosen order. Feed it to useQuotes.
status?	QuoteStatus | null	The status the list is narrowed to, or null/omitted for all of them.
sort?	QuoteSortOrder	The list's order. Defaults to ORDERABLE_FIRST, as useQuotes does.
statuses?	readonly QuoteStatus[]	The states offered, in order.

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

QuoteListItemsThe quote list plus its pager, with the empty state when there are no entries.

No props of its own.

QuoteTabsThe overview's two tabs: quotes, and the requests waiting to become them.

Two tabs because they are two record types, not two filters on one — a request has no price and no validity window, so a single list would have empty columns for half its rows.

The counts are the reason the page is opened. "Has my request been answered" is a fact about the tab the buyer is not looking at, so no list read can carry it and every consumer wrote a second query. useQuoteCounts is that query, shipped.

Links rather than buttons, so which tab is open survives a reload and can be sent to a colleague. Routing stays the app's: href builds the path and renderLink binds the router.

Prop	Type	Description
kind	QuoteKind	Which tab the page is showing.
href	(kind: QuoteKind) => string	Where each tab goes. The state is the URL, so a tab is a link.
counts?	{ quotes?: number | undefined; requests?: number | undefined; }	How many records each tab holds — useQuoteCounts(). More A count is omitted rather than shown as 0 where the engine would not produce one, so a tab with no number is "not counted", never "empty".
renderLink?	((props: NavItemRenderProps) => ReactNode)	Render each tab with the app's router link. Defaults to a plain anchor.

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	QuoteCardSkeleton	Loading state for QuoteCard.
Empty	QuoteListEmpty	Empty state for a quote / request list.
Loading	QuoteListSkeleton	Loading state for QuoteList — gap-4 section around a gap-3 card list.