236 lines
6.7 KiB
Markdown
236 lines
6.7 KiB
Markdown
# WooNooW Standalone Mode - Complete Summary
|
|
|
|
## 📋 Overview
|
|
|
|
WooNooW now supports **three distinct admin interface modes**, providing flexibility for different workflows and use cases.
|
|
|
|
---
|
|
|
|
## 🎯 Three Admin Modes
|
|
|
|
### 1. **Normal Mode (wp-admin)**
|
|
- **URL:** `/wp-admin/admin.php?page=woonoow`
|
|
- **Layout:** WordPress admin sidebar + WooNooW SPA
|
|
- **Settings Submenu:** Hidden (use WooCommerce settings)
|
|
- **Use Case:** Traditional WordPress admin workflow
|
|
|
|
### 2. **Fullscreen Mode**
|
|
- **Toggle:** Fullscreen button in header
|
|
- **Layout:** WooNooW SPA only (no WordPress chrome)
|
|
- **Settings Submenu:** Hidden
|
|
- **Use Case:** Focus mode for order processing
|
|
|
|
### 3. **Standalone Mode** ✨ NEW
|
|
- **URL:** `https://yoursite.com/admin`
|
|
- **Layout:** Complete standalone application
|
|
- **Settings Submenu:** Visible with SPA settings pages
|
|
- **Use Case:** Quick daily access, mobile-friendly
|
|
|
|
---
|
|
|
|
## 🔐 Standalone Mode Features
|
|
|
|
### Authentication
|
|
- **Custom login page:** `/admin#/login`
|
|
- **WordPress integration:** Uses native WordPress authentication
|
|
- **Session persistence:** Login state shared across all modes
|
|
- **Logout:** Dedicated logout button in header
|
|
|
|
### Navigation
|
|
- **"WordPress" button:** Quick access to wp-admin
|
|
- **Admin bar link:** Access standalone from wp-admin
|
|
- **Settings submenu:** Full settings navigation (standalone only)
|
|
|
|
### Settings Structure (Option A - Everyday Use)
|
|
```
|
|
Settings (Standalone Only)
|
|
├── WooNooW (plugin settings)
|
|
├── General (store settings) - SPA
|
|
├── Payments (gateways) - SPA
|
|
├── Shipping (zones, methods) - SPA
|
|
├── Products (inventory) - SPA
|
|
├── Tax (rates) - SPA
|
|
├── Accounts & Privacy - SPA
|
|
├── Emails (templates) - SPA
|
|
├── Advanced - Bridge to wp-admin
|
|
├── Integration - Bridge to wp-admin
|
|
├── Status - Bridge to wp-admin
|
|
└── Extensions - Bridge to wp-admin
|
|
```
|
|
|
|
**Strategy:** Focus on most-used settings in SPA, bridge to wp-admin for advanced features.
|
|
|
|
---
|
|
|
|
## 🔧 Technical Implementation
|
|
|
|
### Backend Files
|
|
|
|
**`includes/Admin/StandaloneAdmin.php`**
|
|
- Handles `/admin` and `/admin/` requests
|
|
- Renders standalone HTML template
|
|
- Localizes `WNW_CONFIG` with `standaloneMode: true`
|
|
- Provides authentication state and store settings
|
|
|
|
**`includes/Admin/Menu.php`**
|
|
- Added admin bar link to standalone mode
|
|
- Icon: `dashicons-store`
|
|
- Capability: `manage_woocommerce`
|
|
|
|
**`includes/Api/AuthController.php`**
|
|
- Login endpoint: `POST /wp-json/woonoow/v1/auth/login`
|
|
- Authentication sequence:
|
|
1. `wp_authenticate()`
|
|
2. `wp_clear_auth_cookie()`
|
|
3. `wp_set_current_user()`
|
|
4. `wp_set_auth_cookie()`
|
|
5. `do_action('wp_login')`
|
|
- Ensures session persistence
|
|
|
|
### Frontend Files
|
|
|
|
**`admin-spa/src/App.tsx`**
|
|
- `AuthWrapper` component handles authentication
|
|
- Login/logout flow with page reload
|
|
- "WordPress" button (standalone only)
|
|
- "Logout" button (standalone only)
|
|
|
|
**`admin-spa/src/routes/Login.tsx`**
|
|
- Custom login form
|
|
- Username/password authentication
|
|
- Page reload after login to pick up cookies/nonces
|
|
|
|
**`admin-spa/src/nav/tree.ts`**
|
|
- Dynamic settings submenu using getter
|
|
- Only shows in standalone mode:
|
|
```typescript
|
|
get children() {
|
|
const isStandalone = (window as any).WNW_CONFIG?.standaloneMode;
|
|
if (!isStandalone) return [];
|
|
return [ /* settings items */ ];
|
|
}
|
|
```
|
|
|
|
**`admin-spa/src/routes/Settings/`**
|
|
- `index.tsx` - WooNooW settings
|
|
- `General.tsx` - General settings placeholder
|
|
- `Payments.tsx` - Payment settings placeholder
|
|
- `Shipping.tsx` - Shipping settings placeholder
|
|
|
|
---
|
|
|
|
## 🔄 Mode Switching
|
|
|
|
### From wp-admin to Standalone
|
|
1. Click "WooNooW" in admin bar
|
|
2. Opens `/admin` in same tab
|
|
3. Session persists
|
|
|
|
### From Standalone to wp-admin
|
|
1. Click "WordPress" button in header
|
|
2. Opens `/wp-admin` in same tab
|
|
3. Session persists
|
|
|
|
### To Fullscreen
|
|
- Click fullscreen toggle in any mode
|
|
- Maximizes workspace
|
|
|
|
---
|
|
|
|
## 🧪 Testing Checklist
|
|
|
|
### Authentication
|
|
- [ ] Login via standalone works
|
|
- [ ] Session persists to wp-admin
|
|
- [ ] Logout from standalone works
|
|
- [ ] Logout from wp-admin affects standalone
|
|
|
|
### Navigation
|
|
- [ ] "WordPress" button opens wp-admin
|
|
- [ ] Admin bar link opens standalone
|
|
- [ ] Settings submenu only shows in standalone
|
|
- [ ] Dashboard path is `/dashboard`
|
|
|
|
### Settings
|
|
- [ ] WooNooW settings page loads
|
|
- [ ] General settings page loads
|
|
- [ ] Payments settings page loads
|
|
- [ ] Shipping settings page loads
|
|
- [ ] Bridge links work (Advanced, Integration, Status, Extensions)
|
|
|
|
---
|
|
|
|
## 📚 Documentation Updated
|
|
|
|
1. **PROJECT_BRIEF.md** - Updated Phase 4 description
|
|
2. **PROGRESS_NOTE.md** - Added complete standalone mode section
|
|
3. **SPA_ADMIN_MENU_PLAN.md** - Updated settings structure
|
|
4. **PROJECT_SOP.md** - Added Section 7: Admin Interface Modes
|
|
5. **README.md** - Added three modes overview
|
|
6. **STANDALONE_MODE_SUMMARY.md** - This document
|
|
|
|
---
|
|
|
|
## 🎯 Next Steps
|
|
|
|
### Phase 1: Core Settings (Priority)
|
|
1. **General Settings** - Store address, currency, units
|
|
2. **Payment Settings** - Gateway list with enable/disable
|
|
3. **Shipping Settings** - Zones, methods, rates
|
|
|
|
### Phase 2: Product & Customer Settings
|
|
4. **Product Settings** - Inventory, downloadable products
|
|
5. **Tax Settings** - Tax rates and classes
|
|
6. **Accounts Settings** - Registration, privacy options
|
|
|
|
### Phase 3: Communication
|
|
7. **Email Settings** - Email templates and settings
|
|
|
|
### Phase 4: Advanced (Keep in wp-admin)
|
|
- Advanced settings
|
|
- Integration settings
|
|
- System status
|
|
- Extensions
|
|
|
|
---
|
|
|
|
## 💡 Design Decisions
|
|
|
|
### Why Settings Submenu Only in Standalone?
|
|
- **Normal mode:** Users have full WordPress admin access, use WooCommerce settings
|
|
- **Fullscreen mode:** Focus on tasks, not configuration
|
|
- **Standalone mode:** Complete app experience, needs settings access
|
|
|
|
### Why Option A (Everyday Use)?
|
|
- ✅ Faster development - Focus on most-used features
|
|
- ✅ Better UX - Quick access to daily tasks
|
|
- ✅ Less maintenance - Don't duplicate everything
|
|
- ✅ Coexist with WooCommerce - Users can still access advanced settings
|
|
- ✅ Extensible - 3rd party plugins can hook into settings
|
|
|
|
### Why Dynamic Getter for Settings?
|
|
- Evaluated at runtime, not module load time
|
|
- Ensures correct mode detection
|
|
- Clean implementation without conditionals everywhere
|
|
|
|
---
|
|
|
|
## 🔍 Key Files Reference
|
|
|
|
### Backend
|
|
- `includes/Admin/StandaloneAdmin.php` - Standalone routing and rendering
|
|
- `includes/Admin/Menu.php` - Admin bar link
|
|
- `includes/Api/AuthController.php` - Login/logout endpoints
|
|
|
|
### Frontend
|
|
- `admin-spa/src/App.tsx` - Main app, auth wrapper, header
|
|
- `admin-spa/src/routes/Login.tsx` - Login form
|
|
- `admin-spa/src/nav/tree.ts` - Navigation structure
|
|
- `admin-spa/src/routes/Settings/` - Settings pages
|
|
|
|
---
|
|
|
|
**Implementation Date:** November 5, 2025
|
|
**Status:** ✅ Production Ready
|
|
**Next Milestone:** Implement General/Payments/Shipping settings pages
|