Files
cal.diy/packages/features/bookings/Booker
Hariom Balhara 6f0c09d2be feat: add booker lifecycle SDK events for embed tracking (#25569)
* feat: add embed prerendering support and enhance event handling

- Introduced `useIsEmbedPrerendering` hook to determine if the embed is in prerender mode.
- Updated `useAvailabilityEvents` to prevent firing events during prerendering.
- Added `bookerLoadedEvent` and `availabilityRefreshed` types to `EventDataMap`.
- Implemented `useFirebookerLoadedEvent` to manage firing the booker loaded event conditionally.
- Refactored event firing logic in `useSchedule` and `BookerWebWrapper` components to utilize new hooks.

* feat: add embed prerendering support and enhance event handling

- Introduced `useIsEmbedPrerendering` hook to determine if the embed is in prerender mode.
- Updated `useAvailabilityEvents` to prevent firing events during prerendering.
- Added `bookerLoadedEvent` and `availabilityRefreshed` types to `EventDataMap`.
- Implemented `useFirebookerLoadedEvent` to manage firing the booker loaded event conditionally.
- Refactored event firing logic in `useSchedule` and `BookerWebWrapper` components to utilize new hooks.

* feat: enhance embed event handling and introduce link reopening detection

- Added `useEmbedReopened` hook to track when the embed is reopened.
- Updated `BookerWebWrapper` to reset event firing state upon embed reopening.
- Refactored event firing logic to use `bookerViewed` instead of `bookerLoadedEvent`.
- Introduced scheduling for event firing in `useSchedule` to ensure correct order of events during prerendering.

* feat: add lifecycle diagrams for inline and modal embeds

- Introduced `inline-embed-lifecycle.mermaid` and `modal-embed-lifecycle.mermaid` files to visualize the lifecycle events and states of inline and modal embeds.
- Updated `LIFECYCLE.md` to reference the new diagrams and provide a clearer explanation of the embed lifecycle processes.
- Added `modal-prerendering-flow.mermaid` to illustrate the prerendering flow for modal embeds.
- Enhanced the routing playground with new features and improved event handling for availability and booking events.

* refactor: update event handling for booker lifecycle events

- Replaced `availabilityLoaded` event with `bookerReady` to better reflect the state when the booker view is fully loaded and ready for interaction.
- Updated related documentation and diagrams to reflect changes in event triggers and descriptions.
- Adjusted internal state management to track `viewId` instead of `reopenCount` for distinguishing between initial views and reopens.
- Added tests for new event handling logic to ensure correct firing of `bookerViewed`, `bookerReopened`, and `bookerReady` events.

* refactor: enhance embed event handling and state management

- Updated event handling for booker lifecycle events, replacing `resetViewVariables` with `resetPageData` to manage page-specific state.
- Introduced new utility functions for managing event firing states and reload initiation.
- Refactored `fireBookerViewedEvent` and `fireBookerReadyEvent` to utilize the new state management functions.
- Added comprehensive tests for the updated event handling logic and state resets to ensure correct functionality across various scenarios.

* refactor: update embed iframe configuration and utility functions

- Reduced `slotsStaleTimeMs` from 30 seconds to 10 seconds and `iframeForceReloadThresholdMs` from 100 seconds to 30 seconds for improved responsiveness.
- Refactored utility functions to use `isBrowser` for client-side checks instead of `isClientSide`.
- Removed unused `isPrerendering` function and updated related documentation for clarity.
- Enhanced event handling by exporting `useBookerEmbedEvents` from the appropriate module for better accessibility.

* refactor: update embed iframe configuration and utility functions

- Reduced `slotsStaleTimeMs` from 30 seconds to 10 seconds and `iframeForceReloadThresholdMs` from 100 seconds to 30 seconds for improved responsiveness.
- Refactored utility functions to use `isBrowser` for client-side checks instead of `isClientSide`.
- Removed unused `isPrerendering` function and updated related documentation for clarity.
- Enhanced event handling by exporting `useBookerEmbedEvents` from the appropriate module for better accessibility.

* fix cubic feedback
2025-12-11 09:11:38 -03:00
..
2025-12-08 20:35:11 +05:30
2025-05-12 09:30:43 +01:00

Strategies to prevent error during booking

  • The getSchedule call, fetches only those slots that are bookable including not showing the slots that are reserved by someone else.
    • The booking call and the get scheduled call share the same availability checking logic to avoid scenario where getSchedule considers a slot as available but Booking call doesn't consider it available.
  • Even though a slot might be available, multiple people might have opened the same booking page and might want to book the same slot.
    • We have a reservation system in place that avoid showing a slot that is reserved by someone to other people.
    • The getSchedule call itself considers the reservations and doesn't show those slots.
    • When two persons open the same booking page at the same time, they might will see the same slots.
      • If Person1 selects slot1, it will be reserved by Person1. Person2 still sees the slot(because getSchedule is refetched after a long time(in minutes)). But when Person2 selects the same slot1, he will go to "Slot no-longer available" state.
        • Also when the Person2, comes back to the slots listing page, he will see the slot as unavailable now. It works because getSchedule would have been fetched by that time which happened when he selected the slot earlier.
  • We don't check for reservation during the confirm booking call, because a reservation has lower priority then the actual booking.

"Slot no-longer available" state

  • When a slot is no longer available, we disable the "Confirm" button which does the booking.
  • We show a message to the user that he should select a different slot.
  • To ensure that we can go to this state, whenever applicable, we do the following:
    • getSchedule fetching. It prevents the unavailable slot to not appear in the list.
      • Fetched on window focus to handle the users who have the page opened for some time then come back to it
      • Fetched every 5 mins(configurable by .env) as well to handle users who are just there on the page for a long time.
      • Fetched on selecting a slot.
    • isReservation query. It prevents the unavailable slot to be not bookable by the User
      • Fetched on regular quick intervals(currently every 10s(configurable by .env)). Even though it doesn't detect actual busy/booked slots, it still avoids the attempted booking of a reserved slot.