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
1. Reverted Accordion Grouping ✅
Problem: Payment titles are editable by users
- User renames "BNI Virtual Account" to "BNI VA 2"
- Grouping breaks - gateway moves to new accordion
- Confusing UX when titles change
Solution: Back to flat list
- All payment methods in one list
- Titles can be edited without breaking layout
- Simpler, more predictable behavior
2. Added AlertDialog Component ✅
Installed: @radix-ui/react-alert-dialog
Created: alert-dialog.tsx (shadcn pattern)
Use for confirmations:
- "Are you sure you want to delete?"
- "Discard unsaved changes?"
- "Disable payment method?"
Example:
<AlertDialog>
<AlertDialogTrigger>Delete</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you sure?</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction>Delete</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
Shadcn Dialog Components:
✅ Dialog - Forms, settings (@radix-ui/react-dialog)
✅ Drawer - Mobile bottom sheet (vaul)
✅ AlertDialog - Confirmations (@radix-ui/react-alert-dialog)
All three are official shadcn components!
Created responsive dialog pattern for better mobile UX:
Components Added:
1. drawer.tsx - Vaul-based drawer component (bottom sheet)
2. responsive-dialog.tsx - Smart wrapper that switches based on screen size
3. use-media-query.ts - Hook to detect screen size
Pattern:
- Desktop (≥768px): Use Dialog (modal overlay)
- Mobile (<768px): Use Drawer (bottom sheet)
- Provides consistent API for both
Usage Example:
<ResponsiveDialog
open={isOpen}
onOpenChange={setIsOpen}
title="Settings"
description="Configure your options"
footer={<Button>Save</Button>}
>
<FormContent />
</ResponsiveDialog>
Benefits:
- Better mobile UX with native-feeling bottom sheet
- Easier to reach buttons on mobile
- Consistent desktop experience
- Single component API
Dependencies:
- npm install vaul (drawer library)
- @radix-ui/react-dialog (already installed)
Next Steps:
- Convert payment gateway modal to use ResponsiveDialog
- Use AlertDialog for confirmations
- Apply pattern to other modals in project
Note: Payment gateway modal needs custom implementation
due to complex layout (scrollable body + sticky footer)
1. Remove Enable/Disable Checkbox ✅
- Already controlled by toggle in main UI
- Skip rendering 'enabled' field in GenericGatewayForm
- Cleaner form, less redundancy
2. Use Field Default as Default Value ✅
- Already working: field.value ?? field.default
- Backend sends current value, falls back to default
- No changes needed
3. Group Online Payments by Provider ✅
- Installed @radix-ui/react-accordion
- Created accordion.tsx component
- Group by gateway.title (provider name)
- Show provider with method count
- Expand to see individual methods
Structure:
TriPay (3 payment methods)
├─ BNI Virtual Account
├─ Mandiri Virtual Account
└─ BCA Virtual Account
PayPal (1 payment method)
└─ PayPal
Benefits:
- Cleaner UI with less clutter
- Easy to find specific provider
- Shows method count at a glance
- Multiple providers can be expanded
- Better organization for many gateways
Files Modified:
- GenericGatewayForm.tsx: Skip enabled field
- Payments.tsx: Accordion grouping by provider
- accordion.tsx: New component (shadcn pattern)
Next: Dialog/Drawer responsive pattern
- Installed @radix-ui/react-switch
- Created switch.tsx following existing UI component patterns
- Fixes import error in ToggleField component
- Dev server now running successfully
