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) &&

libs/angular/src/vault/components/spotlight/spotlight.component.html

@@ -3,20 +3,20 @@
 >
   <div class="tw-flex tw-justify-between tw-items-start tw-flex-grow">
     <div>
-      <h2 bitTypography="h4" class="tw-font-semibold !tw-mb-1">{{ title }}</h2>
+      <h2 bitTypography="h4" class="tw-font-semibold !tw-mb-1">{{ title() }}</h2>
       <p
-        *ngIf="subtitle"
+        *ngIf="subtitle()"
         class="tw-text-main tw-mb-0"
         bitTypography="body2"
-        [innerHTML]="subtitle"
+        [innerHTML]="subtitle()"
       ></p>
-      <ng-content *ngIf="!subtitle"></ng-content>
+      <ng-content *ngIf="!subtitle()"></ng-content>
     </div>
     <button
       type="button"
       bitIconButton="bwi-close"
       size="small"
-      *ngIf="!persistent"
+      *ngIf="!persistent()"
       (click)="handleDismiss()"
       class="-tw-me-2"
       [label]="'close' | i18n"
@@ -28,10 +28,10 @@
     bitButton
     type="button"
     buttonType="primary"
-    *ngIf="buttonText"
+    *ngIf="buttonText()"
     (click)="handleButtonClick($event)"
   >
-    {{ buttonText }}
+    {{ buttonText() }}
-    <i *ngIf="buttonIcon" [ngClass]="buttonIcon" class="bwi tw-ml-1" aria-hidden="true"></i>
+    <i *ngIf="buttonIcon()" [ngClass]="buttonIcon()" class="bwi tw-ml-1" aria-hidden="true"></i>
   </button>
 </div>

libs/angular/src/vault/components/spotlight/spotlight.component.ts

@@ -1,43 +1,28 @@
 import { CommonModule } from "@angular/common";
-import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { ChangeDetectionStrategy, Component, input, output } from "@angular/core";
 
 import { ButtonModule, IconButtonModule, TypographyModule } from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
 
-// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
   selector: "bit-spotlight",
   templateUrl: "spotlight.component.html",
   imports: [ButtonModule, CommonModule, IconButtonModule, I18nPipe, TypographyModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SpotlightComponent {
   // The title of the component
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  readonly title = input<string | null>(null);
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input({ required: true }) title: string | null = null;
   // The subtitle of the component
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  readonly subtitle = input<string | null>(null);
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input() subtitle?: string | null = null;
   // The text to display on the button
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  readonly buttonText = input<string | null>(null);
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input() buttonText?: string;
   // Wheter the component can be dismissed, if true, the component will not show a close button
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  readonly persistent = input(false);
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input() persistent = false;
   // Optional icon to display on the button
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  readonly buttonIcon = input<string | null>(null);
-  // eslint-disable-next-line @angular-eslint/prefer-signals
+  readonly onDismiss = output<void>();
-  @Input() buttonIcon: string | null = null;
+  readonly onButtonClick = output<MouseEvent>();
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-output-emitter-ref
-  @Output() onDismiss = new EventEmitter<void>();
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-output-emitter-ref
-  @Output() onButtonClick = new EventEmitter();
 
   handleButtonClick(event: MouseEvent): void {
     this.onButtonClick.emit(event);