Task/improve type safety in user account membership component (#7286)

* fix(client): resolve type errors

* feat(client): enforce encapsulation

* fix(client): remove unused variable

* feat(client): enforce immutability

* feat(client): replace constructor based DI with inject functions

apps/client/src/app/components/user-account-membership/user-account-membership.component.ts

@@ -3,7 +3,6 @@ import { ConfirmationDialogType } from '@ghostfolio/common/enums';
 import { getDateFormatString } from '@ghostfolio/common/helper';
 import { User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
-import { publicRoutes } from '@ghostfolio/common/routes/routes';
 import { GfMembershipCardComponent } from '@ghostfolio/ui/membership-card';
 import { NotificationService } from '@ghostfolio/ui/notifications';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
@@ -14,7 +13,8 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  DestroyRef
+  DestroyRef,
+  inject
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
@@ -40,29 +40,29 @@ import { catchError } from 'rxjs/operators';
   templateUrl: './user-account-membership.html'
 })
 export class GfUserAccountMembershipComponent {
-  public baseCurrency: string;
+  protected readonly baseCurrency: string;
-  public coupon: number;
+  protected coupon: number | undefined;
-  public couponId: string;
+  protected defaultDateFormat: string;
-  public defaultDateFormat: string;
+  protected durationExtension: StringValue | undefined;
-  public durationExtension: StringValue;
+  protected readonly hasPermissionForSubscription: boolean;
-  public hasPermissionForSubscription: boolean;
+  protected hasPermissionToCreateApiKey: boolean;
-  public hasPermissionToCreateApiKey: boolean;
+  protected hasPermissionToUpdateUserSettings: boolean;
-  public hasPermissionToUpdateUserSettings: boolean;
+  protected price: number;
-  public price: number;
+  protected readonly trySubscriptionMail =
-  public priceId: string;
-  public routerLinkPricing = publicRoutes.pricing.routerLink;
-  public trySubscriptionMail =
     'mailto:hi@ghostfol.io?subject=Ghostfolio Premium Trial&body=Hello%0D%0DI am interested in Ghostfolio Premium. Can you please send me a coupon code to try it for some time?%0D%0DKind regards';
-  public user: User;
+  protected user: User;
-
+
-  public constructor(
+  private couponId: string | undefined;
-    private changeDetectorRef: ChangeDetectorRef,
+  private priceId: string;
-    private dataService: DataService,
+
-    private destroyRef: DestroyRef,
+  private readonly changeDetectorRef = inject(ChangeDetectorRef);
-    private notificationService: NotificationService,
+  private readonly dataService = inject(DataService);
-    private snackBar: MatSnackBar,
+  private readonly destroyRef = inject(DestroyRef);
-    private userService: UserService
+  private readonly notificationService = inject(NotificationService);
-  ) {
+  private readonly snackBar = inject(MatSnackBar);
+  private readonly userService = inject(UserService);
+
+  public constructor() {
     const { baseCurrency, globalPermissions } = this.dataService.fetchInfo();
 
     this.baseCurrency = baseCurrency;
@@ -104,7 +104,7 @@ export class GfUserAccountMembershipComponent {
       });
   }
 
-  public onCheckout() {
+  protected onCheckout() {
     this.dataService
       .createStripeCheckoutSession({
         couponId: this.couponId,
@@ -125,7 +125,7 @@ export class GfUserAccountMembershipComponent {
       });
   }
 
-  public onGenerateApiKey() {
+  protected onGenerateApiKey() {
     this.notificationService.confirm({
       confirmFn: () => {
         this.dataService
@@ -158,7 +158,7 @@ export class GfUserAccountMembershipComponent {
     });
   }
 
-  public onRedeemCoupon() {
+  protected onRedeemCoupon() {
     this.notificationService.prompt({
       confirmFn: (value) => {
         const couponCode = value?.trim();