Implemented sortable payment gateways using @dnd-kit
Features:
✅ Drag-and-drop for Manual Payment Methods
✅ Drag-and-drop for Online Payment Methods
✅ Visual drag handle (GripVertical icon)
✅ Smooth animations during drag
✅ Separate sorting for each category
✅ Order persists in component state
✅ Toast notification on reorder
UI Changes:
- Added drag handle on left side of each gateway card
- Cursor changes to grab/grabbing during drag
- Dragged item becomes semi-transparent (50% opacity)
- Smooth transitions between positions
Implementation:
1. DnD Context Setup
- PointerSensor for mouse/touch
- KeyboardSensor for accessibility
- closestCenter collision detection
2. Sortable Items
- SortableGatewayItem wrapper component
- Handles drag attributes and listeners
- Applies transform and transition styles
3. State Management
- manualOrder: Array of manual gateway IDs
- onlineOrder: Array of online gateway IDs
- Initialized from gateways on mount
- Updated on drag end
4. Sorting Logic
- useMemo to sort gateways by custom order
- arrayMove from @dnd-kit/sortable
- Separate handlers for each category
5. Visual Feedback
- GripVertical icon (left side, 8px from edge)
- Opacity 0.5 when dragging
- Smooth CSS transitions
- Cursor: grab/grabbing
TODO (Backend):
- Save order to WordPress options
- Load order on page load
- API endpoint: POST /payments/gateways/order
Benefits:
✅ Better UX for organizing payment methods
✅ Visual feedback during drag
✅ Accessible (keyboard support)
✅ Separate sorting per category
✅ No page reload needed
Files Modified:
- Payments.tsx: DnD implementation
- package.json: @dnd-kit dependencies (already installed)
b57a23ffbd