1. Added Support for More Field Types ✅
New field types:
- 'title': Heading/separator (renders as h3 with border)
- 'multiselect': Multiple select dropdown
- 'account': Bank account repeater (BACS)
Total supported: text, password, checkbox, select, textarea,
number, email, url, account, title, multiselect
2. Improved Account Field Handling ✅
Problem: WooCommerce might return serialized PHP or JSON string
Solution: Parse string values before rendering
Handles:
- JSON string: JSON.parse()
- Array: Use directly
- Empty/invalid: Default to []
This ensures bank accounts display correctly even if
backend returns different formats.
3. Added Title Field Support ✅
Renders as section heading:
┌─────────────────────────────┐
│ Account Details │ ← Title
│ Configure your bank... │ ← Description
├─────────────────────────────┤
│ [Account fields below] │
└─────────────────────────────┘
4. Installed DnD Kit for Sorting ✅
Packages installed:
- @dnd-kit/core
- @dnd-kit/sortable
- @dnd-kit/utilities
Prepared components:
- SortableGatewayItem wrapper
- Drag handle with GripVertical icon
- DnD sensors and context
Next: Wire up sorting logic and save order
Why This Matters:
✅ Bank account repeater will now work for BACS
✅ Supports all common WooCommerce field types
✅ Handles different data formats from backend
✅ Better organized settings with title separators
✅ Ready for drag-and-drop sorting
Files Modified:
- GenericGatewayForm.tsx: New field types + parsing
- Payments.tsx: DnD imports + sortable component
- package.json: DnD kit dependencies
b221fe8b59