Skip to content
EvolveEvolveEvolve

feature-quote

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

Quotes for business buyers: request a quote from a cart, follow your quote requests and quotes, view a priced quote, and turn it into an order. 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-quote @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-quote/styles.css";

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

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

Then render it on a page:

"use client";


import { useQuote } from "@evolve-storefront/feature-quote/hooks";
import { QuoteDetail, QuoteDetailSkeleton } from "@evolve-storefront/feature-quote/quote-detail";
import { QuoteProvider } from "@evolve-storefront/feature-quote/provider";


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


export function QuotePage({ id, ...session }: Props) {
  return (
    <QuoteProvider {...session}>
      <QuoteView id={id} />
    </QuoteProvider>
  );
}


function QuoteView({ id }: { id: string }) {
  const { data: quote, isPending } = useQuote(id);
  // The query waits for the session, so it stays pending rather than settling empty.
  if (isPending) return <QuoteDetailSkeleton />;
  // `kind="request"` shows a quote request, which has no order action.
  return quote ? <QuoteDetail quote={quote} kind="quote" /> : null;
}

Components

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

QuoteRequestCommentThe buyer's optional message to the seller, held by the app until submit: the request it belongs to does not exist yet, so nothing is written while typing.
QuoteRequestRemoveCartWhether to delete the cart once the request exists.
QuoteDetailPresentation of a quote or quote request.
QuoteListPure presentation of a quote or quote-request list.
QuotesReadyTodoA TodoList item for the quotes the buyer can order now, with the soonest deadline among them.
QuoteRequestButtonTrigger, dialog and open state.

Hooks

11 hooks to read and change the data yourself, for when you build your own UI. The example above only needs useQuote. 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, schemas, other functions and constants, types.