Events & Booking
Booking List
Customer-facing booking history screen - fetches upcoming bookings from the backend, surfaces inline detail modals and WhatsApp-style chat per booking, auto-completes past bookings on mount, and supports cancellation requests via chat.
Fetches from the bookings API. If the parent context already has data, hydrates from _prefetchedBookings without a second API call.
The chat modal polls for new messages every 5 s while open. Stops when the modal closes.
Available on all plans.
Four things worth knowing
Cancelled and completed bookings are filtered out by default
The displayItems filter hides both cancelled and completed statuses so the list shows only active bookings. Auto-completion of past bookings happens on mount - the component finds entries whose end time has passed, marks them Completed locally, and pushes the status update to the backend so future API fetches are consistent.
Booking detail and chat open as inline modals
Tapping a booking card opens a detail modal showing title, date/time, location, duration, price, provider, and status. From there, the user can open a WhatsApp-style chat modal for that booking. Alternatively, set detailScreenId or chatScreenId to navigate to full screens instead of modals.
Cancellation goes through chat for customers
Customers cannot cancel directly. Tapping cancel sends a pre-written cancellation request as a chat message (requestCancellationViaChat). This keeps the audit trail in the conversation and avoids accidental cancellations. The booking status is not changed until a provider acts on it.
navigationParams can auto-open a specific booking
If the screen is navigated to with a bookingId in navigationParams, the component automatically opens that booking’s detail or chat modal on mount. This is how Booking Calendar hands off to Booking List after a successful confirmation.
Find it, drop it, wire the screens
Where to find itAdd it to any account screen
- Component picker → Events & Booking → Booking List.
- Drop it on the screen users land on after confirming a booking.
- Set this screen as the bookingListScreenId in Booking Calendar.
Before you publishThree things to check
- Optionally set detailScreenId if you want booking detail to open on a full screen instead of the inline modal.
- Optionally set chatScreenId if you want chat to open on a full screen instead of the inline modal.
- Leave both unset to keep everything in modals - the default experience requires no navigation wiring.
Navigation and header text
| Prop | Type | Default | Description |
|---|---|---|---|
detailScreenId | string | - | Navigate to a full detail screen on card tap. Leave unset to use the inline modal. |
chatScreenId | string | - | Navigate to a standalone chat screen. Leave unset to use the inline chat modal. |
headerText | string | ’My Bookings’ | Heading shown at the top of the list. |
emptyMessage | string | ’No bookings yet’ | Message shown when the booking list is empty. |
Make it yours
Every colour and visibility toggle below is yours to change. The defaults are a neutral starting point - adjust them to match the brand without touching anything else.
| Prop | Default | What it controls |
|---|---|---|
showImage | true | Service image on each booking card. |
showStatus | true | Status badge on each booking card. |
showPrice | true | Price shown on each booking card. |
showDuration | true | Duration shown on each booking card. |
showLocation | true | Location shown on each booking card. |
showMessaging | true | Message icon on each booking card that opens the chat modal. |
backgroundColor | #F9FAFB | Screen background colour. |
cardBackgroundColor | #FFFFFF | Individual booking card background. |
titleColor | #111827 | Booking title text colour. |
metaColor | #6B7280 | Date, duration, and location text colour. |
priceColor | #111827 | Price text colour. |
statusTextColor | #FFFFFF | Status badge label colour. |
statusBadgeColor | #007AFF | Status badge background colour. |
borderColor | #E5E7EB | Card border colour. |
borderRadius | 12 | Card corner radius. |
headerTextColor | #111827 | Screen header text colour. |
Common mistakes to avoid
List is empty even though bookings exist
Completed and cancelled bookings are filtered out of displayItems by default. If past bookings were auto-completed on a previous mount, they will not appear. To show completed bookings, remove the status !== ‘completed’ check from the displayItems filter in BuilderBookingList.tsx.
Set this screen as bookingListScreenId in Booking Calendar
After a successful booking confirmation, Booking Calendar navigates to bookingListScreenId with the new bookingId in navigationParams. If that prop is not set, the user stays on the calendar screen with no feedback. Always wire the two screens together.
Chat polling stops when the modal closes
The 5-second message polling interval is cleared when the chat modal closes. If you extend the component and keep a reference to the chat open outside the modal, call closeChat() explicitly to stop the interval and avoid memory leaks.
Adding a new field to a booking card requires four changes
Add the field to the BookingItem interface, map it in the fetchBookingsFromBackend list map, map it again in the _prefetchedBookings hydration block, then render it inside renderBookingCard. Missing any one of these four steps will cause the field to show for live fetches but not prefetched data, or vice versa.