WooNooW/MY_ACCOUNT_PLAN.md

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

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

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

{
  "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