ReturnableOrders

The shopper's delivered orders that can still be returned, each with its deadline, plus a pager. A page can hold fewer orders than pageSize: the framework pages delivered orders and the returnable ones are filtered from each page.

import { ReturnableOrders } from "@evolve-storefront/feature-return/returnable-orders";

Renders inside ReturnProvider.

Preview

DefaultOpen in Storybook ↗

Usage

Three orders left to return; a fully returned order is left out.

// On the Returns page, above the shopper's returns.
const { data, isPending } = useReturnableOrders();
if (isPending) return <ReturnListSkeleton />;

<ReturnableOrders
  orders={data?.items}
  total={data?.pagination.totalCount ?? undefined}
  renderItem={(order) => (
    <ReturnableOrderCard
      order={order}
      action={<Link href={`/returns/new?order=${order.id}`}>{t("start-return")}</Link>}
    />
  )}
/>;

Props

No props of its own.

Change the layout

Pass children to ReturnableOrders to arrange its parts yourself. Every part is exported from @evolve-storefront/feature-return/returnable-orders.

ReturnableOrderCardOne returnable order: its number, its return deadline and what is left to return.

Prop	Type	Description
order	ReturnableOrder
action?	ReactNode	The start-return action, such as a link into the request form for this order.

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.

Empty

ReturnableOrdersEmpty

Empty state for the returnable orders: nothing delivered is still inside its return window.

Examples

EmptyNothing delivered is still inside its return window.

// The default empty state renders when no order is left.
const { data, isPending } = useReturnableOrders();
if (isPending) return <ReturnListSkeleton />;

<ReturnableOrders
  orders={data?.items}
  total={data?.pagination.totalCount ?? undefined}
  renderItem={(order) => (
    <ReturnableOrderCard
      order={order}
      action={<Link href={`/returns/new?order=${order.id}`}>{t("start-return")}</Link>}
    />
  )}
/>;

Open in Storybook ↗