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
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)
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. Fixed Submenu Active State ✅
Problem: First submenu always active due to pathname.startsWith()
- /dashboard matches /dashboard/analytics
- Both items show as active
Solution: Use exact match instead
- const isActive = pathname === it.path
- Only clicked item shows as active
Files: DashboardSubmenuBar.tsx, SubmenuBar.tsx
2. Fixed Currency Symbol Display ✅
Problem: HTML entities showing (ءإ)
Solution: Use currency code when symbol has HTML entities
Before: United Arab Emirates dirham (ءإ)
After: United Arab Emirates dirham (AED)
Logic:
const displaySymbol = (!currency.symbol || currency.symbol.includes('&#'))
? currency.code
: currency.symbol;
3. Integrated Flags.json ✅
A. Moved flags.json to admin-spa/src/data/
B. Added flag support to SearchableSelect component
- New icon prop in Option interface
- Displays flag before label in trigger
- Displays flag before label in dropdown
C. Currency select now shows flags
- Flag icon next to each currency
- Visual country identification
- Better UX for currency selection
D. Dynamic store summary with flag
Before: 🇮🇩 Your store is located in Indonesia
After: [FLAG] Your store is located in Indonesia
- Flag based on selected currency
- Country name from flags.json
- Currency name (not just code)
- Dynamic updates when currency changes
Benefits:
✅ Clear submenu navigation
✅ Readable currency symbols
✅ Visual country flags
✅ Better currency selection UX
✅ Dynamic store location display
Files Modified:
- DashboardSubmenuBar.tsx: Exact match for active state
- SubmenuBar.tsx: Exact match for active state
- Store.tsx: Currency symbol fix + flags integration
- searchable-select.tsx: Icon support
- flags.json: Moved to admin-spa/src/data/
Problem: Payment gateway settings modal was using Dialog on all screen sizes
Solution: Split into responsive Dialog (desktop) and Drawer (mobile)
Changes:
1. Added Drawer and useMediaQuery imports
2. Added isDesktop hook: useMediaQuery("(min-width: 768px)")
3. Split modal into two conditional renders:
- Desktop (≥768px): Dialog with horizontal footer layout
- Mobile (<768px): Drawer with vertical footer layout
Desktop Layout (Dialog):
- Center modal overlay
- Horizontal footer: Cancel | View in WC | Save
- max-h-[80vh] for scrolling
Mobile Layout (Drawer):
- Bottom sheet (slides up from bottom)
- Vertical footer (full width buttons):
1. Save Settings (primary)
2. View in WooCommerce (ghost)
3. Cancel (outline)
- max-h-[90vh] for more screen space
- Swipe down to dismiss
Benefits:
✅ Native mobile experience with bottom sheet
✅ Easier to reach buttons on mobile (bottom of screen)
✅ Better one-handed use
✅ Swipe gesture to dismiss
✅ Desktop keeps familiar modal experience
User Changes Applied:
- AlertDialog z-index: z-50 → z-[999] (higher than other modals)
- Dialog max-height: max-h-[100vh] → max-h-[80vh] (better desktop UX)
Files Modified:
- Payments.tsx: Responsive Dialog/Drawer implementation
- alert-dialog.tsx: Increased z-index for proper layering
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!
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
Mobile Improvements:
1. Modal footer buttons now stack vertically on mobile
- Order: Save Settings (primary) -> View in WooCommerce -> Cancel
- Full width buttons on mobile for easier tapping
- Responsive padding: px-4 on mobile, px-6 on desktop
2. Refresh button moved inline with title
- Added action prop to SettingsLayout
- Refresh button now appears next to Payments title
- Cleaner, more compact layout
Payment Categories Simplified:
3. Removed Payment Providers section
- PayPal, Stripe are also 3rd party, not different
- Confusing to separate providers from other gateways
- All non-manual gateways now in single category
4. Renamed to Online Payment Methods
- Was: Manual + Payment Providers + 3rd Party
- Now: Manual + Online Payment Methods
- Clearer distinction: offline vs online payments
5. Unified styling for all online gateways
- Same card style as manual methods
- Status badges (Enabled/Disabled)
- Requirements alerts
- Manage button always visible
Mobile UX:
- Footer buttons: flex-col on mobile, flex-row on desktop
- Proper button ordering with CSS order utilities
- Responsive spacing and padding
- Touch-friendly button sizes
Files Modified:
- Payments.tsx: Mobile footer + simplified categories
- SettingsLayout.tsx: Added action prop for header actions
Result:
✅ Better mobile experience
✅ Clearer payment method organization
✅ Consistent styling across all gateways
✅ Issue 1: Modal Not Showing Current Values (FIXED!)
Problem: Opening modal showed defaults, not current saved values
Root Cause: Backend only sent field.default, not current value
Solution:
- Backend: Added field.value with current saved value
- normalize_field() now includes: value: $current_settings[$key]
- Frontend: Use field.value ?? field.default for initial data
- GenericGatewayForm initializes with current values
Result: ✅ Modal now shows "BNI Virtual Account 2" not "BNI Virtual Account"
✅ Issue 2: Sticky Modal Footer (FIXED!)
Problem: Footer scrolls away with long forms
Solution:
- Restructured modal: header + scrollable body + sticky footer
- DialogContent: flex flex-col with overflow on body only
- Footer: sticky bottom-0 with border-t
- Save button triggers form.requestSubmit()
Result: ✅ Cancel, View in WooCommerce, Save always visible
✅ Issue 3: HTML in Descriptions (FIXED!)
Problem: TriPay icon shows as raw HTML string
Solution:
- Changed: {field.description}
- To: dangerouslySetInnerHTML={{ __html: field.description }}
- Respects vendor creativity (images, formatting, links)
Result: ✅ TriPay icon image renders properly
📋 Technical Details:
Backend Changes (PaymentGatewaysProvider.php):
- get_gateway_settings() passes $current_settings to extractors
- normalize_field() adds 'value' => $current_settings[$key]
- All fields now have both default and current value
Frontend Changes:
- GatewayField interface: Added value?: string | boolean
- GenericGatewayForm: Initialize with field.value
- Modal structure: Header + Body (scroll) + Footer (sticky)
- Descriptions: Render as HTML with dangerouslySetInnerHTML
Files Modified:
- PaymentGatewaysProvider.php: Add current values to fields
- Payments.tsx: Restructure modal layout + add value to interface
- GenericGatewayForm.tsx: Use field.value + sticky footer + HTML descriptions
🎯 Result:
✅ Modal shows current saved values
✅ Footer always visible (no scrolling)
✅ Vendor HTML/images render properly
🔴 Issue 1: Toggle Loading State (CRITICAL FIX)
Problem: Optimistic update lies - toggle appears to work but fails
Solution:
- Removed ALL optimistic updates
- Added loading state tracking (togglingGateway)
- Disabled toggle during mutation
- Show real server state only
- User sees loading, not lies
Result: ✅ Honest UI - shows loading, then real state
🔴 Issue 2: 30s Save Time (CRITICAL FIX)
Problem: Saving gateway settings takes 30 seconds
Root Cause: WooCommerce analytics/tracking HTTP requests
Solution:
- Block HTTP during save: add_filter('pre_http_request', '__return_true', 999)
- Save settings (fast)
- Re-enable HTTP: remove_filter()
- Same fix as orders module
Result: ✅ Save now takes 1-2 seconds instead of 30s
🟡 Issue 3: Inconsistent Input Styling (FIXED)
Problem: email/tel inputs look different (browser defaults)
Solution:
- Added appearance-none to Input component
- Override -webkit-appearance
- Override -moz-appearance (for number inputs)
- Consistent styling for ALL input types
Result: ✅ All inputs look identical regardless of type
📋 Technical Details:
Toggle Flow (No More Lies):
User clicks → Disable toggle → Show loading → API call → Success → Refetch → Enable toggle
Save Flow (Fast):
Block HTTP → Save to DB → Unblock HTTP → Return (1-2s)
Input Styling:
text, email, tel, number, url, password → All identical appearance
Files Modified:
- Payments.tsx: Removed optimistic, added loading state
- PaymentGatewaysProvider.php: Block HTTP during save
- input.tsx: Override browser default styles
🎯 Result:
✅ No more lying optimistic updates
✅ 30s → 1-2s save time
✅ Consistent input styling
✅ Issue 1: Toggle Not Saving (CRITICAL FIX)
Problem: Toggle appeared to work but didn't persist
Root Cause: Missing query invalidation after toggle
Solution:
- Added queryClient.invalidateQueries after successful toggle
- Now fetches real server state after optimistic update
- Ensures SPA and WooCommerce stay in sync
✅ Issue 2: SearchableSelect Default Value
Problem: Showing 'Select country...' when Indonesia selected
Root Cause: WooCommerce stores country as 'ID:DKI_JAKARTA'
Solution:
- Split country:state format in backend
- Extract country code only for select
- Added timezone fallback to 'UTC' if empty
✅ Issue 3: 3rd Party Gateway Settings
Problem: TriPay showing 'Configure in WooCommerce' link
Solution:
- Replaced external link with Settings button
- Now opens GenericGatewayForm modal
- All WC form_fields render automatically
- TriPay fields (enable_icon, expired, checkout_method) work!
📋 Files Modified:
- Payments.tsx: Added invalidation + settings button
- StoreSettingsProvider.php: Split country format
- All 3rd party gateways now configurable in SPA
🎯 Result:
✅ Toggle saves correctly to WooCommerce
✅ Country/timezone show selected values
✅ All gateways with form_fields are editable
✅ No more 'Configure in WooCommerce' for compliant gateways
