Laioutr
General

Opening Status Detail

Storybook
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.

Loading playground

Overview

OpeningStatusDetail is the next-event one-liner. It takes an OpeningHours value, reads the next state-change event from useOpeningStatus, and renders the matching localized message:

  • When open: Closes at 18:00.
  • When closed today and opening later the same day: Opens today at 14:00.
  • When closed and opening the next calendar day: Opens tomorrow at 09:00.
  • When closed and opening within the next week: Opens Monday at 09:00.
  • When closed and the next opening is more than a week out: Opens on May 20 at 10:00.
  • When the schedule is empty and the location is currently closed: a neutral Currently closed fallback.
  • When 24/7 open or the schedule has no upcoming event in the next 30 days: nothing renders.

Times come from the $timeOfDay formatter and respect the schedule's IANA timezone. Weekday and date formatting use the active locale via Intl.DateTimeFormat.

Key Business & UX Benefits

  • Picking the right phrasing for each event kind (today, tomorrow, this week, future date) avoids the awkward "Opens in 14 days" that pure-relative renderers produce for far-future openings.
  • A neutral Currently closed fallback for empty schedules keeps the surface from going blank when a location has no opening hours configured yet.
  • Times respect the schedule's IANA timezone, so a London shopper looking at a Paris store sees Paris's wall-clock times without manual conversion.

Feature List

  • Picks one of five message kinds (closes-at, opens-today, opens-tomorrow, opens-on-weekday, opens-on-date) from the next state-change event
  • Empty-schedule fallback to `openingStatus.currentlyClosed` keeps the surface filled when a location has no hours configured
  • Times formatted via `$timeOfDay` in the schedule's IANA timezone; weekday and date formatted via `Intl.DateTimeFormat` in the active locale
  • Reactive against the shared `useNow()` clock so the message updates when the next state-change time passes
  • Optional `now` prop overrides the clock for tests and Storybook

API Reference

PropDefaultType
openingHoursrequired
nowobject

Override for tests / Storybook only. Production uses the shared useNow().

Related

Opening Status

Open/closed pill plus a one-line "closes at HH:mm" or "opens on Monday at HH:mm" detail. Reactive against the shared `useNow()` clock.

Opening Status Indicator

The open/closed pill atom on its own. Reads the shared `useNow()` clock and an `OpeningHours` value to color the label green or red.

Copyright © 2026 Laioutr GmbH