Introduce base product page (#2687)

apps/api/src/app/subscription/subscription.service.ts

@@ -111,14 +111,14 @@ export class SubscriptionService {
     aSubscriptions: Subscription[]
   ): UserWithSettings['subscription'] {
     if (aSubscriptions.length > 0) {
-      const latestSubscription = aSubscriptions.reduce((a, b) => {
+      const { expiresAt, price } = aSubscriptions.reduce((a, b) => {
         return new Date(a.expiresAt) > new Date(b.expiresAt) ? a : b;
       });
 
       return {
-        expiresAt: latestSubscription.expiresAt,
+        expiresAt,
-        offer: latestSubscription.price === 0 ? 'default' : 'renewal',
+        offer: price ? 'renewal' : 'default',
-        type: isBefore(new Date(), latestSubscription.expiresAt)
+        type: isBefore(new Date(), expiresAt)
           ? SubscriptionType.Premium
           : SubscriptionType.Basic
       };

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

@@ -181,13 +181,14 @@
               </tr>
               <tr class="mat-mdc-row">
                 <td class="mat-mdc-cell px-3 py-2 text-right" i18n>Pricing</td>
-                <td class="mat-mdc-cell px-1 py-2" i18n>
+                <td class="mat-mdc-cell px-1 py-2">
-                  Starting from {{ product1.pricingPerYear }} / year
+                  <span i18n>Starting from</span> ${{ price }} /
+                  <span i18n>year</span>
                 </td>
                 <td class="mat-mdc-cell px-1 py-2">
-                  <ng-container *ngIf="product2.pricingPerYear" i18n
+                  <ng-container *ngIf="product2.pricingPerYear"
-                    >Starting from {{ product2.pricingPerYear }} /
+                    ><span i18n>Starting from</span> {{ product2.pricingPerYear
-                    year</ng-container
+                    }} / <span i18n>year</span></ng-container
                   >
                 </td>
               </tr>

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

@@ -67,7 +67,6 @@ export const products: Product[] = [
     ],
     name: 'Ghostfolio',
     origin: $localize`Switzerland`,
-    pricingPerYear: '$24',
     region: $localize`Global`,
     slogan: 'Open Source Wealth Management',
     useAnonymously: true

apps/client/src/app/pages/resources/personal-finance-tools/products/allvue-systems-page.component.ts

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class AllvueSystemsPageComponent {
+export class AllvueSystemsPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class AltooPageComponent {
+export class AltooPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import { DataService } from '@ghostfolio/client/services/data.service';
+
+@Component({
+  selector: 'gf-base-product-page',
+  template: ''
+})
+export class BaseProductPageComponent implements OnInit {
+  public price: number;
+
+  public constructor(private dataService: DataService) {}
+
+  public ngOnInit() {
+    const { subscriptions } = this.dataService.fetchInfo();
+
+    this.price = subscriptions?.default?.price;
+  }
+}

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class BasilFinancePageComponent {
+export class BasilFinancePageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class BeanvestPageComponent {
+export class BeanvestPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class CapitallyPageComponent {
+export class CapitallyPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class CapMonPageComponent {
+export class CapMonPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

apps/client/src/app/pages/resources/personal-finance-tools/products/compound-planning-page.component.ts

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class CompoundPlanningPageComponent {
+export class CompoundPlanningPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

apps/client/src/app/pages/resources/personal-finance-tools/products/copilot-money-page.component.ts

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class CopilotMoneyPageComponent {
+export class CopilotMoneyPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

apps/client/src/app/pages/resources/personal-finance-tools/products/de.fi-page.component.ts

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class DeFiPageComponent {
+export class DeFiPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class DeltaPageComponent {
+export class DeltaPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class DivvyDiaryPageComponent {
+export class DivvyDiaryPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class EightFiguresPageComponent {
+export class EightFiguresPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class EmpowerPageComponent {
+export class EmpowerPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class ExirioPageComponent {
+export class ExirioPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class FinaryPageComponent {
+export class FinaryPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class FinWisePageComponent {
+export class FinWisePageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class FolisharePageComponent {
+export class FolisharePageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class GetquinPageComponent {
+export class GetquinPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class GoSpatzPageComponent {
+export class GoSpatzPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

apps/client/src/app/pages/resources/personal-finance-tools/products/intuit-mint-page.component.ts

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class IntuitMintPageComponent {
+export class IntuitMintPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class JustEtfPageComponent {
+export class JustEtfPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class KuberaPageComponent {
+export class KuberaPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class MagnifiPageComponent {
+export class MagnifiPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

apps/client/src/app/pages/resources/personal-finance-tools/products/markets.sh-page.component.ts

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class MarketsShPageComponent {
+export class MarketsShPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class MaybeFinancePageComponent {
+export class MaybeFinancePageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

apps/client/src/app/pages/resources/personal-finance-tools/products/monarch-money-page.component.ts

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class MonarchMoneyPageComponent {
+export class MonarchMoneyPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class MonsePageComponent {
+export class MonsePageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class ParqetPageComponent {
+export class ParqetPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class PlannixPageComponent {
+export class PlannixPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

apps/client/src/app/pages/resources/personal-finance-tools/products/portfolio-dividend-tracker-page.component.ts

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class PortfolioDividendTrackerPageComponent {
+export class PortfolioDividendTrackerPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class PortseidoPageComponent {
+export class PortseidoPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class ProjectionLabPageComponent {
+export class ProjectionLabPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

apps/client/src/app/pages/resources/personal-finance-tools/products/rocket-money-page.component.ts

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class RocketMoneyPageComponent {
+export class RocketMoneyPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

apps/client/src/app/pages/resources/personal-finance-tools/products/seeking-alpha-page.component.ts

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class SeekingAlphaPageComponent {
+export class SeekingAlphaPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class SharesightPageComponent {
+export class SharesightPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

apps/client/src/app/pages/resources/personal-finance-tools/products/simple-portfolio-page.component.ts

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class SimplePortfolioPageComponent {
+export class SimplePortfolioPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

apps/client/src/app/pages/resources/personal-finance-tools/products/snowball-analytics-page.component.ts

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class SnowballAnalyticsPageComponent {
+export class SnowballAnalyticsPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class StocklePageComponent {
+export class StocklePageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class StockMarketEyePageComponent {
+export class StockMarketEyePageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class SumioPageComponent {
+export class SumioPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class TillerPageComponent {
+export class TillerPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class UtlunaPageComponent {
+export class UtlunaPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class VyzerPageComponent {
+export class VyzerPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class WealthicaPageComponent {
+export class WealthicaPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class WhalPageComponent {
+export class WhalPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class YeekateePageComponent {
+export class YeekateePageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class YnabPageComponent {
+export class YnabPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });