[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
2025-12-15 07:43:35 +00:00 · 2025-09-09 13:39:24 -07:00
parent 4907820383
commit 30af3d7035
17 changed files with 41 additions and 56 deletions
--- a/apps/web/src/app/admin-console/organizations/settings/organization-settings.module.ts
+++ b/apps/web/src/app/admin-console/organizations/settings/organization-settings.module.ts
@@ -1,12 +1,12 @@
 import { NgModule } from "@angular/core";

+import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
 import { ItemModule } from "@bitwarden/components";

 import { DangerZoneComponent } from "../../../auth/settings/account/danger-zone.component";
 import { HeaderModule } from "../../../layouts/header/header.module";
 import { SharedModule } from "../../../shared";
 import { AccountFingerprintComponent } from "../../../shared/components/account-fingerprint/account-fingerprint.component";
-import { PremiumBadgeComponent } from "../../../vault/components/premium-badge.component";
 import { PoliciesModule } from "../../organizations/policies";

 import { AccountComponent } from "./account.component";
--- a/apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.ts
+++ b/apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.ts
@@ -3,6 +3,7 @@
 import { Component, Inject, OnInit } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";

+import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
@@ -15,7 +16,6 @@ import {
 } from "@bitwarden/components";

 import { SharedModule } from "../../../shared/shared.module";
-import { PremiumBadgeComponent } from "../../../vault/components/premium-badge.component";
 import { EmergencyAccessService } from "../../emergency-access";
 import { EmergencyAccessType } from "../../emergency-access/enums/emergency-access-type";

--- a/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.ts
+++ b/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.ts
@@ -3,6 +3,7 @@
 import { Component, OnInit } from "@angular/core";
 import { lastValueFrom, Observable, firstValueFrom, switchMap } from "rxjs";

+import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
 import { UserNamePipe } from "@bitwarden/angular/pipes/user-name.pipe";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
@@ -20,7 +21,6 @@ import { DialogService, ToastService } from "@bitwarden/components";

 import { HeaderModule } from "../../../layouts/header/header.module";
 import { SharedModule } from "../../../shared/shared.module";
-import { PremiumBadgeComponent } from "../../../vault/components/premium-badge.component";
 import { EmergencyAccessService } from "../../emergency-access";
 import { EmergencyAccessStatusType } from "../../emergency-access/enums/emergency-access-status-type";
 import { EmergencyAccessType } from "../../emergency-access/enums/emergency-access-type";
--- a/apps/web/src/app/auth/settings/two-factor/two-factor-setup.component.ts
+++ b/apps/web/src/app/auth/settings/two-factor/two-factor-setup.component.ts
@@ -12,6 +12,7 @@ import {
  switchMap,
 } from "rxjs";

+import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { PolicyType } from "@bitwarden/common/admin-console/enums";
@@ -35,7 +36,6 @@ import { DialogRef, DialogService, ItemModule } from "@bitwarden/components";

 import { HeaderModule } from "../../../layouts/header/header.module";
 import { SharedModule } from "../../../shared/shared.module";
-import { PremiumBadgeComponent } from "../../../vault/components/premium-badge.component";

 import { TwoFactorRecoveryComponent } from "./two-factor-recovery.component";
 import { TwoFactorSetupAuthenticatorComponent } from "./two-factor-setup-authenticator.component";
--- a/apps/web/src/app/dirt/reports/shared/report-card/report-card.stories.ts
+++ b/apps/web/src/app/dirt/reports/shared/report-card/report-card.stories.ts
@@ -2,11 +2,11 @@ import { importProvidersFrom } from "@angular/core";
 import { RouterTestingModule } from "@angular/router/testing";
 import { Meta, StoryObj, applicationConfig, moduleMetadata } from "@storybook/angular";

+import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { BadgeModule, IconModule } from "@bitwarden/components";

 import { PreloadedEnglishI18nModule } from "../../../../core/tests";
-import { PremiumBadgeComponent } from "../../../../vault/components/premium-badge.component";
 import { ReportVariant } from "../models/report-variant";

 import { ReportCardComponent } from "./report-card.component";
--- a/apps/web/src/app/dirt/reports/shared/report-list/report-list.stories.ts
+++ b/apps/web/src/app/dirt/reports/shared/report-list/report-list.stories.ts
@@ -2,11 +2,11 @@ import { importProvidersFrom } from "@angular/core";
 import { RouterTestingModule } from "@angular/router/testing";
 import { Meta, StoryObj, applicationConfig, moduleMetadata } from "@storybook/angular";

+import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { BadgeModule, IconModule } from "@bitwarden/components";

 import { PreloadedEnglishI18nModule } from "../../../../core/tests";
-import { PremiumBadgeComponent } from "../../../../vault/components/premium-badge.component";
 import { reports } from "../../reports";
 import { ReportVariant } from "../models/report-variant";
 import { ReportCardComponent } from "../report-card/report-card.component";
--- a/apps/web/src/app/tools/send/new-send/new-send-dropdown.component.html
+++ b/apps/web/src/app/tools/send/new-send/new-send-dropdown.component.html
@@ -9,15 +9,9 @@
  </a>
  <a bitMenuItem (click)="createSend(sendType.File)">
    <i class="bwi bwi-file" slot="start" aria-hidden="true"></i>
-    {{ "sendTypeFile" | i18n }}
-    <button
-      type="button"
-      slot="end"
-      *ngIf="!(canAccessPremium$ | async)"
-      bitBadge
-      variant="success"
-    >
-      {{ "premium" | i18n }}
-    </button>
+    <div class="tw-flex tw-items-center tw-gap-2">
+      {{ "sendTypeFile" | i18n }}
+      <app-premium-badge></app-premium-badge>
+    </div>
  </a>
 </bit-menu>
--- a/apps/web/src/app/tools/send/new-send/new-send-dropdown.component.ts
+++ b/apps/web/src/app/tools/send/new-send/new-send-dropdown.component.ts
@@ -1,19 +1,19 @@
 import { CommonModule } from "@angular/common";
 import { Component, Input } from "@angular/core";
-import { Router } from "@angular/router";
 import { firstValueFrom, Observable, of, switchMap } from "rxjs";

+import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions";
 import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
-import { BadgeModule, ButtonModule, DialogService, MenuModule } from "@bitwarden/components";
+import { ButtonModule, DialogService, MenuModule } from "@bitwarden/components";
 import { DefaultSendFormConfigService, SendAddEditDialogComponent } from "@bitwarden/send-ui";

@Component({
  selector: "tools-new-send-dropdown",
  templateUrl: "new-send-dropdown.component.html",
-  imports: [JslibModule, CommonModule, ButtonModule, MenuModule, BadgeModule],
+  imports: [JslibModule, CommonModule, ButtonModule, MenuModule, PremiumBadgeComponent],
  providers: [DefaultSendFormConfigService],
 })
 /**
@@ -30,7 +30,6 @@ export class NewSendDropdownComponent {
  protected canAccessPremium$: Observable<boolean>;

  constructor(
-    private router: Router,
    private billingAccountProfileStateService: BillingAccountProfileStateService,
    private accountService: AccountService,
    private dialogService: DialogService,
@@ -47,16 +46,16 @@ export class NewSendDropdownComponent {

  /**
   * Opens the SendAddEditComponent for a new Send with the provided type.
-   * If has user does not have premium access and the type is File, the user will be redirected to the premium settings page.
+   * If has user does not have premium access and the type is File do nothing the PremiumBadgeComponent will handle the flow.
   * @param type The type of Send to create.
   */
  async createSend(type: SendType) {
    if (!(await firstValueFrom(this.canAccessPremium$)) && type === SendType.File) {
-      return await this.router.navigate(["settings/subscription/premium"]);
+      return;
    }

    const formConfig = await this.addEditFormConfigService.buildConfig("add", undefined, type);

-    await SendAddEditDialogComponent.open(this.dialogService, { formConfig });
+    SendAddEditDialogComponent.open(this.dialogService, { formConfig });
  }
 }
