Improve states (#3000)

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

@@ -48,11 +48,9 @@ export class FirePageComponent implements OnDestroy, OnInit {
       .fetchPortfolioDetails()
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(({ summary }) => {
-        if (summary.cash === null || summary.currentValue === null) {
-          return;
-        }
-
-        this.fireWealth = new Big(summary.fireWealth);
+        this.fireWealth = summary.fireWealth
+          ? new Big(summary.fireWealth)
+          : new Big(10000);
         this.withdrawalRatePerYear = this.fireWealth.mul(4).div(100);
         this.withdrawalRatePerMonth = this.withdrawalRatePerYear.div(12);
 
@@ -94,10 +92,13 @@ export class FirePageComponent implements OnDestroy, OnInit {
             permissions.createOrder
           );
 
-          this.hasPermissionToUpdateUserSettings = hasPermission(
-            this.user.permissions,
-            permissions.updateUserSettings
-          );
+          this.hasPermissionToUpdateUserSettings =
+            this.user.subscription?.type === 'Basic'
+              ? false
+              : hasPermission(
+                  this.user.permissions,
+                  permissions.updateUserSettings
+                );
 
           this.changeDetectorRef.markForCheck();
         }

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

@@ -18,6 +18,10 @@
           [fireWealth]="fireWealth?.toNumber()"
           [hasPermissionToUpdateUserSettings]="!hasImpersonationId && hasPermissionToUpdateUserSettings"
           [locale]="user?.settings?.locale"
+          [ngStyle]="{
+            opacity: user?.subscription?.type === 'Basic' ? '0.67' : 'initial',
+            'pointer-events': user?.subscription?.type === 'Basic' ? 'none' : 'initial'
+          }"
           [projectedTotalAmount]="user?.settings?.projectedTotalAmount"
           [retirementDate]="user?.settings?.retirementDate"
           [savingsRate]="user?.settings?.savingsRate"
@@ -54,7 +58,11 @@
         }"
       />
     </div>
-    <div *ngIf="!isLoading" i18n>
+    <div
+      *ngIf="!isLoading"
+      i18n
+      [ngClass]="{ 'text-muted': user?.subscription?.type === 'Basic' }"
+    >
       If you retire today, you would be able to withdraw
       <span class="font-weight-bold"
         ><gf-value

libs/ui/src/lib/fire-calculator/fire-calculator.component.scss

@@ -13,7 +13,7 @@
     .mdc-text-field--disabled {
       .mdc-floating-label,
       .mdc-text-field__input {
-        color: inherit;
+        color: inherit !important;
       }
 
       .mdc-notched-outline__leading,