## Features - **ASAP Option**: Quick selection for immediate orders - **Date Navigation**: Browse available dates with easy navigation - **Time Slot Grid**: Clear visual display of available time slots - **Availability Status**: Real-time slot availability indication - **Order Type Support**: Different timing for delivery vs pickup - **Responsive Design**: Optimized for mobile and desktop - **Timezone Handling**: Proper timezone management - **Customizable Ranges**: Configure available days and time slots ## Installation ```bash npx shadcn@latest add https://ui.cravejs.com/registry/time-slot-picker.json ``` ## Usage ### Basic Example ```tsx import { TimeSlotPicker } from "@/components/restaurant/checkout/time-slot-picker" export function CheckoutTimeSelection() { const [selectedSlot, setSelectedSlot] = useState(null) const timeSlots = [ { id: "1", time: "10:00", label: "10:00 AM", available: true }, { id: "2", time: "10:30", label: "10:30 AM", available: true }, { id: "3", time: "11:00", label: "11:00 AM", available: false }, { id: "4", time: "11:30", label: "11:30 AM", available: true }, // ... more slots ] return ( ) } ``` ### Advanced Example with Date Selection ```tsx import { TimeSlotPicker } from "@/components/restaurant/checkout/time-slot-picker" import { generateTimeSlots } from "@/utils/time-slots" export function AdvancedTimeSlotPicker() { const [selectedSlot, setSelectedSlot] = useState(null) const [selectedDate, setSelectedDate] = useState(new Date()) const [orderType, setOrderType] = useState("delivery") // Generate slots for the next 7 days const timeSlots = generateTimeSlots({ startDate: new Date(), days: 7, startHour: 9, endHour: 21, interval: 30, // 30-minute intervals orderType }) const handleSlotSelect = (slot) => { setSelectedSlot(slot) // Calculate estimated time const estimatedTime = orderType === 'delivery' ? '30-45 min' : '15-20 min' console.log(`Selected: ${slot.time} on ${slot.date}`) console.log(`Estimated ${orderType} time: ${estimatedTime}`) } return (

{/* Order Type Toggle */}

