Review Changes

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

@@ -19,14 +19,14 @@ import { takeUntil } from 'rxjs/operators';
 
 @Component({
   imports: [
-    CommonModule,
-    FormsModule,
-    ReactiveFormsModule,
     GfFireCalculatorComponent,
     GfPremiumIndicatorComponent,
     GfValueComponent,
     NgStyle,
-    NgxSkeletonLoaderModule
+    NgxSkeletonLoaderModule,
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule
   ],
   selector: 'gf-fire-page',
   styleUrls: ['./fire-page.scss'],
@@ -38,13 +38,12 @@ export class GfFirePageComponent implements OnDestroy, OnInit {
   public hasImpersonationId: boolean;
   public hasPermissionToUpdateUserSettings: boolean;
   public isLoading = false;
+  public safeWithdrawalRateControl = new FormControl(0.025);
   public safeWithdrawalRateOptions = [0.025, 0.03, 0.035, 0.04, 0.045];
   public user: User;
   public withdrawalRatePerMonth: Big;
   public withdrawalRatePerYear: Big;
 
-  public safeWithdrawalRateControl: FormControl;
-
   private unsubscribeSubject = new Subject<void>();
 
   public constructor(
@@ -100,12 +99,19 @@ export class GfFirePageComponent implements OnDestroy, OnInit {
         if (state?.user) {
           this.user = state.user;
 
-          const newSWR = this.user?.settings?.safeWithdrawalRate ?? 0.025;
+          const isWithdrawalRateDisabled =
+            this.user?.subscription?.type === 'Basic' ||
+            this.hasImpersonationId;
 
-          if (this.safeWithdrawalRateControl.value !== newSWR) {
+          this.safeWithdrawalRateControl.setValue(
-            this.safeWithdrawalRateControl.setValue(newSWR, {
+            this.user.settings.safeWithdrawalRate,
-              emitEvent: false
+            { emitEvent: false }
-            });
+          );
+
+          if (isWithdrawalRateDisabled) {
+            this.safeWithdrawalRateControl.disable({ emitEvent: false });
+          } else {
+            this.safeWithdrawalRateControl.enable({ emitEvent: false });
           }
 
           this.hasPermissionToUpdateUserSettings =
@@ -122,10 +128,13 @@ export class GfFirePageComponent implements OnDestroy, OnInit {
         }
       });
 
-    this.safeWithdrawalRateControl.valueChanges.subscribe((value: number) => {
+    this.safeWithdrawalRateControl.valueChanges
-      console.log('New SWR selected:', value);
+      .pipe(takeUntil(this.unsubscribeSubject))
-      this.onSafeWithdrawalRateChange(Number(value));
+      .subscribe((value: number) => {
-    });
+        if (!this.safeWithdrawalRateControl.disabled) {
+          this.onSafeWithdrawalRateChange(Number(value));
+        }
+      });
   }
 
   public onAnnualInterestRateChange(annualInterestRate: number) {

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

@@ -107,15 +107,14 @@
         <ng-container i18n>and a safe withdrawal rate (SWR) of</ng-container>
         <ng-container>&nbsp;</ng-container>
         <select
-          class="d-inline-block font-weight-bold w-auto swr-select"
+          class="cursor-pointer d-inline-block font-weight-bold swr-select w-auto"
-          [disabled]="
-            user?.subscription?.type === 'Basic' || hasImpersonationId
-          "
           [formControl]="safeWithdrawalRateControl"
         >
-          <option *ngFor="let rate of safeWithdrawalRateOptions" [value]="rate">
+          @for (rate of safeWithdrawalRateOptions; track rate) {
-            {{ rate | percent: '1.1-1' }}
+            <option [value]="rate">
-          </option>
+              {{ rate | percent: '1.1-1' }}
+            </option>
+          }
         </select>
       </div>
     }