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!
108155db50