ApprovalRuleForm Container

The ApprovalRuleForm container manages purchase order approval rules. It supports two modes of operation: creating a new approval rule (when approvalRuleID is not provided) or editing an existing rule (when approvalRuleID is provided).

The container displays a comprehensive form for defining rule name, description, status, applicable roles, rule type, conditions, and approver roles. Two actions are available: Save (creates or updates the rule, then redirects) and Cancel (discards changes and redirects).

ApprovalRuleForm container

Form features

• Create a new approval rule or edit an existing one by ID
• Define rule name, description, and status (enabled/disabled)
• Specify who the rule applies to (all users or specific roles)
• Configure rule type (e.g., order total, shipping amount, number of SKUs)
• Set conditions with operators (greater than, less than, etc.)
• Assign approver roles
• Perform Save or Cancel actions with basic validation (required fields)

ACL permissions

Parameter	Type	Req?	Description
withHeader	boolean	No	Controls whether to render the container header section. Set to false when embedding the container within a layout that already provides its own header to avoid duplicate navigation elements.
withWrapper	boolean	No	Controls whether to wrap the container in a styled wrapper element. Set to false when integrating with existing design systems or when the container is embedded within another styled component that provides its own layout structure.
className	string	No	Adds custom CSS classes to the container element. Use to override default styles, integrate with existing design systems, or apply conditional styling based on application state.
approvalRuleID	string	No	Specifies the unique identifier for the approval rule to display or manage. Required to fetch the correct rule data from the backend when viewing or editing existing rules.
routeApprovalRulesList	function	Yes	Generates the URL for navigating to the approval rules list. Returns a URL string or performs navigation. Use to implement custom routing logic, add query parameters, or integrate with your application’s routing system.
onSubmit	function	No	Callback triggered when form is submitted. Use for custom success handling or navigation.
onChange	function	No	Callback triggered when form values change. Use for real-time validation or tracking.

• Magento_PurchaseOrderRule::manage_approval_rules

Integration example

Create New

import { ApprovalRuleForm } from '@dropins/storefront-purchase-order/containers/ApprovalRuleForm.js';
import { render as provider } from '@dropins/storefront-purchase-order/render.js';

await provider.render(ApprovalRuleForm, {
  routeApprovalRulesList: () => '/company/approval-rules',
  withHeader: true,
  withWrapper: true,
})(element);

Edit Existing

await provider.render(ApprovalRuleForm, {
  approvalRuleID: 'rule-123',
  routeApprovalRulesList: () => '/company/approval-rules',
  withHeader: true,
  withWrapper: true,
})(element);

With Callbacks

await provider.render(ApprovalRuleForm, {
  routeApprovalRulesList: () => '/company/approval-rules',
  onSubmit: (data) => console.log('Form submitted:', data),
  onChange: (formData) => console.log('Form changed:', formData),
})(element);

Configuration

Parameter	Type	Required	Description
withHeader	boolean	No	Shows or hides the form header. Use true (default) for a standalone form page. Use false when embedding in a modal or another container.
withWrapper	boolean	No	Wraps form content in a Card component. Use true (default) for standard page layout. Use false when embedding inside another card.
className	string	No	Additional CSS classes for custom styling. Apply custom spacing or layout adjustments, or add theme-specific styles.
approvalRuleID	string	No	ID of the approval rule to edit. If not provided, the form creates a new rule. Omit when creating a new approval rule. Pass the rule ID from URL parameters when editing an existing rule.
routeApprovalRulesList	() => string	Yes	Function that returns the URL to redirect after canceling or saving. Return the approval rules list page URL. Used by the Cancel button and after successful save.
onSubmit	(formValues: FormValuesParams) => Promise<void>	No	Callback function triggered when the form is successfully submitted. Use to track form submissions for analytics, show custom success messages, or trigger additional actions after save.
onChange	(formValues: FormValuesParams) => void	No	Callback function triggered when any form field changes. Use to track user interactions, enable auto-save drafts, or sync form state with external storage.

Admin panel configuration

The Purchase Order (B2B) feature must be enabled at both the store and company levels:

• Store level: Stores > Settings > Configuration > General > B2B Features > Order Approval Configuration > Enable Purchase Orders
• Company level: Customers > Companies > Edit Company > Advanced Settings > Enable Purchase Orders