Skip to content
EvolveEvolveEvolve

ApprovalRuleList

A business unit's approval rules as a table: name and description, which orders, whose orders, who approves, an on/off switch that saves at once, and an edit link. It never fetches; the caller passes useApprovalRules's page.

import { ApprovalRuleList } from "@evolve-storefront/feature-organization/approval/rules";

Renders inside OrganizationProvider.

Preview

DefaultOpen in Storybook ↗

Usage

Every clause kind in words, the tiers as steps, and role names rather than keys.

const { data } = useApprovalRules();
const { data: unit } = useBusinessUnit(businessUnitId);


<ApprovalRuleList
  rules={data?.items ?? []}
  pagination={data?.pagination}
  roles={unit?.availableRoles}
  customFieldLabels={{ costCenter: t("cost-center") }}
  actions={<Link href="/account/approval-rules/new">{t("new-rule")}</Link>}
  renderEditLink={(rule, props) => <Link href={`/account/approval-rules/${rule.id}`} {...props} />}
/>;

Props

No props of its own.

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.

LoadingApprovalRuleListSkeletonPlaceholder rows for ApprovalRuleList, in its columns, while the page loads.