Add support for country codes to entity logo component

libs/common/src/lib/helper.spec.ts

@@ -6,6 +6,7 @@ import {
   canApplyFiltersToAccess,
   extractNumberFromString,
   getCountryCodeFromCurrency,
+  getEmojiFlag,
   getNumberFormatGroup,
   getStringOrNull,
   getStringOrUndefined,
@@ -122,6 +123,25 @@ describe('Helper', () => {
     });
   });
 
+  describe('Get emoji flag', () => {
+    it('Country code', () => {
+      expect(getEmojiFlag('US')).toEqual('🇺🇸');
+      expect(getEmojiFlag('us')).toEqual('🇺🇸');
+    });
+
+    it('European Union code', () => {
+      expect(getEmojiFlag('EU')).toEqual('🇪🇺');
+    });
+
+    it('Invalid country code', () => {
+      expect(getEmojiFlag('XX')).toEqual('');
+    });
+
+    it('Empty country code', () => {
+      expect(getEmojiFlag('')).toEqual('');
+    });
+  });
+
   describe('Get number format group', () => {
     let languageGetter: jest.SpyInstance<string, [], any>;
 

libs/common/src/lib/helper.ts

@@ -11,6 +11,7 @@ import {
 } from '@prisma/client';
 import { Big } from 'big.js';
 import { isISO4217CurrencyCode, isUUID } from 'class-validator';
+import { countries } from 'countries-list';
 import {
   getDate,
   getMonth,
@@ -64,6 +65,8 @@ export const DATE_FORMAT = 'yyyy-MM-dd';
 export const DATE_FORMAT_MONTHLY = 'MMMM yyyy';
 export const DATE_FORMAT_YEARLY = 'yyyy';
 
+const VALID_COUNTRY_CODES = new Set([...Object.keys(countries), 'EU']);
+
 // Settings which describe the person looking at the screen rather than the
 // portfolio being looked at. They stay with the authenticated user while
 // impersonating. Every other setting follows the impersonated user.
@@ -438,15 +441,15 @@ export function getDateWithTimeFormatString(aLocale?: string) {
 }
 
 export function getEmojiFlag(aCountryCode: string) {
-  if (!aCountryCode) {
+  const countryCode = aCountryCode?.toUpperCase();
-    return aCountryCode;
+
+  if (!countryCode || !VALID_COUNTRY_CODES.has(countryCode)) {
+    return '';
   }
 
-  return aCountryCode
+  return countryCode.replace(/./g, (character) =>
-    .toUpperCase()
+    String.fromCodePoint(127397 + character.charCodeAt(0))
-    .replace(/./g, (character) =>
+  );
-      String.fromCodePoint(127397 + character.charCodeAt(0))
-    );
 }
 
 export function getLocale() {

libs/ui/src/lib/entity-logo/entity-logo.component.html

@@ -1,4 +1,4 @@
-@if (countryCode) {
+@if (emojiFlag) {
   <span
     class="cursor-default d-block logo overflow-hidden position-relative"
     role="img"
@@ -10,7 +10,7 @@
       aria-hidden="true"
       class="align-items-center d-flex emoji justify-content-center line-height-1 position-absolute"
     >
-      {{ getEmojiFlag(countryCode) }}
+      {{ emojiFlag }}
     </span>
   </span>
 } @else if (src && !hasError) {

libs/ui/src/lib/entity-logo/entity-logo.component.ts

@@ -27,11 +27,10 @@ export class GfEntityLogoComponent implements OnChanges {
   @Input() tooltip: string;
   @Input() url: string;
 
+  public emojiFlag = '';
   public hasError = false;
   public src?: string;
 
-  public readonly getEmojiFlag = getEmojiFlag;
-
   public constructor(
     private readonly imageSourceService: EntityLogoImageSourceService
   ) {}
@@ -39,6 +38,8 @@ export class GfEntityLogoComponent implements OnChanges {
   public ngOnChanges() {
     this.hasError = false;
 
+    this.emojiFlag = getEmojiFlag(this.countryCode);
+
     if (this.dataSource && this.symbol) {
       this.src = this.imageSourceService.getLogoUrlByAssetProfileIdentifier({
         dataSource: this.dataSource,