[PM-11395] [Defect] View Login - TOTP premium badge does nothing when clicked (#10857)

* Add MessagingService to LoginCredentialView component.

* Add comments.

* Add WIP PremiumUpgradeService

* Simplify web PremiumUpgradeServices into one service.

* Relocate service files.

* Add browser version of PremiumUpgradePromptService.

* Cleanup debug comments.

* Run prettier.

* rework promptForPremium to take organization id and add test.

* Add test for browser

* Rework imports to fix linter errors.

* Add Shane's reworked WebVaultPremiumUpgradePromptService.

libs/common/src/vault/abstractions/premium-upgrade-prompt.service.ts

@@ -0,0 +1,7 @@
+/**
+ * This interface defines the a contract for a service that prompts the user to upgrade to premium.
+ * It ensures that PremiumUpgradePromptService contains a promptForPremium method.
+ */
+export abstract class PremiumUpgradePromptService {
+  abstract promptForPremium(organizationId?: string): Promise<void>;
+}

libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html

@@ -97,7 +97,7 @@
           bitBadge
           variant="success"
           class="tw-ml-2 tw-cursor-pointer"
-          (click)="getPremium()"
+          (click)="getPremium(cipher.organizationId)"
           slot="end"
         >
           {{ "premium" | i18n }}

libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.ts

@@ -1,6 +1,5 @@
 import { CommonModule, DatePipe } from "@angular/common";
 import { Component, inject, Input } from "@angular/core";
-import { Router } from "@angular/router";
 import { Observable, shareReplay } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
@@ -20,6 +19,7 @@ import {
   ColorPasswordModule,
 } from "@bitwarden/components";
 
+import { PremiumUpgradePromptService } from "../../../../../libs/common/src/vault/abstractions/premium-upgrade-prompt.service";
 import { BitTotpCountdownComponent } from "../../components/totp-countdown/totp-countdown.component";
 import { ReadOnlyCipherCardComponent } from "../read-only-cipher-card/read-only-cipher-card.component";
 
@@ -61,8 +61,8 @@ export class LoginCredentialsViewComponent {
 
   constructor(
     private billingAccountProfileStateService: BillingAccountProfileStateService,
-    private router: Router,
     private i18nService: I18nService,
+    private premiumUpgradeService: PremiumUpgradePromptService,
     private eventCollectionService: EventCollectionService,
   ) {}
 
@@ -75,8 +75,8 @@ export class LoginCredentialsViewComponent {
     return `${dateCreated} ${creationDate}`;
   }
 
-  async getPremium() {
-    await this.router.navigate(["/premium"]);
+  async getPremium(organizationId?: string) {
+    await this.premiumUpgradeService.promptForPremium(organizationId);
   }
 
   async pwToggleValue(passwordVisible: boolean) {