Feature/improve personal finance tools product page (#3599)

* Localize origin
* Localize regions
* Localize tags

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

@@ -1,6 +1,7 @@
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { Product } from '@ghostfolio/common/interfaces';
 import { personalFinanceTools } from '@ghostfolio/common/personal-finance-tools';
+import { translate } from '@ghostfolio/ui/i18n';
 
 import { CommonModule } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
@@ -26,6 +27,7 @@ export class GfProductPageComponent implements OnInit {
     '/' + $localize`resources`,
     'personal-finance-tools'
   ];
+  public tags: string[];
 
   public constructor(
     private dataService: DataService,
@@ -56,7 +58,7 @@ export class GfProductPageComponent implements OnInit {
       ],
       name: 'Ghostfolio',
       origin: $localize`Switzerland`,
-      region: $localize`Global`,
+      regions: [$localize`Global`],
       slogan: 'Open Source Wealth Management',
       useAnonymously: true
     };
@@ -64,5 +66,41 @@ export class GfProductPageComponent implements OnInit {
     this.product2 = personalFinanceTools.find(({ key }) => {
       return key === this.route.snapshot.data['key'];
     });
+
+    if (this.product2.origin) {
+      this.product2.origin = translate(this.product2.origin);
+    }
+
+    if (this.product2.regions) {
+      this.product2.regions = this.product2.regions.map((region) => {
+        return translate(region);
+      });
+    }
+
+    this.tags = [
+      this.product1.name,
+      this.product2.name,
+      $localize`Alternative`,
+      $localize`App`,
+      $localize`Budgeting`,
+      $localize`Community`,
+      $localize`Family Office`,
+      `Fintech`,
+      $localize`Investment`,
+      $localize`Investor`,
+      $localize`Open Source`,
+      `OSS`,
+      $localize`Personal Finance`,
+      $localize`Privacy`,
+      $localize`Portfolio`,
+      $localize`Software`,
+      $localize`Tool`,
+      $localize`User Experience`,
+      $localize`Wealth`,
+      $localize`Wealth Management`,
+      `WealthTech`
+    ].sort((a, b) => {
+      return a.localeCompare(b, undefined, { sensitivity: 'base' });
+    });
   }
 }

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

@@ -80,8 +80,24 @@
               </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">{{ product1.region }}</td>
-                <td class="mat-mdc-cell px-1 py-2">{{ product2.region }}</td>
+                <td class="mat-mdc-cell px-1 py-2">
+                  @for (
+                    region of product1.regions;
+                    track region;
+                    let isLast = $last
+                  ) {
+                    {{ region }}{{ isLast ? '' : ', ' }}
+                  }
+                </td>
+                <td class="mat-mdc-cell px-1 py-2">
+                  @for (
+                    region of product2.regions;
+                    track region;
+                    let isLast = $last
+                  ) {
+                    {{ region }}{{ isLast ? '' : ', ' }}
+                  }
+                </td>
               </tr>
               <tr class="mat-mdc-row">
                 <td class="mat-mdc-cell px-3 py-2 text-right" i18n>
@@ -236,69 +252,11 @@
         </section>
         <section class="mb-4">
           <ul class="list-inline">
-            <li class="list-inline-item">
-              <span class="badge badge-light">Alternative</span>
-            </li>
-            <li class="list-inline-item">
-              <span class="badge badge-light">App</span>
-            </li>
-            <li class="list-inline-item">
-              <span class="badge badge-light">Budgeting</span>
-            </li>
-            <li class="list-inline-item">
-              <span class="badge badge-light">Community</span>
-            </li>
-            <li class="list-inline-item">
-              <span class="badge badge-light">Family Office</span>
-            </li>
-            <li class="list-inline-item">
-              <span class="badge badge-light">Fintech</span>
-            </li>
-            <li class="list-inline-item">
-              <span class="badge badge-light">{{ product1.name }}</span>
-            </li>
-            <li class="list-inline-item">
-              <span class="badge badge-light">Investment</span>
-            </li>
-            <li class="list-inline-item">
-              <span class="badge badge-light">Investor</span>
-            </li>
-            <li class="list-inline-item">
-              <span class="badge badge-light">Open Source</span>
-            </li>
-            <li class="list-inline-item">
-              <span class="badge badge-light">OSS</span>
-            </li>
-            <li class="list-inline-item">
-              <span class="badge badge-light">Personal Finance</span>
-            </li>
-            <li class="list-inline-item">
-              <span class="badge badge-light">Privacy</span>
-            </li>
-            <li class="list-inline-item">
-              <span class="badge badge-light">Portfolio</span>
-            </li>
-            <li class="list-inline-item">
-              <span class="badge badge-light">Software</span>
-            </li>
-            <li class="list-inline-item">
-              <span class="badge badge-light">Tool</span>
-            </li>
-            <li class="list-inline-item">
-              <span class="badge badge-light">User Experience</span>
-            </li>
-            <li class="list-inline-item">
-              <span class="badge badge-light">Wealth</span>
-            </li>
-            <li class="list-inline-item">
-              <span class="badge badge-light">WealthTech</span>
-            </li>
-            <li class="list-inline-item">
-              <span class="badge badge-light">Wealth Management</span>
-            </li>
-            <li class="list-inline-item">
-              <span class="badge badge-light">{{ product2.name }}</span>
-            </li>
+            @for (tag of tags; track tag) {
+              <li class="list-inline-item">
+                <span class="badge badge-light">{{ tag }}</span>
+              </li>
+            }
           </ul>
         </section>
         <nav aria-label="breadcrumb">

