[PM-18804] generator nudges (#14705)

* added generator spotlight to credential generator component

* moved generator spotlight to browser component and add as slot in libs. update copy for send

* added an aria label for the generator nudge body content

* new copy and styles for browser send will be behind feature flag

* update featureflag call to observable in send-v2

* changed how nudge text is made in credential generator

* added new observable to vault nudges to return specific boolean. Update naming of vault types. update observable calls in credential-generator and send-v2

* update send-v2 and credential generator to use new renamed nudges

* update to create nudge generator spotlight component. using this inside the credential generator for nudge spotlight

* fix imports for Nudge related code

* add libs/angular to storybook

---------

Co-authored-by: Nick Krantz <nick@livefront.com>

libs/tools/generator/components/src/credential-generator.component.html

@@ -11,6 +11,8 @@
   </bit-toggle>
 </bit-toggle-group>
 
+<nudge-generator-spotlight></nudge-generator-spotlight>
+
 <bit-card class="tw-flex tw-justify-between tw-mb-4">
   <div class="tw-grow tw-flex tw-items-center">
     <bit-color-password class="tw-font-mono" [password]="value$ | async"></bit-color-password>

libs/tools/generator/components/src/generator.module.ts

@@ -22,6 +22,7 @@ import { CatchallSettingsComponent } from "./catchall-settings.component";
 import { CredentialGeneratorComponent } from "./credential-generator.component";
 import { ForwarderSettingsComponent } from "./forwarder-settings.component";
 import { GeneratorServicesModule } from "./generator-services.module";
+import { NudgeGeneratorSpotlightComponent } from "./nudge-generator-spotlight.component";
 import { PassphraseSettingsComponent } from "./passphrase-settings.component";
 import { PasswordGeneratorComponent } from "./password-generator.component";
 import { PasswordSettingsComponent } from "./password-settings.component";
@@ -48,6 +49,7 @@ import { UsernameSettingsComponent } from "./username-settings.component";
     SelectModule,
     ToggleGroupModule,
     TypographyModule,
+    NudgeGeneratorSpotlightComponent,
   ],
   declarations: [
     CatchallSettingsComponent,

libs/tools/generator/components/src/nudge-generator-spotlight.component.html

@@ -0,0 +1,15 @@
+<div class="tw-mb-4" *ngIf="showGeneratorSpotlight$ | async">
+  <bit-spotlight
+    [title]="'generatorNudgeTitle' | i18n"
+    (onDismiss)="dismissGeneratorSpotlight(NudgeType.GeneratorNudgeStatus)"
+  >
+    <p
+      class="tw-text-main"
+      bitTypography="body2"
+      [attr.aria-label]="'generatorNudgeIconAria' | i18n"
+    >
+      {{ "generatorNudgeBodyOne" | i18n }} <i class="bwi bwi-generate"></i>
+      {{ "generatorNudgeBodyTwo" | i18n }}
+    </p>
+  </bit-spotlight>
+</div>

libs/tools/generator/components/src/nudge-generator-spotlight.component.ts

@@ -0,0 +1,38 @@
+import { AsyncPipe, CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
+import { firstValueFrom, Observable, switchMap } from "rxjs";
+
+import { NudgesService, NudgeType } from "@bitwarden/angular/vault";
+import { SpotlightComponent } from "@bitwarden/angular/vault/components/spotlight/spotlight.component";
+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 { TypographyModule } from "@bitwarden/components";
+import { I18nPipe } from "@bitwarden/ui-common";
+
+@Component({
+  standalone: true,
+  selector: "nudge-generator-spotlight",
+  templateUrl: "nudge-generator-spotlight.component.html",
+  imports: [I18nPipe, SpotlightComponent, AsyncPipe, CommonModule, TypographyModule],
+})
+export class NudgeGeneratorSpotlightComponent {
+  protected readonly NudgeType = NudgeType;
+  private activeUserId$ = this.accountService.activeAccount$.pipe(getUserId);
+  protected showGeneratorSpotlight$: Observable<boolean> = this.activeUserId$.pipe(
+    switchMap((userId) =>
+      this.nudgesService.showNudgeSpotlight$(NudgeType.GeneratorNudgeStatus, userId),
+    ),
+  );
+
+  constructor(
+    private nudgesService: NudgesService,
+    private accountService: AccountService,
+  ) {}
+
+  async dismissGeneratorSpotlight(type: NudgeType) {
+    const activeUserId = await firstValueFrom(this.activeUserId$);
+
+    await this.nudgesService.dismissNudge(type, activeUserId as UserId);
+  }
+}