Merge branch 'main' into autofill/pm-8027-inline-menu-appears-within-input-fields-that-do-not-relate-to-user-login

2025-12-16 00:03:56 +00:00 · 2024-06-04 09:25:46 -05:00
parent c2653f5376 c4f9a03144
commit fb486b72b7
119 changed files with 6482 additions and 847 deletions
--- a/apps/browser/package.json
+++ b/apps/browser/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@bitwarden/browser",
-  "version": "2024.5.2",
+  "version": "2024.6.0",
  "scripts": {
    "build": "cross-env MANIFEST_VERSION=3 webpack",
    "build:mv2": "webpack",
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -224,7 +224,7 @@
  },
  "continueToAuthenticatorPageDesc": {
    "message": "Bitwarden Authenticator allows you to store authenticator keys and generate TOTP codes for 2-step verification flows. Learn more on the bitwarden.com website"
-  },  
+  },
  "bitwardenSecretsManager": {
    "message": "Bitwarden Secrets Manager"
  },
@@ -599,6 +599,9 @@
  "loggedOut": {
    "message": "Logged out"
  },
+  "loggedOutDesc": {
+    "message": "You have been logged out of your account."
+  },
  "loginExpired": {
    "message": "Your login session has expired."
  },
@@ -1107,6 +1110,15 @@
  "selfHostedEnvironmentFooter": {
    "message": "Specify the base URL of your on-premises hosted Bitwarden installation."
  },
+  "selfHostedBaseUrlHint": {
+    "message": "Specify the base URL of your on-premises hosted Bitwarden installation. Example: https://bitwarden.company.com"
+  },
+  "selfHostedCustomEnvHeader" :{
+    "message": "For advanced configuration, you can specify the base URL of each service independently."
+  },
+  "selfHostedEnvFormInvalid" :{
+    "message": "You must add either the base Server URL or at least one custom environment."
+  },
  "customEnvironment": {
    "message": "Custom environment"
  },
@@ -1744,6 +1756,12 @@
  "ok": {
    "message": "Ok"
  },
+  "errorRefreshingAccessToken":{
+    "message": "Access Token Refresh Error"
+  },
+  "errorRefreshingAccessTokenDesc":{
+    "message": "No refresh token or API keys found. Please try logging out and logging back in."
+  },
  "desktopSyncVerificationTitle": {
    "message": "Desktop sync verification"
  },
@@ -3333,5 +3351,14 @@
        "example": "Work"
      }
    }
+  },
+  "itemsWithNoFolder": {
+    "message": "Items with no folder"
+  },
+  "organizationIsDeactivated": {
+    "message": "Organization is deactivated"
+  },
+  "contactYourOrgAdmin": {
+    "message": "Items in deactivated organizations cannot be accessed. Contact your organization owner for assistance."
  }
 }
--- a/apps/browser/src/background/main.background.ts
+++ b/apps/browser/src/background/main.background.ts
@@ -9,6 +9,7 @@ import {
  AuthRequestService,
  LoginEmailServiceAbstraction,
  LoginEmailService,
+  LogoutReason,
 } from "@bitwarden/auth/common";
 import { ApiService as ApiServiceAbstraction } from "@bitwarden/common/abstractions/api.service";
 import { AuditService as AuditServiceAbstraction } from "@bitwarden/common/abstractions/audit.service";
@@ -375,8 +376,17 @@ export default class MainBackground {
      }
    };

-    const logoutCallback = async (expired: boolean, userId?: UserId) =>
-      await this.logout(expired, userId);
+    const logoutCallback = async (logoutReason: LogoutReason, userId?: UserId) =>
+      await this.logout(logoutReason, userId);
+
+    const refreshAccessTokenErrorCallback = () => {
+      // Send toast to popup
+      this.messagingService.send("showToast", {
+        type: "error",
+        title: this.i18nService.t("errorRefreshingAccessToken"),
+        message: this.i18nService.t("errorRefreshingAccessTokenDesc"),
+      });
+    };

    const isDev = process.env.ENV === "development";
    this.logService = new ConsoleLogService(isDev);
