feat: implement multiple saved addresses with modal selector in checkout
- Add AddressController with full CRUD API for saved addresses - Implement address management UI in My Account > Addresses - Add modal-based address selector in checkout (Tokopedia-style) - Hide checkout forms when saved address is selected - Add search functionality in address modal - Auto-select default addresses on page load - Fix variable products to show 'Select Options' instead of 'Add to Cart' - Add admin toggle for multiple addresses feature - Clean up debug logs and fix TypeScript errors
This commit is contained in:
Dwindi Ramadhana
312
MY_ACCOUNT_PLAN.md
Normal file
312
MY_ACCOUNT_PLAN.md
Normal file
@@ -0,0 +1,312 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user