Ride quotePro

Ride options on one clock from now: the wait, the ride and the arrival, then the driver once booked.

Markdown

On this page

ProFive rides to the airport on one clock: the shared one is cheapest and lands last. Book one and meet the driver.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/ride-quote

Usage

tsx

import { RideQuote } from "@/components/ui/chatcn/pro/ride-quote"

<RideQuote
  pickup={{ label: "Rua da Prata 112", detail: "Baixa" }}
  dropoff={{ label: "Lisbon Airport, Terminal 1" }}
  distance="9 km"
  options={quotes}
  currency="EUR"
  onRequest={(option) => rides.request(option.id)}
  onCancel={() => rides.cancel()}
/>

Each option is drawn on a shared clock from now: dashes while you wait for the car, a bar while you ride. The cheap shared ride that lands last, and the car that is far away but quick, show it before you read a number. Every row still says it in words: minutes away and the arrival time, with the cheapest and fastest labeled. busy adds an amber line with the multiplier, and was strikes the price quoted earlier in the conversation when it has moved. priceMax turns the price into a range. Book resolves with a driver and the card becomes the driver: how far away, the same bar, who, the car, and the plate set like a plate, with Call, Message and Cancel ride.

Examples

States

ProA driver on the way, busy pricing with a price that moved and a failed booking, nothing nearby, disabled, loading and error.

Props

Prop	Type	Notes
`pickup`, `dropoff`	`{ label, detail? }`	The route
`distance`	`string`	Shown with the drive time
`options`	`{ id, name, detail?, seats?, pickupIn, rideFor, price, priceMax?, was?, busy?, unavailable? }[]`	Minutes and major units
`value`, `defaultValue`, `onValueChange`	`string`	The chosen option
`currency`, `locale`	`string`	Prices format with `Intl`, tabular figures. Default `USD`, `en-US`
`now`	`Date`	The clock arrival times are read from
`onRequest`	`(option) => RideDriver \| undefined \| Promise<...>`	Resolve with `{ name, photo?, rating?, car, plate, pickupIn? }`
`driver`	`RideDriver \| null`	Controlled; shows the driver card
`onCancel`, `onCall`, `onMessage`	`() => unknown`	Driver actions
`loading`, `error`, `onRetry`, `disabled`		States
`labels`	`Partial<RideQuoteLabels>`	Every string, for translation

Keyboard

Key	Action
Tab	The options (one stop), then Book
Arrow keys	Move between options (native radios)
Enter or Space	Press the focused button

Accessibility

Options are a radio group; each is named with its name, minutes away, arrival and price.
Busy pricing and unavailable reasons are linked with aria-describedby.
The clock and bars are decorative; the times are also text in each row.
The driver line is a status message; the plate is read with the word Plate.

Motion

The radio dot scales in 150 ms. The driver card fades up 4 px in 180 ms. Reduced motion keeps the fades only.