--- a/apps/web/src/app/vault/components/premium-badge.component.ts
+++ b/apps/web/src/app/vault/components/premium-badge.component.ts
@@ -1,22 +0,0 @@
-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",
-  template: `
-    <button type="button" *appNotPremium bitBadge variant="success" (click)="premiumRequired()">
-      {{ "premium" | i18n }}
-    </button>
-  `,
-  imports: [JslibModule, BadgeModule],
-})
-export class PremiumBadgeComponent {
-  constructor(private messagingService: MessagingService) {}
-
-  premiumRequired() {
-    this.messagingService.send("premiumRequired");
-  }
-}
--- a/apps/web/src/app/vault/components/premium-badge.stories.ts
+++ b/apps/web/src/app/vault/components/premium-badge.stories.ts
@@ -1,61 +0,0 @@
-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: "Web/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 = {};
--- a/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.html
+++ b/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.html
@@ -25,17 +25,10 @@
          type="button"
          (click)="openAttachmentsDialog()"
        >
-          <p class="tw-m-0">
+          <div class="tw-flex tw-items-center tw-gap-2">
            {{ "attachments" | i18n }}
-            <span
-              *ngIf="!(canAccessAttachments$ | async)"
-              bitBadge
-              variant="success"
-              class="tw-ml-2"
-            >
-              {{ "premium" | i18n }}
-            </span>
-          </p>
+            <app-premium-badge></app-premium-badge>
+          </div>
          <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
        </button>
      </bit-item>
--- a/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts
+++ b/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts
@@ -7,6 +7,7 @@ import { firstValueFrom, Subject, switchMap } from "rxjs";
 import { map } from "rxjs/operators";

 import { CollectionView } from "@bitwarden/admin-console/common";
+import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
 import { VaultViewPasswordHistoryService } from "@bitwarden/angular/services/view-password-history.service";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
@@ -131,6 +132,7 @@ export type VaultItemDialogResult = UnionOfValues<typeof VaultItemDialogResult>;
    CipherFormModule,
    AsyncActionsModule,
    ItemModule,
+    PremiumBadgeComponent,
  ],
  providers: [
    { provide: PremiumUpgradePromptService, useClass: WebVaultPremiumUpgradePromptService },