{selectedSlot && (

Selected Time

{selectedSlot.label} on {selectedSlot.date}

Estimated {orderType}: {selectedSlot.estimatedTime}

)}

) } ``` ### With Restaurant Hours ```tsx import { TimeSlotPicker } from "@/components/restaurant/checkout/time-slot-picker" import { useRestaurantHours } from "@/hooks/use-restaurant-hours" export function RestaurantTimeSlotPicker() { const { hours, generateAvailableSlots } = useRestaurantHours() const [selectedSlot, setSelectedSlot] = useState(null) // Generate slots based on restaurant hours const timeSlots = generateAvailableSlots({ days: 7, slotDuration: 30, bufferTime: 15, // 15 min buffer before closing blackoutTimes: [ { start: "14:00", end: "15:00" }, // Lunch break ] }) return ( <> {!hours.isOpen && ( Restaurant is currently closed. Next opening: {hours.nextOpen} )} ) } ``` ## API Reference ### TimeSlotPicker Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `slots` | `TimeSlot[]` | - | Array of available time slots | | `selectedSlot` | `TimeSlot \| null` | `null` | Currently selected slot | | `onSlotSelect` | `(slot: TimeSlot) => void` | - | Callback when slot is selected | | `orderType` | `"delivery" \| "pickup"` | `"delivery"` | Order fulfillment type | | `showAsap` | `boolean` | `true` | Whether to show ASAP option | | `dateRange` | `number` | `7` | Number of days to show | | `timeFormat` | `"12h" \| "24h"` | `"12h"` | Time display format | | `showDateTabs` | `boolean` | `true` | Whether to show date navigation | | `currentDate` | `Date` | `new Date()` | Currently selected date | | `onDateChange` | `(date: Date) => void` | - | Callback when date changes | | `className` | `string` | - | Additional CSS classes | ### TimeSlot Interface ```tsx interface TimeSlot { id: string label: string time: string available: boolean date?: string estimatedTime?: string } ``` ## Time Slot Generation ### Basic Generator ```tsx export function generateTimeSlots({ startDate, days, startHour, endHour, interval, orderType }) { const slots = [] for (let day = 0; day < days; day++) { const date = new Date(startDate) date.setDate(date.getDate() + day) for (let hour = startHour; hour < endHour; hour++) { for (let minute = 0; minute < 60; minute += interval) { const time = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}` const id = `${date.toISOString().split('T')[0]}-${time}` slots.push({ id, time, label: formatTime(time), available: checkAvailability(date, time), date: date.toISOString().split('T')[0], estimatedTime: orderType === 'delivery' ? '30-45 min' : '15-20 min' }) } } } return slots } ``` ### With Capacity Management ```tsx export function generateSlotsWithCapacity({ date, slotCapacity = 10, currentOrders }) { const slots = [] // Count orders per slot const orderCounts = currentOrders.reduce((acc, order) => { const slotKey = `${order.date}-${order.time}` acc[slotKey] = (acc[slotKey] || 0) + 1 return acc }, {}) // Generate slots with availability based on capacity for (let hour = 9; hour < 21; hour++) { for (let minute = 0; minute < 60; minute += 30) { const time = `${hour}:${minute.toString().padStart(2, '0')}` const slotKey = `${date}-${time}` const currentCount = orderCounts[slotKey] || 0 slots.push({ id: slotKey, time, label: formatTime(time), available: currentCount < slotCapacity, remainingCapacity: slotCapacity - currentCount, date }) } } return slots } ``` ## Examples ### Catering Orders ```tsx export function CateringTimeSlotPicker() { const [selectedSlot, setSelectedSlot] = useState(null) // Catering requires 48-hour notice const minDate = new Date() minDate.setDate(minDate.getDate() + 2) const slots = generateTimeSlots({ startDate: minDate, days: 30, // Show 30 days for catering startHour: 8, endHour: 20, interval: 60 // Hour intervals for catering }) return (

Catering orders require 48-hour advance notice

) } ``` ### Recurring Orders ```tsx export function RecurringOrderScheduler() { const [schedule, setSchedule] = useState({ frequency: 'weekly', dayOfWeek: 'monday', time: '12:00' }) const timeSlots = generateDailyTimeSlots({ startHour: 9, endHour: 20, interval: 30 }) return (

Delivery Frequency

{schedule.frequency === 'weekly' && (

Day of Week

)}

Delivery Time s.time === schedule.time)} onSlotSelect={(slot) => setSchedule({...schedule, time: slot.time})} showAsap={false} showDateTabs={false} />

) } ``` ## Best Practices ### Performance Optimization ```tsx // Memoize slot generation for better performance const timeSlots = useMemo(() => { return generateTimeSlots({ startDate: selectedDate, days: dateRange, startHour: 9, endHour: 21, interval: 30 }) }, [selectedDate, dateRange]) // Virtualize long slot lists import { VirtualList } from '@tanstack/react-virtual' function VirtualizedTimeSlots({ slots, onSelect }) { const parentRef = useRef() const virtualizer = useVirtualizer({ count: slots.length, getScrollElement: () => parentRef.current, estimateSize: () => 60, overscan: 5 }) // Render virtualized slots... } ``` ### User Experience - **Clear Availability**: Use colors and icons to indicate slot availability - **Smart Defaults**: Pre-select popular time slots or user's previous choices - **Loading States**: Show skeleton loaders while fetching availability - **Error Handling**: Gracefully handle slot conflicts and booking failures ### Accessibility The component includes: - ARIA labels for screen readers - Keyboard navigation support - Focus management - High contrast mode support - Proper heading structure ## Related Components - [Checkout Form](/docs/components/checkout/checkout-form) - Main checkout flow - [Delivery Address](/docs/components/checkout/delivery-address) - Address selection - [Order Summary](/docs/components/order/order-summary) - Order details display

Time Slot Picker