Feature/add emoji flags to countries on product page (#8097)

Add emoji flags to countries

apps/client/src/app/pages/resources/personal-finance-tools/interfaces/interfaces.ts

@@ -1,6 +1,16 @@
 import type { Product } from '@ghostfolio/common/interfaces';
 
-export type ResolvedProduct = Omit<Product, 'categories' | 'platforms'> & {
+export interface ResolvedRegion {
+  emojiFlag?: string;
+  name: string;
+}
+
+export type ResolvedProduct = Omit<
+  Product,
+  'categories' | 'origin' | 'platforms' | 'regions'
+> & {
   categories?: string[];
+  origin?: ResolvedRegion;
   platforms?: string[];
+  regions?: ResolvedRegion[];
 };

apps/client/src/app/pages/resources/personal-finance-tools/product-page.component.ts

@@ -1,4 +1,4 @@
-import { getCountryName } from '@ghostfolio/common/helper';
+import { getCountryName, getEmojiFlag } from '@ghostfolio/common/helper';
 import { Product } from '@ghostfolio/common/interfaces';
 import { personalFinanceTools } from '@ghostfolio/common/personal-finance-tools';
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
@@ -14,7 +14,7 @@ import {
 import { MatButtonModule } from '@angular/material/button';
 import { ActivatedRoute, RouterModule } from '@angular/router';
 
-import { ResolvedProduct } from './interfaces/interfaces';
+import { ResolvedProduct, ResolvedRegion } from './interfaces/interfaces';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -58,9 +58,9 @@ export class GfProductPageComponent {
       // 'Ukrainian (Українська)'
     ],
     name: 'Ghostfolio',
-    origin: getCountryName({ code: 'CH' }),
+    origin: this.getResolvedCountry('CH'),
     platforms: this.getSortedTranslations(['ANDROID', 'WEB']),
-    regions: [$localize`Global`],
+    regions: [{ name: $localize`Global` }],
     slogan: 'Open Source Wealth Management',
     useAnonymously: true
   }));
@@ -75,20 +75,16 @@ export class GfProductPageComponent {
       name: product?.name ?? '',
       ...product,
       categories: this.getSortedTranslations(product?.categories),
-      platforms: this.getSortedTranslations(product?.platforms)
-    };
-
-    if (mappedProduct.origin) {
-      mappedProduct.origin = getCountryName({ code: mappedProduct.origin });
-    }
-
-    if (mappedProduct.regions) {
-      mappedProduct.regions = mappedProduct.regions.map((region) => {
+      origin: product?.origin
+        ? this.getResolvedCountry(product.origin)
+        : undefined,
+      platforms: this.getSortedTranslations(product?.platforms),
+      regions: product?.regions?.map((region) => {
         return region === 'Global'
-          ? translate(region)
-          : getCountryName({ code: region });
-      });
-    }
+          ? { name: translate(region) }
+          : this.getResolvedCountry(region);
+      })
+    };
 
     return mappedProduct;
   });
@@ -122,7 +118,7 @@ export class GfProductPageComponent {
                 ...(categories ?? []),
                 ...(platforms ?? []),
                 name,
-                origin
+                origin?.name
               ];
             }
           ),
@@ -175,6 +171,13 @@ export class GfProductPageComponent {
     });
   }
 
+  private getResolvedCountry(code: string): ResolvedRegion {
+    return {
+      emojiFlag: getEmojiFlag(code),
+      name: getCountryName({ code })
+    };
+  }
+
   private getSortedTranslations(values?: string[]) {
     return values
       ?.map((value) => {

apps/client/src/app/pages/resources/personal-finance-tools/product-page.html

@@ -100,27 +100,47 @@
               </tr>
               <tr class="mat-mdc-row">
                 <td class="mat-mdc-cell px-3 py-2 text-right" i18n>Origin</td>
-                <td class="mat-mdc-cell px-1 py-2">{{ product1().origin }}</td>
-                <td class="mat-mdc-cell px-1 py-2">{{ product2().origin }}</td>
+                <td class="mat-mdc-cell px-1 py-2">
+                  @if (product1().origin; as origin) {
+                    <span aria-hidden="true">{{ origin.emojiFlag }}</span
+                    >&nbsp;{{ origin.name }}
+                  }
+                </td>
+                <td class="mat-mdc-cell px-1 py-2">
+                  @if (product2().origin; as origin) {
+                    <span aria-hidden="true">{{ origin.emojiFlag }}</span
+                    >&nbsp;{{ origin.name }}
+                  }
+                </td>
               </tr>
               <tr class="mat-mdc-row">
                 <td class="mat-mdc-cell px-3 py-2 text-right" i18n>Region</td>
                 <td class="mat-mdc-cell px-1 py-2">
                   @for (
                     region of product1().regions;
-                    track region;
+                    track region.name;
                     let isLast = $last
                   ) {
-                    {{ region }}{{ isLast ? '' : ', ' }}
+                    @if (region.emojiFlag) {
+                      <span aria-hidden="true">{{ region.emojiFlag }}</span
+                      >&nbsp;{{ region.name }}{{ isLast ? '' : ', ' }}
+                    } @else {
+                      {{ region.name }}{{ isLast ? '' : ', ' }}
+                    }
                   }
                 </td>
                 <td class="mat-mdc-cell px-1 py-2">
                   @for (
                     region of product2().regions;
-                    track region;
+                    track region.name;
                     let isLast = $last
                   ) {
-                    {{ region }}{{ isLast ? '' : ', ' }}
+                    @if (region.emojiFlag) {
+                      <span aria-hidden="true">{{ region.emojiFlag }}</span
+                      >&nbsp;{{ region.name }}{{ isLast ? '' : ', ' }}
+                    } @else {
+                      {{ region.name }}{{ isLast ? '' : ', ' }}
+                    }
                   }
                 </td>
               </tr>