Skip to main content

​
OrderTimePicker

A picker that allows customers to choose between “ASAP” ordering or scheduling a future pickup/delivery time within the location’s operating hours.

​
Preview

View in Storybook

​
Import

import { OrderTimePicker } from '@/components/OrderTimePicker'

​
Usage

<OrderTimePicker
  locationId={locationId}
  fulfillmentType="pickup"
  selectedTime={orderTime}
  onTimeChange={setOrderTime}
/>

​
Props

​
locationId
string
required
Location ID used to fetch available time slots.
​
fulfillmentType
'pickup' | 'delivery'
required
The fulfillment method — affects available time windows and lead times.
​
selectedTime
Date | 'asap'
required
The currently selected order time.
​
onTimeChange
(time: Date | 'asap') => void
required
Callback fired when the time selection changes.

​
Behavior

  • “ASAP” toggle selected by default with estimated ready time
  • Date picker for future dates (within location’s advance ordering window)
  • Time slots in 15-minute increments within operating hours
  • Grays out unavailable slots based on kitchen capacity