## Installation ```bash npx shadcn@latest add https://ui.cravejs.com/registry/order-type-toggle.json ``` ## Usage ```tsx import { OrderTypeToggle } from "@/components/restaurant/checkout/order-type-toggle"; export function CheckoutForm() { const [orderType, setOrderType] = useState<"delivery" | "pickup">("delivery"); return ( ); } ``` ## Features - **Visual Toggle**: Clear delivery/pickup selection with icons - **Time Estimates**: Display estimated times for each option - **Conditional Content**: Show/hide content based on selection - **Fee Display**: Optional delivery fee information - **Availability Status**: Show if options are available - **Mobile Optimized**: Touch-friendly interface ## Examples ### Basic Toggle ```tsx ``` ### With Delivery Fee ```tsx ``` ### With Availability Status ```tsx ``` ### With Distance Information ```tsx ``` ### Custom Messages ```tsx ``` ## API Reference ### OrderTypeToggle Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `value` | `"delivery" \| "pickup"` | - | **Required.** Current selection | | `onChange` | `(type: "delivery" \| "pickup") => void` | - | **Required.** Selection change handler | | `deliveryTime` | `string` | - | Estimated delivery time | | `pickupTime` | `string` | - | Estimated pickup time | | `deliveryFee` | `number` | - | Delivery fee amount | | `freeDeliveryMinimum` | `number` | - | Minimum order for free delivery | | `deliveryAvailable` | `boolean` | `true` | Whether delivery is available | | `pickupAvailable` | `boolean` | `true` | Whether pickup is available | | `deliveryUnavailableReason` | `string` | - | Reason delivery is unavailable | | `pickupUnavailableReason` | `string` | - | Reason pickup is unavailable | | `distance` | `string` | - | Distance to store | | `showDistance` | `boolean` | `false` | Whether to show distance | | `deliveryMessage` | `string` | - | Custom delivery message | | `pickupMessage` | `string` | - | Custom pickup message | | `variant` | `"default" \| "compact" \| "cards"` | `"default"` | Visual variant | | `disabled` | `boolean` | `false` | Disable all interactions | | `className` | `string` | - | Additional CSS classes | ## Variants ### Default Standard toggle with time estimates and basic information. ```tsx ``` ### Compact Minimal version for tight spaces. ```tsx ``` ### Cards Card-based layout with more detailed information. ```tsx ``` ## Integration Examples ### With Address Input ```tsx export function DeliverySection() { const [orderType, setOrderType] = useState<"delivery" | "pickup">("delivery"); return (

{orderType === "delivery" && ( { // Update delivery estimates based on address }} /> )} {orderType === "pickup" && ( )}

); } ``` ### With Time Slot Picker ```tsx export function OrderTypeAndTime() { const [orderType, setOrderType] = useState<"delivery" | "pickup">("delivery"); const [timeSlot, setTimeSlot] = useState(null); return (

{ setOrderType(type); setTimeSlot(null); // Reset time when type changes }} deliveryTime="30-45 min" pickupTime="15-20 min" />

); } ``` ### With Dynamic Pricing ```tsx export function DynamicOrderType() { const [orderType, setOrderType] = useState<"delivery" | "pickup">("delivery"); const { cartTotal } = useCart(); const deliveryFee = cartTotal >= 25 ? 0 : 3.99; return ( ); } ``` ## Styling ### Custom Colors ```tsx ``` ### Custom Icons ```tsx } pickupIcon={} /> ``` ## Accessibility - **Keyboard Navigation**: Tab and arrow key support - **Screen Reader Support**: Descriptive labels and announcements - **Focus Management**: Clear focus indicators - **Semantic HTML**: Proper radio group semantics - **State Announcements**: Changes announced to screen readers ## Related Components - [Time Slot Picker](/docs/components/checkout/time-slot-picker) - Schedule delivery/pickup time - [Address Input](/docs/components/checkout/address-input) - Delivery address entry - [Store Locator](/docs/components/store/store-locator) - Find pickup locations - [Delivery Fee Calculator](/docs/components/checkout/delivery-fee-calculator) - Calculate delivery costs

Order Type Toggle