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-beta1

Configuration

The RequestNegotiableQuoteForm container provides the following configuration options:

Parameter	Type	Req?	Description
cartId	string	Yes	The unique identifier for the shopping cart to convert into a quote. Required to associate the quote request with specific cart items and pricing.
maxFiles	number	No	Maximum number of files that can be attached to the quote request. Use to enforce company policies on attachment limits or prevent excessive file uploads.
maxFileSize	number	No	Maximum file size in bytes for each attachment. Use to prevent large file uploads that could impact performance or storage costs.
acceptedFileTypes	string[]	No	Array of MIME types allowed for file attachments (for example [‘application/pdf’, ‘image/jpeg’]). Use to restrict uploads to specific document types required by your quote workflow.

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);