[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

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

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 });
   }

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");
   }
 }

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

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) {