chore(application-system): Translate country list in phone prefix dro…

…pdown (#16708)

* chore(application-system): Translate country list in phone prefix dropdown

* PR comments

---------

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

libs/application/ui-fields/src/lib/PhoneFormField/PhoneFormField.tsx

@@ -78,6 +78,7 @@ export const PhoneFormField: FC<React.PropsWithChildren<Props>> = ({
                 )
               : undefined
           }
+          locale={locale as Locale}
           autoFocus={autoFocus}
           error={error}
           control={control}

libs/island-ui/core/src/lib/PhoneInput/PhoneInput.tsx

@@ -16,13 +16,18 @@ import { Icon } from '../IconRC/Icon'
 import { StringOption } from '../Select/Select.types'
 import { CountryCodeSelect } from './CountryCodeSelect/CountryCodeSelect'
 import NumberFormat, { NumberFormatValues } from 'react-number-format'
-import { countryCodes as countryCodeList } from './countryCodes'
+import { countryCodesIS, countryCodesEN } from './countryCodes'
 import { parse } from 'libphonenumber-js'
 import { useEffectOnce } from 'react-use'
+import { Locale } from '@island.is/shared/types'
 
 const DEFAULT_COUNTRY_CODE = '+354'
 
-const getCountryCodes = (allowedCountryCodes?: string[]): StringOption[] => {
+const getCountryCodes = (
+  lang: Locale,
+  allowedCountryCodes?: string[],
+): StringOption[] => {
+  const countryCodeList = lang === 'is' ? countryCodesIS : countryCodesEN
   return countryCodeList
     .filter((x) =>
       allowedCountryCodes ? allowedCountryCodes.includes(x.code) : true,
@@ -60,9 +65,10 @@ const getDefaultValue = (
  * getDefaultCountryCode("+455812345") // +45
  * getDefaultCountryCode("5812345") // +354
  */
-const getDefaultCountryCode = (phoneNumber?: string) => {
+const getDefaultCountryCode = (lang: Locale, phoneNumber?: string) => {
   if (!phoneNumber) return DEFAULT_COUNTRY_CODE
   const parsedPhoneNumber = parse(phoneNumber)
+  const countryCodeList = lang === 'is' ? countryCodesIS : countryCodesEN
 
   if (parsedPhoneNumber && parsedPhoneNumber.country) {
     return (
@@ -85,6 +91,7 @@ export type PhoneInputProps = Omit<
   | 'value'
 > & {
   defaultValue?: string
+  locale?: Locale
   value?: string
   backgroundColor?: InputBackgroundColor
   onValueChange?: (values: NumberFormatValues) => void
@@ -103,6 +110,7 @@ export const PhoneInput = forwardRef(
     const {
       name,
       label,
+      locale,
       errorMessage = '',
       hasError = Boolean(errorMessage),
       value,
@@ -135,10 +143,14 @@ export const PhoneInput = forwardRef(
     const [isMenuOpen, setIsMenuOpen] = useState(false)
     const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null)
     const mergedRefs = useMergeRefs(inputRef, ref || null)
+    const countryCodeList = locale === 'is' ? countryCodesIS : countryCodesEN
 
     // Extract default country code from value, with value from form context having priority
-    const defaultCountryCode = getDefaultCountryCode(value || defaultValue)
-    const countryCodes = getCountryCodes(allowedCountryCodes)
+    const defaultCountryCode = getDefaultCountryCode(
+      locale || 'is',
+      value || defaultValue,
+    )
+    const countryCodes = getCountryCodes(locale || 'is', allowedCountryCodes)
 
     const selected = countryCodes.find(
       (x) => x.value === defaultCountryCode,
@@ -171,7 +183,10 @@ export const PhoneInput = forwardRef(
      */
     const handleInputChange = (e: SyntheticEvent<HTMLInputElement>) => {
       if (e.currentTarget.value.startsWith('+')) {
-        const updatedCC = getDefaultCountryCode(e.currentTarget.value)
+        const updatedCC = getDefaultCountryCode(
+          locale || 'is',
+          e.currentTarget.value,
+        )
         e.currentTarget.value = e.currentTarget.value.replace(updatedCC, '')
         if (!disableDropdown) {
           setSelectedCountryCode(