b39c1f1a95
## Changes ### 1. Eliminated Unnecessary Tabs ✅ **Before:** 13 tabs (bloated!) **After:** 5 tabs (clean, focused) **Removed:** - ❌ WooNooW (nonsense toggles for essential features) - ❌ Checkout (mirror WooCommerce, not essential) - ❌ Customer Accounts (mirror WooCommerce, not essential) - ❌ Brand & Appearance (merged into Store Details) - ❌ Advanced (just redirected to WC) - ❌ Integrations (just redirected to WC) - ❌ System Status (just redirected to WC) - ❌ Extensions (just redirected to WC) **Kept:** - ✅ Store Details (will enhance with branding) - ✅ Payments (existing, working) - ✅ Shipping & Delivery (existing, working) - ✅ Tax (existing, working) - ✅ Notifications (existing, working) **Added:** - ✅ Developer (debug mode, API logs, system info) --- ### 2. Created Refined Implementation Plan V2 ✅ **Document:** SETTINGS_PAGES_PLAN_V2.md **Key Decisions:** #### ✅ 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 #### Philosophy: > "We do the best config. Users focus on their business, not system configuration." --- ### 3. Specific Rejections (Based on Feedback) **WooNooW Settings - ALL REJECTED:** - ❌ Plugin Version (can be anywhere) - ❌ Enable SPA Mode (plugin activation = enabled) - ❌ Admin Theme toggle (will be in topbar) - ❌ Items per page (per-table setting) - ❌ Enable caching (we do best config) - ❌ Cache duration (confusing for non-tech) - ❌ Preload data (we optimize) - ❌ Enable quick edit (essential, always on) - ❌ Enable bulk actions (essential, always on) - ❌ Enable keyboard shortcuts (essential, always on) - ❌ Enable auto-save (essential, always on) **Brand & Appearance - MERGED TO STORE DETAILS:** - ✅ Store logo (merge to Store Details) - ✅ Store icon (merge to Store Details) - ✅ Store tagline (merge to Store Details) - ✅ Brand colors (merge to Store Details) - ❌ Typography (breaks design) - ❌ Font size (use browser zoom) - ❌ Sidebar position (we optimize) - ❌ Sidebar collapsed (we optimize) - ❌ Show breadcrumbs (we optimize) - ❌ Compact mode (we optimize) - ❌ Custom CSS (hard to use, move to Developer if needed) **Checkout & Customer Accounts - NOT BUILDING:** - We do the best config (industry standard) - No need to mirror WooCommerce complexity - Focus on business, not system configuration - Users can use WC native settings if needed --- ### 4. Final Structure ``` Settings (5 tabs) ├── Store Details (enhanced with branding) ├── Payments (existing) ├── Shipping & Delivery (existing) ├── Tax (existing) ├── Notifications (existing) └── Developer (new - debug, system info, cache) ``` --- ### 5. Updated Both Backend and Frontend **Backend:** NavigationRegistry.php - Removed 8 tabs - Added Developer tab - Changed main settings path to /settings/store **Frontend:** nav/tree.ts (fallback) - Synced with backend - Removed WooNooW tab - Added Developer tab --- ## Philosophy **We do the best config:** - Essential features always enabled - No confusing toggles - Industry best practices - Focus on business, not system **Result:** - 13 tabs → 5 tabs (62% reduction!) - Clean, focused interface - Professional - Easy to use - No bloat
482 lines
12 KiB
Markdown
482 lines
12 KiB
Markdown
# 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
|