Skip to main content

​
ProductDescriptionScreen

A full-screen overlay that shows detailed product information including image, description, modifier groups, quantity selector, and an add-to-cart button with running total.

​
Preview

View in Storybook

​
Import

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

​
Usage

<ProductDescriptionScreen
  product={selectedProduct}
  onAddToCart={handleAddToCart}
  onClose={handleClose}
/>

​
Props

​
product
Product
required
The product to display, including all modifier groups.
​
onAddToCart
(item: CartItem) => void
required
Callback fired when the user confirms selections and adds the item to cart.
​
onClose
() => void
required
Callback to dismiss the screen.

​
Behavior

  • Displays product hero image with parallax scroll effect
  • Renders all modifier groups using ModifierGroup components
  • Shows running price total that updates as modifiers are selected
  • Validates required modifier groups before enabling the add button
  • Supports special instructions text input at the bottom