[PM-24985][PM-24986][PM-25211][PM-24987] - [Vault] Migrate components to use Premium badge component (#16227)

* migrate all components to use PremiumBadgeComponent

* move badge component to vault

* move premium badge to vault

* move premium badge to billing

* fix import

* use premium badge in tools new send dropdown

* remove badge module import

* remove module

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

@@ -0,0 +1 @@
+export * from "./premium-badge.component";

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

@@ -0,0 +1,23 @@
+import { Component } from "@angular/core";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
+import { BadgeModule } from "@bitwarden/components";
+
+@Component({
+  selector: "app-premium-badge",
+  standalone: true,
+  template: `
+    <button type="button" *appNotPremium bitBadge variant="success" (click)="premiumRequired()">
+      {{ "premium" | i18n }}
+    </button>
+  `,
+  imports: [BadgeModule, JslibModule],
+})
+export class PremiumBadgeComponent {
+  constructor(private messagingService: MessagingService) {}
+
+  premiumRequired() {
+    this.messagingService.send("premiumRequired");
+  }
+}

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

@@ -0,0 +1,61 @@
+import { Meta, moduleMetadata, StoryObj } from "@storybook/angular";
+import { of } from "rxjs";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+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 { BadgeModule, I18nMockService } from "@bitwarden/components";
+
+import { PremiumBadgeComponent } from "./premium-badge.component";
+
+class MockMessagingService implements MessageSender {
+  send = () => {
+    alert("Clicked on badge");
+  };
+}
+
+export default {
+  title: "Billing/Premium Badge",
+  component: PremiumBadgeComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [JslibModule, BadgeModule],
+      providers: [
+        {
+          provide: AccountService,
+          useValue: {
+            activeAccount$: of({
+              id: "123",
+            }),
+          },
+        },
+        {
+          provide: I18nService,
+          useFactory: () => {
+            return new I18nMockService({
+              premium: "Premium",
+            });
+          },
+        },
+        {
+          provide: MessageSender,
+          useFactory: () => {
+            return new MockMessagingService();
+          },
+        },
+        {
+          provide: BillingAccountProfileStateService,
+          useValue: {
+            hasPremiumFromAnySource$: () => of(false),
+          },
+        },
+      ],
+    }),
+  ],
+} as Meta;
+
+type Story = StoryObj<PremiumBadgeComponent>;
+
+export const Primary: Story = {};