feat: Streamline settings and document addon support strategy
## 1. Eliminate Unnecessary Settings Tabs ✅ **Before:** 13 tabs (too many!) **After:** 9 tabs (clean, focused) **Removed:** - ❌ Advanced (just redirected to WC Admin) - ❌ Integrations (just redirected to WC Admin) - ❌ System Status (just redirected to WC Admin) - ❌ Extensions (just redirected to WC Admin) **Kept:** - ✅ WooNooW (main settings) - ✅ Store Details - ✅ Payments (simplified WC UI) - ✅ Shipping & Delivery (simplified WC UI) - ✅ Tax (simplified WC UI) - ✅ Checkout - ✅ Customer Accounts - ✅ Notifications - ✅ Brand & Appearance **Rationale:** - Bridge tabs add clutter without value - Users can access WC settings from WC menu - Keep only WooNooW simplified UI - Match Shopify/marketplace patterns --- ## 2. Settings Pages Implementation Plan ✅ Created SETTINGS_PAGES_PLAN.md with detailed specs for 4 missing pages: ### A. WooNooW Settings - General settings (SPA mode, theme, items per page) - Performance (caching, preload) - Features (quick edit, bulk actions, shortcuts) - Developer (debug mode, API logs) ### B. Checkout Settings - Checkout options (guest checkout, account creation) - Checkout fields (company, address, phone) - Terms & conditions - Order processing (default status, auto-complete) ### C. Customer Accounts Settings - Account creation (registration, username/password generation) - Account security (strong passwords, 2FA) - Privacy (data removal, export, retention) - Account dashboard (orders, downloads, addresses) ### D. Brand & Appearance Settings - Store identity (logo, icon, tagline) - Brand colors (primary, secondary, accent) - Typography (fonts, sizes) - Admin UI (sidebar, breadcrumbs, compact mode) - Custom CSS **Timeline:** 3 weeks **Priority:** High (WooNooW, Checkout), Medium (Customers), Low (Brand) --- ## 3. Community Addon Support Strategy ✅ Updated PROJECT_BRIEF.md with three-tier addon support model: ### **Tier A: Automatic Integration** ✅ - Addons respecting WooCommerce bone work automatically - Payment gateways extending WC_Payment_Gateway - Shipping methods extending WC_Shipping_Method - HPOS-compatible plugins - **Result:** Zero configuration needed ### **Tier B: Bridge Snippets** 🌉 - For addons with custom injection - Provide bridge code snippets - Community-contributed bridges - Documentation and examples - **Philosophy:** Help users leverage ALL WC addons ### **Tier C: Essential WooNooW Addons** ⚡ - Build only critical/essential features - Indonesia Shipping, Advanced Reports, etc. - NOT rebuilding generic features - **Goal:** Save energy, focus on core **Key Principle:** > "We use WooCommerce, not PremiumNooW as WooCommerce Alternative. We must take the irreplaceable strength of the WooCommerce community." **Benefits:** - Leverage 10,000+ WooCommerce plugins - Avoid rebuilding everything - Focus on core experience - No vendor lock-in --- ## Summary **Settings:** 13 tabs → 9 tabs (cleaner, focused) **Plan:** Detailed implementation for 4 missing pages **Strategy:** Three-tier addon support (auto, bridge, essential) **Philosophy:** Simplify, leverage ecosystem, build only essentials.
This commit is contained in:
dwindown
113
PROJECT_BRIEF.md
113
PROJECT_BRIEF.md
@@ -82,8 +82,119 @@ WooNooW settings act as a **"better wardrobe"** for WooCommerce configuration:
|
||||
|
||||
---
|
||||
|
||||
## 6. Strategic Goal
|
||||
## 6. Community Addon Support Strategy
|
||||
|
||||
WooNooW leverages the irreplaceable strength of the WooCommerce ecosystem through a three-tier support model:
|
||||
|
||||
### **Tier A: Automatic Integration** ✅
|
||||
**Addons that respect WooCommerce bone structure work automatically.**
|
||||
|
||||
- Payment gateways extending `WC_Payment_Gateway`
|
||||
- Shipping methods extending `WC_Shipping_Method`
|
||||
- Plugins using WooCommerce hooks and filters
|
||||
- HPOS-compatible plugins
|
||||
|
||||
**Examples:**
|
||||
- Stripe for WooCommerce
|
||||
- WooCommerce Subscriptions
|
||||
- WooCommerce Bookings
|
||||
- Any plugin following WooCommerce standards
|
||||
|
||||
**Result:** Zero configuration needed. If it works in WooCommerce, it works in WooNooW.
|
||||
|
||||
---
|
||||
|
||||
### **Tier B: Bridge Snippets** 🌉
|
||||
**For addons with custom injection that partially or fully don't integrate.**
|
||||
|
||||
We provide bridge snippet code to help users connect non-standard addons:
|
||||
|
||||
**Use Cases:**
|
||||
- Addons that inject custom fields via JavaScript
|
||||
- Addons that bypass WooCommerce hooks
|
||||
- Addons with custom session management (e.g., Rajaongkir)
|
||||
- Addons with proprietary UI injection
|
||||
|
||||
**Approach:**
|
||||
```php
|
||||
// Bridge snippet example
|
||||
add_filter('woonoow_before_shipping_calculate', function($data) {
|
||||
// Convert WooNooW data to addon format
|
||||
if ($data['country'] === 'ID') {
|
||||
CustomAddon::set_session_data($data);
|
||||
}
|
||||
return $data;
|
||||
});
|
||||
```
|
||||
|
||||
**Distribution:**
|
||||
- Documentation with code snippets
|
||||
- Community-contributed bridges
|
||||
- Optional bridge plugin packages
|
||||
|
||||
**Philosophy:** We help users leverage ALL WooCommerce addons, not rebuild them.
|
||||
|
||||
---
|
||||
|
||||
### **Tier C: Essential WooNooW Addons** ⚡
|
||||
**We build our own addons only for critical/essential features.**
|
||||
|
||||
**Criteria for building:**
|
||||
- ✅ Essential for store operations
|
||||
- ✅ Significantly enhances WooCommerce
|
||||
- ✅ Provides unique value in WooNooW context
|
||||
- ✅ Cannot be adequately bridged
|
||||
|
||||
**Examples:**
|
||||
- WooNooW Indonesia Shipping (Rajaongkir, Biteship integration)
|
||||
- WooNooW Advanced Reports
|
||||
- WooNooW Inventory Management
|
||||
- WooNooW Multi-Currency
|
||||
|
||||
**NOT building:**
|
||||
- Generic features already available in WooCommerce ecosystem
|
||||
- Features that can be bridged
|
||||
- Niche functionality with low demand
|
||||
|
||||
**Goal:** Save energy, focus on core experience, leverage community strength.
|
||||
|
||||
---
|
||||
|
||||
### **Why This Approach?**
|
||||
|
||||
**Leverage WooCommerce Ecosystem:**
|
||||
- 10,000+ plugins available
|
||||
- Proven, tested solutions
|
||||
- Active community support
|
||||
- Regular updates and maintenance
|
||||
|
||||
**Avoid Rebuilding Everything:**
|
||||
- Save development time
|
||||
- Focus on core WooNooW experience
|
||||
- Let specialists maintain their domains
|
||||
- Reduce maintenance burden
|
||||
|
||||
**Provide Flexibility:**
|
||||
- Users choose their preferred addons
|
||||
- Bridge pattern for edge cases
|
||||
- Essential addons for critical needs
|
||||
- No vendor lock-in
|
||||
|
||||
**Community Strength:**
|
||||
> "We use WooCommerce, not PremiumNooW as WooCommerce Alternative. We must take the irreplaceable strength of the WooCommerce community."
|
||||
|
||||
---
|
||||
|
||||
## 7. Strategic Goal
|
||||
|
||||
Position WooNooW as the **"WooCommerce for Now"** — a paid addon that delivers the speed and UX of modern SaaS platforms while retaining the ecosystem power and self‑hosted freedom of WooCommerce.
|
||||
|
||||
**Key Differentiators:**
|
||||
- ⚡ Lightning-fast performance
|
||||
- 🎨 Modern, intuitive UI
|
||||
- 🔌 Full WooCommerce ecosystem compatibility
|
||||
- 🌉 Bridge support for any addon
|
||||
- ⚙️ Essential addons for critical features
|
||||
- 🚀 No data migration needed
|
||||
|
||||
---
|
||||
578
SETTINGS_PAGES_PLAN.md
Normal file
578
SETTINGS_PAGES_PLAN.md
Normal file
@@ -0,0 +1,578 @@
|
||||
# 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**
|
||||
@@ -116,12 +116,6 @@ function getStaticFallbackTree(): MainNode[] {
|
||||
{ label: 'Customer Accounts', mode: 'spa' as const, path: '/settings/customers' },
|
||||
{ label: 'Notifications', mode: 'spa' as const, path: '/settings/notifications' },
|
||||
{ label: 'Brand & Appearance', mode: 'spa' as const, path: '/settings/brand' },
|
||||
|
||||
// Advanced (Bridge to WP Admin)
|
||||
{ label: 'Advanced', mode: 'bridge' as const, href: `${admin}?page=wc-settings&tab=advanced` },
|
||||
{ label: 'Integrations', mode: 'bridge' as const, href: `${admin}?page=wc-settings&tab=integration` },
|
||||
{ label: 'System Status', mode: 'bridge' as const, href: `${admin}?page=wc-status` },
|
||||
{ label: 'Extensions', mode: 'bridge' as const, href: `${admin}?page=wc-addons` },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user