WooNooW/SETTINGS_PAGES_PLAN.md

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

- 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

- Enable caching: [Toggle] (default: ON)
- Cache duration: [Number: 3600] seconds
- Preload data: [Toggle] (default: ON)

C. Features

- 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

- Debug mode: [Toggle] (default: OFF)
- Show API logs: [Toggle] (default: OFF)
- Enable React DevTools: [Toggle] (default: OFF)

API Endpoints:

// 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:

// 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

- 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

- 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

- Enable terms and conditions: [Toggle]
- Terms page: [Page Select]
- Privacy policy page: [Page Select]

D. Order Processing

- Default order status: [Select: Pending | Processing | On Hold]
- Auto-complete virtual orders: [Toggle]
- Auto-complete downloadable orders: [Toggle]

API Endpoints:

// 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:

// 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

- 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

- Require strong passwords: [Toggle]
- Minimum password length: [Number: 8]
- Enable two-factor authentication: [Toggle]

C. Privacy

- 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

- Enable account dashboard: [Toggle]
- Show recent orders: [Toggle]
- Show downloads: [Toggle]
- Show addresses: [Toggle]
- Show account details: [Toggle]

API Endpoints:

// 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:

// 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

- Store logo: [Image Upload]
- Store icon/favicon: [Image Upload]
- Store tagline: [Text Input]

B. Brand Colors

- 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

- Heading font: [Font Select: Inter, Roboto, etc.]
- Body font: [Font Select: Inter, Roboto, etc.]
- Font size: [Select: Small | Medium | Large]

D. Admin UI

- Sidebar position: [Select: Left | Right]
- Sidebar collapsed by default: [Toggle]
- Show breadcrumbs: [Toggle]
- Compact mode: [Toggle]

E. Custom CSS

- Custom CSS: [Code Editor]

API Endpoints:

// 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:

// 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