[PM-25879][PM-25881] - [Defect] Premium badges missing reusable component (#16461)

* clean up premium badge component

* add provider to desktop settings

* rename prop.

* add provider to send component

* fix storybook

* fix test

* move dependency to new send dropdown component

* Revert "move dependency to new send dropdown component"

This reverts commit f134526279.

* remove hasPremium

libs/angular/src/billing/components/premium-badge/premium-badge.component.ts

@@ -1,7 +1,7 @@
-import { Component, input, output } from "@angular/core";
+import { Component, input } from "@angular/core";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
+import { PremiumUpgradePromptService } from "@bitwarden/common/vault/abstractions/premium-upgrade-prompt.service";
 import { BadgeModule } from "@bitwarden/components";
 
 @Component({
@@ -15,17 +15,11 @@ import { BadgeModule } from "@bitwarden/components";
   imports: [BadgeModule, JslibModule],
 })
 export class PremiumBadgeComponent {
-  /** Skip sending the premiumRequired message (default: false). */
-  skipMessaging = input(false);
-  onClick = output();
+  organizationId = input<string>();
 
-  constructor(private messagingService: MessagingService) {}
+  constructor(private premiumUpgradePromptService: PremiumUpgradePromptService) {}
 
   async promptForPremium() {
-    this.onClick.emit();
-    if (this.skipMessaging()) {
-      return;
-    }
-    this.messagingService.send("premiumRequired");
+    await this.premiumUpgradePromptService.promptForPremium(this.organizationId());
   }
 }

libs/angular/src/billing/components/premium-badge/premium-badge.stories.ts

@@ -6,6 +6,7 @@ import { AccountService } from "@bitwarden/common/auth/abstractions/account.serv
 import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { MessageSender } from "@bitwarden/common/platform/messaging";
+import { PremiumUpgradePromptService } from "@bitwarden/common/vault/abstractions/premium-upgrade-prompt.service";
 import { BadgeModule, I18nMockService } from "@bitwarden/components";
 
 import { PremiumBadgeComponent } from "./premium-badge.component";
@@ -51,6 +52,12 @@ export default {
             hasPremiumFromAnySource$: () => of(false),
           },
         },
+        {
+          provide: PremiumUpgradePromptService,
+          useValue: {
+            promptForPremium: (orgId?: string) => {},
+          },
+        },
       ],
     }),
   ],

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 [skipMessaging]="true" (onClick)="getPremium()"></app-premium-badge>
+          <app-premium-badge [organizationId]="cipher.organizationId"></app-premium-badge>
         </div>
       </bit-label>
       <input

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

@@ -107,10 +107,6 @@ export class LoginCredentialsViewComponent implements OnChanges {
     }
   }
 
-  async getPremium() {
-    await this.premiumUpgradeService.promptForPremium(this.cipher.organizationId);
-  }
-
   async pwToggleValue(passwordVisible: boolean) {
     this.passwordRevealed = passwordVisible;