RequestNegotiableQuoteForm Container

The RequestNegotiableQuoteForm container enables customers to request new negotiable quotes from their cart contents. This component handles quote name and comment input, draft saving functionality, form validation and error handling, and success/error messaging.

It includes support for file attachments and integrates with cart contents.

Version: 1.0.0

Configuration

The RequestNegotiableQuoteForm container provides the following configuration options:

Parameter	Type	Req?	Description
cartId	string	Yes	Specifies the cart ID to create the quote from. Required to identify which shopping cart contains the items to be quoted.
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 allowed MIME types for file attachments. Use to restrict uploads to specific document types required by your quote approval process (for example, \`[‘application/pdf’, ‘image/jpeg’, ‘image/png’]\`).

Slots

This container exposes the following slots for customization:

Slot	Type	Required	Description
ErrorBanner	SlotProps	No	Customize the error message display when quote submission fails. Receives the error message. Use to add custom error tracking, retry mechanisms, or support contact information.
SuccessBanner	SlotProps	No	Customize the success message display after quote submission. Receives the success message. Use to add next steps, links to the quote details page, or custom celebration animations.
Title	SlotProps	No	Customize the form heading. Receives the title text. Use to add custom branding, help icons, or contextual information about the quote process.
CommentField	function	No	Customize the comment input field. Receives form state and error handlers. Use to add character counters, rich text editing, comment templates, or AI-assisted comment generation.
QuoteNameField	function	No	Customize the quote name input field. Receives form state and error handlers. Use to add auto-naming logic based on cart contents, validation rules, or naming conventions specific to your organization.
AttachFileField	function	No	Customize the file attachment input control. Receives upload handler and form state. Use to add drag-and-drop functionality, file previews, or integration with document management systems.
AttachedFilesList	function	No	Customize how attached files are displayed. Receives the file list and removal handler. Use to add file previews, virus scanning status, download links, or file metadata display.
RequestButton	function	No	Customize the primary submit button for requesting a quote. Receives the submission handler and form state. Use to add confirmation dialogs, custom loading states, or multi-step submission workflows.
SaveDraftButton	function	No	Customize the draft save button for saving incomplete quote requests. Receives the save handler and form state. Use to add auto-save functionality, draft naming conventions, or draft management interfaces.

Usage

The following example demonstrates how to use the RequestNegotiableQuoteForm container:

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

await provider.render(RequestNegotiableQuoteForm, {
  cartId: "abc-123",
  maxFiles: 0,
  maxFileSize: 0,
  slots: {
    // Add custom slot implementations here
  }
})(block);