Quote Management Slots

The Quote Management drop-in exposes 36 slots in 4 containers for customizing specific UI sections. Use slots to replace or extend container components. For default properties available to all slots, see Extending drop-in components.

Version: 0.0.1

Container	Slots
ItemsQuoted	ProductListTable, QuotePricesSummary
ManageNegotiableQuote	QuoteName, QuoteStatus, Banner, Details, ActionBar, QuoteContent, ItemsQuotedTab, CommentsTab, HistoryLogTab, ShippingInformationTitle, ShippingInformation, QuoteCommentsTitle, QuoteComments, Footer
QuotesListTable	QuoteName, Created, CreatedBy, Status, LastUpdated, QuoteTemplate, QuoteTotal, Actions, EmptyQuotes, ItemRange, PageSizePicker, Pagination
RequestNegotiableQuoteForm	ErrorBanner, SuccessBanner, Title, CommentField, QuoteNameField, AttachFileField, RequestButton, SaveDraftButton

ItemsQuoted slots

The slots for the ItemsQuoted container allow you to customize its appearance and behavior.

interface ItemsQuotedProps

slots?: {
ProductListTable?: SlotProps<{
      items: NegotiableQuoteModel['items'];
      canEdit: boolean;
      onItemCheckboxChange?: (item: NegotiableQuoteCartItem, isSelected: boolean) => void;
      onItemDropdownChange?: (item: NegotiableQuoteCartItem, action: string) => void;
      onUpdate?: (e: SubmitEvent) => void;
    }>;
    QuotePricesSummary?: SlotProps<{
      items: NegotiableQuoteModel['items'];
      prices: NegotiableQuoteModel['prices'];
    }>;
};

QuotePricesSummary slot

The QuotePricesSummary slot allows you to customize the quote prices summary section of the ItemsQuoted container.

 provider.render(ItemsQuoted, {
  slots: {
    QuotePricesSummary: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom QuotePricesSummary';
      ctx.appendChild(element);
    }
  }
});

---

ManageNegotiableQuote slots

The slots for the ManageNegotiableQuote container allow you to customize its appearance and behavior.

interface ManageNegotiableQuoteProps

slots?: {
QuoteName?: SlotProps<{
      quoteName?: string;
      quoteData?: NegotiableQuoteModel;
    }>;
    QuoteStatus?: SlotProps<{
      quoteStatus?: string;
      quoteData?: NegotiableQuoteModel;
    }>;
    Banner?: SlotProps<{
      quoteData?: NegotiableQuoteModel;
    }>;
    Details?: SlotProps<{
      quoteData?: NegotiableQuoteModel;
    }>;
    ActionBar?: SlotProps<{
      quoteData?: NegotiableQuoteModel;
    }>;
    QuoteContent?: SlotProps<{
      quoteData?: NegotiableQuoteModel;
    }>;
    ItemsQuotedTab?: SlotProps<{
      quoteData?: NegotiableQuoteModel;
    }>;
    CommentsTab?: SlotProps<{
      quoteData?: NegotiableQuoteModel;
    }>;
    HistoryLogTab?: SlotProps<{
      quoteData?: NegotiableQuoteModel;
    }>;
    ShippingInformationTitle?: SlotProps<{
      quoteData?: NegotiableQuoteModel;
    }>;
    ShippingInformation?: SlotProps<{
      quoteData?: NegotiableQuoteModel;
      loading?: boolean;
      setLoading?: (loading: boolean) => void;
    }>;
    QuoteCommentsTitle?: SlotProps<{
      quoteData?: NegotiableQuoteModel;
    }>;
    QuoteComments?: SlotProps<{
      quoteData?: NegotiableQuoteModel;
    }>;
    Footer?: SlotProps<{
      quoteData?: NegotiableQuoteModel;
      comment?: string;
      isSubmitting?: boolean;
    }>;
};

QuoteName slot

The QuoteName slot allows you to customize the quote name section of the ManageNegotiableQuote container.

 provider.render(ManageNegotiableQuote, {
  slots: {
    QuoteName: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom QuoteName';
      ctx.appendChild(element);
    }
  }
});

QuoteStatus slot

The QuoteStatus slot allows you to customize the quote status section of the ManageNegotiableQuote container.

 provider.render(ManageNegotiableQuote, {
  slots: {
    QuoteStatus: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom QuoteStatus';
      ctx.appendChild(element);
    }
  }
});

Banner slot

The Banner slot allows you to customize the banner section of the ManageNegotiableQuote container.

 provider.render(ManageNegotiableQuote, {
  slots: {
    Banner: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom Banner';
      ctx.appendChild(element);
    }
  }
});

Details slot

The Details slot allows you to customize the details section of the ManageNegotiableQuote container.

 provider.render(ManageNegotiableQuote, {
  slots: {
    Details: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom Details';
      ctx.appendChild(element);
    }
  }
});

ActionBar slot

