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
