Add a cart and order form

Write a React context for a shopping cart in src/context/CartContext.jsx.

Requirements:
- Cart state is an array of { id, qty }. Use useReducer. Actions: add, increase, decrease, remove, clear.
- Quantity per item is at most 20. Decreasing to 0 removes the line.
- Load the initial cart from localStorage key 'brew-and-bean-cart' (wrap in try/catch, ignore invalid data, keep only ids that exist in `menu` from '../data/menu.js'). Save the cart to localStorage in a useEffect (also in try/catch).
- The provider shares: lines (each line has id, qty and the full menu item), totalItems, totalPrice (sum of qty * item.price), addItem(id), increase(id), decrease(id), removeItem(id), clearCart().
- Export CartProvider and a hook useCart that throws a clear error if used outside the provider.
Plain JavaScript with JSX, no extra libraries. Explain nothing, code only.

import { createContext, useContext, useEffect, useMemo, useReducer } from 'react'
import { menu } from '../data/menu.js'

const STORAGE_KEY = 'brew-and-bean-cart'
const MAX_QTY = 20

const CartContext = createContext(null)

// The cart is a list of { id, qty }. Names and prices come from the menu.
function cartReducer(cart, action) {
  switch (action.type) {
    case 'add': {
      const existing = cart.find((line) => line.id === action.id)
      if (!existing) {
        return [...cart, { id: action.id, qty: 1 }]
      }
      return cart.map((line) =>
        line.id === action.id
          ? { ...line, qty: Math.min(line.qty + 1, MAX_QTY) }
          : line,
      )
    }
    case 'increase':
      return cart.map((line) =>
        line.id === action.id
          ? { ...line, qty: Math.min(line.qty + 1, MAX_QTY) }
          : line,
      )
    case 'decrease':
      return cart
        .map((line) =>
          line.id === action.id ? { ...line, qty: line.qty - 1 } : line,
        )
        .filter((line) => line.qty > 0)
    case 'remove':
      return cart.filter((line) => line.id !== action.id)
    case 'clear':
      return []
    default:
      return cart
  }
}

// Read the saved cart, ignoring anything that is missing or invalid.
function loadSavedCart() {
  try {
    const saved = JSON.parse(localStorage.getItem(STORAGE_KEY))
    if (!Array.isArray(saved)) return []
    return saved.filter(
      (line) =>
        menu.some((item) => item.id === line.id) &&
        Number.isInteger(line.qty) &&
        line.qty > 0 &&
        line.qty <= MAX_QTY,
    )
  } catch {
    return []
  }
}

export function CartProvider({ children }) {
  const [cart, dispatch] = useReducer(cartReducer, [], loadSavedCart)

  useEffect(() => {
    try {
      localStorage.setItem(STORAGE_KEY, JSON.stringify(cart))
    } catch {
      // Storage can be blocked (private mode). The cart still works in memory.
    }
  }, [cart])

  const value = useMemo(() => {
    const lines = cart.map((line) => ({
      ...line,
      item: menu.find((item) => item.id === line.id),
    }))
    return {
      lines,
      totalItems: lines.reduce((sum, line) => sum + line.qty, 0),
      totalPrice: lines.reduce((sum, line) => sum + line.qty * line.item.price, 0),
      addItem: (id) => dispatch({ type: 'add', id }),
      increase: (id) => dispatch({ type: 'increase', id }),
      decrease: (id) => dispatch({ type: 'decrease', id }),
      removeItem: (id) => dispatch({ type: 'remove', id }),
      clearCart: () => dispatch({ type: 'clear' }),
    }
  }, [cart])

  return <CartContext.Provider value={value}>{children}</CartContext.Provider>
}

// eslint-disable-next-line react-refresh/only-export-components
export function useCart() {
  const context = useContext(CartContext)
  if (!context) {
    throw new Error('useCart must be used inside <CartProvider>')
  }
  return context
}

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from './App.jsx'
import { CartProvider } from './context/CartContext.jsx'
import './index.css'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <BrowserRouter>
      <CartProvider>
        <App />
      </CartProvider>
    </BrowserRouter>
  </StrictMode>,
)

import { useCart } from '../context/CartContext.jsx'
import { categoryLabels } from '../data/menu.js'
import { formatPrice } from '../utils/format.js'

export default function MenuCard({ item }) {
  const { addItem } = useCart()

  return (
    <article className="menu-card">
      <div className="swatch" aria-hidden="true">
        {item.name.charAt(0)}
      </div>
      <div className="menu-card-body">
        <span className="category-tag">{categoryLabels[item.category]}</span>
        <h3>{item.name}</h3>
        <p>{item.description}</p>
        <div className="menu-card-footer">
          <span className="price">{formatPrice(item.price)}</span>
          <button
            type="button"
            className="btn"
            aria-label={`Add ${item.name} to cart`}
            onClick={() => addItem(item.id)}
          >
            Add
          </button>
        </div>
      </div>
    </article>
  )
}

