# shopzaki — SellZaki Storefront

Next.js 16 (App Router) storefront for SellZaki multi-tenant POS.
Lives inside the main `sellzaki` Laravel monorepo at `shopzaki/`.

## Stack

| Layer | Tech |
|---|---|
| Framework | Next.js 16 (App Router, RSC, ISR) |
| Styling | Tailwind CSS v4 |
| State | Zustand v5 (cart, persisted) |
| Hosting | Vercel (Root Directory = `shopzaki`) |
| Backend | Laravel (SellZaki) via `/api/storefront/*` |

## Domain pattern

```
{tenant-slug}.shop.{APP_DOMAIN}   →  Vercel  →  this Next.js app
```

The Edge Proxy (`proxy.ts`) extracts `tenant-slug` from the hostname and sets
`x-tenant-slug` header. Every RSC and API proxy call forwards this header to
Laravel so the correct tenant database is used.

## Local development

```bash
# From the monorepo root:
cd shopzaki

# 1. Install deps
npm install

# 2. Copy env (already configured for erfa3ly.com)
cp .env.example .env.local

# 3. Start dev server
npm run dev

# 4. Open a tenant store (pass ?tenant=<slug> in dev mode)
open "http://localhost:3000/?tenant=tyson"
```

## Vercel deployment

1. Connect the **`sellzaki` monorepo** Git repo to a new Vercel project.
2. Set **Root Directory = `shopzaki`** in Vercel project settings.
3. Set environment variables in Vercel dashboard:
   - `LARAVEL_API_URL` = `https://erfa3ly.com`
   - `NEXT_PUBLIC_APP_DOMAIN` = `erfa3ly.com`
   - `NEXT_PUBLIC_SHOP_DOMAIN` = `shop.erfa3ly.com`
4. Add wildcard domain in Vercel project settings:
   - `*.shop.erfa3ly.com`  (requires Vercel Pro for wildcard)
5. DNS record:
   ```
   CNAME  *.shop.erfa3ly.com  →  cname.vercel-dns.com
   ```
6. Deploy — Vercel handles SSL automatically.

## Pages

| Route | Description |
|---|---|
| `/` | Home — hero, categories, featured products |
| `/products` | Product listing with sidebar filters + pagination |
| `/products/[barcode]` | Product detail — images, variants, add to cart |
| `/categories` | All categories grid |
| `/categories/[id]` | Category product listing |
| `/cart` | Cart — update quantities, remove items |
| `/checkout` | Checkout — contact + shipping + COD payment |
| `/orders/[orderNumber]` | Order confirmation + tracking |

## API proxy

All client-side calls go through `/api/storefront-proxy/[...path]` which:
- Reads `x-tenant-slug` from the request headers (set by `proxy.ts`)
- Forwards the call to `LARAVEL_API_URL/api/storefront/...` with the correct `Host` header
- Returns the Laravel response to the client

This avoids CORS issues and keeps `LARAVEL_API_URL` server-side only.