From db9061d120441a6f7cff5aba72e97ee65fef87a6 Mon Sep 17 00:00:00 2001
From: Jordan Aasen <166539328+jaasen-livefront@users.noreply.github.com>
Date: Thu, 11 Sep 2025 12:15:29 -0700
Subject: [PATCH] [PM-25633] - [Defect] Fix premium badge in totp (#16373)

* fixes to premium upgrade

* revert change to dialog

* handle premium upgrade prompt redirect in AC

* use new input/output api
---
 .../billing/app/accounts/premium.component.html    |  2 +-
 .../organizations/collections/vault.component.ts   |  6 ++++++
 .../premium-badge/premium-badge.component.ts       | 14 +++++++++++---
 .../login-credentials-view.component.html          |  2 +-
 .../login-credentials-view.component.ts            |  4 ++--
 5 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/apps/desktop/src/billing/app/accounts/premium.component.html b/apps/desktop/src/billing/app/accounts/premium.component.html
index d88602bed1..c8179c6e48 100644
--- a/apps/desktop/src/billing/app/accounts/premium.component.html
+++ b/apps/desktop/src/billing/app/accounts/premium.component.html
@@ -61,7 +61,7 @@
         >
           <b>{{ "premiumPurchase" | i18n }}</b>
         </button>
-        <button type="button" bitDialogClose>{{ "close" | i18n }}</button>
+        <button type="button" data-dismiss="modal">{{ "close" | i18n }}</button>
         <div class="right" *ngIf="!(isPremium$ | async)">
           <button
             #refreshBtn
diff --git a/apps/web/src/app/admin-console/organizations/collections/vault.component.ts b/apps/web/src/app/admin-console/organizations/collections/vault.component.ts
index 63b1cabff7..c3e573bc3c 100644
--- a/apps/web/src/app/admin-console/organizations/collections/vault.component.ts
+++ b/apps/web/src/app/admin-console/organizations/collections/vault.component.ts
@@ -1033,6 +1033,12 @@ export class vNextVaultComponent implements OnInit, OnDestroy {
       this.refresh();
     }
 
+    // When the dialog is closed for a premium upgrade, return early as the user
+    // should be navigated to the subscription settings elsewhere
+    if (result === VaultItemDialogResult.PremiumUpgrade) {
+      return;
+    }
+
     // Clear the query params when the dialog closes
     await this.go({ cipherId: null, itemId: null, action: null });
   }
diff --git a/libs/angular/src/billing/components/premium-badge/premium-badge.component.ts b/libs/angular/src/billing/components/premium-badge/premium-badge.component.ts
index 9aa5769d7e..d2783781c6 100644
--- a/libs/angular/src/billing/components/premium-badge/premium-badge.component.ts
+++ b/libs/angular/src/billing/components/premium-badge/premium-badge.component.ts
@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import { Component, input, output } from "@angular/core";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
@@ -8,16 +8,24 @@ import { BadgeModule } from "@bitwarden/components";
   selector: "app-premium-badge",
   standalone: true,
   template: `
-    <button type="button" *appNotPremium bitBadge variant="success" (click)="premiumRequired()">
+    <button type="button" *appNotPremium bitBadge variant="success" (click)="promptForPremium()">
       {{ "premium" | i18n }}
     </button>
   `,
   imports: [BadgeModule, JslibModule],
 })
 export class PremiumBadgeComponent {
+  /** Skip sending the premiumRequired message (default: false). */
+  skipMessaging = input(false);
+  onClick = output();
+
   constructor(private messagingService: MessagingService) {}
 
-  premiumRequired() {
+  async promptForPremium() {
+    this.onClick.emit();
+    if (this.skipMessaging()) {
+      return;
+    }
     this.messagingService.send("premiumRequired");
   }
 }
diff --git a/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html b/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html
index bc10c6f701..d31f20f771 100644
--- a/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html
+++ b/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html
@@ -124,7 +124,7 @@
       <bit-label [appTextDrag]="totpCodeCopyObj?.totpCode">
         <div class="tw-flex tw-items-center tw-gap-3">
           {{ "verificationCodeTotp" | i18n }}
-          <app-premium-badge></app-premium-badge>
+          <app-premium-badge [skipMessaging]="true" (onClick)="getPremium()"></app-premium-badge>
         </div>
       </bit-label>
       <input
diff --git a/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.ts b/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.ts
index 5938343a6a..b869faab7b 100644
--- a/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.ts
+++ b/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.ts
@@ -107,8 +107,8 @@ export class LoginCredentialsViewComponent implements OnChanges {
     }
   }
 
-  async getPremium(organizationId?: string) {
-    await this.premiumUpgradeService.promptForPremium(organizationId);
+  async getPremium() {
+    await this.premiumUpgradeService.promptForPremium(this.cipher.organizationId);
   }
 
   async pwToggleValue(passwordVisible: boolean) {