import { Link, NavLink } from 'react-router-dom'
import { useCart } from '../context/CartContext.jsx'

export default function Header() {
  const { totalItems } = useCart()

  return (
    <header className="site-header">
      <div className="container header-inner">
        <Link to="/" className="brand">
          Brew &amp; Bean
        </Link>
        <nav aria-label="Main">
          <ul className="nav-list">
            <li>
              <NavLink to="/" end>
                Home
              </NavLink>
            </li>
            <li>
              <NavLink to="/menu">Menu</NavLink>
            </li>
            <li>
              <NavLink to="/cart">
                Cart
                {totalItems > 0 && <span className="cart-badge">{totalItems}</span>}
              </NavLink>
            </li>
          </ul>
        </nav>
      </div>
    </header>
  )
}

Write a React component `OrderForm` in src/components/OrderForm.jsx with a prop `onSubmit(details)`.

Fields: name (text, required, at least 2 characters), phone (Indian mobile number: exactly 10 digits starting with 6-9), pickup time (a select with 'As soon as possible', 'In 15 minutes', 'In 30 minutes', 'In 1 hour').
On submit: preventDefault, validate, show an error under each invalid field, and only call onSubmit({ name, phone, pickup }) with trimmed values if everything is valid.
Accessibility: every field has a <label htmlFor>, errors are linked with aria-describedby, invalid fields have aria-invalid.
Use form noValidate. Class names: order-form, field, error, btn. No form libraries.

import { useState } from 'react'

const pickupOptions = [
  'As soon as possible',
  'In 15 minutes',
  'In 30 minutes',
  'In 1 hour',
]

function validate({ name, phone }) {
  const errors = {}
  if (name.trim().length < 2) {
    errors.name = 'Enter your name (at least 2 letters).'
  }
  if (!/^[6-9]\d{9}$/.test(phone.trim())) {
    errors.phone = 'Enter a 10-digit mobile number starting with 6, 7, 8 or 9.'
  }
  return errors
}

export default function OrderForm({ onSubmit }) {
  const [name, setName] = useState('')
  const [phone, setPhone] = useState('')
  const [pickup, setPickup] = useState(pickupOptions[0])
  const [errors, setErrors] = useState({})

  function handleSubmit(event) {
    event.preventDefault()
    const found = validate({ name, phone })
    setErrors(found)
    if (Object.keys(found).length > 0) return
    onSubmit({ name: name.trim(), phone: phone.trim(), pickup })
  }

  return (
    <form className="order-form" onSubmit={handleSubmit} noValidate>
      <h2>Your details</h2>

      <div className="field">
        <label htmlFor="name">Name</label>
        <input
          id="name"
          name="name"
          type="text"
          autoComplete="name"
          value={name}
          onChange={(event) => setName(event.target.value)}
          aria-invalid={Boolean(errors.name)}
          aria-describedby={errors.name ? 'name-error' : undefined}
        />
        {errors.name && (
          <p className="error" id="name-error">
            {errors.name}
          </p>
        )}
      </div>

      <div className="field">
        <label htmlFor="phone">Mobile number</label>
        <input
          id="phone"
          name="phone"
          type="tel"
          inputMode="numeric"
          autoComplete="tel-national"
          maxLength={10}
          value={phone}
          onChange={(event) => setPhone(event.target.value)}
          aria-invalid={Boolean(errors.phone)}
          aria-describedby={errors.phone ? 'phone-error' : undefined}
        />
        {errors.phone && (
          <p className="error" id="phone-error">
            {errors.phone}
          </p>
        )}
      </div>

      <div className="field">
        <label htmlFor="pickup">Pickup time</label>
        <select
          id="pickup"
          name="pickup"
          value={pickup}
          onChange={(event) => setPickup(event.target.value)}
        >
          {pickupOptions.map((option) => (
            <option key={option} value={option}>
              {option}
            </option>
          ))}
        </select>
      </div>

      <button type="submit" className="btn">
        Place order
      </button>
    </form>
  )
}

import { Link } from 'react-router-dom'
import { formatPrice } from '../utils/format.js'

