# 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**