[AC-2443] Update unassigned items banner text for self-hosted (#8719)

* Update banner text for self-hosted environments

* Fix tests

* Fix web vault wording

* Actually fix web vault wording

apps/browser/src/_locales/en/messages.json

@@ -3008,5 +3008,8 @@
   },
   "unassignedItemsBanner": {
     "message": "Notice: Unassigned organization items are no longer visible in the All Vaults view and only accessible via the Admin Console. Assign these items to a collection from the Admin Console to make them visible."
+  },
+  "unassignedItemsBannerSelfHost": {
+    "message": "Notice: On May 2, 2024, unassigned organization items will no longer be visible in the All Vaults view and will only be accessible via the Admin Console. Assign these items to a collection from the Admin Console to make them visible."
   }
 }

apps/browser/src/vault/popup/components/vault/current-tab.component.html

@@ -39,12 +39,13 @@
     <app-callout
       *ngIf="
         (unassignedItemsBannerEnabled$ | async) &&
-        (unassignedItemsBannerService.showBanner$ | async)
+        (unassignedItemsBannerService.showBanner$ | async) &&
+        (unassignedItemsBannerService.bannerText$ | async)
       "
       type="info"
     >
       <p>
-        {{ "unassignedItemsBanner" | i18n }}
+        {{ unassignedItemsBannerService.bannerText$ | async | i18n }}
         <a
           href="https://bitwarden.com/help/unassigned-vault-items-moved-to-admin-console"
           bitLink

apps/web/src/app/layouts/header/web-header.component.html

@@ -2,10 +2,12 @@
   class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
   (onClose)="unassignedItemsBannerService.hideBanner()"
   *ngIf="
-    (unassignedItemsBannerEnabled$ | async) && (unassignedItemsBannerService.showBanner$ | async)
+    (unassignedItemsBannerEnabled$ | async) &&
+    (unassignedItemsBannerService.showBanner$ | async) &&
+    (unassignedItemsBannerService.bannerText$ | async)
   "
 >
-  {{ "unassignedItemsBanner" | i18n }}
+  {{ unassignedItemsBannerService.bannerText$ | async | i18n }}
   <a
     href="https://bitwarden.com/help/unassigned-vault-items-moved-to-admin-console"
     bitLink

apps/web/src/locales/en/messages.json

@@ -7902,5 +7902,8 @@
   },
   "unassignedItemsBanner": {
     "message": "Notice: Unassigned organization items are no longer visible in your All Vaults view across devices and are now only accessible via the Admin Console. Assign these items to a collection from the Admin Console to make them visible."
+  },
+  "unassignedItemsBannerSelfHost": {
+    "message": "Notice: On May 2, 2024, unassigned organization items will no longer be visible in your All Vaults view across devices and will only be accessible via the Admin Console. Assign these items to a collection from the Admin Console to make them visible."
   }
 }

libs/angular/src/services/unassigned-items-banner.service.spec.ts

@@ -1,6 +1,7 @@
 import { MockProxy, mock } from "jest-mock-extended";
-import { firstValueFrom } from "rxjs";
+import { firstValueFrom, of } from "rxjs";
 
+import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
 import { FakeStateProvider, mockAccountServiceWith } from "@bitwarden/common/spec";
 import { UserId } from "@bitwarden/common/types/guid";
 
@@ -10,13 +11,17 @@ import { SHOW_BANNER_KEY, UnassignedItemsBannerService } from "./unassigned-item
 describe("UnassignedItemsBanner", () => {
   let stateProvider: FakeStateProvider;
   let apiService: MockProxy<UnassignedItemsBannerApiService>;
+  let environmentService: MockProxy<EnvironmentService>;
 
-  const sutFactory = () => new UnassignedItemsBannerService(stateProvider, apiService);
+  const sutFactory = () =>
+    new UnassignedItemsBannerService(stateProvider, apiService, environmentService);
 
   beforeEach(() => {
     const fakeAccountService = mockAccountServiceWith("userId" as UserId);
     stateProvider = new FakeStateProvider(fakeAccountService);
     apiService = mock();
+    environmentService = mock();
+    environmentService.environment$ = of(null);
   });
 
   it("shows the banner if showBanner local state is true", async () => {

libs/angular/src/services/unassigned-items-banner.service.ts

@@ -1,6 +1,10 @@
 import { Injectable } from "@angular/core";
-import { concatMap } from "rxjs";
+import { concatMap, map } from "rxjs";
 
+import {
+  EnvironmentService,
+  Region,
+} from "@bitwarden/common/platform/abstractions/environment.service";
 import {
   StateProvider,
   UNASSIGNED_ITEMS_BANNER_DISK,
@@ -36,9 +40,18 @@ export class UnassignedItemsBannerService {
     }),
   );
 
+  bannerText$ = this.environmentService.environment$.pipe(
+    map((e) =>
+      e?.getRegion() == Region.SelfHosted
+        ? "unassignedItemsBannerSelfHost"
+        : "unassignedItemsBanner",
+    ),
+  );
+
   constructor(
     private stateProvider: StateProvider,
     private apiService: UnassignedItemsBannerApiService,
+    private environmentService: EnvironmentService,
   ) {}
 
   async hideBanner() {