feat: Add support for more WooCommerce field types + prepare for sorting

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

admin-spa/src/components/settings/GenericGatewayForm.tsx

@@ -51,7 +51,8 @@ interface GenericGatewayFormProps {
 }
 
 // Supported field types (outside component to avoid re-renders)
-const SUPPORTED_FIELD_TYPES = ['text', 'password', 'checkbox', 'select', 'textarea', 'number', 'email', 'url', 'account'];
+// Note: WooCommerce BACS uses 'account' type for bank account repeater
+const SUPPORTED_FIELD_TYPES = ['text', 'password', 'checkbox', 'select', 'textarea', 'number', 'email', 'url', 'account', 'title', 'multiselect'];
 
 // Bank account interface
 interface BankAccount {
@@ -136,6 +137,20 @@ export function GenericGatewayForm({ gateway, onSave, onCancel, hideFooter = fal
     }
 
     switch (field.type) {
+      case 'title':
+        // Title field is just a heading/separator
+        return (
+          <div key={field.id} className="pt-4 pb-2 border-b">
+            <h3 className="text-base font-semibold">{field.title}</h3>
+            {field.description && (
+              <p 
+                className="text-sm text-muted-foreground mt-1" 
+                dangerouslySetInnerHTML={{ __html: field.description }}
+              />
+            )}
+          </div>
+        );
+
       case 'checkbox':
         // Skip "enabled" field - already controlled by toggle in main UI
         if (field.id === 'enabled') {
@@ -229,7 +244,18 @@ export function GenericGatewayForm({ gateway, onSave, onCancel, hideFooter = fal
 
       case 'account':
         // Bank account repeater field
-        const accounts = (value as BankAccount[]) || [];
+        // Parse value if it's a string (serialized PHP or JSON)
+        let accounts: BankAccount[] = [];
+        if (typeof value === 'string' && value) {
+          try {
+            accounts = JSON.parse(value);
+          } catch (e) {
+            // If not JSON, might be empty or invalid
+            accounts = [];
+          }
+        } else if (Array.isArray(value)) {
+          accounts = value;
+        }
         
         const addAccount = () => {
           const newAccounts = [...accounts, {