UISACQCOMP-164 Sort the list of countries based on the current locale (…

…#721)

* UISACQCOMP-164 Sort the list of countries based on the current locale

* Fix test

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## (5.1.0 IN PROGRESS)
 
+* Sort the list of countries based on the current locale. Refs UISACQCOMP-164.
+
 ## [5.0.0](https://github.com/folio-org/stripes-acq-components/tree/v5.0.0) (2023-10-12)
 [Full Changelog](https://github.com/folio-org/stripes-acq-components/compare/v4.0.2...v5.0.0)
 

lib/CountryFilter/CountryFilter.js

@@ -8,10 +8,14 @@ import { SelectionFilter } from '../SelectionFilter';
 
 const CountryFilter = (props) => {
   const intl = useIntl();
-  const countriesOptions = useMemo(() => countries.map(c => ({
-    label: intl.formatMessage({ id: `stripes-components.countries.${c.alpha2}` }),
-    value: c.alpha3,
-  })), [intl]);
+  const countriesOptions = useMemo(() => (
+    countries
+      .map(c => ({
+        label: intl.formatDisplayName(c.alpha2, { type: 'region' }),
+        value: c.alpha3,
+      }))
+      .sort((a, b) => a.label.localeCompare(b.label))
+  ), [intl]);
 
   return (
     <SelectionFilter

lib/CountryFilter/CountryFilter.test.js

@@ -28,7 +28,7 @@ describe('CountryFilter component', () => {
   it('should invoke onChange callback when something is selected', async () => {
     const onChangeFilter = jest.fn();
     const { container, getByText } = renderFilter(false, onChangeFilter);
-    const afgOption = getByText('stripes-components.countries.AF');
+    const afgOption = getByText('AF');
     const button = container.querySelector('[id="org-filter-country-selection"]');
 
     expect(button).toBeEnabled();