[PM-23713] premium badge interaction

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

@@ -1520,12 +1520,6 @@
   "enableAutoBiometricsPrompt": {
     "message": "Ask for biometrics on launch"
   },
-  "premiumRequired": {
-    "message": "Premium required"
-  },
-  "premiumRequiredDesc": {
-    "message": "A Premium membership is required to use this feature."
-  },
   "authenticationTimeout": {
     "message": "Authentication timeout"
   },
@@ -5766,6 +5760,30 @@
   "atRiskLoginsSecured": {
     "message": "Great job securing your at-risk logins!"
   },
+  "upgradeNow": {
+    "message": "Upgrade now"
+  },
+  "builtInAuthenticator": {
+    "message": "Built-in authenticator"
+  },
+  "secureFileStorage": {
+    "message": "Secure file storage"
+  },
+  "emergencyAccess": {
+    "message": "Emergency access"
+  },
+  "breachMonitoring": {
+    "message": "Breach monitoring"
+  },
+  "andMoreFeatures": {
+    "message": "And more!"
+  },
+  "planDescPremium": {
+    "message": "Complete online security"
+  },
+  "upgradeToPremium": {
+    "message": "Upgrade to Premium"
+  },
   "settingDisabledByPolicy": {
     "message": "This setting is disabled by your organization's policy.",
     "description": "This hint text is displayed when a user setting is disabled due to an organization policy."

apps/browser/src/vault/popup/components/vault-v2/attachments/open-attachments/open-attachments.component.spec.ts

@@ -155,11 +155,12 @@ describe("OpenAttachmentsComponent", () => {
   });
 
   it("routes the user to the premium page when they cannot access premium features", async () => {
+    const premiumUpgradeService = TestBed.inject(PremiumUpgradePromptService);
     hasPremiumFromAnySource$.next(false);
 
     await component.openAttachments();
 
-    expect(router.navigate).toHaveBeenCalledWith(["/premium"]);
+    expect(premiumUpgradeService.promptForPremium).toHaveBeenCalled();
   });
 
   it("disables attachments when the edit form is disabled", () => {

apps/browser/src/vault/popup/components/vault-v2/attachments/open-attachments/open-attachments.component.ts

@@ -19,6 +19,7 @@ import { ProductTierType } from "@bitwarden/common/billing/enums";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { CipherId } from "@bitwarden/common/types/guid";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
+import { PremiumUpgradePromptService } from "@bitwarden/common/vault/abstractions/premium-upgrade-prompt.service";
 import { BadgeModule, ItemModule, ToastService, TypographyModule } from "@bitwarden/components";
 import { CipherFormContainer } from "@bitwarden/vault";
 
@@ -67,6 +68,7 @@ export class OpenAttachmentsComponent implements OnInit {
     private filePopoutUtilsService: FilePopoutUtilsService,
     private accountService: AccountService,
     private cipherFormContainer: CipherFormContainer,
+    private premiumUpgradeService: PremiumUpgradePromptService,
   ) {
     this.accountService.activeAccount$
       .pipe(
@@ -115,7 +117,7 @@ export class OpenAttachmentsComponent implements OnInit {
   /** Routes the user to the attachments screen, if available */
   async openAttachments() {
     if (!this.canAccessAttachments) {
-      await this.router.navigate(["/premium"]);
+      await this.premiumUpgradeService.promptForPremium();
       return;
     }
 

apps/browser/src/vault/popup/services/browser-premium-upgrade-prompt.service.spec.ts

@@ -2,25 +2,69 @@ import { TestBed } from "@angular/core/testing";
 import { Router } from "@angular/router";
 import { mock, MockProxy } from "jest-mock-extended";
 
+import { PremiumUpgradeDialogComponent } from "@bitwarden/angular/billing/components";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+import { DialogService } from "@bitwarden/components";
+
 import { BrowserPremiumUpgradePromptService } from "./browser-premium-upgrade-prompt.service";
 
 describe("BrowserPremiumUpgradePromptService", () => {
   let service: BrowserPremiumUpgradePromptService;
   let router: MockProxy<Router>;
+  let configService: MockProxy<ConfigService>;
+  let dialogService: MockProxy<DialogService>;
 
   beforeEach(async () => {
     router = mock<Router>();
+    configService = mock<ConfigService>();
+    dialogService = mock<DialogService>();
+
     await TestBed.configureTestingModule({
-      providers: [BrowserPremiumUpgradePromptService, { provide: Router, useValue: router }],
+      providers: [
+        BrowserPremiumUpgradePromptService,
+        { provide: Router, useValue: router },
+        { provide: ConfigService, useValue: configService },
+        { provide: DialogService, useValue: dialogService },
+      ],
     }).compileComponents();
 
     service = TestBed.inject(BrowserPremiumUpgradePromptService);
   });
 
   describe("promptForPremium", () => {
-    it("navigates to the premium update screen", async () => {
+    let openSpy: jest.SpyInstance;
+
+    beforeEach(() => {
+      openSpy = jest.spyOn(PremiumUpgradeDialogComponent, "open").mockImplementation();
+    });
+
+    afterEach(() => {
+      openSpy.mockRestore();
+    });
+
+    it("opens the new premium upgrade dialog when feature flag is enabled", async () => {
+      configService.getFeatureFlag.mockResolvedValue(true);
+
       await service.promptForPremium();
+
+      expect(configService.getFeatureFlag).toHaveBeenCalledWith(
+        FeatureFlag.PM23713_PremiumBadgeOpensNewPremiumUpgradeDialog,
+      );
+      expect(openSpy).toHaveBeenCalledWith(dialogService);
+      expect(router.navigate).not.toHaveBeenCalled();
+    });
+
+    it("navigates to the premium update screen when feature flag is disabled", async () => {
+      configService.getFeatureFlag.mockResolvedValue(false);
+
+      await service.promptForPremium();
+
+      expect(configService.getFeatureFlag).toHaveBeenCalledWith(
+        FeatureFlag.PM23713_PremiumBadgeOpensNewPremiumUpgradeDialog,
+      );
       expect(router.navigate).toHaveBeenCalledWith(["/premium"]);
+      expect(openSpy).not.toHaveBeenCalled();
     });
   });
 });

apps/browser/src/vault/popup/services/browser-premium-upgrade-prompt.service.ts

@@ -1,18 +1,32 @@
 import { inject } from "@angular/core";
 import { Router } from "@angular/router";
 
+import { PremiumUpgradeDialogComponent } from "@bitwarden/angular/billing/components";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { PremiumUpgradePromptService } from "@bitwarden/common/vault/abstractions/premium-upgrade-prompt.service";
+import { DialogService } from "@bitwarden/components";
 
 /**
  * This class handles the premium upgrade process for the browser extension.
  */
 export class BrowserPremiumUpgradePromptService implements PremiumUpgradePromptService {
   private router = inject(Router);
+  private configService = inject(ConfigService);
+  private dialogService = inject(DialogService);
 
   async promptForPremium() {
-    /**
-     * Navigate to the premium update screen.
-     */
-    await this.router.navigate(["/premium"]);
+    const showNewDialog = await this.configService.getFeatureFlag(
+      FeatureFlag.PM23713_PremiumBadgeOpensNewPremiumUpgradeDialog,
+    );
+
+    if (showNewDialog) {
+      PremiumUpgradeDialogComponent.open(this.dialogService);
+    } else {
+      /**
+       * Navigate to the premium update screen.
+       */
+      await this.router.navigate(["/premium"]);
+    }
   }
 }

apps/browser/tailwind.config.js

@@ -10,6 +10,7 @@ config.content = [
   "../../libs/vault/src/**/*.{html,ts}",
   "../../libs/angular/src/**/*.{html,ts}",
   "../../libs/vault/src/**/*.{html,ts}",
+  "../../libs/pricing/src/**/*.{html,ts}",
 ];
 
 module.exports = config;

apps/desktop/src/app/tools/send/add-edit.component.ts

@@ -19,14 +19,23 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { SendApiService } from "@bitwarden/common/tools/send/services/send-api.service.abstraction";
 import { SendService } from "@bitwarden/common/tools/send/services/send.service.abstraction";
+import { PremiumUpgradePromptService } from "@bitwarden/common/vault/abstractions/premium-upgrade-prompt.service";
 import { CalloutModule, DialogService, ToastService } from "@bitwarden/components";
 
+import { DesktopPremiumUpgradePromptService } from "../../../services/desktop-premium-upgrade-prompt.service";
+
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
   selector: "app-send-add-edit",
   templateUrl: "add-edit.component.html",
   imports: [CommonModule, JslibModule, ReactiveFormsModule, CalloutModule],
+  providers: [
+    {
+      provide: PremiumUpgradePromptService,
+      useClass: DesktopPremiumUpgradePromptService,
+    },
+  ],
 })
 export class AddEditComponent extends BaseAddEditComponent {
   constructor(
@@ -45,6 +54,7 @@ export class AddEditComponent extends BaseAddEditComponent {
     billingAccountProfileStateService: BillingAccountProfileStateService,
     accountService: AccountService,
     toastService: ToastService,
+    premiumUpgradePromptService: PremiumUpgradePromptService,
   ) {
     super(
       i18nService,
@@ -62,6 +72,7 @@ export class AddEditComponent extends BaseAddEditComponent {
       billingAccountProfileStateService,
       accountService,
       toastService,
+      premiumUpgradePromptService,
     );
   }
 

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

@@ -4187,5 +4187,29 @@
   },
   "cardNumberLabel": {
     "message": "Card number"
+  },
+  "upgradeNow": {
+    "message": "Upgrade now"
+  },
+  "builtInAuthenticator": {
+    "message": "Built-in authenticator"
+  },
+  "secureFileStorage": {
+    "message": "Secure file storage"
+  },
+  "emergencyAccess": {
+    "message": "Emergency access"
+  },
+  "breachMonitoring": {
+    "message": "Breach monitoring"
+  },
+  "andMoreFeatures": {
+    "message": "And more!"
+  },
+  "planDescPremium": {
+    "message": "Complete online security"
+  },
+  "upgradeToPremium": {
+    "message": "Upgrade to Premium"
   }
 }

apps/desktop/src/services/desktop-premium-upgrade-prompt.service.spec.ts

@@ -1,30 +1,70 @@
 import { TestBed } from "@angular/core/testing";
 import { mock, MockProxy } from "jest-mock-extended";
 
+import { PremiumUpgradeDialogComponent } from "@bitwarden/angular/billing/components";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
+import { DialogService } from "@bitwarden/components";
 
 import { DesktopPremiumUpgradePromptService } from "./desktop-premium-upgrade-prompt.service";
 
 describe("DesktopPremiumUpgradePromptService", () => {
   let service: DesktopPremiumUpgradePromptService;
   let messager: MockProxy<MessagingService>;
+  let configService: MockProxy<ConfigService>;
+  let dialogService: MockProxy<DialogService>;
 
   beforeEach(async () => {
     messager = mock<MessagingService>();
+    configService = mock<ConfigService>();
+    dialogService = mock<DialogService>();
+
     await TestBed.configureTestingModule({
       providers: [
         DesktopPremiumUpgradePromptService,
         { provide: MessagingService, useValue: messager },
+        { provide: ConfigService, useValue: configService },
+        { provide: DialogService, useValue: dialogService },
       ],
     }).compileComponents();
 
     service = TestBed.inject(DesktopPremiumUpgradePromptService);
   });
 
   describe("promptForPremium", () => {
-    it("navigates to the premium update screen", async () => {
+    let openSpy: jest.SpyInstance;
+
+    beforeEach(() => {
+      openSpy = jest.spyOn(PremiumUpgradeDialogComponent, "open").mockImplementation();
+    });
+
+    afterEach(() => {
+      openSpy.mockRestore();
+    });
+
+    it("opens the new premium upgrade dialog when feature flag is enabled", async () => {
+      configService.getFeatureFlag.mockResolvedValue(true);
+
       await service.promptForPremium();
+
+      expect(configService.getFeatureFlag).toHaveBeenCalledWith(
+        FeatureFlag.PM23713_PremiumBadgeOpensNewPremiumUpgradeDialog,
+      );
+      expect(openSpy).toHaveBeenCalledWith(dialogService);
+      expect(messager.send).not.toHaveBeenCalled();
+    });
+
+    it("sends openPremium message when feature flag is disabled", async () => {
+      configService.getFeatureFlag.mockResolvedValue(false);
+
+      await service.promptForPremium();
+
+      expect(configService.getFeatureFlag).toHaveBeenCalledWith(
+        FeatureFlag.PM23713_PremiumBadgeOpensNewPremiumUpgradeDialog,
+      );
       expect(messager.send).toHaveBeenCalledWith("openPremium");
+      expect(openSpy).not.toHaveBeenCalled();
     });
   });
 });

apps/desktop/src/services/desktop-premium-upgrade-prompt.service.ts

@@ -1,15 +1,29 @@
 import { inject } from "@angular/core";
 
+import { PremiumUpgradeDialogComponent } from "@bitwarden/angular/billing/components";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { PremiumUpgradePromptService } from "@bitwarden/common/vault/abstractions/premium-upgrade-prompt.service";
+import { DialogService } from "@bitwarden/components";
 
 /**
  * This class handles the premium upgrade process for the desktop.
  */
 export class DesktopPremiumUpgradePromptService implements PremiumUpgradePromptService {
   private messagingService = inject(MessagingService);
+  private configService = inject(ConfigService);
+  private dialogService = inject(DialogService);
 
   async promptForPremium() {
-    this.messagingService.send("openPremium");
+    const showNewDialog = await this.configService.getFeatureFlag(
+      FeatureFlag.PM23713_PremiumBadgeOpensNewPremiumUpgradeDialog,
+    );
+
+    if (showNewDialog) {
+      PremiumUpgradeDialogComponent.open(this.dialogService);
+    } else {
+      this.messagingService.send("openPremium");
+    }
   }
 }

apps/desktop/tailwind.config.js

@@ -9,6 +9,7 @@ config.content = [
   "../../libs/key-management-ui/src/**/*.{html,ts}",
   "../../libs/angular/src/**/*.{html,ts}",
   "../../libs/vault/src/**/*.{html,ts,mdx}",
+  "../../libs/pricing/src/**/*.{html,ts}",
 ];
 
 module.exports = config;

apps/web/src/app/app.component.ts

@@ -147,18 +147,6 @@ export class AppComponent implements OnDestroy, OnInit {
             }
             break;
           }
-          case "premiumRequired": {
-            const premiumConfirmed = await this.dialogService.openSimpleDialog({
-              title: { key: "premiumRequired" },
-              content: { key: "premiumRequiredDesc" },
-              acceptButtonText: { key: "upgrade" },
-              type: "success",
-            });
-            if (premiumConfirmed) {
-              await this.router.navigate(["settings/subscription/premium"]);
-            }
-            break;
-          }
           case "emailVerificationRequired": {
             const emailVerificationConfirmed = await this.dialogService.openSimpleDialog({
               title: { key: "emailVerificationRequired" },