# WooNooW

**WooNooW** is a modern experience layer for WooCommerce — enhancing UX, speed, and reliability **without data migration**.  
It keeps WooCommerce as the core engine while providing a modern React-powered interface for both the **storefront** (cart, checkout, my‑account) and the **admin** (orders, dashboard).

---

## 🔍 Background

WooCommerce is the most used e‑commerce engine in the world, but its architecture has become heavy and fragmented.  
With React‑based blocks (Checkout, Cart, Product Edit) and HPOS now rolling out, many existing addons are becoming obsolete or unstable.  
WooNooW bridges the gap between Woo’s legacy PHP system and the new modern stack — so users get performance and simplicity without losing compatibility.

---

## 🚀 Key Principles

- **No Migration Needed** – Woo data stays intact.  
- **Safe Activate/Deactivate** – revert to native Woo anytime, no data loss.  
- **Hybrid by Default** – SSR + React islands for Cart/Checkout/My‑Account.  
- **Full SPA Toggle** – optional React‑only mode for max performance.  
- **HPOS Mandatory** – optimized datastore and async operations.  
- **Compat Layer** – hook mirror + slot rendering for legacy addons.  
- **Async Mail & Tasks** – powered by Action Scheduler.

---

## 🧱 Tech Stack

| Layer | Technology |
|--------|-------------|
| Backend | PHP 8.2+, WordPress, WooCommerce (HPOS), Action Scheduler |
| Frontend | React 18 + TypeScript, Vite, React Query, Tailwind (optional) |
| Build & Package | Composer, NPM, ESM scripts, Zip automation |
| Architecture | Modular PSR‑4 classes, REST‑driven SPA islands |

---

## 🧩 Project Structure

```
woonoow/
├── admin-spa/
│   ├── src/
│   │   ├── components/
│   │   │   ├── filters/
│   │   │   │   ├── DateRange.tsx
│   │   │   │   └── OrderBy.tsx
│   │   │   └── CommandPalette.tsx
│   │   ├── hooks/
│   │   │   └── useShortcuts.tsx
│   │   ├── lib/
│   │   │   ├── api.ts
│   │   │   ├── currency.ts
│   │   │   ├── dates.ts
│   │   │   ├── query-params.ts
│   │   │   ├── useCommandStore.ts
│   │   │   └── utils.ts
│   │   ├── pages/
│   │   │   └── orders/
│   │   │       ├── partials
│   │   │       │   └── OrderForm.tsx
│   │   │       ├── Orders.tsx
│   │   │       ├── OrdersNew.tsx
│   │   │       └── OrderShow.tsx
│   │   ├── routes/
│   │   │   └── Dashboard.tsx
│   │   ├── types/
│   │   │   └── qrcode.d.ts
│   │   ├── App.tsx
│   │   ├── index.css
│   │   └── main.tsx
│   └── vite.config.ts
├── includes/
│   ├── Admin/
│   │   ├── Assets.php
│   │   └── Menu.php
│   ├── Api/
│   │   ├── CheckoutController.php
│   │   ├── OrdersController.php
│   │   ├── Permissions.php
│   │   └── Routes.php
│   ├── Compat/
│   │   ├── HideWooMenus.php
│   │   └── HooksShim.php
│   └── Core/
│       ├── DataStores/
│       │   ├── OrderStore_HPOS.php
│       │   └── OrderStore.php
│       ├── Mail/
│       │   ├── MailQueue.php
│       │   └── WooEmailOverride.php
│       ├── Bootstrap.php
│       └── Features.php
├── woonoow.php
└── docs (project notes, SOP, etc.)
```

---

## ⚙️ Development Workflow

1. **LocalWP / Docker setup** with WordPress + WooCommerce.  
2. Activate plugin: `WooNooW` should appear in the admin menu.  
3. Build SPAs:
   ```bash
   npm run build
   ```
4. Package zip:
   ```bash
   npm run pack
   ```
5. Upload `dist/woonoow.zip` into WordPress → Plugins → Add New → Upload.

---

## 🧭 Vision

> “WooCommerce, reimagined for now.”

WooNooW delivers modern speed and UX while keeping WooCommerce’s ecosystem alive.  
No migration. No lock‑in. Just Woo, evolved.

---