Skip to main content

​
Overview

The useCartStore hook provides centralized cart state management using Zustand. It handles adding/removing items, calculating totals with discounts, and managing service type (table vs delivery) with associated shipping costs.

​
Usage

import { useCartStore } from '@/src/stores/useCartStore';

function ProductCard({ product }: { product: Product }) {
  const addItem = useCartStore((s) => s.addItem);
  const removeItem = useCartStore((s) => s.removeItem);
  const items = useCartStore((s) => s.items);

  const cartItem = items.find((i) => i.product.id === product.id);
  const quantity = cartItem?.quantity ?? 0;

  return (
    <View>
      <Text>{product.name} - ${product.price.toFixed(2)}</Text>
      <Button onPress={() => addItem(product)} title="Add" />
      {quantity > 0 && (
        <Button onPress={() => removeItem(product.id)} title="Remove" />
      )}
    </View>
  );
}

​
State properties

​
items
CartItem[]
Array of cart items, each containing a product and quantity
​
isBirthdayMode
boolean
Whether birthday mode is active (enables special animations and discounts)
​
discount
number
Discount percentage applied to the cart total (0 to 1)
​
total
number
Calculated cart total after applying discounts, rounded to 2 decimal places
​
serviceType
'TABLE' | 'DELIVERY'
Current service mode determining the ordering flow
​
shippingCost
number
Additional shipping fee for delivery orders (0 for table service)

​
Actions

​
addItem

Adds a product to the cart or increments quantity if already present.
​
product
Product
required
The product object to add to the cart
const addItem = useCartStore((s) => s.addItem);
addItem(product);

​
removeItem

Removes one unit of a product from the cart. If quantity reaches zero, removes the item entirely.
​
productId
string
required
The unique identifier of the product to remove
const removeItem = useCartStore((s) => s.removeItem);
removeItem('product-123');

​
resetCart

Clears all cart data and resets to initial state. 
const resetCart = useCartStore((s) => s.resetCart);
resetCart();

​
setBirthdayMode

Activates or deactivates birthday celebration mode with optional discount.
​
active
boolean
required
Whether to enable birthday mode
​
discount
number
default:"0"
Discount percentage to apply (0 to 1)
const setBirthdayMode = useCartStore((s) => s.setBirthdayMode);
setBirthdayMode(true, 0.15); // 15% discount

​
setServiceType

Changes the service type between table and delivery modes.
​
type
'TABLE' | 'DELIVERY'
required
The service type to set
const { setServiceType } = useCartStore();
setServiceType('DELIVERY');

​
setShippingCost

Updates the shipping cost for delivery orders.
​
cost
number
required
The shipping fee amount
const { setShippingCost } = useCartStore();
setShippingCost(4.99);

​
Real-world example

import { useCartStore } from '@/src/stores/useCartStore';
import { useEffect } from 'react';
import { calculateShippingCost } from '@/src/lib/utils';

function DeliveryCatalog() {
  const { items, total, shippingCost, setShippingCost } = useCartStore();
  const deliveryInfo = useLocationStore((s) => s.deliveryInfo);

  useEffect(() => {
    if (deliveryInfo) {
      setShippingCost(calculateShippingCost(deliveryInfo.distanceKm));
    }
  }, [deliveryInfo, setShippingCost]);

  return (
    <View>
      <Text>Subtotal: ${total.toFixed(2)}</Text>
      <Text>Shipping: ${shippingCost.toFixed(2)}</Text>
      <Text>Total: ${(total + shippingCost).toFixed(2)}</Text>
    </View>
  );
}

​
Type definitions

interface CartItem {
  product: Product;
  quantity: number;
}

interface Product {
  id: string;
  name: string;
  price: number;
  category: ProductCategory;
  image: string;
  description?: string;
}