Feature/improve usage of premium indicator component (#1421)

* Improve usage of premium indicator component

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the usage of the premium indicator component
 - Removed the intro image in dark mode
 
 ## 1.208.0 - 03.11.2022

apps/api/src/app/portfolio/portfolio.controller.ts

@@ -71,8 +71,13 @@ export class PortfolioController {
     @Query('range') dateRange: DateRange = 'max',
     @Query('tags') filterByTags?: string
   ): Promise<PortfolioDetails & { hasError: boolean }> {
+    let hasDetails = true;
     let hasError = false;
 
+    if (this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION')) {
+      hasDetails = this.request.user.subscription.type === 'Premium';
+    }
+
     const filters = this.apiService.buildFiltersFromQueryParams({
       filterByAccounts,
       filterByAssetClasses,
@@ -133,7 +138,13 @@ export class PortfolioController {
         accounts[name].current = current / totalValue;
         accounts[name].original = original / totalInvestment;
       }
+    }
 
+    if (
+      hasDetails === false ||
+      impersonationId ||
+      this.userService.isRestrictedView(this.request.user)
+    ) {
       portfolioSummary = nullifyValuesInObject(summary, [
         'cash',
         'committedFunds',
@@ -151,11 +162,6 @@ export class PortfolioController {
       ]);
     }
 
-    let hasDetails = true;
-    if (this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION')) {
-      hasDetails = this.request.user.subscription.type === 'Premium';
-    }
-
     for (const [symbol, portfolioPosition] of Object.entries(holdings)) {
       holdings[symbol] = {
         ...portfolioPosition,
@@ -175,7 +181,7 @@ export class PortfolioController {
       hasError,
       holdings,
       totalValueInBaseCurrency,
-      summary: hasDetails ? portfolioSummary : undefined
+      summary: portfolioSummary
     };
   }
 
@@ -186,16 +192,6 @@ export class PortfolioController {
     @Query('range') dateRange: DateRange = 'max',
     @Query('groupBy') groupBy?: GroupBy
   ): Promise<PortfolioInvestments> {
-    if (
-      this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION') &&
-      this.request.user.subscription.type === 'Basic'
-    ) {
-      throw new HttpException(
-        getReasonPhrase(StatusCodes.FORBIDDEN),
-        StatusCodes.FORBIDDEN
-      );
-    }
-
     let investments: InvestmentItem[];
 
     if (groupBy === 'month') {
@@ -226,6 +222,15 @@ export class PortfolioController {
       }));
     }
 
+    if (
+      this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION') &&
+      this.request.user.subscription.type === 'Basic'
+    ) {
+      investments = investments.map((item) => {
+        return nullifyValuesInObject(item, ['investment']);
+      });
+    }
+
     return { investments };
   }
 
@@ -274,6 +279,17 @@ export class PortfolioController {
       );
     }
 
+    if (
+      this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION') &&
+      this.request.user.subscription.type === 'Basic'
+    ) {
+      performanceInformation.chart = performanceInformation.chart.map(
+        (item) => {
+          return nullifyValuesInObject(item, ['totalInvestment', 'value']);
+        }
+      );
+    }
+
     return performanceInformation;
   }
 

apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.html

@@ -18,6 +18,7 @@
       <mat-label i18n>Compare with...</mat-label>
       <mat-select
         name="benchmark"
+        [disabled]="user?.subscription?.type === 'Basic'"
         [value]="benchmark"
         (selectionChange)="onChangeBenchmark($event.value)"
       >

apps/client/src/app/components/benchmark-comparator/benchmark-comparator.module.ts

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatSelectModule } from '@angular/material/select';
+import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { BenchmarkComparatorComponent } from './benchmark-comparator.component';
@@ -12,6 +13,7 @@ import { BenchmarkComparatorComponent } from './benchmark-comparator.component';
   imports: [
     CommonModule,
     FormsModule,
+    GfPremiumIndicatorModule,
     MatSelectModule,
     NgxSkeletonLoaderModule,
     ReactiveFormsModule

apps/client/src/app/pages/portfolio/fire/fire-page.html

@@ -3,7 +3,13 @@
     <div class="col-lg">
       <h3 class="d-flex justify-content-center mb-3" i18n>FIRE</h3>
       <div>
-        <h4 class="mb-3" i18n>Calculator</h4>
+        <h4 class="align-items-center d-flex mb-3">
+          <span i18n>Calculator</span
+          ><gf-premium-indicator
+            *ngIf="user?.subscription?.type === 'Basic'"
+            class="ml-1"
+          ></gf-premium-indicator>
+        </h4>
         <gf-fire-calculator
           [colorScheme]="user?.settings?.colorScheme"
           [currency]="user?.settings?.baseCurrency"
@@ -18,7 +24,13 @@
     </div>
   </div>
   <div>
-    <h4 i18n>4% Rule</h4>
+    <h4 class="align-items-center d-flex">
+      <span i18n>4% Rule</span
+      ><gf-premium-indicator
+        *ngIf="user?.subscription?.type === 'Basic'"
+        class="ml-1"
+      ></gf-premium-indicator>
+    </h4>
     <div *ngIf="isLoading">
       <ngx-skeleton-loader
         animation="pulse"

apps/client/src/app/pages/portfolio/fire/fire-page.module.ts

@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { GfFireCalculatorModule } from '@ghostfolio/ui/fire-calculator';
+import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
 import { GfValueModule } from '@ghostfolio/ui/value';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
@@ -13,6 +14,7 @@ import { FirePageComponent } from './fire-page.component';
     CommonModule,
     FirePageRoutingModule,
     GfFireCalculatorModule,
+    GfPremiumIndicatorModule,
     GfValueModule,
     NgxSkeletonLoaderModule
   ],

