feat: add country selection translations and update country name retrieval

apps/backoffice/src/app/i18n/locales/am.ts

@@ -262,6 +262,11 @@ export const am: Translations = {
     },
   },
 
+  country: {
+    select: 'አገር ይምረጡ',
+    notFound: 'ምንም አገር አልተገኘም',
+  },
+
   location: {
     title: 'አካባቢዎች',
     hierarchy: 'የአካባቢ ተዋረድ',

apps/backoffice/src/app/i18n/locales/en.ts

@@ -260,6 +260,11 @@ export const en = {
     },
   },
 
+  country: {
+    select: 'Select a country',
+    notFound: 'No countries found',
+  },
+
   location: {
     title: 'Locations',
     hierarchy: 'Location Hierarchy',

apps/portal/src/app/features/endorsement/pages/EndorsementPage.tsx

@@ -232,7 +232,7 @@ function ApplicationWizard({ onDone }: { onDone: () => void }) {
           <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md" mb="lg">
             {[
               ['CoC Number',  cocNo],
-              ['Country',     getCountryName(country)],
+              ['Country',     getCountryName(country, 'en')],
               ['Issuer',      issuer],
               ['CoC Type',    cocType],
               ['Issue Date',  issueDate],

apps/portal/src/app/features/waiver/pages/WaiverApplicationPage.tsx

@@ -266,7 +266,7 @@ export function WaiverApplicationPage() {
           businessLicenseNumber, applicantAddress, reasonNonEsl, bankName, bankBranch,
           letterRecipient, letterLanguage,
           productName, productDescription, quantity, unitOfMeasurement,
-          invoiceNumber, invoiceDate, invoiceAmount, countryOfOrigin: getCountryName(countryOfOrigin), supplierName,
+          invoiceNumber, invoiceDate, invoiceAmount, countryOfOrigin: getCountryName(countryOfOrigin, 'en'), supplierName,
           portOfLoading, portOfDischarge, fromPortName, toPortName, vesselName, carrierName,
           billOfLadingNumber, estimatedArrivalDate, actualArrivalDate,
         },

apps/portal/src/app/i18n/locales/am.ts

@@ -170,6 +170,11 @@ export const am: Translations = {
     },
   },
 
+  country: {
+    select: 'አገር ይምረጡ',
+    notFound: 'ምንም አገር አልተገኘም',
+  },
+
   location: {
     select: 'ይምረጡ...',
     noOptions: 'ምንም አማራጮች አልተገኙም',

apps/portal/src/app/i18n/locales/en.ts

@@ -168,6 +168,11 @@ export const en = {
     },
   },
 
+  country: {
+    select: 'Select a country',
+    notFound: 'No countries found',
+  },
+
   location: {
     select: 'Select...',
     noOptions: 'No options found',

libs/ui/src/lib/input/CountrySelect.tsx

@@ -1,65 +1,24 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Group, Select, Text, type ComboboxItem, type SelectProps } from '@mantine/core';
-import { getData, getName, overwrite } from 'country-list';
+import { registerLocale, getNames, getName } from 'i18n-iso-countries';
 import * as Flags from 'country-flag-icons/react/3x2';
+import en from 'i18n-iso-countries/langs/en.json';
+import am from 'i18n-iso-countries/langs/am.json';
 
-// country-list ships raw ISO 3166 register names, which invert qualifiers into
+// Registered once at module load — locale data is static.
-// a trailing "(the)" / "(Qualifier of)" suffix — e.g. "Iran (Islamic Republic of)".
+registerLocale(en);
-// Reorder every such entry into natural reading order ("Islamic Republic of Iran").
+registerLocale(am);
-// Full list + codes still come from country-list; this only rewrites display text.
-overwrite([
-  { code: 'AE', name: 'United Arab Emirates' },
-  { code: 'BO', name: 'Plurinational State of Bolivia' },
-  { code: 'BS', name: 'Bahamas' },
-  { code: 'CC', name: 'Cocos (Keeling) Islands' },
-  { code: 'CD', name: 'Democratic Republic of the Congo' },
-  { code: 'CF', name: 'Central African Republic' },
-  { code: 'CG', name: 'Congo' },
-  { code: 'CK', name: 'Cook Islands' },
-  { code: 'DO', name: 'Dominican Republic' },
-  { code: 'FK', name: 'Falkland Islands (Malvinas)' },
-  { code: 'FM', name: 'Federated States of Micronesia' },
-  { code: 'FO', name: 'Faroe Islands' },
-  { code: 'GB', name: 'United Kingdom of Great Britain and Northern Ireland' },
-  { code: 'GM', name: 'Gambia' },
-  { code: 'IO', name: 'British Indian Ocean Territory' },
-  { code: 'IR', name: 'Islamic Republic of Iran' },
-  { code: 'KM', name: 'Comoros' },
-  { code: 'KP', name: "Democratic People's Republic of Korea" },
-  { code: 'KR', name: 'Republic of Korea' },
-  { code: 'KY', name: 'Cayman Islands' },
-  { code: 'LA', name: "Lao People's Democratic Republic" },
-  { code: 'MD', name: 'Republic of Moldova' },
-  { code: 'MF', name: 'Saint Martin' },
-  { code: 'MH', name: 'Marshall Islands' },
-  { code: 'MP', name: 'Northern Mariana Islands' },
-  { code: 'NE', name: 'Niger' },
-  { code: 'NL', name: 'Kingdom of the Netherlands' },
-  { code: 'PH', name: 'Philippines' },
-  { code: 'PS', name: 'State of Palestine' },
-  { code: 'RU', name: 'Russian Federation' },
-  { code: 'SD', name: 'Sudan' },
-  { code: 'SX', name: 'Sint Maarten' },
-  { code: 'SY', name: 'Syrian Arab Republic' },
-  { code: 'TC', name: 'Turks and Caicos Islands' },
-  { code: 'TF', name: 'French Southern Territories' },
-  { code: 'TW', name: 'Taiwan' },
-  { code: 'TZ', name: 'United Republic of Tanzania' },
-  { code: 'UM', name: 'United States Minor Outlying Islands' },
-  { code: 'US', name: 'United States of America' },
-  { code: 'VA', name: 'Holy See' },
-  { code: 'VE', name: 'Bolivarian Republic of Venezuela' },
-  { code: 'VG', name: 'British Virgin Islands' },
-  { code: 'VI', name: 'United States Virgin Islands' },
-]);
 
-// Built once at module load — static data, no hook memoization needed.
+type CountryLang = 'en' | 'am';
-const COUNTRIES = getData()
-  .map(({ code, name }) => ({ value: code, label: name }))
-  .sort((a, b) => a.label.localeCompare(b.label));
 
-/** English country name for an alpha-2 code; '' when unset/unknown. */
+function resolveLang(lng: string): CountryLang {
-export function getCountryName(code: string | null | undefined): string {
+  return lng === 'am' ? 'am' : 'en';
-  return code ? (getName(code) ?? '') : '';
+}
+
+/** Localized country name for an alpha-2 code; '' when unset/unknown. */
+export function getCountryName(code: string | null | undefined, lang: CountryLang = 'en'): string {
+  return code ? (getName(code, lang) ?? '') : '';
 }
 
 function CountryFlag({ code }: { code: string }) {
@@ -98,19 +57,30 @@ export interface CountrySelectProps {
 export function CountrySelect({
   value,
   onChange,
-  placeholder = 'Select a country',
+  placeholder,
   ...rest
 }: CountrySelectProps) {
+  const { t, i18n } = useTranslation();
+  const lang = resolveLang(i18n.language);
+
+  const countries = useMemo(
+    () =>
+      Object.entries(getNames(lang))
+        .map(([code, label]) => ({ value: code, label }))
+        .sort((a, b) => a.label.localeCompare(b.label, lang)),
+    [lang],
+  );
+
   return (
     <Select
-      data={COUNTRIES}
+      data={countries}
       value={value}
       onChange={onChange}
-      placeholder={placeholder}
+      placeholder={placeholder ?? t('country.select')}
       leftSection={value ? <CountryFlag code={value} /> : undefined}
       renderOption={renderCountryOption}
       filter={filterCountries}
-      nothingFoundMessage="No countries found"
+      nothingFoundMessage={t('country.notFound')}
       searchable
       clearable
       maxDropdownHeight={320}

package-lock.json

@@ -23,9 +23,9 @@
         "@tria-plc/iamui": "file:local-packages/tria-plc-iamui-0.1.1.tgz",
         "clsx": "^2.1.1",
         "country-flag-icons": "^1.6.20",
-        "country-list": "^2.4.1",
         "date-fns": "^4.1.0",
         "dayjs": "^1.11.20",
+        "i18n-iso-countries": "^7.14.0",
         "i18next": "^25.6.0",
         "js-cookie": "^3.0.8",
         "react": "^19.0.0",
@@ -46,7 +46,6 @@
         "@nx/react": "^22.5.4",
         "@nx/vite": "^22.5.4",
         "@nx/vitest": "^22.5.4",
-        "@types/country-list": "^2.1.4",
         "@types/js-cookie": "^3.0.6",
         "@types/node": "^22.0.0",
         "@types/react": "^19.2.17",
@@ -3873,18 +3872,6 @@
         }
       }
     },
-    "node_modules/@mui/x-date-pickers/node_modules/@types/react": {
-      "version": "18.3.31",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.31.tgz",
-      "integrity": "sha512-vfEqpXTvwT91yhmwdfouStN2hSKwTvyRs8qpLfADyrq/kxDw0hZM7Wk9Ug1FELj8hIby+S/+kQCSRFF32nv2Qw==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@types/prop-types": "*",
-        "csstype": "^3.2.2"
-      }
-    },
     "node_modules/@mui/x-date-pickers/node_modules/react-is": {
       "version": "19.2.7",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.7.tgz",
@@ -9025,13 +9012,6 @@
         "assertion-error": "^2.0.1"
       }
     },
-    "node_modules/@types/country-list": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@types/country-list/-/country-list-2.1.4.tgz",
-      "integrity": "sha512-c4orjm0wT+BRt6Ynf2/QRRL+iMX4SdLT11jAjKqkJ7mQr/DLOmdz7qR8i04j9Y7wFSoP70cXJc18FN4YGNgGaA==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@types/d3-array": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
@@ -11275,12 +11255,6 @@
       "integrity": "sha512-py8JiEKzjhYw6HPJ0L7SxLgCYim36UPRTZX43/kqGueUCZLSvnrqAiwW8HtQibur7mdkFQUkjOgdK+o/9FBtaw==",
       "license": "MIT"
     },
-    "node_modules/country-list": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/country-list/-/country-list-2.4.1.tgz",
-      "integrity": "sha512-KhVV/UfUV3dSNpsWIqHTQxLpYDKPKz1UwkRjadt+YbX2PRhyCEihEoS5XgB7J7AMXpkicvl+tRHvkNI5wbji/g==",
-      "license": "MIT"
-    },
     "node_modules/crc-32": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
@@ -11773,6 +11747,12 @@
       "integrity": "sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q==",
       "license": "MIT"
     },
