ApprovalStatusBadge
An order's approval state, as a pill. Lives here rather than in a feature because both the approval queue and the order surfaces render it, and a feature may not depend on another feature — so two independent copies of the same three states was the only alternative.
import { ApprovalStatusBadge } from "@evolve-storefront/commerce-ui/approval-status-badge";Renders inside AddressConfigProvider.
Design notes
Falls back to the raw status when no message resolves: the union is closed at compile time but the value arrives from the API, so a status the backend adds before we translate it degrades to an untranslated pill instead of throwing.
Preview
Usage
Every state at once, so a brand can see the three tones side by side.
<ApprovalStatusBadge status={order.approval.status} />Props
| Prop | Type | Description |
|---|---|---|
status | "PENDING" | "APPROVED" | "REJECTED" | The domain status this badge shows, published as MoreA feature already holds this value and used to drop it: the label is localized, so the rendered text is not a selector, and the tone is shared by every status that maps to it. Without this a brand can reach "the negative ones" but never "a returned order". Passed through verbatim — status casing mirrors the framework's GraphQL enums,
so it is |
data-component? | undefined | A badge's identity and its published axes are not a caller's to rename. Typed away so a call site renaming one fails to compile rather than silently shadowing the selector a brand was told to use. |
data-tone? | undefined | |
data-status? | undefined |
Any other props go to the root element, like on a plain HTML element.
Examples
Unknown StatusA status the backend added before we translated it renders as the raw value, not as a thrown MISSING_MESSAGE.
<ApprovalStatusBadge status={order.approval.status} />