feat: Add flags to Country select + Bank account repeater for BACS

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)
This commit is contained in:
dwindown
2025-11-06 12:23:38 +07:00
parent 39a215c188
commit 2008f2f141
3 changed files with 182 additions and 10 deletions

View File

@@ -249,11 +249,14 @@ export default function StoreDetailsPage() {
<SearchableSelect
value={settings.country}
onChange={(v) => updateSetting('country', v)}
options={countries.map((country: { code: string; name: string }) => ({
value: country.code,
label: country.name,
searchText: country.name,
}))}
options={countries.map((country: { code: string; name: string }) => {
const flagEmoji = countryCodeToEmoji(country.code);
return {
value: country.code,
label: `${flagEmoji} ${country.name}`.trim(),
searchText: `${country.code} ${country.name}`,
};
})}
placeholder="Select country..."
/>
</SettingsSection>