docs: Audit and cleanup documentation
## Task 1: Translation Support Audit ✅ - Audited all settings pages for translation support - Found 3 pages missing `__` function: Store, Payments, Developer - Most pages already have proper i18n implementation - Action: Add translation support in next iteration ## Task 2: Documentation Cleanup ✅ ### Created - DOCS_AUDIT_REPORT.md - Comprehensive audit of 36 MD files - TASKS_SUMMARY.md - Current tasks and progress tracking ### Deleted (12 obsolete docs) Removed completed/superseded documentation: - CUSTOMER_SETTINGS_404_FIX.md - Bug fixed - MENU_FIX_SUMMARY.md - Menu implemented - DASHBOARD_TWEAKS_TODO.md - Dashboard complete - DASHBOARD_PLAN.md - Dashboard implemented - SPA_ADMIN_MENU_PLAN.md - Menu implemented - STANDALONE_ADMIN_SETUP.md - Standalone complete - STANDALONE_MODE_SUMMARY.md - Duplicate doc - SETTINGS_PAGES_PLAN.md - Superseded by V2 - SETTINGS_PAGES_PLAN_V2.md - Settings implemented - SETTINGS_TREE_PLAN.md - Navigation implemented - SETTINGS_PLACEMENT_STRATEGY.md - Strategy finalized - TAX_NOTIFICATIONS_PLAN.md - Merged into notification strategy ### Result - **Before:** 36 documents - **After:** 24 documents - **Reduction:** 33% fewer docs - **Benefit:** Clearer focus, easier navigation ### Remaining Docs - 15 essential docs (core architecture, guides) - 9 docs to consolidate later (low priority) ## Task 3: Notification System - Ready - Read NOTIFICATION_STRATEGY.md - Created implementation plan in TASKS_SUMMARY.md - Ready to start Phase 1 implementation --- **Next:** Implement notification core framework
This commit is contained in:
dwindown
@@ -1,131 +0,0 @@
|
|||||||
# Customer Settings 404 Error - Troubleshooting Guide
|
|
||||||
|
|
||||||
## Issue
|
|
||||||
The `/store/customer-settings` endpoint returns 404 error.
|
|
||||||
|
|
||||||
## Verification Steps
|
|
||||||
|
|
||||||
### 1. Check if routes are registered
|
|
||||||
The routes ARE correctly registered in `includes/Api/StoreController.php`:
|
|
||||||
- Line 90-97: GET `/woonoow/v1/store/customer-settings`
|
|
||||||
- Line 99-106: POST `/woonoow/v1/store/customer-settings`
|
|
||||||
|
|
||||||
### 2. Check if controller is initialized
|
|
||||||
The controller IS initialized in `includes/Api/Routes.php`:
|
|
||||||
- Line 56-57: `new StoreController()` and `register_routes()`
|
|
||||||
|
|
||||||
### 3. Check if class exists
|
|
||||||
The `CustomerSettingsProvider` class EXISTS in:
|
|
||||||
- `includes/Compat/CustomerSettingsProvider.php`
|
|
||||||
- Namespace: `WooNooW\Compat`
|
|
||||||
|
|
||||||
## Possible Causes & Solutions
|
|
||||||
|
|
||||||
### Solution 1: Flush WordPress Permalinks
|
|
||||||
WordPress may need to rebuild its rewrite rules.
|
|
||||||
|
|
||||||
**Via WP-Admin:**
|
|
||||||
1. Go to Settings → Permalinks
|
|
||||||
2. Click "Save Changes" (no need to change anything)
|
|
||||||
|
|
||||||
**Via WP-CLI:**
|
|
||||||
```bash
|
|
||||||
wp rewrite flush
|
|
||||||
```
|
|
||||||
|
|
||||||
### Solution 2: Check Debug Logs
|
|
||||||
Debug logging has been added to track the issue:
|
|
||||||
|
|
||||||
**Enable WordPress Debug:**
|
|
||||||
Add to `wp-config.php`:
|
|
||||||
```php
|
|
||||||
define('WP_DEBUG', true);
|
|
||||||
define('WP_DEBUG_LOG', true);
|
|
||||||
define('WP_DEBUG_DISPLAY', false);
|
|
||||||
```
|
|
||||||
|
|
||||||
**Check logs:**
|
|
||||||
```bash
|
|
||||||
tail -f wp-content/debug.log
|
|
||||||
```
|
|
||||||
|
|
||||||
Look for:
|
|
||||||
- `WooNooW: get_customer_settings called`
|
|
||||||
- `WooNooW: Customer settings retrieved: ...`
|
|
||||||
- `WooNooW: get_customer_settings exception: ...`
|
|
||||||
|
|
||||||
### Solution 3: Test Endpoint Directly
|
|
||||||
Open browser console and run:
|
|
||||||
```javascript
|
|
||||||
fetch(window.WNW_CONFIG.restUrl + '/store/customer-settings', {
|
|
||||||
headers: {
|
|
||||||
'X-WP-Nonce': window.wpApiSettings.nonce
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.then(r => r.json())
|
|
||||||
.then(console.log)
|
|
||||||
.catch(console.error);
|
|
||||||
```
|
|
||||||
|
|
||||||
### Solution 4: Verify REST API is Working
|
|
||||||
Test a known endpoint:
|
|
||||||
```javascript
|
|
||||||
fetch(window.WNW_CONFIG.restUrl + '/store/branding')
|
|
||||||
.then(r => r.json())
|
|
||||||
.then(console.log);
|
|
||||||
```
|
|
||||||
|
|
||||||
If this fails, the REST API itself may be broken.
|
|
||||||
|
|
||||||
### Solution 5: Check .htaccess
|
|
||||||
Ensure `.htaccess` has WordPress rewrite rules:
|
|
||||||
```apache
|
|
||||||
# BEGIN WordPress
|
|
||||||
<IfModule mod_rewrite.c>
|
|
||||||
RewriteEngine On
|
|
||||||
RewriteBase /
|
|
||||||
RewriteRule ^index\.php$ - [L]
|
|
||||||
RewriteCond %{REQUEST_FILENAME} !-f
|
|
||||||
RewriteCond %{REQUEST_FILENAME} !-d
|
|
||||||
RewriteRule . /index.php [L]
|
|
||||||
</IfModule>
|
|
||||||
# END WordPress
|
|
||||||
```
|
|
||||||
|
|
||||||
## Expected Behavior
|
|
||||||
|
|
||||||
**GET Request:**
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"vip_min_spent": 1000,
|
|
||||||
"vip_min_orders": 10,
|
|
||||||
"vip_timeframe": "all",
|
|
||||||
"vip_require_both": true,
|
|
||||||
"vip_exclude_refunded": true
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**POST Request:**
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"success": true,
|
|
||||||
"message": "Customer settings updated successfully",
|
|
||||||
"settings": { ... }
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Quick Fix Checklist
|
|
||||||
- [ ] Flush permalinks
|
|
||||||
- [ ] Enable debug logging
|
|
||||||
- [ ] Check debug.log for errors
|
|
||||||
- [ ] Test endpoint in browser console
|
|
||||||
- [ ] Verify other REST endpoints work
|
|
||||||
- [ ] Check .htaccess file
|
|
||||||
- [ ] Clear all caches (browser, WordPress, server)
|
|
||||||
|
|
||||||
## Still Not Working?
|
|
||||||
If none of the above works, there may be:
|
|
||||||
1. Plugin conflict (disable other plugins temporarily)
|
|
||||||
2. Theme conflict (switch to default theme temporarily)
|
|
||||||
3. Server configuration issue (check with hosting provider)
|
|
||||||
4. WordPress REST API disabled by security plugin
|
|
||||||
@@ -1,511 +0,0 @@
|
|||||||
# WooNooW Dashboard Plan
|
|
||||||
|
|
||||||
**Last updated:** 2025-10-28
|
|
||||||
**Status:** Planning Phase
|
|
||||||
**Reference:** WooCommerce Analytics & Reports
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🎯 Overview
|
|
||||||
|
|
||||||
The Dashboard will be the central hub for store analytics, providing at-a-glance insights and detailed reports. It follows WooCommerce's analytics structure but with a modern, performant React interface.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📊 Dashboard Structure
|
|
||||||
|
|
||||||
### **Main Dashboard (`/dashboard`)**
|
|
||||||
**Purpose:** Quick overview of the most critical metrics
|
|
||||||
|
|
||||||
#### Key Metrics (Top Row - Cards)
|
|
||||||
1. **Revenue (Today/24h)**
|
|
||||||
- Total sales amount
|
|
||||||
- Comparison with yesterday (↑ +15%)
|
|
||||||
- Sparkline chart
|
|
||||||
|
|
||||||
2. **Orders (Today/24h)**
|
|
||||||
- Total order count
|
|
||||||
- Comparison with yesterday
|
|
||||||
- Breakdown: Completed/Processing/Pending
|
|
||||||
|
|
||||||
3. **Average Order Value**
|
|
||||||
- Calculated from today's orders
|
|
||||||
- Trend indicator
|
|
||||||
|
|
||||||
4. **Conversion Rate**
|
|
||||||
- Orders / Visitors (if analytics available)
|
|
||||||
- Trend indicator
|
|
||||||
|
|
||||||
#### Main Chart (Center)
|
|
||||||
- **Sales Overview Chart** (Last 7/30 days)
|
|
||||||
- Line/Area chart showing revenue over time
|
|
||||||
- Toggle: Revenue / Orders / Both
|
|
||||||
- Date range selector: 7 days / 30 days / This month / Last month / Custom
|
|
||||||
|
|
||||||
#### Quick Stats Grid (Below Chart)
|
|
||||||
1. **Top Products (Today)**
|
|
||||||
- List of 5 best-selling products
|
|
||||||
- Product name, quantity sold, revenue
|
|
||||||
- Link to full Products report
|
|
||||||
|
|
||||||
2. **Recent Orders**
|
|
||||||
- Last 5 orders
|
|
||||||
- Order #, Customer, Status, Total
|
|
||||||
- Link to Orders page
|
|
||||||
|
|
||||||
3. **Low Stock Alerts**
|
|
||||||
- Products below stock threshold
|
|
||||||
- Product name, current stock, status
|
|
||||||
- Link to Products page
|
|
||||||
|
|
||||||
4. **Top Customers**
|
|
||||||
- Top 5 customers by total spend
|
|
||||||
- Name, orders count, total spent
|
|
||||||
- Link to Customers page
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📑 Submenu Pages (Detailed Reports)
|
|
||||||
|
|
||||||
### 1. **Revenue** (`/dashboard/revenue`)
|
|
||||||
**Purpose:** Detailed revenue analysis
|
|
||||||
|
|
||||||
#### Features:
|
|
||||||
- **Date Range Selector** (Custom, presets)
|
|
||||||
- **Revenue Chart** (Daily/Weekly/Monthly granularity)
|
|
||||||
- **Breakdown Tables:**
|
|
||||||
- Revenue by Product
|
|
||||||
- Revenue by Category
|
|
||||||
- Revenue by Payment Method
|
|
||||||
- Revenue by Shipping Method
|
|
||||||
- **Comparison Mode:** Compare with previous period
|
|
||||||
- **Export:** CSV/PDF export
|
|
||||||
|
|
||||||
#### Metrics:
|
|
||||||
- Gross Revenue
|
|
||||||
- Net Revenue (after refunds)
|
|
||||||
- Tax Collected
|
|
||||||
- Shipping Revenue
|
|
||||||
- Refunds
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 2. **Orders** (`/dashboard/orders`)
|
|
||||||
**Purpose:** Order analytics and trends
|
|
||||||
|
|
||||||
#### Features:
|
|
||||||
- **Orders Chart** (Timeline)
|
|
||||||
- **Status Breakdown** (Pie/Donut chart)
|
|
||||||
- Completed, Processing, Pending, Cancelled, Refunded, Failed
|
|
||||||
- **Tables:**
|
|
||||||
- Orders by Hour (peak times)
|
|
||||||
- Orders by Day of Week
|
|
||||||
- Average Processing Time
|
|
||||||
- **Filters:** Status, Date Range, Payment Method
|
|
||||||
|
|
||||||
#### Metrics:
|
|
||||||
- Total Orders
|
|
||||||
- Average Order Value
|
|
||||||
- Orders by Status
|
|
||||||
- Fulfillment Rate
|
|
||||||
- Cancellation Rate
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 3. **Products** (`/dashboard/products`)
|
|
||||||
**Purpose:** Product performance analysis
|
|
||||||
|
|
||||||
#### Features:
|
|
||||||
- **Top Products Table**
|
|
||||||
- Product name, items sold, revenue, stock status
|
|
||||||
- Sortable by revenue, quantity, views
|
|
||||||
- **Category Performance**
|
|
||||||
- Revenue and sales by category
|
|
||||||
- Tree view for nested categories
|
|
||||||
- **Product Trends Chart**
|
|
||||||
- Sales trend for selected products
|
|
||||||
- **Stock Analysis**
|
|
||||||
- Low stock items
|
|
||||||
- Out of stock items
|
|
||||||
- Overstocked items (slow movers)
|
|
||||||
|
|
||||||
#### Metrics:
|
|
||||||
- Items Sold
|
|
||||||
- Revenue per Product
|
|
||||||
- Stock Status
|
|
||||||
- Conversion Rate (if analytics available)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 4. **Customers** (`/dashboard/customers`)
|
|
||||||
**Purpose:** Customer behavior and segmentation
|
|
||||||
|
|
||||||
#### Features:
|
|
||||||
- **Customer Segments**
|
|
||||||
- New Customers (first order)
|
|
||||||
- Returning Customers
|
|
||||||
- VIP Customers (high lifetime value)
|
|
||||||
- At-Risk Customers (no recent orders)
|
|
||||||
- **Top Customers Table**
|
|
||||||
- Name, total orders, total spent, last order date
|
|
||||||
- Sortable, searchable
|
|
||||||
- **Customer Acquisition Chart**
|
|
||||||
- New customers over time
|
|
||||||
- **Lifetime Value Analysis**
|
|
||||||
- Average LTV
|
|
||||||
- LTV distribution
|
|
||||||
|
|
||||||
#### Metrics:
|
|
||||||
- Total Customers
|
|
||||||
- New Customers (period)
|
|
||||||
- Average Orders per Customer
|
|
||||||
- Customer Retention Rate
|
|
||||||
- Average Customer Lifetime Value
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 5. **Coupons** (`/dashboard/coupons`)
|
|
||||||
**Purpose:** Coupon usage and effectiveness
|
|
||||||
|
|
||||||
#### Features:
|
|
||||||
- **Coupon Performance Table**
|
|
||||||
- Coupon code, uses, discount amount, revenue generated
|
|
||||||
- ROI calculation
|
|
||||||
- **Usage Chart**
|
|
||||||
- Coupon usage over time
|
|
||||||
- **Top Coupons**
|
|
||||||
- Most used
|
|
||||||
- Highest revenue impact
|
|
||||||
- Best ROI
|
|
||||||
|
|
||||||
#### Metrics:
|
|
||||||
- Total Discount Amount
|
|
||||||
- Coupons Used
|
|
||||||
- Revenue with Coupons
|
|
||||||
- Average Discount per Order
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 6. **Taxes** (`/dashboard/taxes`)
|
|
||||||
**Purpose:** Tax collection reporting
|
|
||||||
|
|
||||||
#### Features:
|
|
||||||
- **Tax Summary**
|
|
||||||
- Total tax collected
|
|
||||||
- By tax rate
|
|
||||||
- By location (country/state)
|
|
||||||
- **Tax Chart**
|
|
||||||
- Tax collection over time
|
|
||||||
- **Tax Breakdown Table**
|
|
||||||
- Tax rate, orders, tax amount
|
|
||||||
|
|
||||||
#### Metrics:
|
|
||||||
- Total Tax Collected
|
|
||||||
- Tax by Rate
|
|
||||||
- Tax by Location
|
|
||||||
- Average Tax per Order
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 7. **Downloads** (`/dashboard/downloads`)
|
|
||||||
**Purpose:** Digital product download tracking (if applicable)
|
|
||||||
|
|
||||||
#### Features:
|
|
||||||
- **Download Stats**
|
|
||||||
- Total downloads
|
|
||||||
- Downloads by product
|
|
||||||
- Downloads by customer
|
|
||||||
- **Download Chart**
|
|
||||||
- Downloads over time
|
|
||||||
- **Top Downloaded Products**
|
|
||||||
|
|
||||||
#### Metrics:
|
|
||||||
- Total Downloads
|
|
||||||
- Unique Downloads
|
|
||||||
- Downloads per Product
|
|
||||||
- Average Downloads per Customer
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🛠️ Technical Implementation
|
|
||||||
|
|
||||||
### Backend (PHP)
|
|
||||||
|
|
||||||
#### New REST Endpoints:
|
|
||||||
```
|
|
||||||
GET /woonoow/v1/analytics/overview
|
|
||||||
GET /woonoow/v1/analytics/revenue
|
|
||||||
GET /woonoow/v1/analytics/orders
|
|
||||||
GET /woonoow/v1/analytics/products
|
|
||||||
GET /woonoow/v1/analytics/customers
|
|
||||||
GET /woonoow/v1/analytics/coupons
|
|
||||||
GET /woonoow/v1/analytics/taxes
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Query Parameters:
|
|
||||||
- `date_start` - Start date (YYYY-MM-DD)
|
|
||||||
- `date_end` - End date (YYYY-MM-DD)
|
|
||||||
- `period` - Granularity (day, week, month)
|
|
||||||
- `compare` - Compare with previous period (boolean)
|
|
||||||
- `limit` - Results limit for tables
|
|
||||||
- `orderby` - Sort field
|
|
||||||
- `order` - Sort direction (asc/desc)
|
|
||||||
|
|
||||||
#### Data Sources:
|
|
||||||
- **HPOS Tables:** `wc_orders`, `wc_order_stats`
|
|
||||||
- **WooCommerce Analytics:** Leverage existing `wc_admin_*` tables if available
|
|
||||||
- **Custom Queries:** Optimized SQL for complex aggregations
|
|
||||||
- **Caching:** Transients for expensive queries (5-15 min TTL)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Frontend (React)
|
|
||||||
|
|
||||||
#### Components:
|
|
||||||
```
|
|
||||||
admin-spa/src/routes/Dashboard/
|
|
||||||
├── index.tsx # Main overview
|
|
||||||
├── Revenue.tsx # Revenue report
|
|
||||||
├── Orders.tsx # Orders analytics
|
|
||||||
├── Products.tsx # Product performance
|
|
||||||
├── Customers.tsx # Customer analytics
|
|
||||||
├── Coupons.tsx # Coupon reports
|
|
||||||
├── Taxes.tsx # Tax reports
|
|
||||||
└── components/
|
|
||||||
├── StatCard.tsx # Metric card with trend
|
|
||||||
├── ChartCard.tsx # Chart container
|
|
||||||
├── DataTable.tsx # Sortable table
|
|
||||||
├── DateRangePicker.tsx # Date selector
|
|
||||||
├── ComparisonToggle.tsx # Compare mode
|
|
||||||
└── ExportButton.tsx # CSV/PDF export
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Charts (Recharts):
|
|
||||||
- **LineChart** - Revenue/Orders trends
|
|
||||||
- **AreaChart** - Sales overview
|
|
||||||
- **BarChart** - Comparisons, categories
|
|
||||||
- **PieChart** - Status breakdown, segments
|
|
||||||
- **ComposedChart** - Multi-metric views
|
|
||||||
|
|
||||||
#### State Management:
|
|
||||||
- **React Query** for data fetching & caching
|
|
||||||
- **URL State** for filters (date range, sorting)
|
|
||||||
- **Local Storage** for user preferences (chart type, default period)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🎨 UI/UX Principles
|
|
||||||
|
|
||||||
### Design:
|
|
||||||
- **Consistent with Orders module** - Same card style, spacing, typography
|
|
||||||
- **Mobile-first** - Responsive charts and tables
|
|
||||||
- **Loading States** - Skeleton loaders for charts and tables
|
|
||||||
- **Empty States** - Helpful messages when no data
|
|
||||||
- **Error Handling** - ErrorCard component for failures
|
|
||||||
|
|
||||||
### Performance:
|
|
||||||
- **Lazy Loading** - Code-split dashboard routes
|
|
||||||
- **Optimistic Updates** - Instant feedback
|
|
||||||
- **Debounced Filters** - Reduce API calls
|
|
||||||
- **Cached Data** - React Query stale-while-revalidate
|
|
||||||
|
|
||||||
### Accessibility:
|
|
||||||
- **Keyboard Navigation** - Full keyboard support
|
|
||||||
- **ARIA Labels** - Screen reader friendly
|
|
||||||
- **Color Contrast** - WCAG AA compliant
|
|
||||||
- **Focus Indicators** - Clear focus states
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📅 Implementation Phases
|
|
||||||
|
|
||||||
### **Phase 1: Foundation** (Week 1) ✅ COMPLETE
|
|
||||||
- [x] Create backend analytics endpoints (Dummy data ready)
|
|
||||||
- [x] Implement data aggregation queries (Dummy data structures)
|
|
||||||
- [x] Set up caching strategy (Zustand + LocalStorage)
|
|
||||||
- [x] Create base dashboard layout
|
|
||||||
- [x] Implement StatCard component
|
|
||||||
|
|
||||||
### **Phase 2: Main Dashboard** (Week 2) ✅ COMPLETE
|
|
||||||
- [x] Revenue/Orders/AOV/Conversion cards
|
|
||||||
- [x] Sales overview chart
|
|
||||||
- [x] Quick stats grid (Top Products, Recent Orders, etc.)
|
|
||||||
- [x] Date range selector
|
|
||||||
- [x] Dummy data toggle system
|
|
||||||
- [ ] Real-time data updates (Pending API)
|
|
||||||
|
|
||||||
### **Phase 3: Revenue & Orders Reports** (Week 3) ✅ COMPLETE
|
|
||||||
- [x] Revenue detailed page
|
|
||||||
- [x] Orders analytics page
|
|
||||||
- [x] Breakdown tables (Product, Category, Payment, Shipping)
|
|
||||||
- [x] Status distribution charts
|
|
||||||
- [x] Period selectors
|
|
||||||
- [ ] Comparison mode (Pending)
|
|
||||||
- [ ] Export functionality (Pending)
|
|
||||||
- [ ] Advanced filters (Pending)
|
|
||||||
|
|
||||||
### **Phase 4: Products & Customers** (Week 4) ✅ COMPLETE
|
|
||||||
- [x] Products performance page
|
|
||||||
- [x] Customer analytics page
|
|
||||||
- [x] Segmentation logic (New, Returning, VIP, At Risk)
|
|
||||||
- [x] Stock analysis (Low, Out, Slow Movers)
|
|
||||||
- [x] LTV calculations and distribution
|
|
||||||
|
|
||||||
### **Phase 5: Coupons & Taxes** (Week 5) ✅ COMPLETE
|
|
||||||
- [x] Coupons report page
|
|
||||||
- [x] Tax reports page
|
|
||||||
- [x] ROI calculations
|
|
||||||
- [x] Location-based breakdowns
|
|
||||||
|
|
||||||
### **Phase 6: Polish & Optimization** (Week 6) ⏳ IN PROGRESS
|
|
||||||
- [x] Mobile responsiveness (All pages responsive)
|
|
||||||
- [x] Loading states refinement (Skeleton loaders)
|
|
||||||
- [x] Documentation (PROGRESS_NOTE.md updated)
|
|
||||||
- [ ] Performance optimization (Pending)
|
|
||||||
- [ ] Error handling improvements (Pending)
|
|
||||||
- [ ] User testing (Pending)
|
|
||||||
|
|
||||||
### **Phase 7: Real Data Integration** (NEW) ⏳ PENDING
|
|
||||||
- [ ] Create backend REST API endpoints
|
|
||||||
- [ ] Wire all pages to real data
|
|
||||||
- [ ] Keep dummy data toggle for demos
|
|
||||||
- [ ] Add data refresh functionality
|
|
||||||
- [ ] Add export functionality (CSV/PDF)
|
|
||||||
- [ ] Add comparison mode
|
|
||||||
- [ ] Add custom date range picker
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🔍 Data Models
|
|
||||||
|
|
||||||
### Overview Response:
|
|
||||||
```typescript
|
|
||||||
{
|
|
||||||
revenue: {
|
|
||||||
today: number,
|
|
||||||
yesterday: number,
|
|
||||||
change_percent: number,
|
|
||||||
sparkline: number[]
|
|
||||||
},
|
|
||||||
orders: {
|
|
||||||
today: number,
|
|
||||||
yesterday: number,
|
|
||||||
change_percent: number,
|
|
||||||
by_status: {
|
|
||||||
completed: number,
|
|
||||||
processing: number,
|
|
||||||
pending: number,
|
|
||||||
// ...
|
|
||||||
}
|
|
||||||
},
|
|
||||||
aov: {
|
|
||||||
current: number,
|
|
||||||
previous: number,
|
|
||||||
change_percent: number
|
|
||||||
},
|
|
||||||
conversion_rate: {
|
|
||||||
current: number,
|
|
||||||
previous: number,
|
|
||||||
change_percent: number
|
|
||||||
},
|
|
||||||
chart_data: Array<{
|
|
||||||
date: string,
|
|
||||||
revenue: number,
|
|
||||||
orders: number
|
|
||||||
}>,
|
|
||||||
top_products: Array<{
|
|
||||||
id: number,
|
|
||||||
name: string,
|
|
||||||
quantity: number,
|
|
||||||
revenue: number
|
|
||||||
}>,
|
|
||||||
recent_orders: Array<{
|
|
||||||
id: number,
|
|
||||||
number: string,
|
|
||||||
customer: string,
|
|
||||||
status: string,
|
|
||||||
total: number,
|
|
||||||
date: string
|
|
||||||
}>,
|
|
||||||
low_stock: Array<{
|
|
||||||
id: number,
|
|
||||||
name: string,
|
|
||||||
stock: number,
|
|
||||||
status: string
|
|
||||||
}>,
|
|
||||||
top_customers: Array<{
|
|
||||||
id: number,
|
|
||||||
name: string,
|
|
||||||
orders: number,
|
|
||||||
total_spent: number
|
|
||||||
}>
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📚 References
|
|
||||||
|
|
||||||
### WooCommerce Analytics:
|
|
||||||
- WooCommerce Admin Analytics (wc-admin)
|
|
||||||
- WooCommerce Reports API
|
|
||||||
- Analytics Database Tables
|
|
||||||
|
|
||||||
### Design Inspiration:
|
|
||||||
- Shopify Analytics
|
|
||||||
- WooCommerce native reports
|
|
||||||
- Google Analytics dashboard
|
|
||||||
- Stripe Dashboard
|
|
||||||
|
|
||||||
### Libraries:
|
|
||||||
- **Recharts** - Charts and graphs
|
|
||||||
- **React Query** - Data fetching
|
|
||||||
- **date-fns** - Date manipulation
|
|
||||||
- **Shadcn UI** - UI components
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🚀 Future Enhancements
|
|
||||||
|
|
||||||
### Advanced Features:
|
|
||||||
- **Real-time Updates** - WebSocket for live data
|
|
||||||
- **Forecasting** - Predictive analytics
|
|
||||||
- **Custom Reports** - User-defined metrics
|
|
||||||
- **Scheduled Reports** - Email reports
|
|
||||||
- **Multi-store** - Compare multiple stores
|
|
||||||
- **API Access** - Export data via API
|
|
||||||
- **Webhooks** - Trigger on thresholds
|
|
||||||
- **Alerts** - Low stock, high refunds, etc.
|
|
||||||
|
|
||||||
### Integrations:
|
|
||||||
- **Google Analytics** - Traffic data
|
|
||||||
- **Facebook Pixel** - Ad performance
|
|
||||||
- **Email Marketing** - Campaign ROI
|
|
||||||
- **Inventory Management** - Stock sync
|
|
||||||
- **Accounting** - QuickBooks, Xero
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## ✅ Success Metrics
|
|
||||||
|
|
||||||
### Performance:
|
|
||||||
- Page load < 2s
|
|
||||||
- Chart render < 500ms
|
|
||||||
- API response < 1s
|
|
||||||
- 90+ Lighthouse score
|
|
||||||
|
|
||||||
### Usability:
|
|
||||||
- Mobile-friendly (100%)
|
|
||||||
- Keyboard accessible
|
|
||||||
- Screen reader compatible
|
|
||||||
- Intuitive navigation
|
|
||||||
|
|
||||||
### Accuracy:
|
|
||||||
- Data matches WooCommerce reports
|
|
||||||
- Real-time sync (< 5 min lag)
|
|
||||||
- Correct calculations
|
|
||||||
- No data loss
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**End of Dashboard Plan**
|
|
||||||
@@ -1,158 +0,0 @@
|
|||||||
# Dashboard Tweaks TODO
|
|
||||||
|
|
||||||
## Completed ✅
|
|
||||||
|
|
||||||
### 1. Fix On-hold and Trash Color Conflict
|
|
||||||
**Status:** ✅ DONE
|
|
||||||
|
|
||||||
**Issue:** Both on-hold and trash used same gray color (#6b7280)
|
|
||||||
|
|
||||||
**Solution:**
|
|
||||||
- On-hold: `#64748b` (Slate 500)
|
|
||||||
- Trash: `#475569` (Slate 600 - darker)
|
|
||||||
|
|
||||||
**Files Updated:**
|
|
||||||
- `includes/Api/AnalyticsController.php` (2 locations)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Pending Tasks
|
|
||||||
|
|
||||||
### 2. Add "No Data" State to Charts ⏳
|
|
||||||
|
|
||||||
**Affected Charts:**
|
|
||||||
- Revenue chart (Dashboard → Revenue submenu)
|
|
||||||
- Orders chart (Dashboard → Orders submenu)
|
|
||||||
- Coupon chart (Dashboard → Coupons submenu)
|
|
||||||
|
|
||||||
**Current Behavior:**
|
|
||||||
- Overview page shows "No data" message ✓
|
|
||||||
- Submenu charts show empty/broken charts ✗
|
|
||||||
|
|
||||||
**Required Implementation:**
|
|
||||||
```tsx
|
|
||||||
{chartData.length === 0 ? (
|
|
||||||
<div className="flex items-center justify-center h-64">
|
|
||||||
<div className="text-center">
|
|
||||||
<Package className="w-12 h-12 text-muted-foreground mx-auto mb-2" />
|
|
||||||
<p className="text-muted-foreground">No data available</p>
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
Data will appear once you have {type}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<ResponsiveContainer>
|
|
||||||
{/* Chart */}
|
|
||||||
</ResponsiveContainer>
|
|
||||||
)}
|
|
||||||
```
|
|
||||||
|
|
||||||
**Files to Update:**
|
|
||||||
- `admin-spa/src/routes/Dashboard/Revenue.tsx`
|
|
||||||
- `admin-spa/src/routes/Dashboard/Orders.tsx`
|
|
||||||
- `admin-spa/src/routes/Dashboard/Coupons.tsx`
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 3. VIP Customer Settings ⏳
|
|
||||||
|
|
||||||
**Requirement:** Add settings to configure VIP customer qualification
|
|
||||||
|
|
||||||
**Proposed Location:** `/settings/customers` (new page)
|
|
||||||
|
|
||||||
**Settings:**
|
|
||||||
```tsx
|
|
||||||
interface VIPSettings {
|
|
||||||
// Qualification Criteria
|
|
||||||
minTotalSpent: number; // e.g., $1000
|
|
||||||
minOrderCount: number; // e.g., 10 orders
|
|
||||||
timeframe: 'all' | '30' | '90' | '365'; // Days or all-time
|
|
||||||
|
|
||||||
// Optional Criteria
|
|
||||||
requireBoth: boolean; // Both spent AND count, or either?
|
|
||||||
excludeRefunded: boolean; // Exclude refunded orders?
|
|
||||||
|
|
||||||
// Benefits (for display/reference)
|
|
||||||
vipBenefits: string[]; // e.g., ["Free shipping", "10% discount"]
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**UI Design:**
|
|
||||||
```
|
|
||||||
Customer Settings
|
|
||||||
├── VIP Qualification
|
|
||||||
│ ├── Minimum Total Spent: $___
|
|
||||||
│ ├── Minimum Order Count: ___
|
|
||||||
│ ├── Timeframe: [All time | Last 30 days | Last 90 days | Last year]
|
|
||||||
│ ├── ☐ Require both criteria (vs either one)
|
|
||||||
│ └── ☐ Exclude refunded orders
|
|
||||||
│
|
|
||||||
└── VIP Benefits (optional reference)
|
|
||||||
└── [Add benefit] button
|
|
||||||
```
|
|
||||||
|
|
||||||
**Implementation Steps:**
|
|
||||||
1. Create `admin-spa/src/routes/Settings/Customers.tsx`
|
|
||||||
2. Add backend endpoint: `POST /settings/customers`
|
|
||||||
3. Create `includes/Compat/CustomerSettingsProvider.php`
|
|
||||||
4. Add to navigation tree
|
|
||||||
5. Implement VIP badge logic in customer list
|
|
||||||
|
|
||||||
**Backend Storage:**
|
|
||||||
```php
|
|
||||||
// WordPress options
|
|
||||||
woonoow_vip_min_spent = 1000
|
|
||||||
woonoow_vip_min_orders = 10
|
|
||||||
woonoow_vip_timeframe = 'all'
|
|
||||||
woonoow_vip_require_both = true
|
|
||||||
woonoow_vip_exclude_refunded = true
|
|
||||||
```
|
|
||||||
|
|
||||||
**VIP Detection Query:**
|
|
||||||
```php
|
|
||||||
function is_vip_customer($customer_id) {
|
|
||||||
$settings = get_vip_settings();
|
|
||||||
|
|
||||||
$query_args = [
|
|
||||||
'customer_id' => $customer_id,
|
|
||||||
'status' => ['completed', 'processing'],
|
|
||||||
];
|
|
||||||
|
|
||||||
if ($settings['timeframe'] !== 'all') {
|
|
||||||
$query_args['date_created'] = '>' . date('Y-m-d', strtotime("-{$settings['timeframe']} days"));
|
|
||||||
}
|
|
||||||
|
|
||||||
if ($settings['exclude_refunded']) {
|
|
||||||
$query_args['status'] = array_diff($query_args['status'], ['refunded']);
|
|
||||||
}
|
|
||||||
|
|
||||||
$orders = wc_get_orders($query_args);
|
|
||||||
|
|
||||||
$total_spent = array_sum(array_map(fn($o) => $o->get_total(), $orders));
|
|
||||||
$order_count = count($orders);
|
|
||||||
|
|
||||||
if ($settings['require_both']) {
|
|
||||||
return $total_spent >= $settings['min_spent']
|
|
||||||
&& $order_count >= $settings['min_orders'];
|
|
||||||
} else {
|
|
||||||
return $total_spent >= $settings['min_spent']
|
|
||||||
|| $order_count >= $settings['min_orders'];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Summary
|
|
||||||
|
|
||||||
**Completed:**
|
|
||||||
- ✅ On-hold/Trash color conflict fixed
|
|
||||||
|
|
||||||
**Pending:**
|
|
||||||
- ⏳ No data state for Revenue/Orders/Coupons charts
|
|
||||||
- ⏳ VIP customer settings page
|
|
||||||
|
|
||||||
**Priority:**
|
|
||||||
1. No data states (quick fix)
|
|
||||||
2. VIP settings (new feature)
|
|
||||||
125
DOCS_AUDIT_REPORT.md
Normal file
125
DOCS_AUDIT_REPORT.md
Normal file
@@ -0,0 +1,125 @@
|
|||||||
|
# Documentation Audit Report
|
||||||
|
|
||||||
|
**Date:** November 11, 2025
|
||||||
|
**Total Documents:** 36 MD files
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ KEEP - Active & Essential (15 docs)
|
||||||
|
|
||||||
|
### Core Architecture & Strategy
|
||||||
|
1. **NOTIFICATION_STRATEGY.md** ⭐ - Active implementation plan
|
||||||
|
2. **ADDON_DEVELOPMENT_GUIDE.md** - Essential for addon developers
|
||||||
|
3. **ADDON_BRIDGE_PATTERN.md** - Core addon architecture
|
||||||
|
4. **ADDON_REACT_INTEGRATION.md** - React addon integration guide
|
||||||
|
5. **HOOKS_REGISTRY.md** - Hook documentation for developers
|
||||||
|
6. **PROJECT_BRIEF.md** - Project overview and goals
|
||||||
|
7. **README.md** - Main documentation
|
||||||
|
|
||||||
|
### Implementation Guides
|
||||||
|
8. **I18N_IMPLEMENTATION_GUIDE.md** - Translation system guide
|
||||||
|
9. **PAYMENT_GATEWAY_PATTERNS.md** - Payment gateway architecture
|
||||||
|
10. **PAYMENT_GATEWAY_FAQ.md** - Payment gateway Q&A
|
||||||
|
|
||||||
|
### Active Development
|
||||||
|
11. **BITESHIP_ADDON_SPEC.md** - Shipping addon spec
|
||||||
|
12. **RAJAONGKIR_INTEGRATION.md** - Shipping integration
|
||||||
|
13. **SHIPPING_METHOD_TYPES.md** - Shipping types reference
|
||||||
|
14. **TAX_SETTINGS_DESIGN.md** - Tax UI/UX design
|
||||||
|
15. **SETUP_WIZARD_DESIGN.md** - Onboarding wizard design
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🗑️ DELETE - Obsolete/Completed (12 docs)
|
||||||
|
|
||||||
|
### Completed Features
|
||||||
|
1. **CUSTOMER_SETTINGS_404_FIX.md** - Bug fixed, no longer needed
|
||||||
|
2. **MENU_FIX_SUMMARY.md** - Menu issues resolved
|
||||||
|
3. **DASHBOARD_TWEAKS_TODO.md** - Dashboard completed
|
||||||
|
4. **DASHBOARD_PLAN.md** - Dashboard implemented
|
||||||
|
5. **SPA_ADMIN_MENU_PLAN.md** - Menu implemented
|
||||||
|
6. **STANDALONE_ADMIN_SETUP.md** - Standalone mode complete
|
||||||
|
7. **STANDALONE_MODE_SUMMARY.md** - Duplicate/summary doc
|
||||||
|
|
||||||
|
### Superseded Plans
|
||||||
|
8. **SETTINGS_PAGES_PLAN.md** - Superseded by V2
|
||||||
|
9. **SETTINGS_PAGES_PLAN_V2.md** - Settings implemented
|
||||||
|
10. **SETTINGS_TREE_PLAN.md** - Navigation tree implemented
|
||||||
|
11. **SETTINGS_PLACEMENT_STRATEGY.md** - Strategy finalized
|
||||||
|
12. **TAX_NOTIFICATIONS_PLAN.md** - Merged into notification strategy
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📝 CONSOLIDATE - Merge & Archive (9 docs)
|
||||||
|
|
||||||
|
### Development Process (Merge into PROJECT_SOP.md)
|
||||||
|
1. **PROGRESS_NOTE.md** - Ongoing notes
|
||||||
|
2. **TESTING_CHECKLIST.md** - Testing procedures
|
||||||
|
3. **WP_CLI_GUIDE.md** - CLI commands reference
|
||||||
|
|
||||||
|
### Architecture Decisions (Create ARCHITECTURE.md)
|
||||||
|
4. **ARCHITECTURE_DECISION_CUSTOMER_SPA.md** - Customer SPA decision
|
||||||
|
5. **ORDER_CALCULATION_PLAN.md** - Order calculation architecture
|
||||||
|
6. **CALCULATION_EFFICIENCY_AUDIT.md** - Performance audit
|
||||||
|
|
||||||
|
### Shipping (Create SHIPPING_GUIDE.md)
|
||||||
|
7. **SHIPPING_ADDON_RESEARCH.md** - Research notes
|
||||||
|
8. **SHIPPING_FIELD_HOOKS.md** - Field customization hooks
|
||||||
|
|
||||||
|
### Standalone (Archive - feature complete)
|
||||||
|
9. **STANDALONE_MODE_SUMMARY.md** - Can be archived
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 Summary
|
||||||
|
|
||||||
|
| Status | Count | Action |
|
||||||
|
|--------|-------|--------|
|
||||||
|
| ✅ Keep | 15 | No action needed |
|
||||||
|
| 🗑️ Delete | 12 | Remove immediately |
|
||||||
|
| 📝 Consolidate | 9 | Merge into organized docs |
|
||||||
|
| **Total** | **36** | |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Recommended Actions
|
||||||
|
|
||||||
|
### Immediate (Delete obsolete)
|
||||||
|
```bash
|
||||||
|
rm CUSTOMER_SETTINGS_404_FIX.md
|
||||||
|
rm MENU_FIX_SUMMARY.md
|
||||||
|
rm DASHBOARD_TWEAKS_TODO.md
|
||||||
|
rm DASHBOARD_PLAN.md
|
||||||
|
rm SPA_ADMIN_MENU_PLAN.md
|
||||||
|
rm STANDALONE_ADMIN_SETUP.md
|
||||||
|
rm STANDALONE_MODE_SUMMARY.md
|
||||||
|
rm SETTINGS_PAGES_PLAN.md
|
||||||
|
rm SETTINGS_PAGES_PLAN_V2.md
|
||||||
|
rm SETTINGS_TREE_PLAN.md
|
||||||
|
rm SETTINGS_PLACEMENT_STRATEGY.md
|
||||||
|
rm TAX_NOTIFICATIONS_PLAN.md
|
||||||
|
```
|
||||||
|
|
||||||
|
### Phase 2 (Consolidate)
|
||||||
|
1. Create `ARCHITECTURE.md` - Consolidate architecture decisions
|
||||||
|
2. Create `SHIPPING_GUIDE.md` - Consolidate shipping docs
|
||||||
|
3. Update `PROJECT_SOP.md` - Add testing & CLI guides
|
||||||
|
4. Archive `PROGRESS_NOTE.md` to `archive/` folder
|
||||||
|
|
||||||
|
### Phase 3 (Organize)
|
||||||
|
Create folder structure:
|
||||||
|
```
|
||||||
|
docs/
|
||||||
|
├── core/ # Core architecture & patterns
|
||||||
|
├── addons/ # Addon development guides
|
||||||
|
├── features/ # Feature-specific docs
|
||||||
|
└── archive/ # Historical/completed docs
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Post-Cleanup Result
|
||||||
|
|
||||||
|
**Final count:** ~20 active documents
|
||||||
|
**Reduction:** 44% fewer docs
|
||||||
|
**Benefit:** Easier navigation, less confusion, clearer focus
|
||||||
@@ -1,313 +0,0 @@
|
|||||||
# Settings Submenu Fix - Complete Summary
|
|
||||||
|
|
||||||
## 🐛 Problem Identified
|
|
||||||
|
|
||||||
**Issue:** Settings submenu only appeared in standalone mode, not in wp-admin or fullscreen mode.
|
|
||||||
|
|
||||||
**Root Cause:** The navigation tree has **TWO sources**:
|
|
||||||
1. **Backend (PHP):** `NavigationRegistry::get_base_tree()` - Used in wp-admin and all modes
|
|
||||||
2. **Frontend (TypeScript):** `tree.ts` fallback - Only used if backend fails
|
|
||||||
|
|
||||||
The backend was providing **empty children** for settings:
|
|
||||||
```php
|
|
||||||
// NavigationRegistry.php line 159
|
|
||||||
'children' => [], // Settings children will be added by SettingsProvider
|
|
||||||
```
|
|
||||||
|
|
||||||
But `SettingsProvider` never actually populated the navigation tree!
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## ✅ Solution Implemented
|
|
||||||
|
|
||||||
### 1. Fixed Backend Navigation Registry
|
|
||||||
|
|
||||||
**File:** `includes/Compat/NavigationRegistry.php`
|
|
||||||
|
|
||||||
**Changes:**
|
|
||||||
- Added `get_settings_children()` method
|
|
||||||
- Populated settings submenu in `get_base_tree()`
|
|
||||||
- Made backend the single source of truth
|
|
||||||
|
|
||||||
**Code:**
|
|
||||||
```php
|
|
||||||
[
|
|
||||||
'key' => 'settings',
|
|
||||||
'label' => __('Settings', 'woonoow'),
|
|
||||||
'path' => '/settings',
|
|
||||||
'icon' => 'settings',
|
|
||||||
'children' => self::get_settings_children(), // ✅ Now populated!
|
|
||||||
],
|
|
||||||
```
|
|
||||||
|
|
||||||
**Settings Children:**
|
|
||||||
```php
|
|
||||||
private static function get_settings_children(): array {
|
|
||||||
$admin = admin_url('admin.php');
|
|
||||||
|
|
||||||
return [
|
|
||||||
// WooNooW Settings
|
|
||||||
['label' => __('WooNooW', 'woonoow'), 'mode' => 'spa', 'path' => '/settings'],
|
|
||||||
|
|
||||||
// WooCommerce Settings (Most Used First)
|
|
||||||
['label' => __('General', 'woonoow'), 'mode' => 'spa', 'path' => '/settings/general'],
|
|
||||||
['label' => __('Payments', 'woonoow'), 'mode' => 'spa', 'path' => '/settings/payments'],
|
|
||||||
['label' => __('Shipping', 'woonoow'), 'mode' => 'spa', 'path' => '/settings/shipping'],
|
|
||||||
['label' => __('Products', 'woonoow'), 'mode' => 'spa', 'path' => '/settings/products'],
|
|
||||||
['label' => __('Tax', 'woonoow'), 'mode' => 'spa', 'path' => '/settings/tax'],
|
|
||||||
['label' => __('Accounts & Privacy', 'woonoow'), 'mode' => 'spa', 'path' => '/settings/accounts'],
|
|
||||||
['label' => __('Emails', 'woonoow'), 'mode' => 'spa', 'path' => '/settings/emails'],
|
|
||||||
|
|
||||||
// Less Common (Bridge to WP Admin for now)
|
|
||||||
['label' => __('Advanced', 'woonoow'), 'mode' => 'bridge', 'href' => $admin . '?page=wc-settings&tab=advanced'],
|
|
||||||
['label' => __('Integration', 'woonoow'), 'mode' => 'bridge', 'href' => $admin . '?page=wc-settings&tab=integration'],
|
|
||||||
['label' => __('Status', 'woonoow'), 'mode' => 'bridge', 'href' => $admin . '?page=wc-status'],
|
|
||||||
['label' => __('Extensions', 'woonoow'), 'mode' => 'bridge', 'href' => $admin . '?page=wc-addons'],
|
|
||||||
];
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 2. Frontend Already Correct
|
|
||||||
|
|
||||||
**File:** `admin-spa/src/nav/tree.ts`
|
|
||||||
|
|
||||||
The frontend fallback tree was already correct (we fixed it earlier), but it wasn't being used because the backend tree takes precedence.
|
|
||||||
|
|
||||||
**Data Flow:**
|
|
||||||
```typescript
|
|
||||||
function getNavTreeFromBackend(): MainNode[] {
|
|
||||||
const backendTree = (window as any).WNW_NAV_TREE;
|
|
||||||
|
|
||||||
if (Array.isArray(backendTree) && backendTree.length > 0) {
|
|
||||||
return backendTree; // ✅ Backend tree used (from PHP)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fallback to static tree (for development/safety)
|
|
||||||
return getStaticFallbackTree();
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🎯 Single Source of Truth Established
|
|
||||||
|
|
||||||
### Backend (PHP) - PRIMARY SOURCE ✅
|
|
||||||
**File:** `includes/Compat/NavigationRegistry.php`
|
|
||||||
- Builds navigation tree on `init` hook
|
|
||||||
- Stores in `wnw_nav_tree` option
|
|
||||||
- Localizes to `window.WNW_NAV_TREE`
|
|
||||||
- Used by all modes (wp-admin, fullscreen, standalone)
|
|
||||||
|
|
||||||
### Frontend (TypeScript) - FALLBACK ONLY
|
|
||||||
**File:** `admin-spa/src/nav/tree.ts`
|
|
||||||
- Reads from `window.WNW_NAV_TREE` (backend)
|
|
||||||
- Falls back to static tree if backend unavailable
|
|
||||||
- Static tree matches backend structure
|
|
||||||
|
|
||||||
### Flow Diagram
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────────┐
|
|
||||||
│ NavigationRegistry::build_nav_tree() │
|
|
||||||
│ (PHP - runs on init hook) │
|
|
||||||
└──────────────┬──────────────────────────┘
|
|
||||||
│
|
|
||||||
▼
|
|
||||||
┌─────────────────────────────────────────┐
|
|
||||||
│ Store in option: wnw_nav_tree │
|
|
||||||
└──────────────┬──────────────────────────┘
|
|
||||||
│
|
|
||||||
▼
|
|
||||||
┌─────────────────────────────────────────┐
|
|
||||||
│ Localize to: window.WNW_NAV_TREE │
|
|
||||||
│ (via Assets.php) │
|
|
||||||
└──────────────┬──────────────────────────┘
|
|
||||||
│
|
|
||||||
▼
|
|
||||||
┌─────────────────────────────────────────┐
|
|
||||||
│ Frontend reads: window.WNW_NAV_TREE │
|
|
||||||
│ (tree.ts) │
|
|
||||||
└──────────────┬──────────────────────────┘
|
|
||||||
│
|
|
||||||
▼
|
|
||||||
┌─────────────────────────────────────────┐
|
|
||||||
│ useActiveSection() hook │
|
|
||||||
│ Returns: { main, children } │
|
|
||||||
└──────────────┬──────────────────────────┘
|
|
||||||
│
|
|
||||||
▼
|
|
||||||
┌─────────────────────────────────────────┐
|
|
||||||
│ SubmenuBar component │
|
|
||||||
│ Renders: main.children │
|
|
||||||
└─────────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🧪 How to Test
|
|
||||||
|
|
||||||
### 1. Clear Navigation Cache
|
|
||||||
The navigation tree is cached in WordPress options. To rebuild:
|
|
||||||
- Deactivate and reactivate WooNooW plugin, OR
|
|
||||||
- Visit any admin page (tree rebuilds on `init` hook)
|
|
||||||
|
|
||||||
### 2. Test in wp-admin Mode
|
|
||||||
1. Go to `/wp-admin/admin.php?page=woonoow`
|
|
||||||
2. Click "Settings" in sidebar
|
|
||||||
3. **Should see submenu:** WooNooW, General, Payments, Shipping, Products, Tax, Accounts & Privacy, Emails, Advanced, Integration, Status, Extensions
|
|
||||||
|
|
||||||
### 3. Test in Fullscreen Mode
|
|
||||||
1. Click fullscreen toggle
|
|
||||||
2. Click "Settings" in sidebar
|
|
||||||
3. **Should see same submenu**
|
|
||||||
|
|
||||||
### 4. Test in Standalone Mode
|
|
||||||
1. Go to `/admin`
|
|
||||||
2. Click "Settings" in sidebar
|
|
||||||
3. **Should see same submenu**
|
|
||||||
|
|
||||||
### 5. Verify Backend Data
|
|
||||||
Open browser console and check:
|
|
||||||
```javascript
|
|
||||||
console.log(window.WNW_NAV_TREE);
|
|
||||||
// Should show array with settings.children populated
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📊 Before vs After
|
|
||||||
|
|
||||||
### Before ❌
|
|
||||||
```
|
|
||||||
wp-admin mode:
|
|
||||||
Settings
|
|
||||||
└── (no submenu)
|
|
||||||
|
|
||||||
fullscreen mode:
|
|
||||||
Settings
|
|
||||||
└── (no submenu)
|
|
||||||
|
|
||||||
standalone mode:
|
|
||||||
Settings
|
|
||||||
├── WooNooW
|
|
||||||
├── General
|
|
||||||
├── Payments
|
|
||||||
└── ... (all items)
|
|
||||||
```
|
|
||||||
|
|
||||||
### After ✅
|
|
||||||
```
|
|
||||||
ALL MODES:
|
|
||||||
Settings
|
|
||||||
├── WooNooW
|
|
||||||
├── General
|
|
||||||
├── Payments
|
|
||||||
├── Shipping
|
|
||||||
├── Products
|
|
||||||
├── Tax
|
|
||||||
├── Accounts & Privacy
|
|
||||||
├── Emails
|
|
||||||
├── Advanced (bridge)
|
|
||||||
├── Integration (bridge)
|
|
||||||
├── Status (bridge)
|
|
||||||
└── Extensions (bridge)
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🔧 Files Modified
|
|
||||||
|
|
||||||
### Backend
|
|
||||||
- ✅ `includes/Compat/NavigationRegistry.php`
|
|
||||||
- Added `get_settings_children()` method
|
|
||||||
- Updated `get_base_tree()` to use it
|
|
||||||
|
|
||||||
### Frontend
|
|
||||||
- ✅ `admin-spa/src/nav/tree.ts` (already correct from previous fix)
|
|
||||||
- ✅ `admin-spa/src/types/window.d.ts` (TypeScript types)
|
|
||||||
|
|
||||||
### Documentation
|
|
||||||
- ✅ `SETTINGS_TREE_PLAN.md` (new - comprehensive implementation plan)
|
|
||||||
- ✅ `MENU_FIX_SUMMARY.md` (this document)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🎯 Key Learnings
|
|
||||||
|
|
||||||
### 1. Dynamic Navigation System
|
|
||||||
WooNooW uses a **dynamic navigation system** where:
|
|
||||||
- Backend (PHP) builds the tree
|
|
||||||
- Frontend (TypeScript) consumes it
|
|
||||||
- Addons can extend via filters
|
|
||||||
|
|
||||||
### 2. Cache Awareness
|
|
||||||
Navigation tree is cached in `wnw_nav_tree` option:
|
|
||||||
- Rebuilt on `init` hook
|
|
||||||
- Flushed on plugin activate/deactivate
|
|
||||||
- Can be manually flushed: `delete_option('wnw_nav_tree')`
|
|
||||||
|
|
||||||
### 3. Extensibility
|
|
||||||
Addons can modify navigation via filters:
|
|
||||||
```php
|
|
||||||
// Add new main section
|
|
||||||
add_filter('woonoow/nav_tree', function($tree) {
|
|
||||||
$tree[] = [
|
|
||||||
'key' => 'subscriptions',
|
|
||||||
'label' => 'Subscriptions',
|
|
||||||
'path' => '/subscriptions',
|
|
||||||
'icon' => 'repeat',
|
|
||||||
'children' => [...]
|
|
||||||
];
|
|
||||||
return $tree;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Add to existing section
|
|
||||||
add_filter('woonoow/nav_tree/settings/children', function($children) {
|
|
||||||
$children[] = [
|
|
||||||
'label' => 'My Custom Setting',
|
|
||||||
'mode' => 'spa',
|
|
||||||
'path' => '/settings/custom'
|
|
||||||
];
|
|
||||||
return $children;
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## ✅ Verification Checklist
|
|
||||||
|
|
||||||
- [x] Backend provides settings children
|
|
||||||
- [x] Frontend reads from backend
|
|
||||||
- [x] Fallback tree matches backend
|
|
||||||
- [x] TypeScript types updated
|
|
||||||
- [x] No console errors
|
|
||||||
- [x] Settings submenu shows in all modes
|
|
||||||
- [x] Bridge links work
|
|
||||||
- [x] Documentation updated
|
|
||||||
- [x] Code committed
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🚀 Next Steps
|
|
||||||
|
|
||||||
1. **Test the fix:**
|
|
||||||
- Reload wp-admin page
|
|
||||||
- Check settings submenu appears
|
|
||||||
- Test in all three modes
|
|
||||||
|
|
||||||
2. **Implement settings pages:**
|
|
||||||
- Start with Phase 1 (General, Payments, Shipping)
|
|
||||||
- Follow `SETTINGS_TREE_PLAN.md`
|
|
||||||
|
|
||||||
3. **Monitor for issues:**
|
|
||||||
- Check browser console
|
|
||||||
- Test with different user roles
|
|
||||||
- Verify 3rd party plugin compatibility
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Fix Date:** November 5, 2025
|
|
||||||
**Status:** ✅ Complete
|
|
||||||
**Tested:** Pending user verification
|
|
||||||
**Next:** Implement General Settings page
|
|
||||||
@@ -1,578 +0,0 @@
|
|||||||
# Settings Pages Implementation Plan
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
Build 4 missing settings pages to complete WooNooW Settings:
|
|
||||||
1. **WooNooW** - Main settings/preferences
|
|
||||||
2. **Checkout** - Checkout page configuration
|
|
||||||
3. **Customer Accounts** - Account creation and management
|
|
||||||
4. **Brand & Appearance** - Store branding and customization
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 1. WooNooW Settings Page
|
|
||||||
|
|
||||||
**File:** `admin-spa/src/routes/Settings/index.tsx`
|
|
||||||
|
|
||||||
**Purpose:** Main WooNooW plugin settings and preferences
|
|
||||||
|
|
||||||
### Sections:
|
|
||||||
|
|
||||||
#### A. General Settings
|
|
||||||
```tsx
|
|
||||||
- Plugin Version: 1.0.0 (read-only)
|
|
||||||
- Enable SPA Mode: [Toggle] (default: ON)
|
|
||||||
- Admin Theme: [Select: Light | Dark | Auto]
|
|
||||||
- Items per page: [Number: 20]
|
|
||||||
```
|
|
||||||
|
|
||||||
#### B. Performance
|
|
||||||
```tsx
|
|
||||||
- Enable caching: [Toggle] (default: ON)
|
|
||||||
- Cache duration: [Number: 3600] seconds
|
|
||||||
- Preload data: [Toggle] (default: ON)
|
|
||||||
```
|
|
||||||
|
|
||||||
#### C. Features
|
|
||||||
```tsx
|
|
||||||
- Enable quick edit: [Toggle] (default: ON)
|
|
||||||
- Enable bulk actions: [Toggle] (default: ON)
|
|
||||||
- Enable keyboard shortcuts: [Toggle] (default: ON)
|
|
||||||
- Enable auto-save: [Toggle] (default: ON)
|
|
||||||
```
|
|
||||||
|
|
||||||
#### D. Developer
|
|
||||||
```tsx
|
|
||||||
- Debug mode: [Toggle] (default: OFF)
|
|
||||||
- Show API logs: [Toggle] (default: OFF)
|
|
||||||
- Enable React DevTools: [Toggle] (default: OFF)
|
|
||||||
```
|
|
||||||
|
|
||||||
### API Endpoints:
|
|
||||||
|
|
||||||
```php
|
|
||||||
// GET /woonoow/v1/settings
|
|
||||||
// POST /woonoow/v1/settings
|
|
||||||
|
|
||||||
// Options stored:
|
|
||||||
- woonoow_enable_spa
|
|
||||||
- woonoow_admin_theme
|
|
||||||
- woonoow_items_per_page
|
|
||||||
- woonoow_enable_caching
|
|
||||||
- woonoow_cache_duration
|
|
||||||
- woonoow_enable_quick_edit
|
|
||||||
- woonoow_enable_bulk_actions
|
|
||||||
- woonoow_enable_shortcuts
|
|
||||||
- woonoow_enable_autosave
|
|
||||||
- woonoow_debug_mode
|
|
||||||
```
|
|
||||||
|
|
||||||
### Implementation:
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
// admin-spa/src/routes/Settings/index.tsx
|
|
||||||
|
|
||||||
import { SettingsLayout } from './components/SettingsLayout';
|
|
||||||
import { SettingsSection } from './components/SettingsSection';
|
|
||||||
import { ToggleField } from './components/ToggleField';
|
|
||||||
|
|
||||||
export default function WooNooWSettings() {
|
|
||||||
const [settings, setSettings] = useState({
|
|
||||||
enable_spa: true,
|
|
||||||
admin_theme: 'auto',
|
|
||||||
items_per_page: 20,
|
|
||||||
enable_caching: true,
|
|
||||||
// ...
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<SettingsLayout title="WooNooW Settings">
|
|
||||||
<SettingsSection title="General Settings">
|
|
||||||
<ToggleField
|
|
||||||
label="Enable SPA Mode"
|
|
||||||
description="Use single-page application for faster navigation"
|
|
||||||
checked={settings.enable_spa}
|
|
||||||
onChange={(checked) => setSettings({ ...settings, enable_spa: checked })}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<SelectField
|
|
||||||
label="Admin Theme"
|
|
||||||
options={[
|
|
||||||
{ value: 'light', label: 'Light' },
|
|
||||||
{ value: 'dark', label: 'Dark' },
|
|
||||||
{ value: 'auto', label: 'Auto (System)' },
|
|
||||||
]}
|
|
||||||
value={settings.admin_theme}
|
|
||||||
onChange={(value) => setSettings({ ...settings, admin_theme: value })}
|
|
||||||
/>
|
|
||||||
</SettingsSection>
|
|
||||||
|
|
||||||
<SettingsSection title="Performance">
|
|
||||||
{/* ... */}
|
|
||||||
</SettingsSection>
|
|
||||||
|
|
||||||
<SettingsSection title="Features">
|
|
||||||
{/* ... */}
|
|
||||||
</SettingsSection>
|
|
||||||
</SettingsLayout>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 2. Checkout Settings Page
|
|
||||||
|
|
||||||
**File:** `admin-spa/src/routes/Settings/Checkout.tsx`
|
|
||||||
|
|
||||||
**Purpose:** Configure checkout page behavior and options
|
|
||||||
|
|
||||||
### Sections:
|
|
||||||
|
|
||||||
#### A. Checkout Options
|
|
||||||
```tsx
|
|
||||||
- Enable guest checkout: [Toggle]
|
|
||||||
- Require account creation: [Toggle]
|
|
||||||
- Allow customers to create account during checkout: [Toggle]
|
|
||||||
- Allow customers to login during checkout: [Toggle]
|
|
||||||
```
|
|
||||||
|
|
||||||
#### B. Checkout Fields
|
|
||||||
```tsx
|
|
||||||
- Company name: [Select: Required | Optional | Hidden]
|
|
||||||
- Address line 2: [Select: Required | Optional | Hidden]
|
|
||||||
- Phone: [Select: Required | Optional | Hidden]
|
|
||||||
- Order notes: [Toggle] Enable order notes
|
|
||||||
```
|
|
||||||
|
|
||||||
#### C. Terms & Conditions
|
|
||||||
```tsx
|
|
||||||
- Enable terms and conditions: [Toggle]
|
|
||||||
- Terms page: [Page Select]
|
|
||||||
- Privacy policy page: [Page Select]
|
|
||||||
```
|
|
||||||
|
|
||||||
#### D. Order Processing
|
|
||||||
```tsx
|
|
||||||
- Default order status: [Select: Pending | Processing | On Hold]
|
|
||||||
- Auto-complete virtual orders: [Toggle]
|
|
||||||
- Auto-complete downloadable orders: [Toggle]
|
|
||||||
```
|
|
||||||
|
|
||||||
### API Endpoints:
|
|
||||||
|
|
||||||
```php
|
|
||||||
// GET /woonoow/v1/settings/checkout
|
|
||||||
// POST /woonoow/v1/settings/checkout
|
|
||||||
|
|
||||||
// WooCommerce options:
|
|
||||||
- woocommerce_enable_guest_checkout
|
|
||||||
- woocommerce_enable_signup_and_login_from_checkout
|
|
||||||
- woocommerce_enable_checkout_login_reminder
|
|
||||||
- woocommerce_checkout_company_field
|
|
||||||
- woocommerce_checkout_address_2_field
|
|
||||||
- woocommerce_checkout_phone_field
|
|
||||||
- woocommerce_enable_order_notes_field
|
|
||||||
- woocommerce_terms_page_id
|
|
||||||
- woocommerce_privacy_policy_page_id
|
|
||||||
```
|
|
||||||
|
|
||||||
### Implementation:
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
// admin-spa/src/routes/Settings/Checkout.tsx
|
|
||||||
|
|
||||||
export default function CheckoutSettings() {
|
|
||||||
const { data: settings, isLoading } = useQuery({
|
|
||||||
queryKey: ['settings', 'checkout'],
|
|
||||||
queryFn: () => api.get('/settings/checkout'),
|
|
||||||
});
|
|
||||||
|
|
||||||
const mutation = useMutation({
|
|
||||||
mutationFn: (data) => api.post('/settings/checkout', data),
|
|
||||||
onSuccess: () => {
|
|
||||||
toast.success('Checkout settings saved');
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<SettingsLayout title="Checkout Settings">
|
|
||||||
<SettingsSection title="Checkout Options">
|
|
||||||
<ToggleField
|
|
||||||
label="Enable guest checkout"
|
|
||||||
description="Allow customers to checkout without creating an account"
|
|
||||||
checked={settings?.enable_guest_checkout}
|
|
||||||
onChange={(checked) => {
|
|
||||||
mutation.mutate({ ...settings, enable_guest_checkout: checked });
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{/* ... */}
|
|
||||||
</SettingsSection>
|
|
||||||
|
|
||||||
<SettingsSection title="Checkout Fields">
|
|
||||||
<SelectField
|
|
||||||
label="Company name"
|
|
||||||
options={[
|
|
||||||
{ value: 'required', label: 'Required' },
|
|
||||||
{ value: 'optional', label: 'Optional' },
|
|
||||||
{ value: 'hidden', label: 'Hidden' },
|
|
||||||
]}
|
|
||||||
value={settings?.company_field}
|
|
||||||
/>
|
|
||||||
{/* ... */}
|
|
||||||
</SettingsSection>
|
|
||||||
</SettingsLayout>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 3. Customer Accounts Settings Page
|
|
||||||
|
|
||||||
**File:** `admin-spa/src/routes/Settings/Customers.tsx`
|
|
||||||
|
|
||||||
**Purpose:** Configure customer account creation and management
|
|
||||||
|
|
||||||
### Sections:
|
|
||||||
|
|
||||||
#### A. Account Creation
|
|
||||||
```tsx
|
|
||||||
- Allow customers to create account on "My Account" page: [Toggle]
|
|
||||||
- Allow customers to create account during checkout: [Toggle]
|
|
||||||
- Automatically generate username from email: [Toggle]
|
|
||||||
- Automatically generate password: [Toggle]
|
|
||||||
```
|
|
||||||
|
|
||||||
#### B. Account Security
|
|
||||||
```tsx
|
|
||||||
- Require strong passwords: [Toggle]
|
|
||||||
- Minimum password length: [Number: 8]
|
|
||||||
- Enable two-factor authentication: [Toggle]
|
|
||||||
```
|
|
||||||
|
|
||||||
#### C. Privacy
|
|
||||||
```tsx
|
|
||||||
- Privacy policy page: [Page Select]
|
|
||||||
- Remove personal data on request: [Toggle]
|
|
||||||
- Allow personal data export: [Toggle]
|
|
||||||
- Personal data retention: [Number: 365] days
|
|
||||||
```
|
|
||||||
|
|
||||||
#### D. Account Dashboard
|
|
||||||
```tsx
|
|
||||||
- Enable account dashboard: [Toggle]
|
|
||||||
- Show recent orders: [Toggle]
|
|
||||||
- Show downloads: [Toggle]
|
|
||||||
- Show addresses: [Toggle]
|
|
||||||
- Show account details: [Toggle]
|
|
||||||
```
|
|
||||||
|
|
||||||
### API Endpoints:
|
|
||||||
|
|
||||||
```php
|
|
||||||
// GET /woonoow/v1/settings/customers
|
|
||||||
// POST /woonoow/v1/settings/customers
|
|
||||||
|
|
||||||
// WooCommerce options:
|
|
||||||
- woocommerce_enable_myaccount_registration
|
|
||||||
- woocommerce_enable_signup_and_login_from_checkout
|
|
||||||
- woocommerce_registration_generate_username
|
|
||||||
- woocommerce_registration_generate_password
|
|
||||||
- woocommerce_privacy_policy_page_id
|
|
||||||
```
|
|
||||||
|
|
||||||
### Implementation:
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
// admin-spa/src/routes/Settings/Customers.tsx
|
|
||||||
|
|
||||||
export default function CustomerAccountsSettings() {
|
|
||||||
return (
|
|
||||||
<SettingsLayout title="Customer Accounts">
|
|
||||||
<SettingsSection title="Account Creation">
|
|
||||||
<ToggleField
|
|
||||||
label="Allow account creation on My Account page"
|
|
||||||
description="Let customers create accounts from the My Account page"
|
|
||||||
checked={settings?.enable_myaccount_registration}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ToggleField
|
|
||||||
label="Automatically generate username"
|
|
||||||
description="Generate username from customer email address"
|
|
||||||
checked={settings?.generate_username}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ToggleField
|
|
||||||
label="Automatically generate password"
|
|
||||||
description="Generate a secure password and email it to the customer"
|
|
||||||
checked={settings?.generate_password}
|
|
||||||
/>
|
|
||||||
</SettingsSection>
|
|
||||||
|
|
||||||
<SettingsSection title="Account Security">
|
|
||||||
<ToggleField
|
|
||||||
label="Require strong passwords"
|
|
||||||
description="Enforce minimum password requirements"
|
|
||||||
checked={settings?.require_strong_passwords}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<NumberField
|
|
||||||
label="Minimum password length"
|
|
||||||
value={settings?.min_password_length || 8}
|
|
||||||
min={6}
|
|
||||||
max={32}
|
|
||||||
/>
|
|
||||||
</SettingsSection>
|
|
||||||
|
|
||||||
<SettingsSection title="Privacy">
|
|
||||||
<PageSelectField
|
|
||||||
label="Privacy policy page"
|
|
||||||
value={settings?.privacy_policy_page_id}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ToggleField
|
|
||||||
label="Remove personal data on request"
|
|
||||||
description="Allow customers to request data removal"
|
|
||||||
checked={settings?.allow_data_removal}
|
|
||||||
/>
|
|
||||||
</SettingsSection>
|
|
||||||
</SettingsLayout>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 4. Brand & Appearance Settings Page
|
|
||||||
|
|
||||||
**File:** `admin-spa/src/routes/Settings/Brand.tsx`
|
|
||||||
|
|
||||||
**Purpose:** Customize store branding and visual appearance
|
|
||||||
|
|
||||||
### Sections:
|
|
||||||
|
|
||||||
#### A. Store Identity
|
|
||||||
```tsx
|
|
||||||
- Store logo: [Image Upload]
|
|
||||||
- Store icon/favicon: [Image Upload]
|
|
||||||
- Store tagline: [Text Input]
|
|
||||||
```
|
|
||||||
|
|
||||||
#### B. Brand Colors
|
|
||||||
```tsx
|
|
||||||
- Primary color: [Color Picker: #3b82f6]
|
|
||||||
- Secondary color: [Color Picker: #8b5cf6]
|
|
||||||
- Accent color: [Color Picker: #10b981]
|
|
||||||
- Success color: [Color Picker: #22c55e]
|
|
||||||
- Warning color: [Color Picker: #f59e0b]
|
|
||||||
- Error color: [Color Picker: #ef4444]
|
|
||||||
```
|
|
||||||
|
|
||||||
#### C. Typography
|
|
||||||
```tsx
|
|
||||||
- Heading font: [Font Select: Inter, Roboto, etc.]
|
|
||||||
- Body font: [Font Select: Inter, Roboto, etc.]
|
|
||||||
- Font size: [Select: Small | Medium | Large]
|
|
||||||
```
|
|
||||||
|
|
||||||
#### D. Admin UI
|
|
||||||
```tsx
|
|
||||||
- Sidebar position: [Select: Left | Right]
|
|
||||||
- Sidebar collapsed by default: [Toggle]
|
|
||||||
- Show breadcrumbs: [Toggle]
|
|
||||||
- Compact mode: [Toggle]
|
|
||||||
```
|
|
||||||
|
|
||||||
#### E. Custom CSS
|
|
||||||
```tsx
|
|
||||||
- Custom CSS: [Code Editor]
|
|
||||||
```
|
|
||||||
|
|
||||||
### API Endpoints:
|
|
||||||
|
|
||||||
```php
|
|
||||||
// GET /woonoow/v1/settings/brand
|
|
||||||
// POST /woonoow/v1/settings/brand
|
|
||||||
|
|
||||||
// Custom options:
|
|
||||||
- woonoow_store_logo
|
|
||||||
- woonoow_store_icon
|
|
||||||
- woonoow_store_tagline
|
|
||||||
- woonoow_primary_color
|
|
||||||
- woonoow_secondary_color
|
|
||||||
- woonoow_accent_color
|
|
||||||
- woonoow_heading_font
|
|
||||||
- woonoow_body_font
|
|
||||||
- woonoow_font_size
|
|
||||||
- woonoow_sidebar_position
|
|
||||||
- woonoow_sidebar_collapsed
|
|
||||||
- woonoow_custom_css
|
|
||||||
```
|
|
||||||
|
|
||||||
### Implementation:
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
// admin-spa/src/routes/Settings/Brand.tsx
|
|
||||||
|
|
||||||
export default function BrandAppearanceSettings() {
|
|
||||||
return (
|
|
||||||
<SettingsLayout title="Brand & Appearance">
|
|
||||||
<SettingsSection title="Store Identity">
|
|
||||||
<ImageUploadField
|
|
||||||
label="Store Logo"
|
|
||||||
description="Upload your store logo (recommended: 200x60px)"
|
|
||||||
value={settings?.store_logo}
|
|
||||||
onChange={(url) => updateSetting('store_logo', url)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ImageUploadField
|
|
||||||
label="Store Icon"
|
|
||||||
description="Upload favicon (recommended: 32x32px)"
|
|
||||||
value={settings?.store_icon}
|
|
||||||
onChange={(url) => updateSetting('store_icon', url)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<TextField
|
|
||||||
label="Store Tagline"
|
|
||||||
placeholder="Your store's tagline"
|
|
||||||
value={settings?.store_tagline}
|
|
||||||
onChange={(value) => updateSetting('store_tagline', value)}
|
|
||||||
/>
|
|
||||||
</SettingsSection>
|
|
||||||
|
|
||||||
<SettingsSection title="Brand Colors">
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
|
||||||
<ColorPickerField
|
|
||||||
label="Primary Color"
|
|
||||||
value={settings?.primary_color || '#3b82f6'}
|
|
||||||
onChange={(color) => updateSetting('primary_color', color)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ColorPickerField
|
|
||||||
label="Secondary Color"
|
|
||||||
value={settings?.secondary_color || '#8b5cf6'}
|
|
||||||
onChange={(color) => updateSetting('secondary_color', color)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ColorPickerField
|
|
||||||
label="Accent Color"
|
|
||||||
value={settings?.accent_color || '#10b981'}
|
|
||||||
onChange={(color) => updateSetting('accent_color', color)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</SettingsSection>
|
|
||||||
|
|
||||||
<SettingsSection title="Typography">
|
|
||||||
<SelectField
|
|
||||||
label="Heading Font"
|
|
||||||
options={[
|
|
||||||
{ value: 'inter', label: 'Inter' },
|
|
||||||
{ value: 'roboto', label: 'Roboto' },
|
|
||||||
{ value: 'poppins', label: 'Poppins' },
|
|
||||||
]}
|
|
||||||
value={settings?.heading_font}
|
|
||||||
/>
|
|
||||||
</SettingsSection>
|
|
||||||
|
|
||||||
<SettingsSection title="Custom CSS">
|
|
||||||
<CodeEditorField
|
|
||||||
label="Custom CSS"
|
|
||||||
description="Add custom CSS to personalize your admin"
|
|
||||||
language="css"
|
|
||||||
value={settings?.custom_css}
|
|
||||||
onChange={(code) => updateSetting('custom_css', code)}
|
|
||||||
/>
|
|
||||||
</SettingsSection>
|
|
||||||
</SettingsLayout>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Implementation Steps
|
|
||||||
|
|
||||||
### Phase 1: Create Components (Week 1)
|
|
||||||
1. Create `ColorPickerField.tsx`
|
|
||||||
2. Create `ImageUploadField.tsx`
|
|
||||||
3. Create `CodeEditorField.tsx`
|
|
||||||
4. Create `PageSelectField.tsx`
|
|
||||||
5. Create `NumberField.tsx`
|
|
||||||
|
|
||||||
### Phase 2: Backend API (Week 1)
|
|
||||||
1. Create `SettingsController.php`
|
|
||||||
2. Add endpoints for each settings page
|
|
||||||
3. Add validation and sanitization
|
|
||||||
4. Test API endpoints
|
|
||||||
|
|
||||||
### Phase 3: Frontend Pages (Week 2)
|
|
||||||
1. Build WooNooW settings page
|
|
||||||
2. Build Checkout settings page
|
|
||||||
3. Build Customer Accounts settings page
|
|
||||||
4. Build Brand & Appearance settings page
|
|
||||||
|
|
||||||
### Phase 4: Integration (Week 2)
|
|
||||||
1. Connect frontend to API
|
|
||||||
2. Add loading states
|
|
||||||
3. Add error handling
|
|
||||||
4. Add success notifications
|
|
||||||
5. Test all settings
|
|
||||||
|
|
||||||
### Phase 5: Polish (Week 3)
|
|
||||||
1. Add help text and tooltips
|
|
||||||
2. Add preview for brand colors
|
|
||||||
3. Add validation messages
|
|
||||||
4. Add keyboard shortcuts
|
|
||||||
5. Final testing
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## File Structure
|
|
||||||
|
|
||||||
```
|
|
||||||
admin-spa/src/routes/Settings/
|
|
||||||
├── index.tsx (WooNooW Settings) ✅ Update
|
|
||||||
├── Checkout.tsx (NEW)
|
|
||||||
├── Customers.tsx (NEW)
|
|
||||||
├── Brand.tsx (NEW)
|
|
||||||
├── Store.tsx (Existing ✅)
|
|
||||||
├── Payments.tsx (Existing ✅)
|
|
||||||
├── Shipping.tsx (Existing ✅)
|
|
||||||
├── Tax.tsx (Existing ✅)
|
|
||||||
├── Notifications.tsx (Existing ✅)
|
|
||||||
└── components/
|
|
||||||
├── SettingsLayout.tsx (Existing ✅)
|
|
||||||
├── SettingsSection.tsx (Existing ✅)
|
|
||||||
├── SettingsCard.tsx (Existing ✅)
|
|
||||||
├── ToggleField.tsx (Existing ✅)
|
|
||||||
├── ColorPickerField.tsx (NEW)
|
|
||||||
├── ImageUploadField.tsx (NEW)
|
|
||||||
├── CodeEditorField.tsx (NEW)
|
|
||||||
├── PageSelectField.tsx (NEW)
|
|
||||||
└── NumberField.tsx (NEW)
|
|
||||||
```
|
|
||||||
|
|
||||||
```
|
|
||||||
includes/Api/
|
|
||||||
├── SettingsController.php (NEW)
|
|
||||||
└── OrdersController.php (Existing ✅)
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Priority
|
|
||||||
|
|
||||||
1. **High Priority:** WooNooW Settings, Checkout Settings
|
|
||||||
2. **Medium Priority:** Customer Accounts Settings
|
|
||||||
3. **Low Priority:** Brand & Appearance Settings
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Estimated Timeline
|
|
||||||
|
|
||||||
- **Week 1:** Components + Backend API
|
|
||||||
- **Week 2:** Frontend Pages + Integration
|
|
||||||
- **Week 3:** Polish + Testing
|
|
||||||
|
|
||||||
**Total: 3 weeks**
|
|
||||||
@@ -1,481 +0,0 @@
|
|||||||
# Settings Pages Implementation Plan V2
|
|
||||||
|
|
||||||
## Overview - Refined Approach
|
|
||||||
|
|
||||||
**Final Settings Structure (5 tabs only):**
|
|
||||||
1. **Store Details** - Store identity, branding, contact info (merge Brand & Appearance here)
|
|
||||||
2. **Payments** - Payment gateway management ✅ Already built
|
|
||||||
3. **Shipping & Delivery** - Shipping zones and methods ✅ Already built
|
|
||||||
4. **Tax** - Tax rates and settings ✅ Already built
|
|
||||||
5. **Notifications** - Email templates and notifications ✅ Already built
|
|
||||||
6. **Developer** - Debug mode, API logs, React DevTools (NEW - only for maintenance)
|
|
||||||
|
|
||||||
**Eliminated:**
|
|
||||||
- ❌ WooNooW Settings (nonsense toggles)
|
|
||||||
- ❌ Checkout Settings (mirror WooCommerce, not essential)
|
|
||||||
- ❌ Customer Accounts (mirror WooCommerce, not essential)
|
|
||||||
- ❌ Brand & Appearance (merge into Store Details)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Philosophy
|
|
||||||
|
|
||||||
### ✅ What We Build:
|
|
||||||
- **Essential settings accessed frequently**
|
|
||||||
- **Simplified UI for complex WooCommerce features**
|
|
||||||
- **Industry best practices (Shopify, marketplaces)**
|
|
||||||
- **Critical features that enhance WooCommerce**
|
|
||||||
|
|
||||||
### ❌ What We Don't Build:
|
|
||||||
- Mirroring WooCommerce as-is
|
|
||||||
- Nonsense toggles for essential features
|
|
||||||
- Settings for non-tech users to break things
|
|
||||||
- Redundant configuration options
|
|
||||||
|
|
||||||
### 🎯 Principle:
|
|
||||||
> "We do the best config. Users focus on their business, not system configuration."
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 1. Store Details (Enhanced)
|
|
||||||
|
|
||||||
**File:** `admin-spa/src/routes/Settings/Store.tsx` (UPDATE existing)
|
|
||||||
|
|
||||||
**Purpose:** Complete store identity and branding in one place
|
|
||||||
|
|
||||||
### Current Structure (Keep):
|
|
||||||
- ✅ Store name
|
|
||||||
- ✅ Contact email
|
|
||||||
- ✅ Customer support email
|
|
||||||
- ✅ Store phone
|
|
||||||
- ✅ Store address
|
|
||||||
|
|
||||||
### Add to Existing:
|
|
||||||
|
|
||||||
#### Store Identity Section (NEW)
|
|
||||||
```tsx
|
|
||||||
<SettingsSection title="Store Identity">
|
|
||||||
<ImageUploadField
|
|
||||||
label="Store Logo"
|
|
||||||
description="Recommended: 200x60px PNG with transparent background"
|
|
||||||
value={settings.store_logo}
|
|
||||||
onChange={(url) => updateSetting('store_logo', url)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ImageUploadField
|
|
||||||
label="Store Icon"
|
|
||||||
description="Favicon for browser tabs (32x32px)"
|
|
||||||
value={settings.store_icon}
|
|
||||||
onChange={(url) => updateSetting('store_icon', url)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<TextField
|
|
||||||
label="Store Tagline"
|
|
||||||
placeholder="Your store's tagline or slogan"
|
|
||||||
value={settings.store_tagline}
|
|
||||||
onChange={(value) => updateSetting('store_tagline', value)}
|
|
||||||
/>
|
|
||||||
</SettingsSection>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Brand Colors Section (NEW)
|
|
||||||
```tsx
|
|
||||||
<SettingsSection
|
|
||||||
title="Brand Colors"
|
|
||||||
description="Customize your admin interface colors. Changes apply immediately."
|
|
||||||
>
|
|
||||||
<div className="grid grid-cols-3 gap-4">
|
|
||||||
<ColorPickerField
|
|
||||||
label="Primary"
|
|
||||||
value={settings.primary_color || '#3b82f6'}
|
|
||||||
onChange={(color) => updateSetting('primary_color', color)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ColorPickerField
|
|
||||||
label="Accent"
|
|
||||||
value={settings.accent_color || '#10b981'}
|
|
||||||
onChange={(color) => updateSetting('accent_color', color)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ColorPickerField
|
|
||||||
label="Error"
|
|
||||||
value={settings.error_color || '#ef4444'}
|
|
||||||
onChange={(color) => updateSetting('error_color', color)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-2 mt-4">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => resetColors()}
|
|
||||||
>
|
|
||||||
Reset to Default
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => toggleTheme()}
|
|
||||||
>
|
|
||||||
{theme === 'dark' ? '🌙 Dark' : '☀️ Light'}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</SettingsSection>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Implementation Notes:
|
|
||||||
|
|
||||||
**Theme Toggle:**
|
|
||||||
- Add to topbar (not settings page)
|
|
||||||
- Store in localStorage: `woonoow_theme`
|
|
||||||
- Options: `light`, `dark`, `auto`
|
|
||||||
- Apply via CSS class on `<html>`
|
|
||||||
|
|
||||||
**Color System:**
|
|
||||||
- Store in options: `woonoow_primary_color`, etc.
|
|
||||||
- Inject CSS variables in admin head
|
|
||||||
- Live preview (no page reload)
|
|
||||||
|
|
||||||
**API Endpoints:**
|
|
||||||
```php
|
|
||||||
// GET /woonoow/v1/settings/store
|
|
||||||
// POST /woonoow/v1/settings/store
|
|
||||||
|
|
||||||
// New options:
|
|
||||||
- woonoow_store_logo
|
|
||||||
- woonoow_store_icon
|
|
||||||
- woonoow_store_tagline
|
|
||||||
- woonoow_primary_color
|
|
||||||
- woonoow_accent_color
|
|
||||||
- woonoow_error_color
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 2. Developer Settings (NEW)
|
|
||||||
|
|
||||||
**File:** `admin-spa/src/routes/Settings/Developer.tsx`
|
|
||||||
|
|
||||||
**Purpose:** Maintenance and debugging tools for developers only
|
|
||||||
|
|
||||||
### Sections:
|
|
||||||
|
|
||||||
#### Debug Mode
|
|
||||||
```tsx
|
|
||||||
<SettingsSection
|
|
||||||
title="Debug Mode"
|
|
||||||
description="Enable debugging features for troubleshooting"
|
|
||||||
>
|
|
||||||
<ToggleField
|
|
||||||
label="Enable Debug Mode"
|
|
||||||
description="Show detailed error messages and logs"
|
|
||||||
checked={settings.debug_mode}
|
|
||||||
onChange={(checked) => updateSetting('debug_mode', checked)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{settings.debug_mode && (
|
|
||||||
<>
|
|
||||||
<ToggleField
|
|
||||||
label="Show API Logs"
|
|
||||||
description="Log all API requests and responses to browser console"
|
|
||||||
checked={settings.show_api_logs}
|
|
||||||
onChange={(checked) => updateSetting('show_api_logs', checked)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ToggleField
|
|
||||||
label="Enable React DevTools"
|
|
||||||
description="Allow React DevTools extension to inspect components"
|
|
||||||
checked={settings.enable_react_devtools}
|
|
||||||
onChange={(checked) => updateSetting('enable_react_devtools', checked)}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</SettingsSection>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### System Information (Read-only)
|
|
||||||
```tsx
|
|
||||||
<SettingsSection title="System Information">
|
|
||||||
<div className="space-y-2 text-sm">
|
|
||||||
<div className="flex justify-between">
|
|
||||||
<span className="text-muted-foreground">WooNooW Version:</span>
|
|
||||||
<span className="font-mono">{systemInfo.woonoow_version}</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between">
|
|
||||||
<span className="text-muted-foreground">WooCommerce Version:</span>
|
|
||||||
<span className="font-mono">{systemInfo.woocommerce_version}</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between">
|
|
||||||
<span className="text-muted-foreground">WordPress Version:</span>
|
|
||||||
<span className="font-mono">{systemInfo.wordpress_version}</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between">
|
|
||||||
<span className="text-muted-foreground">PHP Version:</span>
|
|
||||||
<span className="font-mono">{systemInfo.php_version}</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between">
|
|
||||||
<span className="text-muted-foreground">HPOS Enabled:</span>
|
|
||||||
<span className="font-mono">{systemInfo.hpos_enabled ? 'Yes' : 'No'}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</SettingsSection>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Cache Management
|
|
||||||
```tsx
|
|
||||||
<SettingsSection title="Cache Management">
|
|
||||||
<div className="space-y-3">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => clearCache('navigation')}
|
|
||||||
disabled={clearingCache}
|
|
||||||
>
|
|
||||||
Clear Navigation Cache
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => clearCache('settings')}
|
|
||||||
disabled={clearingCache}
|
|
||||||
>
|
|
||||||
Clear Settings Cache
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="destructive"
|
|
||||||
onClick={() => clearCache('all')}
|
|
||||||
disabled={clearingCache}
|
|
||||||
>
|
|
||||||
Clear All Caches
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</SettingsSection>
|
|
||||||
```
|
|
||||||
|
|
||||||
### API Endpoints:
|
|
||||||
```php
|
|
||||||
// GET /woonoow/v1/settings/developer
|
|
||||||
// POST /woonoow/v1/settings/developer
|
|
||||||
// POST /woonoow/v1/cache/clear
|
|
||||||
|
|
||||||
// Options:
|
|
||||||
- woonoow_debug_mode
|
|
||||||
- woonoow_show_api_logs
|
|
||||||
- woonoow_enable_react_devtools
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 3. What About Checkout & Customer Accounts?
|
|
||||||
|
|
||||||
### Industry Best Practices Analysis:
|
|
||||||
|
|
||||||
#### Shopify Checkout Settings:
|
|
||||||
**Essential Only:**
|
|
||||||
- Customer contact method (email/phone)
|
|
||||||
- Customer information (require first/last name)
|
|
||||||
- Shipping address (require company name: optional/required/hidden)
|
|
||||||
- Marketing opt-in
|
|
||||||
- Abandoned checkout recovery
|
|
||||||
|
|
||||||
**NOT in settings:**
|
|
||||||
- Guest checkout (always enabled)
|
|
||||||
- Account creation (automatic)
|
|
||||||
- Order notes (always available)
|
|
||||||
|
|
||||||
#### Marketplace Best Practices:
|
|
||||||
**Focus on:**
|
|
||||||
- Payment flow optimization
|
|
||||||
- Shipping calculation accuracy
|
|
||||||
- Tax compliance
|
|
||||||
- Order fulfillment speed
|
|
||||||
|
|
||||||
**NOT configurable:**
|
|
||||||
- Basic checkout fields (always there)
|
|
||||||
- Account creation flow (standardized)
|
|
||||||
- Login/registration (automatic)
|
|
||||||
|
|
||||||
### Our Approach:
|
|
||||||
|
|
||||||
**✅ We do the best config:**
|
|
||||||
- Enable guest checkout (always)
|
|
||||||
- Allow account creation during checkout (always)
|
|
||||||
- Generate username from email (always)
|
|
||||||
- All essential fields enabled (always)
|
|
||||||
- Order notes available (always)
|
|
||||||
|
|
||||||
**❌ We don't build settings for:**
|
|
||||||
- Toggling essential features
|
|
||||||
- Breaking standard checkout flow
|
|
||||||
- Confusing non-tech users
|
|
||||||
- Mirroring WooCommerce as-is
|
|
||||||
|
|
||||||
**If users need advanced customization:**
|
|
||||||
- Use WooCommerce native settings
|
|
||||||
- Use hooks and filters
|
|
||||||
- Use custom code
|
|
||||||
- We focus on 80% use case
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Final Settings Structure
|
|
||||||
|
|
||||||
```
|
|
||||||
Settings
|
|
||||||
├── Store Details (Enhanced)
|
|
||||||
│ ├── Store Information
|
|
||||||
│ ├── Contact Details
|
|
||||||
│ ├── Store Address
|
|
||||||
│ ├── Store Identity (NEW)
|
|
||||||
│ │ ├── Logo
|
|
||||||
│ │ ├── Icon
|
|
||||||
│ │ └── Tagline
|
|
||||||
│ └── Brand Colors (NEW)
|
|
||||||
│ ├── Primary
|
|
||||||
│ ├── Accent
|
|
||||||
│ ├── Error
|
|
||||||
│ └── Theme Toggle
|
|
||||||
│
|
|
||||||
├── Payments (Existing ✅)
|
|
||||||
│ └── Payment gateway management
|
|
||||||
│
|
|
||||||
├── Shipping & Delivery (Existing ✅)
|
|
||||||
│ └── Shipping zones and methods
|
|
||||||
│
|
|
||||||
├── Tax (Existing ✅)
|
|
||||||
│ └── Tax rates and settings
|
|
||||||
│
|
|
||||||
├── Notifications (Existing ✅)
|
|
||||||
│ └── Email templates
|
|
||||||
│
|
|
||||||
└── Developer (NEW)
|
|
||||||
├── Debug Mode
|
|
||||||
├── System Information
|
|
||||||
└── Cache Management
|
|
||||||
```
|
|
||||||
|
|
||||||
**Total: 6 tabs (down from 13!)**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Implementation Priority
|
|
||||||
|
|
||||||
### Phase 1: Store Details Enhancement (Week 1)
|
|
||||||
1. Add Store Identity section
|
|
||||||
2. Add Brand Colors section
|
|
||||||
3. Implement color system with CSS variables
|
|
||||||
4. Add theme toggle to topbar
|
|
||||||
5. Test and polish
|
|
||||||
|
|
||||||
### Phase 2: Developer Settings (Week 1)
|
|
||||||
1. Create Developer settings page
|
|
||||||
2. Add debug mode toggles
|
|
||||||
3. Add system information display
|
|
||||||
4. Add cache management
|
|
||||||
5. Test and polish
|
|
||||||
|
|
||||||
### Phase 3: Polish (Week 2)
|
|
||||||
1. Add help text and tooltips
|
|
||||||
2. Add color preview
|
|
||||||
3. Add validation
|
|
||||||
4. Final testing
|
|
||||||
5. Documentation
|
|
||||||
|
|
||||||
**Total: 2 weeks**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Components Needed
|
|
||||||
|
|
||||||
### New Components:
|
|
||||||
1. `ColorPickerField.tsx` - Color picker with preview
|
|
||||||
2. `ImageUploadField.tsx` - Image upload with preview
|
|
||||||
|
|
||||||
### Existing Components (Reuse):
|
|
||||||
- ✅ `SettingsLayout.tsx`
|
|
||||||
- ✅ `SettingsSection.tsx`
|
|
||||||
- ✅ `SettingsCard.tsx`
|
|
||||||
- ✅ `ToggleField.tsx`
|
|
||||||
- ✅ `TextField.tsx`
|
|
||||||
- ✅ `Button.tsx`
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Key Decisions
|
|
||||||
|
|
||||||
### ✅ What We Decided:
|
|
||||||
|
|
||||||
1. **Merge Brand & Appearance into Store Details**
|
|
||||||
- More logical grouping
|
|
||||||
- Fewer tabs
|
|
||||||
- Better UX
|
|
||||||
|
|
||||||
2. **No Checkout/Customer Accounts Settings**
|
|
||||||
- We do the best config
|
|
||||||
- No need to expose WooCommerce complexity
|
|
||||||
- Focus on business, not system config
|
|
||||||
|
|
||||||
3. **Developer Settings Separate**
|
|
||||||
- Only for maintenance
|
|
||||||
- Not for regular users
|
|
||||||
- Clear separation of concerns
|
|
||||||
|
|
||||||
4. **Theme Toggle in Topbar**
|
|
||||||
- Quick access
|
|
||||||
- Not buried in settings
|
|
||||||
- Industry standard (GitHub, VS Code)
|
|
||||||
|
|
||||||
5. **Essential Colors Only**
|
|
||||||
- Primary, Accent, Error
|
|
||||||
- No overwhelming options
|
|
||||||
- Easy to customize
|
|
||||||
|
|
||||||
### ❌ What We Rejected:
|
|
||||||
|
|
||||||
1. **Nonsense Toggles**
|
|
||||||
- Enable SPA Mode (plugin activation = enabled)
|
|
||||||
- Enable Quick Edit (essential feature)
|
|
||||||
- Enable Bulk Actions (essential feature)
|
|
||||||
- Enable Keyboard Shortcuts (essential feature)
|
|
||||||
|
|
||||||
2. **Performance Settings**
|
|
||||||
- Enable caching (we do best config)
|
|
||||||
- Cache duration (we optimize)
|
|
||||||
- Preload data (we handle)
|
|
||||||
|
|
||||||
3. **Typography Settings**
|
|
||||||
- Font selection (breaks design)
|
|
||||||
- Font size (use browser zoom)
|
|
||||||
|
|
||||||
4. **Admin UI Settings**
|
|
||||||
- Sidebar position (we optimize)
|
|
||||||
- Sidebar collapsed (we handle)
|
|
||||||
- Compact mode (we optimize)
|
|
||||||
|
|
||||||
5. **Custom CSS**
|
|
||||||
- Hard to use (no selectors)
|
|
||||||
- Better in theme
|
|
||||||
- Only for developers (if needed, add to Developer page)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Summary
|
|
||||||
|
|
||||||
**From 13 tabs to 6 tabs:**
|
|
||||||
- ✅ Store Details (enhanced with branding)
|
|
||||||
- ✅ Payments (existing)
|
|
||||||
- ✅ Shipping & Delivery (existing)
|
|
||||||
- ✅ Tax (existing)
|
|
||||||
- ✅ Notifications (existing)
|
|
||||||
- ✅ Developer (new, for maintenance)
|
|
||||||
|
|
||||||
**Philosophy:**
|
|
||||||
> "We do the best config. Users focus on their business, not system configuration."
|
|
||||||
|
|
||||||
**Result:**
|
|
||||||
- Clean, focused settings
|
|
||||||
- Industry best practices
|
|
||||||
- No bloat
|
|
||||||
- Easy to use
|
|
||||||
- Professional
|
|
||||||
@@ -1,380 +0,0 @@
|
|||||||
# WooNooW Settings Placement Strategy
|
|
||||||
|
|
||||||
## Philosophy
|
|
||||||
|
|
||||||
**No separate "WooNooW Settings" page needed.**
|
|
||||||
|
|
||||||
Instead, integrate WooNooW settings seamlessly into existing WooCommerce/WordPress settings pages by context.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Current WooCommerce Settings Structure
|
|
||||||
|
|
||||||
```
|
|
||||||
WooCommerce > Settings
|
|
||||||
├── General
|
|
||||||
│ ├── Store Address
|
|
||||||
│ ├── Selling Location
|
|
||||||
│ ├── Currency
|
|
||||||
│ └── ...
|
|
||||||
├── Products
|
|
||||||
│ ├── General
|
|
||||||
│ ├── Inventory
|
|
||||||
│ └── ...
|
|
||||||
├── Tax
|
|
||||||
│ ├── Tax Options
|
|
||||||
│ └── Standard Rates
|
|
||||||
├── Shipping
|
|
||||||
│ ├── Shipping Zones
|
|
||||||
│ └── Shipping Options
|
|
||||||
└── ...
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## WooNooW Settings Integration
|
|
||||||
|
|
||||||
### 1. Store Identity Settings
|
|
||||||
|
|
||||||
**Location:** `WooCommerce > Settings > General` (or new "Store Details" tab)
|
|
||||||
|
|
||||||
**WooNooW Fields:**
|
|
||||||
- ✅ Store Logo (upload)
|
|
||||||
- ✅ Store Icon/Favicon
|
|
||||||
- ✅ Brand Colors (primary, secondary)
|
|
||||||
- ✅ Store Tagline
|
|
||||||
|
|
||||||
**Why here?**
|
|
||||||
- Related to store identity
|
|
||||||
- Used across admin and frontend
|
|
||||||
- Makes sense with existing "Store Address" fields
|
|
||||||
|
|
||||||
**Implementation:**
|
|
||||||
```php
|
|
||||||
add_filter('woocommerce_general_settings', function($settings) {
|
|
||||||
$woonoow_settings = [
|
|
||||||
[
|
|
||||||
'title' => __('Store Identity', 'woonoow'),
|
|
||||||
'type' => 'title',
|
|
||||||
'desc' => __('Customize your store branding', 'woonoow'),
|
|
||||||
'id' => 'woonoow_store_identity',
|
|
||||||
],
|
|
||||||
[
|
|
||||||
'title' => __('Store Logo', 'woonoow'),
|
|
||||||
'type' => 'text',
|
|
||||||
'desc' => __('Upload your store logo', 'woonoow'),
|
|
||||||
'id' => 'woonoow_store_logo',
|
|
||||||
'custom_attributes' => ['data-upload' => 'image'],
|
|
||||||
],
|
|
||||||
[
|
|
||||||
'title' => __('Primary Color', 'woonoow'),
|
|
||||||
'type' => 'color',
|
|
||||||
'id' => 'woonoow_primary_color',
|
|
||||||
'default' => '#3b82f6',
|
|
||||||
],
|
|
||||||
[
|
|
||||||
'type' => 'sectionend',
|
|
||||||
'id' => 'woonoow_store_identity',
|
|
||||||
],
|
|
||||||
];
|
|
||||||
|
|
||||||
return array_merge($settings, $woonoow_settings);
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 2. Order Settings
|
|
||||||
|
|
||||||
**Location:** `WooCommerce > Settings > General` or new "Orders" tab
|
|
||||||
|
|
||||||
**WooNooW Fields:**
|
|
||||||
- ✅ Default order status
|
|
||||||
- ✅ Order number format
|
|
||||||
- ✅ Enable order notes
|
|
||||||
- ✅ Auto-complete virtual orders
|
|
||||||
|
|
||||||
**Why here?**
|
|
||||||
- Order-specific settings
|
|
||||||
- Used in OrderForm and order processing
|
|
||||||
- Contextually related
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 3. Product Settings
|
|
||||||
|
|
||||||
**Location:** `WooCommerce > Settings > Products`
|
|
||||||
|
|
||||||
**WooNooW Fields:**
|
|
||||||
- ✅ Enable quick edit
|
|
||||||
- ✅ Default product type
|
|
||||||
- ✅ Enable bulk actions
|
|
||||||
- ✅ Product image sizes
|
|
||||||
|
|
||||||
**Why here?**
|
|
||||||
- Product-specific settings
|
|
||||||
- Used in ProductForm
|
|
||||||
- Already in Products context
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 4. UI/UX Settings
|
|
||||||
|
|
||||||
**Location:** New tab `WooCommerce > Settings > Admin UI` or `WooNooW`
|
|
||||||
|
|
||||||
**WooNooW Fields:**
|
|
||||||
- ✅ Enable/disable SPA mode
|
|
||||||
- ✅ Theme (light/dark/auto)
|
|
||||||
- ✅ Sidebar collapsed by default
|
|
||||||
- ✅ Items per page
|
|
||||||
- ✅ Date format preference
|
|
||||||
|
|
||||||
**Why separate tab?**
|
|
||||||
- WooNooW-specific features
|
|
||||||
- Not related to store operations
|
|
||||||
- Admin experience customization
|
|
||||||
|
|
||||||
**Implementation:**
|
|
||||||
```php
|
|
||||||
add_filter('woocommerce_settings_tabs_array', function($tabs) {
|
|
||||||
$tabs['woonoow'] = __('Admin UI', 'woonoow');
|
|
||||||
return $tabs;
|
|
||||||
}, 50);
|
|
||||||
|
|
||||||
add_action('woocommerce_settings_woonoow', function() {
|
|
||||||
woocommerce_admin_fields([
|
|
||||||
[
|
|
||||||
'title' => __('WooNooW Admin Settings', 'woonoow'),
|
|
||||||
'type' => 'title',
|
|
||||||
'desc' => __('Customize your admin experience', 'woonoow'),
|
|
||||||
],
|
|
||||||
[
|
|
||||||
'title' => __('Enable SPA Mode', 'woonoow'),
|
|
||||||
'type' => 'checkbox',
|
|
||||||
'desc' => __('Use single-page application for faster navigation', 'woonoow'),
|
|
||||||
'id' => 'woonoow_enable_spa',
|
|
||||||
'default' => 'yes',
|
|
||||||
],
|
|
||||||
[
|
|
||||||
'title' => __('Theme', 'woonoow'),
|
|
||||||
'type' => 'select',
|
|
||||||
'options' => [
|
|
||||||
'light' => __('Light', 'woonoow'),
|
|
||||||
'dark' => __('Dark', 'woonoow'),
|
|
||||||
'auto' => __('Auto (System)', 'woonoow'),
|
|
||||||
],
|
|
||||||
'id' => 'woonoow_theme',
|
|
||||||
'default' => 'auto',
|
|
||||||
],
|
|
||||||
]);
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Settings Organization
|
|
||||||
|
|
||||||
### By Context (Recommended):
|
|
||||||
|
|
||||||
```
|
|
||||||
WooCommerce > Settings > General
|
|
||||||
└── Store Identity (WooNooW)
|
|
||||||
├── Store Logo
|
|
||||||
├── Brand Colors
|
|
||||||
└── ...
|
|
||||||
|
|
||||||
WooCommerce > Settings > Products
|
|
||||||
└── Product Management (WooNooW)
|
|
||||||
├── Quick Edit
|
|
||||||
├── Bulk Actions
|
|
||||||
└── ...
|
|
||||||
|
|
||||||
WooCommerce > Settings > Orders
|
|
||||||
└── Order Processing (WooNooW)
|
|
||||||
├── Order Number Format
|
|
||||||
├── Default Status
|
|
||||||
└── ...
|
|
||||||
|
|
||||||
WooCommerce > Settings > Admin UI (New Tab)
|
|
||||||
└── WooNooW Settings
|
|
||||||
├── SPA Mode
|
|
||||||
├── Theme
|
|
||||||
├── UI Preferences
|
|
||||||
└── ...
|
|
||||||
```
|
|
||||||
|
|
||||||
### Benefits:
|
|
||||||
|
|
||||||
✅ **Contextual** - Settings appear where they're relevant
|
|
||||||
✅ **Familiar** - Uses existing WooCommerce settings structure
|
|
||||||
✅ **No clutter** - No separate "WooNooW Settings" menu
|
|
||||||
✅ **Intuitive** - Users find settings where they expect them
|
|
||||||
✅ **Seamless** - Feels like native WooCommerce
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Implementation Strategy
|
|
||||||
|
|
||||||
### Phase 1: Integrate into Existing Tabs
|
|
||||||
|
|
||||||
```php
|
|
||||||
// Store Identity → General tab
|
|
||||||
add_filter('woocommerce_general_settings', 'woonoow_add_store_identity_settings');
|
|
||||||
|
|
||||||
// Product Settings → Products tab
|
|
||||||
add_filter('woocommerce_product_settings', 'woonoow_add_product_settings');
|
|
||||||
|
|
||||||
// Order Settings → General tab or new Orders tab
|
|
||||||
add_filter('woocommerce_general_settings', 'woonoow_add_order_settings');
|
|
||||||
```
|
|
||||||
|
|
||||||
### Phase 2: Add WooNooW-Specific Tab (If Needed)
|
|
||||||
|
|
||||||
```php
|
|
||||||
// Only for settings that don't fit elsewhere
|
|
||||||
add_filter('woocommerce_settings_tabs_array', function($tabs) {
|
|
||||||
$tabs['woonoow'] = __('Admin UI', 'woonoow');
|
|
||||||
return $tabs;
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
### Phase 3: Settings API
|
|
||||||
|
|
||||||
Provide a clean API for addons to register settings:
|
|
||||||
|
|
||||||
```php
|
|
||||||
// Addon can add settings to any tab
|
|
||||||
WooNooW_Settings::add_field('general', [
|
|
||||||
'id' => 'my_addon_setting',
|
|
||||||
'title' => 'My Setting',
|
|
||||||
'type' => 'text',
|
|
||||||
]);
|
|
||||||
|
|
||||||
// Or create own section
|
|
||||||
WooNooW_Settings::add_section('general', [
|
|
||||||
'id' => 'my_addon_section',
|
|
||||||
'title' => 'My Addon Settings',
|
|
||||||
'fields' => [...],
|
|
||||||
]);
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Examples
|
|
||||||
|
|
||||||
### Example 1: Store Logo
|
|
||||||
|
|
||||||
**Bad (Separate Page):**
|
|
||||||
```
|
|
||||||
WooNooW > Settings > Store Logo
|
|
||||||
```
|
|
||||||
|
|
||||||
**Good (Contextual):**
|
|
||||||
```
|
|
||||||
WooCommerce > Settings > General > Store Identity > Store Logo
|
|
||||||
```
|
|
||||||
|
|
||||||
### Example 2: Order Number Format
|
|
||||||
|
|
||||||
**Bad (Separate Page):**
|
|
||||||
```
|
|
||||||
WooNooW > Settings > Order Number Format
|
|
||||||
```
|
|
||||||
|
|
||||||
**Good (Contextual):**
|
|
||||||
```
|
|
||||||
WooCommerce > Settings > Orders > Order Number Format
|
|
||||||
```
|
|
||||||
|
|
||||||
### Example 3: SPA Mode
|
|
||||||
|
|
||||||
**Acceptable (WooNooW-Specific):**
|
|
||||||
```
|
|
||||||
WooCommerce > Settings > Admin UI > Enable SPA Mode
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Settings Categories
|
|
||||||
|
|
||||||
### Store Settings (Contextual Integration)
|
|
||||||
- Store Logo → `General`
|
|
||||||
- Brand Colors → `General`
|
|
||||||
- Currency Display → `General`
|
|
||||||
- Tax Display → `Tax`
|
|
||||||
- Shipping Display → `Shipping`
|
|
||||||
|
|
||||||
### Product Settings (Contextual Integration)
|
|
||||||
- Default Product Type → `Products > General`
|
|
||||||
- Quick Edit → `Products > General`
|
|
||||||
- Inventory Settings → `Products > Inventory`
|
|
||||||
|
|
||||||
### Order Settings (Contextual Integration)
|
|
||||||
- Order Number Format → `Orders` (new tab) or `General`
|
|
||||||
- Default Status → `Orders`
|
|
||||||
- Auto-complete → `Orders`
|
|
||||||
|
|
||||||
### Admin UI Settings (New Tab)
|
|
||||||
- SPA Mode → `Admin UI`
|
|
||||||
- Theme → `Admin UI`
|
|
||||||
- Sidebar → `Admin UI`
|
|
||||||
- Items per Page → `Admin UI`
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Migration from Current Settings
|
|
||||||
|
|
||||||
If WooNooW currently has a separate settings page:
|
|
||||||
|
|
||||||
### Step 1: Identify Settings
|
|
||||||
```
|
|
||||||
Current: WooNooW > Settings > All Settings
|
|
||||||
```
|
|
||||||
|
|
||||||
### Step 2: Categorize
|
|
||||||
```
|
|
||||||
Store Logo → Move to General
|
|
||||||
Order Format → Move to Orders
|
|
||||||
SPA Mode → Move to Admin UI
|
|
||||||
```
|
|
||||||
|
|
||||||
### Step 3: Migrate
|
|
||||||
```php
|
|
||||||
// Remove old settings page
|
|
||||||
remove_menu_page('woonoow-settings');
|
|
||||||
|
|
||||||
// Add to WooCommerce settings
|
|
||||||
add_filter('woocommerce_general_settings', ...);
|
|
||||||
add_filter('woocommerce_settings_tabs_array', ...);
|
|
||||||
```
|
|
||||||
|
|
||||||
### Step 4: Redirect
|
|
||||||
```php
|
|
||||||
// Redirect old URL to new location
|
|
||||||
add_action('admin_init', function() {
|
|
||||||
if (isset($_GET['page']) && $_GET['page'] === 'woonoow-settings') {
|
|
||||||
wp_redirect(admin_url('admin.php?page=wc-settings&tab=general'));
|
|
||||||
exit;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Conclusion
|
|
||||||
|
|
||||||
**No separate "WooNooW Settings" page needed.**
|
|
||||||
|
|
||||||
Instead:
|
|
||||||
1. ✅ Integrate into existing WooCommerce settings tabs by context
|
|
||||||
2. ✅ Add "Admin UI" tab for WooNooW-specific UI settings
|
|
||||||
3. ✅ Provide settings API for addons
|
|
||||||
4. ✅ Keep settings contextual and intuitive
|
|
||||||
|
|
||||||
**Result:**
|
|
||||||
- Seamless integration
|
|
||||||
- Better UX
|
|
||||||
- No clutter
|
|
||||||
- Familiar to users
|
|
||||||
|
|
||||||
**WooNooW feels like a native part of WooCommerce, not a separate plugin.**
|
|
||||||
@@ -1,899 +0,0 @@
|
|||||||
# WooNooW Settings Tree - Implementation Plan
|
|
||||||
|
|
||||||
## 📋 Overview
|
|
||||||
|
|
||||||
This document defines the complete settings structure for WooNooW Admin SPA, using a **Shopify-inspired approach** that focuses on store success rather than technical configuration.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🎯 Strategy: Modern SaaS Approach (Shopify-Inspired)
|
|
||||||
|
|
||||||
**Philosophy:**
|
|
||||||
- **Store-first, not tech-first** - Settings encourage business growth
|
|
||||||
- **Simple, fast, smooth** - Better UX than WooCommerce's complex tabs
|
|
||||||
- **Logical grouping** - Our own hierarchy, not WooCommerce's legacy structure
|
|
||||||
- **Progressive disclosure** - Show what matters, hide complexity
|
|
||||||
- **Action-oriented** - "Set up payments" not "Payment gateway settings"
|
|
||||||
|
|
||||||
**Key Differences from WooCommerce:**
|
|
||||||
- ❌ No confusing tabs and sub-tabs
|
|
||||||
- ❌ No technical jargon
|
|
||||||
- ❌ No overwhelming forms
|
|
||||||
- ✅ Clear sections with visual cards
|
|
||||||
- ✅ Setup wizards for complex tasks
|
|
||||||
- ✅ Inline help and examples
|
|
||||||
- ✅ Mobile-friendly interface
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🌲 Settings Tree Structure (Shopify-Inspired)
|
|
||||||
|
|
||||||
```
|
|
||||||
Settings
|
|
||||||
├── 🏪 Store Details
|
|
||||||
│ └── /settings/store
|
|
||||||
│ • Store name, contact info
|
|
||||||
│ • Store address (for invoices, shipping origin)
|
|
||||||
│ • Currency & formatting
|
|
||||||
│ • Timezone & units
|
|
||||||
│ • Store industry/type
|
|
||||||
│
|
|
||||||
├── 💳 Payments
|
|
||||||
│ └── /settings/payments
|
|
||||||
│ • Payment providers (cards: Stripe, PayPal, etc.)
|
|
||||||
│ • Manual methods (bank transfer, cash, check)
|
|
||||||
│ • Payment capture settings
|
|
||||||
│ • Test mode toggle
|
|
||||||
│
|
|
||||||
├── 📦 Shipping & Delivery
|
|
||||||
│ └── /settings/shipping
|
|
||||||
│ • Shipping zones (visual map)
|
|
||||||
│ • Shipping rates (simple table)
|
|
||||||
│ • Local pickup options
|
|
||||||
│ • Free shipping rules
|
|
||||||
│ • Delivery time estimates
|
|
||||||
│
|
|
||||||
├── 💰 Taxes
|
|
||||||
│ └── /settings/taxes
|
|
||||||
│ • Tax calculation (auto or manual)
|
|
||||||
│ • Tax rates by region (simple table)
|
|
||||||
│ • Tax-inclusive pricing toggle
|
|
||||||
│ • Tax exemptions
|
|
||||||
│
|
|
||||||
├── 🛍️ Checkout
|
|
||||||
│ └── /settings/checkout
|
|
||||||
│ • Checkout fields (required/optional)
|
|
||||||
│ • Guest checkout toggle
|
|
||||||
│ • Account creation options
|
|
||||||
│ • Order notes
|
|
||||||
│ • Terms & conditions
|
|
||||||
│
|
|
||||||
├── 👤 Customer Accounts
|
|
||||||
│ └── /settings/customers
|
|
||||||
│ • Account creation settings
|
|
||||||
│ • Login options
|
|
||||||
│ • Customer data retention
|
|
||||||
│ • Privacy policy
|
|
||||||
│
|
|
||||||
├── 📧 Notifications
|
|
||||||
│ └── /settings/notifications
|
|
||||||
│ • Email templates (visual editor)
|
|
||||||
│ • Order notifications (customer & admin)
|
|
||||||
│ • Shipping notifications
|
|
||||||
│ • Email sender details
|
|
||||||
│ • SMS notifications (future)
|
|
||||||
│
|
|
||||||
├── 🎨 Brand & Appearance
|
|
||||||
│ └── /settings/brand
|
|
||||||
│ • Logo upload
|
|
||||||
│ • Brand colors
|
|
||||||
│ • Email header/footer
|
|
||||||
│ • Invoice template
|
|
||||||
│
|
|
||||||
├── 🔧 WooNooW Settings
|
|
||||||
│ └── /settings/woonoow
|
|
||||||
│ • Plugin preferences
|
|
||||||
│ • Performance settings
|
|
||||||
│ • Feature toggles
|
|
||||||
│ • License & updates
|
|
||||||
│
|
|
||||||
├── ⚙️ Advanced (Bridge to wp-admin)
|
|
||||||
│ └── /wp-admin/admin.php?page=wc-settings&tab=advanced
|
|
||||||
│
|
|
||||||
├── 🔌 Integrations (Bridge to wp-admin)
|
|
||||||
│ └── /wp-admin/admin.php?page=wc-settings&tab=integration
|
|
||||||
│
|
|
||||||
├── 🔍 System Status (Bridge to wp-admin)
|
|
||||||
│ └── /wp-admin/admin.php?page=wc-status
|
|
||||||
│
|
|
||||||
└── 🧩 Extensions (Bridge to wp-admin)
|
|
||||||
└── /wp-admin/admin.php?page=wc-addons
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📊 Implementation Priority (Shopify-Inspired)
|
|
||||||
|
|
||||||
### **Phase 1: Foundation (HIGH PRIORITY)** 🔴
|
|
||||||
|
|
||||||
#### 1. Store Details (`/settings/store`)
|
|
||||||
**Purpose:** Core store information - the foundation of everything
|
|
||||||
**Complexity:** Low-Medium
|
|
||||||
**Estimated Time:** 4-6 hours
|
|
||||||
**Shopify Equivalent:** Settings > General
|
|
||||||
|
|
||||||
**Layout:** Single-page form with clear sections
|
|
||||||
|
|
||||||
**Sections:**
|
|
||||||
|
|
||||||
**A. Store Identity**
|
|
||||||
- Store name (text input with live preview)
|
|
||||||
- Contact email (for customer inquiries)
|
|
||||||
- Customer support email (separate from admin)
|
|
||||||
- Store phone number (optional)
|
|
||||||
|
|
||||||
**B. Store Address**
|
|
||||||
- Country/Region (dropdown with flags)
|
|
||||||
- Street address (autocomplete)
|
|
||||||
- City, State/Province, Postal code
|
|
||||||
- _Used for: shipping origin, invoices, tax calculations_
|
|
||||||
|
|
||||||
**C. Currency & Formatting**
|
|
||||||
- Currency (searchable dropdown with symbols)
|
|
||||||
- Currency position (before/after amount)
|
|
||||||
- Thousand separator (`,` or `.` or space)
|
|
||||||
- Decimal separator (`.` or `,`)
|
|
||||||
- Number of decimals (0-4)
|
|
||||||
- _Live preview: $1,234.56_
|
|
||||||
|
|
||||||
**D. Standards & Formats**
|
|
||||||
- Timezone (auto-detect with manual override)
|
|
||||||
- Unit system (Metric / Imperial)
|
|
||||||
- Weight unit (kg, g, lb, oz)
|
|
||||||
- Dimension unit (cm, m, in, ft)
|
|
||||||
|
|
||||||
**E. Store Type** (helps with recommendations)
|
|
||||||
- Industry (dropdown: Fashion, Electronics, Food, etc.)
|
|
||||||
- Business type (B2C, B2B, Both)
|
|
||||||
|
|
||||||
**UI/UX:**
|
|
||||||
- Clean, spacious layout
|
|
||||||
- Inline validation
|
|
||||||
- Live preview for currency formatting
|
|
||||||
- Auto-save draft (save button at top)
|
|
||||||
- "Your store is located in Indonesia 🇮🇩" summary card
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
#### 2. Payments (`/settings/payments`)
|
|
||||||
**Purpose:** Get paid - make it dead simple
|
|
||||||
**Complexity:** Medium
|
|
||||||
**Estimated Time:** 6-8 hours
|
|
||||||
**Shopify Equivalent:** Settings > Payments
|
|
||||||
|
|
||||||
**Layout:** Card-based interface, not a table
|
|
||||||
|
|
||||||
**Sections:**
|
|
||||||
|
|
||||||
**A. Payment Providers** (Visual Cards)
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────┐
|
|
||||||
│ 💳 Credit & Debit Cards │
|
|
||||||
│ │
|
|
||||||
│ [Stripe Logo] Stripe Payments │
|
|
||||||
│ ○ Not connected │
|
|
||||||
│ [Set up Stripe] button │
|
|
||||||
│ │
|
|
||||||
│ Accept Visa, Mastercard, Amex │
|
|
||||||
│ 2.9% + $0.30 per transaction │
|
|
||||||
└─────────────────────────────────────┘
|
|
||||||
|
|
||||||
┌─────────────────────────────────────┐
|
|
||||||
│ [PayPal Logo] PayPal │
|
|
||||||
│ ● Connected │
|
|
||||||
│ [Manage] [Disconnect] │
|
|
||||||
│ │
|
|
||||||
│ buyer@example.com │
|
|
||||||
│ 3.49% + fixed fee per transaction │
|
|
||||||
└─────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
**B. Manual Payment Methods** (Simpler cards)
|
|
||||||
- Bank Transfer (BACS) - toggle + instructions field
|
|
||||||
- Cash on Delivery - toggle + fee option
|
|
||||||
- Check Payments - toggle + instructions
|
|
||||||
|
|
||||||
**C. Payment Settings**
|
|
||||||
- Test mode (big toggle with warning banner)
|
|
||||||
- Payment capture (Authorize only / Authorize and capture)
|
|
||||||
- Accepted payment methods (checkboxes with icons)
|
|
||||||
|
|
||||||
**UI/UX:**
|
|
||||||
- Big, visual cards (not boring table rows)
|
|
||||||
- "Add payment provider" button with modal
|
|
||||||
- Setup wizard for Stripe/PayPal (not raw API keys)
|
|
||||||
- Test mode banner: "⚠️ Test Mode Active - No real charges"
|
|
||||||
- Drag to reorder (shows on checkout)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
#### 3. Shipping & Delivery (`/settings/shipping`)
|
|
||||||
**Purpose:** Get products to customers
|
|
||||||
**Complexity:** Medium-High
|
|
||||||
**Estimated Time:** 8-10 hours
|
|
||||||
**Shopify Equivalent:** Settings > Shipping and delivery
|
|
||||||
|
|
||||||
**Layout:** Zone-based with visual hierarchy
|
|
||||||
|
|
||||||
**Sections:**
|
|
||||||
|
|
||||||
**A. Shipping Zones** (Card list, not table)
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────┐
|
|
||||||
│ 🌍 Domestic (Indonesia) │
|
|
||||||
│ │
|
|
||||||
│ Regions: All Indonesia │
|
|
||||||
│ Rates: 3 shipping rates │
|
|
||||||
│ │
|
|
||||||
│ • Standard Shipping - Rp 15,000 │
|
|
||||||
│ • Express Shipping - Rp 30,000 │
|
|
||||||
│ • Free Shipping - Free (>Rp 500k) │
|
|
||||||
│ │
|
|
||||||
│ [Edit zone] [Delete] │
|
|
||||||
└─────────────────────────────────────┘
|
|
||||||
|
|
||||||
┌─────────────────────────────────────┐
|
|
||||||
│ 🌏 International │
|
|
||||||
│ │
|
|
||||||
│ Regions: Rest of world │
|
|
||||||
│ Rates: 1 shipping rate │
|
|
||||||
│ │
|
|
||||||
│ • International - Calculated │
|
|
||||||
│ │
|
|
||||||
│ [Edit zone] │
|
|
||||||
└─────────────────────────────────────┘
|
|
||||||
|
|
||||||
[+ Add shipping zone] button
|
|
||||||
```
|
|
||||||
|
|
||||||
**B. Zone Editor** (Modal or slide-over)
|
|
||||||
- Zone name
|
|
||||||
- Countries/Regions (multi-select with search)
|
|
||||||
- Shipping rates:
|
|
||||||
- Name (e.g., "Standard Shipping")
|
|
||||||
- Price (flat rate or calculated)
|
|
||||||
- Conditions (order total, weight, etc.)
|
|
||||||
- Transit time (e.g., "3-5 business days")
|
|
||||||
|
|
||||||
**C. Local Pickup**
|
|
||||||
- Enable local pickup (toggle)
|
|
||||||
- Pickup locations (list with add/edit)
|
|
||||||
- Pickup instructions
|
|
||||||
|
|
||||||
**D. Shipping Settings**
|
|
||||||
- Show delivery estimates (toggle)
|
|
||||||
- Require shipping address (toggle)
|
|
||||||
- Hide shipping costs until address entered (toggle)
|
|
||||||
|
|
||||||
**UI/UX:**
|
|
||||||
- Visual zone cards, not boring table
|
|
||||||
- "Add rate" button per zone
|
|
||||||
- Inline rate editor (no page reload)
|
|
||||||
- Drag to reorder rates
|
|
||||||
- Smart defaults: "Domestic" zone auto-created
|
|
||||||
- Map visualization (future enhancement)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### **Phase 2: Customer Experience (MEDIUM PRIORITY)** 🟡
|
|
||||||
|
|
||||||
#### 4. Taxes (`/settings/taxes`)
|
|
||||||
**Purpose:** Handle taxes simply
|
|
||||||
**Complexity:** Medium
|
|
||||||
**Estimated Time:** 5-7 hours
|
|
||||||
**Shopify Equivalent:** Settings > Taxes and duties
|
|
||||||
|
|
||||||
**Layout:** Simple toggle + table
|
|
||||||
|
|
||||||
**Sections:**
|
|
||||||
|
|
||||||
**A. Tax Collection**
|
|
||||||
- Collect taxes (big toggle)
|
|
||||||
- Prices include tax (toggle)
|
|
||||||
- Calculate tax based on (customer address / shop address)
|
|
||||||
|
|
||||||
**B. Tax Rates** (Simple table, not WooCommerce's complex structure)
|
|
||||||
```
|
|
||||||
┌──────────────┬─────────┬────────┬─────────┐
|
|
||||||
│ Region │ Rate │ Shipping│ Actions │
|
|
||||||
├──────────────┼─────────┼────────┼─────────┤
|
|
||||||
│ Indonesia │ 11% │ ✓ │ Edit │
|
|
||||||
│ Singapore │ 9% │ ✓ │ Edit │
|
|
||||||
│ Malaysia │ 6% │ ✓ │ Edit │
|
|
||||||
└──────────────┴─────────┴────────┴─────────┘
|
|
||||||
[+ Add tax rate]
|
|
||||||
```
|
|
||||||
|
|
||||||
**C. Tax Settings**
|
|
||||||
- Show tax breakdown at checkout (toggle)
|
|
||||||
- Tax exemptions (for wholesale, etc.)
|
|
||||||
|
|
||||||
**UI/UX:**
|
|
||||||
- Auto-detect tax rates by country (suggest common rates)
|
|
||||||
- Simple table, not WooCommerce's confusing priority/compound system
|
|
||||||
- "Need help? We can set this up for you" link
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
#### 5. Checkout (`/settings/checkout`)
|
|
||||||
**Purpose:** Optimize the buying experience
|
|
||||||
**Complexity:** Low-Medium
|
|
||||||
**Estimated Time:** 4-5 hours
|
|
||||||
**Shopify Equivalent:** Settings > Checkout
|
|
||||||
|
|
||||||
**Layout:** Toggle-heavy with smart defaults
|
|
||||||
|
|
||||||
**Sections:**
|
|
||||||
|
|
||||||
**A. Customer Information**
|
|
||||||
- Company name (Show / Hide / Optional)
|
|
||||||
- Phone number (Required / Optional / Hidden)
|
|
||||||
- Address line 2 (Show / Hide)
|
|
||||||
|
|
||||||
**B. Checkout Options**
|
|
||||||
- Guest checkout (toggle - default ON)
|
|
||||||
- Account creation at checkout (toggle)
|
|
||||||
- Order notes field (toggle)
|
|
||||||
- Marketing opt-in checkbox (toggle)
|
|
||||||
|
|
||||||
**C. Order Processing**
|
|
||||||
- Terms and conditions (toggle + page selector)
|
|
||||||
- Privacy policy (toggle + page selector)
|
|
||||||
- Automatically complete orders (for digital products)
|
|
||||||
|
|
||||||
**UI/UX:**
|
|
||||||
- Live preview of checkout form
|
|
||||||
- Smart defaults (guest checkout ON, company name optional)
|
|
||||||
- "Recommended" badges on best practices
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
#### 6. Customer Accounts (`/settings/customers`)
|
|
||||||
**Purpose:** Customer login and data
|
|
||||||
**Complexity:** Low
|
|
||||||
**Estimated Time:** 3-4 hours
|
|
||||||
**Shopify Equivalent:** Settings > Customer accounts
|
|
||||||
|
|
||||||
**Layout:** Simple toggles and options
|
|
||||||
|
|
||||||
**Sections:**
|
|
||||||
|
|
||||||
**A. Account Creation**
|
|
||||||
- Customers can create accounts (toggle)
|
|
||||||
- Account creation locations:
|
|
||||||
- ☑ During checkout
|
|
||||||
- ☑ On "My Account" page
|
|
||||||
- ☐ Require accounts to purchase
|
|
||||||
|
|
||||||
**B. Login Options**
|
|
||||||
- Email or username (radio)
|
|
||||||
- Social login (future: Google, Facebook)
|
|
||||||
- Password requirements (dropdown: None / Medium / Strong)
|
|
||||||
|
|
||||||
**C. Customer Data**
|
|
||||||
- Data retention period (dropdown: Forever / 1 year / 2 years / 3 years)
|
|
||||||
- Download data retention (dropdown: Forever / 6 months / 1 year)
|
|
||||||
- Privacy policy page (page selector)
|
|
||||||
|
|
||||||
**UI/UX:**
|
|
||||||
- Clear explanations for GDPR compliance
|
|
||||||
- "Learn about data privacy" help links
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### **Phase 3: Communication & Branding (MEDIUM PRIORITY)** 🟡
|
|
||||||
|
|
||||||
#### 7. Notifications (`/settings/notifications`)
|
|
||||||
**Purpose:** Keep customers informed
|
|
||||||
**Complexity:** Medium
|
|
||||||
**Estimated Time:** 6-8 hours
|
|
||||||
**Shopify Equivalent:** Settings > Notifications
|
|
||||||
|
|
||||||
**Layout:** Email list + visual editor
|
|
||||||
|
|
||||||
**Sections:**
|
|
||||||
|
|
||||||
**A. Customer Notifications** (Card list with toggle)
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────┐
|
|
||||||
│ ● Order confirmation │
|
|
||||||
│ Sent when order is placed │
|
|
||||||
│ [Edit template] │
|
|
||||||
└─────────────────────────────────────┘
|
|
||||||
|
|
||||||
┌─────────────────────────────────────┐
|
|
||||||
│ ● Shipping confirmation │
|
|
||||||
│ Sent when order is shipped │
|
|
||||||
│ [Edit template] │
|
|
||||||
└─────────────────────────────────────┘
|
|
||||||
|
|
||||||
┌─────────────────────────────────────┐
|
|
||||||
│ ○ Order cancelled │
|
|
||||||
│ Sent when order is cancelled │
|
|
||||||
│ [Edit template] │
|
|
||||||
└─────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
**B. Admin Notifications**
|
|
||||||
- New order (toggle + recipients)
|
|
||||||
- Low stock alert (toggle + threshold)
|
|
||||||
- Failed payment (toggle)
|
|
||||||
|
|
||||||
**C. Email Settings**
|
|
||||||
- Sender name (e.g., "WooNooW Store")
|
|
||||||
- Sender email (e.g., "noreply@yourstore.com")
|
|
||||||
- Email footer text
|
|
||||||
|
|
||||||
**D. Template Editor** (Per email, modal/slide-over)
|
|
||||||
- Subject line (with variables: {{order_number}}, {{customer_name}})
|
|
||||||
- Email heading
|
|
||||||
- Body content (rich text editor)
|
|
||||||
- Live preview (desktop + mobile)
|
|
||||||
|
|
||||||
**UI/UX:**
|
|
||||||
- Visual email builder (not raw HTML)
|
|
||||||
- Variable picker (click to insert {{customer_name}})
|
|
||||||
- Send test email button
|
|
||||||
- Mobile preview
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
#### 8. Brand & Appearance (`/settings/brand`)
|
|
||||||
**Purpose:** Make it yours
|
|
||||||
**Complexity:** Low-Medium
|
|
||||||
**Estimated Time:** 4-5 hours
|
|
||||||
**Shopify Equivalent:** Settings > Brand (new in Shopify)
|
|
||||||
|
|
||||||
**Layout:** Visual, design-focused
|
|
||||||
|
|
||||||
**Sections:**
|
|
||||||
|
|
||||||
**A. Logo & Colors**
|
|
||||||
- Store logo (upload, max 500KB)
|
|
||||||
- Brand color (color picker)
|
|
||||||
- Accent color (color picker)
|
|
||||||
- _Used in: emails, invoices, admin interface_
|
|
||||||
|
|
||||||
**B. Email Design**
|
|
||||||
- Email header image (upload)
|
|
||||||
- Email background color
|
|
||||||
- Email text color
|
|
||||||
- Footer text (e.g., "© 2025 Your Store")
|
|
||||||
|
|
||||||
**C. Invoice Template**
|
|
||||||
- Invoice logo (use store logo / upload different)
|
|
||||||
- Invoice header text
|
|
||||||
- Invoice footer text
|
|
||||||
- Tax ID / Business registration number
|
|
||||||
|
|
||||||
**UI/UX:**
|
|
||||||
- Live preview of email with your branding
|
|
||||||
- Live preview of invoice
|
|
||||||
- Color picker with presets
|
|
||||||
- Image cropper for logo
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### **Phase 4: Advanced (KEEP IN WP-ADMIN)** ⚪
|
|
||||||
|
|
||||||
These settings are rarely used and can remain in wp-admin:
|
|
||||||
|
|
||||||
#### 8. Advanced Settings (Bridge)
|
|
||||||
- Page setup (cart, checkout, my account, terms)
|
|
||||||
- REST API
|
|
||||||
- Webhooks
|
|
||||||
- Legacy API
|
|
||||||
- WooCommerce.com account
|
|
||||||
|
|
||||||
#### 9. Integration Settings (Bridge)
|
|
||||||
- MaxMind Geolocation
|
|
||||||
- Other integrations
|
|
||||||
|
|
||||||
#### 10. System Status (Bridge)
|
|
||||||
- System status report
|
|
||||||
- Tools (clear cache, regenerate thumbnails, etc.)
|
|
||||||
- Logs
|
|
||||||
- Scheduled actions
|
|
||||||
|
|
||||||
#### 11. Extensions (Bridge)
|
|
||||||
- WooCommerce marketplace
|
|
||||||
- Browse extensions
|
|
||||||
- My subscriptions
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🔧 Technical Implementation
|
|
||||||
|
|
||||||
### Backend (PHP)
|
|
||||||
|
|
||||||
**Files to Create/Modify:**
|
|
||||||
1. `includes/Admin/Rest/SettingsController.php` - REST endpoints
|
|
||||||
2. `includes/Compat/SettingsProvider.php` - Settings data provider
|
|
||||||
3. `includes/Compat/NavigationRegistry.php` - ✅ Already updated
|
|
||||||
|
|
||||||
**REST Endpoints:**
|
|
||||||
```php
|
|
||||||
GET /wp-json/woonoow/v1/settings/store
|
|
||||||
POST /wp-json/woonoow/v1/settings/store
|
|
||||||
GET /wp-json/woonoow/v1/settings/payments
|
|
||||||
POST /wp-json/woonoow/v1/settings/payments
|
|
||||||
GET /wp-json/woonoow/v1/settings/shipping
|
|
||||||
POST /wp-json/woonoow/v1/settings/shipping
|
|
||||||
GET /wp-json/woonoow/v1/settings/taxes
|
|
||||||
POST /wp-json/woonoow/v1/settings/taxes
|
|
||||||
GET /wp-json/woonoow/v1/settings/checkout
|
|
||||||
POST /wp-json/woonoow/v1/settings/checkout
|
|
||||||
GET /wp-json/woonoow/v1/settings/customers
|
|
||||||
POST /wp-json/woonoow/v1/settings/customers
|
|
||||||
GET /wp-json/woonoow/v1/settings/notifications
|
|
||||||
POST /wp-json/woonoow/v1/settings/notifications
|
|
||||||
GET /wp-json/woonoow/v1/settings/brand
|
|
||||||
POST /wp-json/woonoow/v1/settings/brand
|
|
||||||
```
|
|
||||||
|
|
||||||
**Data Flow:**
|
|
||||||
1. Frontend requests settings via REST API
|
|
||||||
2. Backend reads from WooCommerce options
|
|
||||||
3. Backend returns structured JSON
|
|
||||||
4. Frontend displays in form
|
|
||||||
5. User submits changes
|
|
||||||
6. Backend validates and saves to WooCommerce options
|
|
||||||
7. Frontend shows success/error
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Frontend (React/TypeScript)
|
|
||||||
|
|
||||||
**Files to Create:**
|
|
||||||
```
|
|
||||||
admin-spa/src/routes/Settings/
|
|
||||||
├── index.tsx ✅ Done (WooNooW settings)
|
|
||||||
├── Store.tsx ⏳ Store details (Shopify-style)
|
|
||||||
├── Payments.tsx ⏳ Payment providers (card-based)
|
|
||||||
├── Shipping.tsx ⏳ Shipping zones (visual cards)
|
|
||||||
├── Taxes.tsx ⏳ Tax rates (simple table)
|
|
||||||
├── Checkout.tsx ⏳ Checkout options
|
|
||||||
├── Customers.tsx ⏳ Customer accounts
|
|
||||||
├── Notifications.tsx ⏳ Email templates
|
|
||||||
├── Brand.tsx ⏳ Branding & appearance
|
|
||||||
└── components/
|
|
||||||
├── SettingsLayout.tsx ⏳ Consistent layout wrapper
|
|
||||||
├── SettingsCard.tsx ⏳ Card component (Shopify-style)
|
|
||||||
├── SettingsSection.tsx ⏳ Section with heading
|
|
||||||
├── ToggleField.tsx ⏳ Toggle switch
|
|
||||||
├── PaymentProviderCard.tsx ⏳ Payment provider card
|
|
||||||
├── ShippingZoneCard.tsx ⏳ Shipping zone card
|
|
||||||
├── TaxRateTable.tsx ⏳ Simple tax table
|
|
||||||
├── EmailTemplateCard.tsx ⏳ Email template card
|
|
||||||
├── ColorPicker.tsx ⏳ Color picker
|
|
||||||
├── ImageUploader.tsx ⏳ Image upload
|
|
||||||
└── LivePreview.tsx ⏳ Live preview component
|
|
||||||
```
|
|
||||||
|
|
||||||
**Shared Components:**
|
|
||||||
- Form wrapper with save/cancel
|
|
||||||
- Field renderer (text, select, checkbox, radio, textarea, color, image)
|
|
||||||
- Section headers
|
|
||||||
- Help text/tooltips
|
|
||||||
- Validation messages
|
|
||||||
- Loading states
|
|
||||||
- Success/error notifications
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🎨 UI/UX Guidelines (Shopify-Inspired)
|
|
||||||
|
|
||||||
### Visual Design
|
|
||||||
- **Card-based layout** - Not boring forms
|
|
||||||
- **Generous whitespace** - Breathable, not cramped
|
|
||||||
- **Visual hierarchy** - Clear sections with icons
|
|
||||||
- **Color-coded status** - Green (active), Gray (inactive), Yellow (test mode)
|
|
||||||
- **Illustrations** - Empty states, onboarding
|
|
||||||
|
|
||||||
### Layout Patterns
|
|
||||||
- **Single-column on mobile** - Stack everything
|
|
||||||
- **Two-column on desktop** - Content + sidebar (for help/tips)
|
|
||||||
- **Sticky save bar** - Always visible at top
|
|
||||||
- **Progressive disclosure** - Show basics, hide advanced in expandable sections
|
|
||||||
|
|
||||||
### Interactive Elements
|
|
||||||
- **Big toggle switches** - Not tiny checkboxes
|
|
||||||
- **Visual cards** - Payment providers, shipping zones as cards
|
|
||||||
- **Inline editing** - Edit in place, not separate pages
|
|
||||||
- **Drag and drop** - Reorder zones, rates, emails
|
|
||||||
- **Live previews** - Currency format, email templates, invoices
|
|
||||||
|
|
||||||
### Forms & Validation
|
|
||||||
- **Smart defaults** - Pre-fill with best practices
|
|
||||||
- **Inline validation** - Real-time feedback
|
|
||||||
- **Help text everywhere** - Explain what each field does
|
|
||||||
- **Examples** - "e.g., Standard Shipping"
|
|
||||||
- **Recommended badges** - "✓ Recommended" for best practices
|
|
||||||
|
|
||||||
### Feedback & States
|
|
||||||
- **Optimistic updates** - Show change immediately, save in background
|
|
||||||
- **Toast notifications** - "Settings saved" (not alerts)
|
|
||||||
- **Loading states** - Skeleton screens, not spinners
|
|
||||||
- **Empty states** - "No payment providers yet. Add one to get started."
|
|
||||||
- **Error states** - Friendly messages with solutions
|
|
||||||
|
|
||||||
### Mobile-First
|
|
||||||
- **Touch-friendly** - 44px minimum tap targets
|
|
||||||
- **Swipe actions** - Swipe to delete/edit
|
|
||||||
- **Bottom sheets** - Modals slide from bottom on mobile
|
|
||||||
- **Responsive tables** - Stack columns on mobile
|
|
||||||
|
|
||||||
### Accessibility
|
|
||||||
- **Keyboard navigation** - Tab through everything
|
|
||||||
- **Screen reader labels** - Descriptive ARIA labels
|
|
||||||
- **Focus indicators** - Clear blue outline
|
|
||||||
- **Color contrast** - WCAG AA compliant
|
|
||||||
- **Skip links** - Skip to main content
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📝 Implementation Checklist (Shopify-Inspired)
|
|
||||||
|
|
||||||
### Phase 1: Foundation
|
|
||||||
- [ ] **Store Details** (`/settings/store`)
|
|
||||||
- [ ] Store identity section (name, emails, phone)
|
|
||||||
- [ ] Store address with autocomplete
|
|
||||||
- [ ] Currency selector with live preview
|
|
||||||
- [ ] Timezone & units
|
|
||||||
- [ ] Store type/industry
|
|
||||||
- [ ] Save/load functionality
|
|
||||||
|
|
||||||
- [ ] **Payments** (`/settings/payments`)
|
|
||||||
- [ ] Payment provider cards (visual)
|
|
||||||
- [ ] Stripe/PayPal setup wizards
|
|
||||||
- [ ] Manual methods (bank, COD, check)
|
|
||||||
- [ ] Test mode toggle with banner
|
|
||||||
- [ ] Drag-and-drop ordering
|
|
||||||
- [ ] Save/load functionality
|
|
||||||
|
|
||||||
- [ ] **Shipping & Delivery** (`/settings/shipping`)
|
|
||||||
- [ ] Shipping zone cards (visual)
|
|
||||||
- [ ] Zone editor (modal/slide-over)
|
|
||||||
- [ ] Rate configuration
|
|
||||||
- [ ] Local pickup options
|
|
||||||
- [ ] Drag-and-drop zones/rates
|
|
||||||
- [ ] Save/load functionality
|
|
||||||
|
|
||||||
### Phase 2: Customer Experience
|
|
||||||
- [ ] **Taxes** (`/settings/taxes`)
|
|
||||||
- [ ] Tax collection toggle
|
|
||||||
- [ ] Simple tax rate table
|
|
||||||
- [ ] Auto-detect common rates
|
|
||||||
|
|
||||||
- [ ] **Checkout** (`/settings/checkout`)
|
|
||||||
- [ ] Checkout field options
|
|
||||||
- [ ] Guest checkout toggle
|
|
||||||
- [ ] Terms & privacy
|
|
||||||
|
|
||||||
- [ ] **Customer Accounts** (`/settings/customers`)
|
|
||||||
- [ ] Account creation settings
|
|
||||||
- [ ] Login options
|
|
||||||
- [ ] Data retention (GDPR)
|
|
||||||
|
|
||||||
### Phase 3: Communication & Branding
|
|
||||||
- [ ] **Notifications** (`/settings/notifications`)
|
|
||||||
- [ ] Email template cards
|
|
||||||
- [ ] Visual email editor
|
|
||||||
- [ ] Variable picker
|
|
||||||
- [ ] Live preview
|
|
||||||
|
|
||||||
- [ ] **Brand & Appearance** (`/settings/brand`)
|
|
||||||
- [ ] Logo uploader
|
|
||||||
- [ ] Color pickers
|
|
||||||
- [ ] Email/invoice preview
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🧪 Testing Requirements
|
|
||||||
|
|
||||||
### Functional Testing
|
|
||||||
- [ ] All fields save correctly
|
|
||||||
- [ ] Validation works
|
|
||||||
- [ ] Default values load
|
|
||||||
- [ ] Changes persist after reload
|
|
||||||
- [ ] Bridge links work
|
|
||||||
- [ ] Mobile responsive
|
|
||||||
|
|
||||||
### Integration Testing
|
|
||||||
- [ ] WooCommerce compatibility
|
|
||||||
- [ ] 3rd party gateway support
|
|
||||||
- [ ] Plugin conflict testing
|
|
||||||
- [ ] Multi-currency support
|
|
||||||
|
|
||||||
### User Testing
|
|
||||||
- [ ] Intuitive navigation
|
|
||||||
- [ ] Clear labels
|
|
||||||
- [ ] Helpful error messages
|
|
||||||
- [ ] Fast performance
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📚 Documentation
|
|
||||||
|
|
||||||
### User Documentation
|
|
||||||
- Settings overview
|
|
||||||
- Field descriptions
|
|
||||||
- Common configurations
|
|
||||||
- Troubleshooting
|
|
||||||
|
|
||||||
### Developer Documentation
|
|
||||||
- API endpoints
|
|
||||||
- Filter hooks
|
|
||||||
- Extension points
|
|
||||||
- Code examples
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🔄 Migration Notes
|
|
||||||
|
|
||||||
**No data migration needed!**
|
|
||||||
- All settings use WooCommerce's native options
|
|
||||||
- Deactivating WooNooW restores wp-admin settings
|
|
||||||
- No data loss risk
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🎯 Success Metrics (Shopify-Inspired)
|
|
||||||
|
|
||||||
### Phase 1 Complete When:
|
|
||||||
- ✅ Store, Payments, Shipping pages functional
|
|
||||||
- ✅ Visual card-based UI (not boring forms)
|
|
||||||
- ✅ All fields save/load correctly
|
|
||||||
- ✅ Live previews working (currency, etc.)
|
|
||||||
- ✅ Mobile responsive with touch-friendly UI
|
|
||||||
- ✅ No console errors
|
|
||||||
- ✅ Feels like Shopify (fast, smooth, delightful)
|
|
||||||
|
|
||||||
### Phase 2 Complete When:
|
|
||||||
- ✅ Taxes, Checkout, Customers pages functional
|
|
||||||
- ✅ Simple tables (not WooCommerce complexity)
|
|
||||||
- ✅ All validations working
|
|
||||||
- ✅ Smart defaults applied
|
|
||||||
- ✅ Performance acceptable (<2s load)
|
|
||||||
|
|
||||||
### Phase 3 Complete When:
|
|
||||||
- ✅ Notifications, Brand pages functional
|
|
||||||
- ✅ Visual email editor working
|
|
||||||
- ✅ Live email/invoice preview
|
|
||||||
- ✅ Color pickers, image uploaders working
|
|
||||||
- ✅ Template customization working
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📅 Timeline Estimate (Shopify-Inspired Approach)
|
|
||||||
|
|
||||||
| Phase | Pages | Estimated Time | Priority |
|
|
||||||
|-------|-------|----------------|----------|
|
|
||||||
| **Phase 1: Foundation** | Store, Payments, Shipping | 18-24 hours | 🔴 HIGH |
|
|
||||||
| **Phase 2: Customer Experience** | Taxes, Checkout, Customers | 12-16 hours | 🟡 MEDIUM |
|
|
||||||
| **Phase 3: Communication & Branding** | Notifications, Brand | 10-13 hours | 🟡 MEDIUM |
|
|
||||||
| **Total** | **8 pages** | **40-53 hours** | |
|
|
||||||
|
|
||||||
**Breakdown:**
|
|
||||||
- **Store Details:** 4-6 hours (simple, but needs autocomplete & live preview)
|
|
||||||
- **Payments:** 6-8 hours (card UI, setup wizards, drag-drop)
|
|
||||||
- **Shipping:** 8-10 hours (zone cards, rate editor, complex)
|
|
||||||
- **Taxes:** 5-7 hours (simple table, auto-detect)
|
|
||||||
- **Checkout:** 4-5 hours (toggles, live preview)
|
|
||||||
- **Customers:** 3-4 hours (simple toggles)
|
|
||||||
- **Notifications:** 6-8 hours (email editor, preview)
|
|
||||||
- **Brand:** 4-5 hours (color pickers, image upload, preview)
|
|
||||||
|
|
||||||
**Note:** Times include:
|
|
||||||
- UI design (Shopify-style cards, not forms)
|
|
||||||
- Component development (reusable)
|
|
||||||
- Backend API integration
|
|
||||||
- Testing (functional + UX)
|
|
||||||
- Documentation
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🔗 Related Documents
|
|
||||||
|
|
||||||
- `PROGRESS_NOTE.md` - Development progress
|
|
||||||
- `SPA_ADMIN_MENU_PLAN.md` - Menu structure
|
|
||||||
- `PROJECT_SOP.md` - Development standards
|
|
||||||
- `STANDALONE_MODE_SUMMARY.md` - Mode documentation
|
|
||||||
- `MENU_FIX_SUMMARY.md` - Navigation fix details
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📊 WooCommerce vs WooNooW Settings Comparison
|
|
||||||
|
|
||||||
| Aspect | WooCommerce | WooNooW (Shopify-Inspired) |
|
|
||||||
|--------|-------------|----------------------------|
|
|
||||||
| **Layout** | Tabs within tabs | Single pages with cards |
|
|
||||||
| **Navigation** | Confusing hierarchy | Flat, clear menu |
|
|
||||||
| **Forms** | Dense, technical | Spacious, visual |
|
|
||||||
| **Payment Setup** | Raw API keys | Setup wizards |
|
|
||||||
| **Shipping** | Complex table | Visual zone cards |
|
|
||||||
| **Taxes** | Priority/compound system | Simple rate table |
|
|
||||||
| **Emails** | HTML code editor | Visual template builder |
|
|
||||||
| **Branding** | Scattered settings | Dedicated Brand page |
|
|
||||||
| **Mobile** | Not optimized | Touch-friendly |
|
|
||||||
| **Help** | External docs | Inline help everywhere |
|
|
||||||
| **Defaults** | Empty/technical | Smart, business-focused |
|
|
||||||
| **Feel** | Admin panel | Modern SaaS app |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 💡 Key Design Decisions
|
|
||||||
|
|
||||||
### 1. **Store Details Instead of General**
|
|
||||||
- **Why:** "General" is vague. "Store Details" is clear and action-oriented.
|
|
||||||
- **Benefit:** Merchants know exactly what to expect.
|
|
||||||
|
|
||||||
### 2. **Card-Based Payment Providers**
|
|
||||||
- **Why:** Visual cards are more engaging than table rows.
|
|
||||||
- **Benefit:** Easier to scan, understand status at a glance.
|
|
||||||
|
|
||||||
### 3. **Shipping Zones as Cards**
|
|
||||||
- **Why:** WooCommerce's table is overwhelming.
|
|
||||||
- **Benefit:** Visual hierarchy, easier to manage multiple zones.
|
|
||||||
|
|
||||||
### 4. **Simple Tax Table**
|
|
||||||
- **Why:** WooCommerce's priority/compound system confuses users.
|
|
||||||
- **Benefit:** 90% of stores just need region + rate.
|
|
||||||
|
|
||||||
### 5. **Separate Checkout & Customer Pages**
|
|
||||||
- **Why:** WooCommerce lumps them together.
|
|
||||||
- **Benefit:** Clearer separation of concerns.
|
|
||||||
|
|
||||||
### 6. **Notifications Instead of Emails**
|
|
||||||
- **Why:** "Notifications" is more modern and broader (future: SMS, push).
|
|
||||||
- **Benefit:** Future-proof naming.
|
|
||||||
|
|
||||||
### 7. **Brand & Appearance Page**
|
|
||||||
- **Why:** Shopify's newest addition, highly requested.
|
|
||||||
- **Benefit:** One place for all branding (logo, colors, templates).
|
|
||||||
|
|
||||||
### 8. **Progressive Disclosure**
|
|
||||||
- **Why:** Don't overwhelm with all options at once.
|
|
||||||
- **Benefit:** Show basics, hide advanced in expandable sections.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🚀 Implementation Strategy
|
|
||||||
|
|
||||||
### Week 1-2: Foundation (Phase 1)
|
|
||||||
1. **Store Details** - Get the basics right
|
|
||||||
2. **Payments** - Critical for business
|
|
||||||
3. **Shipping** - Most complex, tackle early
|
|
||||||
|
|
||||||
### Week 3: Customer Experience (Phase 2)
|
|
||||||
4. **Taxes** - Simpler than WooCommerce
|
|
||||||
5. **Checkout** - Quick wins with toggles
|
|
||||||
6. **Customers** - Simple settings
|
|
||||||
|
|
||||||
### Week 4: Polish (Phase 3)
|
|
||||||
7. **Notifications** - Email templates
|
|
||||||
8. **Brand** - Visual polish
|
|
||||||
|
|
||||||
### Ongoing: Iteration
|
|
||||||
- User feedback
|
|
||||||
- Performance optimization
|
|
||||||
- Mobile refinement
|
|
||||||
- Accessibility audit
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Last Updated:** November 5, 2025
|
|
||||||
**Status:** 📋 Planning Complete - Shopify-Inspired Approach Adopted
|
|
||||||
**Strategy:** Store-first, visual, simple, fast
|
|
||||||
**Next Step:** Implement Phase 1 - Store Details page
|
|
||||||
**Estimated Total:** 40-53 hours for all 8 pages
|
|
||||||
@@ -1,253 +0,0 @@
|
|||||||
# WooNooW — Single Source of Truth for WooCommerce Admin Menus → SPA Routes
|
|
||||||
|
|
||||||
This document enumerates the **default WooCommerce admin menus & submenus** (no add‑ons) and defines how each maps to our **SPA routes**. It is the canonical reference for nav generation and routing.
|
|
||||||
|
|
||||||
> Scope: WordPress **wp‑admin** defaults from WooCommerce core and WooCommerce Admin (Analytics/Marketing). Add‑ons will be collected dynamically at runtime and handled separately.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Legend
|
|
||||||
- **WP Admin**: the native admin path/slug WooCommerce registers
|
|
||||||
- **Purpose**: what the screen is about
|
|
||||||
- **SPA Route**: our hash route (admin‑spa), used by nav + router
|
|
||||||
- **Status**:
|
|
||||||
- **SPA** = fully replaced by a native SPA view
|
|
||||||
- **Bridge** = temporarily rendered in a legacy bridge (iframe) inside SPA
|
|
||||||
- **Planned** = route reserved, SPA view pending
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Top‑level: WooCommerce (`woocommerce`)
|
|
||||||
|
|
||||||
| Menu | WP Admin | Purpose | SPA Route | Status |
|
|
||||||
|---|---|---|---|---|
|
|
||||||
| Home | `admin.php?page=wc-admin` | WC Admin home / activity | `/home` | Bridge (for now) |
|
|
||||||
| Orders | `edit.php?post_type=shop_order` | Order list & management | `/orders` | **SPA** |
|
|
||||||
| Add Order | `post-new.php?post_type=shop_order` | Create order | `/orders/new` | **SPA** |
|
|
||||||
| Customers | `admin.php?page=wc-admin&path=/customers` | Customer index | `/customers` | Planned |
|
|
||||||
| Coupons | `edit.php?post_type=shop_coupon` | Coupon list | `/coupons` | Planned |
|
|
||||||
| Settings | `admin.php?page=wc-settings` | Store settings (tabs) | `/settings` | Bridge (tabbed) |
|
|
||||||
| Status | `admin.php?page=wc-status` | System status/tools | `/status` | Bridge |
|
|
||||||
| Extensions | `admin.php?page=wc-addons` | Marketplace | `/extensions` | Bridge |
|
|
||||||
|
|
||||||
> Notes
|
|
||||||
> - “Add Order” does not always appear as a submenu in all installs, but we expose `/orders/new` explicitly in SPA.
|
|
||||||
> - Some sites show **Reports** (classic) if WooCommerce Admin is disabled; we route that under `/reports` (Bridge) if present.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Top‑level: Products (`edit.php?post_type=product`)
|
|
||||||
|
|
||||||
| Menu | WP Admin | Purpose | SPA Route | Status |
|
|
||||||
|---|---|---|---|---|
|
|
||||||
| All Products | `edit.php?post_type=product` | Product catalog | `/products` | Planned |
|
|
||||||
| Add New | `post-new.php?post_type=product` | Create product | `/products/new` | Planned |
|
|
||||||
| Categories | `edit-tags.php?taxonomy=product_cat&post_type=product` | Category mgmt | `/products/categories` | Planned |
|
|
||||||
| Tags | `edit-tags.php?taxonomy=product_tag&post_type=product` | Tag mgmt | `/products/tags` | Planned |
|
|
||||||
| Attributes | `edit.php?post_type=product&page=product_attributes` | Attributes mgmt | `/products/attributes` | Planned |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Top‑level: Analytics (`admin.php?page=wc-admin&path=/analytics/overview`)
|
|
||||||
|
|
||||||
| Menu | WP Admin | Purpose | SPA Route | Status |
|
|
||||||
|---|---|---|---|---|
|
|
||||||
| Overview | `admin.php?page=wc-admin&path=/analytics/overview` | KPIs dashboard | `/analytics/overview` | Bridge |
|
|
||||||
| Revenue | `admin.php?page=wc-admin&path=/analytics/revenue` | Revenue report | `/analytics/revenue` | Bridge |
|
|
||||||
| Orders | `admin.php?page=wc-admin&path=/analytics/orders` | Orders report | `/analytics/orders` | Bridge |
|
|
||||||
| Products | `admin.php?page=wc-admin&path=/analytics/products` | Products report | `/analytics/products` | Bridge |
|
|
||||||
| Categories | `admin.php?page=wc-admin&path=/analytics/categories` | Categories report | `/analytics/categories` | Bridge |
|
|
||||||
| Coupons | `admin.php?page=wc-admin&path=/analytics/coupons` | Coupons report | `/analytics/coupons` | Bridge |
|
|
||||||
| Taxes | `admin.php?page=wc-admin&path=/analytics/taxes` | Taxes report | `/analytics/taxes` | Bridge |
|
|
||||||
| Downloads | `admin.php?page=wc-admin&path=/analytics/downloads` | Downloads report | `/analytics/downloads` | Bridge |
|
|
||||||
| Stock | `admin.php?page=wc-admin&path=/analytics/stock` | Stock report | `/analytics/stock` | Bridge |
|
|
||||||
| Settings | `admin.php?page=wc-admin&path=/analytics/settings` | Analytics settings | `/analytics/settings` | Bridge |
|
|
||||||
|
|
||||||
> Analytics entries are provided by **WooCommerce Admin**. We keep them accessible via a **Bridge** until replaced.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Top‑level: Marketing (`admin.php?page=wc-admin&path=/marketing`)
|
|
||||||
|
|
||||||
| Menu | WP Admin | Purpose | SPA Route | Status |
|
|
||||||
|---|---|---|---|---|
|
|
||||||
| Hub | `admin.php?page=wc-admin&path=/marketing` | Marketing hub | `/marketing` | Bridge |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Cross‑reference for routing
|
|
||||||
When our SPA receives a `wp-admin` URL, map using these regex rules first; if no match, fall back to Legacy Bridge:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
// Admin URL → SPA route mapping
|
|
||||||
export const WC_ADMIN_ROUTE_MAP: Array<[RegExp, string]> = [
|
|
||||||
[/edit\.php\?post_type=shop_order/i, '/orders'],
|
|
||||||
[/post-new\.php\?post_type=shop_order/i, '/orders/new'],
|
|
||||||
[/edit\.php\?post_type=product/i, '/products'],
|
|
||||||
[/post-new\.php\?post_type=product/i, '/products/new'],
|
|
||||||
[/edit-tags\.php\?taxonomy=product_cat/i, '/products/categories'],
|
|
||||||
[/edit-tags\.php\?taxonomy=product_tag/i, '/products/tags'],
|
|
||||||
[/product_attributes/i, '/products/attributes'],
|
|
||||||
[/wc-admin.*path=%2Fcustomers/i, '/customers'],
|
|
||||||
[/wc-admin.*path=%2Fanalytics%2Foverview/i, '/analytics/overview'],
|
|
||||||
[/wc-admin.*path=%2Fanalytics%2Frevenue/i, '/analytics/revenue'],
|
|
||||||
[/wc-admin.*path=%2Fanalytics%2Forders/i, '/analytics/orders'],
|
|
||||||
[/wc-admin.*path=%2Fanalytics%2Fproducts/i, '/analytics/products'],
|
|
||||||
[/wc-admin.*path=%2Fanalytics%2Fcategories/i, '/analytics/categories'],
|
|
||||||
[/wc-admin.*path=%2Fanalytics%2Fcoupons/i, '/analytics/coupons'],
|
|
||||||
[/wc-admin.*path=%2Fanalytics%2Ftaxes/i, '/analytics/taxes'],
|
|
||||||
[/wc-admin.*path=%2Fanalytics%2Fdownloads/i, '/analytics/downloads'],
|
|
||||||
[/wc-admin.*path=%2Fanalytics%2Fstock/i, '/analytics/stock'],
|
|
||||||
[/wc-admin.*path=%2Fanalytics%2Fsettings/i, '/analytics/settings'],
|
|
||||||
[/wc-admin.*page=wc-settings/i, '/settings'],
|
|
||||||
[/wc-status/i, '/status'],
|
|
||||||
[/wc-addons/i, '/extensions'],
|
|
||||||
];
|
|
||||||
```
|
|
||||||
|
|
||||||
> Keep this map in sync with the SPA routers. New SPA screens should switch a route’s **Status** from Bridge → SPA.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Implementation notes
|
|
||||||
- **Nav Data**: The runtime menu collector already injects `window.WNM_WC_MENUS`. Use this file as the *static* canonical mapping and the collector data as the *dynamic* source for what exists in a given site.
|
|
||||||
- **Hidden WP‑Admin**: wp‑admin menus will be hidden in final builds; all entries must be reachable via SPA.
|
|
||||||
- **Capabilities**: Respect `capability` from WP when we later enforce per‑user visibility. For now, the collector includes only titles/links.
|
|
||||||
- **Customers & Coupons**: Some installs place these differently. Our SPA routes should remain stable; mapping rules above handle variants.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
|
|
||||||
## Current SPA coverage (at a glance)
|
|
||||||
- **Orders** (list/new/edit/show) → SPA ✅
|
|
||||||
- **Products** (catalog/new/attributes/categories/tags) → Planned
|
|
||||||
- **Customers, Coupons, Analytics, Marketing, Settings, Status, Extensions** → Bridge → SPA gradually
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Visual Menu Tree (Default WooCommerce Admin)
|
|
||||||
|
|
||||||
This tree mirrors what appears in the WordPress admin sidebar for a default WooCommerce installation — excluding add‑ons.
|
|
||||||
|
|
||||||
```text
|
|
||||||
WooCommerce
|
|
||||||
├── Home (wc-admin)
|
|
||||||
├── Orders
|
|
||||||
│ ├── All Orders
|
|
||||||
│ └── Add Order
|
|
||||||
├── Customers
|
|
||||||
├── Coupons
|
|
||||||
├── Reports (deprecated classic) [may not appear if WC Admin enabled]
|
|
||||||
├── Settings
|
|
||||||
│ ├── General
|
|
||||||
│ ├── Products
|
|
||||||
│ ├── Tax
|
|
||||||
│ ├── Shipping
|
|
||||||
│ ├── Payments
|
|
||||||
│ ├── Accounts & Privacy
|
|
||||||
│ ├── Emails
|
|
||||||
│ ├── Integration
|
|
||||||
│ └── Advanced
|
|
||||||
├── Status
|
|
||||||
│ ├── System Status
|
|
||||||
│ ├── Tools
|
|
||||||
│ ├── Logs
|
|
||||||
│ └── Scheduled Actions
|
|
||||||
└── Extensions
|
|
||||||
|
|
||||||
Products
|
|
||||||
├── All Products
|
|
||||||
├── Add New
|
|
||||||
├── Categories
|
|
||||||
├── Tags
|
|
||||||
└── Attributes
|
|
||||||
|
|
||||||
Analytics (WooCommerce Admin)
|
|
||||||
├── Overview
|
|
||||||
├── Revenue
|
|
||||||
├── Orders
|
|
||||||
├── Products
|
|
||||||
├── Categories
|
|
||||||
├── Coupons
|
|
||||||
├── Taxes
|
|
||||||
├── Downloads
|
|
||||||
├── Stock
|
|
||||||
└── Settings
|
|
||||||
|
|
||||||
Marketing
|
|
||||||
└── Hub
|
|
||||||
```
|
|
||||||
|
|
||||||
> Use this as a structural reference for navigation hierarchy when rendering nested navs in SPA (e.g., hover or sidebar expansion).
|
|
||||||
|
|
||||||
|
|
||||||
## Proposed SPA Main Menu (Authoritative)
|
|
||||||
This replaces wp‑admin's structure with a focused SPA hierarchy. Analytics & Marketing are folded into **Dashboard**. **Status** and **Extensions** live under **Settings**.
|
|
||||||
|
|
||||||
**Note:** Settings submenu is **only visible in Standalone Mode** (`/admin`). In normal wp-admin mode, users access WooCommerce settings through the standard WordPress admin interface.
|
|
||||||
|
|
||||||
```text
|
|
||||||
Dashboard
|
|
||||||
├── Overview (/dashboard) ← default landing
|
|
||||||
├── Revenue (/dashboard/revenue)
|
|
||||||
├── Orders (/dashboard/orders)
|
|
||||||
├── Products (/dashboard/products)
|
|
||||||
├── Categories (/dashboard/categories)
|
|
||||||
├── Coupons (/dashboard/coupons)
|
|
||||||
├── Taxes (/dashboard/taxes)
|
|
||||||
├── Downloads (/dashboard/downloads)
|
|
||||||
└── Stock (/dashboard/stock)
|
|
||||||
|
|
||||||
Orders
|
|
||||||
├── All Orders (/orders)
|
|
||||||
└── Add Order (/orders/new)
|
|
||||||
|
|
||||||
Products
|
|
||||||
├── All Products (/products)
|
|
||||||
├── Add New (/products/new)
|
|
||||||
├── Categories (/products/categories)
|
|
||||||
├── Tags (/products/tags)
|
|
||||||
└── Attributes (/products/attributes)
|
|
||||||
|
|
||||||
Coupons
|
|
||||||
└── All Coupons (/coupons)
|
|
||||||
|
|
||||||
Customers
|
|
||||||
└── All Customers (/customers)
|
|
||||||
(Customers are derived from orders + user profiles; non‑buyers are excluded by default.)
|
|
||||||
|
|
||||||
Settings (Standalone Mode Only)
|
|
||||||
├── WooNooW (/settings) ← plugin settings
|
|
||||||
├── General (/settings/general) ← SPA
|
|
||||||
├── Payments (/settings/payments) ← SPA
|
|
||||||
├── Shipping (/settings/shipping) ← SPA
|
|
||||||
├── Products (/settings/products) ← SPA
|
|
||||||
├── Tax (/settings/tax) ← SPA
|
|
||||||
├── Accounts & Privacy (/settings/accounts) ← SPA
|
|
||||||
├── Emails (/settings/emails) ← SPA
|
|
||||||
├── Advanced (bridge to wp-admin) ← Bridge
|
|
||||||
├── Integration (bridge to wp-admin) ← Bridge
|
|
||||||
├── Status (bridge to wp-admin) ← Bridge
|
|
||||||
└── Extensions (bridge to wp-admin) ← Bridge
|
|
||||||
```
|
|
||||||
|
|
||||||
### Routing notes
|
|
||||||
- **Dashboard** subsumes Analytics & (most) Marketing metrics. Each item maps to a SPA page. Until built, these can open a Legacy Bridge view of the corresponding wc‑admin screen.
|
|
||||||
- **Status** and **Extensions** are still reachable (now under Settings) and can bridge to `wc-status` and `wc-addons` until replaced.
|
|
||||||
- Existing map (`WC_ADMIN_ROUTE_MAP`) remains, but should redirect legacy URLs to the new SPA paths above.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### What is “Marketing / Hub” in WooCommerce?
|
|
||||||
The **Marketing** (Hub) screen is part of **WooCommerce Admin**. It aggregates recommended extensions and campaign tools (e.g., MailPoet, Facebook/Google listings, coupon promos). It’s not essential for day‑to‑day store ops. In WooNooW we fold campaign performance into **Dashboard** metrics; the extension browsing/management aspect is covered under **Settings → Extensions** (Bridge until native UI exists).
|
|
||||||
|
|
||||||
### Customers in SPA
|
|
||||||
WooCommerce’s wc‑admin provides a Customers table; classic wp‑admin does not. Our SPA’s **Customers** pulls from **orders** + **user profiles** to show buyers. Non‑buyers are excluded by default (configurable later). Route: `/customers`.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Action items
|
|
||||||
- [ ] Update quick‑nav to use this SPA menu tree for top‑level buttons.
|
|
||||||
- [ ] Extend `WC_ADMIN_ROUTE_MAP` to point legacy analytics URLs to the new `/dashboard/*` paths.
|
|
||||||
- [ ] Implement `/dashboard/*` pages incrementally; use Legacy Bridge where needed.
|
|
||||||
- [ ] Keep `window.WNM_WC_MENUS` for add‑on items (dynamic), nesting them under **Settings** or **Dashboard** as appropriate.
|
|
||||||
@@ -1,135 +0,0 @@
|
|||||||
# 🚀 Standalone Admin Setup Instructions
|
|
||||||
|
|
||||||
## ✅ What's Implemented
|
|
||||||
|
|
||||||
1. **Dashboard menu stays active** on all dashboard routes (Revenue, Orders, Products, etc.)
|
|
||||||
2. **Mobile topbar blur removed** - solid background on mobile for better readability
|
|
||||||
3. **Standalone admin system** ready at `/admin` path
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📝 Required: Add Rewrite Rule
|
|
||||||
|
|
||||||
WordPress redirects `/admin` to `/wp-admin` by default. To enable standalone admin, add this to your **WordPress root `.htaccess`** file:
|
|
||||||
|
|
||||||
### Location
|
|
||||||
`/Users/dwindown/Local Sites/woonoow/app/public/.htaccess`
|
|
||||||
|
|
||||||
### Add BEFORE the WordPress rules
|
|
||||||
|
|
||||||
```apache
|
|
||||||
# BEGIN WooNooW Standalone Admin
|
|
||||||
<IfModule mod_rewrite.c>
|
|
||||||
RewriteEngine On
|
|
||||||
RewriteRule ^admin(/.*)?$ wp-content/plugins/woonoow/admin/index.php [L,QSA]
|
|
||||||
</IfModule>
|
|
||||||
# END WooNooW Standalone Admin
|
|
||||||
|
|
||||||
# BEGIN WordPress
|
|
||||||
# ... existing WordPress rules ...
|
|
||||||
```
|
|
||||||
|
|
||||||
### Full Example
|
|
||||||
|
|
||||||
```apache
|
|
||||||
# BEGIN WooNooW Standalone Admin
|
|
||||||
<IfModule mod_rewrite.c>
|
|
||||||
RewriteEngine On
|
|
||||||
RewriteRule ^admin(/.*)?$ wp-content/plugins/woonoow/admin/index.php [L,QSA]
|
|
||||||
</IfModule>
|
|
||||||
# END WooNooW Standalone Admin
|
|
||||||
|
|
||||||
# BEGIN WordPress
|
|
||||||
<IfModule mod_rewrite.c>
|
|
||||||
RewriteEngine On
|
|
||||||
RewriteBase /
|
|
||||||
RewriteRule ^index\.php$ - [L]
|
|
||||||
RewriteCond %{REQUEST_FILENAME} !-f
|
|
||||||
RewriteCond %{REQUEST_FILENAME} !-d
|
|
||||||
RewriteRule . /index.php [L]
|
|
||||||
</IfModule>
|
|
||||||
# END WordPress
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🧪 Testing
|
|
||||||
|
|
||||||
After adding the rewrite rule:
|
|
||||||
|
|
||||||
1. **Test standalone admin:**
|
|
||||||
- Visit: `https://woonoow.local/admin`
|
|
||||||
- Should show WooNooW login page (if not logged in)
|
|
||||||
- Should show dashboard (if logged in)
|
|
||||||
|
|
||||||
2. **Test wp-admin still works:**
|
|
||||||
- Visit: `https://woonoow.local/wp-admin/admin.php?page=woonoow`
|
|
||||||
- Should work normally
|
|
||||||
|
|
||||||
3. **Test dashboard menu:**
|
|
||||||
- Click Dashboard → Revenue
|
|
||||||
- Dashboard menu should stay highlighted
|
|
||||||
- Click Dashboard → Orders
|
|
||||||
- Dashboard menu should still be highlighted
|
|
||||||
|
|
||||||
4. **Test mobile view:**
|
|
||||||
- Open mobile view (or resize browser)
|
|
||||||
- Top navigation bar should be solid (not blurry)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🎯 What's Different
|
|
||||||
|
|
||||||
### Standalone Mode (`/admin`)
|
|
||||||
- ✅ No WordPress admin UI
|
|
||||||
- ✅ No theme CSS/JS
|
|
||||||
- ✅ No plugin scripts
|
|
||||||
- ✅ 10x smaller (~50KB vs ~500KB)
|
|
||||||
- ✅ 3-5x faster load time
|
|
||||||
- ✅ Custom login page
|
|
||||||
- ✅ App-like experience
|
|
||||||
|
|
||||||
### WP-Admin Mode (`/wp-admin?page=woonoow`)
|
|
||||||
- ✅ Full WordPress admin
|
|
||||||
- ✅ Access to other plugins
|
|
||||||
- ✅ WordPress menu bar
|
|
||||||
- ✅ Compatible with all plugins
|
|
||||||
- ✅ Familiar interface
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📊 Performance Comparison
|
|
||||||
|
|
||||||
| Metric | wp-admin | /admin | Improvement |
|
|
||||||
|--------|----------|--------|-------------|
|
|
||||||
| Initial Load | ~500KB | ~50KB | **10x smaller** |
|
|
||||||
| Load Time | ~2s | ~0.5s | **4x faster** |
|
|
||||||
| Scripts | 20+ files | 2 files | **10x fewer** |
|
|
||||||
| WordPress UI | Yes | No | **Cleaner** |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🔧 Files Modified
|
|
||||||
|
|
||||||
1. **App.tsx** - Dashboard menu now uses `ActiveNavLink` with `startsWith="/dashboard"`
|
|
||||||
2. **App.tsx** - Mobile topbar blur removed (`bg-background` on mobile, blur only on desktop)
|
|
||||||
3. **AuthController.php** - Login/logout/check endpoints
|
|
||||||
4. **admin/index.php** - Standalone entry point
|
|
||||||
5. **Login.tsx** - SPA login page
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## ✅ Summary
|
|
||||||
|
|
||||||
**Issue 1:** Dashboard menu active state ✅ FIXED
|
|
||||||
- Used existing `ActiveNavLink` pattern with `startsWith="/dashboard"`
|
|
||||||
|
|
||||||
**Issue 2:** Mobile topbar blur ✅ FIXED
|
|
||||||
- Removed blur on mobile, kept on desktop for glassmorphism effect
|
|
||||||
|
|
||||||
**Issue 3:** `/admin` redirects to `/wp-admin` ⚠️ NEEDS SETUP
|
|
||||||
- Add rewrite rule to WordPress root `.htaccess` (see above)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Next:** Add the rewrite rule and test!
|
|
||||||
@@ -1,235 +0,0 @@
|
|||||||
# 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
|
|
||||||
130
TASKS_SUMMARY.md
Normal file
130
TASKS_SUMMARY.md
Normal file
@@ -0,0 +1,130 @@
|
|||||||
|
# Tasks Summary - November 11, 2025
|
||||||
|
|
||||||
|
## ✅ Task 1: Translation Support Audit
|
||||||
|
|
||||||
|
### Status: COMPLETED ✓
|
||||||
|
|
||||||
|
**Findings:**
|
||||||
|
- Most settings pages already have `__` translation function imported
|
||||||
|
- **Missing translation support:**
|
||||||
|
- `Store.tsx` - Needs `__` import and string wrapping
|
||||||
|
- `Payments.tsx` - Needs `__` import and string wrapping
|
||||||
|
- `Developer.tsx` - Needs `__` import and string wrapping
|
||||||
|
|
||||||
|
**Action Required:**
|
||||||
|
Add translation support to these 3 files (can be done during next iteration)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ Task 2: Documentation Audit
|
||||||
|
|
||||||
|
### Status: COMPLETED ✓
|
||||||
|
|
||||||
|
**Actions Taken:**
|
||||||
|
1. ✅ Created `DOCS_AUDIT_REPORT.md` - Comprehensive audit of all 36 MD files
|
||||||
|
2. ✅ Deleted 12 obsolete documents:
|
||||||
|
- CUSTOMER_SETTINGS_404_FIX.md
|
||||||
|
- MENU_FIX_SUMMARY.md
|
||||||
|
- DASHBOARD_TWEAKS_TODO.md
|
||||||
|
- DASHBOARD_PLAN.md
|
||||||
|
- SPA_ADMIN_MENU_PLAN.md
|
||||||
|
- STANDALONE_ADMIN_SETUP.md
|
||||||
|
- STANDALONE_MODE_SUMMARY.md
|
||||||
|
- SETTINGS_PAGES_PLAN.md
|
||||||
|
- SETTINGS_PAGES_PLAN_V2.md
|
||||||
|
- SETTINGS_TREE_PLAN.md
|
||||||
|
- SETTINGS_PLACEMENT_STRATEGY.md
|
||||||
|
- TAX_NOTIFICATIONS_PLAN.md
|
||||||
|
|
||||||
|
**Result:**
|
||||||
|
- Reduced from 36 to 24 documents (33% reduction)
|
||||||
|
- Clearer focus on active development
|
||||||
|
- Easier navigation for developers
|
||||||
|
|
||||||
|
**Remaining Documents:**
|
||||||
|
- 15 essential docs (keep as-is)
|
||||||
|
- 9 docs to consolidate later (low priority)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚧 Task 3: Notification Settings Implementation
|
||||||
|
|
||||||
|
### Status: IN PROGRESS
|
||||||
|
|
||||||
|
**Plan:** Follow NOTIFICATION_STRATEGY.md
|
||||||
|
|
||||||
|
### Phase 1: Core Framework (Current)
|
||||||
|
1. **Backend (PHP)**
|
||||||
|
- [ ] Create `NotificationManager` class
|
||||||
|
- [ ] Create `EmailChannel` class (built-in)
|
||||||
|
- [ ] Create notification events registry
|
||||||
|
- [ ] Create REST API endpoints
|
||||||
|
- [ ] Add hooks for addon integration
|
||||||
|
|
||||||
|
2. **Frontend (React)**
|
||||||
|
- [ ] Update `Notifications.tsx` settings page
|
||||||
|
- [ ] Create channel cards UI
|
||||||
|
- [ ] Create event configuration UI
|
||||||
|
- [ ] Add channel toggle/enable functionality
|
||||||
|
- [ ] Add template editor (email)
|
||||||
|
|
||||||
|
3. **Database**
|
||||||
|
- [ ] Notification events table (optional)
|
||||||
|
- [ ] Use wp_options for settings
|
||||||
|
- [ ] Channel configurations
|
||||||
|
|
||||||
|
### Implementation Steps
|
||||||
|
|
||||||
|
#### Step 1: Backend Core
|
||||||
|
```
|
||||||
|
includes/Core/Notifications/
|
||||||
|
├── NotificationManager.php # Main manager
|
||||||
|
├── NotificationEvent.php # Event class
|
||||||
|
├── Channels/
|
||||||
|
│ └── EmailChannel.php # Built-in email
|
||||||
|
└── NotificationSettingsProvider.php # Settings CRUD
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Step 2: REST API
|
||||||
|
```
|
||||||
|
includes/Api/NotificationsController.php
|
||||||
|
- GET /notifications/channels # List available channels
|
||||||
|
- GET /notifications/events # List notification events
|
||||||
|
- GET /notifications/settings # Get all settings
|
||||||
|
- POST /notifications/settings # Save settings
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Step 3: Frontend UI
|
||||||
|
```
|
||||||
|
admin-spa/src/routes/Settings/Notifications.tsx
|
||||||
|
- Channel cards (email + addon channels)
|
||||||
|
- Event configuration per category
|
||||||
|
- Toggle channels per event
|
||||||
|
- Recipient selection (admin/customer/both)
|
||||||
|
```
|
||||||
|
|
||||||
|
### Key Features
|
||||||
|
- ✅ Email channel built-in
|
||||||
|
- ✅ Addon integration via hooks
|
||||||
|
- ✅ Per-event channel selection
|
||||||
|
- ✅ Recipient targeting
|
||||||
|
- ✅ Template system ready
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Next Actions
|
||||||
|
|
||||||
|
### Immediate
|
||||||
|
1. ✅ Commit documentation cleanup
|
||||||
|
2. 🚧 Start notification system implementation
|
||||||
|
3. ⏳ Add translation to Store/Payments/Developer pages
|
||||||
|
|
||||||
|
### This Session
|
||||||
|
- Implement notification core framework
|
||||||
|
- Create REST API endpoints
|
||||||
|
- Build basic UI for notification settings
|
||||||
|
|
||||||
|
### Future
|
||||||
|
- Build Telegram addon as proof of concept
|
||||||
|
- Create addon development template
|
||||||
|
- Document notification addon API
|
||||||
@@ -1,106 +0,0 @@
|
|||||||
# Tax & Notifications Implementation Plan
|
|
||||||
|
|
||||||
## Philosophy: 80/20 Rule - Real Value, Not Menu-ing
|
|
||||||
|
|
||||||
WooNooW provides elegant UX for 80% of daily use cases.
|
|
||||||
The 20% advanced/rare features stay in WooCommerce.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Tax Settings - What to Build
|
|
||||||
|
|
||||||
### Core Features (80% use cases):
|
|
||||||
|
|
||||||
1. **Enable/Disable Tax Calculation**
|
|
||||||
- Simple toggle
|
|
||||||
- Clear explanation
|
|
||||||
|
|
||||||
2. **Tax Rates by Country/State**
|
|
||||||
- Add/Edit/Delete tax rates
|
|
||||||
- Country selector
|
|
||||||
- State selector (for countries with states)
|
|
||||||
- Rate percentage input
|
|
||||||
- Tax class selector (Standard, Reduced, Zero)
|
|
||||||
|
|
||||||
3. **Prices Include Tax Toggle**
|
|
||||||
- "Prices entered with tax" vs "without tax"
|
|
||||||
- Clear explanation
|
|
||||||
|
|
||||||
4. **Display Settings**
|
|
||||||
- Show prices in shop: including/excluding tax
|
|
||||||
- Show prices in cart: including/excluding tax
|
|
||||||
- Display suffix (e.g., "incl. VAT")
|
|
||||||
|
|
||||||
### Advanced Features (Link to WooCommerce):
|
|
||||||
|
|
||||||
- Complex tax classes (rare)
|
|
||||||
- Compound taxes (rare)
|
|
||||||
- Tax based on shipping vs billing (advanced)
|
|
||||||
- Custom tax tables (very rare)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Notifications Settings - What to Build
|
|
||||||
|
|
||||||
### Core Features (80% use cases):
|
|
||||||
|
|
||||||
1. **Email Enable/Disable**
|
|
||||||
- Toggle for each email type
|
|
||||||
- Already implemented ✅
|
|
||||||
|
|
||||||
2. **Edit Email Subjects**
|
|
||||||
- Inline editing of subject lines
|
|
||||||
- Variables support ({order_number}, {site_title})
|
|
||||||
|
|
||||||
3. **Sender Configuration**
|
|
||||||
- "From" name
|
|
||||||
- "From" email address
|
|
||||||
|
|
||||||
4. **Email Preview**
|
|
||||||
- Preview button for each email
|
|
||||||
- Opens WooCommerce preview
|
|
||||||
|
|
||||||
### Advanced Features (Link to WooCommerce):
|
|
||||||
|
|
||||||
- Full HTML template editing (advanced)
|
|
||||||
- Custom email templates (developer)
|
|
||||||
- Header/footer customization (advanced)
|
|
||||||
- Additional recipients (rare)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Implementation Priority
|
|
||||||
|
|
||||||
### Phase 1: Tax Rates (High Impact)
|
|
||||||
1. Backend: Tax rates CRUD API
|
|
||||||
2. Frontend: Tax rates list + Add/Edit dialog
|
|
||||||
3. Frontend: Enable/disable toggle
|
|
||||||
4. Frontend: Prices include tax toggle
|
|
||||||
|
|
||||||
### Phase 2: Email Subjects (High Impact)
|
|
||||||
1. Backend: Get/update email settings API
|
|
||||||
2. Frontend: Sender name/email inputs
|
|
||||||
3. Frontend: Inline subject editing
|
|
||||||
4. Frontend: Preview links
|
|
||||||
|
|
||||||
### Phase 3: Tax Display Settings (Medium Impact)
|
|
||||||
1. Frontend: Display settings card
|
|
||||||
2. Backend: Save display preferences
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## API Endpoints Needed
|
|
||||||
|
|
||||||
### Tax:
|
|
||||||
- GET /settings/tax/rates
|
|
||||||
- POST /settings/tax/rates
|
|
||||||
- PUT /settings/tax/rates/{id}
|
|
||||||
- DELETE /settings/tax/rates/{id}
|
|
||||||
- GET /settings/tax/config
|
|
||||||
- POST /settings/tax/config
|
|
||||||
|
|
||||||
### Notifications:
|
|
||||||
- GET /settings/notifications/emails
|
|
||||||
- POST /settings/notifications/emails/{id}
|
|
||||||
- GET /settings/notifications/sender
|
|
||||||
- POST /settings/notifications/sender
|
|
||||||
@@ -522,6 +522,9 @@ function Shell() {
|
|||||||
// Check if current route is More page (no submenu needed)
|
// Check if current route is More page (no submenu needed)
|
||||||
const isMorePage = location.pathname === '/more';
|
const isMorePage = location.pathname === '/more';
|
||||||
|
|
||||||
|
const submenuTopClass = fullscreen ? 'top-0' : 'top-[calc(7rem+32px)]';
|
||||||
|
const submenuZIndex = fullscreen ? 'z-50' : 'z-40';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AppProvider isStandalone={isStandalone} exitFullscreen={exitFullscreen}>
|
<AppProvider isStandalone={isStandalone} exitFullscreen={exitFullscreen}>
|
||||||
{!isStandalone && <ShortcutsBinder onToggle={toggle} />}
|
{!isStandalone && <ShortcutsBinder onToggle={toggle} />}
|
||||||
@@ -550,7 +553,7 @@ function Shell() {
|
|||||||
) : (
|
) : (
|
||||||
<div className="flex flex-1 flex-col min-h-0">
|
<div className="flex flex-1 flex-col min-h-0">
|
||||||
{/* Flex wrapper: mobile = col (PageHeader first), desktop = col-reverse (SubmenuBar first) */}
|
{/* Flex wrapper: mobile = col (PageHeader first), desktop = col-reverse (SubmenuBar first) */}
|
||||||
<div className="flex flex-col md:flex-col-reverse">
|
<div className={`flex flex-col md:flex-col-reverse sticky ${submenuTopClass} ${submenuZIndex}`}>
|
||||||
<PageHeader fullscreen={true} />
|
<PageHeader fullscreen={true} />
|
||||||
{!isMorePage && (isDashboardRoute ? (
|
{!isMorePage && (isDashboardRoute ? (
|
||||||
<DashboardSubmenuBar items={main.children} fullscreen={true} />
|
<DashboardSubmenuBar items={main.children} fullscreen={true} />
|
||||||
@@ -571,7 +574,7 @@ function Shell() {
|
|||||||
<div className="flex flex-1 flex-col min-h-0">
|
<div className="flex flex-1 flex-col min-h-0">
|
||||||
<TopNav />
|
<TopNav />
|
||||||
{/* Flex wrapper: mobile = col (PageHeader first), desktop = col-reverse (SubmenuBar first) */}
|
{/* Flex wrapper: mobile = col (PageHeader first), desktop = col-reverse (SubmenuBar first) */}
|
||||||
<div className="flex flex-col md:flex-col-reverse">
|
<div className={`flex flex-col md:flex-col-reverse sticky ${submenuTopClass} ${submenuZIndex}`}>
|
||||||
<PageHeader fullscreen={false} />
|
<PageHeader fullscreen={false} />
|
||||||
{isDashboardRoute ? (
|
{isDashboardRoute ? (
|
||||||
<DashboardSubmenuBar items={main.children} fullscreen={false} />
|
<DashboardSubmenuBar items={main.children} fullscreen={false} />
|
||||||
|
|||||||
@@ -17,7 +17,7 @@ export default function SubmenuBar({ items = [], fullscreen = false, headerVisib
|
|||||||
const topClass = fullscreen ? 'top-0' : 'top-[calc(7rem+32px)]';
|
const topClass = fullscreen ? 'top-0' : 'top-[calc(7rem+32px)]';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div data-submenubar className={`border-b border-border bg-background md:bg-background/95 md:backdrop-blur md:supports-[backdrop-filter]:bg-background/60 sticky ${topClass} z-20`}>
|
<div data-submenubar className={`border-b border-border bg-background md:bg-background/95 md:backdrop-blur md:supports-[backdrop-filter]:bg-background/60`}>
|
||||||
<div className="px-4 py-2">
|
<div className="px-4 py-2">
|
||||||
<div className="flex gap-2 overflow-x-auto no-scrollbar">
|
<div className="flex gap-2 overflow-x-auto no-scrollbar">
|
||||||
{items.map((it) => {
|
{items.map((it) => {
|
||||||
|
|||||||
@@ -118,7 +118,7 @@ export function ImageUpload({
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={cn('space-y-2', className)}>
|
<div className={cn('space-y-2 rounded-lg p-6 border border-muted-foreground/20', className)}>
|
||||||
{label && (
|
{label && (
|
||||||
<label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
|
<label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
|
||||||
{label}
|
{label}
|
||||||
@@ -129,20 +129,20 @@ export function ImageUpload({
|
|||||||
<p className="text-sm text-muted-foreground">{description}</p>
|
<p className="text-sm text-muted-foreground">{description}</p>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="space-y-4">
|
<div className="space-y-4 relative">
|
||||||
{value ? (
|
{value ? (
|
||||||
// Preview
|
// Preview
|
||||||
<div className="relative inline-block">
|
<div className="inline-block">
|
||||||
<img
|
<img
|
||||||
src={value}
|
src={value}
|
||||||
alt="Preview"
|
alt="Preview"
|
||||||
className="max-w-full h-auto max-h-48 rounded-lg border"
|
className="w-[350px] max-w-full h-auto rounded-lg border"
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
variant="destructive"
|
variant="destructive"
|
||||||
size="icon"
|
size="icon"
|
||||||
className="absolute top-2 right-2"
|
className="absolute top-0 right-0 h-fit w-fit shadow-none"
|
||||||
onClick={handleRemove}
|
onClick={handleRemove}
|
||||||
>
|
>
|
||||||
<X className="h-4 w-4" />
|
<X className="h-4 w-4" />
|
||||||
|
|||||||
@@ -165,7 +165,7 @@ body.woonoow-fullscreen .woonoow-app { overflow: visible; }
|
|||||||
background: #f0f6fc;
|
background: #f0f6fc;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* a[href] {
|
html #wpadminbar {
|
||||||
color: rgb(34 197 94);
|
position: fixed;
|
||||||
font-weight: bold;
|
top: 0;
|
||||||
} */
|
}
|
||||||
@@ -338,8 +338,12 @@ export default function StoreDetailsPage() {
|
|||||||
/>
|
/>
|
||||||
</SettingsSection>
|
</SettingsSection>
|
||||||
|
|
||||||
<SettingsSection label="Store logo (Dark mode)" description="Optional. If not set, light mode logo will be used in dark mode.">
|
<SettingsSection
|
||||||
|
label="Store logo (Dark mode)"
|
||||||
|
description="Optional. If not set, light mode logo will be used in dark mode."
|
||||||
|
>
|
||||||
<ImageUpload
|
<ImageUpload
|
||||||
|
className={"bg-gray-900/50"}
|
||||||
value={settings.storeLogoDark}
|
value={settings.storeLogoDark}
|
||||||
onChange={(url) => updateSetting('storeLogoDark', url)}
|
onChange={(url) => updateSetting('storeLogoDark', url)}
|
||||||
onRemove={() => updateSetting('storeLogoDark', '')}
|
onRemove={() => updateSetting('storeLogoDark', '')}
|
||||||
|
|||||||
Reference in New Issue
Block a user