The ActionBar slot allows you to customize the action bar section of the ManageNegotiableQuote container.

 provider.render(ManageNegotiableQuote, {
  slots: {
    ActionBar: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom ActionBar';
      ctx.appendChild(element);
    }
  }
});

QuoteContent slot

The QuoteContent slot allows you to customize the quote content section of the ManageNegotiableQuote container.

 provider.render(ManageNegotiableQuote, {
  slots: {
    QuoteContent: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom QuoteContent';
      ctx.appendChild(element);
    }
  }
});

ItemsQuotedTab slot

The ItemsQuotedTab slot allows you to customize the items quoted tab section of the ManageNegotiableQuote container.

 provider.render(ManageNegotiableQuote, {
  slots: {
    ItemsQuotedTab: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom ItemsQuotedTab';
      ctx.appendChild(element);
    }
  }
});

CommentsTab slot

The CommentsTab slot allows you to customize the comments tab section of the ManageNegotiableQuote container.

 provider.render(ManageNegotiableQuote, {
  slots: {
    CommentsTab: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom CommentsTab';
      ctx.appendChild(element);
    }
  }
});

HistoryLogTab slot

The HistoryLogTab slot allows you to customize the history log tab section of the ManageNegotiableQuote container.

 provider.render(ManageNegotiableQuote, {
  slots: {
    HistoryLogTab: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom HistoryLogTab';
      ctx.appendChild(element);
    }
  }
});

ShippingInformationTitle slot

The ShippingInformationTitle slot allows you to customize the shipping information title section of the ManageNegotiableQuote container.

 provider.render(ManageNegotiableQuote, {
  slots: {
    ShippingInformationTitle: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom ShippingInformationTitle';
      ctx.appendChild(element);
    }
  }
});

QuoteCommentsTitle slot

The QuoteCommentsTitle slot allows you to customize the quote comments title section of the ManageNegotiableQuote container.

 provider.render(ManageNegotiableQuote, {
  slots: {
    QuoteCommentsTitle: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom QuoteCommentsTitle';
      ctx.appendChild(element);
    }
  }
});

QuoteComments slot

The QuoteComments slot allows you to customize the quote comments section of the ManageNegotiableQuote container.

 provider.render(ManageNegotiableQuote, {
  slots: {
    QuoteComments: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom QuoteComments';
      ctx.appendChild(element);
    }
  }
});

Footer slot

The Footer slot allows you to customize the footer section of the ManageNegotiableQuote container.

 provider.render(ManageNegotiableQuote, {
  slots: {
    Footer: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom Footer';
      ctx.appendChild(element);
    }
  }
});

---

QuotesListTable slots

The slots for the QuotesListTable container allow you to customize its appearance and behavior.

interface QuotesListTableProps

slots?: {

    QuoteName?: SlotProps<{ quote: NegotiableQuoteListEntry }>;

    Created?: SlotProps<{ quote: NegotiableQuoteListEntry }>;

    CreatedBy?: SlotProps<{ quote: NegotiableQuoteListEntry }>;

    Status?: SlotProps<{ quote: NegotiableQuoteListEntry }>;

    LastUpdated?: SlotProps<{ quote: NegotiableQuoteListEntry }>;

    QuoteTemplate?: SlotProps<{ quote: NegotiableQuoteListEntry }>;

    QuoteTotal?: SlotProps<{ quote: NegotiableQuoteListEntry }>;

    Actions?: SlotProps<{
      quote: NegotiableQuoteListEntry;
      onViewQuote?: (id: string, name: string, status: string) => void;
    }>;

    EmptyQuotes?: SlotProps;

    ItemRange?: SlotProps<{
      startItem: number;
      endItem: number;
      totalCount: number;
      currentPage: number;
      pageSize: number;
    }>;

    PageSizePicker?: SlotProps<{
      pageSize: number;
      pageSizeOptions: number[];
      onPageSizeChange?: (pageSize: number) => void;
    }>;

    Pagination?: SlotProps<{
      currentPage: number;
      totalPages: number;
      onChange?: (page: number) => void;
    }>;
};

QuoteName slot

The QuoteName slot allows you to customize the quote name section of the QuotesListTable container.

 provider.render(QuotesListTable, {
  slots: {
    QuoteName: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom QuoteName';
      ctx.appendChild(element);
    }
  }
});

Created slot

The Created slot allows you to customize the created section of the QuotesListTable container.

 provider.render(QuotesListTable, {
  slots: {
    Created: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom Created';
      ctx.appendChild(element);
    }
  }
});

CreatedBy slot

The CreatedBy slot allows you to customize the created by section of the QuotesListTable container.

 provider.render(QuotesListTable, {
  slots: {
    CreatedBy: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom CreatedBy';
      ctx.appendChild(element);
    }
  }
});

Status slot

The Status slot allows you to customize the status section of the QuotesListTable container.

 provider.render(QuotesListTable, {
  slots: {
    Status: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom Status';
      ctx.appendChild(element);
    }
  }
});

