# My Account Settings & Frontend - Comprehensive Plan

## Overview
Complete implementation plan for My Account functionality including admin settings and customer-facing frontend.

---

## 1. ADMIN SETTINGS (`admin-spa/src/routes/Appearance/Account.tsx`)

### Settings Structure

#### **A. Layout Settings**
- **Dashboard Layout**
  - `style`: 'sidebar' | 'tabs' | 'minimal'
  - `sidebar_position`: 'left' | 'right' (for sidebar style)
  - `mobile_menu`: 'bottom-nav' | 'hamburger' | 'accordion'

#### **B. Menu Items Control**
Enable/disable and reorder menu items:
- Dashboard (overview)
- Orders
- Downloads
- Addresses (Billing & Shipping)
- Account Details (profile edit)
- Payment Methods
- Wishlist (if enabled)
- Logout

#### **C. Dashboard Widgets**
Configurable widgets for dashboard overview:
- Recent Orders (show last N orders)
- Account Stats (total orders, total spent)
- Quick Actions (reorder, track order)
- Recommended Products

#### **D. Visual Settings**
- Avatar display: show/hide
- Welcome message customization
- Card style: 'card' | 'minimal' | 'bordered'
- Color scheme for active states

---

## 2. FRONTEND IMPLEMENTATION (`customer-spa/src/pages/Account/`)

### File Structure
```
customer-spa/src/pages/Account/
├── index.tsx                 # Main router
├── Dashboard.tsx            # Overview/home
├── Orders.tsx               # Order history
├── OrderDetails.tsx         # Single order view
├── Downloads.tsx            # Downloadable products
├── Addresses.tsx            # Billing & shipping addresses
├── AddressEdit.tsx          # Edit address form
├── AccountDetails.tsx       # Profile edit
├── PaymentMethods.tsx       # Saved payment methods
└── components/
    ├── AccountLayout.tsx    # Layout wrapper
    ├── AccountSidebar.tsx   # Navigation sidebar
    ├── AccountTabs.tsx      # Tab navigation
    ├── OrderCard.tsx        # Order list item
    └── DashboardWidget.tsx  # Dashboard widgets
```

### Features by Page

#### **Dashboard**
- Welcome message with user name
- Account statistics cards
- Recent orders (3-5 latest)
- Quick action buttons
- Recommended/recently viewed products

#### **Orders**
- Filterable order list (all, pending, completed, cancelled)
- Search by order number
- Pagination
- Order cards showing:
  - Order number, date, status
  - Total amount
  - Items count
  - Quick actions (view, reorder, track)

#### **Order Details**
- Full order information
- Order status timeline
- Items list with images
- Billing/shipping addresses
- Payment method
- Download invoice button
- Reorder button
- Track shipment (if available)

#### **Downloads**
- List of downloadable products
- Download buttons
- Expiry dates
- Download count/limits

#### **Addresses**
- Billing address card
- Shipping address card
- Edit/delete buttons
- Add new address
- Set as default

#### **Account Details**
- Edit profile form:
  - First name, last name
  - Display name
  - Email
  - Phone (optional)
  - Avatar upload (optional)
- Change password section
- Email preferences

#### **Payment Methods**
- Saved payment methods list
- Add new payment method
- Set default
- Delete payment method
- Secure display (last 4 digits)

---

## 3. API ENDPOINTS NEEDED

### Customer Endpoints
```php
// Account
GET    /woonoow/v1/account/dashboard
GET    /woonoow/v1/account/details
PUT    /woonoow/v1/account/details

// Orders
GET    /woonoow/v1/account/orders
GET    /woonoow/v1/account/orders/{id}
POST   /woonoow/v1/account/orders/{id}/reorder

// Downloads
GET    /woonoow/v1/account/downloads

// Addresses
GET    /woonoow/v1/account/addresses
GET    /woonoow/v1/account/addresses/{type}  // billing or shipping
PUT    /woonoow/v1/account/addresses/{type}
DELETE /woonoow/v1/account/addresses/{type}

// Payment Methods
GET    /woonoow/v1/account/payment-methods
POST   /woonoow/v1/account/payment-methods
DELETE /woonoow/v1/account/payment-methods/{id}
PUT    /woonoow/v1/account/payment-methods/{id}/default
```

