Vertical Vault Navigation (#6957)

* WIP admin console layout

* Update icons

* Migrate more things

* Migrate the last pages

* Move header to web

* Fix story not working

* Convert header component to standalone

* Migrate org layout to standalone

* Enable org switcher

* Add AC to product switcher

* Migrate provider portal to vertical nav

* Migrate PM

* Prettier fixes

* Change AC and PP to use secondary variant layout & update logos

* Remove full width setting

* Remove commented code

* Add header to report pages

* Add provider portal banner

* Fix banner for billing pages

* Move vault title to header

* Prevent scrollbar jumping

* Move send button to header

* Replace search input with bit-search

* Remove unused files and css

* Add banner

* Tweak storage option

* Fix duplicate nav item after merge

* Migrate banner state to state provider framework

* [AC-2078] Fix device approvals header

* [PM-5861] Hide AC from product switcher for users that do not have access

* [PM-5860] Fix Vault and Send page headers

* [AC-2075] Fix missing link on reporting nav group

* [AC-2079] Hide Payment Method and Billing History pages for self-hosted instances

* [AC-2090] Hide reports/event log nav items for users that do not have permission

* [AC-2092] Fix missing provider portal option in product switcher on page load

* Add null check for organization in org layout component

* [AC-2094] Fix missing page header for new client orgs page

* [AC-2093] Update New client button styling

* Fix failing test after merge

* [PM-2087] Use disk-local for web layout banner

* [PM-6041] Update banner copy to read "web app"

* [PM-6094] Update banner link to marketing URL

* [PM-6114] add CL container component to VVR pages (#7802)

* create bit-container component

* add container to all page components

* Fix linting errors after merge with main

* Fix product switcher stories

* Fix web-header stories

* mock org state properly in product switcher stories (#7956)

* refactor: move web layout migration banner logic into a service (#7958)

* make CL codeowner of web header files

* move migration banner logic to service; update stories

* [PM-5862] Ensure a sync has run before hiding navigation links

* Remove leftover banner global state

* Re-add dropped selfHosted ngIf

* Add rel noreferrer

* Remove comment

---------

Co-authored-by: Shane Melton <smelton@bitwarden.com>
Co-authored-by: Will Martin <contact@willmartian.com>

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

@@ -1,11 +1,86 @@
-import { Component, OnInit } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { Component, NgZone, OnDestroy, OnInit } from "@angular/core";
+import { RouterModule } from "@angular/router";
+
+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 { BroadcasterService } from "@bitwarden/common/platform/abstractions/broadcaster.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 { IconModule, LayoutComponent, NavigationModule } from "@bitwarden/components";
+
+import { PaymentMethodBannersComponent } from "../components/payment-method-banners/payment-method-banners.component";
+
+import { PasswordManagerLogo } from "./password-manager-logo";
+
+const BroadcasterSubscriptionId = "UserLayoutComponent";
 
 @Component({
   selector: "app-user-layout",
   templateUrl: "user-layout.component.html",
+  standalone: true,
+  imports: [
+    CommonModule,
+    RouterModule,
+    JslibModule,
+    LayoutComponent,
+    IconModule,
+    NavigationModule,
+    PaymentMethodBannersComponent,
+  ],
 })
-export class UserLayoutComponent implements OnInit {
-  ngOnInit() {
+export class UserLayoutComponent implements OnInit, OnDestroy {
+  protected readonly logo = PasswordManagerLogo;
+  hasFamilySponsorshipAvailable: boolean;
+  hideSubscription: boolean;
+
+  constructor(
+    private broadcasterService: BroadcasterService,
+    private ngZone: NgZone,
+    private platformUtilsService: PlatformUtilsService,
+    private organizationService: OrganizationService,
+    private stateService: StateService,
+    private apiService: ApiService,
+    private syncService: SyncService,
+  ) {}
+
+  async ngOnInit() {
     document.body.classList.remove("layout_frontend");
+
+    this.broadcasterService.subscribe(BroadcasterSubscriptionId, async (message: any) => {
+      // 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.ngZone.run(async () => {
+        switch (message.command) {
+          case "purchasedPremium":
+            await this.load();
+            break;
+          default:
+        }
+      });
+    });
+
+    await this.syncService.fullSync(false);
+    await this.load();
+  }
+
+  ngOnDestroy() {
+    this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
+  }
+
+  async load() {
+    const premium = await this.stateService.getHasPremiumPersonally();
+    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);
   }
 }