export default function OrderConfirmation({ order }) {
  return (
    <section className="container page">
      <div className="confirmation">
        <h1>Thank you, {order.name}!</h1>
        <p>
          Your order will be ready for pickup{' '}
          <strong>{order.pickup.toLowerCase()}</strong> at our Indiranagar shop.
        </p>

        <ul className="summary-list">
          {order.lines.map(({ id, qty, item }) => (
            <li key={id}>
              <span>
                {qty} x {item.name}
              </span>
              <span>{formatPrice(item.price * qty)}</span>
            </li>
          ))}
        </ul>
        <p className="summary-total">
          <span>Total</span>
          <span>{formatPrice(order.total)}</span>
        </p>

        <p className="muted">
          This is a demo. Your order has not been sent anywhere yet, because the
          website is not connected to a server.
        </p>
        <Link to="/menu" className="btn">
          Back to the menu
        </Link>
      </div>
    </section>
  )
}

import { useState } from 'react'
import { Link } from 'react-router-dom'
import OrderForm from '../components/OrderForm.jsx'
import OrderConfirmation from '../components/OrderConfirmation.jsx'
import { useCart } from '../context/CartContext.jsx'
import { formatPrice } from '../utils/format.js'

export default function Cart() {
  const { lines, totalPrice, increase, decrease, removeItem, clearCart } =
    useCart()
  const [confirmation, setConfirmation] = useState(null)

  function handlePlaceOrder(details) {
    // Keep a copy of the order before the cart is emptied.
    setConfirmation({ ...details, lines, total: totalPrice })
    clearCart()
  }

  if (confirmation) {
    return <OrderConfirmation order={confirmation} />
  }

  if (lines.length === 0) {
    return (
      <section className="container page empty">
        <h1>Your cart is empty</h1>
        <p>Add something from the menu and it will show up here.</p>
        <Link to="/menu" className="btn">
          Browse the menu
        </Link>
      </section>
    )
  }

  return (
    <section className="container page">
      <h1>Your cart</h1>
      <div className="cart-layout">
        <div>
          <ul className="cart-list">
            {lines.map(({ id, qty, item }) => (
              <li key={id} className="cart-line">
                <span className="cart-line-name">{item.name}</span>
                <div className="qty">
                  <button
                    type="button"
                    className="qty-btn"
                    aria-label={`Decrease quantity of ${item.name}`}
                    onClick={() => decrease(id)}
                  >
                    -
                  </button>
                  <span>{qty}</span>
                  <button
                    type="button"
                    className="qty-btn"
                    aria-label={`Increase quantity of ${item.name}`}
                    onClick={() => increase(id)}
                  >
                    +
                  </button>
                </div>
                <span className="cart-line-price">
                  {formatPrice(item.price * qty)}
                </span>
                <button
                  type="button"
                  className="link-button"
                  aria-label={`Remove ${item.name} from cart`}
                  onClick={() => removeItem(id)}
                >
                  Remove
                </button>
              </li>
            ))}
          </ul>
          <div className="cart-total">
            <span>Total</span>
            <span>{formatPrice(totalPrice)}</span>
          </div>
          <button type="button" className="link-button" onClick={clearCart}>
            Empty the cart
          </button>
        </div>

        <OrderForm onSubmit={handlePlaceOrder} />
      </div>
    </section>
  )
}

/* Cart badge in the header */
.cart-badge {
  display: inline-block;
  min-width: 1.4em;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--brand);
  color: #ffffff;
  font-size: 0.8rem;
  text-align: center;
}

/* Cart page */
.empty {
  text-align: center;
  padding-top: 64px;
}

.cart-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
  align-items: start;
  margin-top: 24px;
}

.cart-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cart-line {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.cart-line-name {
  font-weight: 600;
}

.cart-line-price {
  font-weight: 600;
}

.qty {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qty-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--brand);
  border-radius: 6px;
  background: var(--surface);
  color: var(--brand);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.link-button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--brand);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.cart-total {
  display: flex;
  justify-content: space-between;
  padding: 16px 0;
  font-size: 1.2rem;
  font-weight: 700;
}

/* Order form */
.order-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
}

.order-form h2 {
  margin-top: 0;
}

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}

.field input,
.field select {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  color: var(--text);
  background: #ffffff;
  border: 1px solid var(--field-border);
  border-radius: 8px;
}

.field input[aria-invalid='true'] {
  border-color: var(--danger);
}

.error {
  margin: 4px 0 0;
  font-size: 0.9rem;
  color: var(--danger);
}

/* Order confirmation */
.confirmation {
  max-width: 600px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
}

.confirmation h1 {
  margin-top: 0;
}

.summary-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.summary-list li,
.summary-total {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.summary-total {
  font-weight: 700;
}

.muted {
  color: var(--muted);
}

git add .
git commit -m "Add cart context, order form and confirmation"

Review this React cart code for bugs, edge cases and security problems. The app is a coffee shop website with no backend yet.

<code>
[paste CartContext.jsx and Cart.jsx]
</code>

List only real problems (not style preferences), most serious first. For each, say how to reproduce it and give the smallest fix. If there are no real problems in a category, say so.