Opening Status
Loading playground
Overview
OpeningStatus is the combined opening-hours summary for a single location. It takes an OpeningHours value and renders an open/closed pill next to a localized one-liner that names the next state change (closing time when open, next opening when closed). Internally it composes OpeningStatusIndicator and OpeningStatusDetail on a single baseline.
Both atoms read the shared useNow() clock, so all opening-status surfaces on the page tick together. The optional now prop overrides the clock for tests and Storybook.
Key Business & UX Benefits
- Open/closed status combined with the next state-change time answers the most common shopper question on a location page without forcing a click into details.
- Reading from a shared clock means every store on a list view ticks in sync, so the page never shows one store as "Closing soon" and the next still labeled "Open" past the same minute.
- Schedule timezone is respected, so a Berlin shopper looking at a New York store sees "Closes at 18:00" in the store's wall-clock time without the timezone math leaking into the UI.
Feature List
- Combines `OpeningStatusIndicator` and `OpeningStatusDetail` on a single inline baseline
- Localized one-liner picks the right message (closes-at, opens-today, opens-tomorrow, opens-on-weekday, opens-on-date) from the next state-change event
- Reactive against the shared `useNow()` clock so all opening-status surfaces on the page tick together
- Respects the schedule's IANA timezone, so wall-clock times stay correct across shopper locales
- Optional `now` prop overrides the clock for tests and Storybook
API Reference
| Prop | Default | Type |
|---|---|---|
openingHoursrequired | OpeningHours { timeZone, schedule, exceptions } | |
now | objectOverride for tests / Storybook only — forwarded to both atoms. |
Related
OpeningStatusIndicator: the open/closed pill atom on its own.OpeningStatusDetail: the next state-change one-liner on its own.OpeningHoursWeeklyTable: full weekly schedule for the detail panel under this summary.OpeningHourstype: the shape the component consumes.
Opening Hours Weekly Table
Weekly opening-hours schedule rendered as a `DescriptionList`. Groups consecutive same-hours days into a single row (e.g. "Monday - Wednesday 09:00 - 18:00").
Opening Status Detail
One-line "closes at HH:mm" or "opens on Monday at HH:mm" detail atom for opening-hours surfaces. Picks the right message from the next state-change event.