PurchaseOrderCommentsList Container

The PurchaseOrderCommentsList container displays all comments associated with the currently selected purchase order. 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.

The container content updates automatically when a new comment is submitted through the PurchaseOrderCommentForm container. After receiving the event, the container displays a heading for each comment (including date and author) and the comment text. If the total number of comments exceeds the visibleRecordsLimit, a View More button is shown.

PurchaseOrderCommentsList container

Displayed information

• A heading for each comment (including date and author)
• The comment text
• A View More button (shown only when the number of comments exceeds the visibleRecordsLimit)

Available actions

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.
visibleRecordsLimit	number	No	Sets the maximum number of comments to display initially. Controls how many comments appear before requiring a ‘Show More’ action. Use to prevent overwhelming users with long comment threads and improve page load performance.
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.

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

• Magento_PurchaseOrder::view_purchase_orders

Integration example

Basic

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

await provider.render(PurchaseOrderCommentsList, {
  withHeader: true,
  withWrapper: true,
  visibleRecordsLimit: 5,
})(element);

Compact

await provider.render(PurchaseOrderCommentsList, {
  withHeader: true,
  withWrapper: true,
  visibleRecordsLimit: 3,
})(element);

Minimal

await provider.render(PurchaseOrderCommentsList, {
  withHeader: false,
  withWrapper: false,
  visibleRecordsLimit: 2,
  className: 'custom-comments-list',
})(element);

Configuration

Parameter	Type	Required	Description
withHeader	boolean	No	Shows or hides the section header Comments. 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 to avoid nested cards.
visibleRecordsLimit	number	No	Number of comments shown initially before the Show more button appears. Use 5 (default) for standard purchase order details page, 3 for compact displays or dashboard widgets, 10 or higher to show all comments without toggle (for short comment lists), or 2 for minimal preview with expand option.
className	string	No	Additional CSS classes for custom styling of the container. Use to apply custom spacing, margins, or other styles. Useful for adjusting layout in specific contexts or matching design requirements.

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