# Visitor journey A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Government & legal](https://beamline.io/components/apps/government-legal) app. Live demo: https://beamline.io/components/visitor-journey A visitor's way into a walk-in queue, on their phone. Branches first: each card names its address, whether it's open (until when, closing soon, full, or closed with why) and what can be done there, all in the card's accessible name; a closed branch stays listed and says why. Then two journeys, each with who it's for: join the queue, or check in for a booking by its reference (one that matches nothing is said; neither path makes a second visit). Joining: a service, then first available with its wait or someone who does that service with theirs; a service nobody here gives says what to do instead; switching branch drops a service it doesn't offer, says so, and keeps your details. The visit's page: the branch and its local time above, then arrival and the place in line as two confirmations in order; I'm here a second time keeps the one visit and its place; being called is said; an expired link says so with a way back. The wait, drawn: the minutes large, a dot per person ahead with you at the end, and when you'd be seen and done in the branch's time (amber when it runs past closing, and when it's your turn); beside the steps on a wide screen, above Join or under the ticket on a phone. Before a branch is chosen, each open branch's shortest wait and how many are waiting. ## Use it for - The public, phone-first way into a walk-in queue: picking a branch, joining or checking in, and following the visit. - Anywhere arriving and being in line must be confirmed separately, and a repeated tap must never make a second visit. ## Not for - Booking a timed appointment ([client-booking](https://beamline.io/components/client-booking)). - The staff side of the queue ([visit-board](https://beamline.io/components/visit-board)). ## Anatomy - header: Back, the product's mark, the branch with Change - branches: each with name, address, open state and what can be done there - entry: Join the queue and I have a booking, each with who it's for - join: service, who (first available or someone, each with a wait), your details, Join the queue - check in: booking reference, Find my booking - visit: branch and local time, the ticket, the booking found, Arrived and In the queue as ordered confirmations, I'm here - wait (beside on wide, in the flow on a phone): who it's with, the minutes, a dot per person ahead and You, seen and done around; then the branch, the service and the open state. Before a branch: each open branch's shortest wait and how many are waiting ## States - branch: open (success), closing soon or full (warning), closed with why (danger, not choosable), chosen - service: offered; not offered at a newly chosen branch (dropped, said); nobody gives it today (said, Join held) - wait: about N min; not known yet - join: joining; refused (said, details kept) - check in: looking; not found (said); found - visit: on the way (I'm here); arrived (success) with the place in line; called (warning: act now); I'm here again (same visit, said); link expired (said, Join again) - phone: one column; wide: the visit so far beside the steps - right to left: the layout mirrors - reduced motion: nothing animates - wait past closing - your turn ## Keyboard - Tab through the branches and the two journeys (Enter chooses); arrows within service and who; Tab through details, then the action ## Motion Nothing moves beyond the parts' own feedback. Nothing runs at rest. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `branches` (required) | `Branch[]` | — | | | `services` (required) | `JourneyService[]` | — | | | `defaultBranchId` | `string \| null` | — | | | `defaultVisit` | `JourneyVisit \| null` | — | Start inside a visit (opened from its link). | | `defaultStep` | `"branch" \| "check-in" \| "entry" \| "join"` | — | | | `defaultServiceId` | `string \| null` | — | | | `defaultDetails` | `{ name: string; phone: string; }` | — | | | `now` | `string` | — | | | `onJoin` | `((r: { branchId: string; serviceId: string; staffId: string \| null; name: string; phone…` | — | | | `onFindBooking` | `((branchId: string, ref: string) => Promise<{ visit: JourneyVisit; service: string; tim…` | — | Find a booking by its reference; null when there's none. | | `onArrive` | `((code: string) => Promise)` | — | Mark arrived; resolve with the visit as it is now (a second call returns the same visit). | | `product` | `string` | — | Your product's name, shown as its mark. | | `className` | `string` | — | Classes on the documented visual root; no override by default. | | `ref` | `Ref` | — | Receives the documented native target or imperative handle; omitted by default. | ## Built from - [Avatar](https://beamline.io/components/avatar.md) - [Button](https://beamline.io/components/button.md) - [Empty state](https://beamline.io/components/empty-state.md) - [Input](https://beamline.io/components/input.md) - [Label](https://beamline.io/components/label.md) - [Radio cards](https://beamline.io/components/radio-cards.md) - [Skeleton](https://beamline.io/components/skeleton.md) - [Spinner](https://beamline.io/components/spinner.md) ## Dependencies `lucide-react` ## Import ```tsx import { VisitorJourney } from "@beamline/visitor-journey"; ``` ## Get it Visitor journey is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect) ## More in Government & legal - [Permit application](https://beamline.io/components/permit-application): A permit application filled in over several sittings on a city's portal. Steps with how many answers each still misses; the draft saved as you go and… - [Permit services](https://beamline.io/components/permit-services): Where a permit starts on a city's permitting portal. The work's address resolved to the city (its permits are here) or the county around it (that office… - [Permit fees](https://beamline.io/components/permit-fees): An applicant's permit fees on a city's portal. What's owed across how many permits and how much of it is overdue; every unpaid invoice with its permit… - [Permit record](https://beamline.io/components/permit-record): A submitted permit seen by the applicant. The overview leads with what's waiting on them: the corrections to answer before the next version goes in, each… - [Parcel record](https://beamline.io/components/parcel-record): A property's parcel on a permitting portal. The lot drawn to scale as a site plan: the street, the property lines with their lengths, the dashed setback… - [Document review](https://beamline.io/components/document-review): A PDF going through review: the document in the viewer with every comment pinned to its place, the reviewers' threads beside it (open or resolved, one… - [Signing request](https://beamline.io/components/signing-request): A document sent for signature, its signature page drawn in miniature with each side's block in order. Sides sign as numbered stages that move earlier or… - [Playbook check](https://beamline.io/components/playbook-check): A document's changes checked against a versioned playbook (a rulebook of what's acceptable). Each change shows what it was and is now, then two records… - [Audit room](https://beamline.io/components/audit-room): A compliance audit seen by the company preparing it or by the auditor reviewing it. Evidence keeps the company's readiness (not ready, flagged, ready for… - [Agency book](https://beamline.io/components/agency-book): An insurance agency's book in two places. Estimated commission: the report named an estimate (not received or earned), as of a time; each source system… - [Applicant company](https://beamline.io/components/applicant-company): A contractor's company on a permitting portal. Its identity with the licence and insurance it applies under, each said valid, expiring within 60 days… - [Applicant projects](https://beamline.io/components/applicant-projects): An applicant's permits on a city's portal in one place. Projects through saved views (theirs, their company's, expiring within 30 days) and a search… - [Lease renewals](https://beamline.io/components/lease-renewals): Leases coming up for renewal. The window leads: every tracked lease placed on the days ahead at its end date, coloured by whose step it is (yours, the… - [Queue display](https://beamline.io/components/queue-display): The screen in a waiting room, read from across the room. It draws only a public projection of the queue (ticket codes and counters, never a name or a… Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).