[PM-25166]Hide and Show Old Premium Banner Depending On the Feature Flag (#16684)

* Code to hide and show the premium banner

* add the right flag name

* Removed unused flag

* Remove the unused feature flag

* Resolve the flag name issue

apps/web/src/app/vault/individual-vault/vault-banners/vault-banners.component.spec.ts

@@ -8,6 +8,7 @@ import { I18nPipe } from "@bitwarden/angular/platform/pipes/i18n.pipe";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { TokenService } from "@bitwarden/common/auth/abstractions/token.service";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
@@ -29,6 +30,7 @@ describe("VaultBannersComponent", () => {
   let messageSubject: Subject<{ command: string }>;
   const premiumBanner$ = new BehaviorSubject<boolean>(false);
   const pendingAuthRequest$ = new BehaviorSubject<boolean>(false);
+  const PM24996_ImplementUpgradeFromFreeDialogFlag$ = new BehaviorSubject<boolean>(false);
   const mockUserId = Utils.newGuid() as UserId;
 
   const bannerService = mock<VaultBannersService>({
@@ -88,7 +90,14 @@ describe("VaultBannersComponent", () => {
         },
         {
           provide: ConfigService,
-          useValue: mock<ConfigService>(),
+          useValue: mock<ConfigService>({
+            getFeatureFlag$: jest.fn((flag: FeatureFlag) => {
+              if (flag === FeatureFlag.PM24996_ImplementUpgradeFromFreeDialog) {
+                return PM24996_ImplementUpgradeFromFreeDialogFlag$;
+              }
+              return new BehaviorSubject(false);
+            }),
+          }),
         },
       ],
     })
@@ -104,8 +113,14 @@ describe("VaultBannersComponent", () => {
   });
 
   describe("premiumBannerVisible$", () => {
-    it("shows premium banner", async () => {
+    beforeEach(() => {
+      // Reset feature flag to default (false) before each test
+      PM24996_ImplementUpgradeFromFreeDialogFlag$.next(false);
+    });
+
+    it("shows premium banner when shouldShowPremiumBanner is true and feature flag is off", async () => {
       premiumBanner$.next(true);
+      PM24996_ImplementUpgradeFromFreeDialogFlag$.next(false);
 
       fixture.detectChanges();
 
@@ -113,8 +128,29 @@ describe("VaultBannersComponent", () => {
       expect(banner.componentInstance.bannerType()).toBe("premium");
     });
 
-    it("dismisses premium banner", async () => {
+    it("hides premium banner when feature flag is enabled", async () => {
+      premiumBanner$.next(true);
+      PM24996_ImplementUpgradeFromFreeDialogFlag$.next(true);
+
+      fixture.detectChanges();
+
+      const banner = fixture.debugElement.query(By.directive(BannerComponent));
+      expect(banner).toBeNull();
+    });
+
+    it("dismisses premium banner when shouldShowPremiumBanner is false", async () => {
       premiumBanner$.next(false);
+      PM24996_ImplementUpgradeFromFreeDialogFlag$.next(false);
+
+      fixture.detectChanges();
+
+      const banner = fixture.debugElement.query(By.directive(BannerComponent));
+      expect(banner).toBeNull();
+    });
+
+    it("hides premium banner when both shouldShowPremiumBanner is false and feature flag is enabled", async () => {
+      premiumBanner$.next(false);
+      PM24996_ImplementUpgradeFromFreeDialogFlag$.next(true);
 
       fixture.detectChanges();
 

apps/web/src/app/vault/individual-vault/vault-banners/vault-banners.component.ts

@@ -1,10 +1,12 @@
 import { Component, Input, OnInit } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { Router } from "@angular/router";
-import { filter, firstValueFrom, map, Observable, switchMap } from "rxjs";
+import { combineLatest, filter, firstValueFrom, map, Observable, switchMap } from "rxjs";
 
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { MessageListener } from "@bitwarden/common/platform/messaging";
 import { UserId } from "@bitwarden/common/types/guid";
 import { BannerModule } from "@bitwarden/components";
@@ -39,10 +41,21 @@ export class VaultBannersComponent implements OnInit {
     private router: Router,
     private accountService: AccountService,
     private messageListener: MessageListener,
+    private configService: ConfigService,
   ) {
     this.premiumBannerVisible$ = this.activeUserId$.pipe(
       filter((userId): userId is UserId => userId != null),
-      switchMap((userId) => this.vaultBannerService.shouldShowPremiumBanner$(userId)),
+      switchMap((userId) =>
+        combineLatest([
+          this.vaultBannerService.shouldShowPremiumBanner$(userId),
+          this.configService.getFeatureFlag$(FeatureFlag.PM24996_ImplementUpgradeFromFreeDialog),
+        ]).pipe(
+          map(
+            ([shouldShowBanner, PM24996_ImplementUpgradeFromFreeDialogEnabled]) =>
+              shouldShowBanner && !PM24996_ImplementUpgradeFromFreeDialogEnabled,
+          ),
+        ),
+      ),
     );
 
     // Listen for auth request messages and show banner immediately