feat: add translations for countrycode selector (phone)

apps/scandic-web/components/TempDesignSystem/Form/Phone/index.tsx

@@ -1,12 +1,15 @@
 "use client"
 import "react-international-phone/style.css"
 
-import { useEffect } from "react"
+import { useEffect, useMemo } from "react"
 import { TextField } from "react-aria-components"
 import { useFormContext, useWatch } from "react-hook-form"
 import {
+  buildCountryData,
   CountrySelector,
+  defaultCountries,
   DialCodePreview,
+  parseCountry,
   type ParsedCountry,
   usePhoneInput,
 } from "react-international-phone"
@@ -41,6 +44,21 @@ export default function Phone({
 }: PhoneProps) {
   const intl = useIntl()
   const lang = useLang()
+
+  const countries = useMemo(() => {
+    return defaultCountries.map((dc) => {
+      const country = parseCountry(dc)
+      const translatedCountryName = intl.formatDisplayName(
+        country.iso2.toUpperCase(),
+        { type: "region" }
+      )
+      if (translatedCountryName) {
+        country.name = translatedCountryName
+      }
+      return buildCountryData(country)
+    })
+  }, [intl])
+
   const { formState, getFieldState, register, setValue } = useFormContext()
   const fieldState = getFieldState(name)
   const ccFieldState = getFieldState(countrySelectorName)
@@ -49,6 +67,7 @@ export default function Phone({
   })
 
   const { country, setCountry } = usePhoneInput({
+    countries,
     defaultCountry: phoneNumberCC
       ? phoneNumberCC
       : getDefaultCountryFromLang(lang),
@@ -73,6 +92,7 @@ export default function Phone({
   return (
     <div className={`${styles.phone} ${className}`}>
       <CountrySelector
+        countries={countries}
         disabled={readOnly}
         dropdownArrowClassName={styles.arrow}
         flagClassName={styles.flag}