[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

apps/desktop/src/app/accounts/settings.component.html

@@ -339,16 +339,10 @@
                       formControlName="enableAutotype"
                       (change)="saveEnableAutotype()"
                     />
-                    {{ "enableAutotypeTransitionKey" | i18n }}
-                    <button
-                      type="button"
-                      bitBadge
-                      variant="success"
-                      (click)="openPremiumDialog()"
-                      *ngIf="!hasPremium"
-                    >
-                      {{ "premium" | i18n }}
-                    </button>
+                    <div class="tw-flex tw-items-center tw-gap-2">
+                      {{ "enableAutotypeTransitionKey" | i18n }}
+                      <app-premium-badge></app-premium-badge>
+                    </div>
                   </label>
                 </div>
                 <small class="help-block" *ngIf="form.value.enableAutotype">

apps/desktop/src/app/accounts/settings.component.ts

@@ -7,6 +7,7 @@ import { RouterModule } from "@angular/router";
 import { BehaviorSubject, Observable, Subject, combineLatest, firstValueFrom, of } from "rxjs";
 import { concatMap, map, pairwise, startWith, switchMap, takeUntil, timeout } from "rxjs/operators";
 
+import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { VaultTimeoutInputComponent } from "@bitwarden/auth/angular";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
@@ -39,6 +40,7 @@ import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.e
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service";
 import { UserId } from "@bitwarden/common/types/guid";
+import { PremiumUpgradePromptService } from "@bitwarden/common/vault/abstractions/premium-upgrade-prompt.service";
 import {
   CheckboxModule,
   DialogService,
@@ -51,7 +53,6 @@ import {
   SelectModule,
   ToastService,
   TypographyModule,
-  BadgeComponent,
 } from "@bitwarden/components";
 import { KeyService, BiometricStateService, BiometricsStatus } from "@bitwarden/key-management";
 import { PermitCipherDetailsPopoverComponent } from "@bitwarden/vault";
@@ -60,17 +61,22 @@ import { SetPinComponent } from "../../auth/components/set-pin.component";
 import { SshAgentPromptType } from "../../autofill/models/ssh-agent-setting";
 import { DesktopAutofillSettingsService } from "../../autofill/services/desktop-autofill-settings.service";
 import { DesktopAutotypeService } from "../../autofill/services/desktop-autotype.service";
-import { PremiumComponent } from "../../billing/app/accounts/premium.component";
 import { DesktopBiometricsService } from "../../key-management/biometrics/desktop.biometrics.service";
 import { DesktopSettingsService } from "../../platform/services/desktop-settings.service";
+import { DesktopPremiumUpgradePromptService } from "../../services/desktop-premium-upgrade-prompt.service";
 import { NativeMessagingManifestService } from "../services/native-messaging-manifest.service";
 
 @Component({
   selector: "app-settings",
   templateUrl: "settings.component.html",
   standalone: true,
+  providers: [
+    {
+      provide: PremiumUpgradePromptService,
+      useClass: DesktopPremiumUpgradePromptService,
+    },
+  ],
   imports: [
-    BadgeComponent,
     CheckboxModule,
     CommonModule,
     FormFieldModule,
@@ -87,6 +93,7 @@ import { NativeMessagingManifestService } from "../services/native-messaging-man
     TypographyModule,
     VaultTimeoutInputComponent,
     PermitCipherDetailsPopoverComponent,
+    PremiumBadgeComponent,
   ],
 })
 export class SettingsComponent implements OnInit, OnDestroy {
@@ -134,8 +141,6 @@ export class SettingsComponent implements OnInit, OnDestroy {
 
   pinEnabled$: Observable<boolean> = of(true);
 
-  hasPremium: boolean = false;
-
   form = this.formBuilder.group({
     // Security
     vaultTimeout: [null as VaultTimeout | null],
@@ -421,9 +426,7 @@ export class SettingsComponent implements OnInit, OnDestroy {
         .hasPremiumFromAnySource$(activeAccount.id)
         .pipe(takeUntil(this.destroy$))
         .subscribe((hasPremium) => {
-          this.hasPremium = hasPremium;
-
-          if (this.hasPremium) {
+          if (hasPremium) {
             this.form.controls.enableAutotype.enable();
           }
         });
@@ -892,10 +895,6 @@ export class SettingsComponent implements OnInit, OnDestroy {
     }
   }
 
-  async openPremiumDialog() {
-    await this.dialogService.open(PremiumComponent);
-  }
-
   async saveEnableAutotype() {
     await this.desktopAutotypeService.setAutotypeEnabledState(this.form.value.enableAutotype);
   }

apps/desktop/src/app/app.component.ts

@@ -295,7 +295,7 @@ export class AppComponent implements OnInit, OnDestroy {
             await this.openModal<SettingsComponent>(SettingsComponent, this.settingsRef);
             break;
           case "openPremium":
-            await this.openModal<PremiumComponent>(PremiumComponent, this.premiumRef);
+            this.dialogService.open(PremiumComponent);
             break;
           case "showFingerprintPhrase": {
             const activeUserId = await firstValueFrom(

apps/desktop/src/billing/app/accounts/premium.component.html

@@ -61,7 +61,7 @@
         >
           <b>{{ "premiumPurchase" | i18n }}</b>
         </button>
-        <button type="button" data-dismiss="modal">{{ "close" | i18n }}</button>
+        <button type="button" bitDialogClose>{{ "close" | i18n }}</button>
         <div class="right" *ngIf="!(isPremium$ | async)">
           <button
             #refreshBtn

apps/desktop/src/vault/app/vault/vault-v2.component.html

@@ -42,17 +42,10 @@
                 (click)="openAttachmentsDialog()"
                 [disabled]="formDisabled"
               >
-                <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>

apps/desktop/src/vault/app/vault/vault-v2.component.ts

@@ -13,6 +13,7 @@ import { firstValueFrom, Subject, takeUntil, switchMap, lastValueFrom, Observabl
 import { filter, map, take } from "rxjs/operators";
 
 import { CollectionService, 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 { VaultFilter } from "@bitwarden/angular/vault/vault-filter/models/vault-filter.model";
 import { AuthRequestServiceAbstraction } from "@bitwarden/auth/common";
@@ -101,6 +102,7 @@ const BroadcasterSubscriptionId = "VaultComponent";
     I18nPipe,
     ItemModule,
     ButtonModule,
+    PremiumBadgeComponent,
     NavComponent,
     VaultFilterModule,
     VaultItemsV2Component,
@@ -455,7 +457,6 @@ export class VaultV2Component<C extends CipherViewLike>
 
   async openAttachmentsDialog() {
     if (!this.userHasPremiumAccess) {
-      await this.premiumUpgradePromptService.promptForPremium();
       return;
     }
     const dialogRef = AttachmentsV2Component.open(this.dialogService, {