[PM-18803] New Item Nudge Login Spotlight Bold Copy Text (#14589)

* updated new-item-nudge.component to include bold text for login spotlight. and link in ssh spotlight
2025-12-10 21:33:27 +00:00 · 2025-05-05 11:59:25 -04:00
parent 28f00e5533
commit 60bafc1311
7 changed files with 90 additions and 26 deletions
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -5276,8 +5276,20 @@
  "newLoginNudgeTitle": {
    "message": "Save time with autofill"
  },
-  "newLoginNudgeBody": {
-    "message": "Include a Website so this login appears as an autofill suggestion."
+  "newLoginNudgeBodyOne": {
+    "message": "Include a",
+    "description": "This is in multiple parts to allow for bold text in the middle of the sentence.",
+    "example": "Include a Website so this login appears as an autofill suggestion."
+  },
+  "newLoginNudgeBodyBold": {
+    "message": "Website",
+    "description": "This is in multiple parts to allow for bold text in the middle of the sentence.",
+    "example": "Include a Website so this login appears as an autofill suggestion."
+  },
+  "newLoginNudgeBodyTwo": {
+    "message": "so this login appears as an autofill suggestion.",
+    "description": "This is in multiple parts to allow for bold text in the middle of the sentence.",
+    "example": "Include a Website so this login appears as an autofill suggestion."
  },
  "newCardNudgeTitle": {
    "message": "Seamless online checkout"
@@ -5300,7 +5312,14 @@
  "newSshNudgeTitle": {
    "message": "Developer-friendly SSH access"
  },
-  "newSshNudgeBody": {
-    "message": "Store your keys and connect with the SSH agent for fast, encrypted authentication."
+  "newSshNudgeBodyOne": {
+    "message": "Store your keys and connect with the SSH agent for fast, encrypted authentication.",
+    "description": "Two part message",
+    "example": "Store your keys and connect with the SSH agent for fast, encrypted authentication. Learn more about SSH agent"
+  },
+  "newSshNudgeBodyTwo": {
+    "message": "Learn more about SSH agent",
+    "description": "Two part message",
+    "example": "Store your keys and connect with the SSH agent for fast, encrypted authentication. Learn more about SSH agent"
  }
 }
--- a/apps/desktop/src/locales/en/messages.json
+++ b/apps/desktop/src/locales/en/messages.json
@@ -3755,8 +3755,20 @@
  "newLoginNudgeTitle": {
    "message": "Save time with autofill"
  },
-  "newLoginNudgeBody": {
-    "message": "Include a Website so this login appears as an autofill suggestion."
+  "newLoginNudgeBodyOne": {
+    "message": "Include a",
+    "description": "This is in multiple parts to allow for bold text in the middle of the sentence.",
+    "example": "Include a Website so this login appears as an autofill suggestion."
+  },
+  "newLoginNudgeBodyBold": {
+    "message": "Website",
+    "description": "This is in multiple parts to allow for bold text in the middle of the sentence.",
+    "example": "Include a Website so this login appears as an autofill suggestion."
+  },
+  "newLoginNudgeBodyTwo": {
+    "message": "so this login appears as an autofill suggestion.",
+    "description": "This is in multiple parts to allow for bold text in the middle of the sentence.",
+    "example": "Include a Website so this login appears as an autofill suggestion."
  },
  "newCardNudgeTitle": {
    "message": "Seamless online checkout"
@@ -3779,7 +3791,14 @@
  "newSshNudgeTitle": {
    "message": "Developer-friendly SSH access"
  },
-  "newSshNudgeBody": {
-    "message": "Store your keys and connect with the SSH agent for fast, encrypted authentication."
+  "newSshNudgeBodyOne": {
+    "message": "Store your keys and connect with the SSH agent for fast, encrypted authentication.",
+    "description": "Two part message",
+    "example": "Store your keys and connect with the SSH agent for fast, encrypted authentication. Learn more about SSH agent"
+  },
+  "newSshNudgeBodyTwo": {
+    "message": "Learn more about SSH agent",
+    "description": "Two part message",
+    "example": "Store your keys and connect with the SSH agent for fast, encrypted authentication. Learn more about SSH agent"
  }
 }
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -10638,8 +10638,20 @@
  "newLoginNudgeTitle": {
    "message": "Save time with autofill"
  },
-  "newLoginNudgeBody": {
-    "message": "Include a Website so this login appears as an autofill suggestion."
+  "newLoginNudgeBodyOne": {
+    "message": "Include a",
+    "description": "This is in multiple parts to allow for bold text in the middle of the sentence.",
+    "example": "Include a Website so this login appears as an autofill suggestion."
+  },
+  "newLoginNudgeBodyBold": {
+    "message": "Website",
+    "description": "This is in multiple parts to allow for bold text in the middle of the sentence.",
+    "example": "Include a Website so this login appears as an autofill suggestion."
+  },
+  "newLoginNudgeBodyTwo": {
+    "message": "so this login appears as an autofill suggestion.",
+    "description": "This is in multiple parts to allow for bold text in the middle of the sentence.",
+    "example": "Include a Website so this login appears as an autofill suggestion."
  },
  "newCardNudgeTitle": {
    "message": "Seamless online checkout"
@@ -10662,8 +10674,15 @@
  "newSshNudgeTitle": {
    "message": "Developer-friendly SSH access"
  },
-  "newSshNudgeBody": {
-    "message": "Store your keys and connect with the SSH agent for fast, encrypted authentication."
+  "newSshNudgeBodyOne": {
+    "message": "Store your keys and connect with the SSH agent for fast, encrypted authentication.",
+    "description": "Two part message",
+    "example": "Store your keys and connect with the SSH agent for fast, encrypted authentication. Learn more about SSH agent"
+  },
+  "newSshNudgeBodyTwo": {
+    "message": "Learn more about SSH agent",
+    "description": "Two part message",
+    "example": "Store your keys and connect with the SSH agent for fast, encrypted authentication. Learn more about SSH agent"
  },
  "restart": {
    "message": "Restart"
--- a/libs/vault/src/cipher-form/components/new-item-nudge/new-item-nudge.component.spec.ts
+++ b/libs/vault/src/cipher-form/components/new-item-nudge/new-item-nudge.component.spec.ts
@@ -55,7 +55,9 @@ describe("NewItemNudgeComponent", () => {

    expect(component.showNewItemSpotlight).toBe(true);
    expect(component.nudgeTitle).toBe("newLoginNudgeTitle");
-    expect(component.nudgeBody).toBe("newLoginNudgeBody");
+    expect(component.nudgeBody).toBe(
+      "newLoginNudgeBodyOne <strong>newLoginNudgeBodyBold</strong> newLoginNudgeBodyTwo",
+    );
    expect(component.dismissalNudgeType).toBe(VaultNudgeType.newLoginItemStatus);
  });

--- a/libs/vault/src/cipher-form/components/new-item-nudge/new-item-nudge.component.ts
+++ b/libs/vault/src/cipher-form/components/new-item-nudge/new-item-nudge.component.ts
@@ -35,12 +35,15 @@ export class NewItemNudgeComponent implements OnInit {
    this.activeUserId = await firstValueFrom(getUserId(this.accountService.activeAccount$));

    switch (this.configType) {
-      case CipherType.Login:
+      case CipherType.Login: {
+        const nudgeBodyOne = this.i18nService.t("newLoginNudgeBodyOne");
+        const nudgeBodyBold = this.i18nService.t("newLoginNudgeBodyBold");
+        const nudgeBodyTwo = this.i18nService.t("newLoginNudgeBodyTwo");
        this.dismissalNudgeType = VaultNudgeType.newLoginItemStatus;
        this.nudgeTitle = this.i18nService.t("newLoginNudgeTitle");
-        this.nudgeBody = this.i18nService.t("newLoginNudgeBody");
+        this.nudgeBody = `${nudgeBodyOne} <strong>${nudgeBodyBold}</strong> ${nudgeBodyTwo}`;
        break;
-
+      }
      case CipherType.Card:
        this.dismissalNudgeType = VaultNudgeType.newCardItemStatus;
        this.nudgeTitle = this.i18nService.t("newCardNudgeTitle");
@@ -59,11 +62,15 @@ export class NewItemNudgeComponent implements OnInit {
        this.nudgeBody = this.i18nService.t("newNoteNudgeBody");
        break;

-      case CipherType.SshKey:
+      case CipherType.SshKey: {
+        const sshPartOne = this.i18nService.t("newSshNudgeBodyOne");
+        const sshPartTwo = this.i18nService.t("newSshNudgeBodyTwo");
+
        this.dismissalNudgeType = VaultNudgeType.newSshItemStatus;
        this.nudgeTitle = this.i18nService.t("newSshNudgeTitle");
-        this.nudgeBody = this.i18nService.t("newSshNudgeBody");
+        this.nudgeBody = `${sshPartOne} <a href="https://bitwarden.com/help/ssh-agent" class="tw-text-primary-600 tw-font-bold" target="_blank">${sshPartTwo}</a>`;
        break;
+      }
      default:
        throw new Error("Unsupported cipher type");
    }
--- a/libs/vault/src/components/spotlight/spotlight.component.html
+++ b/libs/vault/src/components/spotlight/spotlight.component.html
@@ -4,9 +4,7 @@
  <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>
-      <p class="tw-text-main tw-mb-0" bitTypography="body2">
-        {{ subtitle }}
-      </p>
+      <p class="tw-text-main tw-mb-0" bitTypography="body2" [innerHTML]="subtitle"></p>
    </div>
    <button
      type="button"
--- 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
@@ -28,13 +28,13 @@ export class EmptyVaultNudgeService extends DefaultSingleNudgeService {
      this.collectionService.decryptedCollections$,
    ]).pipe(
      switchMap(([nudgeStatus, ciphers, orgs, collections]) => {
-        const emptyVault = ciphers == null || ciphers.length === 0;
+        const vaultHasContents = !(ciphers == null || ciphers.length === 0);
        if (orgs == null || orgs.length === 0) {
          return nudgeStatus.hasBadgeDismissed || nudgeStatus.hasSpotlightDismissed
            ? of(nudgeStatus)
            : of({
-                hasSpotlightDismissed: emptyVault,
-                hasBadgeDismissed: emptyVault,
+                hasSpotlightDismissed: vaultHasContents,
+                hasBadgeDismissed: vaultHasContents,
              });
        }
        const orgIds = new Set(orgs.map((org) => org.id));
@@ -55,8 +55,8 @@ export class EmptyVaultNudgeService extends DefaultSingleNudgeService {
          return of(nudgeStatus);
        }
        return of({
-          hasSpotlightDismissed: emptyVault,
-          hasBadgeDismissed: emptyVault,
+          hasSpotlightDismissed: vaultHasContents,
+          hasBadgeDismissed: vaultHasContents,
        });
      }),
    );