RecentOrders

The buyer's latest orders on a dashboard, as a rail of cards with a link to the full history. An account with no orders gets a line saying so instead of a rail.

import { RecentOrders } from "@evolve-storefront/feature-order/recent-orders";

Renders inside OrderProvider.

Preview

DefaultOpen in Storybook ↗

Usage

Three cards at most, newest first, and the link to every order.

const { data, isPending } = useOrders({ pageSize: 3 });

if (isPending) return <RecentOrdersSkeleton />;
return (
  <RecentOrders
    orders={data?.items ?? []}
    renderAllLink={(children) => <Link href="/account/orders">{children}</Link>}
    renderItem={(order) => <OrderCard order={order} actions={<ViewLink order={order} />} />}
  />
);

Props

Prop	Type	Description
orders	OrderSummary[]	The latest orders, newest first: useOrders({ pageSize: limit }).data.items.
limit?	number	How many to show. Defaults to 3.
renderItem?	((order: OrderSummary) => ReactNode)	One card. Defaults to OrderCard with no action; pass one to link the order.
renderAllLink?	((children: ReactNode) => ReactNode)	Link the "all orders" label to the order history; routing is the app's.
headingLevel?	HeadingLevel
variant?	"recent" | "current"	current titles the rail for orders still on their way, fetched with CURRENT_ORDER_STATUSES, and says so when there are none. Defaults to recent.

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

RecentOrdersSkeleton

Placeholder for RecentOrders: the heading and three cards' worth of rail.

Examples

No OrdersA new account says it has no orders rather than showing an empty rail.

<RecentOrders orders={[]} />;

Open in Storybook ↗

CurrentThe account overview's lead: only orders still on their way, fetched with CURRENT_ORDER_STATUSES, under their own title.

const { data } = useOrders({ status: CURRENT_ORDER_STATUSES, pageSize: 3 });

<RecentOrders variant="current" orders={data?.items ?? []} />;

Open in Storybook ↗

No Current OrdersNothing on its way says so, rather than claiming the account has never ordered.

<RecentOrders variant="current" orders={[]} />;

Open in Storybook ↗

LoadingThe heading and three cards' worth of rail, while useOrders is pending.

if (isPending) return <RecentOrdersSkeleton />;

Open in Storybook ↗