ApprovalRuleForm Container

Provides a form for creating or editing purchase order approval rules with validation and submission handling.

Version: 1.0.0-beta3

Configuration

The ApprovalRuleForm container provides the following configuration options:

Parameter	Type	Req?	Description
withHeader	boolean	No	When true, displays the header section. Set to false when embedding the container within a layout that provides its own header.
withWrapper	boolean	No	When true, wraps the container in a styled wrapper. Set to false for custom styling or when the container is embedded within another styled component.
className	string	No	Additional CSS classes to apply to the container for custom styling.
approvalRuleID	string	No	The unique identifier for the approval rule to display or manage. Required to fetch the correct data from the backend.
routeApprovalRulesList	function	Yes	Function to generate the URL for navigating to the approval rules list. Use to implement custom routing logic or add query parameters.
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.

Slots

This container does not expose any customizable slots.

Usage

The following example demonstrates how to use the ApprovalRuleForm container:

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

await provider.render(ApprovalRuleForm, {
  routeApprovalRulesList: routeApprovalRulesList,
  withHeader: true,
  withWrapper: true,
})(block);