Files
web/packages/booking-flow
Matilda Haneling 6a008ba342 Merged in fix/book-149-incorrect-onfocus-behaviour-booking-widget (pull request #3320)
Fix/book 149 incorrect onfocus behaviour booking widget

* fix(BOOK-149): fixed labels shifting

* fix(BOOK-149): reintroduced sticky position

* fix(BOOK-149): added missing border to "where" text field

* added overflow to datepicker

* comment fixes

* removed separate typography declaration

* changed to onPress

* fix(BOOK-149): moved components to separate files

* fix(BOOK-149): removed desktop & mobile specific css classes

* fix(BOOK-149): new implementation of date and room modals

* dependencies update

* fix(BOOK-149): fixed child age dropdown issue, related error message, and Rooms & Guests container height

* updated info button to new variant

* fix(BOOK-149): prevent scrolling of background when modals are open in Tablet mode

* fixed overlay issue and added focus indicator on mobile

* fixed missing space in css

* rebase and fixed icon buttons after update

* simplified to use explicit boolean

* PR comments fixes

* more PR comment fixes

* PR comment fixes

* fixed setIsOpen((prev) => !prev)

* fixed issues with room error not showing properly on mobile

* fixing pr comments

* fixed flickering on GuestRoomModal


Approved-by: Erik Tiekstra
2026-01-12 14:18:51 +00:00
..

@scandic-hotels/booking-flow

Shared package containing the hotel booking flow functionality used by scandic-web and partner sites.

Configuration

To use the booking flow, two main contexts must be set up: BookingFlowConfig and BookingFlowContext. Both receive injected values from the consuming app.

BookingFlowConfig is static configuration that controls features and behavior (e.g. booking codes enabled), while BookingFlowContext is dynamic state provided by the consuming site (e.g. user authentication status).

The config sets up both a server side and client side context provider. You can use getBookingFlowConfig server side and useBookingFlowConfig client side to access the config values.

The context is only provided client side, and can be accessed using the useBookingFlowContext hook.

There's also some setup required for tRPC to work with the booking flow. See the tRPC context and how it's used in the consuming apps for details.

Translations

Translations for the booking flow components work similarly to other parts of the app, using react-intl. See translations.md for more information on how translations are set up in the apps.

We currently do not dependency inject any translation messages from the consuming apps, so for now all booking-flow translation messages for the different sites are included in all app bundles. This should be improved in the future.

Other

Components that are currently exported but are intended for external use should probably move to design-system or similar in the future.