LastUpdated slot

The LastUpdated slot allows you to customize the last updated section of the QuotesListTable container.

 provider.render(QuotesListTable, {
  slots: {
    LastUpdated: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom LastUpdated';
      ctx.appendChild(element);
    }
  }
});

QuoteTemplate slot

The QuoteTemplate slot allows you to customize the quote template section of the QuotesListTable container.

 provider.render(QuotesListTable, {
  slots: {
    QuoteTemplate: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom QuoteTemplate';
      ctx.appendChild(element);
    }
  }
});

QuoteTotal slot

The QuoteTotal slot allows you to customize the quote total section of the QuotesListTable container.

 provider.render(QuotesListTable, {
  slots: {
    QuoteTotal: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom QuoteTotal';
      ctx.appendChild(element);
    }
  }
});

EmptyQuotes slot

The EmptyQuotes slot allows you to customize the empty quotes section of the QuotesListTable container.

 provider.render(QuotesListTable, {
  slots: {
    EmptyQuotes: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom EmptyQuotes';
      ctx.appendChild(element);
    }
  }
});

ItemRange slot

The ItemRange slot allows you to customize the item range section of the QuotesListTable container.

 provider.render(QuotesListTable, {
  slots: {
    ItemRange: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom ItemRange';
      ctx.appendChild(element);
    }
  }
});

---

RequestNegotiableQuoteForm slots

The slots for the RequestNegotiableQuoteForm container allow you to customize its appearance and behavior.

interface RequestNegotiableQuoteFormProps

slots?: {
ErrorBanner?: SlotProps<{
      message: string,
    }>;
    SuccessBanner?: SlotProps<{
      message: string,
    }>;
    Title?: SlotProps<{
      text: string,
    }>;
    CommentField?: SlotProps<{
      formErrors: Record<string, string>;
      isFormDisabled: boolean;
      setFormErrors: (errors: Record<string, string>) => void;
    }>;
    QuoteNameField?: SlotProps<{
      formErrors: Record<string, string>;
      isFormDisabled: boolean;
      setFormErrors: (errors: Record<string, string>) => void;
    }>;
    AttachFileField?: SlotProps<{
      onChange: (files: File[]) => void, formErrors: Record<string, string>,
      isFormDisabled: boolean
    }>;
    RequestButton?: SlotProps<{
      requestNegotiableQuote: typeof requestNegotiableQuote;
      formErrors: Record<string, string>;
      isFormDisabled: boolean;
      setIsFormDisabled: (isFormDisabled: boolean) => void;
    }>;
    SaveDraftButton?: SlotProps<{
      requestNegotiableQuote: typeof requestNegotiableQuote;
      formErrors: Record<string, string>;
      isFormDisabled: boolean;
      setIsFormDisabled: (isFormDisabled: boolean) => void;
    }>;
};

ErrorBanner slot

The ErrorBanner slot allows you to customize the error banner section of the RequestNegotiableQuoteForm container.

 provider.render(RequestNegotiableQuoteForm, {
  slots: {
    ErrorBanner: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom ErrorBanner';
      ctx.appendChild(element);
    }
  }
});

SuccessBanner slot

The SuccessBanner slot allows you to customize the success banner section of the RequestNegotiableQuoteForm container.

 provider.render(RequestNegotiableQuoteForm, {
  slots: {
    SuccessBanner: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom SuccessBanner';
      ctx.appendChild(element);
    }
  }
});

Title slot

The Title slot allows you to customize the title section of the RequestNegotiableQuoteForm container.

 provider.render(RequestNegotiableQuoteForm, {
  slots: {
    Title: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom Title';
      ctx.appendChild(element);
    }
  }
});

CommentField slot

The CommentField slot allows you to customize the comment field section of the RequestNegotiableQuoteForm container.

 provider.render(RequestNegotiableQuoteForm, {
  slots: {
    CommentField: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom CommentField';
      ctx.appendChild(element);
    }
  }
});

QuoteNameField slot

The QuoteNameField slot allows you to customize the quote name field section of the RequestNegotiableQuoteForm container.

 provider.render(RequestNegotiableQuoteForm, {
  slots: {
    QuoteNameField: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom QuoteNameField';
      ctx.appendChild(element);
    }
  }
});

RequestButton slot

The RequestButton slot allows you to customize the request button section of the RequestNegotiableQuoteForm container.

 provider.render(RequestNegotiableQuoteForm, {
  slots: {
    RequestButton: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom RequestButton';
      ctx.appendChild(element);
    }
  }
});

SaveDraftButton slot

The SaveDraftButton slot allows you to customize the save draft button section of the RequestNegotiableQuoteForm container.

 provider.render(RequestNegotiableQuoteForm, {
  slots: {
    SaveDraftButton: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom SaveDraftButton';
      ctx.appendChild(element);
    }
  }
});

---