# WooNooW Settings Tree - Implementation Plan

## 📋 Overview

This document defines the complete settings structure for WooNooW Admin SPA, using a **Shopify-inspired approach** that focuses on store success rather than technical configuration.

---

## 🎯 Strategy: Modern SaaS Approach (Shopify-Inspired)

**Philosophy:**
- **Store-first, not tech-first** - Settings encourage business growth
- **Simple, fast, smooth** - Better UX than WooCommerce's complex tabs
- **Logical grouping** - Our own hierarchy, not WooCommerce's legacy structure
- **Progressive disclosure** - Show what matters, hide complexity
- **Action-oriented** - "Set up payments" not "Payment gateway settings"

**Key Differences from WooCommerce:**
- ❌ No confusing tabs and sub-tabs
- ❌ No technical jargon
- ❌ No overwhelming forms
- ✅ Clear sections with visual cards
- ✅ Setup wizards for complex tasks
- ✅ Inline help and examples
- ✅ Mobile-friendly interface

---

## 🌲 Settings Tree Structure (Shopify-Inspired)

```
Settings
├── 🏪 Store Details
│   └── /settings/store
│       • Store name, contact info
│       • Store address (for invoices, shipping origin)
│       • Currency & formatting
│       • Timezone & units
│       • Store industry/type
│
├── 💳 Payments
│   └── /settings/payments
│       • Payment providers (cards: Stripe, PayPal, etc.)
│       • Manual methods (bank transfer, cash, check)
│       • Payment capture settings
│       • Test mode toggle
│
├── 📦 Shipping & Delivery
│   └── /settings/shipping
│       • Shipping zones (visual map)
│       • Shipping rates (simple table)
│       • Local pickup options
│       • Free shipping rules
│       • Delivery time estimates
│
├── 💰 Taxes
│   └── /settings/taxes
│       • Tax calculation (auto or manual)
│       • Tax rates by region (simple table)
│       • Tax-inclusive pricing toggle
│       • Tax exemptions
│
├── 🛍️ Checkout
│   └── /settings/checkout
│       • Checkout fields (required/optional)
│       • Guest checkout toggle
│       • Account creation options
│       • Order notes
│       • Terms & conditions
│
├── 👤 Customer Accounts
│   └── /settings/customers
│       • Account creation settings
│       • Login options
│       • Customer data retention
│       • Privacy policy
│
├── 📧 Notifications
│   └── /settings/notifications
│       • Email templates (visual editor)
│       • Order notifications (customer & admin)
│       • Shipping notifications
│       • Email sender details
│       • SMS notifications (future)
│
├── 🎨 Brand & Appearance
│   └── /settings/brand
│       • Logo upload
│       • Brand colors
│       • Email header/footer
│       • Invoice template
│
├── 🔧 WooNooW Settings
│   └── /settings/woonoow
│       • Plugin preferences
│       • Performance settings
│       • Feature toggles
│       • License & updates
│
├── ⚙️ Advanced (Bridge to wp-admin)
│   └── /wp-admin/admin.php?page=wc-settings&tab=advanced
│
├── 🔌 Integrations (Bridge to wp-admin)
│   └── /wp-admin/admin.php?page=wc-settings&tab=integration
│
├── 🔍 System Status (Bridge to wp-admin)
│   └── /wp-admin/admin.php?page=wc-status
│
└── 🧩 Extensions (Bridge to wp-admin)
    └── /wp-admin/admin.php?page=wc-addons
```

---

## 📊 Implementation Priority (Shopify-Inspired)

### **Phase 1: Foundation (HIGH PRIORITY)** 🔴

#### 1. Store Details (`/settings/store`)
**Purpose:** Core store information - the foundation of everything  
**Complexity:** Low-Medium  
**Estimated Time:** 4-6 hours  
**Shopify Equivalent:** Settings > General

**Layout:** Single-page form with clear sections

**Sections:**

**A. Store Identity**
- Store name (text input with live preview)
- Contact email (for customer inquiries)
- Customer support email (separate from admin)
- Store phone number (optional)

**B. Store Address** 
- Country/Region (dropdown with flags)
- Street address (autocomplete)
- City, State/Province, Postal code
- _Used for: shipping origin, invoices, tax calculations_

