fix(admin-ui): Correctly display currency names in all languages

Relates to #971

packages/admin-ui/src/lib/core/src/shared/pipes/locale-currency-name.pipe.spec.ts

@@ -3,15 +3,15 @@ import { LocaleCurrencyNamePipe } from './locale-currency-name.pipe';
 describe('LocaleCurrencyNamePipe', () => {
     const pipe = new LocaleCurrencyNamePipe();
     it('full output', () => {
-        expect(pipe.transform('usd')).toBe('US dollars ($)');
-        expect(pipe.transform('gbp')).toBe('British pounds (£)');
-        expect(pipe.transform('CNY')).toBe('Chinese yuan (CN¥)');
+        expect(pipe.transform('usd')).toBe('US Dollar ($)');
+        expect(pipe.transform('gbp')).toBe('British Pound (£)');
+        expect(pipe.transform('CNY')).toBe('Chinese Yuan (CN¥)');
     });
 
     it('name output', () => {
-        expect(pipe.transform('usd', 'name')).toBe('US dollars');
-        expect(pipe.transform('gbp', 'name')).toBe('British pounds');
-        expect(pipe.transform('CNY', 'name')).toBe('Chinese yuan');
+        expect(pipe.transform('usd', 'name')).toBe('US Dollar');
+        expect(pipe.transform('gbp', 'name')).toBe('British Pound');
+        expect(pipe.transform('CNY', 'name')).toBe('Chinese Yuan');
     });
 
     it('symbol output', () => {
@@ -26,7 +26,7 @@ describe('LocaleCurrencyNamePipe', () => {
     });
 
     it('returns code for unknown codes', () => {
-        expect(pipe.transform('zzz')).toBe('ZZZ (ZZZ)');
+        expect(pipe.transform('zzz')).toBe('zzz (ZZZ)');
     });
 
     it('returns empty string for empty input', () => {

packages/admin-ui/src/lib/core/src/shared/pipes/locale-currency-name.pipe.ts

@@ -26,23 +26,22 @@ export class LocaleCurrencyNamePipe extends LocaleBasePipe implements PipeTransf
         let symbol = '';
         const activeLocale = typeof locale === 'string' ? locale : this.locale ?? 'en';
 
+        // Awaiting TS types for this API: https://github.com/microsoft/TypeScript/pull/44022/files
+        const DisplayNames = (Intl as any).DisplayNames;
+
         if (display === 'full' || display === 'name') {
-            name = new Intl.NumberFormat(activeLocale, {
-                style: 'currency',
-                currency: value,
-                currencyDisplay: 'name',
-            })
-                .format(undefined as any)
-                .replace(/\s*NaN\s*/, '');
+            name = new DisplayNames([activeLocale], {
+                type: 'currency',
+            }).of(value);
         }
         if (display === 'full' || display === 'symbol') {
-            symbol = new Intl.NumberFormat(activeLocale, {
+            const parts = new Intl.NumberFormat(activeLocale, {
                 style: 'currency',
                 currency: value,
                 currencyDisplay: 'symbol',
-            })
-                .format(undefined as any)
-                .replace(/\s*NaN\s*/, '');
+            }).formatToParts();
+
+            symbol = parts.find(p => p.type === 'currency')?.value || value;
         }
         return display === 'full' ? `${name} (${symbol})` : display === 'name' ? name : symbol;
     }