@@ -523,6 +533,7 @@ export default class MainBackground {
      this.keyGenerationService,
      this.encryptService,
      this.logService,
+      logoutCallback,
    );

    const migrationRunner = new MigrationRunner(
@@ -608,9 +619,12 @@ export default class MainBackground {
      this.platformUtilsService,
      this.environmentService,
      this.appIdService,
+      refreshAccessTokenErrorCallback,
+      this.logService,
+      (logoutReason: LogoutReason, userId?: UserId) => this.logout(logoutReason, userId),
      this.vaultTimeoutSettingsService,
-      (expired: boolean) => this.logout(expired),
    );
+
    this.domainSettingsService = new DefaultDomainSettingsService(this.stateProvider);
    this.fileUploadService = new FileUploadService(this.logService);
    this.cipherFileUploadService = new CipherFileUploadService(
@@ -1283,7 +1297,7 @@ export default class MainBackground {
    }
  }

-  async logout(expired: boolean, userId?: UserId) {
+  async logout(logoutReason: LogoutReason, userId?: UserId) {
    const activeUserId = await firstValueFrom(
      this.accountService.activeAccount$.pipe(
        map((a) => a?.id),
@@ -1349,7 +1363,7 @@ export default class MainBackground {
    await logoutPromise;

    this.messagingService.send("doneLoggingOut", {
-      expired: expired,
+      logoutReason: logoutReason,
      userId: userBeingLoggedOut,
    });

--- a/apps/browser/src/manifest.json
+++ b/apps/browser/src/manifest.json
@@ -2,7 +2,7 @@
  "manifest_version": 2,
  "name": "__MSG_extName__",
  "short_name": "__MSG_appName__",
-  "version": "2024.5.2",
+  "version": "2024.6.0",
  "description": "__MSG_extDesc__",
  "default_locale": "en",
  "author": "Bitwarden Inc.",
--- a/apps/browser/src/manifest.v3.json
+++ b/apps/browser/src/manifest.v3.json
@@ -3,7 +3,7 @@
  "minimum_chrome_version": "102.0",
  "name": "__MSG_extName__",
  "short_name": "__MSG_appName__",
-  "version": "2024.5.2",
+  "version": "2024.6.0",
  "description": "__MSG_extDesc__",
  "default_locale": "en",
  "author": "Bitwarden Inc.",
--- a/apps/browser/src/popup/app.component.ts
+++ b/apps/browser/src/popup/app.component.ts
@@ -2,6 +2,7 @@ import { ChangeDetectorRef, Component, NgZone, OnDestroy, OnInit } from "@angula
 import { NavigationEnd, Router, RouterOutlet } from "@angular/router";
 import { Subject, takeUntil, firstValueFrom, concatMap, filter, tap } from "rxjs";

+import { LogoutReason } from "@bitwarden/auth/common";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { AuthService } from "@bitwarden/common/auth/abstractions/auth.service";
 import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
@@ -10,7 +11,12 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { MessageListener } from "@bitwarden/common/platform/messaging";
 import { UserId } from "@bitwarden/common/types/guid";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
-import { DialogService, SimpleDialogOptions, ToastService } from "@bitwarden/components";
+import {
+  DialogService,
+  SimpleDialogOptions,
+  ToastOptions,
+  ToastService,
+} from "@bitwarden/components";

 import { BrowserApi } from "../platform/browser/browser-api";
 import { BrowserStateService } from "../platform/services/abstractions/browser-state.service";
@@ -83,13 +89,10 @@ export class AppComponent implements OnInit, OnDestroy {
      .pipe(
        tap((msg: any) => {
          if (msg.command === "doneLoggingOut") {
+            // TODO: PM-8544 - why do we call logout in the popup after receiving the doneLoggingOut message? Hasn't this already completeted logout?
            this.authService.logOut(async () => {
-              if (msg.expired) {
-                this.toastService.showToast({
-                  variant: "warning",
-                  title: this.i18nService.t("loggedOut"),
-                  message: this.i18nService.t("loginExpired"),
-                });
+              if (msg.logoutReason) {
+                await this.displayLogoutReason(msg.logoutReason);
              }
            });
            this.changeDetectorRef.detectChanges();
@@ -233,4 +236,23 @@ export class AppComponent implements OnInit, OnDestroy {
      this.browserSendStateService.setBrowserSendTypeComponentState(null),
    ]);
  }
+
+  // Displaying toasts isn't super useful on the popup due to the reloads we do.
+  // However, it is visible for a moment on the FF sidebar logout.
+  private async displayLogoutReason(logoutReason: LogoutReason) {
+    let toastOptions: ToastOptions;
+    switch (logoutReason) {
+      case "invalidSecurityStamp":
+      case "sessionExpired": {
+        toastOptions = {
+          variant: "warning",
+          title: this.i18nService.t("loggedOut"),
+          message: this.i18nService.t("loginExpired"),
+        };
+        break;
+      }
+    }
+
+    this.toastService.showToast(toastOptions);
+  }
 }
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-list-filters/vault-list-filters.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-list-filters/vault-list-filters.component.html
@@ -0,0 +1,39 @@
+<form [formGroup]="filterForm" class="tw-flex tw-flex-wrap tw-gap-2 tw-mb-6 tw-mt-2">
+  <ng-container *ngIf="organizations$ | async as organizations">
+    <bit-chip-select
+      *ngIf="organizations.length"
+      formControlName="organization"
+      placeholderIcon="bwi-vault"
+      [placeholderText]="'vault' | i18n"
+      [options]="organizations"
+    >
+    </bit-chip-select>
+  </ng-container>
+  <ng-container *ngIf="collections$ | async as collections">
+    <bit-chip-select
+      *ngIf="collections.length"
+      formControlName="collection"
+      placeholderIcon="bwi-collection"
+      [placeholderText]="'collections' | i18n"
+      [options]="collections"
+    >
+    </bit-chip-select>
+  </ng-container>
+  <ng-container *ngIf="folders$ | async as folders">
+    <bit-chip-select
+      *ngIf="folders.length"
+      placeholderIcon="bwi-folder"
+      formControlName="folder"
+      [placeholderText]="'folder' | i18n"
+      [options]="folders"
+    >
+    </bit-chip-select>
+  </ng-container>
+  <bit-chip-select
+    formControlName="cipherType"
+    placeholderIcon="bwi-list"
+    [placeholderText]="'types' | i18n"
+    [options]="cipherTypes"
+  >
+  </bit-chip-select>
+</form>
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-list-filters/vault-list-filters.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-list-filters/vault-list-filters.component.ts
@@ -0,0 +1,28 @@
+import { CommonModule } from "@angular/common";
+import { Component, OnDestroy } from "@angular/core";
+import { ReactiveFormsModule } from "@angular/forms";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { ChipSelectComponent } from "@bitwarden/components";
+
+import { VaultPopupListFiltersService } from "../../../services/vault-popup-list-filters.service";
+
+@Component({
+  standalone: true,
+  selector: "app-vault-list-filters",
+  templateUrl: "./vault-list-filters.component.html",
+  imports: [CommonModule, JslibModule, ChipSelectComponent, ReactiveFormsModule],
+})
+export class VaultListFiltersComponent implements OnDestroy {
+  protected filterForm = this.vaultPopupListFiltersService.filterForm;
+  protected organizations$ = this.vaultPopupListFiltersService.organizations$;
+  protected collections$ = this.vaultPopupListFiltersService.collections$;
+  protected folders$ = this.vaultPopupListFiltersService.folders$;
+  protected cipherTypes = this.vaultPopupListFiltersService.cipherTypes;
+
+  constructor(private vaultPopupListFiltersService: VaultPopupListFiltersService) {}
+
+  ngOnDestroy(): void {
+    this.vaultPopupListFiltersService.resetFilterForm();
+  }
+}
--- a/apps/browser/src/vault/popup/components/vault/vault-v2.component.html
+++ b/apps/browser/src/vault/popup/components/vault/vault-v2.component.html
@@ -22,13 +22,13 @@
  </div>

  <ng-container *ngIf="!(showEmptyState$ | async)">
-    <!-- TODO: Filter/search Section in PM-6824 and PM-6826.-->
-
    <app-vault-v2-search (searchTextChanged)="handleSearchTextChange($event)">
    </app-vault-v2-search>

+    <app-vault-list-filters></app-vault-list-filters>
+
    <div
-      *ngIf="showNoResultsState$ | async"
+      *ngIf="(showNoResultsState$ | async) && !(showDeactivatedOrg$ | async)"
      class="tw-flex tw-flex-col tw-h-full tw-justify-center"
    >
      <bit-no-items>
@@ -37,7 +37,17 @@
      </bit-no-items>
    </div>

-    <ng-container *ngIf="!(showNoResultsState$ | async)">
+    <div
+      *ngIf="showDeactivatedOrg$ | async"
+      class="tw-flex tw-flex-col tw-h-full tw-justify-center"
+    >
+      <bit-no-items [icon]="deactivatedIcon">
+        <ng-container slot="title">{{ "organizationIsDeactivated" | i18n }}</ng-container>
+        <ng-container slot="description">{{ "contactYourOrgAdmin" | i18n }}</ng-container>
+      </bit-no-items>
+    </div>
+
+    <ng-container *ngIf="!(showNoResultsState$ | async) && !(showDeactivatedOrg$ | async)">
      <app-autofill-vault-list-items></app-autofill-vault-list-items>
      <app-vault-list-items-container
        [title]="'favorites' | i18n"
--- a/apps/browser/src/vault/popup/components/vault/vault-v2.component.ts
+++ b/apps/browser/src/vault/popup/components/vault/vault-v2.component.ts
@@ -11,6 +11,7 @@ import { PopupHeaderComponent } from "../../../../platform/popup/layout/popup-he
 import { PopupPageComponent } from "../../../../platform/popup/layout/popup-page.component";
 import { VaultPopupItemsService } from "../../services/vault-popup-items.service";
 import { AutofillVaultListItemsComponent, VaultListItemsContainerComponent } from "../vault-v2";
+import { VaultListFiltersComponent } from "../vault-v2/vault-list-filters/vault-list-filters.component";
 import { VaultV2SearchComponent } from "../vault-v2/vault-search/vault-v2-search.component";

@Component({
@@ -27,6 +28,7 @@ import { VaultV2SearchComponent } from "../vault-v2/vault-search/vault-v2-search
    CommonModule,
    AutofillVaultListItemsComponent,
    VaultListItemsContainerComponent,
+    VaultListFiltersComponent,
    ButtonModule,
    RouterLink,
    VaultV2SearchComponent,
@@ -38,8 +40,10 @@ export class VaultV2Component implements OnInit, OnDestroy {

  protected showEmptyState$ = this.vaultPopupItemsService.emptyVault$;
  protected showNoResultsState$ = this.vaultPopupItemsService.noFilteredResults$;
+  protected showDeactivatedOrg$ = this.vaultPopupItemsService.showDeactivatedOrg$;

  protected vaultIcon = Icons.Vault;
+  protected deactivatedIcon = Icons.DeactivatedOrg;

  constructor(
    private vaultPopupItemsService: VaultPopupItemsService,
--- a/apps/browser/src/vault/popup/services/vault-popup-items.service.spec.ts
+++ b/apps/browser/src/vault/popup/services/vault-popup-items.service.spec.ts
@@ -2,6 +2,7 @@ import { mock } from "jest-mock-extended";
 import { BehaviorSubject } from "rxjs";

 import { SearchService } from "@bitwarden/common/abstractions/search.service";
+import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { CipherId } from "@bitwarden/common/types/guid";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { VaultSettingsService } from "@bitwarden/common/vault/abstractions/vault-settings/vault-settings.service";
@@ -12,6 +13,7 @@ import { BrowserApi } from "../../../platform/browser/browser-api";
 import BrowserPopupUtils from "../../../platform/popup/browser-popup-utils";

 import { VaultPopupItemsService } from "./vault-popup-items.service";
+import { VaultPopupListFiltersService } from "./vault-popup-list-filters.service";

 describe("VaultPopupItemsService", () => {
  let service: VaultPopupItemsService;
@@ -20,6 +22,8 @@ describe("VaultPopupItemsService", () => {

  const cipherServiceMock = mock<CipherService>();
  const vaultSettingsServiceMock = mock<VaultSettingsService>();
+  const organizationServiceMock = mock<OrganizationService>();
+  const vaultPopupListFiltersServiceMock = mock<VaultPopupListFiltersService>();
  const searchService = mock<SearchService>();

  beforeEach(() => {
@@ -40,6 +44,18 @@ describe("VaultPopupItemsService", () => {
    cipherServiceMock.filterCiphersForUrl.mockImplementation(async () => autoFillCiphers);
    vaultSettingsServiceMock.showCardsCurrentTab$ = new BehaviorSubject(false).asObservable();
    vaultSettingsServiceMock.showIdentitiesCurrentTab$ = new BehaviorSubject(false).asObservable();
+
+    vaultPopupListFiltersServiceMock.filters$ = new BehaviorSubject({
+      organization: null,
+      collection: null,
+      cipherType: null,
+      folder: null,
+    });
+    // Return all ciphers, `filterFunction$` will be tested in `VaultPopupListFiltersService`
+    vaultPopupListFiltersServiceMock.filterFunction$ = new BehaviorSubject(
+      (ciphers: CipherView[]) => ciphers,
+    );
+
    jest.spyOn(BrowserPopupUtils, "inPopout").mockReturnValue(false);
    jest
      .spyOn(BrowserApi, "getTabFromCurrentWindow")
@@ -47,6 +63,8 @@ describe("VaultPopupItemsService", () => {
    service = new VaultPopupItemsService(
      cipherServiceMock,
      vaultSettingsServiceMock,
+      vaultPopupListFiltersServiceMock,
+      organizationServiceMock,
      searchService,
    );
  });
@@ -55,6 +73,8 @@ describe("VaultPopupItemsService", () => {
    service = new VaultPopupItemsService(
      cipherServiceMock,
      vaultSettingsServiceMock,
+      vaultPopupListFiltersServiceMock,
+      organizationServiceMock,
      searchService,
    );
    expect(service).toBeTruthy();
@@ -87,6 +107,8 @@ describe("VaultPopupItemsService", () => {
      service = new VaultPopupItemsService(
        cipherServiceMock,
        vaultSettingsServiceMock,
+        vaultPopupListFiltersServiceMock,
+        organizationServiceMock,
        searchService,
      );

@@ -117,6 +139,8 @@ describe("VaultPopupItemsService", () => {
      service = new VaultPopupItemsService(
        cipherServiceMock,
        vaultSettingsServiceMock,
+        vaultPopupListFiltersServiceMock,
+        organizationServiceMock,
        searchService,
      );

@@ -228,6 +252,8 @@ describe("VaultPopupItemsService", () => {
      service = new VaultPopupItemsService(
        cipherServiceMock,
        vaultSettingsServiceMock,
+        vaultPopupListFiltersServiceMock,
+        organizationServiceMock,
        searchService,
      );
      service.emptyVault$.subscribe((empty) => {
--- a/apps/browser/src/vault/popup/services/vault-popup-items.service.ts
+++ b/apps/browser/src/vault/popup/services/vault-popup-items.service.ts
@@ -2,6 +2,8 @@ import { Injectable } from "@angular/core";
 import {
  BehaviorSubject,
  combineLatest,
+  distinctUntilKeyChanged,
+  from,
  map,
  Observable,
  of,
@@ -12,6 +14,7 @@ import {
 } from "rxjs";

 import { SearchService } from "@bitwarden/common/abstractions/search.service";
+import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { VaultSettingsService } from "@bitwarden/common/vault/abstractions/vault-settings/vault-settings.service";
 import { CipherType } from "@bitwarden/common/vault/enums";
@@ -20,6 +23,8 @@ import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { BrowserApi } from "../../../platform/browser/browser-api";
 import BrowserPopupUtils from "../../../platform/popup/browser-popup-utils";

+import { MY_VAULT_ID, VaultPopupListFiltersService } from "./vault-popup-list-filters.service";
+
 /**
 * Service for managing the various item lists on the new Vault tab in the browser popup.
 */
@@ -72,7 +77,15 @@ export class VaultPopupItemsService {
    shareReplay({ refCount: false, bufferSize: 1 }),
  );

-  private _filteredCipherList$ = combineLatest([this._cipherList$, this.searchText$]).pipe(
+  private _filteredCipherList$: Observable<CipherView[]> = combineLatest([
+    this._cipherList$,
+    this.searchText$,
+    this.vaultPopupListFiltersService.filterFunction$,
+  ]).pipe(
+    map(([ciphers, searchText, filterFunction]): [CipherView[], string] => [
+      filterFunction(ciphers),
+      searchText,
+    ]),
    switchMap(([ciphers, searchText]) =>
      this.searchService.searchCiphers(searchText, null, ciphers),
    ),
@@ -137,10 +150,19 @@ export class VaultPopupItemsService {

  /**
   * Observable that indicates whether a filter is currently applied to the ciphers.
-   * @todo Implement filter/search functionality in PM-6824 and PM-6826.
   */
-  hasFilterApplied$: Observable<boolean> = this.searchText$.pipe(
-    switchMap((text) => this.searchService.isSearchable(text)),
+  hasFilterApplied$ = combineLatest([
+    this.searchText$,
+    this.vaultPopupListFiltersService.filters$,
+  ]).pipe(
+    switchMap(([searchText, filters]) => {
+      return from(this.searchService.isSearchable(searchText)).pipe(
+        map(
+          (isSearchable) =>
+            isSearchable || Object.values(filters).some((filter) => filter !== null),
+        ),
+      );
+    }),
  );

  /**
@@ -156,15 +178,31 @@ export class VaultPopupItemsService {

  /**
   * Observable that indicates whether there are no ciphers to show with the current filter.
-   * @todo Implement filter/search functionality in PM-6824 and PM-6826.
   */
  noFilteredResults$: Observable<boolean> = this._filteredCipherList$.pipe(
    map((ciphers) => !ciphers.length),
  );

+  /** Observable that indicates when the user should see the deactivated org state */
+  showDeactivatedOrg$: Observable<boolean> = combineLatest([
+    this.vaultPopupListFiltersService.filters$.pipe(distinctUntilKeyChanged("organization")),
+    this.organizationService.organizations$,
+  ]).pipe(
+    map(([filters, orgs]) => {
+      if (!filters.organization || filters.organization.id === MY_VAULT_ID) {
+        return false;
+      }
+
+      const org = orgs.find((o) => o.id === filters.organization.id);
+      return org ? !org.enabled : false;
+    }),
+  );
+
  constructor(
    private cipherService: CipherService,
    private vaultSettingsService: VaultSettingsService,
+    private vaultPopupListFiltersService: VaultPopupListFiltersService,
+    private organizationService: OrganizationService,
    private searchService: SearchService,
  ) {}

--- a/apps/browser/src/vault/popup/services/vault-popup-list-filters.service.spec.ts
+++ b/apps/browser/src/vault/popup/services/vault-popup-list-filters.service.spec.ts
@@ -0,0 +1,298 @@
+import { TestBed } from "@angular/core/testing";
+import { FormBuilder } from "@angular/forms";
+import { BehaviorSubject, skipWhile } from "rxjs";
+
+import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
+import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
+import { CollectionService } from "@bitwarden/common/vault/abstractions/collection.service";
+import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
+import { CipherType } from "@bitwarden/common/vault/enums";
+import { Collection } from "@bitwarden/common/vault/models/domain/collection";
+import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { CollectionView } from "@bitwarden/common/vault/models/view/collection.view";
+import { FolderView } from "@bitwarden/common/vault/models/view/folder.view";
+
+import { MY_VAULT_ID, VaultPopupListFiltersService } from "./vault-popup-list-filters.service";
+
+describe("VaultPopupListFiltersService", () => {
+  let service: VaultPopupListFiltersService;
+  const memberOrganizations$ = new BehaviorSubject<{ name: string; id: string }[]>([]);
+  const folderViews$ = new BehaviorSubject([]);
+  const cipherViews$ = new BehaviorSubject({});
+  const decryptedCollections$ = new BehaviorSubject<CollectionView[]>([]);
+
+  const collectionService = {
+    decryptedCollections$,
+    getAllNested: () => Promise.resolve([]),
+  } as unknown as CollectionService;
+
+  const folderService = {
+    folderViews$,
+  } as unknown as FolderService;
+
+  const cipherService = {
+    cipherViews$,
+  } as unknown as CipherService;
+
+  const organizationService = {
+    memberOrganizations$,
+  } as unknown as OrganizationService;
+
+  const i18nService = {
+    t: (key: string) => key,
+  } as I18nService;
+
+  beforeEach(() => {
+    memberOrganizations$.next([]);
+    decryptedCollections$.next([]);
+
+    collectionService.getAllNested = () => Promise.resolve([]);
+    TestBed.configureTestingModule({
+      providers: [
+        {
+          provide: FolderService,
+          useValue: folderService,
+        },
+        {
+          provide: CipherService,
+          useValue: cipherService,
+        },
+        {
+          provide: OrganizationService,
+          useValue: organizationService,
+        },
+        {
+          provide: I18nService,
+          useValue: i18nService,
+        },
+        {
+          provide: CollectionService,
+          useValue: collectionService,
+        },
+        { provide: FormBuilder, useClass: FormBuilder },
+      ],
+    });
+
+    service = TestBed.inject(VaultPopupListFiltersService);
+  });
+
+  describe("cipherTypes", () => {
+    it("returns all cipher types", () => {
+      expect(service.cipherTypes.map((c) => c.value)).toEqual([
+        CipherType.Login,
+        CipherType.Card,
+        CipherType.Identity,
+        CipherType.SecureNote,
+      ]);
+    });
+  });
+
+  describe("organizations$", () => {
+    it('does not add "myVault" to the list of organizations when there are no organizations', (done) => {
+      memberOrganizations$.next([]);
+
+      service.organizations$.subscribe((organizations) => {
+        expect(organizations.map((o) => o.label)).toEqual([]);
+        done();
+      });
+    });
+
+    it('adds "myVault" to the list of organizations when there are other organizations', (done) => {
+      memberOrganizations$.next([{ name: "bobby's org", id: "1234-3323-23223" }]);
+
+      service.organizations$.subscribe((organizations) => {
+        expect(organizations.map((o) => o.label)).toEqual(["myVault", "bobby's org"]);
+        done();
+      });
+    });
+
+    it("sorts organizations by name", (done) => {
+      memberOrganizations$.next([
+        { name: "bobby's org", id: "1234-3323-23223" },
+        { name: "alice's org", id: "2223-4343-99888" },
+      ]);
+
+      service.organizations$.subscribe((organizations) => {
+        expect(organizations.map((o) => o.label)).toEqual([
+          "myVault",
+          "alice's org",
+          "bobby's org",
+        ]);
+        done();
+      });
+    });
+  });
+
+  describe("collections$", () => {
+    const testCollection = {
+      id: "14cbf8e9-7a2a-4105-9bf6-b15c01203cef",
+      name: "Test collection",
+      organizationId: "3f860945-b237-40bc-a51e-b15c01203ccf",
+    } as CollectionView;
+
+    const testCollection2 = {
+      id: "b15c0120-7a2a-4105-9bf6-b15c01203ceg",
+      name: "Test collection 2",
+      organizationId: "1203ccf-2432-123-acdd-b15c01203ccf",
+    } as CollectionView;
+
+    const testCollections = [testCollection, testCollection2];
+
+    beforeEach(() => {
+      decryptedCollections$.next(testCollections);
+
+      collectionService.getAllNested = () =>
+        Promise.resolve(
+          testCollections.map((c) => ({
+            children: [],
+            node: c,
+            parent: null,
+          })),
+        );
+    });
+
+    it("returns all collections", (done) => {
+      service.collections$.subscribe((collections) => {
+        expect(collections.map((c) => c.label)).toEqual(["Test collection", "Test collection 2"]);
+        done();
+      });
+    });
+
+    it("filters out collections that do not belong to an organization", () => {
+      service.filterForm.patchValue({
+        organization: { id: testCollection2.organizationId } as Organization,
+      });
+
+      service.collections$.subscribe((collections) => {
+        expect(collections.map((c) => c.label)).toEqual(["Test collection 2"]);
+      });
+    });
+  });
+
+  describe("folders$", () => {
+    it('returns no folders when "No Folder" is the only option', (done) => {
+      folderViews$.next([{ id: null, name: "No Folder" }]);
+
+      service.folders$.subscribe((folders) => {
+        expect(folders).toEqual([]);
+        done();
+      });
+    });
+
+    it('moves "No Folder" to the end of the list', (done) => {
+      folderViews$.next([
+        { id: null, name: "No Folder" },
+        { id: "2345", name: "Folder 2" },
+        { id: "1234", name: "Folder 1" },
+      ]);
+
+      service.folders$.subscribe((folders) => {
+        expect(folders.map((f) => f.label)).toEqual(["Folder 1", "Folder 2", "itemsWithNoFolder"]);
+        done();
+      });
+    });
+
+    it("returns all folders when MyVault is selected", (done) => {
+      service.filterForm.patchValue({
+        organization: { id: MY_VAULT_ID } as Organization,
+      });
+
+      folderViews$.next([
+        { id: "1234", name: "Folder 1" },
+        { id: "2345", name: "Folder 2" },
+      ]);
+
+      service.folders$.subscribe((folders) => {
+        expect(folders.map((f) => f.label)).toEqual(["Folder 1", "Folder 2"]);
+        done();
+      });
+    });
+
+    it("returns folders that have ciphers within the selected organization", (done) => {
+      service.folders$.pipe(skipWhile((folders) => folders.length === 2)).subscribe((folders) => {
+        expect(folders.map((f) => f.label)).toEqual(["Folder 1"]);
+        done();
+      });
+
+      service.filterForm.patchValue({
+        organization: { id: "1234" } as Organization,
+      });
+
+      folderViews$.next([
+        { id: "1234", name: "Folder 1" },
+        { id: "2345", name: "Folder 2" },
+      ]);
+
+      cipherViews$.next({
+        "1": { folderId: "1234", organizationId: "1234" },
+        "2": { folderId: "2345", organizationId: "56789" },
+      });
+    });
+  });
+
+  describe("filterFunction$", () => {
+    const ciphers = [
+      { type: CipherType.Login, collectionIds: [], organizationId: null },
+      { type: CipherType.Card, collectionIds: ["1234"], organizationId: "8978" },
+      { type: CipherType.Identity, collectionIds: [], folderId: "5432", organizationId: null },
+      { type: CipherType.SecureNote, collectionIds: [], organizationId: null },
+    ] as CipherView[];
+
+    it("filters by cipherType", (done) => {
+      service.filterFunction$.subscribe((filterFunction) => {
+        expect(filterFunction(ciphers)).toEqual([ciphers[0]]);
+        done();
+      });
+
+      service.filterForm.patchValue({ cipherType: CipherType.Login });
+    });
+
+    it("filters by collection", (done) => {
+      const collection = { id: "1234" } as Collection;
+
+      service.filterFunction$.subscribe((filterFunction) => {
+        expect(filterFunction(ciphers)).toEqual([ciphers[1]]);
+        done();
+      });
+
+      service.filterForm.patchValue({ collection });
+    });
+
+    it("filters by folder", (done) => {
+      const folder = { id: "5432" } as FolderView;
+
+      service.filterFunction$.subscribe((filterFunction) => {
+        expect(filterFunction(ciphers)).toEqual([ciphers[2]]);
+        done();
+      });
+
+      service.filterForm.patchValue({ folder });
+    });
+
+    describe("organizationId", () => {
+      it("filters out ciphers that belong to an organization when MyVault is selected", (done) => {
+        const organization = { id: MY_VAULT_ID } as Organization;
+
+        service.filterFunction$.subscribe((filterFunction) => {
+          expect(filterFunction(ciphers)).toEqual([ciphers[0], ciphers[2], ciphers[3]]);
+          done();
+        });
+
+        service.filterForm.patchValue({ organization });
+      });
+
+      it("filters out ciphers that do not belong to the selected organization", (done) => {
+        const organization = { id: "8978" } as Organization;
+
+        service.filterFunction$.subscribe((filterFunction) => {
+          expect(filterFunction(ciphers)).toEqual([ciphers[1]]);
+          done();
+        });
+
+        service.filterForm.patchValue({ organization });
+      });
+    });
+  });
+});
--- a/apps/browser/src/vault/popup/services/vault-popup-list-filters.service.ts
+++ b/apps/browser/src/vault/popup/services/vault-popup-list-filters.service.ts
@@ -0,0 +1,371 @@
+import { Injectable } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { FormBuilder } from "@angular/forms";
+import {
+  Observable,
+  combineLatest,
+  distinctUntilChanged,
+  map,
+  startWith,
+  switchMap,
+  tap,
+} from "rxjs";
+
+import { DynamicTreeNode } from "@bitwarden/angular/vault/vault-filter/models/dynamic-tree-node.model";
+import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
+import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
+import { ProductType } from "@bitwarden/common/enums";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { Utils } from "@bitwarden/common/platform/misc/utils";
+import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
+import { CollectionService } from "@bitwarden/common/vault/abstractions/collection.service";
+import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
+import { CipherType } from "@bitwarden/common/vault/enums";
+import { Collection } from "@bitwarden/common/vault/models/domain/collection";
+import { ITreeNodeObject, TreeNode } from "@bitwarden/common/vault/models/domain/tree-node";
+import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { CollectionView } from "@bitwarden/common/vault/models/view/collection.view";
+import { FolderView } from "@bitwarden/common/vault/models/view/folder.view";
+import { ServiceUtils } from "@bitwarden/common/vault/service-utils";
+import { ChipSelectOption } from "@bitwarden/components";
+
+/** All available cipher filters */
+export type PopupListFilter = {
+  organization: Organization | null;
+  collection: Collection | null;
+  folder: FolderView | null;
+  cipherType: CipherType | null;
+};
+
+/** Delimiter that denotes a level of nesting  */
+const NESTING_DELIMITER = "/";
+
+/** Id assigned to the "My vault" organization */
+export const MY_VAULT_ID = "MyVault";
+
+const INITIAL_FILTERS: PopupListFilter = {
+  organization: null,
+  collection: null,
+  folder: null,
+  cipherType: null,
+};
+
+@Injectable({
+  providedIn: "root",
+})
+export class VaultPopupListFiltersService {
+  /**
+   * UI form for all filters
+   */
+  filterForm = this.formBuilder.group<PopupListFilter>(INITIAL_FILTERS);
+
+  /**
+   * Observable for `filterForm` value
+   */
+  filters$ = this.filterForm.valueChanges.pipe(
+    startWith(INITIAL_FILTERS),
+  ) as Observable<PopupListFilter>;
+
+  /**
+   * Static list of ciphers views used in synchronous context
+   */
+  private cipherViews: CipherView[] = [];
+
+  /**
+   * Observable of cipher views
+   */
+  private cipherViews$: Observable<CipherView[]> = this.cipherService.cipherViews$.pipe(
+    tap((cipherViews) => {
+      this.cipherViews = Object.values(cipherViews);
+    }),
+    map((ciphers) => Object.values(ciphers)),
+  );
+
+  constructor(
+    private folderService: FolderService,
+    private cipherService: CipherService,
+    private organizationService: OrganizationService,
+    private i18nService: I18nService,
+    private collectionService: CollectionService,
+    private formBuilder: FormBuilder,
+  ) {
+    this.filterForm.controls.organization.valueChanges
+      .pipe(takeUntilDestroyed())
+      .subscribe(this.validateOrganizationChange.bind(this));
+  }
+
+  /**
+   * Observable whose value is a function that filters an array of `CipherView` objects based on the current filters
+   */
+  filterFunction$: Observable<(ciphers: CipherView[]) => CipherView[]> = this.filters$.pipe(
+    map(
+      (filters) => (ciphers: CipherView[]) =>
+        ciphers.filter((cipher) => {
+          if (filters.cipherType !== null && cipher.type !== filters.cipherType) {
+            return false;
+          }
+
+          if (
+            filters.collection !== null &&
+            !cipher.collectionIds.includes(filters.collection.id)
+          ) {
+            return false;
+          }
+
+          if (filters.folder !== null && cipher.folderId !== filters.folder.id) {
+            return false;
+          }
+
+          const isMyVault = filters.organization?.id === MY_VAULT_ID;
+
+          if (isMyVault) {
+            if (cipher.organizationId !== null) {
+              return false;
+            }
+          } else if (filters.organization !== null) {
+            if (cipher.organizationId !== filters.organization.id) {
+              return false;
+            }
+          }
+
+          return true;
+        }),
+    ),
+  );
+
+  /**
+   * All available cipher types
+   */
+  readonly cipherTypes: ChipSelectOption<CipherType>[] = [
+    {
+      value: CipherType.Login,
+      label: this.i18nService.t("logins"),
+      icon: "bwi-globe",
+    },
+    {
+      value: CipherType.Card,
+      label: this.i18nService.t("cards"),
+      icon: "bwi-credit-card",
+    },
+    {
+      value: CipherType.Identity,
+      label: this.i18nService.t("identities"),
+      icon: "bwi-id-card",
+    },
+    {
+      value: CipherType.SecureNote,
+      label: this.i18nService.t("notes"),
+      icon: "bwi-sticky-note",
+    },
+  ];
+
+  /** Resets `filterForm` to the original state */
+  resetFilterForm(): void {
+    this.filterForm.reset(INITIAL_FILTERS);
+  }
+
+  /**
+   * Organization array structured to be directly passed to `ChipSelectComponent`
+   */
+  organizations$: Observable<ChipSelectOption<Organization>[]> =
+    this.organizationService.memberOrganizations$.pipe(
+      map((orgs) => orgs.sort(Utils.getSortFunction(this.i18nService, "name"))),
+      map((orgs) => {
+        if (!orgs.length) {
+          return [];
+        }
+
+        return [
+          // When the user is a member of an organization, make  the "My Vault" option available
+          {
+            value: { id: MY_VAULT_ID } as Organization,
+            label: this.i18nService.t("myVault"),
+            icon: "bwi-user",
+          },
+          ...orgs.map((org) => {
+            let icon = "bwi-business";
+
+            if (!org.enabled) {
+              // Show a warning icon if the organization is deactivated
+              icon = "bwi-exclamation-triangle tw-text-danger";
+            } else if (org.planProductType === ProductType.Families) {
+              // Show a family icon if the organization is a family org
+              icon = "bwi-family";
+            }
+
+            return {
+              value: org,
+              label: org.name,
+              icon,
+            };
+          }),
+        ];
+      }),
+    );
+
+  /**
+   * Folder array structured to be directly passed to `ChipSelectComponent`
+   */
+  folders$: Observable<ChipSelectOption<string>[]> = combineLatest([
+    this.filters$.pipe(
+      distinctUntilChanged(
+        (previousFilter, currentFilter) =>
+          // Only update the collections when the organizationId filter changes
+          previousFilter.organization?.id === currentFilter.organization?.id,
+      ),
+    ),
+    this.folderService.folderViews$,
+    this.cipherViews$,
+  ]).pipe(
+    map(([filters, folders, cipherViews]): [PopupListFilter, FolderView[], CipherView[]] => {
+      if (folders.length === 1 && folders[0].id === null) {
+        // Do not display folder selections when only the "no folder" option is available.
+        return [filters, [], cipherViews];
+      }
+
+      // Sort folders by alphabetic name
+      folders.sort(Utils.getSortFunction(this.i18nService, "name"));
+      let arrangedFolders = folders;
+
+      const noFolder = folders.find((f) => f.id === null);
+
+      if (noFolder) {
+        // Update `name` of the "no folder" option to "Items with no folder"
+        noFolder.name = this.i18nService.t("itemsWithNoFolder");
+
+        // Move the "no folder" option to the end of the list
+        arrangedFolders = [...folders.filter((f) => f.id !== null), noFolder];
+      }
+      return [filters, arrangedFolders, cipherViews];
+    }),
+    map(([filters, folders, cipherViews]) => {
+      const organizationId = filters.organization?.id ?? null;
+
+      // When no org or "My vault" is selected, return all folders
+      if (organizationId === null || organizationId === MY_VAULT_ID) {
+        return folders;
+      }
+
+      const orgCiphers = cipherViews.filter((c) => c.organizationId === organizationId);
+
+      // Return only the folders that have ciphers within the filtered organization
+      return folders.filter((f) => orgCiphers.some((oc) => oc.folderId === f.id));
+    }),
+    map((folders) => {
+      const nestedFolders = this.getAllFoldersNested(folders);
+      return new DynamicTreeNode<FolderView>({
+        fullList: folders,
+        nestedList: nestedFolders,
+      });
+    }),
+    map((folders) => folders.nestedList.map(this.convertToChipSelectOption.bind(this))),
+  );
+
+  /**
+   * Collection array structured to be directly passed to `ChipSelectComponent`
+   */
+  collections$: Observable<ChipSelectOption<string>[]> = combineLatest([
+    this.filters$.pipe(
+      distinctUntilChanged(
+        (previousFilter, currentFilter) =>
+          // Only update the collections when the organizationId filter changes
+          previousFilter.organization?.id === currentFilter.organization?.id,
+      ),
+    ),
+    this.collectionService.decryptedCollections$,
+  ]).pipe(
+    map(([filters, allCollections]) => {
+      const organizationId = filters.organization?.id ?? null;
+      // When the organization filter is selected, filter out collections that do not belong to the selected organization
+      const collections =
+        organizationId === null
+          ? allCollections
+          : allCollections.filter((c) => c.organizationId === organizationId);
+
+      return collections;
+    }),
+    switchMap(async (collections) => {
+      const nestedCollections = await this.collectionService.getAllNested(collections);
+
+      return new DynamicTreeNode<CollectionView>({
+        fullList: collections,
+        nestedList: nestedCollections,
+      });
+    }),
+    map((collections) => collections.nestedList.map(this.convertToChipSelectOption.bind(this))),
+  );
+
+  /**
+   * Converts the given item into the `ChipSelectOption` structure
+   */
+  private convertToChipSelectOption<T extends ITreeNodeObject>(
+    item: TreeNode<T>,
+  ): ChipSelectOption<T> {
+    return {
+      value: item.node,
+      label: item.node.name,
+      icon: "bwi-folder", // Organization & Folder icons are the same
+      children: item.children
+        ? item.children.map(this.convertToChipSelectOption.bind(this))
+        : undefined,
+    };
+  }
+
+  /**
+   * Returns a nested folder structure based on the input FolderView array
+   */
+  private getAllFoldersNested(folders: FolderView[]): TreeNode<FolderView>[] {
+    const nodes: TreeNode<FolderView>[] = [];
+
+    folders.forEach((f) => {
+      const folderCopy = new FolderView();
+      folderCopy.id = f.id;
+      folderCopy.revisionDate = f.revisionDate;
+
+      // Remove "/" from beginning and end of the folder name
+      // then split the folder name by the delimiter
+      const parts = f.name != null ? f.name.replace(/^\/+|\/+$/g, "").split(NESTING_DELIMITER) : [];
+      ServiceUtils.nestedTraverse(nodes, 0, parts, folderCopy, null, NESTING_DELIMITER);
+    });
+
+    return nodes;
+  }
+
+  /**
+   * Validate collection & folder filters when the organization filter changes
+   */
+  private validateOrganizationChange(organization: Organization | null): void {
+    if (!organization) {
+      return;
+    }
+
+    const currentFilters = this.filterForm.getRawValue();
+
+    // When the organization filter changes and a collection is already selected,
+    // reset the collection filter if the collection does not belong to the new organization filter
+    if (currentFilters.collection && currentFilters.collection.organizationId !== organization.id) {
+      this.filterForm.get("collection").setValue(null);
+    }
+
+    // When the organization filter changes and a folder is already selected,
+    // reset the folder filter if the folder does not belong to the new organization filter
+    if (
+      currentFilters.folder &&
+      currentFilters.folder.id !== null &&
+      organization.id !== MY_VAULT_ID
+    ) {
+      // Get all ciphers that belong to the new organization
+      const orgCiphers = this.cipherViews.filter((c) => c.organizationId === organization.id);
+
+      // Find any ciphers within the organization that belong to the current folder
+      const newOrgContainsFolder = orgCiphers.some(
+        (oc) => oc.folderId === currentFilters.folder.id,
+      );
+
+      // If the new organization does not contain the current folder, reset the folder filter
+      if (!newOrgContainsFolder) {
+        this.filterForm.get("folder").setValue(null);
+      }
+    }
+  }
+}
--- a/apps/cli/package.json
+++ b/apps/cli/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@bitwarden/cli",
  "description": "A secure and free password manager for all of your devices.",
-  "version": "2024.5.0",
+  "version": "2024.6.0",
  "keywords": [
    "bitwarden",
    "password",
--- a/apps/cli/src/platform/services/node-api.service.ts
+++ b/apps/cli/src/platform/services/node-api.service.ts
@@ -6,6 +6,7 @@ import { VaultTimeoutSettingsService } from "@bitwarden/common/abstractions/vaul
 import { TokenService } from "@bitwarden/common/auth/abstractions/token.service";
 import { AppIdService } from "@bitwarden/common/platform/abstractions/app-id.service";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
+import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { ApiService } from "@bitwarden/common/services/api.service";

@@ -21,8 +22,10 @@ export class NodeApiService extends ApiService {
    platformUtilsService: PlatformUtilsService,
    environmentService: EnvironmentService,
    appIdService: AppIdService,
+    refreshAccessTokenErrorCallback: () => Promise<void>,
+    logService: LogService,
+    logoutCallback: () => Promise<void>,
    vaultTimeoutSettingsService: VaultTimeoutSettingsService,
-    logoutCallback: (expired: boolean) => Promise<void>,
    customUserAgent: string = null,
  ) {
    super(
@@ -30,8 +33,10 @@ export class NodeApiService extends ApiService {
      platformUtilsService,
      environmentService,
      appIdService,
-      vaultTimeoutSettingsService,
+      refreshAccessTokenErrorCallback,
+      logService,
      logoutCallback,
+      vaultTimeoutSettingsService,
      customUserAgent,
    );
  }
--- a/apps/cli/src/service-container.ts
+++ b/apps/cli/src/service-container.ts
@@ -255,6 +255,8 @@ export class ServiceContainer {
      p = path.join(process.env.HOME, ".config/Bitwarden CLI");
    }

+    const logoutCallback = async () => await this.logout();
+
    this.platformUtilsService = new CliPlatformUtilsService(ClientType.Cli, packageJson);
    this.logService = new ConsoleLogService(
      this.platformUtilsService.isDev(),
@@ -337,6 +339,7 @@ export class ServiceContainer {
      this.keyGenerationService,
      this.encryptService,
      this.logService,
+      logoutCallback,
    );

    const migrationRunner = new MigrationRunner(
@@ -421,13 +424,19 @@ export class ServiceContainer {
      VaultTimeoutStringType.Never, // default vault timeout
    );

+    const refreshAccessTokenErrorCallback = () => {
+      throw new Error("Refresh Access token error");
+    };
+
    this.apiService = new NodeApiService(
      this.tokenService,
      this.platformUtilsService,
      this.environmentService,
      this.appIdService,
+      refreshAccessTokenErrorCallback,
+      this.logService,
+      logoutCallback,
      this.vaultTimeoutSettingsService,
-      async (expired: boolean) => await this.logout(),
      customUserAgent,
    );

@@ -485,7 +494,7 @@ export class ServiceContainer {
      this.logService,
      this.organizationService,
      this.keyGenerationService,
-      async (expired: boolean) => await this.logout(),
+      logoutCallback,
      this.stateProvider,
    );

@@ -660,7 +669,7 @@ export class ServiceContainer {
      this.sendApiService,
      this.userDecryptionOptionsService,
      this.avatarService,
-      async (expired: boolean) => await this.logout(),
+      logoutCallback,
      this.billingAccountProfileStateService,
      this.tokenService,
      this.authService,
--- a/apps/desktop/desktop_native/Cargo.lock
+++ b/apps/desktop/desktop_native/Cargo.lock
@@ -39,9 +39,9 @@ dependencies = [

 [[package]]
 name = "anyhow"
-version = "1.0.80"
+version = "1.0.86"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5ad32ce52e4161730f7098c077cd2ed6229b5804ccf99e5366be1ab72a98b4e1"
+checksum = "b3d1d046238990b9cf5bcde22a3fb3584ee5cf65fb2765f454ed428c7a0063da"

 [[package]]
 name = "arboard"
@@ -83,9 +83,9 @@ dependencies = [

 [[package]]
 name = "base64"
-version = "0.22.0"
+version = "0.22.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9475866fec1451be56a3c2400fd081ff546538961565ccb5b7142cbd22bc7a51"
+checksum = "72b3254f16251a8381aa12e40e3c4d2f0199f8c6508fbecb9d91f575e0fbb8c6"

 [[package]]
 name = "bitflags"
--- a/apps/desktop/desktop_native/Cargo.toml
+++ b/apps/desktop/desktop_native/Cargo.toml
@@ -14,9 +14,9 @@ manual_test = []

 [dependencies]
 aes = "=0.8.4"
-anyhow = "=1.0.80"
+anyhow = "=1.0.86"
 arboard = { version = "=3.3.2", default-features = false, features = ["wayland-data-control"] }
-base64 = "=0.22.0"
+base64 = "=0.22.1"
 cbc = { version = "=0.1.2", features = ["alloc"] }
 napi = { version = "=2.16.0", features = ["async"] }
 napi-derive = "=2.16.0"
--- a/apps/desktop/native-messaging-test-runner/package-lock.json
+++ b/apps/desktop/native-messaging-test-runner/package-lock.json
@@ -18,7 +18,7 @@
        "yargs": "17.7.2"
      },
      "devDependencies": {
-        "@types/node": "18.19.29",
+        "@types/node": "20.14.1",
        "@types/node-ipc": "9.2.3",
        "typescript": "4.7.4"
      }
@@ -98,9 +98,10 @@
      "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA=="
    },
    "node_modules/@types/node": {
-      "version": "18.19.29",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.29.tgz",
-      "integrity": "sha512-5pAX7ggTmWZdhUrhRWLPf+5oM7F80bcKVCBbr0zwEkTNzTJL2CWQjznpFgHYy6GrzkYi2Yjy7DHKoynFxqPV8g==",
+      "version": "20.14.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.1.tgz",
+      "integrity": "sha512-T2MzSGEu+ysB/FkWfqmhV3PLyQlowdptmmgD20C6QxsS8Fmv5SjpZ1ayXaEC0S21/h5UJ9iA6W/5vSNU5l00OA==",
+      "license": "MIT",
      "dependencies": {
        "undici-types": "~5.26.4"
      }
--- a/apps/desktop/native-messaging-test-runner/package.json
+++ b/apps/desktop/native-messaging-test-runner/package.json
@@ -23,7 +23,7 @@
    "yargs": "17.7.2"
  },
  "devDependencies": {
-    "@types/node": "18.19.29",
+    "@types/node": "20.14.1",
    "@types/node-ipc": "9.2.3",
    "typescript": "4.7.4"
  },
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@bitwarden/desktop",
  "description": "A secure and free password manager for all of your devices.",
-  "version": "2024.5.1",
+  "version": "2024.6.0",
  "keywords": [
    "bitwarden",
    "password",
--- a/apps/desktop/src/app/app.component.ts
+++ b/apps/desktop/src/app/app.component.ts
@@ -1,3 +1,4 @@
+import { DialogRef } from "@angular/cdk/dialog";
 import {
  Component,
  NgZone,
@@ -13,6 +14,7 @@ import { filter, firstValueFrom, map, Subject, takeUntil, timeout } from "rxjs";
 import { ModalRef } from "@bitwarden/angular/components/modal/modal.ref";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { FingerprintDialogComponent } from "@bitwarden/auth/angular";
+import { LogoutReason } from "@bitwarden/auth/common";
 import { EventUploadService } from "@bitwarden/common/abstractions/event/event-upload.service";
 import { NotificationsService } from "@bitwarden/common/abstractions/notifications.service";
 import { SearchService } from "@bitwarden/common/abstractions/search.service";
@@ -48,7 +50,7 @@ import { CollectionService } from "@bitwarden/common/vault/abstractions/collecti
 import { InternalFolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
 import { CipherType } from "@bitwarden/common/vault/enums";
-import { DialogService, ToastService } from "@bitwarden/components";
+import { DialogService, ToastOptions, ToastService } from "@bitwarden/components";

 import { DeleteAccountComponent } from "../auth/delete-account.component";
 import { LoginApprovalComponent } from "../auth/login/login-approval.component";
@@ -108,6 +110,7 @@ export class AppComponent implements OnInit, OnDestroy {
  private idleTimer: number = null;
  private isIdle = false;
  private activeUserId: UserId = null;
+  private activeSimpleDialog: DialogRef<boolean> = null;

  private destroy$ = new Subject<void>();

@@ -207,7 +210,7 @@ export class AppComponent implements OnInit, OnDestroy {
            break;
          case "logout":
            this.loading = message.userId == null || message.userId === this.activeUserId;
-            await this.logOut(!!message.expired, message.userId);
+            await this.logOut(message.logoutReason, message.userId);
            this.loading = false;
            break;
          case "lockVault":
@@ -545,9 +548,73 @@ export class AppComponent implements OnInit, OnDestroy {
    this.messagingService.send("updateAppMenu", { updateRequest: updateRequest });
  }

+  private async displayLogoutReason(logoutReason: LogoutReason) {
+    let toastOptions: ToastOptions;
+
+    switch (logoutReason) {
+      case "invalidSecurityStamp":
+      case "sessionExpired": {
+        toastOptions = {
+          variant: "warning",
+          title: this.i18nService.t("loggedOut"),
+          message: this.i18nService.t("loginExpired"),
+        };
+        break;
+      }
+      // We don't expect these scenarios to be common, but we want the user to
+      // understand why they are being logged out before a process reload.
+      case "accessTokenUnableToBeDecrypted": {
+        // Don't create multiple dialogs if this fires multiple times
+        if (this.activeSimpleDialog) {
+          // Let the caller of this function listen for the dialog to close
+          return firstValueFrom(this.activeSimpleDialog.closed);
+        }
+
+        this.activeSimpleDialog = this.dialogService.openSimpleDialogRef({
+          title: { key: "loggedOut" },
+          content: { key: "accessTokenUnableToBeDecrypted" },
+          acceptButtonText: { key: "ok" },
+          cancelButtonText: null,
+          type: "danger",
+        });
+
+        await firstValueFrom(this.activeSimpleDialog.closed);
+        this.activeSimpleDialog = null;
+
+        break;
+      }
+      case "refreshTokenSecureStorageRetrievalFailure": {
+        // Don't create multiple dialogs if this fires multiple times
+        if (this.activeSimpleDialog) {
+          // Let the caller of this function listen for the dialog to close
+          return firstValueFrom(this.activeSimpleDialog.closed);
+        }
+
+        this.activeSimpleDialog = this.dialogService.openSimpleDialogRef({
+          title: { key: "loggedOut" },
+          content: { key: "refreshTokenSecureStorageRetrievalFailure" },
+          acceptButtonText: { key: "ok" },
+          cancelButtonText: null,
+          type: "danger",
+        });
+
+        await firstValueFrom(this.activeSimpleDialog.closed);
+        this.activeSimpleDialog = null;
+
+        break;
+      }
+    }
+
+    if (toastOptions) {
+      this.toastService.showToast(toastOptions);
+    }
+  }
+
  // Even though the userId parameter is no longer optional doesn't mean a message couldn't be
  // passing null-ish values to us.
-  private async logOut(expired: boolean, userId: UserId) {
+  private async logOut(logoutReason: LogoutReason, userId: UserId) {
+    await this.displayLogoutReason(logoutReason);
+
    const activeUserId = await firstValueFrom(
      this.accountService.activeAccount$.pipe(map((a) => a?.id)),
    );
@@ -620,15 +687,7 @@ export class AppComponent implements OnInit, OnDestroy {
    // This must come last otherwise the logout will prematurely trigger
    // a process reload before all the state service user data can be cleaned up
    if (userBeingLoggedOut === activeUserId) {
-      this.authService.logOut(async () => {
-        if (expired) {
-          this.platformUtilsService.showToast(
-            "warning",
-            this.i18nService.t("loggedOut"),
-            this.i18nService.t("loginExpired"),
-          );
-        }
-      });
+      this.authService.logOut(async () => {});
    }
  }

@@ -710,7 +769,7 @@ export class AppComponent implements OnInit, OnDestroy {
        // 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
        options[1] === "logOut"
-          ? this.logOut(false, userId as UserId)
+          ? this.logOut("vaultTimeout", userId as UserId)
          : await this.vaultTimeoutService.lock(userId);
      }
    }
--- a/apps/desktop/src/locales/en/messages.json
+++ b/apps/desktop/src/locales/en/messages.json
@@ -695,6 +695,15 @@
  "selfHostedEnvironmentFooter": {
    "message": "Specify the base URL of your on-premises hosted Bitwarden installation."
  },
+  "selfHostedBaseUrlHint": {
+    "message": "Specify the base URL of your on-premises hosted Bitwarden installation. Example: https://bitwarden.company.com"
+  },
+  "selfHostedCustomEnvHeader" :{
+    "message": "For advanced configuration, you can specify the base URL of each service independently."
+  },
+  "selfHostedEnvFormInvalid" :{
+    "message": "You must add either the base Server URL or at least one custom environment."
+  },
  "customEnvironment": {
    "message": "Custom environment"
  },
@@ -743,6 +752,9 @@
  "loggedOut": {
    "message": "Logged out"
  },
+  "loggedOutDesc": {
+    "message": "You have been logged out of your account."
+  },
  "loginExpired": {
    "message": "Your login session has expired."
  },
@@ -1212,6 +1224,12 @@
      }
    }
  },
+  "errorRefreshingAccessToken":{
+    "message": "Access Token Refresh Error"
+  },
+  "errorRefreshingAccessTokenDesc":{
+    "message": "No refresh token or API keys found. Please try logging out and logging back in."
+  },
  "help": {
    "message": "Help"
  },
@@ -2474,6 +2492,12 @@
  "important": {
    "message": "Important:"
  },
+  "accessTokenUnableToBeDecrypted": {
+    "message": "You have been logged out because your access token could not be decrypted. Please log in again to resolve this issue."
+  },
+  "refreshTokenSecureStorageRetrievalFailure": {
+    "message": "You have been logged out because your refresh token could not be retrieved. Please log in again to resolve this issue."
+  },
  "masterPasswordHint": {
    "message": "Your master password cannot be recovered if you forget it!"
  },
--- a/apps/desktop/src/main.ts
+++ b/apps/desktop/src/main.ts
@@ -3,6 +3,7 @@ import * as path from "path";
 import { app } from "electron";
 import { Subject, firstValueFrom } from "rxjs";

+import { LogoutReason } from "@bitwarden/auth/common";
 import { TokenService as TokenServiceAbstraction } from "@bitwarden/common/auth/abstractions/token.service";
 import { AccountServiceImplementation } from "@bitwarden/common/auth/services/account.service";
 import { TokenService } from "@bitwarden/common/auth/services/token.service";
@@ -31,6 +32,7 @@ import { DefaultSingleUserStateProvider } from "@bitwarden/common/platform/state
 import { DefaultStateProvider } from "@bitwarden/common/platform/state/implementations/default-state.provider";
 import { StateEventRegistrarService } from "@bitwarden/common/platform/state/state-event-registrar.service";
 import { MemoryStorageService as MemoryStorageServiceForStateProviders } from "@bitwarden/common/platform/state/storage/memory-storage.service";
+import { UserId } from "@bitwarden/common/types/guid";
 /* eslint-enable import/no-restricted-paths */

 import { DesktopAutofillSettingsService } from "./autofill/services/desktop-autofill-settings.service";
@@ -182,6 +184,7 @@ export class Main {
      this.keyGenerationService,
      this.encryptService,
      this.logService,
+      async (logoutReason: LogoutReason, userId?: UserId) => {},
    );

    this.migrationRunner = new MigrationRunner(
@@ -207,11 +210,9 @@ export class Main {
    );

    this.desktopSettingsService = new DesktopSettingsService(stateProvider);
-
    const biometricStateService = new DefaultBiometricStateService(stateProvider);

    this.windowMain = new WindowMain(
-      this.stateService,
      biometricStateService,
      this.logService,
      this.storageService,
--- a/apps/desktop/src/main/window.main.ts
+++ b/apps/desktop/src/main/window.main.ts
@@ -6,7 +6,6 @@ import { app, BrowserWindow, ipcMain, nativeTheme, screen, session } from "elect
 import { firstValueFrom } from "rxjs";

 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
-import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { AbstractStorageService } from "@bitwarden/common/platform/abstractions/storage.service";
 import { BiometricStateService } from "@bitwarden/common/platform/biometrics/biometric-state.service";

@@ -38,7 +37,6 @@ export class WindowMain {
  readonly defaultHeight = 600;

  constructor(
-    private stateService: StateService,
    private biometricStateService: BiometricStateService,
    private logService: LogService,
    private storageService: AbstractStorageService,
--- a/apps/desktop/src/package-lock.json
+++ b/apps/desktop/src/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "@bitwarden/desktop",
-  "version": "2024.5.1",
+  "version": "2024.6.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@bitwarden/desktop",
-      "version": "2024.5.1",
+      "version": "2024.6.0",
      "license": "GPL-3.0",
      "dependencies": {
        "@bitwarden/desktop-native": "file:../desktop_native",
--- a/apps/desktop/src/package.json
+++ b/apps/desktop/src/package.json
@@ -2,7 +2,7 @@
  "name": "@bitwarden/desktop",
  "productName": "Bitwarden",
  "description": "A secure and free password manager for all of your devices.",
-  "version": "2024.5.1",
+  "version": "2024.6.0",
  "author": "Bitwarden Inc. <hello@bitwarden.com> (https://bitwarden.com)",
  "homepage": "https://bitwarden.com",
  "license": "GPL-3.0",
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@bitwarden/web-vault",
-  "version": "2024.5.0",
+  "version": "2024.6.0",
  "scripts": {
    "build:oss": "webpack",
    "build:bit": "webpack -c ../../bitwarden_license/bit-web/webpack.config.js",
--- a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html
+++ b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html
@@ -52,7 +52,7 @@
      *ngIf="canShowBillingTab(organization)"
    >
      <bit-nav-item [text]="'subscription' | i18n" route="billing/subscription"></bit-nav-item>
-      <ng-container *ngIf="showPaymentAndHistory$ | async">
+      <ng-container *ngIf="(showPaymentAndHistory$ | async) && (organizationIsUnmanaged$ | async)">
        <bit-nav-item [text]="'paymentMethod' | i18n" route="billing/payment-method"></bit-nav-item>
        <bit-nav-item [text]="'billingHistory' | i18n" route="billing/history"></bit-nav-item>
      </ng-container>
--- a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts
+++ b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts
@@ -1,7 +1,7 @@
 import { CommonModule } from "@angular/common";
 import { Component, OnDestroy, OnInit } from "@angular/core";
 import { ActivatedRoute, RouterModule } from "@angular/router";
-import { map, mergeMap, Observable, Subject, takeUntil } from "rxjs";
+import { combineLatest, map, mergeMap, Observable, Subject, switchMap, takeUntil } from "rxjs";

 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import {
@@ -16,7 +16,8 @@ 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 { PolicyType } from "@bitwarden/common/admin-console/enums";
+import { ProviderService } from "@bitwarden/common/admin-console/abstractions/provider.service";
+import { PolicyType, ProviderStatusType } from "@bitwarden/common/admin-console/enums";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
@@ -55,9 +56,14 @@ export class OrganizationLayoutComponent implements OnInit, OnDestroy {
  organization$: Observable<Organization>;
  showPaymentAndHistory$: Observable<boolean>;
  hideNewOrgButton$: Observable<boolean>;
+  organizationIsUnmanaged$: Observable<boolean>;

  private _destroy = new Subject<void>();

+  protected consolidatedBillingEnabled$ = this.configService.getFeatureFlag$(
+    FeatureFlag.EnableConsolidatedBilling,
+  );
+
  protected showPaymentMethodWarningBanners$ = this.configService.getFeatureFlag$(
    FeatureFlag.ShowPaymentMethodWarningBanners,
  );
@@ -68,6 +74,7 @@ export class OrganizationLayoutComponent implements OnInit, OnDestroy {
    private platformUtilsService: PlatformUtilsService,
    private configService: ConfigService,
    private policyService: PolicyService,
+    private providerService: ProviderService,
  ) {}

  async ngOnInit() {
@@ -94,6 +101,24 @@ export class OrganizationLayoutComponent implements OnInit, OnDestroy {
    );

    this.hideNewOrgButton$ = this.policyService.policyAppliesToActiveUser$(PolicyType.SingleOrg);
+
+    const provider$ = this.organization$.pipe(
+      switchMap((organization) => this.providerService.get$(organization.providerId)),
+    );
+
+    this.organizationIsUnmanaged$ = combineLatest([
+      this.consolidatedBillingEnabled$,
+      this.organization$,
+      provider$,
+    ]).pipe(
+      map(
+        ([consolidatedBillingEnabled, organization, provider]) =>
+          !consolidatedBillingEnabled ||
+          !organization.hasProvider ||
+          !provider ||
+          provider.providerStatus !== ProviderStatusType.Billable,
+      ),
+    );
  }

  ngOnDestroy() {
--- a/apps/web/src/app/app.component.ts
+++ b/apps/web/src/app/app.component.ts
@@ -14,6 +14,7 @@ import {
  timer,
 } from "rxjs";

+import { LogoutReason } from "@bitwarden/auth/common";
 import { EventUploadService } from "@bitwarden/common/abstractions/event/event-upload.service";
 import { NotificationsService } from "@bitwarden/common/abstractions/notifications.service";
 import { SearchService } from "@bitwarden/common/abstractions/search.service";
@@ -40,7 +41,7 @@ import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.servi
 import { CollectionService } from "@bitwarden/common/vault/abstractions/collection.service";
 import { InternalFolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
-import { DialogService, ToastService } from "@bitwarden/components";
+import { DialogService, ToastOptions, ToastService } from "@bitwarden/components";

 import { PolicyListService } from "./admin-console/core/policy-list.service";
 import {
@@ -148,7 +149,7 @@ export class AppComponent implements OnDestroy, OnInit {
            this.router.navigate(["/"]);
            break;
          case "logout":
-            await this.logOut(!!message.expired, message.redirect);
+            await this.logOut(message.logoutReason, message.redirect);
            break;
          case "lockVault":
            await this.vaultTimeoutService.lock();
@@ -278,7 +279,34 @@ export class AppComponent implements OnDestroy, OnInit {
    this.destroy$.complete();
  }

-  private async logOut(expired: boolean, redirect = true) {
+  private async displayLogoutReason(logoutReason: LogoutReason) {
+    let toastOptions: ToastOptions;
+    switch (logoutReason) {
+      case "invalidSecurityStamp":
+      case "sessionExpired": {
+        toastOptions = {
+          variant: "warning",
+          title: this.i18nService.t("loggedOut"),
+          message: this.i18nService.t("loginExpired"),
+        };
+        break;
+      }
+      default: {
+        toastOptions = {
+          variant: "info",
+          title: this.i18nService.t("loggedOut"),
+          message: this.i18nService.t("loggedOutDesc"),
+        };
+        break;
+      }
+    }
+
+    this.toastService.showToast(toastOptions);
+  }
+
+  private async logOut(logoutReason: LogoutReason, redirect = true) {
+    await this.displayLogoutReason(logoutReason);
+
    await this.eventUploadService.uploadEvents();
    const userId = (await this.stateService.getUserId()) as UserId;

@@ -308,14 +336,6 @@ export class AppComponent implements OnDestroy, OnInit {

    await this.searchService.clearIndex();
    this.authService.logOut(async () => {
-      if (expired) {
-        this.platformUtilsService.showToast(
-          "warning",
-          this.i18nService.t("loggedOut"),
-          this.i18nService.t("loginExpired"),
-        );
-      }
-
      await this.stateService.clean({ userId: userId });
      await this.accountService.clean(userId);

--- a/apps/web/src/app/auth/trial-initiation/content/enterprise-content.component.html
+++ b/apps/web/src/app/auth/trial-initiation/content/enterprise-content.component.html
@@ -1,8 +1,8 @@
-<h1 class="tw-text-3xl !tw-text-alt2">Start your 7-day free trial of Bitwarden</h1>
+<h1 class="tw-text-3xl !tw-text-alt2">Start your 7-day Enterprise free trial</h1>
 <div class="tw-pt-20">
  <h2 class="tw-text-2xl">
-    Strengthen business security with the password manager designed for seamless administration and
-    employee usability.
+    Bitwarden is the most trusted password manager designed for seamless administration and employee
+    usability.
  </h2>
 </div>
 <ul class="tw-mt-12 tw-flex tw-flex-col tw-gap-10 tw-text-2xl tw-text-main tw-list-none tw-pl-0">
@@ -15,14 +15,14 @@
  <li class="tw-flex tw-items-center">
    <i class="bwi bwi-lg bwi-check-circle tw-mr-4 tw-flex-none"></i
    ><span class="tw-flex-auto"
-      >Strengthen employee security practices through centralized administrative control and
+      >Strengthen company-wide security through centralized administrative control and
      policies</span
    >
  </li>
  <li class="tw-flex tw-items-center">
    <i class="bwi bwi-lg bwi-check-circle tw-mr-4 tw-flex-none"></i
    ><span class="tw-flex-auto"
-      >Streamline user onboarding and automate account provisioning with turnkey SSO and SCIM
+      >Streamline user onboarding and automate account provisioning with flexible SSO and SCIM
      integrations</span
    >
  </li>
@@ -35,14 +35,7 @@
  <li class="tw-flex tw-items-center">
    <i class="bwi bwi-lg bwi-check-circle tw-mr-4 tw-flex-none"></i
    ><span class="tw-flex-auto"
-      >Save time and increase productivity with autofill and instant device syncing</span
-    >
-  </li>
-  <li class="tw-flex tw-items-center">
-    <i class="bwi bwi-lg bwi-check-circle tw-mr-4 tw-flex-none"></i
-    ><span class="tw-flex-auto"
-      >Empower employees to secure their digital life at home, at work, and on the go by offering a
-      free Families plan to all Enterprise users</span
+      >Give all Enterprise users the gift of 360º security with a free Families plan</span
    >
  </li>
 </ul>
--- a/apps/web/src/app/auth/trial-initiation/content/enterprise1-content.component.html
+++ b/apps/web/src/app/auth/trial-initiation/content/enterprise1-content.component.html
@@ -1,34 +1,44 @@
-<h1 class="tw-text-3xl !tw-text-alt2">The Password Manager Trusted by Millions</h1>
-<div class="tw-pt-32">
-  <h2 class="tw-text-2xl">Everything enterprises need out of a password manager:</h2>
+<h1 class="tw-text-3xl !tw-text-alt2">Start your 7-day Enterprise free trial</h1>
+<div class="tw-pt-20">
+  <h2 class="tw-text-2xl">
+    Bitwarden is the most trusted password manager designed for seamless administration and employee
+    usability.
+  </h2>
 </div>
 <ul class="tw-mt-12 tw-flex tw-flex-col tw-gap-10 tw-text-2xl tw-text-main tw-list-none tw-pl-0">
-  <li><i class="bwi bwi-lg bwi-check-circle tw-mr-4"></i>Secure password sharing</li>
-  <li>
-    <i class="bwi bwi-lg bwi-check-circle tw-mr-4"></i>Easy, flexible SSO and SCIM integrations
+  <li class="tw-flex tw-items-center">
+    <i class="bwi bwi-lg bwi-check-circle tw-mr-4 tw-flex-none"></i
+    ><span class="tw-flex-auto"
+      >Instantly and securely share credentials with the groups and individuals who need them</span
+    >
+  </li>
+  <li class="tw-flex tw-items-center">
+    <i class="bwi bwi-lg bwi-check-circle tw-mr-4 tw-flex-none"></i
+    ><span class="tw-flex-auto"
+      >Strengthen company-wide security through centralized administrative control and
+      policies</span
+    >
+  </li>
+  <li class="tw-flex tw-items-center">
+    <i class="bwi bwi-lg bwi-check-circle tw-mr-4 tw-flex-none"></i
+    ><span class="tw-flex-auto"
+      >Streamline user onboarding and automate account provisioning with flexible SSO and SCIM
+      integrations</span
+    >
+  </li>
+  <li class="tw-flex tw-items-center">
+    <i class="bwi bwi-lg bwi-check-circle tw-mr-4 tw-flex-none"></i
+    ><span class="tw-flex-auto"
+      >Migrate to Bitwarden in minutes with comprehensive import options</span
+    >
+  </li>
+  <li class="tw-flex tw-items-center">
+    <i class="bwi bwi-lg bwi-check-circle tw-mr-4 tw-flex-none"></i
+    ><span class="tw-flex-auto"
+      >Give all Enterprise users the gift of 360º security with a free Families plan</span
+    >
  </li>
-  <li><i class="bwi bwi-lg bwi-check-circle tw-mr-4"></i>Free families plan for users</li>
-  <li><i class="bwi bwi-lg bwi-check-circle tw-mr-4"></i>Quick import and migration tools</li>
-  <li><i class="bwi bwi-lg bwi-check-circle tw-mr-4"></i>Simple, streamlined user experience</li>
-  <li><i class="bwi bwi-lg bwi-check-circle tw-mr-4"></i>Priority support and trainers</li>
 </ul>
 <div class="tw-mt-28 tw-flex tw-flex-col tw-items-center tw-gap-5">
-  <app-logo-cnet-5-stars></app-logo-cnet-5-stars>
-  <div class="tw-flex tw-items-end tw-gap-8">
-    <review-logo
-      logoClass="tw-w-8"
-      logoSrc="../../images/register-layout/g2-logo.svg"
-      logoAlt="G2 Logo"
-    ></review-logo>
-    <review-logo
-      logoClass="tw-w-28"
-      logoSrc="../../images/register-layout/capterra-logo.svg"
-      logoAlt="Capterra Logo"
-    ></review-logo>
-    <review-logo
-      logoClass="tw-w-28"
-      logoSrc="../../images/register-layout/get-app-logo.svg"
-      logoAlt="Get App Logo"
-    ></review-logo>
-  </div>
+  <app-logo-badges></app-logo-badges>
 </div>
--- a/apps/web/src/app/auth/trial-initiation/content/enterprise2-content.component.html
+++ b/apps/web/src/app/auth/trial-initiation/content/enterprise2-content.component.html
@@ -1,34 +1,44 @@
-<h1 class="tw-text-3xl !tw-text-alt2">The Password Manager Trusted by Millions</h1>
-<div class="tw-pt-32">
-  <h2 class="tw-text-2xl">Everything enterprises need out of a password manager:</h2>
+<h1 class="tw-text-3xl !tw-text-alt2">Start your 7-day Enterprise free trial</h1>
+<div class="tw-pt-20">
+  <h2 class="tw-text-2xl">
+    Bitwarden is the most trusted password manager designed for seamless administration and employee
+    usability.
+  </h2>
 </div>
 <ul class="tw-mt-12 tw-flex tw-flex-col tw-gap-10 tw-text-2xl tw-text-main tw-list-none tw-pl-0">
-  <li><i class="bwi bwi-lg bwi-check-circle tw-mr-4"></i>Secure password sharing</li>
-  <li>
-    <i class="bwi bwi-lg bwi-check-circle tw-mr-4"></i>Easy, flexible SSO and SCIM integrations
+  <li class="tw-flex tw-items-center">
+    <i class="bwi bwi-lg bwi-check-circle tw-mr-4 tw-flex-none"></i
+    ><span class="tw-flex-auto"
+      >Instantly and securely share credentials with the groups and individuals who need them</span
+    >
+  </li>
+  <li class="tw-flex tw-items-center">
+    <i class="bwi bwi-lg bwi-check-circle tw-mr-4 tw-flex-none"></i
+    ><span class="tw-flex-auto"
+      >Strengthen company-wide security through centralized administrative control and
+      policies</span
+    >
+  </li>
+  <li class="tw-flex tw-items-center">
+    <i class="bwi bwi-lg bwi-check-circle tw-mr-4 tw-flex-none"></i
+    ><span class="tw-flex-auto"
+      >Streamline user onboarding and automate account provisioning with flexible SSO and SCIM
+      integrations</span
+    >
+  </li>
+  <li class="tw-flex tw-items-center">
+    <i class="bwi bwi-lg bwi-check-circle tw-mr-4 tw-flex-none"></i
+    ><span class="tw-flex-auto"
+      >Migrate to Bitwarden in minutes with comprehensive import options</span
+    >
+  </li>
+  <li class="tw-flex tw-items-center">
+    <i class="bwi bwi-lg bwi-check-circle tw-mr-4 tw-flex-none"></i
+    ><span class="tw-flex-auto"
+      >Give all Enterprise users the gift of 360º security with a free Families plan</span
+    >
  </li>
-  <li><i class="bwi bwi-lg bwi-check-circle tw-mr-4"></i>Free families plan for users</li>
-  <li><i class="bwi bwi-lg bwi-check-circle tw-mr-4"></i>Quick import and migration tools</li>
-  <li><i class="bwi bwi-lg bwi-check-circle tw-mr-4"></i>Simple, streamlined user experience</li>
-  <li><i class="bwi bwi-lg bwi-check-circle tw-mr-4"></i>Priority support and trainers</li>
 </ul>
 <div class="tw-mt-28 tw-flex tw-flex-col tw-items-center tw-gap-5">
-  <app-logo-cnet-5-stars></app-logo-cnet-5-stars>
-  <div class="tw-flex tw-items-end tw-gap-8">
-    <review-logo
-      logoClass="tw-w-8"
-      logoSrc="../../images/register-layout/g2-logo.svg"
-      logoAlt="G2 Logo"
-    ></review-logo>
-    <review-logo
-      logoClass="tw-w-28"
-      logoSrc="../../images/register-layout/capterra-logo.svg"
-      logoAlt="Capterra Logo"
-    ></review-logo>
-    <review-logo
-      logoClass="tw-w-28"
-      logoSrc="../../images/register-layout/get-app-logo.svg"
-      logoAlt="Get App Logo"
-    ></review-logo>
-  </div>
+  <app-logo-badges></app-logo-badges>
 </div>
--- a/apps/web/src/app/auth/trial-initiation/content/teams1-content.component.html
+++ b/apps/web/src/app/auth/trial-initiation/content/teams1-content.component.html
@@ -1,6 +1,5 @@
-<h1 class="tw-text-4xl !tw-text-alt2">Start your 7-day free trial for Teams</h1>
-<div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-pt-16"></div>
-<div class="tw-pt-10">
+<h1 class="tw-text-3xl !tw-text-alt2">Start your 7-day free trial for Teams</h1>
+<div class="tw-pt-20">
  <h2 class="tw-text-2xl">
    Strengthen business security with an easy-to-use password manager your team will love.
  </h2>
--- a/apps/web/src/app/auth/trial-initiation/content/teams2-content.component.html
+++ b/apps/web/src/app/auth/trial-initiation/content/teams2-content.component.html
@@ -1,17 +1,35 @@
-<h1 class="tw-text-4xl !tw-text-alt2">Start Your Free Trial Now</h1>
-<div class="tw-pt-32">
+<h1 class="tw-text-3xl !tw-text-alt2">Start your 7-day free trial for Teams</h1>
+<div class="tw-pt-20">
  <h2 class="tw-text-2xl">
-    Millions of individuals, teams, and organizations worldwide trust Bitwarden for secure password
-    storage and sharing.
+    Strengthen business security with an easy-to-use password manager your team will love.
  </h2>
 </div>
-<ul class="tw-mt-12 tw-flex tw-flex-col tw-gap-10 tw-text-2xl tw-text-main">
-  <li>Collaborate and share securely</li>
-  <li>Deploy and manage quickly and easily</li>
-  <li>Access anywhere on any device</li>
-  <li>Create your account to get started</li>
+<ul class="tw-mt-12 tw-flex tw-flex-col tw-gap-10 tw-text-2xl tw-text-main tw-list-none tw-pl-0">
+  <li class="tw-flex tw-items-center">
+    <i class="bwi bwi-lg bwi-check-circle tw-mr-4 tw-flex-none"></i
+    ><span class="tw-flex-auto"
+      >Instantly and securely share credentials with the groups and individuals who need them</span
+    >
+  </li>
+  <li class="tw-flex tw-items-center">
+    <i class="bwi bwi-lg bwi-check-circle tw-mr-4 tw-flex-none"></i
+    ><span class="tw-flex-auto"
+      >Migrate to Bitwarden in minutes with comprehensive import options</span
+    >
+  </li>
+  <li class="tw-flex tw-items-center">
+    <i class="bwi bwi-lg bwi-check-circle tw-mr-4 tw-flex-none"></i
+    ><span class="tw-flex-auto"
+      >Save time and increase productivity with autofill and instant device syncing</span
+    >
+  </li>
+  <li class="tw-flex tw-items-center">
+    <i class="bwi bwi-lg bwi-check-circle tw-mr-4 tw-flex-none"></i
+    ><span class="tw-flex-auto"
+      >Enhance security practices across your team with easy user management</span
+    >
+  </li>
 </ul>
 <div class="tw-mt-28 tw-flex tw-flex-col tw-items-center tw-gap-5">
-  <app-logo-forbes></app-logo-forbes>
-  <app-logo-us-news></app-logo-us-news>
+  <app-logo-badges></app-logo-badges>
 </div>
--- a/apps/web/src/app/billing/guards/organization-is-unmanaged.guard.ts
+++ b/apps/web/src/app/billing/guards/organization-is-unmanaged.guard.ts
@@ -0,0 +1,36 @@
+import { inject } from "@angular/core";
+import { ActivatedRouteSnapshot, CanActivateFn } from "@angular/router";
+
+import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
+import { ProviderService } from "@bitwarden/common/admin-console/abstractions/provider.service";
+import { ProviderStatusType } from "@bitwarden/common/admin-console/enums";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+
+export const organizationIsUnmanaged: CanActivateFn = async (route: ActivatedRouteSnapshot) => {
+  const configService = inject(ConfigService);
+  const organizationService = inject(OrganizationService);
+  const providerService = inject(ProviderService);
+
+  const consolidatedBillingEnabled = await configService.getFeatureFlag(
+    FeatureFlag.EnableConsolidatedBilling,
+  );
+
+  if (!consolidatedBillingEnabled) {
+    return true;
+  }
+
+  const organization = await organizationService.get(route.params.organizationId);
+
+  if (!organization.hasProvider) {
+    return true;
+  }
+
+  const provider = await providerService.get(organization.providerId);
+
+  if (!provider) {
+    return true;
+  }
+
+  return provider.providerStatus !== ProviderStatusType.Billable;
+};
--- a/apps/web/src/app/billing/organizations/organization-billing-routing.module.ts
+++ b/apps/web/src/app/billing/organizations/organization-billing-routing.module.ts
@@ -5,6 +5,7 @@ import { canAccessBillingTab } from "@bitwarden/common/admin-console/abstraction
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";

 import { OrganizationPermissionsGuard } from "../../admin-console/organizations/guards/org-permissions.guard";
+import { organizationIsUnmanaged } from "../../billing/guards/organization-is-unmanaged.guard";
 import { WebPlatformUtilsService } from "../../core/web-platform-utils.service";
 import { PaymentMethodComponent } from "../shared";

@@ -29,7 +30,7 @@ const routes: Routes = [
      {
        path: "payment-method",
        component: PaymentMethodComponent,
-        canActivate: [OrganizationPermissionsGuard],
+        canActivate: [OrganizationPermissionsGuard, organizationIsUnmanaged],
        data: {
          titleId: "paymentMethod",
          organizationPermissions: (org: Organization) => org.canEditPaymentMethods,
@@ -38,7 +39,7 @@ const routes: Routes = [
      {
        path: "history",
        component: OrgBillingHistoryViewComponent,
-        canActivate: [OrganizationPermissionsGuard],
+        canActivate: [OrganizationPermissionsGuard, organizationIsUnmanaged],
        data: {
          titleId: "billingHistory",
          organizationPermissions: (org: Organization) => org.canViewBillingHistory,
--- a/apps/web/src/images/register-layout/vault-signup-badges.png
+++ b/apps/web/src/images/register-layout/vault-signup-badges.png
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -587,6 +587,9 @@
  "loggedOut": {
    "message": "Logged out"
  },
+  "loggedOutDesc": {
+    "message": "You have been logged out of your account."
+  },
  "loginExpired": {
    "message": "Your login session has expired."
  },
@@ -1050,6 +1053,12 @@
  "copyUuid": {
    "message": "Copy UUID"
  },
+  "errorRefreshingAccessToken":{
+    "message": "Access Token Refresh Error"
+  },
+  "errorRefreshingAccessTokenDesc":{
+    "message": "No refresh token or API keys found. Please try logging out and logging back in."
+  },
  "warning": {
    "message": "Warning"
  },
@@ -5586,6 +5595,39 @@
  "rotateBillingSyncTokenTitle": {
    "message": "Rotating the billing sync token will invalidate the previous token."
  },
+  "selfHostedServer": {
+    "message": "self-hosted"
+  },
+  "customEnvironment": {
+    "message": "Custom environment"
+  },
+  "selfHostedBaseUrlHint": {
+    "message": "Specify the base URL of your on-premises hosted Bitwarden installation. Example: https://bitwarden.company.com"
+  },
+  "selfHostedCustomEnvHeader" :{
+    "message": "For advanced configuration, you can specify the base URL of each service independently."
+  },
+  "selfHostedEnvFormInvalid" :{
+    "message": "You must add either the base Server URL or at least one custom environment."
+  },
+  "apiUrl": {
+    "message": "API server URL"
+  },
+  "webVaultUrl": {
+    "message": "Web vault server URL"
+  },
+  "identityUrl": {
+    "message": "Identity server URL"
+  },
+  "notificationsUrl": {
+    "message": "Notifications server URL"
+  },
+  "iconsUrl": {
+    "message": "Icons server URL"
+  },
+  "environmentSaved": {
+    "message": "Environment URLs saved"
+  },
  "selfHostingTitle": {
    "message": "Self-hosting"
  },
@@ -8297,5 +8339,20 @@
  },
  "allLoginRequestsApproved": {
    "message": "All login requests approved"
+  },
+  "payPal": {
+    "message": "PayPal"
+  },
+  "bitcoin": {
+    "message": "Bitcoin"
+  },
+  "updatedTaxInformation": {
+    "message": "Updated tax information"
+  },
+  "unverified": {
+    "message": "Unverified"
+  },
+  "verified": {
+    "message": "Verified"
  }
 }