+    "node_modules/diacritics": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/diacritics/-/diacritics-1.3.0.tgz",
+      "integrity": "sha512-wlwEkqcsaxvPJML+rDh/2iS824jbREk6DUMUKkEaSlxdYHeS43cClJtsWglvw2RfeXGm6ohKDqsXteJ5sP5enA==",
+      "license": "MIT"
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -11966,7 +11946,7 @@
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
       "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "iconv-lite": "^0.6.2"
@@ -13713,6 +13693,18 @@
       "integrity": "sha512-kvL8xYl5QMTh+LwohVN72ciOxC0OEV79IPdJSTwEXok9y9QHebXGdFgrED4sWfiax/ODx++CAMk3hMy4XPJPOw==",
       "license": "ISC"
     },
+    "node_modules/i18n-iso-countries": {
+      "version": "7.14.0",
+      "resolved": "https://registry.npmjs.org/i18n-iso-countries/-/i18n-iso-countries-7.14.0.tgz",
+      "integrity": "sha512-nXHJZYtNrfsi1UQbyRqm3Gou431elgLjKl//CYlnBGt5aTWdRPH1PiS2T/p/n8Q8LnqYqzQJik3Q7mkwvLokeg==",
+      "license": "MIT",
+      "dependencies": {
+        "diacritics": "1.3.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/i18next": {
       "version": "25.10.10",
       "resolved": "https://registry.npmjs.org/i18next/-/i18next-25.10.10.tgz",
@@ -13757,7 +13749,7 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
@@ -17943,7 +17935,7 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/sax": {

package.json

@@ -28,9 +28,9 @@
     "@tria-plc/iamui": "file:local-packages/tria-plc-iamui-0.1.1.tgz",
     "clsx": "^2.1.1",
     "country-flag-icons": "^1.6.20",
-    "country-list": "^2.4.1",
     "date-fns": "^4.1.0",
     "dayjs": "^1.11.20",
+    "i18n-iso-countries": "^7.14.0",
     "i18next": "^25.6.0",
     "js-cookie": "^3.0.8",
     "react": "^19.0.0",
@@ -51,7 +51,6 @@
     "@nx/react": "^22.5.4",
     "@nx/vite": "^22.5.4",
     "@nx/vitest": "^22.5.4",
-    "@types/country-list": "^2.1.4",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^22.0.0",
     "@types/react": "^19.2.17",

tsconfig.base.json

@@ -8,6 +8,7 @@
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "importHelpers": true,
+    "resolveJsonModule": true,
     "target": "ES2022",
     "module": "ESNext",
     "lib": ["ES2022", "dom"],