<st-booking>
JSON type: Booking
A booking experience for a website, in place of Microsoft's own Bookings page: pick a service, optionally
a staff member ("Any available" is the default), pick a day on a calendar and a time, enter name, email,
an optional phone and notes, accept the consent box, and get a confirmation with a private link to manage
the appointment. It talks to Suite Core's public bookings API under endpoint
({endpoint}/public/v1/bookings/..., no cookies, no credentials).
Times are shown in the visitor's own time zone (through Intl, never a fixed zone); the API's instants
are UTC. The calendar is a keyboard grid: arrow keys move by day and week, Home/End to the week's start
and end, Page Up/Page Down by month. Each step moves focus to its heading, results are announced politely
and problems with role="alert".
Opening an existing booking: set reference, or open the page with #ref=... (preferred: a hash is never
sent to a server or in a Referer header) or ?ref=.... The booking shows with Reschedule and Cancel.
Reschedule picks a new slot among the availability of the same service. The reference is a signed token and
the only key to the booking: it is never put in an event, never logged, and the manage link puts it in the
hash. After booking, the link is shown (with a copy button) and a note asks the visitor to keep it private.
A hidden honeypot field (website) must stay empty. A 409 slot_taken reloads the times and says so; a 429
shows the wait from Retry-After; the text the server sends is shown only for the fields it rejected.
Every visible string is in labels (English defaults, only the keys given are replaced).
Usage
import '@sankhyatronics/sankhya-cms/booking'; // registers <st-booking>
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
endpoint | endpoint | string | '' | Base URL of the Suite Core API, without a path (https://api.apps.example.com). The component calls {endpoint}/public/v1/bookings/.... Empty: the component shows the unavailable note without sending anything. |
reference | reference | string | '' | A booking reference to open (the signed token from a manage link). Empty: the page's #ref= or ?ref= is used, else a new booking starts. Treat it as a secret. |
serviceId | service-id | string | '' | Preselects a service by id and skips the service step, when the API lists it. |
weekStart | week-start | 0 | 1 | 1 | The first day of the calendar's week: 1 (Monday, the default) or 0 (Sunday). |
locale | locale | string | '' | Language for dates and times (a BCP 47 tag). Empty uses the page's lang, or the browser's. |
manageUrl | manage-url | string | '' | The address the manage link points at. Empty uses the current page. The reference goes in its hash. |
labels | — | Partial<BookingLabels> | {} | Replaces the English texts. Only the keys given are replaced. See BookingLabels. |
errorMessages | — | Partial<BookingErrorMessages> | {} | Replaces the English validation messages (required, tooLong, ...). Only the keys given are replaced. |
Events
| Event | Detail | Description |
|---|---|---|
BOOKING_ERROR_EVENT | CustomEvent | |
BOOKING_CREATED_EVENT | CustomEvent | |
BOOKING_RESCHEDULED_EVENT | CustomEvent | |
BOOKING_CANCELLED_EVENT | CustomEvent | |
st-booking-created | Bubbles and is composed. Detail { serviceId: string, start: string }. No personal data and no reference. | |
st-booking-rescheduled | Bubbles and is composed. Detail { serviceId: string, start: string } (the new start). | |
st-booking-cancelled | Bubbles and is composed. Detail { serviceId: string }. | |
st-booking-error | Bubbles and is composed. Detail { kind: 'validation' | 'slot_taken' | 'too_late' | 'not_found' | 'rate_limited' | 'unavailable' }. |
See the live examples in Storybook.