add persistent callout in settings for non-premium users

apps/browser/src/_locales/en/messages.json

@@ -4890,6 +4890,9 @@
   "premium": {
     "message": "Premium"
   },
+  "unlockFeaturesWithPremium": {
+    "message": "Unlock reporting, emergency access, and more security features with Premium."
+  },
   "freeOrgsCannotUseAttachments": {
     "message": "Free organizations cannot use attachments"
   },

apps/browser/src/tools/popup/settings/settings-v2.component.html

@@ -1,4 +1,19 @@
 <popup-page>
+  <bit-spotlight *ngIf="!(hasPremium$ | async)" [persistent]="true">
+    <span class="tw-text-xs"
+      >{{ "unlockFeaturesWithPremium" | i18n }}
+      <button
+        bitLink
+        buttonType="primary"
+        class="!tw-no-underline tw-text-xs !tw-font-bold"
+        type="button"
+        (click)="openUpgradeDialog()"
+        [title]="'upgradeNow' | i18n"
+      >
+        {{ "upgradeNow" | i18n }}
+      </button></span
+    >
+  </bit-spotlight>
   <popup-header slot="header" pageTitle="{{ 'settings' | i18n }}">
     <ng-container slot="end">
       <app-pop-out></app-pop-out>

apps/browser/src/tools/popup/settings/settings-v2.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from "@angular/common";
-import { Component, OnInit } from "@angular/core";
+import { ChangeDetectionStrategy, Component, OnInit } from "@angular/core";
 import { RouterModule } from "@angular/router";
 import {
   combineLatest,
@@ -11,11 +11,20 @@ import {
   switchMap,
 } from "rxjs";
 
+import { PremiumUpgradeDialogComponent } from "@bitwarden/angular/billing/components";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { NudgesService, NudgeType } from "@bitwarden/angular/vault";
+import { SpotlightComponent } from "@bitwarden/angular/vault/components/spotlight/spotlight.component";
 import { Account, AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions";
 import { UserId } from "@bitwarden/common/types/guid";
-import { BadgeComponent, ItemModule } from "@bitwarden/components";
+import {
+  BadgeComponent,
+  DialogService,
+  ItemModule,
+  LinkModule,
+  TypographyModule,
+} from "@bitwarden/components";
 
 import { CurrentAccountComponent } from "../../../auth/popup/account-switching/current-account.component";
 import { AutofillBrowserSettingsService } from "../../../autofill/services/autofill-browser-settings.service";
@@ -24,8 +33,6 @@ import { PopOutComponent } from "../../../platform/popup/components/pop-out.comp
 import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component";
 import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.component";
 
-// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
   templateUrl: "settings-v2.component.html",
   imports: [
@@ -38,7 +45,11 @@ import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.co
     ItemModule,
     CurrentAccountComponent,
     BadgeComponent,
+    SpotlightComponent,
+    TypographyModule,
+    LinkModule,
   ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SettingsV2Component implements OnInit {
   NudgeType = NudgeType;
@@ -50,6 +61,11 @@ export class SettingsV2Component implements OnInit {
     shareReplay({ bufferSize: 1, refCount: true }),
   );
 
+  protected hasPremium$ = this.authenticatedAccount$.pipe(
+    switchMap((account) => this.accountProfileStateService.hasPremiumFromAnySource$(account.id)),
+    shareReplay({ bufferSize: 1, refCount: true }),
+  );
+
   showDownloadBitwardenNudge$: Observable<boolean> = this.authenticatedAccount$.pipe(
     switchMap((account) =>
       this.nudgesService.showNudgeBadge$(NudgeType.DownloadBitwarden, account.id),
@@ -79,8 +95,14 @@ export class SettingsV2Component implements OnInit {
     private readonly nudgesService: NudgesService,
     private readonly accountService: AccountService,
     private readonly autofillBrowserSettingsService: AutofillBrowserSettingsService,
+    private readonly accountProfileStateService: BillingAccountProfileStateService,
+    private readonly dialogService: DialogService,
   ) {}
 
+  openUpgradeDialog() {
+    PremiumUpgradeDialogComponent.open(this.dialogService);
+  }
+
   async ngOnInit() {
     this.isBrowserAutofillSettingOverridden =
       await this.autofillBrowserSettingsService.isBrowserAutofillSettingOverridden(

apps/browser/src/vault/popup/settings/more-from-bitwarden-page-v2.component.html

@@ -6,12 +6,6 @@
   </popup-header>
 
   <bit-item-group>
-    <bit-item *ngIf="!(canAccessPremium$ | async)">
-      <a type="button" bit-item-content routerLink="/premium">
-        {{ "premiumMembership" | i18n }}
-        <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
-      </a>
-    </bit-item>
     <bit-item
       *ngIf="
         (familySponsorshipAvailable$ | async) &&