CheckInKiosk

Code

import { CheckInKiosk } from "@fadymondy/nasaq/web";<CheckInKiosk  bookings={todaysBookings}  onCheckIn={async (request) => {    const entry = await api.checkIn(request);    return { entry, position: 3, waitMinutes: 20 };  }}/>

Bookings · beta

Live examples and controls: CheckInKiosk in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/check-in-kiosk.json

For a tablet at the front door. A handheld scanner types into the focused code field like a keyboard. The camera is not used: this component has no scanner. It finds today's booking by code or phone, asks which one when there are several, says so when the person is too early, and offers a walk-in ticket.

When to useCopy Anchor Link

• Patients check themselves in.
• A scanner or a keypad is the only input.

When not to useCopy Anchor Link

• Booking a new visit: use BookingFlow.

ImportCopy Anchor Link

import { CheckInRequest, CheckInResult, CheckInKiosk } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { CheckInKiosk } from "@fadymondy/nasaq/web";

<CheckInKiosk
  bookings={todaysBookings}
  onCheckIn={async (request) => {
    const entry = await api.checkIn(request);
    return { entry, position: 3, waitMinutes: 20 };
  }}
/>

AnatomyCopy Anchor Link

CheckInKiosk                  data-slot="check-in-kiosk"
├─ mode tabs                  scan a code, or phone
├─ code field or keypad
├─ result: choose one, too early, not found
└─ ticket                     queue number, QR, position, wait, reset countdown

APICopy Anchor Link

Every div prop is passed through unless noted.

ExamplesCopy Anchor Link

Ticket QR

// The ticket QR holds queue:A-012, which parseTicketValue reads back.

AccessibilityCopy Anchor Link

• Keys are real buttons at a touch size. Results are announced in a status region.
• The countdown to reset is stated in text so it can be paused by tapping.

RTL & i18nCopy Anchor Link

• The keypad stays in phone order (left to right) in Arabic, as phones do.
• Strings live in a STRINGS = { en, ar } object and any of them can be replaced with labels. The locale comes from NasaqProvider.

Styling & tokensCopy Anchor Link

• Colours, radii and type come from --nq-* tokens; nothing is a raw colour. Spacing and alignment use logical classes.
• Target [data-slot="check-in-kiosk"] and the inner data-slot parts shown in the anatomy.

Do / Don'tCopy Anchor Link

• Do keep the async callbacks honest: return { error } so the component can show the message.
• Do pass now in tests and stories so the output stays the same.
• Don't fetch inside the component: it is presentational and takes data and callbacks.
• Don't rely on colour for state: every state also has a word.

RelatedCopy Anchor Link

• waiting-screen
• lobby-display
• booking-manage
• qr-code

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-bookings-check-in-kiosk--docs