## Installation ```bash npx shadcn@latest add https://ui.cravejs.com/registry/order-summary.json ``` ## Usage ```tsx import { OrderSummary } from "@/components/restaurant/order/order-summary" export function OrderSummaryExample() { return ( ) } ``` ## Variants The Order Summary component supports different display modes: ### Detailed (Default) The detailed variant shows all order information including line items, modifiers, and fees. ```tsx ``` ### Compact The compact variant shows only totals, ideal for sidebars and confirmations. ```tsx ``` ### Receipt The receipt variant is optimized for order confirmations and email receipts. ```tsx ``` ## Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `items` | `OrderItem[]` | - | Array of order items | | `subtotal` | `number` | - | Subtotal before taxes and fees | | `tax` | `number` | - | Tax amount | | `deliveryFee` | `number` | - | Delivery fee amount | | `tip` | `number` | - | Tip amount (optional) | | `total` | `number` | - | Final total amount | | `discount` | `number` | - | Discount amount (negative) | | `serviceFee` | `number` | - | Service fee amount | | `promoCode` | `string` | - | Applied promo code | | `showHeader` | `boolean` | `true` | Whether to show "Order Summary" header | | `showItems` | `boolean` | `true` | Whether to show item details | | `variant` | `"detailed" \| "compact" \| "receipt"` | `"detailed"` | Display variant | | `orderNumber` | `string` | - | Order number (for receipt variant) | | `paymentMethod` | `string` | - | Payment method description | | `className` | `string` | - | Additional CSS classes | ## Examples ### With Promo Code ```tsx ``` ### With Multiple Fees ```tsx ``` ### Restaurant Group Order ```tsx const groupOrderItems = [ { id: "1", name: "John's Order", items: [ { name: "Burger", price: 12.99, quantity: 1 } ] }, { id: "2", name: "Sarah's Order", items: [ { name: "Salad", price: 9.99, quantity: 1 } ] } ] ``` ### With Estimated Delivery ```tsx ``` ### Subscription Order ```tsx ``` ## Features - **Detailed Breakdown**: Items, quantities, modifiers, and individual pricing - **Tax Calculations**: Support for various tax types and rates - **Fee Management**: Delivery fees, service charges, and tips - **Promo Codes**: Discount application and display - **Real-time Updates**: Dynamic recalculation as cart changes - **Mobile Optimized**: Responsive design for all screen sizes ## State Integration ### With Cart Context ```tsx import { useCart } from "@/contexts/cart-context" import { OrderSummary } from "@/components/restaurant/order/order-summary" export function CartSummary() { const { items, totals } = useCart() return ( ) } ``` ### With Order API ```tsx import { useOrder } from "@/hooks/use-order" export function CheckoutSummary({ orderId }) { const { data: order } = useOrder(orderId) if (!order) return return ( ) } ``` ## Accessibility The Order Summary component follows accessibility best practices: - Proper table semantics for pricing breakdown - Screen reader friendly labels for all values - Currency formatting with proper ARIA labels - Clear visual hierarchy with headings - Keyboard accessible interactive elements ## Styling The component uses Tailwind CSS classes and can be customized through: - CSS custom properties for spacing and colors - The `className` prop for wrapper styling - Tailwind configuration for theme customization - Custom CSS for specific elements ## Related Components - [Cart](/docs/components/cart/cart) - Shopping cart management - [Checkout Form](/docs/components/checkout/checkout-form) - Complete checkout flow - [Payment Method Selector](/docs/components/checkout/payment-method-selector) - Payment selection - [Promo Code Input](/docs/components/checkout/promo-code-input) - Discount code entry