**C. Currency & Formatting**
- Currency (searchable dropdown with symbols)
- Currency position (before/after amount)
- Thousand separator (`,` or `.` or space)
- Decimal separator (`.` or `,`)
- Number of decimals (0-4)
- _Live preview: $1,234.56_

**D. Standards & Formats**
- Timezone (auto-detect with manual override)
- Unit system (Metric / Imperial)
- Weight unit (kg, g, lb, oz)
- Dimension unit (cm, m, in, ft)

**E. Store Type** (helps with recommendations)
- Industry (dropdown: Fashion, Electronics, Food, etc.)
- Business type (B2C, B2B, Both)

**UI/UX:**
- Clean, spacious layout
- Inline validation
- Live preview for currency formatting
- Auto-save draft (save button at top)
- "Your store is located in Indonesia 🇮🇩" summary card

---

#### 2. Payments (`/settings/payments`)
**Purpose:** Get paid - make it dead simple  
**Complexity:** Medium  
**Estimated Time:** 6-8 hours  
**Shopify Equivalent:** Settings > Payments

**Layout:** Card-based interface, not a table

**Sections:**

**A. Payment Providers** (Visual Cards)
```
┌─────────────────────────────────────┐
│ 💳 Credit & Debit Cards             │
│                                     │
│ [Stripe Logo]  Stripe Payments     │
│ ○ Not connected                     │
│ [Set up Stripe] button              │
│                                     │
│ Accept Visa, Mastercard, Amex      │
│ 2.9% + $0.30 per transaction       │
└─────────────────────────────────────┘

┌─────────────────────────────────────┐
│ [PayPal Logo]  PayPal              │
│ ● Connected                         │
│ [Manage] [Disconnect]               │
│                                     │
│ buyer@example.com                   │
│ 3.49% + fixed fee per transaction  │
└─────────────────────────────────────┘
```

**B. Manual Payment Methods** (Simpler cards)
- Bank Transfer (BACS) - toggle + instructions field
- Cash on Delivery - toggle + fee option
- Check Payments - toggle + instructions

**C. Payment Settings**
- Test mode (big toggle with warning banner)
- Payment capture (Authorize only / Authorize and capture)
- Accepted payment methods (checkboxes with icons)

**UI/UX:**
- Big, visual cards (not boring table rows)
- "Add payment provider" button with modal
- Setup wizard for Stripe/PayPal (not raw API keys)
- Test mode banner: "⚠️ Test Mode Active - No real charges"
- Drag to reorder (shows on checkout)

---

#### 3. Shipping & Delivery (`/settings/shipping`)
**Purpose:** Get products to customers  
**Complexity:** Medium-High  
**Estimated Time:** 8-10 hours  
**Shopify Equivalent:** Settings > Shipping and delivery

**Layout:** Zone-based with visual hierarchy

**Sections:**

**A. Shipping Zones** (Card list, not table)
```
┌─────────────────────────────────────┐
│ 🌍 Domestic (Indonesia)             │
│                                     │
│ Regions: All Indonesia             │
│ Rates: 3 shipping rates            │
│                                     │
│ • Standard Shipping - Rp 15,000    │
│ • Express Shipping - Rp 30,000     │
│ • Free Shipping - Free (>Rp 500k)  │
│                                     │
│ [Edit zone] [Delete]                │
└─────────────────────────────────────┘

┌─────────────────────────────────────┐
│ 🌏 International                    │
│                                     │
│ Regions: Rest of world             │
│ Rates: 1 shipping rate             │
│                                     │
│ • International - Calculated       │
│                                     │
│ [Edit zone]                         │
└─────────────────────────────────────┘

[+ Add shipping zone] button
```

**B. Zone Editor** (Modal or slide-over)
- Zone name
- Countries/Regions (multi-select with search)
- Shipping rates:
  - Name (e.g., "Standard Shipping")
  - Price (flat rate or calculated)
  - Conditions (order total, weight, etc.)
  - Transit time (e.g., "3-5 business days")

**C. Local Pickup**
- Enable local pickup (toggle)
- Pickup locations (list with add/edit)
- Pickup instructions

