# WooNooW Customer SPA

Modern React-based storefront and customer portal for WooNooW.

## Features

- **Product Catalog** - Browse products with filters and search
- **Shopping Cart** - Add to cart with real-time updates
- **Checkout** - Single-page checkout with address autocomplete
- **My Account** - Order history, profile, and addresses
- **Mobile-First** - Responsive design for all devices
- **PWA Ready** - Offline support and app-like experience

## Development

```bash
# Install dependencies
npm install

# Start dev server (https://woonoow.local:5174)
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Lint code
npm run lint
```

## Project Structure

```
customer-spa/
├── src/
│   ├── pages/          # Page components (Shop, Cart, Checkout, Account)
│   ├── components/     # Reusable UI components
│   ├── lib/
│   │   ├── api/        # API client and endpoints
│   │   ├── cart/       # Cart state management (Zustand)
│   │   ├── checkout/   # Checkout logic
│   │   └── tracking/   # Analytics and pixel tracking
│   ├── hooks/          # Custom React hooks
│   ├── contexts/       # React contexts
│   └── types/          # TypeScript type definitions
├── public/             # Static assets
└── dist/               # Build output (generated)
```

## Tech Stack

- **React 18** - UI framework
- **TypeScript** - Type safety
- **Vite** - Build tool
- **React Router** - Routing
- **TanStack Query** - Data fetching
- **Zustand** - State management
- **TailwindCSS** - Styling
- **shadcn/ui** - UI components
- **React Hook Form** - Form handling
- **Zod** - Schema validation

## API Integration

The SPA communicates with WordPress via REST API endpoints:

- `/wp-json/woonoow/v1/shop/*` - Product catalog
- `/wp-json/woonoow/v1/cart/*` - Shopping cart
- `/wp-json/woonoow/v1/checkout/*` - Checkout process
- `/wp-json/woonoow/v1/account/*` - Customer account

## Deployment Modes

### 1. Shortcode Mode (Default)
Works with any WordPress theme via shortcodes:
- `[woonoow_shop]`
- `[woonoow_cart]`
- `[woonoow_checkout]`
- `[woonoow_account]`

### 2. Full SPA Mode
Takes over entire frontend for maximum performance.

### 3. Hybrid Mode
SSR for product pages (SEO), SPA for cart/checkout/account.

## SEO & Tracking

- **SEO-Friendly** - Server-side rendering for product pages
- **Analytics** - Google Analytics, GTM support
- **Pixels** - Facebook, TikTok, Pinterest pixel support
- **PixelMySite** - Full compatibility

## License

Proprietary - Part of WooNooW plugin