Quote Management initialization

The Quote Management initializer configures the drop-in for managing negotiable quotes, quote templates, and quote workflows. Use initialization to set quote identifiers, customize data models, and enable internationalization for multi-language B2B storefronts.

Version: 1.0.0-beta5

Configuration options

The following table describes the configuration options available for the Quote Management initializer:

Parameter	Type	Req?	Description
langDefinitions	LangDefinitions	No	Language definitions for internationalization (i18n). Override dictionary keys for localization or branding.
quoteId	string	No	Quote identifier used to load and display a specific negotiable quote. Pass this to initialize the drop-in with quote details on page load.
quoteTemplateId	string	No	Quote template identifier used to load and display a specific quote template. Pass this to initialize the drop-in with template details on page load.

Default configuration

The initializer runs with these defaults when no configuration is provided:

import { initializers } from '@dropins/tools/initializer.js';
import { initialize } from '@dropins/storefront-quote-management';

// All configuration options are optional
await initializers.mountImmediately(initialize, {
  langDefinitions: {}, // Uses built-in English strings
  models: {}, // Uses default data models
  // Drop-in-specific defaults:
  // quoteId: undefined // See configuration options below
  // quoteTemplateId: undefined // See configuration options below
});

Language definitions

Override dictionary keys for localization or branding. The langDefinitions object maps locale keys to custom strings that override default text for the drop-in.

import { initializers } from '@dropins/tools/initializer.js';
import { initialize } from '@dropins/storefront-quote-management';

const customStrings = {
  'AddToCart': 'Add to Bag',
  'Checkout': 'Complete Purchase',
  'Price': 'Cost',
};

const langDefinitions = {
  default: customStrings,
};

await initializers.mountImmediately(initialize, { langDefinitions });

Tip

For complete dictionary customization including all available keys and multi-language support, see the Quote Management Dictionary page.

Customizing data models

Extend or transform data models by providing custom transformer functions. Use the models option to add custom fields or modify existing data structures returned from the backend.

Available models

The following models can be customized through the models configuration option:

Model	Description
NegotiableQuoteModel	Transforms negotiable quote data from GraphQL including quote details, status, items, totals, comments, and history. Use this to add custom fields or modify existing quote data structures.

The following example shows how to customize the NegotiableQuoteModel model for the Quote Management drop-in:

import { initializers } from '@dropins/tools/initializer.js';
import { initialize } from '@dropins/storefront-quote-management';

const models = {
  NegotiableQuoteModel: {
    transformer: (data) => ({
      // Add urgency badge for expiring quotes (within 7 days)
      isExpiringSoon: data?.expirationDate &&
        new Date(data.expirationDate) - Date.now() < 7 * 24 * 60 * 60 * 1000,
      // Custom status display for better UX
      statusDisplay: data?.status === 'SUBMITTED' ? 'Pending Review' : data?.status,
      // Add formatted expiration date
      expirationFormatted: data?.expirationDate ?
        new Date(data.expirationDate).toLocaleDateString() : null,
    }),
  },
};

await initializers.mountImmediately(initialize, { models });

Drop-in configuration

The Quote Management initializer configures the drop-in for managing negotiable quotes, quote templates, and quote workflows. Use initialization to set quote identifiers, customize data models, and enable internationalization for multi-language B2B storefronts.

import { initializers } from '@dropins/tools/initializer.js';
import { initialize } from '@dropins/storefront-quote-management';

await initializers.mountImmediately(initialize, {
  langDefinitions: {},
  quoteId: 'abc123',
  quoteTemplateId: 'abc123',
});

Note

Refer to the Configuration options table for detailed descriptions of each option.

Configuration types

The following TypeScript definitions show the structure of each configuration object:

langDefinitions

Maps locale identifiers to dictionaries of key-value pairs. The default locale is used as the fallback when no specific locale matches. Each dictionary key corresponds to a text string used in the drop-in UI.

langDefinitions?: {
  [locale: string]: {
    [key: string]: string;
  };
};

Model definitions

The following TypeScript definitions show the structure of each customizable model:

NegotiableQuoteModel

interface NegotiableQuoteModel {
  uid: string;
  name: string;
  createdAt: string;
  salesRepName: string;
  expirationDate: string;
  updatedAt: string;
  status: NegotiableQuoteStatus;
  isVirtual: boolean;
  buyer: {
    firstname: string;
    lastname: string;
  };
  templateName?: string;
  totalQuantity: number;
  comments?: {
    uid: string;
    createdAt: string;
    author: {
      firstname: string;
      lastname: string;
    };
    text: string;
    attachments?: {
      name: string;
      url: string;
    }[];
  }[];
  history?: NegotiableQuoteHistoryEntry[];
  prices: {
    appliedDiscounts?: Discount[];
    appliedTaxes?: Tax[];
    discount?: Currency;
    grandTotal?: Currency;
    grandTotalExcludingTax?: Currency;
    shippingExcludingTax?: Currency;
    shippingIncludingTax?: Currency;
    subtotalExcludingTax?: Currency;
    subtotalIncludingTax?: Currency;
    subtotalWithDiscountExcludingTax?: Currency;
    totalTax?: Currency;
  };
  items: NegotiableQuoteCartItem[];
  shippingAddresses?: ShippingAddress[];
  canCheckout: boolean;
  canSendForReview: boolean;
  lockedForEditing?: boolean;
  canDelete: boolean;
  canClose: boolean;
  canUpdateQuote: boolean;
  readOnly: boolean;
}