[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

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

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

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

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

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

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

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>
+    <div class="tw-flex tw-items-center tw-gap-2">
       {{ "sendTypeFile" | i18n }}
-    <button
+      <app-premium-badge></app-premium-badge>
-      type="button"
+    </div>
-      slot="end"
-      *ngIf="!(canAccessPremium$ | async)"
-      bitBadge
-      variant="success"
-    >
-      {{ "premium" | i18n }}
-    </button>
   </a>
 </bit-menu>

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

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
+            <app-premium-badge></app-premium-badge>
-              *ngIf="!(canAccessAttachments$ | async)"
+          </div>
-              bitBadge
-              variant="success"
-              class="tw-ml-2"
-            >
-              {{ "premium" | i18n }}
-            </span>
-          </p>
           <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
         </button>
       </bit-item>

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 },

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

@@ -6,12 +6,13 @@ 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: [JslibModule, BadgeModule],
+  imports: [BadgeModule, JslibModule],
 })
 export class PremiumBadgeComponent {
   constructor(private messagingService: MessagingService) {}

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

@@ -17,7 +17,7 @@ class MockMessagingService implements MessageSender {
 }
 
 export default {
-  title: "Web/Premium Badge",
+  title: "Billing/Premium Badge",
   component: PremiumBadgeComponent,
   decorators: [
     moduleMetadata({

libs/tools/send/send-ui/src/new-send-dropdown/new-send-dropdown.component.html

@@ -16,10 +16,10 @@
     [routerLink]="buildRouterLink(sendType.File)"
     [queryParams]="buildQueryParams(sendType.File)"
   >
+    <div class="tw-flex tw-items-center tw-gap-2">
       <i class="bwi bwi-file" slot="start" aria-hidden="true"></i>
       {{ "sendTypeFile" | i18n }}
-    <button type="button" slot="end" *ngIf="hasNoPremium" bitBadge variant="success">
+      <app-premium-badge></app-premium-badge>
-      {{ "premium" | i18n }}
+    </div>
-    </button>
   </a>
 </bit-menu>

libs/tools/send/send-ui/src/new-send-dropdown/new-send-dropdown.component.ts

@@ -1,18 +1,19 @@
 import { CommonModule } from "@angular/common";
 import { Component, Input, OnInit } from "@angular/core";
-import { Router, RouterLink } from "@angular/router";
+import { RouterLink } from "@angular/router";
 import { firstValueFrom } 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, ButtonType, MenuModule } from "@bitwarden/components";
+import { ButtonModule, ButtonType, MenuModule } from "@bitwarden/components";
 
 @Component({
   selector: "tools-new-send-dropdown",
   templateUrl: "new-send-dropdown.component.html",
-  imports: [JslibModule, CommonModule, ButtonModule, RouterLink, MenuModule, BadgeModule],
+  imports: [JslibModule, CommonModule, ButtonModule, RouterLink, MenuModule, PremiumBadgeComponent],
 })
 export class NewSendDropdownComponent implements OnInit {
   @Input() hideIcon: boolean = false;
@@ -23,7 +24,6 @@ export class NewSendDropdownComponent implements OnInit {
   hasNoPremium = false;
 
   constructor(
-    private router: Router,
     private billingAccountProfileStateService: BillingAccountProfileStateService,
     private accountService: AccountService,
   ) {}

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

@@ -121,18 +121,11 @@
       />
     </bit-form-field>
     <bit-form-field *ngIf="cipher.login.totp">
-      <bit-label [appTextDrag]="totpCodeCopyObj?.totpCode"
+      <bit-label [appTextDrag]="totpCodeCopyObj?.totpCode">
-        >{{ "verificationCodeTotp" | i18n }}
+        <div class="tw-flex tw-items-center tw-gap-3">
-        <span
+          {{ "verificationCodeTotp" | i18n }}
-          *ngIf="!(isPremium$ | async)"
+          <app-premium-badge></app-premium-badge>
-          bitBadge
+        </div>
-          variant="success"
-          class="tw-ml-2 tw-cursor-pointer"
-          (click)="getPremium(cipher.organizationId)"
-          slot="end"
-        >
-          {{ "premium" | i18n }}
-        </span>
       </bit-label>
       <input
         id="totp"

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

@@ -14,6 +14,7 @@ import {
 } from "@angular/core";
 import { Observable, switchMap } from "rxjs";
 
+import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
@@ -56,6 +57,7 @@ type TotpCodeValues = {
     BitTotpCountdownComponent,
     ReadOnlyCipherCardComponent,
     LinkModule,
+    PremiumBadgeComponent,
   ],
 })
 export class LoginCredentialsViewComponent implements OnChanges {