BookingFlow

Code

import { BookingFlow } from "@fadymondy/nasaq/web";export function Book({ services, providers, locations }) {  return (    <BookingFlow      locations={locations}      services={services}      providers={providers}      getSlots={(query) => api.slots(query)}      onSubmit={async (booking) => {        const created = await api.book(booking);        return { code: created.code };      }}    />  );}

Bookings · beta

Live examples and controls: BookingFlow in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/booking-flow.json

The patient side of a booking. It walks through up to eight steps, keeps every choice in state and calls onSubmit once at the end. It never fetches: you pass the catalogue and a getSlots function.

When to useCopy Anchor Link

• A clinic, salon or service business lets customers book online.
• You need guests to book without an account, and signed-in patients to skip the details step.
• The result should be a code and a QR ticket the customer can keep.

When not to useCopy Anchor Link

• Staff booking on behalf of a walk-in: use a shorter form or the clinic schedule.
• Only picking a time in a dialog: use BookingSlots.
• A shop checkout: use CheckoutSteps.

ImportCopy Anchor Link

import { BookingStepId, BookingDetailsValue, BookingSubmission, BookingSlotQuery, BookingFlow } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

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

export function Book({ services, providers, locations }) {
  return (
    <BookingFlow
      locations={locations}
      services={services}
      providers={providers}
      getSlots={(query) => api.slots(query)}
      onSubmit={async (booking) => {
        const created = await api.book(booking);
        return { code: created.code };
      }}
    />
  );
}

AnatomyCopy Anchor Link

BookingFlow                   data-slot="booking-flow"
├─ Stepper (md and up) or "Step n of N" with Progress (mobile)
├─ step panel                 heading takes focus on each step change
│  ├─ branch, service, doctor (RadioCard lists)
│  ├─ time: BookingSlots
│  ├─ details: name, phone, email, book for someone else
│  ├─ notes: Textarea and FileUpload
│  ├─ payment: online or pay at the visit
│  └─ review
├─ summary aside              choices so far, price, tax and total
└─ confirmation               BookingTicket and "Book another visit"

APICopy Anchor Link

Every div prop is passed through unless noted.

ExamplesCopy Anchor Link

Take an error from the server

onSubmit={async (booking) => {
  const r = await api.book(booking);
  return r.ok ? { code: r.code } : { error: "That time was just taken. Pick another." };
}}

AccessibilityCopy Anchor Link

• Each step change moves focus to the step heading and the stepper marks the current step with aria-current.
• Slot state is an icon and a word, never colour alone. Errors are announced next to their field.
• Everything works with the keyboard: choices are radio groups, the time grid is a radio group with arrow keys.

RTL & i18nCopy Anchor Link

• Layout uses logical classes; the stepper and the back and next arrows mirror.
• Codes, phone numbers, times and prices stay left to right inside bdi. Digits are Latin by default.
• English and Arabic strings ship in the component.
• 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="booking-flow"] 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

• booking-slots
• booking-manage
• booking-pipeline
• checkout-steps
• stepper
• qr-code

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-bookings-booking-flow--docs