Route Stops

An ordered multi-order trip - pickups and drop-offs with done, current and failed states, cash per stop, a trip summary and a per-stop action slot.

PreviewOpen ↗

Code

<RouteStops stops={[{ id: "p1", kind: "pickup", name: "Bakery" }, { id: "d1", kind: "dropoff", name: "Sara", cashMinor: 10000 }]} />

Delivery · beta

Live examples and controls: Route Stops in the lab.

Install

npx shadcn@latest add https://docs.nasaqui.com/r/route-stops.json

The courier's to-do list for a trip. The first stop that is not done is the current one and gets the actions.

When to use

A courier trip with several pickups and drop-offs.

When not to use

Order history: use Timeline.
Drawing the path: use MapView routes.

Import

import { RouteStops } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick start

<RouteStops stops={[{ id: "p1", kind: "pickup", name: "Bakery" }, { id: "d1", kind: "dropoff", name: "Sara", cashMinor: 10000 }]} />

Anatomy

RouteStops  data-slot="route-stops"
├─ summary: stops, cash to collect
└─ ol > li  data-slot="route-stop"  data-kind data-status data-current
   ├─ marker, name, address, order ref, ETA, note
   └─ actions (current stop, or all)

API

Prop	Type	Default	Description
`stops`	`RouteStop[]`	required	`id`, `kind` (`pickup`/`dropoff`), `name`, `nameAr`, `address`, `addressAr`, `status` (`pending`/`done`/`failed`), `orderRef`, `cashMinor`, `eta`, `note`, `noteAr`.
`currency`	`string`	`"USD"` (`"SAR"` in Arabic)	ISO currency.
`onSelectStop`	`(stop) => void`	none	Makes stops clickable.
`renderActions`	`(stop, { current }) => ReactNode`	none	Per-stop actions.
`actionsForAll`	`boolean`	`false`	Show actions on every stop, not just the current one.
`hideSummary`	`boolean`	`false`	Hide the trip summary.
`locale` / `labels`	`"en" \| "ar"` / partial strings	context	Language and overrides.