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.
|
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: 'Customer Accounts', mode: 'spa' as const, path: '/settings/customers' },
|
||||||
{ label: 'Notifications', mode: 'spa' as const, path: '/settings/notifications' },
|
{ label: 'Notifications', mode: 'spa' as const, path: '/settings/notifications' },
|
||||||
{ label: 'Brand & Appearance', mode: 'spa' as const, path: '/settings/brand' },
|
{ 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