[PM-18800] vault onboarding nudges and badge (#14278)

* added empty vault nudge service and has items vault nudge service with spotlight and settings badge to vault v2 in browser * Refactor Vault Nudge Service for clarity between spotlight and badge dismissals
2025-12-06 00:13:28 +00:00 · 2025-04-30 12:16:09 -04:00
parent 1fc5c206c3
commit 106dd33ef4
15 changed files with 345 additions and 90 deletions
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -5201,6 +5201,12 @@
  "changeAtRiskPassword": {
    "message": "Change at-risk password"
  },
+  "settingsVaultOptions": {
+    "message": "Vault options"
+  },
+  "emptyVaultDescription": {
+    "message": "The vault protects more than just your passwords. Store secure logins, IDs, cards and notes securely here."
+  },
  "introCarouselLabel": {
    "message": "Welcome to Bitwarden"
  },
@@ -5227,5 +5233,20 @@
  },
  "secureDevicesBody": {
    "message": "Save unlimited passwords across unlimited devices with Bitwarden mobile, browser, and desktop apps."
+  },
+  "emptyVaultNudgeTitle": {
+    "message": "Import existing passwords"
+  },
+  "emptyVaultNudgeBody": {
+    "message": "Use the importer to quickly transfer logins to Bitwarden without manually adding them."
+  },
+  "emptyVaultNudgeButton": {
+    "message": "Import now"
+  },
+  "hasItemsVaultNudgeTitle": {
+    "message": "Welcome to your vault!"
+  },
+  "hasItemsVaultNudgeBody": {
+      "message": "Autofill items for the current page\nFavorite items for easy access\nSearch your vault for something else"
  }
 }
