PurchaseOrderStatus Container

The PurchaseOrderStatus container displays the status of the currently selected purchase order along with any available actions. The container requires no props. It listens for the purchase-order/data event emitted by the purchase order initializer and uses the event payload to render its content.

After receiving the event, the container shows a heading with the purchase order status, a status description message, and a set of action buttons (or a message if no actions are available). The container supports four native actions: Approve Purchase Order, Reject Purchase Order, Cancel Purchase Order, and Place Order for the purchase order. Action availability is controlled by the backend.

PurchaseOrderStatus container

Displayed information

• A heading with the purchase order status
• A status description message
• A set of action buttons (or a message if no actions are available)

Available actions

Parameter	Type	Req?	Description
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.

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

• Magento_PurchaseOrder::view_purchase_orders

Integration example

Basic

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

await provider.render(PurchaseOrderStatus, {
  withHeader: true,
  withWrapper: true,
})(element);

Minimal

await provider.render(PurchaseOrderStatus, {
  withHeader: false,
  withWrapper: false,
  className: 'custom-po-status',
})(element);

Custom Actions

await provider.render(PurchaseOrderStatus, {
  slots: {
    PurchaseOrderActions: (ctx) => {
      const customButton = document.createElement('button');
      customButton.innerText = 'Additional Action';
      ctx.appendChild(customButton);
    },
  },
})(element);

Configuration

Parameter	Type	Required	Description
className	string	No	Additional CSS classes for custom styling.
withHeader	boolean	No	Shows or hides the section header. Use true (default) for a standalone section on purchase order details. Use false when embedding in another component with its own header.
withWrapper	boolean	No	Wraps content in a Card component with secondary styling. Use true (default) for standard page layout with visual separation. Use false when embedding inside another card or container.
slots.PurchaseOrderActions	any	No	Slot allowing you to override action buttons. Context includes: loading (loading flag), availableActions (list of available purchase order actions from backend), handleApprove, handleReject, handleCancel, handlePlaceOrder (action callbacks). Use to override default action buttons or introduce custom actions with custom business logic in addition to default ones.

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