libs/common/src/lib/interfaces/product.ts

@@ -10,7 +10,7 @@ export interface Product {
   note?: string;
   origin?: string;
   pricingPerYear?: string;
-  region?: string;
+  regions?: string[];
   slogan?: string;
   useAnonymously?: boolean;
 }

libs/common/src/lib/personal-finance-tools.ts

@@ -277,7 +277,7 @@ export const personalFinanceTools: Product[] = [
     name: 'markets.sh',
     origin: `Germany`,
     pricingPerYear: '€168',
-    region: `Global`,
+    regions: [`Global`],
     slogan: 'Track your investments'
   },
   {
@@ -289,7 +289,7 @@ export const personalFinanceTools: Product[] = [
     note: 'Maybe Finance has discontinued in 2023',
     origin: `United States`,
     pricingPerYear: '$145',
-    region: `United States`,
+    regions: [`United States`],
     slogan: 'Your financial future, in your control'
   },
   {
@@ -300,7 +300,7 @@ export const personalFinanceTools: Product[] = [
     name: 'Merlin',
     origin: `United States`,
     pricingPerYear: '$204',
-    region: 'Canada, United States',
+    regions: ['Canada', 'United States'],
     slogan: 'The smartest way to track your crypto'
   },
   {
@@ -340,7 +340,7 @@ export const personalFinanceTools: Product[] = [
     note: 'Originally named as Tresor One',
     origin: `Germany`,
     pricingPerYear: '€88',
-    region: 'Austria, Germany, Switzerland',
+    regions: ['Austria', 'Germany', 'Switzerland'],
     slogan: 'Dein Vermögen immer im Blick'
   },
   {
@@ -360,7 +360,7 @@ export const personalFinanceTools: Product[] = [
     name: 'PocketSmith',
     origin: `New Zealand`,
     pricingPerYear: '$120',
-    region: `Global`,
+    regions: [`Global`],
     slogan: 'Know where your money is going'
   },
   {
@@ -444,7 +444,7 @@ export const personalFinanceTools: Product[] = [
     name: 'Sharesight',
     origin: `New Zealand`,
     pricingPerYear: '$135',
-    region: `Global`,
+    regions: [`Global`],
     slogan: 'Stock Portfolio Tracker'
   },
   {
@@ -594,7 +594,7 @@ export const personalFinanceTools: Product[] = [
     languages: ['Deutsch', 'English', 'Español', 'Français', 'Italiano'],
     name: 'yeekatee',
     origin: `Switzerland`,
-    region: `Global`,
+    regions: [`Global`],
     slogan: 'Connect. Share. Invest.'
   },
   {

libs/ui/src/lib/i18n.ts

@@ -11,10 +11,10 @@ const locales = {
   DATA_IMPORT_AND_EXPORT_TOOLTIP_OSS: $localize`Switch to Ghostfolio Premium easily`,
   DATA_IMPORT_AND_EXPORT_TOOLTIP_PREMIUM: $localize`Switch to Ghostfolio Open Source or Ghostfolio Basic easily`,
   EMERGENCY_FUND: $localize`Emergency Fund`,
+  Global: $localize`Global`,
   GRANT: $localize`Grant`,
   HIGHER_RISK: $localize`Higher Risk`,
   IMPORT_ACTIVITY_ERROR_IS_DUPLICATE: $localize`This activity already exists.`,
-  Japan: $localize`Japan`,
   LOWER_RISK: $localize`Lower Risk`,
   MONTH: $localize`Month`,
   MONTHS: $localize`Months`,
@@ -65,6 +65,28 @@ const locales = {
   Oceania: $localize`Oceania`,
   'South America': $localize`South America`,
 
+  // Countries
+  Australia: $localize`Australia`,
+  Austria: $localize`Austria`,
+  Belgium: $localize`Belgium`,
+  Bulgaria: $localize`Bulgaria`,
+  Canada: $localize`Canada`,
+  'Czech Republic': $localize`Czech Republic`,
+  Finland: $localize`Finland`,
+  France: $localize`France`,
+  Germany: $localize`Germany`,
+  India: $localize`India`,
+  Italy: $localize`Italy`,
+  Japan: $localize`Japan`,
+  Netherlands: $localize`Netherlands`,
+  'New Zealand': $localize`New Zealand`,
+  Poland: $localize`Poland`,
+  Romania: $localize`Romania`,
+  'South Africa': $localize`South Africa`,
+  Switzerland: $localize`Switzerland`,
+  Thailand: $localize`Thailand`,
+  'United States': $localize`United States`,
+
   // Fear and Greed Index
   EXTREME_FEAR: $localize`Extreme Fear`,
   EXTREME_GREED: $localize`Extreme Greed`,