BookingManage

Code

import { BookingManage } from "@fadymondy/nasaq/web";<BookingManage  booking={booking}  policy={{ cancelHours: 24, lateFeePercent: 50 }}  getSlots={() => api.slots(booking)}  onReschedule={(start) => api.reschedule(booking.id, start)}  onCancel={() => api.cancel(booking.id)}/>

Bookings · beta

Live examples and controls: BookingManage in the lab.

InstallCopy Anchor Link

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

What the patient sees after booking and when they come back to change it. BookingTicket is the ticket on its own: a QR that holds booking:CODE, the code as text, the details, a .ics download and a Google Calendar link.

When to useCopy Anchor Link

• A booking confirmation page or a manage link in an email.
• Enforcing a cancellation window and a late fee.

When not to useCopy Anchor Link

• Staff tools: use BookingPipeline.
• Booking for the first time: use BookingFlow.

ImportCopy Anchor Link

import { BookingTicket, BookingManage } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

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

<BookingManage
  booking={booking}
  policy={{ cancelHours: 24, lateFeePercent: 50 }}
  getSlots={() => api.slots(booking)}
  onReschedule={(start) => api.reschedule(booking.id, start)}
  onCancel={() => api.cancel(booking.id)}
/>

AnatomyCopy Anchor Link

BookingManage                 data-slot="booking-manage"
├─ BookingTicket              QR, code, details, calendar links
├─ policy text
├─ Reschedule button          opens a Dialog with BookingSlots
└─ Cancel button              ConfirmButton; the fee is stated first

APICopy Anchor Link

Every div prop is passed through unless noted.

ExamplesCopy Anchor Link

The ticket alone

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

<BookingTicket booking={booking} />

AccessibilityCopy Anchor Link

• The QR has an accessible name and the code is also plain text.
• Cancel names the fee before the patient confirms.
• Buttons that the policy disables say why in text.

RTL & i18nCopy Anchor Link

• Codes and phone numbers are left to right; the dialog and buttons mirror.
• 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-manage"] 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-flow
• booking-slots
• booking-pipeline
• qr-code

LabCopy Anchor Link

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