1. Hide Drag Handle on Mobile ✅
Problem: Drag handle looks messy on mobile
Solution: Hide on mobile, show only on desktop
Changes:
- Added 'hidden md:block' to drag handle
- Added 'md:pl-8' to content wrapper
- Mobile: Clean list without drag handle
- Desktop: Drag handle visible for sorting
UX Priority: Better mobile experience > sorting on mobile
2. Persist Sort Order to Database ✅
Backend Implementation:
A. New API Endpoint
POST /woonoow/v1/payments/gateways/order
Body: { category: 'manual'|'online', order: ['id1', 'id2'] }
B. Save to WordPress Options
- woonoow_payment_gateway_order_manual
- woonoow_payment_gateway_order_online
C. Load Order on Page Load
GET /payments/gateways returns:
{
gateways: [...],
order: {
manual: ['bacs', 'cheque', 'cod'],
online: ['paypal', 'stripe']
}
}
Frontend Implementation:
A. Save on Drag End
- Calls API immediately after reorder
- Shows success toast
- Reverts on error with error toast
B. Load Saved Order
- Extracts order from API response
- Uses saved order if available
- Falls back to gateway order if no saved order
C. Error Handling
- Try/catch on save
- Revert order on failure
- User feedback via toast
3. Flow Diagram
Page Load:
┌─────────────────────────────────────┐
│ GET /payments/gateways │
├─────────────────────────────────────┤
│ Returns: { gateways, order } │
│ - order.manual: ['bacs', 'cod'] │
│ - order.online: ['paypal'] │
└─────────────────────────────────────┘
↓
┌─────────────────────────────────────┐
│ Initialize State │
│ - setManualOrder(order.manual) │
│ - setOnlineOrder(order.online) │
└─────────────────────────────────────┘
↓
┌─────────────────────────────────────┐
│ Display Sorted List │
│ - useMemo sorts by saved order │
└─────────────────────────────────────┘
User Drags:
┌─────────────────────────────────────┐
│ User drags item │
└─────────────────────────────────────┘
↓
┌─────────────────────────────────────┐
│ handleDragEnd │
│ - Calculate new order │
│ - Update state (optimistic) │
└─────────────────────────────────────┘
↓
┌─────────────────────────────────────┐
│ POST /payments/gateways/order │
│ Body: { category, order } │
└─────────────────────────────────────┘
↓
┌─────────────────────────────────────┐
│ Success: Toast notification │
│ Error: Revert + error toast │
└─────────────────────────────────────┘
4. Mobile vs Desktop
Mobile (< 768px):
✅ Clean list without drag handle
✅ No left padding
✅ Better UX
❌ No sorting (desktop only)
Desktop (≥ 768px):
✅ Drag handle visible
✅ Full sorting capability
✅ Visual feedback
✅ Keyboard accessible
Benefits:
✅ Order persists across sessions
✅ Order persists across page reloads
✅ Clean mobile UI
✅ Full desktop functionality
✅ Error handling with rollback
✅ Optimistic UI updates
Files Modified:
- PaymentsController.php: New endpoint + load order
- Payments.tsx: Save order + load order + mobile hide
- Database: 2 new options for order storage
52f7c1b99d