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,55 +135,58 @@
           }
         </div>
 
-        <div class="mt-2">
-          <ng-container i18n>By</ng-container>
-          <ng-container>&nbsp;</ng-container>
-          <span class="font-weight-bold">{{
-            user?.settings?.retirementDate ?? retirementDate | date: 'MMMM yyyy'
-          }}</span>
-          <ng-container i18n>,</ng-container>
-          <ng-container>&nbsp;</ng-container>
-          <ng-container i18n>this is projected to increase to</ng-container>
-          <ng-container>&nbsp;</ng-container>
-          <span class="font-weight-bold"
-            ><gf-value
-              class="d-inline-block"
-              [isCurrency]="true"
-              [locale]="user?.settings?.locale"
-              [unit]="user?.settings?.baseCurrency"
-              [value]="withdrawalRatePerYearProjected?.toNumber()"
-            />
+        @if (user?.settings?.isExperimentalFeatures) {
+          <div>
+            <ng-container i18n>By</ng-container>
             <ng-container>&nbsp;</ng-container>
-            <ng-container i18n>per year</ng-container></span
-          >
-          <ng-container>&nbsp;</ng-container>
-          <ng-container i18n>or</ng-container>
-          <ng-container>&nbsp;</ng-container>
-          <span class="font-weight-bold"
-            ><gf-value
-              class="d-inline-block"
-              [isCurrency]="true"
-              [locale]="user?.settings?.locale"
-              [unit]="user?.settings?.baseCurrency"
-              [value]="withdrawalRatePerMonthProjected?.toNumber()"
-            />
+            <span class="font-weight-bold">{{
+              user?.settings?.retirementDate ?? retirementDate
+                | date: 'MMMM yyyy'
+            }}</span>
+            <ng-container i18n>,</ng-container>
             <ng-container>&nbsp;</ng-container>
-            <ng-container i18n>per month</ng-container></span
-          ><ng-container i18n>,</ng-container>
-          <ng-container>&nbsp;</ng-container>
-          <ng-container i18n>assuming a</ng-container>
-          <ng-container>&nbsp;</ng-container>
-          <span class="font-weight-bold"
-            ><gf-value
-              class="d-inline-block"
-              [isPercent]="true"
-              [locale]="user?.settings?.locale"
-              [precision]="2"
-              [value]="user?.settings?.annualInterestRate / 100"
-          /></span>
-          <ng-container>&nbsp;</ng-container>
-          <ng-container i18n>annual interest rate</ng-container>.
-        </div>
+            <ng-container i18n>this is projected to increase to</ng-container>
+            <ng-container>&nbsp;</ng-container>
+            <span class="font-weight-bold"
+              ><gf-value
+                class="d-inline-block"
+                [isCurrency]="true"
+                [locale]="user?.settings?.locale"
+                [unit]="user?.settings?.baseCurrency"
+                [value]="withdrawalRatePerYearProjected?.toNumber()"
+              />
+              <ng-container>&nbsp;</ng-container>
+              <ng-container i18n>per year</ng-container></span
+            >
+            <ng-container>&nbsp;</ng-container>
+            <ng-container i18n>or</ng-container>
+            <ng-container>&nbsp;</ng-container>
+            <span class="font-weight-bold"
+              ><gf-value
+                class="d-inline-block"
+                [isCurrency]="true"
+                [locale]="user?.settings?.locale"
+                [unit]="user?.settings?.baseCurrency"
+                [value]="withdrawalRatePerMonthProjected?.toNumber()"
+              />
+              <ng-container>&nbsp;</ng-container>
+              <ng-container i18n>per month</ng-container></span
+            ><ng-container i18n>,</ng-container>
+            <ng-container>&nbsp;</ng-container>
+            <ng-container i18n>assuming a</ng-container>
+            <ng-container>&nbsp;</ng-container>
+            <span class="font-weight-bold"
+              ><gf-value
+                class="d-inline-block"
+                [isPercent]="true"
+                [locale]="user?.settings?.locale"
+                [precision]="2"
+                [value]="user?.settings?.annualInterestRate / 100"
+            /></span>
+            <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';