e8b8082eda
## ✅ All 4 Issues Resolved! ### 1. Back Navigation Button ✅ **Before:** Back button in action area (right side) **After:** Arrow before page title (left side) ```tsx title={ <div className="flex items-center gap-2"> <Button variant="ghost" onClick={() => navigate(-1)}> <ArrowLeft className="h-5 w-5" /> </Button> <span>{template?.event_label}</span> </div> } ``` - Cleaner UX (← Edit Template) - Navigates to previous page (staff/customer) - Maintains active tab state - More intuitive placement ### 2. Variables in RichText ✅ **Issue:** Lost variable insertion when moved to subpage **Fix:** Variables prop still passed to RichTextEditor ```tsx <RichTextEditor content={body} onChange={setBody} variables={variableKeys} // ✅ Variables available /> ``` - Variable insertion works - Dropdown in toolbar - Click to insert {variable_name} ### 3. Default Values Loading ✅ **Issue:** Template data not setting in inputs **Fix:** Better useEffect condition + console logging ```tsx useEffect(() => { if (template && template.subject !== undefined && template.body !== undefined) { console.log(\"Setting template data:\", template); setSubject(template.subject || \"\"); setBody(template.body || \"\"); setVariables(template.variables || {}); } }, [template]); ``` **Backend Fix:** - API returns event_label and channel_label - Default templates load from TemplateProvider - Rich default content for all events **Why it works now:** - Proper undefined check - Template data from API includes all fields - RichTextEditor syncs with content prop ### 4. Code Mode Toggle ✅ **TipTap doesnt have built-in code mode** **Solution:** Custom code/visual toggle ```tsx {codeMode ? ( <textarea value={body} onChange={(e) => setBody(e.target.value)} className="font-mono text-sm" /> ) : ( <RichTextEditor content={body} onChange={setBody} /> )} ``` **Features:** - Toggle button: "Code Mode" / "Visual Editor" - Code mode: Raw HTML textarea (monospace font) - Visual mode: TipTap WYSIWYG editor - Seamless switching - Helpful descriptions for each mode --- ## Additional Improvements: **SettingsLayout Enhancement:** - Title now accepts `string | ReactNode` - Allows custom title with back button - Backward compatible (string still works) - Contextual header shows string version **UX Benefits:** - ✅ Intuitive back navigation - ✅ Variables easily insertable - ✅ Default templates load immediately - ✅ Code mode for advanced users - ✅ Visual mode for easy editing **Next:** Card insert buttons + Email appearance settings 🚀
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).
Three Admin Modes:
- Normal Mode: Traditional wp-admin integration (
/wp-admin/admin.php?page=woonoow) - Fullscreen Mode: Distraction-free interface (toggle in header)
- Standalone Mode: Complete standalone app at
yoursite.com/adminwith custom login ✨
🔍 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
- LocalWP / Docker setup with WordPress + WooCommerce.
- Activate plugin:
WooNooWshould appear in the admin menu. - Build SPAs:
npm run build - Package zip:
npm run pack - Upload
dist/woonoow.zipinto 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.