ItemsQuoted Container

The ItemsQuoted container displays a summary of items that have been quoted, providing a quick overview of quoted products. It shows product information and pricing, quantity and discount details, subtotal calculations, and action buttons for quote management.

The component includes responsive design for mobile and desktop viewing.

Version: 1.0.0

Configuration

The ItemsQuoted container provides the following configuration options:

Parameter	Type	Req?	Description
quoteData	NegotiableQuoteModel	No	Quote data object. Auto-populated from drop-in state when omitted.
onItemCheckboxChange	function	No	Callback when item checkbox is toggled. Use for tracking selections or custom validation.
onItemDropdownChange	function	No	Callback when item action dropdown changes. Use for custom action handling or analytics.
onUpdate	function	No	Callback on form submission (quantity/note updates). Use for custom validation or tracking.
onRemoveItemsRef	function	No	Provides access to internal item removal handler. Use for custom removal workflows.
onRemoveModalStateChange	function	No	Callback when remove confirmation modal opens/closes. Use for tracking or custom modal logic.

Slots

This container exposes the following slots for customization:

Slot	Type	Required	Description
ProductListTable	function	No	Customizes the quoted items table. Use to replace or wrap the default table UI while keeping the built-in handlers for item selection, dropdown actions, quantity changes, and submission.
QuotePricesSummary	SlotProps	No	Customizes the pricing summary for quoted items. Use to change how totals and price breakdowns are displayed.

Usage

The following example demonstrates how to use the ItemsQuoted container:

import { render as provider } from '@dropins/storefront-quote-management/render.js';
import { ItemsQuoted } from '@dropins/storefront-quote-management/containers/ItemsQuoted.js';

await provider.render(ItemsQuoted, {
  quoteData: quoteData,
  onItemCheckboxChange: onItemCheckboxChange,
  onItemDropdownChange: onItemDropdownChange,
  slots: {
    // Add custom slot implementations here
  }
})(block);