When the picker auto-appears
When Multiple Locations is turned on and a customer lands on any customer-facing page without having chosen a branch yet, the location picker modal appears automatically. The trigger lives in location-selected.service.ts, which watches the customer's current route and checks whether a location has been selected for the session.
The auto-popup only fires on customer pages, so admin and back-office views are never interrupted. For a small number of whitelisted businesses that prefer a different onboarding flow, the auto-popup can be suppressed, leaving the picker reachable only from the sidebar.
What customers see in the modal
The picker lives at customer/modals/location-picker/. With the redesigned UI enabled (feature flag FeatureFlags.NewUi.Locations), each location is shown as a card with its hero cover photo, name, and short summary so the choice feels visual rather than textual.
Picking a branch runs three things in order:
- locationStore.selectLocation() updates the active location in state.
- settingsStore.selectByLocationId() swaps in that branch's settings.
- dataInit.syncStorage() persists the choice so it survives a refresh.
Once the modal closes, the rest of the site rerenders against the chosen branch.
Manual switching from the sidebar
Customers can change branch at any time by tapping Change Location in the sidebar. This opens the same picker modal, but bypasses the required-selection check, so the customer can dismiss it and stay on the current branch if they change their mind.
This manual entry point is the only way to reopen the picker for whitelisted businesses where auto-popup is disabled, and is also useful for customers who train at more than one branch and switch between them regularly.
