[AC-2156] Billing State Provider Migration (#8133)

* Added billing account profile state service * Update usages after removing state service functions * Added migrator * Updated bw.ts and main.background.ts * Removed comment * Updated state service dependencies to include billing service * Added missing mv3 factory and updated MainContextMenuHandler * updated autofill service and tests * Updated the remaining extensions usages * Updated desktop * Removed subjects where they weren't needed * Refactored billing service to have a single setter to avoid unecessary emissions * Refactored has premium guard to return an observable * Renamed services to match ADR f633f2cdd8/docs/architecture/clients/presentation/angular.md (abstract--default-implementations) * Updated property names to be a smidgen more descriptive and added jsdocs * Updated setting of canAccessPremium to automatically update when the underlying observable emits * Fixed build error after merge conflicts * Another build error from conflict * Removed autofill unit test changes from conflict * Updated login strategy to not set premium field using state service * Updated CLI to use billing state provider * Shortened names a bit * Fixed build
2025-12-17 16:53:34 +00:00 · 2024-03-15 15:53:05 -04:00
parent 65534a1323
commit b99153a016
85 changed files with 942 additions and 261 deletions
--- a/apps/web/src/app/admin-console/organizations/settings/two-factor-setup.component.ts
+++ b/apps/web/src/app/admin-console/organizations/settings/two-factor-setup.component.ts
@@ -8,8 +8,8 @@ import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { TwoFactorProviderType } from "@bitwarden/common/auth/enums/two-factor-provider-type";
+import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
-import { StateService } from "@bitwarden/common/platform/abstractions/state.service";

 import { TwoFactorDuoComponent } from "../../../auth/settings/two-factor-duo.component";
 import { TwoFactorSetupComponent as BaseTwoFactorSetupComponent } from "../../../auth/settings/two-factor-setup.component";
@@ -27,10 +27,16 @@ export class TwoFactorSetupComponent extends BaseTwoFactorSetupComponent {
    messagingService: MessagingService,
    policyService: PolicyService,
    private route: ActivatedRoute,
-    stateService: StateService,
    private organizationService: OrganizationService,
+    billingAccountProfileStateService: BillingAccountProfileStateService,
  ) {
-    super(apiService, modalService, messagingService, policyService, stateService);
+    super(
+      apiService,
+      modalService,
+      messagingService,
+      policyService,
+      billingAccountProfileStateService,
+    );
  }

  async ngOnInit() {
--- a/apps/web/src/app/auth/settings/emergency-access/attachments/emergency-access-attachments.component.ts
+++ b/apps/web/src/app/auth/settings/emergency-access/attachments/emergency-access-attachments.component.ts
@@ -2,6 +2,7 @@ import { Component } from "@angular/core";

 import { AttachmentsComponent as BaseAttachmentsComponent } from "@bitwarden/angular/vault/components/attachments.component";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
+import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
 import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service";
 import { FileDownloadService } from "@bitwarden/common/platform/abstractions/file-download/file-download.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -30,6 +31,7 @@ export class EmergencyAccessAttachmentsComponent extends BaseAttachmentsComponen
    logService: LogService,
    fileDownloadService: FileDownloadService,
    dialogService: DialogService,
+    billingAccountProfileStateService: BillingAccountProfileStateService,
  ) {
    super(
      cipherService,
@@ -42,6 +44,7 @@ export class EmergencyAccessAttachmentsComponent extends BaseAttachmentsComponen
      stateService,
      fileDownloadService,
      dialogService,
+      billingAccountProfileStateService,
    );
  }

--- a/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.html
+++ b/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.html
@@ -28,7 +28,7 @@
          bitButton
          buttonType="primary"
          [bitAction]="invite"
-          [disabled]="!canAccessPremium"
+          [disabled]="!(canAccessPremium$ | async)"
        >
          <i aria-hidden="true" class="bwi bwi-plus bwi-fw"></i>
          {{ "addEmergencyContact" | i18n }}
--- a/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.ts
+++ b/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.ts
@@ -1,8 +1,9 @@
 import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
-import { lastValueFrom } from "rxjs";
+import { lastValueFrom, Observable, firstValueFrom } from "rxjs";

 import { UserNamePipe } from "@bitwarden/angular/pipes/user-name.pipe";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
+import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
@@ -44,7 +45,7 @@ export class EmergencyAccessComponent implements OnInit {
  confirmModalRef: ViewContainerRef;

  loaded = false;
-  canAccessPremium: boolean;
+  canAccessPremium$: Observable<boolean>;
  trustedContacts: GranteeEmergencyAccess[];
  grantedContacts: GrantorEmergencyAccess[];
  emergencyAccessType = EmergencyAccessType;
@@ -62,10 +63,12 @@ export class EmergencyAccessComponent implements OnInit {
    private stateService: StateService,
    private organizationService: OrganizationService,
    protected dialogService: DialogService,
-  ) {}
+    billingAccountProfileStateService: BillingAccountProfileStateService,
+  ) {
+    this.canAccessPremium$ = billingAccountProfileStateService.hasPremiumFromAnySource$;
+  }

  async ngOnInit() {
-    this.canAccessPremium = await this.stateService.getCanAccessPremium();
    const orgs = await this.organizationService.getAll();
    this.isOrganizationOwner = orgs.some((o) => o.isOwner);
    // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
@@ -80,18 +83,21 @@ export class EmergencyAccessComponent implements OnInit {
  }

  async premiumRequired() {
-    if (!this.canAccessPremium) {
+    const canAccessPremium = await firstValueFrom(this.canAccessPremium$);
+
+    if (!canAccessPremium) {
      this.messagingService.send("premiumRequired");
      return;
    }
  }

  edit = async (details: GranteeEmergencyAccess) => {
+    const canAccessPremium = await firstValueFrom(this.canAccessPremium$);
    const dialogRef = EmergencyAccessAddEditComponent.open(this.dialogService, {
      data: {
        name: this.userNamePipe.transform(details),
        emergencyAccessId: details?.id,
-        readOnly: !this.canAccessPremium,
+        readOnly: !canAccessPremium,
      },
    });

--- a/apps/web/src/app/auth/settings/emergency-access/view/emergency-add-edit-cipher.component.ts
+++ b/apps/web/src/app/auth/settings/emergency-access/view/emergency-add-edit-cipher.component.ts
@@ -5,6 +5,7 @@ import { AuditService } from "@bitwarden/common/abstractions/audit.service";
 import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
+import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
 import { ConfigServiceAbstraction } from "@bitwarden/common/platform/abstractions/config/config.service.abstraction";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
@@ -52,6 +53,7 @@ export class EmergencyAddEditCipherComponent extends BaseAddEditComponent {
    dialogService: DialogService,
    datePipe: DatePipe,
    configService: ConfigServiceAbstraction,
+    billingAccountProfileStateService: BillingAccountProfileStateService,
  ) {
    super(
      cipherService,
@@ -73,6 +75,7 @@ export class EmergencyAddEditCipherComponent extends BaseAddEditComponent {
      dialogService,
      datePipe,
      configService,
+      billingAccountProfileStateService,
    );
  }

--- a/apps/web/src/app/auth/settings/two-factor-setup.component.html
+++ b/apps/web/src/app/auth/settings/two-factor-setup.component.html
@@ -70,7 +70,7 @@
          type="button"
          bitButton
          buttonType="secondary"
-          [disabled]="!canAccessPremium && p.premium"
+          [disabled]="!(canAccessPremium$ | async) && p.premium"
          (click)="manage(p.type)"
        >
          {{ "manage" | i18n }}
--- a/apps/web/src/app/auth/settings/two-factor-setup.component.ts
+++ b/apps/web/src/app/auth/settings/two-factor-setup.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit, Type, ViewChild, ViewContainerRef } from "@angular/core";
-import { Subject, takeUntil } from "rxjs";
+import { firstValueFrom, Observable, Subject, takeUntil } from "rxjs";

 import { ModalRef } from "@bitwarden/angular/components/modal/modal.ref";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
@@ -9,9 +9,9 @@ import { PolicyType } from "@bitwarden/common/admin-console/enums";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { TwoFactorProviderType } from "@bitwarden/common/auth/enums/two-factor-provider-type";
 import { TwoFactorProviders } from "@bitwarden/common/auth/services/two-factor.service";
+import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
 import { ProductType } from "@bitwarden/common/enums";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
-import { StateService } from "@bitwarden/common/platform/abstractions/state.service";

 import { TwoFactorAuthenticatorComponent } from "./two-factor-authenticator.component";
 import { TwoFactorDuoComponent } from "./two-factor-duo.component";
@@ -40,7 +40,7 @@ export class TwoFactorSetupComponent implements OnInit, OnDestroy {
  organizationId: string;
  organization: Organization;
  providers: any[] = [];
-  canAccessPremium: boolean;
+  canAccessPremium$: Observable<boolean>;
  showPolicyWarning = false;
  loading = true;
  modal: ModalRef;
@@ -56,12 +56,12 @@ export class TwoFactorSetupComponent implements OnInit, OnDestroy {
    protected modalService: ModalService,
    protected messagingService: MessagingService,
    protected policyService: PolicyService,
-    private stateService: StateService,
-  ) {}
+    billingAccountProfileStateService: BillingAccountProfileStateService,
+  ) {
+    this.canAccessPremium$ = billingAccountProfileStateService.hasPremiumFromAnySource$;
+  }

  async ngOnInit() {
-    this.canAccessPremium = await this.stateService.getCanAccessPremium();
-
    for (const key in TwoFactorProviders) {
      // eslint-disable-next-line
      if (!TwoFactorProviders.hasOwnProperty(key)) {
@@ -174,7 +174,7 @@ export class TwoFactorSetupComponent implements OnInit, OnDestroy {
  }

  async premiumRequired() {
-    if (!this.canAccessPremium) {
+    if (!(await firstValueFrom(this.canAccessPremium$))) {
      this.messagingService.send("premiumRequired");
      return;
    }
--- a/apps/web/src/app/billing/individual/premium.component.html
+++ b/apps/web/src/app/billing/individual/premium.component.html
@@ -6,7 +6,7 @@
 </div>
 <bit-callout
  type="info"
-  *ngIf="canAccessPremium"
+  *ngIf="canAccessPremium$ | async"
  title="{{ 'youHavePremiumAccess' | i18n }}"
  icon="bwi bwi-star-f"
 >
--- a/apps/web/src/app/billing/individual/premium.component.ts
+++ b/apps/web/src/app/billing/individual/premium.component.ts
@@ -1,14 +1,15 @@
 import { Component, OnInit, ViewChild } from "@angular/core";
 import { Router } from "@angular/router";
+import { firstValueFrom, Observable } from "rxjs";

 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { TokenService } from "@bitwarden/common/auth/abstractions/token.service";
+import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";

 import { PaymentComponent, TaxInfoComponent } from "../shared";
@@ -20,7 +21,7 @@ export class PremiumComponent implements OnInit {
  @ViewChild(PaymentComponent) paymentComponent: PaymentComponent;
  @ViewChild(TaxInfoComponent) taxInfoComponent: TaxInfoComponent;

-  canAccessPremium = false;
+  canAccessPremium$: Observable<boolean>;
  selfHosted = false;
  premiumPrice = 10;
  familyPlanMaxUserCount = 6;
@@ -39,17 +40,16 @@ export class PremiumComponent implements OnInit {
    private messagingService: MessagingService,
    private syncService: SyncService,
    private logService: LogService,
-    private stateService: StateService,
    private environmentService: EnvironmentService,
+    private billingAccountProfileStateService: BillingAccountProfileStateService,
  ) {
    this.selfHosted = platformUtilsService.isSelfHost();
    this.cloudWebVaultUrl = this.environmentService.getCloudWebVaultUrl();
+    this.canAccessPremium$ = billingAccountProfileStateService.hasPremiumFromAnySource$;
  }

  async ngOnInit() {
-    this.canAccessPremium = await this.stateService.getCanAccessPremium();
-    const premiumPersonally = await this.stateService.getHasPremiumPersonally();
-    if (premiumPersonally) {
+    if (await firstValueFrom(this.billingAccountProfileStateService.hasPremiumPersonally$)) {
      // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
      // eslint-disable-next-line @typescript-eslint/no-floating-promises
      this.router.navigate(["/settings/subscription/user-subscription"]);
--- a/apps/web/src/app/billing/individual/subscription.component.html
+++ b/apps/web/src/app/billing/individual/subscription.component.html
@@ -1,6 +1,8 @@
 <app-header>
  <bit-tab-nav-bar slot="tabs" *ngIf="!selfHosted">
-    <bit-tab-link [route]="subscriptionRoute">{{ "subscription" | i18n }}</bit-tab-link>
+    <bit-tab-link [route]="(hasPremium$ | async) ? 'user-subscription' : 'premium'">{{
+      "subscription" | i18n
+    }}</bit-tab-link>
    <bit-tab-link route="payment-method">{{ "paymentMethod" | i18n }}</bit-tab-link>
    <bit-tab-link route="billing-history">{{ "billingHistory" | i18n }}</bit-tab-link>
  </bit-tab-nav-bar>
--- a/apps/web/src/app/billing/individual/subscription.component.ts
+++ b/apps/web/src/app/billing/individual/subscription.component.ts
@@ -1,26 +1,24 @@
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
+import { Observable } from "rxjs";

+import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { StateService } from "@bitwarden/common/platform/abstractions/state.service";

@Component({
  templateUrl: "subscription.component.html",
 })
-export class SubscriptionComponent {
-  hasPremium: boolean;
+export class SubscriptionComponent implements OnInit {
+  hasPremium$: Observable<boolean>;
  selfHosted: boolean;

  constructor(
-    private stateService: StateService,
    private platformUtilsService: PlatformUtilsService,
-  ) {}
+    billingAccountProfileStateService: BillingAccountProfileStateService,
+  ) {
+    this.hasPremium$ = billingAccountProfileStateService.hasPremiumPersonally$;
+  }

-  async ngOnInit() {
-    this.hasPremium = await this.stateService.getHasPremiumPersonally();
+  ngOnInit() {
    this.selfHosted = this.platformUtilsService.isSelfHost();
  }
-
-  get subscriptionRoute(): string {
-    return this.hasPremium ? "user-subscription" : "premium";
-  }
 }
--- a/apps/web/src/app/billing/individual/user-subscription.component.ts
+++ b/apps/web/src/app/billing/individual/user-subscription.component.ts
@@ -1,8 +1,9 @@
 import { Component, OnInit } from "@angular/core";
 import { Router } from "@angular/router";
-import { lastValueFrom, Observable } from "rxjs";
+import { firstValueFrom, lastValueFrom, Observable } from "rxjs";

 import { ApiService } from "@bitwarden/common/abstractions/api.service";
+import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
 import { SubscriptionResponse } from "@bitwarden/common/billing/models/response/subscription.response";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigServiceAbstraction as ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service.abstraction";
@@ -11,7 +12,6 @@ import { FileDownloadService } from "@bitwarden/common/platform/abstractions/fil
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { DialogService } from "@bitwarden/components";

 import {
@@ -37,7 +37,6 @@ export class UserSubscriptionComponent implements OnInit {
  presentUserWithOffboardingSurvey$: Observable<boolean>;

  constructor(
-    private stateService: StateService,
    private apiService: ApiService,
    private platformUtilsService: PlatformUtilsService,
    private i18nService: I18nService,
@@ -47,6 +46,7 @@ export class UserSubscriptionComponent implements OnInit {
    private dialogService: DialogService,
    private environmentService: EnvironmentService,
    private configService: ConfigService,
+    private billingAccountProfileStateService: BillingAccountProfileStateService,
  ) {
    this.selfHosted = platformUtilsService.isSelfHost();
    this.cloudWebVaultUrl = this.environmentService.getCloudWebVaultUrl();
@@ -65,8 +65,7 @@ export class UserSubscriptionComponent implements OnInit {
      return;
    }

-    // eslint-disable-next-line @typescript-eslint/no-misused-promises
-    if (this.stateService.getHasPremiumPersonally()) {
+    if (await firstValueFrom(this.billingAccountProfileStateService.hasPremiumPersonally$)) {
      this.loading = true;
      this.sub = await this.apiService.getUserSubscription();
    } else {
--- a/apps/web/src/app/core/guards/has-premium.guard.ts
+++ b/apps/web/src/app/core/guards/has-premium.guard.ts
@@ -4,32 +4,39 @@ import {
  RouterStateSnapshot,
  Router,
  CanActivateFn,
+  UrlTree,
 } from "@angular/router";
+import { Observable } from "rxjs";
+import { tap } from "rxjs/operators";

+import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
-import { StateService } from "@bitwarden/common/platform/abstractions/state.service";

 /**
 * CanActivate guard that checks if the user has premium and otherwise triggers the "premiumRequired"
 * message and blocks navigation.
 */
 export function hasPremiumGuard(): CanActivateFn {
-  return async (_route: ActivatedRouteSnapshot, _state: RouterStateSnapshot) => {
+  return (
+    _route: ActivatedRouteSnapshot,
+    _state: RouterStateSnapshot,
+  ): Observable<boolean | UrlTree> => {
    const router = inject(Router);
-    const stateService = inject(StateService);
    const messagingService = inject(MessagingService);
+    const billingAccountProfileStateService = inject(BillingAccountProfileStateService);

-    const userHasPremium = await stateService.getCanAccessPremium();
-
-    if (!userHasPremium) {
-      messagingService.send("premiumRequired");
-    }
-
-    // Prevent trapping the user on the login page, since that's an awful UX flow
-    if (!userHasPremium && router.url === "/login") {
-      return router.createUrlTree(["/"]);
-    }
-
-    return userHasPremium;
+    return billingAccountProfileStateService.hasPremiumFromAnySource$.pipe(
+      tap((userHasPremium: boolean) => {
+        if (!userHasPremium) {
+          messagingService.send("premiumRequired");
+        }
+      }),
+      // Prevent trapping the user on the login page, since that's an awful UX flow
+      tap((userHasPremium: boolean) => {
+        if (!userHasPremium && router.url === "/login") {
+          return router.createUrlTree(["/"]);
+        }
+      }),
+    );
  };
 }
--- a/apps/web/src/app/layouts/user-layout.component.ts
+++ b/apps/web/src/app/layouts/user-layout.component.ts
@@ -1,15 +1,16 @@
 import { CommonModule } from "@angular/common";
 import { Component, NgZone, OnDestroy, OnInit } from "@angular/core";
 import { RouterModule } from "@angular/router";
+import { firstValueFrom } from "rxjs";

 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
+import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { BroadcasterService } from "@bitwarden/common/platform/abstractions/broadcaster.service";
 import { ConfigServiceAbstraction as ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service.abstraction";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
 import { IconModule, LayoutComponent, NavigationModule } from "@bitwarden/components";

@@ -48,10 +49,10 @@ export class UserLayoutComponent implements OnInit, OnDestroy {
    private ngZone: NgZone,
    private platformUtilsService: PlatformUtilsService,
    private organizationService: OrganizationService,
-    private stateService: StateService,
    private apiService: ApiService,
    private syncService: SyncService,
    private configService: ConfigService,
+    private billingAccountProfileStateService: BillingAccountProfileStateService,
  ) {}

  async ngOnInit() {
@@ -79,16 +80,21 @@ export class UserLayoutComponent implements OnInit, OnDestroy {
  }

  async load() {
-    const premium = await this.stateService.getHasPremiumPersonally();
+    const hasPremiumPersonally = await firstValueFrom(
+      this.billingAccountProfileStateService.hasPremiumPersonally$,
+    );
+    const hasPremiumFromOrg = await firstValueFrom(
+      this.billingAccountProfileStateService.hasPremiumFromAnyOrganization$,
+    );
    const selfHosted = this.platformUtilsService.isSelfHost();

    this.hasFamilySponsorshipAvailable = await this.organizationService.canManageSponsorships();
-    const hasPremiumFromOrg = await this.stateService.getHasPremiumFromOrganization();
    let billing = null;
    if (!selfHosted) {
      // TODO: We should remove the need to call this!
      billing = await this.apiService.getUserBillingHistory();
    }
-    this.hideSubscription = !premium && hasPremiumFromOrg && (selfHosted || billing?.hasNoHistory);
+    this.hideSubscription =
+      !hasPremiumPersonally && hasPremiumFromOrg && (selfHosted || billing?.hasNoHistory);
  }
 }
--- a/apps/web/src/app/settings/settings.component.ts
+++ b/apps/web/src/app/settings/settings.component.ts
@@ -1,12 +1,12 @@
 import { Component, NgZone, OnDestroy, OnInit } from "@angular/core";
+import { firstValueFrom } from "rxjs";

 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
+import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
 import { BroadcasterService } from "@bitwarden/common/platform/abstractions/broadcaster.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";

-import { StateService } from "../core";
-
 const BroadcasterSubscriptionId = "SettingsComponent";

@Component({
@@ -24,8 +24,8 @@ export class SettingsComponent implements OnInit, OnDestroy {
    private ngZone: NgZone,
    private platformUtilsService: PlatformUtilsService,
    private organizationService: OrganizationService,
-    private stateService: StateService,
    private apiService: ApiService,
+    private billingAccountProfileStateServiceAbstraction: BillingAccountProfileStateService,
  ) {}

  async ngOnInit() {
@@ -51,9 +51,13 @@ export class SettingsComponent implements OnInit, OnDestroy {
  }

  async load() {
-    this.premium = await this.stateService.getHasPremiumPersonally();
+    this.premium = await firstValueFrom(
+      this.billingAccountProfileStateServiceAbstraction.hasPremiumPersonally$,
+    );
    this.hasFamilySponsorshipAvailable = await this.organizationService.canManageSponsorships();
-    const hasPremiumFromOrg = await this.stateService.getHasPremiumFromOrganization();
+    const hasPremiumFromOrg = await firstValueFrom(
+      this.billingAccountProfileStateServiceAbstraction.hasPremiumFromAnyOrganization$,
+    );
    let billing = null;
    if (!this.selfHosted) {
      billing = await this.apiService.getUserBillingHistory();
--- a/apps/web/src/app/tools/reports/pages/reports-home.component.ts
+++ b/apps/web/src/app/tools/reports/pages/reports-home.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from "@angular/core";
+import { firstValueFrom } from "rxjs";

-import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
+import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";

 import { reports, ReportType } from "../reports";
 import { ReportEntry, ReportVariant } from "../shared";
@@ -12,11 +13,12 @@ import { ReportEntry, ReportVariant } from "../shared";
 export class ReportsHomeComponent implements OnInit {
  reports: ReportEntry[];

-  constructor(private stateService: StateService) {}
+  constructor(private billingAccountProfileStateService: BillingAccountProfileStateService) {}

  async ngOnInit(): Promise<void> {
-    const userHasPremium = await this.stateService.getCanAccessPremium();
-
+    const userHasPremium = await firstValueFrom(
+      this.billingAccountProfileStateService.hasPremiumFromAnySource$,
+    );
    const reportRequiresPremium = userHasPremium
      ? ReportVariant.Enabled
      : ReportVariant.RequiresPremium;
--- a/apps/web/src/app/tools/send/add-edit.component.ts
+++ b/apps/web/src/app/tools/send/add-edit.component.ts
@@ -5,6 +5,7 @@ import { FormBuilder } from "@angular/forms";

 import { AddEditComponent as BaseAddEditComponent } from "@bitwarden/angular/tools/send/add-edit.component";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
+import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
@@ -36,6 +37,7 @@ export class AddEditComponent extends BaseAddEditComponent {
    sendApiService: SendApiService,
    dialogService: DialogService,
    formBuilder: FormBuilder,
+    billingAccountProfileStateService: BillingAccountProfileStateService,
    protected dialogRef: DialogRef,
    @Inject(DIALOG_DATA) params: { sendId: string },
  ) {
@@ -52,6 +54,7 @@ export class AddEditComponent extends BaseAddEditComponent {
      sendApiService,
      dialogService,
      formBuilder,
+      billingAccountProfileStateService,
    );

    this.sendId = params.sendId;
--- a/apps/web/src/app/tools/tools.component.ts
+++ b/apps/web/src/app/tools/tools.component.ts
@@ -1,22 +1,33 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnDestroy, OnInit } from "@angular/core";
+import { Subject, takeUntil } from "rxjs";

+import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
-import { StateService } from "@bitwarden/common/platform/abstractions/state.service";

@Component({
  selector: "app-tools",
  templateUrl: "tools.component.html",
 })
-export class ToolsComponent implements OnInit {
+export class ToolsComponent implements OnInit, OnDestroy {
+  private componentIsDestroyed$ = new Subject<boolean>();
  canAccessPremium = false;

  constructor(
-    private stateService: StateService,
    private messagingService: MessagingService,
+    private billingAccountProfileStateService: BillingAccountProfileStateService,
  ) {}

  async ngOnInit() {
-    this.canAccessPremium = await this.stateService.getCanAccessPremium();
+    this.billingAccountProfileStateService.hasPremiumFromAnySource$
+      .pipe(takeUntil(this.componentIsDestroyed$))
+      .subscribe((canAccessPremium: boolean) => {
+        this.canAccessPremium = canAccessPremium;
+      });
+  }
+
+  ngOnDestroy() {
+    this.componentIsDestroyed$.next(true);
+    this.componentIsDestroyed$.complete();
  }

  premiumRequired() {
--- a/apps/web/src/app/vault/components/premium-badge.stories.ts
+++ b/apps/web/src/app/vault/components/premium-badge.stories.ts
@@ -3,8 +3,6 @@ import { Meta, moduleMetadata, Story } from "@storybook/angular";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
-import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
-import { StorageOptions } from "@bitwarden/common/platform/models/domain/storage-options";
 import { BadgeModule, I18nMockService } from "@bitwarden/components";

 import { PremiumBadgeComponent } from "./premium-badge.component";
@@ -15,12 +13,6 @@ class MockMessagingService implements MessagingService {
  }
 }

-class MockedStateService implements Partial<StateService> {
-  async getCanAccessPremium(options?: StorageOptions) {
-    return false;
-  }
-}
-
 export default {
  title: "Web/Premium Badge",
  component: PremiumBadgeComponent,
@@ -42,12 +34,6 @@ export default {
            return new MockMessagingService();
          },
        },
-        {
-          provide: StateService,
-          useFactory: () => {
-            return new MockedStateService();
-          },
-        },
      ],
    }),
  ],
--- a/apps/web/src/app/vault/individual-vault/add-edit.component.ts
+++ b/apps/web/src/app/vault/individual-vault/add-edit.component.ts
@@ -1,11 +1,13 @@
 import { DatePipe } from "@angular/common";
 import { Component, OnDestroy, OnInit } from "@angular/core";
+import { firstValueFrom } from "rxjs";

 import { AddEditComponent as BaseAddEditComponent } from "@bitwarden/angular/vault/components/add-edit.component";
 import { AuditService } from "@bitwarden/common/abstractions/audit.service";
 import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
+import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
 import { EventType, ProductType } from "@bitwarden/common/enums";
 import { ConfigServiceAbstraction } from "@bitwarden/common/platform/abstractions/config/config.service.abstraction";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -64,6 +66,7 @@ export class AddEditComponent extends BaseAddEditComponent implements OnInit, On
    dialogService: DialogService,
    datePipe: DatePipe,
    configService: ConfigServiceAbstraction,
+    private billingAccountProfileStateService: BillingAccountProfileStateService,
  ) {
    super(
      cipherService,
@@ -98,7 +101,9 @@ export class AddEditComponent extends BaseAddEditComponent implements OnInit, On
    this.hasPasswordHistory = this.cipher.hasPasswordHistory;
    this.cleanUp();

-    this.canAccessPremium = await this.stateService.getCanAccessPremium();
+    this.canAccessPremium = await firstValueFrom(
+      this.billingAccountProfileStateService.hasPremiumFromAnySource$,
+    );
    if (this.showTotp()) {
      await this.totpUpdateCode();
      const interval = this.totpService.getTimeInterval(this.cipher.login.totp);
--- a/apps/web/src/app/vault/individual-vault/attachments.component.ts
+++ b/apps/web/src/app/vault/individual-vault/attachments.component.ts
@@ -2,6 +2,7 @@ import { Component } from "@angular/core";

 import { AttachmentsComponent as BaseAttachmentsComponent } from "@bitwarden/angular/vault/components/attachments.component";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
+import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
 import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service";
 import { FileDownloadService } from "@bitwarden/common/platform/abstractions/file-download/file-download.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -30,6 +31,7 @@ export class AttachmentsComponent extends BaseAttachmentsComponent {
    logService: LogService,
    fileDownloadService: FileDownloadService,
    dialogService: DialogService,
+    billingAccountProfileStateService: BillingAccountProfileStateService,
  ) {
    super(
      cipherService,
@@ -42,6 +44,7 @@ export class AttachmentsComponent extends BaseAttachmentsComponent {
      stateService,
      fileDownloadService,
      dialogService,
+      billingAccountProfileStateService,
    );
  }

--- a/apps/web/src/app/vault/individual-vault/vault.component.ts
+++ b/apps/web/src/app/vault/individual-vault/vault.component.ts
@@ -37,6 +37,7 @@ import { OrganizationService } from "@bitwarden/common/admin-console/abstraction
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { TokenService } from "@bitwarden/common/auth/abstractions/token.service";
 import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
+import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
 import { EventType } from "@bitwarden/common/enums";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { BroadcasterService } from "@bitwarden/common/platform/abstractions/broadcaster.service";
@@ -182,6 +183,7 @@ export class VaultComponent implements OnInit, OnDestroy {
    private configService: ConfigServiceAbstraction,
    private apiService: ApiService,
    private userVerificationService: UserVerificationService,
+    private billingAccountProfileStateService: BillingAccountProfileStateService,
  ) {}

  async ngOnInit() {
@@ -201,7 +203,9 @@ export class VaultComponent implements OnInit, OnDestroy {
          : false;
        await this.syncService.fullSync(false);

-        const canAccessPremium = await this.stateService.getCanAccessPremium();
+        const canAccessPremium = await firstValueFrom(
+          this.billingAccountProfileStateService.hasPremiumFromAnySource$,
+        );
        this.showPremiumCallout =
          !this.showVerifyEmail && !canAccessPremium && !this.platformUtilsService.isSelfHost();

@@ -242,9 +246,6 @@ export class VaultComponent implements OnInit, OnDestroy {
      });

    const filter$ = this.routedVaultFilterService.filter$;
-    const canAccessPremium$ = Utils.asyncToObservable(() =>
-      this.stateService.getCanAccessPremium(),
-    ).pipe(shareReplay({ refCount: true, bufferSize: 1 }));
    const allCollections$ = Utils.asyncToObservable(() => this.collectionService.getAllDecrypted());
    const nestedCollections$ = allCollections$.pipe(
      map((collections) => getNestedCollectionTree(collections)),
@@ -368,7 +369,7 @@ export class VaultComponent implements OnInit, OnDestroy {
        switchMap(() =>
          combineLatest([
            filter$,
-            canAccessPremium$,
+            this.billingAccountProfileStateService.hasPremiumFromAnySource$,
            allCollections$,
            this.organizationService.organizations$,
            ciphers$,
@@ -513,8 +514,7 @@ export class VaultComponent implements OnInit, OnDestroy {
      return;
    }

-    const canAccessPremium = await this.stateService.getCanAccessPremium();
-    if (cipher.organizationId == null && !canAccessPremium) {
+    if (cipher.organizationId == null && !this.canAccessPremium) {
      this.messagingService.send("premiumRequired");
      return;
    } else if (cipher.organizationId != null) {
--- a/apps/web/src/app/vault/org-vault/add-edit.component.ts
+++ b/apps/web/src/app/vault/org-vault/add-edit.component.ts
@@ -6,6 +6,7 @@ import { AuditService } from "@bitwarden/common/abstractions/audit.service";
 import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
+import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
 import { ConfigServiceAbstraction } from "@bitwarden/common/platform/abstractions/config/config.service.abstraction";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
@@ -54,6 +55,7 @@ export class AddEditComponent extends BaseAddEditComponent {
    dialogService: DialogService,
    datePipe: DatePipe,
    configService: ConfigServiceAbstraction,
+    billingAccountProfileStateService: BillingAccountProfileStateService,
  ) {
    super(
      cipherService,
@@ -75,6 +77,7 @@ export class AddEditComponent extends BaseAddEditComponent {
      dialogService,
      datePipe,
      configService,
+      billingAccountProfileStateService,
    );
  }

--- a/apps/web/src/app/vault/org-vault/attachments.component.ts
+++ b/apps/web/src/app/vault/org-vault/attachments.component.ts
@@ -2,6 +2,7 @@ import { Component } from "@angular/core";

 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
+import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
 import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service";
 import { FileDownloadService } from "@bitwarden/common/platform/abstractions/file-download/file-download.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -34,6 +35,7 @@ export class AttachmentsComponent extends BaseAttachmentsComponent {
    logService: LogService,
    fileDownloadService: FileDownloadService,
    dialogService: DialogService,
+    billingAccountProfileStateService: BillingAccountProfileStateService,
  ) {
    super(
      cipherService,
@@ -45,6 +47,7 @@ export class AttachmentsComponent extends BaseAttachmentsComponent {
      logService,
      fileDownloadService,
      dialogService,
+      billingAccountProfileStateService,
    );
  }