Resolved typescript strict errors

apps/browser/src/tools/popup/settings/about-page/more-from-bitwarden-page-v2.component.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from "@angular/common";
 import { Component } from "@angular/core";
 import { RouterModule } from "@angular/router";
-import { Observable, firstValueFrom, switchMap } from "rxjs";
+import { Observable, firstValueFrom, of, switchMap } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
@@ -45,7 +45,9 @@ export class MoreFromBitwardenPageV2Component {
   ) {
     this.canAccessPremium$ = this.accountService.activeAccount$.pipe(
       switchMap((account) =>
-        this.billingAccountProfileStateService.hasPremiumFromAnySource$(account.id),
+        account
+          ? this.billingAccountProfileStateService.hasPremiumFromAnySource$(account.id)
+          : of(false),
       ),
     );
     this.familySponsorshipAvailable$ = this.organizationService.familySponsorshipAvailable$;

apps/web/src/app/core/guards/has-premium.guard.ts

@@ -6,7 +6,7 @@ import {
   CanActivateFn,
   UrlTree,
 } from "@angular/router";
-import { Observable } from "rxjs";
+import { Observable, of } from "rxjs";
 import { switchMap, tap } from "rxjs/operators";
 
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
@@ -29,7 +29,9 @@ export function hasPremiumGuard(): CanActivateFn {
 
     return accountService.activeAccount$.pipe(
       switchMap((account) =>
-        billingAccountProfileStateService.hasPremiumFromAnySource$(account.id),
+        account
+          ? billingAccountProfileStateService.hasPremiumFromAnySource$(account.id)
+          : of(false),
       ),
       tap((userHasPremium: boolean) => {
         if (!userHasPremium) {

apps/web/src/app/layouts/user-layout.component.ts

@@ -1,3 +1,5 @@
+// FIXME: Update this file to be type safe and remove this and next line
+// @ts-strict-ignore
 import { CommonModule } from "@angular/common";
 import { Component, OnInit } from "@angular/core";
 import { RouterModule } from "@angular/router";

apps/web/src/app/vault/individual-vault/vault-banners/services/vault-banners.service.ts

@@ -1,5 +1,15 @@
 import { Injectable } from "@angular/core";
-import { Subject, Observable, combineLatest, firstValueFrom, map, mergeMap, take } from "rxjs";
+import {
+  Subject,
+  Observable,
+  combineLatest,
+  firstValueFrom,
+  map,
+  mergeMap,
+  take,
+  switchMap,
+  of,
+} from "rxjs";
 
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { TokenService } from "@bitwarden/common/auth/abstractions/token.service";
@@ -13,7 +23,6 @@ import {
   BANNERS_DISMISSED_DISK,
   UserKeyDefinition,
 } from "@bitwarden/common/platform/state";
-import { UserId } from "@bitwarden/common/types/guid";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
 import { PBKDF2KdfConfig, KdfConfigService, KdfType } from "@bitwarden/key-management";
 
@@ -57,7 +66,6 @@ export class VaultBannersService {
 
   private premiumBannerState: ActiveUserState<PremiumBannerReprompt>;
   private sessionBannerState: ActiveUserState<SessionBanners[]>;
-  private activeUserId: UserId;
 
   /**
    * Emits when the sync service has completed a sync
@@ -82,14 +90,17 @@ export class VaultBannersService {
     this.premiumBannerState = this.stateProvider.getActive(PREMIUM_BANNER_REPROMPT_KEY);
     this.sessionBannerState = this.stateProvider.getActive(BANNERS_DISMISSED_DISK_KEY);
 
-    this.accountService.activeAccount$.pipe(take(1)).subscribe((account) => {
-      this.activeUserId = account?.id;
-    });
-
-    const premiumSources$ = combineLatest([
-      this.billingAccountProfileStateService.hasPremiumFromAnySource$(this.activeUserId),
-      this.premiumBannerState.state$,
-    ]);
+    const premiumSources$ = this.accountService.activeAccount$.pipe(
+      take(1),
+      switchMap((account) => {
+        return combineLatest([
+          account
+            ? this.billingAccountProfileStateService.hasPremiumFromAnySource$(account.id)
+            : of(false),
+          this.premiumBannerState.state$,
+        ]);
+      }),
+    );
 
     this.shouldShowPremiumBanner$ = this.syncCompleted$.pipe(
       take(1), // Wait until the first sync is complete before considering the premium status

libs/angular/src/directives/not-premium.directive.ts

@@ -20,6 +20,12 @@ export class NotPremiumDirective implements OnInit {
 
   async ngOnInit(): Promise<void> {
     const account = await firstValueFrom(this.accountService.activeAccount$);
+
+    if (!account) {
+      this.viewContainer.createEmbeddedView(this.templateRef);
+      return;
+    }
+
     const premium = await firstValueFrom(
       this.billingAccountProfileStateService.hasPremiumFromAnySource$(account.id),
     );

libs/angular/src/directives/premium.directive.ts

@@ -1,5 +1,5 @@
 import { Directive, OnDestroy, OnInit, TemplateRef, ViewContainerRef } from "@angular/core";
-import { Subject, switchMap, takeUntil } from "rxjs";
+import { of, Subject, switchMap, takeUntil } from "rxjs";
 
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
@@ -24,7 +24,9 @@ export class PremiumDirective implements OnInit, OnDestroy {
     this.accountService.activeAccount$
       .pipe(
         switchMap((account) =>
-          this.billingAccountProfileStateService.hasPremiumFromAnySource$(account.id),
+          account
+            ? this.billingAccountProfileStateService.hasPremiumFromAnySource$(account.id)
+            : of(false),
         ),
         takeUntil(this.directiveIsDestroyed$),
       )

libs/tools/send/send-ui/src/new-send-dropdown/new-send-dropdown.component.ts

@@ -30,6 +30,11 @@ export class NewSendDropdownComponent implements OnInit {
 
   async ngOnInit() {
     const account = await firstValueFrom(this.accountService.activeAccount$);
+    if (!account) {
+      this.hasNoPremium = true;
+      return;
+    }
+
     this.hasNoPremium = !(await firstValueFrom(
       this.billingAccountProfileStateService.hasPremiumFromAnySource$(account.id),
     ));

libs/tools/send/send-ui/src/send-list-filters/send-list-filters.component.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from "@angular/common";
 import { Component, OnDestroy } from "@angular/core";
 import { ReactiveFormsModule } from "@angular/forms";
-import { Observable, switchMap } from "rxjs";
+import { Observable, of, switchMap } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
@@ -28,7 +28,9 @@ export class SendListFiltersComponent implements OnDestroy {
   ) {
     this.canAccessPremium$ = accountService.activeAccount$.pipe(
       switchMap((account) =>
-        billingAccountProfileStateService.hasPremiumFromAnySource$(account.id),
+        account
+          ? billingAccountProfileStateService.hasPremiumFromAnySource$(account.id)
+          : of(false),
       ),
     );
   }