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

* Localize origin * Localize regions * Localize tags
6 months ago · 43fca7ff43
5 changed files with 93 additions and 75 deletions
--- a/apps/client/src/app/pages/resources/personal-finance-tools/product-page.component.ts
+++ b/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' });
+    });
  }
 }
--- a/apps/client/src/app/pages/resources/personal-finance-tools/product-page.html
+++ b/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">
--- a/libs/common/src/lib/interfaces/product.ts
+++ b/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;
 }
--- a/libs/common/src/lib/personal-finance-tools.ts
+++ b/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.'
  },
  {
--- a/libs/ui/src/lib/i18n.ts
+++ b/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`,