ReturnList

Pure presentation of the returns list. It never fetches; the caller passes the resolved returns page (via useReturns) and owns pagination.

import { ReturnList } from "@evolve-storefront/feature-return/return-list";

Renders inside ReturnProvider.

Preview

DefaultOpen in Storybook ↗

Usage

const { data } = useReturns();

// No children + a renderItem = the standard composition.
<ReturnList
  returns={data?.items}
  total={data?.pagination.totalCount ?? undefined}
  renderItem={(entry) => <ReturnCard return={entry} actions={<ViewReturnLink id={entry.id} />} />}
/>;

Props

No props of its own.

Change the layout

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

<ReturnList>
  <ReturnListItems
    returns={data.items}
    total={data.pagination.totalCount ?? undefined}
    renderItem={(entry) => <ReturnCard return={entry} />}
    empty={<ReturnListEmpty>{t("start-return")}</ReturnListEmpty>}
  />
</ReturnList>;

ReturnCardSummary row for one return: RMA number, orders, requested date and by whom, item count, status.

Prop	Type	Description
return	ReturnSummary
actions?	ReactNode	Per-row action (e.g. a "View return" link) — composed by the caller.

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

ReturnListItemsThe returns list plus its pager.

No props of its own.

ReturnOfflineNoticeOffline-returns notice.

Prop	Type	Description
children?	ReactNode

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	ReturnCardSkeleton	Loading state for ReturnCard.
Empty	ReturnListEmpty	Empty state for the returns list.
Loading	ReturnListSkeleton	Loading state for ReturnList — gap-4 section around a gap-3 card list.

Examples

PagedServer-paginated: page and onPageChange are controlled, and the caller refetches.

const [page, setPage] = useState(1);
const { data } = useReturns({ page, pageSize: 10 });

<ReturnList
  returns={data?.items}
  total={data?.pagination.totalCount ?? undefined}
  pageSize={10}
  page={page}
  onPageChange={setPage}
  renderItem={renderItem}
/>;

Open in Storybook ↗

Empty

// The default empty state, with the app's own way to start a return.
<ReturnList
  returns={[]}
  total={0}
  renderItem={renderItem}
  emptyAction={<Link href="/returns/new">{t("start-return")}</Link>}
/>;

Open in Storybook ↗

LoadingSkeleton and real view adjacent — the only cheap check that the placeholder mirrors the DOM it replaces.

// Gate on `isPending`, never `isLoading`: a query still waiting on auth
// reports `isLoading: false` with no data.
const returns = useReturns();

if (returns.isPending) return <ReturnListSkeleton />;

return <ReturnList returns={returns.data?.items} total={returns.data?.pagination.totalCount ?? undefined} renderItem={renderItem} />;

Open in Storybook ↗