**D. Shipping Settings**
- Show delivery estimates (toggle)
- Require shipping address (toggle)
- Hide shipping costs until address entered (toggle)

**UI/UX:**
- Visual zone cards, not boring table
- "Add rate" button per zone
- Inline rate editor (no page reload)
- Drag to reorder rates
- Smart defaults: "Domestic" zone auto-created
- Map visualization (future enhancement)

---

### **Phase 2: Customer Experience (MEDIUM PRIORITY)** 🟡

#### 4. Taxes (`/settings/taxes`)
**Purpose:** Handle taxes simply  
**Complexity:** Medium  
**Estimated Time:** 5-7 hours  
**Shopify Equivalent:** Settings > Taxes and duties

**Layout:** Simple toggle + table

**Sections:**

**A. Tax Collection**
- Collect taxes (big toggle)
- Prices include tax (toggle)
- Calculate tax based on (customer address / shop address)

**B. Tax Rates** (Simple table, not WooCommerce's complex structure)
```
┌──────────────┬─────────┬────────┬─────────┐
│ Region       │ Rate    │ Shipping│ Actions │
├──────────────┼─────────┼────────┼─────────┤
│ Indonesia    │ 11%     │ ✓      │ Edit    │
│ Singapore    │ 9%      │ ✓      │ Edit    │
│ Malaysia     │ 6%      │ ✓      │ Edit    │
└──────────────┴─────────┴────────┴─────────┘
[+ Add tax rate]
```

**C. Tax Settings**
- Show tax breakdown at checkout (toggle)
- Tax exemptions (for wholesale, etc.)

**UI/UX:**
- Auto-detect tax rates by country (suggest common rates)
- Simple table, not WooCommerce's confusing priority/compound system
- "Need help? We can set this up for you" link

---

#### 5. Checkout (`/settings/checkout`)
**Purpose:** Optimize the buying experience  
**Complexity:** Low-Medium  
**Estimated Time:** 4-5 hours  
**Shopify Equivalent:** Settings > Checkout

**Layout:** Toggle-heavy with smart defaults

**Sections:**

**A. Customer Information**
- Company name (Show / Hide / Optional)
- Phone number (Required / Optional / Hidden)
- Address line 2 (Show / Hide)

**B. Checkout Options**
- Guest checkout (toggle - default ON)
- Account creation at checkout (toggle)
- Order notes field (toggle)
- Marketing opt-in checkbox (toggle)

**C. Order Processing**
- Terms and conditions (toggle + page selector)
- Privacy policy (toggle + page selector)
- Automatically complete orders (for digital products)

**UI/UX:**
- Live preview of checkout form
- Smart defaults (guest checkout ON, company name optional)
- "Recommended" badges on best practices

---

#### 6. Customer Accounts (`/settings/customers`)
**Purpose:** Customer login and data  
**Complexity:** Low  
**Estimated Time:** 3-4 hours  
**Shopify Equivalent:** Settings > Customer accounts

**Layout:** Simple toggles and options

**Sections:**

**A. Account Creation**
- Customers can create accounts (toggle)
- Account creation locations:
  - ☑ During checkout
  - ☑ On "My Account" page
  - ☐ Require accounts to purchase

**B. Login Options**
- Email or username (radio)
- Social login (future: Google, Facebook)
- Password requirements (dropdown: None / Medium / Strong)

**C. Customer Data**
- Data retention period (dropdown: Forever / 1 year / 2 years / 3 years)
- Download data retention (dropdown: Forever / 6 months / 1 year)
- Privacy policy page (page selector)

**UI/UX:**
- Clear explanations for GDPR compliance
- "Learn about data privacy" help links

---

### **Phase 3: Communication & Branding (MEDIUM PRIORITY)** 🟡

#### 7. Notifications (`/settings/notifications`)
**Purpose:** Keep customers informed  
**Complexity:** Medium  
**Estimated Time:** 6-8 hours  
**Shopify Equivalent:** Settings > Notifications

**Layout:** Email list + visual editor

**Sections:**

**A. Customer Notifications** (Card list with toggle)
```
┌─────────────────────────────────────┐
│ ● Order confirmation                │
│   Sent when order is placed         │
│   [Edit template]                   │
└─────────────────────────────────────┘

┌─────────────────────────────────────┐
│ ● Shipping confirmation             │
│   Sent when order is shipped        │
│   [Edit template]                   │
└─────────────────────────────────────┘

┌─────────────────────────────────────┐
│ ○ Order cancelled                   │
│   Sent when order is cancelled      │
│   [Edit template]                   │
└─────────────────────────────────────┘
```

**B. Admin Notifications**
- New order (toggle + recipients)
- Low stock alert (toggle + threshold)
- Failed payment (toggle)

**C. Email Settings**
- Sender name (e.g., "WooNooW Store")
- Sender email (e.g., "noreply@yourstore.com")
- Email footer text

**D. Template Editor** (Per email, modal/slide-over)
- Subject line (with variables: {{order_number}}, {{customer_name}})
- Email heading
- Body content (rich text editor)
- Live preview (desktop + mobile)

**UI/UX:**
- Visual email builder (not raw HTML)
- Variable picker (click to insert {{customer_name}})
- Send test email button
- Mobile preview

---

#### 8. Brand & Appearance (`/settings/brand`)
**Purpose:** Make it yours  
**Complexity:** Low-Medium  
**Estimated Time:** 4-5 hours  
**Shopify Equivalent:** Settings > Brand (new in Shopify)

**Layout:** Visual, design-focused

**Sections:**

**A. Logo & Colors**
- Store logo (upload, max 500KB)
- Brand color (color picker)
- Accent color (color picker)
- _Used in: emails, invoices, admin interface_

**B. Email Design**
- Email header image (upload)
- Email background color
- Email text color
- Footer text (e.g., "© 2025 Your Store")

**C. Invoice Template**
- Invoice logo (use store logo / upload different)
- Invoice header text
- Invoice footer text
- Tax ID / Business registration number

**UI/UX:**
- Live preview of email with your branding
- Live preview of invoice
- Color picker with presets
- Image cropper for logo

---

### **Phase 4: Advanced (KEEP IN WP-ADMIN)** ⚪

These settings are rarely used and can remain in wp-admin:

#### 8. Advanced Settings (Bridge)
- Page setup (cart, checkout, my account, terms)
- REST API
- Webhooks
- Legacy API
- WooCommerce.com account

#### 9. Integration Settings (Bridge)
- MaxMind Geolocation
- Other integrations

#### 10. System Status (Bridge)
- System status report
- Tools (clear cache, regenerate thumbnails, etc.)
- Logs
- Scheduled actions

#### 11. Extensions (Bridge)
- WooCommerce marketplace
- Browse extensions
- My subscriptions

---

## 🔧 Technical Implementation

### Backend (PHP)

**Files to Create/Modify:**
1. `includes/Admin/Rest/SettingsController.php` - REST endpoints
2. `includes/Compat/SettingsProvider.php` - Settings data provider
3. `includes/Compat/NavigationRegistry.php` - ✅ Already updated

**REST Endpoints:**
```php
GET  /wp-json/woonoow/v1/settings/store
POST /wp-json/woonoow/v1/settings/store
GET  /wp-json/woonoow/v1/settings/payments
POST /wp-json/woonoow/v1/settings/payments
GET  /wp-json/woonoow/v1/settings/shipping
POST /wp-json/woonoow/v1/settings/shipping
GET  /wp-json/woonoow/v1/settings/taxes
POST /wp-json/woonoow/v1/settings/taxes
GET  /wp-json/woonoow/v1/settings/checkout
POST /wp-json/woonoow/v1/settings/checkout
GET  /wp-json/woonoow/v1/settings/customers
POST /wp-json/woonoow/v1/settings/customers
GET  /wp-json/woonoow/v1/settings/notifications
POST /wp-json/woonoow/v1/settings/notifications
GET  /wp-json/woonoow/v1/settings/brand
POST /wp-json/woonoow/v1/settings/brand
```

**Data Flow:**
1. Frontend requests settings via REST API
2. Backend reads from WooCommerce options
3. Backend returns structured JSON
4. Frontend displays in form
5. User submits changes
6. Backend validates and saves to WooCommerce options
7. Frontend shows success/error

---

### Frontend (React/TypeScript)

**Files to Create:**
```
admin-spa/src/routes/Settings/
├── index.tsx              ✅ Done (WooNooW settings)
├── Store.tsx              ⏳ Store details (Shopify-style)
├── Payments.tsx           ⏳ Payment providers (card-based)
├── Shipping.tsx           ⏳ Shipping zones (visual cards)
├── Taxes.tsx              ⏳ Tax rates (simple table)
├── Checkout.tsx           ⏳ Checkout options
├── Customers.tsx          ⏳ Customer accounts
├── Notifications.tsx      ⏳ Email templates
├── Brand.tsx              ⏳ Branding & appearance
└── components/
    ├── SettingsLayout.tsx     ⏳ Consistent layout wrapper
    ├── SettingsCard.tsx       ⏳ Card component (Shopify-style)
    ├── SettingsSection.tsx    ⏳ Section with heading
    ├── ToggleField.tsx        ⏳ Toggle switch
    ├── PaymentProviderCard.tsx ⏳ Payment provider card
    ├── ShippingZoneCard.tsx   ⏳ Shipping zone card
    ├── TaxRateTable.tsx       ⏳ Simple tax table
    ├── EmailTemplateCard.tsx  ⏳ Email template card
    ├── ColorPicker.tsx        ⏳ Color picker
    ├── ImageUploader.tsx      ⏳ Image upload
    └── LivePreview.tsx        ⏳ Live preview component
```

**Shared Components:**
- Form wrapper with save/cancel
- Field renderer (text, select, checkbox, radio, textarea, color, image)
- Section headers
- Help text/tooltips
- Validation messages
- Loading states
- Success/error notifications

---

## 🎨 UI/UX Guidelines (Shopify-Inspired)

### Visual Design
- **Card-based layout** - Not boring forms
- **Generous whitespace** - Breathable, not cramped
- **Visual hierarchy** - Clear sections with icons
- **Color-coded status** - Green (active), Gray (inactive), Yellow (test mode)
- **Illustrations** - Empty states, onboarding

### Layout Patterns
- **Single-column on mobile** - Stack everything
- **Two-column on desktop** - Content + sidebar (for help/tips)
- **Sticky save bar** - Always visible at top
- **Progressive disclosure** - Show basics, hide advanced in expandable sections

### Interactive Elements
- **Big toggle switches** - Not tiny checkboxes
- **Visual cards** - Payment providers, shipping zones as cards
- **Inline editing** - Edit in place, not separate pages
- **Drag and drop** - Reorder zones, rates, emails
- **Live previews** - Currency format, email templates, invoices

### Forms & Validation
- **Smart defaults** - Pre-fill with best practices
- **Inline validation** - Real-time feedback
- **Help text everywhere** - Explain what each field does
- **Examples** - "e.g., Standard Shipping"
- **Recommended badges** - "✓ Recommended" for best practices

### Feedback & States
- **Optimistic updates** - Show change immediately, save in background
- **Toast notifications** - "Settings saved" (not alerts)
- **Loading states** - Skeleton screens, not spinners
- **Empty states** - "No payment providers yet. Add one to get started."
- **Error states** - Friendly messages with solutions

### Mobile-First
- **Touch-friendly** - 44px minimum tap targets
- **Swipe actions** - Swipe to delete/edit
- **Bottom sheets** - Modals slide from bottom on mobile
- **Responsive tables** - Stack columns on mobile

### Accessibility
- **Keyboard navigation** - Tab through everything
- **Screen reader labels** - Descriptive ARIA labels
- **Focus indicators** - Clear blue outline
- **Color contrast** - WCAG AA compliant
- **Skip links** - Skip to main content

---

## 📝 Implementation Checklist (Shopify-Inspired)

### Phase 1: Foundation
- [ ] **Store Details** (`/settings/store`)
  - [ ] Store identity section (name, emails, phone)
  - [ ] Store address with autocomplete
  - [ ] Currency selector with live preview
  - [ ] Timezone & units
  - [ ] Store type/industry
  - [ ] Save/load functionality
  
- [ ] **Payments** (`/settings/payments`)
  - [ ] Payment provider cards (visual)
  - [ ] Stripe/PayPal setup wizards
  - [ ] Manual methods (bank, COD, check)
  - [ ] Test mode toggle with banner
  - [ ] Drag-and-drop ordering
  - [ ] Save/load functionality
  
- [ ] **Shipping & Delivery** (`/settings/shipping`)
  - [ ] Shipping zone cards (visual)
  - [ ] Zone editor (modal/slide-over)
  - [ ] Rate configuration
  - [ ] Local pickup options
  - [ ] Drag-and-drop zones/rates
  - [ ] Save/load functionality

### Phase 2: Customer Experience
- [ ] **Taxes** (`/settings/taxes`)
  - [ ] Tax collection toggle
  - [ ] Simple tax rate table
  - [ ] Auto-detect common rates
  
- [ ] **Checkout** (`/settings/checkout`)
  - [ ] Checkout field options
  - [ ] Guest checkout toggle
  - [ ] Terms & privacy
  
- [ ] **Customer Accounts** (`/settings/customers`)
  - [ ] Account creation settings
  - [ ] Login options
  - [ ] Data retention (GDPR)

### Phase 3: Communication & Branding
- [ ] **Notifications** (`/settings/notifications`)
  - [ ] Email template cards
  - [ ] Visual email editor
  - [ ] Variable picker
  - [ ] Live preview
  
- [ ] **Brand & Appearance** (`/settings/brand`)
  - [ ] Logo uploader
  - [ ] Color pickers
  - [ ] Email/invoice preview

---

## 🧪 Testing Requirements

### Functional Testing
- [ ] All fields save correctly
- [ ] Validation works
- [ ] Default values load
- [ ] Changes persist after reload
- [ ] Bridge links work
- [ ] Mobile responsive

### Integration Testing
- [ ] WooCommerce compatibility
- [ ] 3rd party gateway support
- [ ] Plugin conflict testing
- [ ] Multi-currency support

### User Testing
- [ ] Intuitive navigation
- [ ] Clear labels
- [ ] Helpful error messages
- [ ] Fast performance

---

## 📚 Documentation

### User Documentation
- Settings overview
- Field descriptions
- Common configurations
- Troubleshooting

### Developer Documentation
- API endpoints
- Filter hooks
- Extension points
- Code examples

---

## 🔄 Migration Notes

**No data migration needed!**
- All settings use WooCommerce's native options
- Deactivating WooNooW restores wp-admin settings
- No data loss risk

---

## 🎯 Success Metrics (Shopify-Inspired)

### Phase 1 Complete When:
- ✅ Store, Payments, Shipping pages functional
- ✅ Visual card-based UI (not boring forms)
- ✅ All fields save/load correctly
- ✅ Live previews working (currency, etc.)
- ✅ Mobile responsive with touch-friendly UI
- ✅ No console errors
- ✅ Feels like Shopify (fast, smooth, delightful)

### Phase 2 Complete When:
- ✅ Taxes, Checkout, Customers pages functional
- ✅ Simple tables (not WooCommerce complexity)
- ✅ All validations working
- ✅ Smart defaults applied
- ✅ Performance acceptable (<2s load)

### Phase 3 Complete When:
- ✅ Notifications, Brand pages functional
- ✅ Visual email editor working
- ✅ Live email/invoice preview
- ✅ Color pickers, image uploaders working
- ✅ Template customization working

---

## 📅 Timeline Estimate (Shopify-Inspired Approach)

| Phase | Pages | Estimated Time | Priority |
|-------|-------|----------------|----------|
| **Phase 1: Foundation** | Store, Payments, Shipping | 18-24 hours | 🔴 HIGH |
| **Phase 2: Customer Experience** | Taxes, Checkout, Customers | 12-16 hours | 🟡 MEDIUM |
| **Phase 3: Communication & Branding** | Notifications, Brand | 10-13 hours | 🟡 MEDIUM |
| **Total** | **8 pages** | **40-53 hours** | |

**Breakdown:**
- **Store Details:** 4-6 hours (simple, but needs autocomplete & live preview)
- **Payments:** 6-8 hours (card UI, setup wizards, drag-drop)
- **Shipping:** 8-10 hours (zone cards, rate editor, complex)
- **Taxes:** 5-7 hours (simple table, auto-detect)
- **Checkout:** 4-5 hours (toggles, live preview)
- **Customers:** 3-4 hours (simple toggles)
- **Notifications:** 6-8 hours (email editor, preview)
- **Brand:** 4-5 hours (color pickers, image upload, preview)

**Note:** Times include:
- UI design (Shopify-style cards, not forms)
- Component development (reusable)
- Backend API integration
- Testing (functional + UX)
- Documentation

---

## 🔗 Related Documents

- `PROGRESS_NOTE.md` - Development progress
- `SPA_ADMIN_MENU_PLAN.md` - Menu structure
- `PROJECT_SOP.md` - Development standards
- `STANDALONE_MODE_SUMMARY.md` - Mode documentation
- `MENU_FIX_SUMMARY.md` - Navigation fix details

---

## 📊 WooCommerce vs WooNooW Settings Comparison

| Aspect | WooCommerce | WooNooW (Shopify-Inspired) |
|--------|-------------|----------------------------|
| **Layout** | Tabs within tabs | Single pages with cards |
| **Navigation** | Confusing hierarchy | Flat, clear menu |
| **Forms** | Dense, technical | Spacious, visual |
| **Payment Setup** | Raw API keys | Setup wizards |
| **Shipping** | Complex table | Visual zone cards |
| **Taxes** | Priority/compound system | Simple rate table |
| **Emails** | HTML code editor | Visual template builder |
| **Branding** | Scattered settings | Dedicated Brand page |
| **Mobile** | Not optimized | Touch-friendly |
| **Help** | External docs | Inline help everywhere |
| **Defaults** | Empty/technical | Smart, business-focused |
| **Feel** | Admin panel | Modern SaaS app |

---

## 💡 Key Design Decisions

### 1. **Store Details Instead of General**
- **Why:** "General" is vague. "Store Details" is clear and action-oriented.
- **Benefit:** Merchants know exactly what to expect.

### 2. **Card-Based Payment Providers**
- **Why:** Visual cards are more engaging than table rows.
- **Benefit:** Easier to scan, understand status at a glance.

### 3. **Shipping Zones as Cards**
- **Why:** WooCommerce's table is overwhelming.
- **Benefit:** Visual hierarchy, easier to manage multiple zones.

### 4. **Simple Tax Table**
- **Why:** WooCommerce's priority/compound system confuses users.
- **Benefit:** 90% of stores just need region + rate.

### 5. **Separate Checkout & Customer Pages**
- **Why:** WooCommerce lumps them together.
- **Benefit:** Clearer separation of concerns.

### 6. **Notifications Instead of Emails**
- **Why:** "Notifications" is more modern and broader (future: SMS, push).
- **Benefit:** Future-proof naming.

### 7. **Brand & Appearance Page**
- **Why:** Shopify's newest addition, highly requested.
- **Benefit:** One place for all branding (logo, colors, templates).

### 8. **Progressive Disclosure**
- **Why:** Don't overwhelm with all options at once.
- **Benefit:** Show basics, hide advanced in expandable sections.

---

## 🚀 Implementation Strategy

### Week 1-2: Foundation (Phase 1)
1. **Store Details** - Get the basics right
2. **Payments** - Critical for business
3. **Shipping** - Most complex, tackle early

### Week 3: Customer Experience (Phase 2)
4. **Taxes** - Simpler than WooCommerce
5. **Checkout** - Quick wins with toggles
6. **Customers** - Simple settings

### Week 4: Polish (Phase 3)
7. **Notifications** - Email templates
8. **Brand** - Visual polish

### Ongoing: Iteration
- User feedback
- Performance optimization
- Mobile refinement
- Accessibility audit

---

**Last Updated:** November 5, 2025  
**Status:** 📋 Planning Complete - Shopify-Inspired Approach Adopted  
**Strategy:** Store-first, visual, simple, fast  
**Next Step:** Implement Phase 1 - Store Details page  
**Estimated Total:** 40-53 hours for all 8 pages