PendingApprovalsTodo

A TodoList item for the orders waiting on the reader's decision. Counts only pending flows the reader may decide, so an order they placed themselves is not listed. Renders nothing when there is none.

import { PendingApprovalsTodo } from "@evolve-storefront/feature-organization/approval/pending-approvals-todo";

Renders inside OrganizationProvider.

Preview

WaitingOpen in Storybook ↗

Usage

Only the orders the reader may decide are counted.

const { data } = useApprovalQueue({ status: "PENDING" });

<TodoList>
  <PendingApprovalsTodo
    approvals={data?.items ?? []}
    renderLink={(children) => <Link href="/account/approvals">{children}</Link>}
  />
</TodoList>;

Props

Prop	Type	Description
approvals	Pick<OrderApproval, "status" | "viewerCanDecide">[]	A page of useApprovalQueue({ status: "PENDING" }).
renderLink	(children: ReactNode) => ReactNode	Link the action to the approval queue; routing is the app's.
isDone?	boolean	Already dealt with, as a step of a checklist; styled through data-done, with a success mark before the title. The mark is decorative, so say it in detail.

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

Examples

None To DecideNothing the reader may decide: the item is not there.

<PendingApprovalsTodo approvals={approvals} renderLink={renderLink} />;

Open in Storybook ↗