clean up premium badge component

apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.ts

@@ -17,6 +17,7 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { CipherId, CollectionId, OrganizationId, UserId } from "@bitwarden/common/types/guid";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
+import { PremiumUpgradePromptService } from "@bitwarden/common/vault/abstractions/premium-upgrade-prompt.service";
 import { CipherType, toCipherType } from "@bitwarden/common/vault/enums";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { CipherAuthorizationService } from "@bitwarden/common/vault/services/cipher-authorization.service";
@@ -50,6 +51,7 @@ import { PopupPageComponent } from "../../../../../platform/popup/layout/popup-p
 import { PopupRouterCacheService } from "../../../../../platform/popup/view-cache/popup-router-cache.service";
 import { PopupCloseWarningService } from "../../../../../popup/services/popup-close-warning.service";
 import { BrowserCipherFormGenerationService } from "../../../services/browser-cipher-form-generation.service";
+import { BrowserPremiumUpgradePromptService } from "../../../services/browser-premium-upgrade-prompt.service";
 import { BrowserTotpCaptureService } from "../../../services/browser-totp-capture.service";
 import {
   fido2PopoutSessionData$,
@@ -136,6 +138,7 @@ export type AddEditQueryParams = Partial<Record<keyof QueryParams, string>>;
     { provide: CipherFormConfigService, useClass: DefaultCipherFormConfigService },
     { provide: TotpCaptureService, useClass: BrowserTotpCaptureService },
     { provide: CipherFormGenerationService, useClass: BrowserCipherFormGenerationService },
+    { provide: PremiumUpgradePromptService, useClass: BrowserPremiumUpgradePromptService },
   ],
   imports: [
     CommonModule,

apps/browser/src/vault/popup/components/vault-v2/attachments/open-attachments/open-attachments.component.html

@@ -5,10 +5,10 @@
     (click)="openAttachments()"
     [disabled]="parentFormDisabled"
   >
-    {{ "attachments" | i18n }}
-    <span *ngIf="!canAccessAttachments" bitBadge variant="success" slot="default-trailing">
-      {{ "premium" | i18n }}
-    </span>
+    <div class="tw-flex tw-items-center tw-gap-2">
+      {{ "attachments" | i18n }}
+      <app-premium-badge></app-premium-badge>
+    </div>
     <ng-container slot="end">
       <i class="bwi bwi-popout" aria-hidden="true" *ngIf="openAttachmentsInPopout"></i>
       <i class="bwi bwi-angle-right" aria-hidden="true" *ngIf="!openAttachmentsInPopout"></i>

apps/browser/src/vault/popup/components/vault-v2/attachments/open-attachments/open-attachments.component.ts

@@ -6,6 +6,7 @@ import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { Router } from "@angular/router";
 import { firstValueFrom, map, switchMap } from "rxjs";
 
+import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import {
   getOrganizationById,
@@ -27,7 +28,14 @@ import { FilePopoutUtilsService } from "../../../../../../tools/popup/services/f
 @Component({
   selector: "app-open-attachments",
   templateUrl: "./open-attachments.component.html",
-  imports: [BadgeModule, CommonModule, ItemModule, JslibModule, TypographyModule],
+  imports: [
+    BadgeModule,
+    CommonModule,
+    ItemModule,
+    JslibModule,
+    TypographyModule,
+    PremiumBadgeComponent,
+  ],
 })
 export class OpenAttachmentsComponent implements OnInit {
   /** Cipher `id` */

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";
@@ -51,7 +52,6 @@ import {
   SelectModule,
   ToastService,
   TypographyModule,
-  BadgeComponent,
 } from "@bitwarden/components";
 import { KeyService, BiometricStateService, BiometricsStatus } from "@bitwarden/key-management";
 import { PermitCipherDetailsPopoverComponent } from "@bitwarden/vault";
@@ -60,7 +60,6 @@ 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 { NativeMessagingManifestService } from "../services/native-messaging-manifest.service";
@@ -70,7 +69,6 @@ import { NativeMessagingManifestService } from "../services/native-messaging-man
   templateUrl: "settings.component.html",
   standalone: true,
   imports: [
-    BadgeComponent,
     CheckboxModule,
     CommonModule,
     FormFieldModule,
@@ -87,6 +85,7 @@ import { NativeMessagingManifestService } from "../services/native-messaging-man
     TypographyModule,
     VaultTimeoutInputComponent,
     PermitCipherDetailsPopoverComponent,
+    PremiumBadgeComponent,
   ],
 })
 export class SettingsComponent implements OnInit, OnDestroy {
@@ -103,7 +102,7 @@ export class SettingsComponent implements OnInit, OnDestroy {
   showAlwaysShowDock = false;
   requireEnableTray = false;
   showDuckDuckGoIntegrationOption = false;
-  showEnableAutotype = false;
+  showEnableAutotype = true;
   showOpenAtLoginOption = false;
   isWindows: boolean;
   isLinux: boolean;
@@ -892,10 +891,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, {

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();
+  orgId = 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.orgId());
   }
 }

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 [orgId]="this.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;