Refactoring

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

@@ -19,13 +19,13 @@ import { takeUntil } from 'rxjs/operators';
 
 @Component({
   imports: [
+    CommonModule,
+    FormsModule,
     GfFireCalculatorComponent,
     GfPremiumIndicatorComponent,
     GfValueComponent,
     NgStyle,
     NgxSkeletonLoaderModule,
-    CommonModule,
-    FormsModule,
     ReactiveFormsModule
   ],
   selector: 'gf-fire-page',
@@ -38,7 +38,7 @@ export class GfFirePageComponent implements OnDestroy, OnInit {
   public hasImpersonationId: boolean;
   public hasPermissionToUpdateUserSettings: boolean;
   public isLoading = false;
-  public safeWithdrawalRateControl = new FormControl(0.025);
+  public safeWithdrawalRateControl = new FormControl<number>(undefined);
   public safeWithdrawalRateOptions = [0.025, 0.03, 0.035, 0.04, 0.045];
   public user: User;
   public withdrawalRatePerMonth: Big;
@@ -58,8 +58,6 @@ export class GfFirePageComponent implements OnDestroy, OnInit {
     this.isLoading = true;
     this.deviceType = this.deviceService.getDeviceInfo().deviceType;
 
-    this.safeWithdrawalRateControl = new FormControl(0.025);
-
     this.dataService
       .fetchPortfolioDetails()
       .pipe(takeUntil(this.unsubscribeSubject))
@@ -99,21 +97,6 @@ export class GfFirePageComponent implements OnDestroy, OnInit {
         if (state?.user) {
           this.user = state.user;
 
-          const isWithdrawalRateDisabled =
-            this.user?.subscription?.type === 'Basic' ||
-            this.hasImpersonationId;
-
-          this.safeWithdrawalRateControl.setValue(
-            this.user.settings.safeWithdrawalRate,
-            { emitEvent: false }
-          );
-
-          if (isWithdrawalRateDisabled) {
-            this.safeWithdrawalRateControl.disable({ emitEvent: false });
-          } else {
-            this.safeWithdrawalRateControl.enable({ emitEvent: false });
-          }
-
           this.hasPermissionToUpdateUserSettings =
             this.user.subscription?.type === 'Basic'
               ? false
@@ -122,6 +105,11 @@ export class GfFirePageComponent implements OnDestroy, OnInit {
                   permissions.updateUserSettings
                 );
 
+          this.safeWithdrawalRateControl.setValue(
+            this.user.settings.safeWithdrawalRate,
+            { emitEvent: false }
+          );
+
           this.calculateWithdrawalRates();
 
           this.changeDetectorRef.markForCheck();
@@ -233,9 +221,8 @@ export class GfFirePageComponent implements OnDestroy, OnInit {
   private calculateWithdrawalRates() {
     if (this.fireWealth && this.user?.settings?.safeWithdrawalRate) {
       this.withdrawalRatePerYear = new Big(
-        this.fireWealth.today.valueInBaseCurrency *
+        this.fireWealth.today.valueInBaseCurrency
-          this.user.settings.safeWithdrawalRate
+      ).mul(this.user.settings.safeWithdrawalRate);
-      );
 
       this.withdrawalRatePerMonth = this.withdrawalRatePerYear.div(12);
     }

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

@@ -105,17 +105,28 @@
         </span>
         <ng-container>&nbsp;</ng-container>
         <ng-container i18n>and a safe withdrawal rate (SWR) of</ng-container>
-        <ng-container>&nbsp;</ng-container>
+        @if (!hasImpersonationId && hasPermissionToUpdateUserSettings) {
-        <select
+          <select
-          class="cursor-pointer d-inline-block font-weight-bold swr-select w-auto"
+            class="border-0 cursor-pointer d-inline-block font-weight-bold safe-withdrawal-rate-select w-auto"
-          [formControl]="safeWithdrawalRateControl"
+            [formControl]="safeWithdrawalRateControl"
-        >
+          >
-          @for (rate of safeWithdrawalRateOptions; track rate) {
+            @for (rate of safeWithdrawalRateOptions; track rate) {
-            <option [value]="rate">
+              <option [value]="rate">
-              {{ rate | percent: '1.1-1' }}
+                {{ rate | percent: '1.1-1' }}
-            </option>
+              </option>
-          }
+            }</select
-        </select>
+          >.
+        } @else {
+          <ng-container>&nbsp;</ng-container>
+          <span class="font-weight-bold"
+            ><gf-value
+              class="d-inline-block"
+              [isPercent]="true"
+              [locale]="user?.settings?.locale"
+              [precision]="1"
+              [value]="user?.settings?.safeWithdrawalRate" /></span
+          >.
+        }
       </div>
     }
   </div>

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

@@ -1,32 +1,19 @@
 :host {
   display: block;
 
-  .swr-select {
+  .safe-withdrawal-rate-select {
     background-color: transparent;
-    border: 0;
-
     color: rgb(var(--dark-primary-text));
 
     &:focus {
       box-shadow: none;
       outline: 0;
     }
-
-    option {
-      background: rgb(var(--light-background));
-      color: rgb(var(--dark-primary-text));
-      border: 0;
-    }
   }
 }
 
 :host-context(.theme-dark) {
-  .swr-select {
+  .safe-withdrawal-rate-select {
     color: rgb(var(--light-primary-text));
-
-    option {
-      background: rgb(var(--dark-background));
-      color: rgb(var(--light-primary-text));
-    }
   }
 }