From 2c08af2b42ee82fcc2b9648b6ee0d7d60392248d Mon Sep 17 00:00:00 2001 From: cyprain-okeke <108260115+cyprain-okeke@users.noreply.github.com> Date: Mon, 13 Oct 2025 17:01:16 +0100 Subject: [PATCH] [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 --- .../vault-banners.component.spec.ts | 42 +++++++++++++++++-- .../vault-banners/vault-banners.component.ts | 17 +++++++- 2 files changed, 54 insertions(+), 5 deletions(-) diff --git a/apps/web/src/app/vault/individual-vault/vault-banners/vault-banners.component.spec.ts b/apps/web/src/app/vault/individual-vault/vault-banners/vault-banners.component.spec.ts index f3a859e17bf..7730ab974fb 100644 --- a/apps/web/src/app/vault/individual-vault/vault-banners/vault-banners.component.spec.ts +++ b/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(false); const pendingAuthRequest$ = new BehaviorSubject(false); + const PM24996_ImplementUpgradeFromFreeDialogFlag$ = new BehaviorSubject(false); const mockUserId = Utils.newGuid() as UserId; const bannerService = mock({ @@ -88,7 +90,14 @@ describe("VaultBannersComponent", () => { }, { provide: ConfigService, - useValue: mock(), + useValue: mock({ + 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(); diff --git a/apps/web/src/app/vault/individual-vault/vault-banners/vault-banners.component.ts b/apps/web/src/app/vault/individual-vault/vault-banners/vault-banners.component.ts index cd32eaf2858..78624b3662c 100644 --- a/apps/web/src/app/vault/individual-vault/vault-banners/vault-banners.component.ts +++ b/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