Skip to content
EvolveEvolveEvolve

feature-order

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

Order history and order detail for a signed-in shopper, read-only. Consumers see their own orders; business buyers see their company's, with purchase-order references and reverse-charge VAT. 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-order @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-order/styles.css";

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

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

Then render it on a page:

"use client";


import { useOrder } from "@evolve-storefront/feature-order/hooks";
import { OrderDetail, OrderDetailSkeleton } from "@evolve-storefront/feature-order/order-detail";
import { OrderProvider } from "@evolve-storefront/feature-order/provider";


type Props = { orderNumber: string; isAuthenticated: boolean };


export function OrderPage({ orderNumber, ...session }: Props) {
  return (
    <OrderProvider mode="consumer" isAuthenticated={session.isAuthenticated}>
      <OrderView orderNumber={orderNumber} />
    </OrderProvider>
  );
}


function OrderView({ orderNumber }: { orderNumber: string }) {
  const { data: order, isPending } = useOrder(orderNumber);
  // The query waits for the session, so it stays pending rather than settling empty.
  if (isPending) return <OrderDetailSkeleton />;
  return order ? <OrderDetail order={order} /> : null;
}

Components

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

OrderDetailPure presentation of a single order.
OrderConfirmationThe page a buyer lands on after placing an order.
OrderResumeThe page a buyer lands on when they come back to an order they did not pay for.
OrderHistoryPure presentation of the order history.
RecentOrdersThe buyer's latest orders on a dashboard, as a rail of cards with a link to the full history.

Hooks

14 hooks to read and change the data yourself, for when you build your own UI. The example above only needs useOrder. 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.