ManageNegotiableQuote Container

The ManageNegotiableQuote container provides comprehensive quote management capabilities for existing quotes. It displays quote details (creation date, sales rep, expiration), manages quote status and updates, shows the product list with pricing and quantity controls, provides quote actions (print, copy, delete, send for review), displays shipping information, and includes a quote comments section.

All actions respect permission-based access control.

Version: 1.0.0-beta5

Configuration

The ManageNegotiableQuote container provides the following configuration options:

Parameter	Type	Req?	Description
onActionsDropdownChange	function	No	Callback function triggered when actions dropdown change
onActionsButtonClick	function	No	Callback function triggered when actions button click
onSendForReview	function	No	Callback function triggered when send for review
maxFiles	number	No	Sets the maximum number of files that can be attached when sending a quote for review. Enforces company policies on attachment limits and prevents excessive file uploads that could impact performance or storage.
maxFileSize	number	No	Sets the maximum file size in bytes for attachments. Controls the upper limit for individual file uploads. Use to prevent large file uploads that could impact performance, storage, or network bandwidth.
acceptedFileTypes	string[]	No	Specifies an array of MIME types allowed for file attachments (for example `[‘application/pdf’, ‘image/jpeg’, ‘image/png’]`). Use to restrict uploads to specific document types required by your quote approval process.
onDuplicateQuote	function	No	Callback function triggered when duplicate quote

Slots

This container exposes the following slots for customization:

Slot	Type	Required	Description
QuoteName	SlotProps	No	Customize the quote name display and rename functionality. Use to add custom icons, styling, or additional metadata next to the quote name.
QuoteStatus	SlotProps	No	Customize how the quote status is displayed. Use to add custom status badges, colors, or additional status information.
Banner	SlotProps	No	Customize the alert banner shown for specific quote states (submitted, pending, expired). Use to provide custom messaging or styling for different quote statuses.
DuplicateQuoteWarningBanner	SlotProps	No
Details	SlotProps	No	Customize the quote metadata display (created date, sales rep, expiration). Use to add additional fields, reorder information, or apply custom formatting.
ActionBar	SlotProps	No	Customize the action buttons and dropdown menu for quote operations. Use to add custom actions, reorder existing actions, or integrate with external systems.
QuoteContent	SlotProps	No	Customize the entire tabbed content area containing items, comments, and history. Use to add new tabs, reorder tabs, or completely replace the tabbed interface.
ItemsQuotedTab	SlotProps	No	Customize the Items Quoted tab content. Use to add additional product information, custom filtering, or integrate with inventory systems.
CommentsTab	SlotProps	No	Customize the Comments tab displaying quote discussions. Use to add custom comment filters, sorting, or rich text formatting.
HistoryLogTab	SlotProps	No	Customize the History Log tab showing quote activity. Use to add custom filtering, grouping by action type, or export functionality.
ShippingInformationTitle	SlotProps	No	Customize the shipping section heading. Use to add icons, tooltips, or additional contextual information about shipping requirements.
ShippingInformation	function	No	Customize the shipping address display and selection. Use to integrate with third-party shipping services, add address validation, or provide custom address formatting.
QuoteCommentsTitle	SlotProps	No	Customize the quote comments section heading. Use to add help text, character limits, or formatting guidelines.
QuoteComments	SlotProps	No	Customize the comment input field. Use to add rich text editing, @mentions, file attachments inline, or comment templates.
AttachFilesField	function	No	Customize the file attachment input control. Use to integrate with document management systems, add drag-and-drop functionality, or provide custom file previews.
AttachedFilesList	function	No	Customize how attached files are displayed. Use to add file previews, virus scanning status, or integration with external document viewers.
Footer	function	No	Customize the Send for Review button and footer actions. Use to add additional submission options, validation steps, or approval workflow controls.

Usage

The following example demonstrates how to use the ManageNegotiableQuote container:

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

await provider.render(ManageNegotiableQuote, {
  onActionsDropdownChange: onActionsDropdownChange,
  onActionsButtonClick: onActionsButtonClick,
  onSendForReview: onSendForReview,
  slots: {
    // Add custom slot implementations here
  }
})(block);