Feature/extend faq pages (#4655)

* Extend FAQ pages

* Update changelog

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Added the watchlist to the features page
+- Extended the content of the Frequently Asked Questions (FAQ) pages
 
 ### Changed
 

apps/client/src/app/pages/faq/overview/faq-overview-page.component.ts

@@ -12,6 +12,9 @@ import { Subject, takeUntil } from 'rxjs';
   standalone: false
 })
 export class FaqOverviewPageComponent implements OnDestroy {
+  public pricingUrl =
+    `https://ghostfol.io/${document.documentElement.lang}/` +
+    $localize`:snake-case:pricing`;
   public routerLinkFeatures = ['/' + $localize`:snake-case:features`];
   public user: User;
 

apps/client/src/app/pages/faq/overview/faq-overview-page.html

@@ -59,9 +59,14 @@
           world. The
           <a href="https://github.com/ghostfolio/ghostfolio">source code</a> is
           fully available as open source software (OSS). Thanks to our generous
-          <a href="https://ghostfol.io/en/pricing">Ghostfolio Premium</a> users
-          and <a href="https://www.buymeacoffee.com/ghostfolio">sponsors</a> we
-          have the ability to run a free, limited plan for novice
+          <a class="align-items-center d-inline-flex" [href]="pricingUrl"
+            >Ghostfolio Premium<gf-premium-indicator
+              class="d-inline-block ml-1"
+              [enableLink]="false"
+          /></a>
+          users and
+          <a href="https://www.buymeacoffee.com/ghostfolio">sponsors</a> we have
+          the ability to run a free, limited plan for novice
           investors.</mat-card-content
         >
       </mat-card>
@@ -82,8 +87,11 @@
         </mat-card-header>
         <mat-card-content
           >By offering
-          <a href="https://ghostfol.io/en/pricing">Ghostfolio Premium</a>, a
-          subscription plan with a managed hosting service and enhanced
+          <a class="align-items-center d-inline-flex" [href]="pricingUrl"
+            >Ghostfolio Premium<gf-premium-indicator
+              class="d-inline-block ml-1"
+              [enableLink]="false" /></a
+          >, a subscription plan with a managed hosting service and enhanced
           features, we fund our business while providing added value to our
           users.</mat-card-content
         >
@@ -105,7 +113,11 @@
         </mat-card-header>
         <mat-card-content
           >Any support for Ghostfolio is welcome. Be it with a
-          <a href="https://ghostfol.io/en/pricing">Ghostfolio Premium</a>
+          <a class="align-items-center d-inline-flex" [href]="pricingUrl"
+            >Ghostfolio Premium<gf-premium-indicator
+              class="d-inline-block ml-1"
+              [enableLink]="false"
+          /></a>
           subscription to finance the hosting infrastructure, a positive rating
           in the
           <a

apps/client/src/app/pages/faq/overview/faq-overview-page.module.ts

@@ -1,3 +1,5 @@
+import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
+
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
@@ -7,7 +9,12 @@ import { FaqOverviewPageComponent } from './faq-overview-page.component';
 
 @NgModule({
   declarations: [FaqOverviewPageComponent],
-  imports: [CommonModule, FaqOverviewPageRoutingModule, MatCardModule],
+  imports: [
+    CommonModule,
+    FaqOverviewPageRoutingModule,
+    GfPremiumIndicatorComponent,
+    MatCardModule
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class FaqOverviewPageModule {}

apps/client/src/app/pages/faq/saas/saas-page.component.ts

@@ -12,8 +12,10 @@ import { Subject, takeUntil } from 'rxjs';
   standalone: false
 })
 export class SaasPageComponent implements OnDestroy {
+  public pricingUrl =
+    `https://ghostfol.io/${document.documentElement.lang}/` +
+    $localize`:snake-case:pricing`;
   public routerLinkMarkets = ['/' + $localize`:snake-case:markets`];
-  public routerLinkPricing = ['/' + $localize`:snake-case:pricing`];
   public routerLinkRegister = ['/' + $localize`:snake-case:register`];
   public user: User;
 

apps/client/src/app/pages/faq/saas/saas-page.html

@@ -14,11 +14,11 @@
           <mat-card-title>How do I start?</mat-card-title>
         </mat-card-header>
         <mat-card-content>
-          You can sign up via the “<a [routerLink]="routerLinkRegister"
-            >Get Started</a
-          >” button at the top of the page. You have multiple options to join
-          Ghostfolio: Create an account with a security token or
-          <i>Google Sign</i>. We will guide you to set up your portfolio.
+          You can sign up via the
+          <a [routerLink]="routerLinkRegister">Get Started</a> button at the top
+          of the page. You have multiple options to join Ghostfolio: Create an
+          account with a security token or <i>Google Sign</i>. We will guide you
+          to set up your portfolio.
         </mat-card-content>
       </mat-card>
       <mat-card appearance="outlined" class="mb-3">
@@ -38,8 +38,8 @@
         >
         <mat-card-content
           >Yes, it is! Our
-          <a [routerLink]="routerLinkPricing">pricing page</a> details
-          everything you get for free.</mat-card-content
+          <a target="_blank" [href]="pricingUrl">pricing page</a>
+          details everything you get for free.</mat-card-content
         >
       </mat-card>
       <mat-card appearance="outlined" class="mb-3">
@@ -49,12 +49,20 @@
           ></mat-card-header
         >
         <mat-card-content
-          ><a [routerLink]="routerLinkPricing">Ghostfolio Premium</a> is a fully
-          managed Ghostfolio cloud offering for ambitious investors. Revenue is
-          used to cover the costs of the hosting infrastructure and to fund
-          ongoing development. It is the Open Source code base with some extras
-          like the <a [routerLink]="routerLinkMarkets">markets overview</a> and
-          a professional data provider.</mat-card-content
+          ><a
+            class="align-items-center d-inline-flex"
+            target="_blank"
+            [href]="pricingUrl"
+            >Ghostfolio Premium<gf-premium-indicator
+              class="d-inline-block ml-1"
+              [enableLink]="false"
+          /></a>
+          is a fully managed Ghostfolio cloud offering for ambitious investors.
+          Revenue is used to cover the costs of the hosting infrastructure and
+          to fund ongoing development. It is the Open Source code base with some
+          extras like the
+          <a [routerLink]="routerLinkMarkets">markets overview</a> and a
+          professional data provider.</mat-card-content
         >
       </mat-card>
       <mat-card appearance="outlined" class="mb-3">
@@ -65,8 +73,15 @@
         >
         <mat-card-content
           >Yes, you can try
-          <a [routerLink]="routerLinkPricing">Ghostfolio Premium</a> by signing
-          up for Ghostfolio and applying for a trial (see
+          <a
+            class="align-items-center d-inline-flex"
+            target="_blank"
+            [href]="pricingUrl"
+            >Ghostfolio Premium<gf-premium-indicator
+              class="d-inline-block ml-1"
+              [enableLink]="false"
+          /></a>
+          by signing up for Ghostfolio and applying for a trial (see
           <a [routerLink]="['/account', 'membership']">Membership</a>). It is
           easy, free and there is no commitment. You can stop using it at any
           time.</mat-card-content
@@ -93,9 +108,17 @@
           >
         </mat-card-header>
         <mat-card-content
-          >No, <a [routerLink]="routerLinkPricing">Ghostfolio Premium</a> does
-          not include auto-renewal. Upon expiration, you can choose whether to
-          start a new subscription.</mat-card-content
+          >No,
+          <a
+            class="align-items-center d-inline-flex"
+            target="_blank"
+            [href]="pricingUrl"
+            >Ghostfolio Premium<gf-premium-indicator
+              class="d-inline-block ml-1"
+              [enableLink]="false"
+          /></a>
+          does not include auto-renewal. Upon expiration, you can choose whether
+          to start a new subscription.</mat-card-content
         >
       </mat-card>
       @if (user?.subscription?.type === 'Premium') {

apps/client/src/app/pages/faq/saas/saas-page.module.ts

@@ -1,3 +1,5 @@
+import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
+
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
@@ -7,7 +9,12 @@ import { SaasPageComponent } from './saas-page.component';
 
 @NgModule({
   declarations: [SaasPageComponent],
-  imports: [CommonModule, MatCardModule, SaasPageRoutingModule],
+  imports: [
+    CommonModule,
+    GfPremiumIndicatorComponent,
+    MatCardModule,
+    SaasPageRoutingModule
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class SaasPageModule {}

apps/client/src/app/pages/faq/self-hosting/self-hosting-page.component.ts

@@ -9,6 +9,10 @@ import { Subject } from 'rxjs';
   standalone: false
 })
 export class SelfHostingPageComponent implements OnDestroy {
+  public pricingUrl =
+    `https://ghostfol.io/${document.documentElement.lang}/` +
+    $localize`:snake-case:pricing`;
+
   private unsubscribeSubject = new Subject<void>();
 
   public ngOnDestroy() {

apps/client/src/app/pages/faq/self-hosting/self-hosting-page.html

@@ -140,6 +140,25 @@
           providers are considered experimental.</mat-card-content
         >
       </mat-card>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title
+            >Can I get access to a professional data provider?</mat-card-title
+          >
+        </mat-card-header>
+        <mat-card-content
+          >Yes, access to a professional data provider is included with a
+          <a
+            class="align-items-center d-inline-flex"
+            target="_blank"
+            [href]="pricingUrl"
+            >Ghostfolio Premium<gf-premium-indicator
+              class="d-inline-block ml-1"
+              [enableLink]="false"
+          /></a>
+          subscription via an API key.</mat-card-content
+        >
+      </mat-card>
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-header>
           <mat-card-title>How do I set up a benchmark?</mat-card-title>

apps/client/src/app/pages/faq/self-hosting/self-hosting-page.module.ts

@@ -1,3 +1,5 @@
+import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
+
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
@@ -7,7 +9,12 @@ import { SelfHostingPageComponent } from './self-hosting-page.component';
 
 @NgModule({
   declarations: [SelfHostingPageComponent],
-  imports: [CommonModule, MatCardModule, SelfHostingPageRoutingModule],
+  imports: [
+    CommonModule,
+    GfPremiumIndicatorComponent,
+    MatCardModule,
+    SelfHostingPageRoutingModule
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class SelfHostingPageModule {}