Telephone country code select (#9473)

* add telephone code select

* add flags

* run svgo on flags

* get it somewhat working on web

* get web closed state working

* verify country code we get from geo

* trim down names to shorter common versions

* add labels to other selects

* make international tel codes a static object

* add component to storybook

* Update src/lib/international-telephone-codes.ts

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* update to new geo hook

* use Intl.DisplayNames, add polyfill

* use in rather than keys().includes()

---------

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

src/locale/helpers.ts

@@ -57,7 +57,7 @@ function getLocalizedLanguage(
 
 export function languageName(language: Language, appLang: string): string {
   // if Intl.DisplayNames is unavailable on the target, display the English name
-  if (!(Intl as any).DisplayNames) {
+  if (!Intl.DisplayNames) {
     return language.name
   }
 
@@ -279,3 +279,44 @@ export function findSupportedAppLanguage(languageTags: (string | undefined)[]) {
   }
   return AppLanguage.en
 }
+
+/**
+ * Gets region name for a given country code and language.
+ *
+ * Falls back to English if unavailable/error, and if that fails, returns the country code.
+ *
+ * Intl.DisplayNames is widely available + has been polyfilled on native
+ */
+export function regionName(countryCode: string, appLang: string): string {
+  const translatedName = getLocalizedRegionName(countryCode, appLang)
+
+  if (translatedName) {
+    return translatedName
+  }
+
+  // Fallback: get English name. Needed for i.e. Esperanto
+  const englishName = getLocalizedRegionName(countryCode, 'en')
+  if (englishName) {
+    return englishName
+  }
+
+  // Final fallback: return country code
+  return countryCode
+}
+
+function getLocalizedRegionName(
+  countryCode: string,
+  appLang: string,
+): string | undefined {
+  try {
+    const allNames = new Intl.DisplayNames([appLang], {
+      type: 'region',
+      fallback: 'none',
+    })
+
+    return allNames.of(countryCode)
+  } catch (err) {
+    console.warn('Error getting localized region name:', err)
+    return undefined
+  }
+}