From f096a228245c9d24f2909aee2facdb06748b8eee Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Thu, 7 Aug 2025 21:30:47 +0200
Subject: [PATCH] Enhance CountryFlag to accept country names and codes

- Add actualCountryCode computed property to handle both 2-letter codes and country names
- Extend parseCountryInput with common country name variations (USA, UK, etc.)
- Import parseCountryInput utility in CountryFlag component
- Update template to use actualCountryCode instead of direct countryCode prop
---
 components/CountryFlag.vue | 26 ++++++++++++++++++++------
 utils/countries.ts         | 24 +++++++++++++++++++++++-
 2 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/components/CountryFlag.vue b/components/CountryFlag.vue
index 8520af9..9783476 100644
--- a/components/CountryFlag.vue
+++ b/components/CountryFlag.vue
@@ -2,24 +2,24 @@
   <span class="country-flag" :class="{ 'country-flag--small': size === 'small' }">
     <ClientOnly>
       <VueCountryFlag
-        v-if="countryCode"
-        :country="countryCode"
+        v-if="actualCountryCode"
+        :country="actualCountryCode"
         :size="flagSize"
-        :title="getCountryName(countryCode)"
+        :title="getCountryName(actualCountryCode)"
       />
       <template #fallback>
         <span class="flag-placeholder" :style="placeholderStyle">🏳️</span>
       </template>
     </ClientOnly>
-    <span v-if="showName && countryCode" class="country-name">
-      {{ getCountryName(countryCode) }}
+    <span v-if="showName && actualCountryCode" class="country-name">
+      {{ getCountryName(actualCountryCode) }}
     </span>
   </span>
 </template>
 
 <script setup lang="ts">
 import VueCountryFlag from 'vue-country-flag-next';
-import { getCountryName } from '~/utils/countries';
+import { getCountryName, parseCountryInput } from '~/utils/countries';
 
 interface Props {
   countryCode?: string;
@@ -35,6 +35,20 @@ const props = withDefaults(defineProps<Props>(), {
   square: false
 });
 
+// Convert country name to country code if needed
+const actualCountryCode = computed(() => {
+  if (!props.countryCode) return '';
+  
+  // If it's already a 2-letter code, use it
+  if (props.countryCode.length === 2) {
+    return props.countryCode.toUpperCase();
+  }
+  
+  // Try to parse country name to get the code
+  const parsed = parseCountryInput(props.countryCode);
+  return parsed || '';
+});
+
 const flagSize = computed(() => {
   const sizeMap = {
     small: 'sm',
diff --git a/utils/countries.ts b/utils/countries.ts
index 01b7359..f85fc4e 100644
--- a/utils/countries.ts
+++ b/utils/countries.ts
@@ -321,8 +321,30 @@ export const parseCountryInput = (input: string): string | null => {
     return trimmed.toUpperCase();
   }
   
+  // Handle common variations and abbreviations
+  const commonVariations: Record<string, string> = {
+    'usa': 'US',
+    'uk': 'GB',
+    'england': 'GB',
+    'britain': 'GB',
+    'great britain': 'GB',
+    'america': 'US',
+    'united states of america': 'US',
+    'south korea': 'KR',
+    'north korea': 'KP',
+    'czech republic': 'CZ',
+    'czechia': 'CZ',
+    'russia': 'RU',
+    'russian federation': 'RU',
+  };
+  
+  const lowerInput = trimmed.toLowerCase();
+  if (commonVariations[lowerInput]) {
+    return commonVariations[lowerInput];
+  }
+  
   // Search by name
-  const found = countriesByName.get(trimmed.toLowerCase());
+  const found = countriesByName.get(lowerInput);
   return found ? found.code : null;
 };