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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user