Communicate the upcoming client vault privacy changes to MSPs (#9994)

* Add a banner notification to the provider portal

* Feature flag the banner

* Move banner copy to messages.json

* Allow for dismissing the banner

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

@@ -45,7 +45,26 @@
       <app-toggle-width></app-toggle-width>
     </ng-container>
   </bit-side-nav>
-
+  <bit-banner
+    class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
+    (onClose)="(true)"
+    *ngIf="
+      (showProviderClientVaultPrivacyWarningBanner$ | async) &&
+      (providerClientVaultPrivacyBannerService.showBanner$ | async) != false
+    "
+    (onClose)="providerClientVaultPrivacyBannerService.hideBanner()"
+  >
+    {{ "providerClientVaultPrivacyNotification" | i18n }}
+    <a
+      href="https://bitwarden.com/contact/"
+      bitLink
+      linkType="contrast"
+      target="_blank"
+      rel="noreferrer"
+    >
+      {{ "contactBitwardenSupport" | i18n }} </a
+    >.
+  </bit-banner>
   <app-payment-method-warnings
     *ngIf="showPaymentMethodWarningBanners$ | async"
   ></app-payment-method-warnings>

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

@@ -10,12 +10,20 @@ import { Provider } from "@bitwarden/common/admin-console/models/domain/provider
 import { hasConsolidatedBilling } from "@bitwarden/common/billing/abstractions/provider-billing.service.abstraction";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
-import { IconModule, LayoutComponent, NavigationModule } from "@bitwarden/components";
+import {
+  BannerModule,
+  IconModule,
+  LayoutComponent,
+  LinkModule,
+  NavigationModule,
+} from "@bitwarden/components";
 import { ProviderPortalLogo } from "@bitwarden/web-vault/app/admin-console/icons/provider-portal-logo";
 import { PaymentMethodWarningsModule } from "@bitwarden/web-vault/app/billing/shared";
 import { ProductSwitcherModule } from "@bitwarden/web-vault/app/layouts/product-switcher/product-switcher.module";
 import { ToggleWidthComponent } from "@bitwarden/web-vault/app/layouts/toggle-width.component";
 
+import { ProviderClientVaultPrivacyBannerService } from "./services/provider-client-vault-privacy-banner.service";
+
 @Component({
   selector: "providers-layout",
   templateUrl: "providers-layout.component.html",
@@ -30,6 +38,8 @@ import { ToggleWidthComponent } from "@bitwarden/web-vault/app/layouts/toggle-wi
     PaymentMethodWarningsModule,
     ToggleWidthComponent,
     ProductSwitcherModule,
+    BannerModule,
+    LinkModule,
   ],
 })
 export class ProvidersLayoutComponent implements OnInit, OnDestroy {
@@ -45,10 +55,15 @@ export class ProvidersLayoutComponent implements OnInit, OnDestroy {
     FeatureFlag.ShowPaymentMethodWarningBanners,
   );
 
+  protected showProviderClientVaultPrivacyWarningBanner$ = this.configService.getFeatureFlag$(
+    FeatureFlag.ProviderClientVaultPrivacyBanner,
+  );
+
   constructor(
     private route: ActivatedRoute,
     private providerService: ProviderService,
     private configService: ConfigService,
+    protected providerClientVaultPrivacyBannerService: ProviderClientVaultPrivacyBannerService,
   ) {}
 
   ngOnInit() {

bitwarden_license/bit-web/src/app/admin-console/providers/services/provider-client-vault-privacy-banner.service.ts

@@ -0,0 +1,31 @@
+import { Injectable } from "@angular/core";
+
+import {
+  StateProvider,
+  AC_BANNERS_DISMISSED_DISK,
+  UserKeyDefinition,
+} from "@bitwarden/common/platform/state";
+
+export const SHOW_BANNER_KEY = new UserKeyDefinition<boolean>(
+  AC_BANNERS_DISMISSED_DISK,
+  "showProviderClientVaultPrivacyBanner",
+  {
+    deserializer: (b) => b,
+    clearOn: [],
+  },
+);
+
+/** Displays a banner warning provider users that client organization vaults
+ * will soon become inaccessible directly. */
+@Injectable({ providedIn: "root" })
+export class ProviderClientVaultPrivacyBannerService {
+  private _showBanner = this.stateProvider.getActive(SHOW_BANNER_KEY);
+
+  showBanner$ = this._showBanner.state$;
+
+  constructor(private stateProvider: StateProvider) {}
+
+  async hideBanner() {
+    await this._showBanner.update(() => false);
+  }
+}