ChatWindowQuote

PreviousNext

Displays one or more resort price quotes inside the chat message log. A single quote renders as a full inline card; two or more render as compact cards in a horizontal scroll zone.

Single quote

Cancún

Mexico

Cancún, 15 June 2026 to 24 June 2026, for 2 adults 2 children

Your All-Inclusive package includes:

  • • Meals and snacks at any time
  • • Drinks, alcoholic and non-alcoholic
  • • Sports and activities

You can customise your transport and room category directly on the website.

Multiple quotes

Cancún

Mexico

Cancún
15 June 2026 to 24 June 2026,
for 2 adults 2 children

Punta Cana

Dominican Republic

Punta Cana
20 July 2026 to 29 July 2026,
for 2 adults 2 children

'use client';

import { ChatWindowQuote } from '@/ui/ChatWindowQuote';
import type { ChatWindowQuoteItem } from '@/ui/ChatWindowQuote';

const cancun: ChatWindowQuoteItem = {
  id: '1',
  resortName: 'Cancún',
  country: 'Mexico',
  imageUrl: 'https://picsum.photos/seed/cancun/400/300',
  dateRange: '15 June 2026 to 24 June 2026',
  pax: 'for 2 adults 2 children',
  packageIncludes: [
    'Meals and snacks at any time',
    'Drinks, alcoholic and non-alcoholic',
    'Sports and activities',
  ],
  additionalInfo: 'You can customise your transport and room category directly on the website.',
};

const puntaCana: ChatWindowQuoteItem = {
  id: '2',
  resortName: 'Punta Cana',
  country: 'Dominican Republic',
  imageUrl: 'https://picsum.photos/seed/puntacana/400/300',
  dateRange: '20 July 2026 to 29 July 2026',
  pax: 'for 2 adults 2 children',
};

export function ChatWindowQuoteDemo() {
  return (
    <div className="flex flex-col gap-32 w-340">
      <div className="flex flex-col gap-8">
        <p className="text-b4 font-semibold text-black">Single quote</p>
        <ChatWindowQuote quotes={[cancun]} />
      </div>
      <div className="flex flex-col gap-8">
        <p className="text-b4 font-semibold text-black">Multiple quotes</p>
        <ChatWindowQuote quotes={[cancun, puntaCana]} />
      </div>
    </div>
  );
}

Installation

npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/chat-window-quote.json

Usage

ChatWindowQuote is used internally by ChatWindow — you rarely need to render it directly. The standard entry point is chatRef.current.showQuotes(quotes). See the ChatWindow docs for the full integration pattern.

import { ChatWindowQuote } from '@/ui/ChatWindowQuote';
import type { ChatWindowQuoteItem } from '@/ui/ChatWindowQuote';
 
const quotes: ChatWindowQuoteItem[] = [
  {
    id: '1',
    resortName: 'Cancún',
    country: 'Mexico',
    imageUrl: 'https://example.com/cancun.jpg',
    dateRange: '15 June 2026 to 24 June 2026',
    pax: 'for 2 adults 2 children',
  },
];
 
export function Component() {
  return (
    <ChatWindowQuote
      quotes={quotes}
      onCtaClick={(quote) => console.log('Selected:', quote.resortName)}
    />
  );
}

Behaviour

Single quote — renders as a full-width card with:

  1. A resort image (with gradient overlay and name/country text in white).
  2. Date range and pax summary below the image.
  3. A saffron "See prices" CTA button.
  4. Optional package includes bullet list and additional info paragraph.

Multiple quotes — renders as a horizontally scrollable row of compact square cards. Each card shows the resort image, name, dates, and a black "See prices" button. A scroll progress indicator appears below the row.

Each call to showQuotes() appends a new block to the message log — previous quote blocks remain visible above.

API Reference

ChatWindowQuote

PropTypeDefaultDescription
quotesChatWindowQuoteItem[]—Required. One or more quote items to display.
onCtaClick(quote: ChatWindowQuoteItem) => voidundefinedCalled with the selected quote when a "See prices" button is clicked.
classNamestringundefinedAdditional CSS classes on the outer wrapper.

ChatWindowQuoteItem

FieldTypeDefaultDescription
idstring—Required. Unique identifier for the quote (used as React key).
resortNamestring—Required. Name of the resort (e.g. "Cancún").
countrystring—Required. Country of the resort (e.g. "Mexico").
imageUrlstring—Required. URL for the resort hero image.
dateRangestring—Required. Human-readable date range (e.g. "15 June 2026 to 24 June 2026").
paxstring—Required. Passenger summary (e.g. "for 2 adults 2 children").
ctaLabelstring"See prices"Label for the CTA button.
packageIncludesstring[]undefinedBullet-point list of package items. Shown in single-quote mode only.
additionalInfostringundefinedFree-text paragraph shown below package includes. Single-quote mode only.

Notes

  • packageIncludes and additionalInfo are silently ignored when more than one quote is passed — the compact scroll layout has no space for them.
  • The resort image is treated as decorative (alt=""). The resort name and country are always visible as text overlay, satisfying screen-reader requirements.
  • Each quote card carries role="article" with aria-label set to the resort name, so screen readers can navigate between results.
  • The horizontal scroll zone uses the Scrollbar component, which provides keyboard-draggable scroll and a visible progress indicator.