UIU-2976 - Show country name in user address instead of country id. (#…

…2613)

CHANGELOG.md

@@ -15,6 +15,7 @@
 * Add `reminderFee` to loan action map. Fixes UIU-3014.
 * Create new permission 'Users: Can view profile pictures'. Refs UIU-3018.
 * Format currency values as currencies, not numbers. Refs UIU-2026.
+* Show country name in user address instead of country id. Refs UIU-2976.
 
 ## [10.0.4](https://github.com/folio-org/ui-users/tree/v10.0.4) (2023-11-10)
 [Full Changelog](https://github.com/folio-org/ui-users/compare/v10.0.3...v10.0.4)

src/components/UserAddresses/UserAddresses.js

@@ -80,13 +80,18 @@ class UserAddresses extends React.Component {
       },
     };
 
+    const updatedAddresses = addresses.map(addr => {
+      addr.country = intl.formatDisplayName(addr.country, { type: 'region' });
+      return addr;
+    });
+
     return (<AddressList
       label={<FormattedMessage id="ui-users.contact.addresses" />}
       onUpdate={this.onUpdate}
       onCreate={this.onUpdate}
       onDelete={this.onDelete}
       fieldComponents={addressFields}
-      addresses={addresses}
+      addresses={updatedAddresses}
       expanded={expanded}
       canEdit={editable}
       canDelete={editable}

src/components/UserAddresses/UserAddresses.test.js

@@ -15,6 +15,7 @@ const props = {
   onUpdate: updateMock,
   intl: {
     formatMessage: jest.fn(),
+    formatDisplayName: jest.fn(),
   },
   expanded: false,
   editable: true,

test/jest/__mock__/intl.mock.js

@@ -4,6 +4,7 @@ jest.mock('react-intl', () => {
   const intl = {
     formatMessage: ({ id }) => id,
     formatNumber: (value) => value,
+    formatDisplayName: (value) => value,
   };
 
   return {