apps/client/src/app/pages/portfolio/portfolio-page.html

@@ -40,13 +40,7 @@
     </div>
     <div class="col-xs-12 col-md-6 mb-3">
       <mat-card class="d-flex flex-column h-100">
-        <h4 class="align-items-center d-flex">
-          <span i18n>Allocations</span>
-          <gf-premium-indicator
-            *ngIf="user?.subscription?.type === 'Basic'"
-            class="ml-1"
-          ></gf-premium-indicator>
-        </h4>
+        <h4 i18n>Allocations</h4>
         <div class="flex-grow-1" i18n>
           Check the allocations of your portfolio by account, asset class,
           currency, sector and region.
@@ -65,13 +59,7 @@
     </div>
     <div class="col-xs-12 col-md-6 mb-3">
       <mat-card class="d-flex flex-column h-100">
-        <h4 class="align-items-center d-flex">
-          <span i18n>Analysis</span>
-          <gf-premium-indicator
-            *ngIf="user?.subscription?.type === 'Basic'"
-            class="ml-1"
-          ></gf-premium-indicator>
-        </h4>
+        <h4 i18n>Analysis</h4>
         <div class="flex-grow-1" i18n>
           Ghostfolio Analysis visualizes your portfolio and shows your top and
           bottom performers.
@@ -90,13 +78,7 @@
     </div>
     <div class="col-xs-12 col-md-6 mb-3">
       <mat-card class="d-flex flex-column h-100">
-        <h4 class="align-items-center d-flex">
-          <span>X-ray</span>
-          <gf-premium-indicator
-            *ngIf="user?.subscription?.type === 'Basic'"
-            class="ml-1"
-          ></gf-premium-indicator>
-        </h4>
+        <h4>X-ray</h4>
         <div class="flex-grow-1" i18n>
           Ghostfolio X-ray uses static analysis to identify potential issues and
           risks in your portfolio.
@@ -111,13 +93,7 @@
     </div>
     <div class="col-xs-12 col-md-6 mb-3">
       <mat-card class="d-flex flex-column h-100">
-        <h4 class="align-items-center d-flex">
-          <span i18n>FIRE</span>
-          <gf-premium-indicator
-            *ngIf="user?.subscription?.type === 'Basic'"
-            class="ml-1"
-          ></gf-premium-indicator>
-        </h4>
+        <h4>FIRE</h4>
         <div class="flex-grow-1" i18n>
           Ghostfolio FIRE calculates metrics for the
           <i>Financial Independence, Retire Early</i> lifestyle.

apps/client/src/app/pages/portfolio/portfolio-page.module.ts

@@ -3,7 +3,6 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { RouterModule } from '@angular/router';
-import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
 
 import { PortfolioPageRoutingModule } from './portfolio-page-routing.module';
 import { PortfolioPageComponent } from './portfolio-page.component';
@@ -12,7 +11,6 @@ import { PortfolioPageComponent } from './portfolio-page.component';
   declarations: [PortfolioPageComponent],
   imports: [
     CommonModule,
-    GfPremiumIndicatorModule,
     MatButtonModule,
     MatCardModule,
     PortfolioPageRoutingModule,

apps/client/src/app/pages/portfolio/report/report-page.html

@@ -14,21 +14,39 @@
         >
       </p>
       <div class="mb-4">
-        <h4 class="m-0">Currency Cluster Risks</h4>
+        <h4 class="align-items-center d-flex m-0">
+          <span>Currency Cluster Risks</span
+          ><gf-premium-indicator
+            *ngIf="user?.subscription?.type === 'Basic'"
+            class="ml-1"
+          ></gf-premium-indicator>
+        </h4>
         <gf-rules
           [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
           [rules]="currencyClusterRiskRules"
         ></gf-rules>
       </div>
       <div class="mb-4">
-        <h4 class="m-0">Account Cluster Risks</h4>
+        <h4 class="align-items-center d-flex m-0">
+          <span>Account Cluster Risks</span
+          ><gf-premium-indicator
+            *ngIf="user?.subscription?.type === 'Basic'"
+            class="ml-1"
+          ></gf-premium-indicator>
+        </h4>
         <gf-rules
           [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
           [rules]="accountClusterRiskRules"
         ></gf-rules>
       </div>
       <div>
-        <h4 class="m-0">Fees</h4>
+        <h4 class="align-items-center d-flex m-0">
+          <span>Fees</span
+          ><gf-premium-indicator
+            *ngIf="user?.subscription?.type === 'Basic'"
+            class="ml-1"
+          ></gf-premium-indicator>
+        </h4>
         <gf-rules
           [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
           [rules]="feeRules"

apps/client/src/app/pages/portfolio/report/report-page.module.ts

@@ -1,13 +1,19 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RulesModule } from '@ghostfolio/client/components/rules/rules.module';
+import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
 
 import { ReportPageRoutingModule } from './report-page-routing.module';
 import { ReportPageComponent } from './report-page.component';
 
 @NgModule({
   declarations: [ReportPageComponent],
-  imports: [CommonModule, ReportPageRoutingModule, RulesModule],
+  imports: [
+    CommonModule,
+    GfPremiumIndicatorModule,
+    ReportPageRoutingModule,
+    RulesModule
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class ReportPageModule {}