--- a/apps/browser/src/popup/tabs-v2.component.ts
+++ b/apps/browser/src/popup/tabs-v2.component.ts
@@ -18,9 +18,9 @@ export class TabsV2Component {

  protected navButtons$ = combineLatest([
    this.configService.getFeatureFlag$(FeatureFlag.PM8851_BrowserOnboardingNudge),
-    this.hasNudgeService.shouldShowNudge$(),
+    this.hasNudgeService.nudgeStatus$(),
  ]).pipe(
-    map(([onboardingFeatureEnabled, showNudge]) => {
+    map(([onboardingFeatureEnabled, nudgeStatus]) => {
      return [
        {
          label: "vault",
@@ -45,7 +45,7 @@ export class TabsV2Component {
          page: "/tabs/settings",
          iconKey: "cog",
          iconKeyActive: "cog-f",
-          showBerry: onboardingFeatureEnabled && showNudge,
+          showBerry: onboardingFeatureEnabled && !nudgeStatus.hasSpotlightDismissed,
        },
      ];
    }),
--- a/apps/browser/src/tools/popup/settings/settings-v2.component.html
+++ b/apps/browser/src/tools/popup/settings/settings-v2.component.html
@@ -29,9 +29,26 @@
      </a>
    </bit-item>
    <bit-item>
-      <a bit-item-content routerLink="/vault-settings">
+      <a
+        bit-item-content
+        routerLink="/vault-settings"
+        (click)="dismissBadge(VaultNudgeType.EmptyVaultNudge)"
+      >
        <i slot="start" class="bwi bwi-vault" aria-hidden="true"></i>
-        {{ "vault" | i18n }}
+        <div class="tw-flex tw-items-center tw-justify-center">
+          <p class="tw-pr-2">{{ "settingsVaultOptions" | i18n }}</p>
+          <!--
+            Currently can be only 1 item for notification.
+            Will make this dynamic when more nudges are added
+          -->
+          <span
+            *ngIf="!(showVaultBadge$ | async)?.hasBadgeDismissed"
+            bitBadge
+            variant="notification"
+            >1</span
+          >
+        </div>
+
        <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
      </a>
    </bit-item>
--- a/apps/browser/src/tools/popup/settings/settings-v2.component.ts
+++ b/apps/browser/src/tools/popup/settings/settings-v2.component.ts
@@ -1,9 +1,14 @@
 import { CommonModule } from "@angular/common";
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 import { RouterModule } from "@angular/router";
+import { firstValueFrom, Observable } from "rxjs";

 import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { ItemModule } from "@bitwarden/components";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { getUserId } from "@bitwarden/common/auth/services/account.service";
+import { UserId } from "@bitwarden/common/types/guid";
+import { BadgeComponent, ItemModule } from "@bitwarden/components";
+import { NudgeStatus, VaultNudgesService, VaultNudgeType } from "@bitwarden/vault";

 import { CurrentAccountComponent } from "../../../auth/popup/account-switching/current-account.component";
 import { PopOutComponent } from "../../../platform/popup/components/pop-out.component";
@@ -22,6 +27,29 @@ import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.co
    PopOutComponent,
    ItemModule,
    CurrentAccountComponent,
+    BadgeComponent,
  ],
 })
-export class SettingsV2Component {}
+export class SettingsV2Component implements OnInit {
+  VaultNudgeType = VaultNudgeType;
+  showVaultBadge$: Observable<NudgeStatus> = new Observable();
+  activeUserId: UserId | null = null;
+
+  constructor(
+    private readonly vaultNudgesService: VaultNudgesService,
+    private readonly accountService: AccountService,
+  ) {}
+  async ngOnInit() {
+    this.activeUserId = await firstValueFrom(this.accountService.activeAccount$.pipe(getUserId));
+    this.showVaultBadge$ = this.vaultNudgesService.showNudge$(
+      VaultNudgeType.EmptyVaultNudge,
+      this.activeUserId,
+    );
+  }
+
+  async dismissBadge(type: VaultNudgeType) {
+    if (!(await firstValueFrom(this.showVaultBadge$)).hasBadgeDismissed) {
+      await this.vaultNudgesService.dismissNudge(type, this.activeUserId as UserId, true);
+    }
+  }
+}
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.html
@@ -14,7 +14,9 @@
  >
    <bit-no-items [icon]="vaultIcon">
      <ng-container slot="title">{{ "yourVaultIsEmpty" | i18n }}</ng-container>
-      <ng-container slot="description">{{ "autofillSuggestionsTip" | i18n }}</ng-container>
+      <ng-container slot="description">
+        <p bitTypography="body2" class="tw-mx-6">{{ "emptyVaultDescription" | i18n }}</p>
+      </ng-container>
      <app-new-item-dropdown
        slot="button"
        [initialValues]="newItemItemValues$ | async"
@@ -28,11 +30,31 @@
  ></blocked-injection-banner>

  <!-- Show search & filters outside of the scroll area of the page -->
-  <ng-container slot="above-scroll-area" *ngIf="vaultState !== VaultStateEnum.Empty">
-    <vault-at-risk-password-callout
-      *appIfFeature="FeatureFlag.SecurityTasks"
-    ></vault-at-risk-password-callout>
-    <app-vault-header-v2></app-vault-header-v2>
+  <ng-container slot="above-scroll-area">
+    <ng-container *ngIf="vaultState === VaultStateEnum.Empty && showEmptyVaultSpotlight$ | async">
+      <bit-spotlight
+        [title]="'emptyVaultNudgeTitle' | i18n"
+        [subtitle]="'emptyVaultNudgeBody' | i18n"
+        [buttonText]="'emptyVaultNudgeButton' | i18n"
+        (onButtonClick)="navigateToImport()"
+        (onDismiss)="dismissVaultNudgeSpotlight(VaultNudgeType.EmptyVaultNudge)"
+      >
+      </bit-spotlight>
+    </ng-container>
+    <ng-container *ngIf="vaultState !== VaultStateEnum.Empty">
+      <div class="tw-mb-4" *ngIf="showHasItemsVaultSpotlight$ | async">
+        <bit-spotlight
+          [title]="'hasItemsVaultNudgeTitle' | i18n"
+          [subtitle]="'hasItemsVaultNudgeBody' | i18n"
+          (onDismiss)="dismissVaultNudgeSpotlight(VaultNudgeType.HasVaultItems)"
+        >
+        </bit-spotlight>
+      </div>
+      <vault-at-risk-password-callout
+        *appIfFeature="FeatureFlag.SecurityTasks"
+      ></vault-at-risk-password-callout>
+      <app-vault-header-v2></app-vault-header-v2>
+    </ng-container>
  </ng-container>

  <ng-container *ngIf="vaultState !== VaultStateEnum.Empty">
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.ts
@@ -2,30 +2,38 @@ import { CdkVirtualScrollableElement, ScrollingModule } from "@angular/cdk/scrol
 import { CommonModule } from "@angular/common";
 import { AfterViewInit, Component, DestroyRef, OnDestroy, OnInit, ViewChild } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { Router, RouterModule } from "@angular/router";
 import {
  combineLatest,
  filter,
-  map,
  firstValueFrom,
+  map,
  Observable,
  shareReplay,
+  startWith,
  switchMap,
  take,
-  startWith,
 } from "rxjs";

 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
-import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
-import { CipherId, CollectionId, OrganizationId } from "@bitwarden/common/types/guid";
+import { CipherId, CollectionId, OrganizationId, UserId } from "@bitwarden/common/types/guid";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CipherType } from "@bitwarden/common/vault/enums";
 import { ButtonModule, DialogService, Icons, NoItemsModule } from "@bitwarden/components";
-import { DecryptionFailureDialogComponent, VaultIcons } from "@bitwarden/vault";
+import {
+  DecryptionFailureDialogComponent,
+  SpotlightComponent,
+  VaultIcons,
+  VaultNudgesService,
+  VaultNudgeType,
+} from "@bitwarden/vault";

 import { CurrentAccountComponent } from "../../../../auth/popup/account-switching/current-account.component";
+import { BrowserApi } from "../../../../platform/browser/browser-api";
+import BrowserPopupUtils from "../../../../platform/popup/browser-popup-utils";
 import { PopOutComponent } from "../../../../platform/popup/components/pop-out.component";
 import { PopupHeaderComponent } from "../../../../platform/popup/layout/popup-header.component";
 import { PopupPageComponent } from "../../../../platform/popup/layout/popup-page.component";
@@ -74,14 +82,29 @@ enum VaultState {
    VaultHeaderV2Component,
    AtRiskPasswordCalloutComponent,
    NewSettingsCalloutComponent,
+    SpotlightComponent,
+    RouterModule,
  ],
  providers: [VaultPageService],
 })
 export class VaultV2Component implements OnInit, AfterViewInit, OnDestroy {
  @ViewChild(CdkVirtualScrollableElement) virtualScrollElement?: CdkVirtualScrollableElement;

+  VaultNudgeType = VaultNudgeType;
  cipherType = CipherType;
+  private activeUserId$ = this.accountService.activeAccount$.pipe(getUserId);
+  showEmptyVaultSpotlight$: Observable<boolean> = this.activeUserId$.pipe(
+    switchMap((userId) =>
+      this.vaultNudgesService.showNudge$(VaultNudgeType.EmptyVaultNudge, userId),
+    ),
+    map((nudgeStatus) => !nudgeStatus.hasSpotlightDismissed),
+  );
+  showHasItemsVaultSpotlight$: Observable<boolean> = this.activeUserId$.pipe(
+    switchMap((userId) => this.vaultNudgesService.showNudge$(VaultNudgeType.HasVaultItems, userId)),
+    map((nudgeStatus) => !nudgeStatus.hasSpotlightDismissed),
+  );

+  activeUserId: UserId | null = null;
  protected favoriteCiphers$ = this.vaultPopupItemsService.favoriteCiphers$;
  protected remainingCiphers$ = this.vaultPopupItemsService.remainingCiphers$;
  protected allFilters$ = this.vaultPopupListFiltersService.allFilters$;
@@ -131,7 +154,8 @@ export class VaultV2Component implements OnInit, AfterViewInit, OnDestroy {
    private dialogService: DialogService,
    private vaultCopyButtonsService: VaultPopupCopyButtonsService,
    private introCarouselService: IntroCarouselService,
-    private configService: ConfigService,
+    private vaultNudgesService: VaultNudgesService,
+    private router: Router,
  ) {
    combineLatest([
      this.vaultPopupItemsService.emptyVault$,
@@ -169,16 +193,12 @@ export class VaultV2Component implements OnInit, AfterViewInit, OnDestroy {
  }

  async ngOnInit() {
-    const hasVaultNudgeFlag = await this.configService.getFeatureFlag(
-      FeatureFlag.PM8851_BrowserOnboardingNudge,
-    );
-    if (hasVaultNudgeFlag) {
-      await this.introCarouselService.setIntroCarouselDismissed();
-    }
-    const activeUserId = await firstValueFrom(this.accountService.activeAccount$.pipe(getUserId));
+    this.activeUserId = await firstValueFrom(this.accountService.activeAccount$.pipe(getUserId));
+
+    await this.introCarouselService.setIntroCarouselDismissed();

    this.cipherService
-      .failedToDecryptCiphers$(activeUserId)
+      .failedToDecryptCiphers$(this.activeUserId)
      .pipe(
        map((ciphers) => (ciphers ? ciphers.filter((c) => !c.isDeleted) : [])),
        filter((ciphers) => ciphers.length > 0),
@@ -196,5 +216,16 @@ export class VaultV2Component implements OnInit, AfterViewInit, OnDestroy {
    this.vaultScrollPositionService.stop();
  }

+  async navigateToImport() {
+    await this.router.navigate(["/import"]);
+    if (await BrowserApi.isPopupOpen()) {
+      await BrowserPopupUtils.openCurrentPagePopout(window);
+    }
+  }
+
+  async dismissVaultNudgeSpotlight(type: VaultNudgeType) {
+    await this.vaultNudgesService.dismissNudge(type, this.activeUserId as UserId);
+  }
+
  protected readonly FeatureFlag = FeatureFlag;
 }
--- a/apps/browser/src/vault/popup/services/intro-carousel.service.ts
+++ b/apps/browser/src/vault/popup/services/intro-carousel.service.ts
@@ -1,6 +1,8 @@
 import { Injectable } from "@angular/core";
-import { map, Observable } from "rxjs";
+import { firstValueFrom, map, Observable } from "rxjs";

+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import {
  GlobalState,
  KeyDefinition,
@@ -26,9 +28,17 @@ export class IntroCarouselService {
    map((x) => x ?? false),
  );

-  constructor(private stateProvider: StateProvider) {}
+  constructor(
+    private stateProvider: StateProvider,
+    private configService: ConfigService,
+  ) {}

  async setIntroCarouselDismissed(): Promise<void> {
-    await this.introCarouselState.update(() => true);
+    const hasVaultNudgeFlag = await firstValueFrom(
+      this.configService.getFeatureFlag$(FeatureFlag.PM8851_BrowserOnboardingNudge),
+    );
+    if (hasVaultNudgeFlag) {
+      await this.introCarouselState.update(() => true);
+    }
  }
 }
--- a/libs/vault/src/index.ts
+++ b/libs/vault/src/index.ts
@@ -32,3 +32,5 @@ export { SshImportPromptService } from "./services/ssh-import-prompt.service";

 export * from "./abstractions/change-login-password.service";
 export * from "./services/default-change-login-password.service";
+
+export { SpotlightComponent } from "./components/spotlight/spotlight.component";
--- a/libs/vault/src/services/custom-nudges-services/empty-vault-nudge.service.ts
+++ b/libs/vault/src/services/custom-nudges-services/empty-vault-nudge.service.ts
@@ -0,0 +1,64 @@
+import { inject, Injectable } from "@angular/core";
+import { combineLatest, Observable, of, switchMap } from "rxjs";
+
+import { CollectionService } from "@bitwarden/admin-console/common";
+import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
+import { UserId } from "@bitwarden/common/types/guid";
+import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
+
+import { DefaultSingleNudgeService } from "../default-single-nudge.service";
+import { NudgeStatus, VaultNudgeType } from "../vault-nudges.service";
+
+/**
+ * Custom Nudge Service Checking Nudge Status For Empty Vault
+ */
+@Injectable({
+  providedIn: "root",
+})
+export class EmptyVaultNudgeService extends DefaultSingleNudgeService {
+  cipherService = inject(CipherService);
+  organizationService = inject(OrganizationService);
+  collectionService = inject(CollectionService);
+
+  nudgeStatus$(nudgeType: VaultNudgeType, userId: UserId): Observable<NudgeStatus> {
+    return combineLatest([
+      this.getNudgeStatus$(nudgeType, userId),
+      this.cipherService.cipherViews$(userId),
+      this.organizationService.organizations$(userId),
+      this.collectionService.decryptedCollections$,
+    ]).pipe(
+      switchMap(([nudgeStatus, ciphers, orgs, collections]) => {
+        const emptyVault = ciphers == null || ciphers.length === 0;
+        if (orgs == null || orgs.length === 0) {
+          return nudgeStatus.hasBadgeDismissed || nudgeStatus.hasSpotlightDismissed
+            ? of(nudgeStatus)
+            : of({
+                hasSpotlightDismissed: emptyVault,
+                hasBadgeDismissed: emptyVault,
+              });
+        }
+        const orgIds = new Set(orgs.map((org) => org.id));
+        const canCreateCollections = orgs.some((org) => org.canCreateNewCollections);
+        const hasManageCollections = collections.some(
+          (c) => c.manage && orgIds.has(c.organizationId),
+        );
+        // Do not show nudge when
+        // user has previously dismissed nudge
+        // OR
+        // user belongs to an organization and cannot create collections || manage collections
+        if (
+          nudgeStatus.hasBadgeDismissed ||
+          nudgeStatus.hasSpotlightDismissed ||
+          hasManageCollections ||
+          canCreateCollections
+        ) {
+          return of(nudgeStatus);
+        }
+        return of({
+          hasSpotlightDismissed: emptyVault,
+          hasBadgeDismissed: emptyVault,
+        });
+      }),
+    );
+  }
+}
--- a/libs/vault/src/services/custom-nudges-services/has-items-nudge.service.ts
+++ b/libs/vault/src/services/custom-nudges-services/has-items-nudge.service.ts
@@ -1,30 +1,49 @@
 import { inject, Injectable } from "@angular/core";
-import { map, Observable, of, switchMap } from "rxjs";
+import { combineLatest, Observable, switchMap } from "rxjs";

+import { VaultProfileService } from "@bitwarden/angular/vault/services/vault-profile.service";
+import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { UserId } from "@bitwarden/common/types/guid";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";

 import { DefaultSingleNudgeService } from "../default-single-nudge.service";
-import { VaultNudgeType } from "../vault-nudges.service";
+import { NudgeStatus, VaultNudgeType } from "../vault-nudges.service";

 /**
- * Custom Nudge Service to use for the Onboarding Nudges in the Vault
+ * Custom Nudge Service Checking Nudge Status For Welcome Nudge With Populated Vault
 */
@Injectable({
  providedIn: "root",
 })
 export class HasItemsNudgeService extends DefaultSingleNudgeService {
  cipherService = inject(CipherService);
+  vaultProfileService = inject(VaultProfileService);
+  logService = inject(LogService);

-  shouldShowNudge$(nudgeType: VaultNudgeType, userId: UserId): Observable<boolean> {
-    return this.isDismissed$(nudgeType, userId).pipe(
-      switchMap((dismissed) =>
-        dismissed
-          ? of(false)
-          : this.cipherService
-              .cipherViews$(userId)
-              .pipe(map((ciphers) => ciphers == null || ciphers.length === 0)),
-      ),
+  nudgeStatus$(nudgeType: VaultNudgeType, userId: UserId): Observable<NudgeStatus> {
+    return combineLatest([
+      this.cipherService.cipherViews$(userId),
+      this.getNudgeStatus$(nudgeType, userId),
+    ]).pipe(
+      switchMap(async ([ciphers, nudgeStatus]) => {
+        try {
+          const creationDate = await this.vaultProfileService.getProfileCreationDate(userId);
+          const thirtyDays = new Date(new Date().getTime() - 30 * 24 * 60 * 60 * 1000);
+          const isRecentAcct = creationDate >= thirtyDays;
+
+          if (!isRecentAcct || nudgeStatus.hasSpotlightDismissed) {
+            return nudgeStatus;
+          } else {
+            return {
+              hasBadgeDismissed: ciphers == null || ciphers.length === 0,
+              hasSpotlightDismissed: ciphers == null || ciphers.length === 0,
+            };
+          }
+        } catch (error) {
+          this.logService.error("Failed to fetch profile creation date: ", error);
+          return nudgeStatus;
+        }
+      }),
    );
  }
 }
--- a/libs/vault/src/services/custom-nudges-services/has-nudge.service.ts
+++ b/libs/vault/src/services/custom-nudges-services/has-nudge.service.ts
@@ -5,7 +5,7 @@ import { AccountService } from "@bitwarden/common/auth/abstractions/account.serv
 import { UserId } from "@bitwarden/common/types/guid";

 import { DefaultSingleNudgeService } from "../default-single-nudge.service";
-import { VaultNudgeType } from "../vault-nudges.service";
+import { NudgeStatus, VaultNudgeType } from "../vault-nudges.service";

 /**
 * Custom Nudge Service used for showing if the user has any existing nudge in the Vault.
@@ -17,6 +17,7 @@ export class HasNudgeService extends DefaultSingleNudgeService {
  private accountService = inject(AccountService);

  private nudgeTypes: VaultNudgeType[] = [
+    VaultNudgeType.EmptyVaultNudge,
    VaultNudgeType.HasVaultItems,
    VaultNudgeType.IntroCarouselDismissal,
    // add additional nudge types here as needed
@@ -25,20 +26,25 @@ export class HasNudgeService extends DefaultSingleNudgeService {
  /**
   * Returns an observable that emits true if any of the provided nudge types are present
   */
-  shouldShowNudge$(): Observable<boolean> {
+  nudgeStatus$(): Observable<NudgeStatus> {
    return this.accountService.activeAccount$.pipe(
      switchMap((activeAccount) => {
        const userId: UserId | undefined = activeAccount?.id;
        if (!userId) {
-          return of(false);
+          return of({ hasBadgeDismissed: true, hasSpotlightDismissed: true });
        }

-        const nudgeObservables: Observable<boolean>[] = this.nudgeTypes.map((nudge) =>
-          super.shouldShowNudge$(nudge, userId),
+        const nudgeObservables: Observable<NudgeStatus>[] = this.nudgeTypes.map((nudge) =>
+          super.nudgeStatus$(nudge, userId),
        );

        return combineLatest(nudgeObservables).pipe(
-          map((nudgeStates) => nudgeStates.some((state) => state)),
+          map((nudgeStates) => {
+            return {
+              hasBadgeDismissed: true,
+              hasSpotlightDismissed: nudgeStates.some((state) => state.hasSpotlightDismissed),
+            };
+          }),
          distinctUntilChanged(),
        );
      }),
--- a/libs/vault/src/services/custom-nudges-services/index.ts
+++ b/libs/vault/src/services/custom-nudges-services/index.ts
@@ -1,2 +1,3 @@
 export * from "./has-items-nudge.service";
+export * from "./empty-vault-nudge.service";
 export * from "./has-nudge.service";
--- a/libs/vault/src/services/default-single-nudge.service.ts
+++ b/libs/vault/src/services/default-single-nudge.service.ts
@@ -4,15 +4,19 @@ import { map, Observable } from "rxjs";
 import { StateProvider } from "@bitwarden/common/platform/state";
 import { UserId } from "@bitwarden/common/types/guid";

-import { VAULT_NUDGE_DISMISSED_DISK_KEY, VaultNudgeType } from "./vault-nudges.service";
+import {
+  NudgeStatus,
+  VAULT_NUDGE_DISMISSED_DISK_KEY,
+  VaultNudgeType,
+} from "./vault-nudges.service";

 /**
 * Base interface for handling a nudge's status
 */
 export interface SingleNudgeService {
-  shouldShowNudge$(nudgeType: VaultNudgeType, userId: UserId): Observable<boolean>;
+  nudgeStatus$(nudgeType: VaultNudgeType, userId: UserId): Observable<NudgeStatus>;

-  setNudgeStatus(nudgeType: VaultNudgeType, dismissed: boolean, userId: UserId): Promise<void>;
+  setNudgeStatus(nudgeType: VaultNudgeType, newStatus: NudgeStatus, userId: UserId): Promise<void>;
 }

 /**
@@ -24,28 +28,29 @@ export interface SingleNudgeService {
 export class DefaultSingleNudgeService implements SingleNudgeService {
  stateProvider = inject(StateProvider);

-  protected isDismissed$(nudgeType: VaultNudgeType, userId: UserId): Observable<boolean> {
+  protected getNudgeStatus$(nudgeType: VaultNudgeType, userId: UserId): Observable<NudgeStatus> {
    return this.stateProvider
      .getUser(userId, VAULT_NUDGE_DISMISSED_DISK_KEY)
-      .state$.pipe(map((nudges) => nudges?.includes(nudgeType) ?? false));
+      .state$.pipe(
+        map(
+          (nudges) =>
+            nudges?.[nudgeType] ?? { hasBadgeDismissed: false, hasSpotlightDismissed: false },
+        ),
+      );
  }

-  shouldShowNudge$(nudgeType: VaultNudgeType, userId: UserId): Observable<boolean> {
-    return this.isDismissed$(nudgeType, userId).pipe(map((dismissed) => !dismissed));
+  nudgeStatus$(nudgeType: VaultNudgeType, userId: UserId): Observable<NudgeStatus> {
+    return this.getNudgeStatus$(nudgeType, userId);
  }

  async setNudgeStatus(
    nudgeType: VaultNudgeType,
-    dismissed: boolean,
+    status: NudgeStatus,
    userId: UserId,
  ): Promise<void> {
    await this.stateProvider.getUser(userId, VAULT_NUDGE_DISMISSED_DISK_KEY).update((nudges) => {
-      nudges ??= [];
-      if (dismissed) {
-        nudges.push(nudgeType);
-      } else {
-        nudges = nudges.filter((n) => n !== nudgeType);
-      }
+      nudges ??= {};
+      nudges[nudgeType] = status;
      return nudges;
    });
  }
--- a/libs/vault/src/services/vault-nudges.service.spec.ts
+++ b/libs/vault/src/services/vault-nudges.service.spec.ts
@@ -2,12 +2,13 @@ import { TestBed } from "@angular/core/testing";
 import { mock } from "jest-mock-extended";
 import { firstValueFrom, of } from "rxjs";

+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { StateProvider } from "@bitwarden/common/platform/state";
 import { UserId } from "@bitwarden/common/types/guid";

 import { FakeStateProvider, mockAccountServiceWith } from "../../../common/spec";

-import { HasItemsNudgeService } from "./custom-nudges-services/has-items-nudge.service";
+import { HasItemsNudgeService, EmptyVaultNudgeService } from "./custom-nudges-services";
 import { DefaultSingleNudgeService } from "./default-single-nudge.service";
 import { VaultNudgesService, VaultNudgeType } from "./vault-nudges.service";

@@ -15,6 +16,10 @@ describe("Vault Nudges Service", () => {
  let fakeStateProvider: FakeStateProvider;

  let testBed: TestBed;
+  const mockConfigService = {
+    getFeatureFlag$: jest.fn().mockReturnValue(of(true)),
+    getFeatureFlag: jest.fn().mockReturnValue(true),
+  };

  beforeEach(async () => {
    fakeStateProvider = new FakeStateProvider(mockAccountServiceWith("user-id" as UserId));
@@ -32,50 +37,55 @@ describe("Vault Nudges Service", () => {
          provide: StateProvider,
          useValue: fakeStateProvider,
        },
+        { provide: ConfigService, useValue: mockConfigService },
        {
          provide: HasItemsNudgeService,
          useValue: mock<HasItemsNudgeService>(),
        },
+        {
+          provide: EmptyVaultNudgeService,
+          useValue: mock<EmptyVaultNudgeService>(),
+        },
      ],
    });
  });

  describe("DefaultSingleNudgeService", () => {
-    it("should return shouldShowNudge === false when IntroCaourselDismissal dismissed is true", async () => {
+    it("should return hasSpotlightDismissed === true when EmptyVaultNudge dismissed is true", async () => {
      const service = testBed.inject(DefaultSingleNudgeService);

      await service.setNudgeStatus(
-        VaultNudgeType.IntroCarouselDismissal,
-        true,
+        VaultNudgeType.EmptyVaultNudge,
+        { hasBadgeDismissed: true, hasSpotlightDismissed: true },
        "user-id" as UserId,
      );

      const result = await firstValueFrom(
-        service.shouldShowNudge$(VaultNudgeType.IntroCarouselDismissal, "user-id" as UserId),
+        service.nudgeStatus$(VaultNudgeType.EmptyVaultNudge, "user-id" as UserId),
      );
-      expect(result).toBe(false);
+      expect(result).toEqual({ hasBadgeDismissed: true, hasSpotlightDismissed: true });
    });

-    it("should return shouldShowNudge === true when IntroCaourselDismissal dismissed is false", async () => {
+    it("should return hasSpotlightDismissed === true when EmptyVaultNudge dismissed is false", async () => {
      const service = testBed.inject(DefaultSingleNudgeService);

      await service.setNudgeStatus(
-        VaultNudgeType.IntroCarouselDismissal,
-        false,
+        VaultNudgeType.EmptyVaultNudge,
+        { hasBadgeDismissed: false, hasSpotlightDismissed: false },
        "user-id" as UserId,
      );

      const result = await firstValueFrom(
-        service.shouldShowNudge$(VaultNudgeType.IntroCarouselDismissal, "user-id" as UserId),
+        service.nudgeStatus$(VaultNudgeType.EmptyVaultNudge, "user-id" as UserId),
      );
-      expect(result).toBe(true);
+      expect(result).toEqual({ hasBadgeDismissed: false, hasSpotlightDismissed: false });
    });
  });

  describe("VaultNudgesService", () => {
-    it("should return true, the proper value from the custom nudge service shouldShowNudge$", async () => {
+    it("should return true, the proper value from the custom nudge service nudgeStatus$", async () => {
      TestBed.overrideProvider(HasItemsNudgeService, {
-        useValue: { shouldShowNudge$: () => of(true) },
+        useValue: { nudgeStatus$: () => of(true) },
      });
      const service = testBed.inject(VaultNudgesService);

@@ -86,9 +96,9 @@ describe("Vault Nudges Service", () => {
      expect(result).toBe(true);
    });

-    it("should return false, the proper value for the custom nudge service shouldShowNudge$", async () => {
+    it("should return false, the proper value for the custom nudge service nudgeStatus$", async () => {
      TestBed.overrideProvider(HasItemsNudgeService, {
-        useValue: { shouldShowNudge$: () => of(false) },
+        useValue: { nudgeStatus$: () => of(false) },
      });
      const service = testBed.inject(VaultNudgesService);

--- a/libs/vault/src/services/vault-nudges.service.ts
+++ b/libs/vault/src/services/vault-nudges.service.ts
@@ -1,11 +1,19 @@
 import { inject, Injectable } from "@angular/core";
+import { of, switchMap } from "rxjs";

+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { UserKeyDefinition, VAULT_NUDGES_DISK } from "@bitwarden/common/platform/state";
 import { UserId } from "@bitwarden/common/types/guid";

-import { HasItemsNudgeService } from "./custom-nudges-services/has-items-nudge.service";
+import { HasItemsNudgeService, EmptyVaultNudgeService } from "./custom-nudges-services";
 import { DefaultSingleNudgeService, SingleNudgeService } from "./default-single-nudge.service";

+export type NudgeStatus = {
+  hasBadgeDismissed: boolean;
+  hasSpotlightDismissed: boolean;
+};
+
 /**
 * Enum to list the various nudge types, to be used by components/badges to show/hide the nudge
 */
@@ -13,18 +21,17 @@ export enum VaultNudgeType {
  /** Nudge to show when user has no items in their vault
   * Add future nudges here
   */
+  EmptyVaultNudge = "empty-vault-nudge",
  HasVaultItems = "has-vault-items",
  IntroCarouselDismissal = "intro-carousel-dismissal",
 }

-export const VAULT_NUDGE_DISMISSED_DISK_KEY = new UserKeyDefinition<VaultNudgeType[]>(
-  VAULT_NUDGES_DISK,
-  "vaultNudgeDismissed",
-  {
-    deserializer: (nudgeDismissed) => nudgeDismissed,
-    clearOn: [], // Do not clear dismissals
-  },
-);
+export const VAULT_NUDGE_DISMISSED_DISK_KEY = new UserKeyDefinition<
+  Partial<Record<VaultNudgeType, NudgeStatus>>
+>(VAULT_NUDGES_DISK, "vaultNudgeDismissed", {
+  deserializer: (nudge) => nudge,
+  clearOn: [], // Do not clear dismissals
+});

@Injectable({
  providedIn: "root",
@@ -37,6 +44,7 @@ export class VaultNudgesService {
   */
  private customNudgeServices: any = {
    [VaultNudgeType.HasVaultItems]: inject(HasItemsNudgeService),
+    [VaultNudgeType.EmptyVaultNudge]: inject(EmptyVaultNudgeService),
  };

  /**
@@ -45,6 +53,7 @@ export class VaultNudgesService {
   * @private
   */
  private defaultNudgeService = inject(DefaultSingleNudgeService);
+  private configService = inject(ConfigService);

  private getNudgeService(nudge: VaultNudgeType): SingleNudgeService {
    return this.customNudgeServices[nudge] ?? this.defaultNudgeService;
@@ -56,7 +65,14 @@ export class VaultNudgesService {
   * @param userId
   */
  showNudge$(nudge: VaultNudgeType, userId: UserId) {
-    return this.getNudgeService(nudge).shouldShowNudge$(nudge, userId);
+    return this.configService.getFeatureFlag$(FeatureFlag.PM8851_BrowserOnboardingNudge).pipe(
+      switchMap((hasVaultNudgeFlag) => {
+        if (!hasVaultNudgeFlag) {
+          return of({ hasBadgeDismissed: true, hasSpotlightDismissed: true } as NudgeStatus);
+        }
+        return this.getNudgeService(nudge).nudgeStatus$(nudge, userId);
+      }),
+    );
  }

  /**
@@ -64,7 +80,10 @@ export class VaultNudgesService {
   * @param nudge
   * @param userId
   */
-  dismissNudge(nudge: VaultNudgeType, userId: UserId) {
-    return this.getNudgeService(nudge).setNudgeStatus(nudge, true, userId);
+  async dismissNudge(nudge: VaultNudgeType, userId: UserId, onlyBadge: boolean = false) {
+    const dismissedStatus = onlyBadge
+      ? { hasBadgeDismissed: true, hasSpotlightDismissed: false }
+      : { hasBadgeDismissed: true, hasSpotlightDismissed: true };
+    await this.getNudgeService(nudge).setNudgeStatus(nudge, dismissedStatus, userId);
  }
 }