Skip to main content

​
CartPanel

A slide-out side panel that shows all items in the customer’s cart, order summary with subtotal/tax/total, and a checkout button.

​
Preview

View in Storybook

​
Import

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

​
Usage

<CartPanel
  cart={cart}
  onUpdateItem={handleUpdateItem}
  onRemoveItem={handleRemoveItem}
  onCheckout={handleCheckout}
  isOpen={isCartOpen}
  onClose={() => setIsCartOpen(false)}
/>

​
Props

​
cart
Cart
required
The cart object containing items, totals, and applied discounts.
​
onUpdateItem
(itemId: string, quantity: number) => void
required
Callback to update an item’s quantity.
​
onRemoveItem
(itemId: string) => void
required
Callback to remove an item from the cart.
​
onCheckout
() => void
required
Callback fired when the checkout button is clicked.
​
isOpen
boolean
required
Controls the panel’s open/closed state.
​
onClose
() => void
required
Callback to close the panel.

​
Behavior

  • Slides in from the right with backdrop overlay
  • Each item row shows name, modifiers summary, quantity stepper, and line total
  • Order summary section with subtotal, tax, discounts, and total
  • Empty state with illustration and “Browse menu” CTA
  • Traps focus when open for accessibility