RequireApprovalPurchaseOrders Container

The RequireApprovalPurchaseOrders container displays purchase orders created by other company users that either require approval from or have already been approved by the currently logged-in customer. No special props are required to initialize the container. It automatically loads and retrieves purchase order data using a customer GraphQL query (field: customer. purchase_orders, filter: my_approvals).

The container displays purchase orders in a tabular format with expandable rows. Each row represents a single purchase order with details like PO number, status, creator, dates, and total. If no purchase orders are available, an empty-state notification is displayed within the table. The container includes configurable pagination.

RequireApprovalPurchaseOrders container

Displayed information

• PO# (Purchase Order number)
• Status (current status)
• Created By (user who created the PO)
• Action (Show/Hide to expand/collapse)
• Expanded row: Order Number, Created Date, Updated Date, Total, View action

Available actions

Parameter	Type	Req?	Description
initialPageSize	PageSizeListProps[]	Yes	Sets the initial pagination size for the table. Controls how many items appear per page on initial load. Use to optimize display for different screen sizes, match user preferences stored in your system, or improve performance on mobile devices.
routePurchaseOrderDetails	function	No	Generates the URL for navigating to purchase order details. Returns a URL string or performs navigation. Use to implement custom routing logic, add query parameters, or integrate with your application’s routing system.
setColumns	function	No	Transforms the default table column configuration. Receives default columns and returns modified columns. Use to show/hide columns based on user roles, reorder columns for better UX, or add custom column definitions with computed values or formatting.
setRowsData	function	No	Transforms or filters row data before rendering. Receives default rows and returns modified rows. Use to add computed fields, format data for display, filter rows based on business logic, or enrich data with external API calls.
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.
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.
skeletonRowCount	number	No	Sets the number of skeleton loading rows to display while data is being fetched. Controls the visual feedback shown during data loading. Use to improve perceived performance and provide consistent layout during async operations.

Access to the container is governed by the following ACL permission:

• Magento_PurchaseOrder::view_purchase_orders

Integration example

Basic

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

await provider.render(RequireApprovalPurchaseOrders, {
  routePurchaseOrderDetails: (poId) => `/purchase-order/details?poRef=${poId}`,
  withHeader: true,
  withWrapper: true,
})(element);

Custom Page Size

await provider.render(RequireApprovalPurchaseOrders, {
  routePurchaseOrderDetails: (poId) => `/purchase-order/details?poRef=${poId}`,
  initialPageSize: [
    { text: '5', value: '5', selected: true },
    { text: '10', value: '10', selected: false },
    { text: '20', value: '20', selected: false },
  ],
  skeletonRowCount: 10,
})(element);

Configuration

Parameter	Type	Required	Description
initialPageSize	PageSizeListProps[]	Yes	Configuration for page size dropdown options. Customize available page sizes (e.g., 5, 10, 20 items per page) and set the default selected page size with selected: true.
routePurchaseOrderDetails	(poId: string) => string	No	Function that generates the URL for the purchase order details page. Return the path to the PO details page with the PO ID. Used by the View action button in each table row.
setColumns	(defaultColumns: Column[]) => Column[]	No	Function to customize table columns configuration. Use to reorder columns, hide specific columns, or customize column labels for specific use cases.
setRowsData	(defaultRows: Row[]) => Row[]	No	Function to transform or enhance row data before display. Use to add calculated fields, format dates or currency, or inject custom properties for rendering.
className	string	No	Additional CSS classes for custom styling. Apply custom layout adjustments or add theme-specific styles.
withHeader	boolean	No	Shows or hides the section header. Use true (default) for a standalone page. Use false when embedding in a dashboard or another component.
withWrapper	boolean	No	Wraps the table in a Card component. Use true (default) for standard page layout. Use false when embedding inside another card.
skeletonRowCount	number	No	Number of skeleton rows shown during loading. Use 5 (default) for a typical loading state. Match to the expected page size for consistent UX.

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