[AC-1970] Add billing navigation group to provider layout (#8941)

* Add billing navigation item to provider layout with empty subscription page behind FF.

* Fixing tests

* Missed build error

* Addison's feedback

* Remove unused function

* Missed one get$ conversion

* Fixed background failure

bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.ts

@@ -1,11 +1,13 @@
 import { CommonModule } from "@angular/common";
-import { Component } from "@angular/core";
+import { Component, OnDestroy, OnInit } from "@angular/core";
 import { ActivatedRoute, RouterModule } from "@angular/router";
+import { switchMap, Observable, Subject, filter, startWith } from "rxjs";
+import { takeUntil } from "rxjs/operators";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { ProviderService } from "@bitwarden/common/admin-console/abstractions/provider.service";
-import { ProviderStatusType } from "@bitwarden/common/admin-console/enums";
 import { Provider } from "@bitwarden/common/admin-console/models/domain/provider";
+import { canAccessBilling } from "@bitwarden/common/billing/abstractions/provider-billing.service.abstraction";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { IconModule, LayoutComponent, NavigationModule } from "@bitwarden/components";
@@ -28,21 +30,17 @@ import { ToggleWidthComponent } from "@bitwarden/web-vault/app/layouts/toggle-wi
     ToggleWidthComponent,
   ],
 })
-// eslint-disable-next-line rxjs-angular/prefer-takeuntil
-export class ProvidersLayoutComponent {
+export class ProvidersLayoutComponent implements OnInit, OnDestroy {
   protected readonly logo = ProviderPortalLogo;
 
-  provider: Provider;
-  private providerId: string;
+  private destroy$ = new Subject<void>();
+  protected provider$: Observable<Provider>;
+  protected canAccessBilling$: Observable<boolean>;
 
   protected showPaymentMethodWarningBanners$ = this.configService.getFeatureFlag$(
     FeatureFlag.ShowPaymentMethodWarningBanners,
   );
 
-  protected enableConsolidatedBilling$ = this.configService.getFeatureFlag$(
-    FeatureFlag.EnableConsolidatedBilling,
-  );
-
   constructor(
     private route: ActivatedRoute,
     private providerService: ProviderService,
@@ -51,37 +49,30 @@ export class ProvidersLayoutComponent {
 
   ngOnInit() {
     document.body.classList.remove("layout_frontend");
-    // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
-    this.route.params.subscribe(async (params) => {
-      this.providerId = params.providerId;
-      await this.load();
-    });
+
+    this.provider$ = this.route.params.pipe(
+      switchMap((params) => this.providerService.get$(params.providerId)),
+      takeUntil(this.destroy$),
+    );
+
+    this.canAccessBilling$ = this.provider$.pipe(
+      filter((provider) => !!provider),
+      canAccessBilling(this.configService),
+      startWith(false),
+      takeUntil(this.destroy$),
+    );
   }
 
-  async load() {
-    this.provider = await this.providerService.get(this.providerId);
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 
-  get showMenuBar() {
-    return this.showManageTab || this.showSettingsTab;
+  showManageTab(provider: Provider) {
+    return provider.canManageUsers || provider.canAccessEventLogs;
   }
 
-  get showManageTab() {
-    return this.provider.canManageUsers || this.provider.canAccessEventLogs;
+  showSettingsTab(provider: Provider) {
+    return provider.isProviderAdmin;
   }
-
-  get showSettingsTab() {
-    return this.provider.isProviderAdmin;
-  }
-
-  get manageRoute(): string {
-    switch (true) {
-      case this.provider.canManageUsers:
-        return "manage/people";
-      case this.provider.canAccessEventLogs:
-        return "manage/events";
-    }
-  }
-
-  protected readonly ProviderStatusType = ProviderStatusType;
 }