Refactoring

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

@@ -48,8 +48,8 @@ export class GfFirePageComponent implements OnDestroy, OnInit {
   public safeWithdrawalRateOptions = [0.025, 0.03, 0.035, 0.04, 0.045];
   public user: User;
   public withdrawalRatePerMonth: Big;
-  public withdrawalRatePerYear: Big;
   public withdrawalRatePerMonthProjected: Big;
+  public withdrawalRatePerYear: Big;
   public withdrawalRatePerYearProjected: Big;
 
   private unsubscribeSubject = new Subject<void>();
@@ -145,6 +145,18 @@ export class GfFirePageComponent implements OnDestroy, OnInit {
       });
   }
 
+  public onCalculationComplete({
+    projectedTotalAmount,
+    retirementDate
+  }: FireCalculationCompleteEvent) {
+    this.projectedTotalAmount = projectedTotalAmount;
+    this.retirementDate = retirementDate;
+
+    this.calculateWithdrawalRatesProjected();
+
+    this.isLoading = false;
+  }
+
   public onRetirementDateChange(retirementDate: Date) {
     this.dataService
       .putUserSetting({
@@ -176,7 +188,7 @@ export class GfFirePageComponent implements OnDestroy, OnInit {
             this.user = user;
 
             this.calculateWithdrawalRates();
-            this.calculateProjectedWithdrawalRates();
+            this.calculateWithdrawalRatesProjected();
 
             this.changeDetectorRef.markForCheck();
           });
@@ -218,18 +230,6 @@ export class GfFirePageComponent implements OnDestroy, OnInit {
       });
   }
 
-  public onCalculationComplete({
-    projectedTotalAmount,
-    retirementDate
-  }: FireCalculationCompleteEvent) {
-    this.projectedTotalAmount = projectedTotalAmount;
-    this.retirementDate = retirementDate;
-
-    this.calculateProjectedWithdrawalRates();
-
-    this.isLoading = false;
-  }
-
   public ngOnDestroy() {
     this.unsubscribeSubject.next();
     this.unsubscribeSubject.complete();
@@ -245,7 +245,7 @@ export class GfFirePageComponent implements OnDestroy, OnInit {
     }
   }
 
-  private calculateProjectedWithdrawalRates() {
+  private calculateWithdrawalRatesProjected() {
     if (
       this.fireWealth &&
       this.projectedTotalAmount &&

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

@@ -63,7 +63,7 @@
       </div>
     } @else {
       <div [ngClass]="{ 'text-muted': user?.subscription?.type === 'Basic' }">
-        <div>
+        <div class="mb-2">
           <ng-container i18n
             >If you retire today, you would be able to withdraw</ng-container
           >
@@ -135,11 +135,13 @@
           }
         </div>
 
-        <div class="mt-2">
+        @if (user?.settings?.isExperimentalFeatures) {
+          <div>
             <ng-container i18n>By</ng-container>
             <ng-container>&nbsp;</ng-container>
             <span class="font-weight-bold">{{
-            user?.settings?.retirementDate ?? retirementDate | date: 'MMMM yyyy'
+              user?.settings?.retirementDate ?? retirementDate
+                | date: 'MMMM yyyy'
             }}</span>
             <ng-container i18n>,</ng-container>
             <ng-container>&nbsp;</ng-container>
@@ -184,6 +186,7 @@
             <ng-container>&nbsp;</ng-container>
             <ng-container i18n>annual interest rate</ng-container>.
           </div>
+        }
       </div>
     }
   </div>

libs/common/src/lib/interfaces/index.ts

@@ -18,7 +18,7 @@ import type { DataProviderInfo } from './data-provider-info.interface';
 import type { EnhancedSymbolProfile } from './enhanced-symbol-profile.interface';
 import type { FilterGroup } from './filter-group.interface';
 import type { Filter } from './filter.interface';
-import type { FireCalculationCompleteEvent } from './fire-calculation.interface';
+import type { FireCalculationCompleteEvent } from './fire-calculation-complete-event.interface';
 import type { FireWealth } from './fire-wealth.interface';
 import type { HistoricalDataItem } from './historical-data-item.interface';
 import type { HoldingWithParents } from './holding-with-parents.interface';