useOpeningHours

Use useOpeningHours when the store takes orders only during set hours and you want to show a "We are closed" notice with the next opening time.

ExampleCopy Anchor Link

import { useStore } from '@salla.sa/twilight-theme-engine/hooks/useStore';
import { useOpeningHours } from '@salla.sa/twilight-theme-engine/hooks';

export function ClosedNotice() {
  const { settings } = useStore();
  const { isOpen, nextOpenFormatted } = useOpeningHours(settings.opening_hours);

  if (isOpen) return null;
  return <p>We are closed. We open {nextOpenFormatted}.</p>;
}

APICopy Anchor Link

function useOpeningHours(settings?: OpeningHoursSettings): UseOpeningHoursResult;

interface OpeningHoursSettings {
  enabled?: boolean;
  hours?: Record<string, string[]>; // lowercase day name -> time ranges
}

Returned fields:

hours keys are monday to sunday. Each value is a list of ranges such as ["09:00-12:00", "13:00-18:00"] or ["09:00 AM-12:00 PM"]. A day with no entry is closed.

GotchasCopy Anchor Link

• When opening hours are off or missing, isOpen is true and isEnabled is false. Use isEnabled to decide whether to show anything about opening hours at all.
• The time is the device's local time, not the store's time zone. The hook does not read a time zone from the store settings. A customer in another time zone sees that zone's clock.
• The server and the browser can disagree on the current time, so a server-rendered "closed" notice can change after hydration. Render the notice only after mount (for example from an effect) if that flicker matters.
• The result is computed when settings changes, not on a timer. It does not flip from closed to open while the page stays open.
• A range is skipped when its start is not before its end, so ranges that cross midnight (22:00-02:00) are ignored. A time that cannot be read counts as 00:00.
• If no day in the next 7 days has a range, the hook reports the store as open.
• Import it from @salla.sa/twilight-theme-engine/hooks. It has no subpath of its own.

NextCopy Anchor Link

• Store data: settings.opening_hours and the other store settings.
• useStore reads the settings you pass in.
• Languages and RTL: the day names and AM/PM are translated.