[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

apps/browser/src/_locales/en/messages.json

@@ -5276,8 +5276,20 @@
   "newLoginNudgeTitle": {
     "message": "Save time with autofill"
   },
-  "newLoginNudgeBody": {
+  "newLoginNudgeBodyOne": {
-    "message": "Include a Website so this login appears as an autofill suggestion."
+    "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": {
+  "newSshNudgeBodyOne": {
-    "message": "Store your keys and connect with the SSH agent for fast, encrypted authentication."
+    "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"
   }
 }

apps/desktop/src/locales/en/messages.json

@@ -3755,8 +3755,20 @@
   "newLoginNudgeTitle": {
     "message": "Save time with autofill"
   },
-  "newLoginNudgeBody": {
+  "newLoginNudgeBodyOne": {
-    "message": "Include a Website so this login appears as an autofill suggestion."
+    "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": {
+  "newSshNudgeBodyOne": {
-    "message": "Store your keys and connect with the SSH agent for fast, encrypted authentication."
+    "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"
   }
 }

apps/web/src/locales/en/messages.json

@@ -10638,8 +10638,20 @@
   "newLoginNudgeTitle": {
     "message": "Save time with autofill"
   },
-  "newLoginNudgeBody": {
+  "newLoginNudgeBodyOne": {
-    "message": "Include a Website so this login appears as an autofill suggestion."
+    "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": {
+  "newSshNudgeBodyOne": {
-    "message": "Store your keys and connect with the SSH agent for fast, encrypted authentication."
+    "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"

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);
   });
 

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");
     }

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">
+      <p class="tw-text-main tw-mb-0" bitTypography="body2" [innerHTML]="subtitle"></p>
-        {{ subtitle }}
-      </p>
     </div>
     <button
       type="button"

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,
+                hasSpotlightDismissed: vaultHasContents,
-                hasBadgeDismissed: emptyVault,
+                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,
+          hasSpotlightDismissed: vaultHasContents,
-          hasBadgeDismissed: emptyVault,
+          hasBadgeDismissed: vaultHasContents,
         });
       }),
     );