1. Added Emoji Flags to Country/Region Select ✅
Before: Indonesia
After: 🇮🇩 Indonesia
Implementation:
- Uses same countryCodeToEmoji() helper
- Flags for all countries in dropdown
- Better visual identification
2. Implemented Bank Account Repeater Field ✅
New field type: 'account'
- Add/remove multiple bank accounts
- Each account has 6 fields:
* Account Name (required)
* Account Number (required)
* Bank Name (required)
* Sort Code / Branch Code (optional)
* IBAN (optional)
* BIC / SWIFT (optional)
UI Features:
✅ Compact card layout with muted background
✅ 2-column grid on desktop, 1-column on mobile
✅ Delete button per account (trash icon)
✅ Add button at bottom with plus icon
✅ Account numbering (Account 1, Account 2, etc.)
✅ Smaller inputs (h-9) for compact layout
✅ Clear labels with required indicators
Perfect for:
- Direct Bank Transfer (BACS)
- Manual payment methods
- Multiple bank account management
3. Updated GenericGatewayForm ✅
Added support:
- New 'account' field type
- BankAccount interface
- Repeater logic (add/remove/update)
- Plus and Trash2 icons from lucide-react
Data structure:
interface BankAccount {
account_name: string;
account_number: string;
bank_name: string;
sort_code?: string;
iban?: string;
bic?: string;
}
Benefits:
✅ Country select now has visual flags
✅ Bank accounts are easy to manage
✅ Compact, responsive UI
✅ Clear visual hierarchy
✅ Supports international formats (IBAN, BIC, Sort Code)
Files Modified:
- Store.tsx: Added flags to country select
- GenericGatewayForm.tsx: Bank account repeater
- SubmenuBar.tsx: Fullscreen prop (user change)
2008f2f141