### Admin Endpoints
```php
// Settings
GET    /woonoow/v1/appearance/pages/account
POST   /woonoow/v1/appearance/pages/account
```

---

## 4. BACKEND IMPLEMENTATION

### Controllers Needed
```
includes/Api/
├── AccountController.php      # Account details, dashboard
├── OrdersController.php        # Order management (already exists?)
├── DownloadsController.php     # Downloads management
├── AddressesController.php     # Address CRUD
└── PaymentMethodsController.php # Payment methods
```

### Database Considerations
- Use WooCommerce native tables
- Customer meta for preferences
- Order data from `wp_wc_orders` or `wp_posts`
- Downloads from WooCommerce downloads system

---

## 5. SETTINGS SCHEMA

### Default Settings
```json
{
  "pages": {
    "account": {
      "layout": {
        "style": "sidebar",
        "sidebar_position": "left",
        "mobile_menu": "bottom-nav",
        "card_style": "card"
      },
      "menu_items": [
        { "id": "dashboard", "label": "Dashboard", "enabled": true, "order": 1 },
        { "id": "orders", "label": "Orders", "enabled": true, "order": 2 },
        { "id": "downloads", "label": "Downloads", "enabled": true, "order": 3 },
        { "id": "addresses", "label": "Addresses", "enabled": true, "order": 4 },
        { "id": "account-details", "label": "Account Details", "enabled": true, "order": 5 },
        { "id": "payment-methods", "label": "Payment Methods", "enabled": true, "order": 6 },
        { "id": "logout", "label": "Logout", "enabled": true, "order": 7 }
      ],
      "dashboard_widgets": {
        "recent_orders": { "enabled": true, "count": 5 },
        "account_stats": { "enabled": true },
        "quick_actions": { "enabled": true },
        "recommended_products": { "enabled": false }
      },
      "elements": {
        "avatar": true,
        "welcome_message": true,
        "breadcrumbs": true
      },
      "labels": {
        "welcome_message": "Welcome back, {name}!",
        "dashboard_title": "My Account",
        "no_orders_message": "You haven't placed any orders yet."
      }
    }
  }
}
```

---

## 6. IMPLEMENTATION PHASES

### Phase 1: Foundation (Priority: HIGH)
1. Create admin settings page (`Account.tsx`)
2. Create backend controller (`AppearanceController.php` - add account section)
3. Create API endpoints for settings
4. Create basic account layout structure

### Phase 2: Core Pages (Priority: HIGH)
1. Dashboard page
2. Orders list page
3. Order details page
4. Account details/profile edit

### Phase 3: Additional Features (Priority: MEDIUM)
1. Addresses management
2. Downloads page
3. Payment methods

### Phase 4: Polish (Priority: LOW)
1. Dashboard widgets
2. Recommended products
3. Advanced filtering/search
4. Mobile optimizations

---

## 7. MOBILE CONSIDERATIONS

- Bottom navigation for mobile (like checkout)
- Collapsible sidebar on tablet
- Touch-friendly buttons
- Swipe gestures for order cards
- Responsive tables for order details

---

## 8. SECURITY CONSIDERATIONS

- Verify user authentication on all endpoints
- Check order ownership before displaying
- Sanitize all inputs
- Validate email changes
- Secure password change flow
- Rate limiting on sensitive operations

---

## 9. UX ENHANCEMENTS

- Loading states for all async operations
- Empty states with helpful CTAs
- Success/error toast notifications
- Confirmation dialogs for destructive actions
- Breadcrumb navigation
- Back buttons where appropriate
- Skeleton loaders

---

## 10. INTEGRATION POINTS

### With Existing Features
- Cart system (reorder functionality)
- Product pages (from order history)
- Checkout (saved addresses, payment methods)
- Email system (order notifications)

### With WooCommerce
- Native order system
- Customer data
- Download permissions
- Payment gateways

---

## NEXT STEPS

1. **Immediate**: Create admin settings page structure
2. **Then**: Implement basic API endpoints
3. **Then**: Build frontend layout and routing
4. **Finally**: Implement individual pages one by one