[PM-18802] - Autofill Settings Nudges and Settings Badge (#14439)

* autofill nudge

* remove undismiss logic

* revert change to popup view cache service

* move browser autofill logic to platform. cleanup

* fix test

* adjustments to autofill nudges

* add missing provider

* updates to autofill nudges

* fix date logic

* change autofillBrowserSettingsService isBrowserAutofillSettingOverridden to function

* fix up browser autofill overridden settings logic

* remove check for privacy in isBrowserAutofillSettingOverridden

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

@@ -23,10 +23,9 @@
     type="button"
     buttonType="primary"
     *ngIf="buttonText"
-    (click)="handleButtonClick()"
+    (click)="handleButtonClick($event)"
   >
     {{ buttonText }}
+    <i *ngIf="buttonIcon" [ngClass]="buttonIcon" class="bwi tw-ml-1" aria-hidden="true"></i>
   </button>
-
-  <ng-content></ng-content>
 </div>

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

@@ -19,11 +19,13 @@ export class SpotlightComponent {
   @Input() buttonText?: string;
   // Wheter the component can be dismissed, if true, the component will not show a close button
   @Input() persistent = false;
+  // Optional icon to display on the button
+  @Input() buttonIcon: string | null = null;
   @Output() onDismiss = new EventEmitter<void>();
-  @Output() onButtonClick = new EventEmitter<void>();
+  @Output() onButtonClick = new EventEmitter();
 
-  handleButtonClick(): void {
-    this.onButtonClick.emit();
+  handleButtonClick(event: MouseEvent): void {
+    this.onButtonClick.emit(event);
   }
 
   handleDismiss(): void {

libs/vault/src/components/spotlight/spotlight.stories.ts

@@ -52,9 +52,9 @@ export const Persistent: Story = {
   },
 };
 
-export const WithCustomButton: Story = {
+export const WithButtonIcon: Story = {
   args: {
-    buttonText: "Custom Button",
+    buttonIcon: "bwi bwi-external-link",
   },
   render: (args) => ({
     props: args,
@@ -62,19 +62,9 @@ export const WithCustomButton: Story = {
       <bit-spotlight
         [title]="title"
         [subtitle]="subtitle"
-      >
-        <button
-          class="tw-w-full"
-          bit-item-content
-          bitButton
-          type="button"
-          buttonType="primary"
-          (click)="handleButtonClick()"
-        >
-          External Link
-           <i slot="end" class="bwi bwi-external-link ml-2" aria-hidden="true"></i>
-        </button>
-      </bit-spotlight>
+        buttonText="External Link"
+        buttonIcon="bwi-external-link"
+      ></bit-spotlight>
     `,
   }),
 };

libs/vault/src/services/custom-nudges-services/autofill-nudge.service.ts

@@ -0,0 +1,47 @@
+import { Injectable, inject } from "@angular/core";
+import { Observable, combineLatest, from, map, of } from "rxjs";
+import { catchError } from "rxjs/operators";
+
+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 { DefaultSingleNudgeService } from "../default-single-nudge.service";
+import { NudgeStatus, VaultNudgeType } from "../vault-nudges.service";
+
+const THIRTY_DAYS_MS = 30 * 24 * 60 * 60 * 1000;
+
+/**
+ * Custom Nudge Service to use for the Autofill Nudge in the Vault
+ */
+@Injectable({
+  providedIn: "root",
+})
+export class AutofillNudgeService extends DefaultSingleNudgeService {
+  vaultProfileService = inject(VaultProfileService);
+  logService = inject(LogService);
+
+  nudgeStatus$(_: VaultNudgeType, userId: UserId): Observable<NudgeStatus> {
+    const profileDate$ = from(this.vaultProfileService.getProfileCreationDate(userId)).pipe(
+      catchError(() => {
+        this.logService.error("Error getting profile creation date");
+        // Default to today to ensure we show the nudge
+        return of(new Date());
+      }),
+    );
+
+    return combineLatest([
+      profileDate$,
+      this.getNudgeStatus$(VaultNudgeType.AutofillNudge, userId),
+      of(Date.now() - THIRTY_DAYS_MS),
+    ]).pipe(
+      map(([profileCreationDate, status, profileCutoff]) => {
+        const profileOlderThanCutoff = profileCreationDate.getTime() < profileCutoff;
+        return {
+          hasBadgeDismissed: status.hasBadgeDismissed || profileOlderThanCutoff,
+          hasSpotlightDismissed: status.hasSpotlightDismissed || profileOlderThanCutoff,
+        };
+      }),
+    );
+  }
+}

libs/vault/src/services/custom-nudges-services/index.ts

@@ -1,3 +1,4 @@
+export * from "./autofill-nudge.service";
 export * from "./has-items-nudge.service";
 export * from "./download-bitwarden-nudge.service";
 export * from "./empty-vault-nudge.service";

libs/vault/src/services/vault-nudges.service.spec.ts

@@ -55,6 +55,7 @@ describe("Vault Nudges Service", () => {
           useValue: mock<ApiService>(),
         },
         { provide: CipherService, useValue: mock<CipherService>() },
+        { provide: LogService, useValue: mock<LogService>() },
         {
           provide: AccountService,
           useValue: mock<AccountService>(),

libs/vault/src/services/vault-nudges.service.ts

@@ -9,6 +9,7 @@ import { UserId } from "@bitwarden/common/types/guid";
 import {
   HasItemsNudgeService,
   EmptyVaultNudgeService,
+  AutofillNudgeService,
   DownloadBitwardenNudgeService,
   NewItemNudgeService,
 } from "./custom-nudges-services";
@@ -28,6 +29,7 @@ export enum VaultNudgeType {
    */
   EmptyVaultNudge = "empty-vault-nudge",
   HasVaultItems = "has-vault-items",
+  AutofillNudge = "autofill-nudge",
   DownloadBitwarden = "download-bitwarden",
   newLoginItemStatus = "new-login-item-status",
   newCardItemStatus = "new-card-item-status",
@@ -57,6 +59,7 @@ export class VaultNudgesService {
   private customNudgeServices: Partial<Record<VaultNudgeType, SingleNudgeService>> = {
     [VaultNudgeType.HasVaultItems]: inject(HasItemsNudgeService),
     [VaultNudgeType.EmptyVaultNudge]: inject(EmptyVaultNudgeService),
+    [VaultNudgeType.AutofillNudge]: inject(AutofillNudgeService),
     [VaultNudgeType.DownloadBitwarden]: inject(DownloadBitwardenNudgeService),
     [VaultNudgeType.newLoginItemStatus]: this.newItemNudgeService,
     [VaultNudgeType.newCardItemStatus]: this.newItemNudgeService,