ApprovalRuleForm

Create or edit an approval rule: its name and description, whose orders, which orders as clauses, and who approves, step by step. Errors show once a save was tried, and the server's own errors show under the field they name. A condition set in the back office cannot be edited here and is kept as it is.

import { ApprovalRuleForm } from "@evolve-storefront/feature-organization/approval/rule-form";

Renders inside OrganizationProvider.

Preview

CreateOpen in Storybook ↗

Usage

A new rule from scratch, saved through the mock gateway and read back: the amount goes out in cents and returns as the same words the rules list shows.

<ApprovalRuleForm
  roles={unit.availableRoles}
  currency="EUR"
  countries={routing.countries}
  customFields={[{ name: "costCenter", label: t("cost-center"), type: "text" }]}
  onSaved={() => router.push("/account/approval-rules")}
  actions={<Link href="/account/approval-rules">{t("cancel")}</Link>}
/>;

Props

Prop	Type	Description
roles	readonly ApprovalRole[]	BusinessUnit.availableRoles; a role's id is its key.
currency	string	The currency a new order-total clause compares in.
countries	readonly string[]	ISO country codes a shipping-country clause offers.
rule?	ApprovalRule	The rule to edit, from useApprovalRule; omit to create one.
customFields?	readonly ApprovalCustomField[]	Order custom fields a clause may compare, from the site's config.
onSaved?	((rule: ApprovalRule) => void)	Runs with the saved rule, such as to go back to the list.
actions?	ReactNode	Beside the save button, such as a link back to the list.

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

Examples

With ErrorA refused save: this edit renames a rule to one that exists already, so saving shows the server's error under the name field.

// Nothing to pass: the form maps the gateway's refusal itself, under the
// field it names or above the save button.
<ApprovalRuleForm rule={rule} roles={roles} currency="EUR" onSaved={onSaved} />;

Open in Storybook ↗