From 1daa672f27e2824cabeb33824e48f5adc7b72348 Mon Sep 17 00:00:00 2001
From: Kenrick Tandrian <60643640+KenTandrian@users.noreply.github.com>
Date: Fri, 1 May 2026 14:33:07 +0700
Subject: [PATCH] Task/improve type safety in pricing page component (#6806)

* fix(client): resolve type errors

* feat(client): enforce immutability

* fix(client): remove unused variables

* fix(client): enforce encapsulation

* feat(client): replace constructor based DI with inject
---
 .../pages/pricing/pricing-page.component.ts   | 63 +++++++++----------
 libs/ui/src/lib/i18n.ts                       |  1 -
 2 files changed, 30 insertions(+), 34 deletions(-)

diff --git a/apps/client/src/app/pages/pricing/pricing-page.component.ts b/apps/client/src/app/pages/pricing/pricing-page.component.ts
index 08c561fc8..0b76fcd1d 100644
--- a/apps/client/src/app/pages/pricing/pricing-page.component.ts
+++ b/apps/client/src/app/pages/pricing/pricing-page.component.ts
@@ -13,6 +13,7 @@ import {
   Component,
   CUSTOM_ELEMENTS_SCHEMA,
   DestroyRef,
+  inject,
   OnInit
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -48,35 +49,28 @@ import { catchError } from 'rxjs/operators';
   templateUrl: './pricing-page.html'
 })
 export class GfPricingPageComponent implements OnInit {
-  public baseCurrency: string;
-  public coupon: number;
-  public couponId: string;
-  public durationExtension: StringValue;
-  public hasPermissionToCreateUser: boolean;
-  public hasPermissionToUpdateUserSettings: boolean;
-
-  public importAndExportTooltipBasic = translate(
+  protected baseCurrency: string;
+  protected coupon: number | undefined;
+  protected durationExtension: StringValue | undefined;
+  protected hasPermissionToCreateUser: boolean;
+  protected hasPermissionToUpdateUserSettings: boolean;
+
+  protected readonly importAndExportTooltipBasic = translate(
     'DATA_IMPORT_AND_EXPORT_TOOLTIP_BASIC'
   );
 
-  public importAndExportTooltipOSS = translate(
+  protected readonly importAndExportTooltipOSS = translate(
     'DATA_IMPORT_AND_EXPORT_TOOLTIP_OSS'
   );
 
-  public importAndExportTooltipPremium = translate(
-    'DATA_IMPORT_AND_EXPORT_TOOLTIP_PREMIUM'
-  );
-
-  public isLoggedIn: boolean;
-  public label: string;
-  public price: number;
-  public priceId: string;
+  protected label: string | undefined;
+  protected price: number | undefined;
 
-  public professionalDataProviderTooltipPremium = translate(
+  protected readonly professionalDataProviderTooltipPremium = translate(
     'PROFESSIONAL_DATA_PROVIDER_TOOLTIP_PREMIUM'
   );
 
-  public referralBrokers = [
+  protected readonly referralBrokers = [
     'Alpian',
     'DEGIRO',
     'finpension',
@@ -87,19 +81,22 @@ export class GfPricingPageComponent implements OnInit {
     'Swissquote',
     'VIAC',
     'Zak'
-  ];
-
-  public routerLinkFeatures = publicRoutes.features.routerLink;
-  public routerLinkRegister = publicRoutes.register.routerLink;
-  public user: User;
-
-  public constructor(
-    private changeDetectorRef: ChangeDetectorRef,
-    private dataService: DataService,
-    private destroyRef: DestroyRef,
-    private notificationService: NotificationService,
-    private userService: UserService
-  ) {
+  ] as const;
+
+  protected readonly routerLinkFeatures = publicRoutes.features.routerLink;
+  protected readonly routerLinkRegister = publicRoutes.register.routerLink;
+  protected user: User;
+
+  private couponId: string | undefined;
+  private priceId: string;
+
+  private readonly changeDetectorRef = inject(ChangeDetectorRef);
+  private readonly dataService = inject(DataService);
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly notificationService = inject(NotificationService);
+  private readonly userService = inject(UserService);
+
+  public constructor() {
     addIcons({
       checkmarkCircleOutline,
       checkmarkOutline,
@@ -147,7 +144,7 @@ export class GfPricingPageComponent implements OnInit {
       });
   }
 
-  public onCheckout() {
+  protected onCheckout() {
     this.dataService
       .createStripeCheckoutSession({
         couponId: this.couponId,
diff --git a/libs/ui/src/lib/i18n.ts b/libs/ui/src/lib/i18n.ts
index e23b37590..c7d8b7c8b 100644
--- a/libs/ui/src/lib/i18n.ts
+++ b/libs/ui/src/lib/i18n.ts
@@ -11,7 +11,6 @@ const locales = {
   CLOSE: $localize`Close`,
   DATA_IMPORT_AND_EXPORT_TOOLTIP_BASIC: $localize`Switch to Ghostfolio Premium or Ghostfolio Open Source easily`,
   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`,
   DATA_SOURCE: $localize`Data Source`,
   EMERGENCY_FUND: $localize`Emergency Fund`,
   EXCLUDE_FROM_ANALYSIS: $localize`Exclude from Analysis`,