MNTOR-3902 - Design changes to monthly report emails

locales-pending/emails-all.ftl

@@ -68,13 +68,13 @@ email-breach-alert-plus-scan-results-data-points-label =
         [one] Data exposure
        *[other] Data exposures
     }
-email-breach-alert-plus-scan-results-cta-label = Take action to resolve these exposures
 email-breach-alert-plus-scan-results-trailer = We’ll guide you step-by-step through the process
+email-breach-alert-scan-results-cta-label = Resolve exposures
 
 # Monthly Report Free User
 
 email-monthly-report-hero-free-heading = Your monthly { -brand-mozilla-monitor } report
-email-monthly-report-hero-free-body = A summary of what needs your attention, and what’s been resolved over the past month.
+email-monthly-report-hero-free-subtitle = A summary of what needs attention and what’s been resolved this month.
 
 ## This string is displayed under a large numeral that indicates the total
 ## number of data breaches that have exposed the user’s information.
@@ -91,30 +91,19 @@ email-monthly-report-no-scan-results-data-points-label =
     }
 email-monthly-report-free-summary-auto-removed =
   { $data_point_count ->
-        [one] Auto-removed exposure
-       *[other] Auto-removed exposures
-    }
-email-monthly-report-free-summary-resolved-breaches =
-  { $data_point_count ->
-        [one] Manually resolved data breach
-       *[other] Manually resolved data breaches
-    }
-email-monthly-report-free-summary-manually-resolved-exposures =
-  { $data_point_count ->
-        [one] Manually resolved exposure
-       *[other] Manually resolved exposures
+        [one] Auto-removed exposure*
+       *[other] Auto-removed exposures*
     }
+email-monthly-report-free-broker-scan-available = Free data broker scan available
+email-monthly-report-free-breaches-resolved-manually = Data breaches resolved manually
 
 ##
 
 email-monthly-report-free-results-heading = Current exposures
 email-monthly-report-free-summary-heading = What’s happened in the last month
-email-monthly-report-free-upgrade-cta = Unlock with { -brand-monitor-plus }
-email-monthly-report-free-banner-heading = { -brand-monitor } now protects you even more
-email-monthly-report-free-banner-body = We can find your personal info on data broker sites that sell it for a profit.
-email-monthly-report-free-banner-cta-free-scan = Get first scan free
-email-monthly-report-free-banner-cta-upgrade = Get { -brand-monitor-plus }
+email-monthly-report-free-upgrade-cta = * Unlock with { -brand-monitor-plus }
+email-monthly-report-free-view-details = View details
 email-monthly-report-hero-free-no-breaches-heading = Great news!
-email-monthly-report-hero-free-no-breaches-body = You currently have no data breaches that need action.
-email-monthly-report-hero-free-no-breaches-cta = View your Dashboard
+email-monthly-report-hero-free-no-breaches-body = { -brand-monitor } didn’t find any data exposures to be resolved.
+email-monthly-report-hero-free-no-breaches-cta = View your dashboard
 email-unsubscribe-link = <link_to_unsub>Unsubscribe from this email</link_to_unsub> anytime.

src/emails/components/EmailBanner.tsx

@@ -68,7 +68,7 @@ export const EmailBanner = (props: {
 
             <mj-button
               href={props.ctaTarget}
-              background-color="#0060DF"
+              background-color="#592ACB"
               font-weight={600}
               font-size="15px"
               line-height="22px"

src/emails/components/EmailDataPointCount.tsx

@@ -101,18 +101,16 @@ export const DataPointCount = (props: Props) => {
       >
         <mj-column>
           <mj-button
-            href={`${process.env.SERVER_URL}/user/dashboard/action-needed?utm_source=monitor-product&utm_medium=product-email&utm_campaign=${props.utmCampaignId}&utm_content=take-action${utmContentSuffix}`}
-            background-color="#0060DF"
+            href={`${process.env.SERVER_URL}/user/dashboard/action-needed?utm_source=monitor-product&utm_medium=product-email&utm_campaign=${props.utmCampaignId}&utm_content=resolve-exposures-${utmContentSuffix}`}
+            background-color="#592ACB"
             border-radius="8px"
             padding="12px 24px"
             font-weight={600}
             font-size="15px"
             line-height="22px"
             width="100%"
           >
-            {props.l10n.getString(
-              "email-breach-alert-plus-scan-results-cta-label",
-            )}
+            {props.l10n.getString("email-breach-alert-scan-results-cta-label")}
           </mj-button>
           <mj-text
             font-size="12px"

src/emails/templates/breachAlert/BreachAlertEmail.test.tsx

@@ -147,7 +147,7 @@ describe("The redesigned breach alert email", () => {
     render(<ComposedEmail />);
 
     const takeActionButton = screen.getByRole("link", {
-      name: "Take action to resolve these exposures",
+      name: "Resolve exposures",
     });
     expect(takeActionButton).toBeInTheDocument();
   });

src/emails/templates/monthlyActivityFree/MonthlyActivityFreeEmail.stories.tsx

@@ -109,7 +109,6 @@ export const MonthlyReportFreeUserNoScanWithBreachesResolved: Story = {
   },
 };
 
-// With scan, only check from unresolvedSanitizedDataPoints
 export const MonthlyReportFreeUserWithScanWithExposuresNothingResolved: Story =
   {
     name: "With Scan With Data Breaches and Brokers, Nothing Resolved",
@@ -134,7 +133,7 @@ export const MonthlyReportFreeUserWithScanWithExposuresNothingResolved: Story =
   };
 
 export const MonthlyReportFreeUserWithScanWithExposuresResolved: Story = {
-  name: "With Scan With Data Breaches and Data Brokers and Resolved Exposures",
+  name: "With Scan With Data Breaches and Data Brokers and Resolved Breaches",
   args: {
     unsubscribeLink: "/",
     dataSummary: {
@@ -144,11 +143,7 @@ export const MonthlyReportFreeUserWithScanWithExposuresResolved: Story = {
         { [dataClassKeyMap.familyMembers]: 10 },
         { [dataClassKeyMap.phoneNumbers]: 5 },
       ],
-      fixedSanitizedDataPoints: [
-        { [dataClassKeyMap.passwords]: 10 },
-        { [dataClassKeyMap.familyMembers]: 10 },
-        { [dataClassKeyMap.phoneNumbers]: 5 },
-      ],
+      dataBreachResolvedNum: 3,
     },
     subscriber: {
       onerep_profile_id: 1,

src/emails/templates/monthlyActivityFree/MonthlyActivityFreeEmail.test.tsx

@@ -13,32 +13,32 @@ import Meta, {
   MonthlyReportFreeUserWithScanWithExposuresResolved,
 } from "./MonthlyActivityFreeEmail.stories";
 
-it("shows the right cta label if a user has not yet run a scan", () => {
+it("shows the right label in the right box if a scan hasn't been run", () => {
   const ComposedEmail = composeStory(
     MonthlyReportFreeUserNoScanWithBreachesNothingResolved,
     Meta,
   );
   render(<ComposedEmail />);
 
-  const getFirstScanFreeBtn = screen.getByRole("link", {
-    name: "Get first scan free",
-  });
+  const getFirstScanFreeLabel = screen.getByText(
+    "Free data broker scan available",
+  );
 
-  expect(getFirstScanFreeBtn).toBeInTheDocument();
+  expect(getFirstScanFreeLabel).toBeInTheDocument();
 });
 
-it("shows the right cta label if a user has run a scan", () => {
+it("shows the right label in the right box if a user has run a scan", () => {
   const ComposedEmail = composeStory(
     MonthlyReportFreeUserWithScanWithExposuresNothingResolved,
     Meta,
   );
   render(<ComposedEmail />);
 
-  const getFirstScanFreeBtn = screen.getByRole("link", {
-    name: "Get ⁨Monitor Plus⁩",
+  const autoRemovedExposuresLabel = screen.getByText("Auto-removed exposures", {
+    exact: false,
   });
 
-  expect(getFirstScanFreeBtn).toBeInTheDocument();
+  expect(autoRemovedExposuresLabel).toBeInTheDocument();
 });
 
 it("shows the inactive state if there are 0 manually resolved data breaches", () => {
@@ -49,11 +49,11 @@ it("shows the inactive state if there are 0 manually resolved data breaches", ()
   render(<ComposedEmail />);
 
   const manuallyResolvedDataBreaches = screen.getByText(
-    "Manually resolved data breaches",
+    "Data breaches resolved manually",
     { exact: false },
   );
 
-  expect(manuallyResolvedDataBreaches).toHaveStyle("color: #9E9E9E");
+  expect(manuallyResolvedDataBreaches).toHaveStyle("color: #6D6D6E");
 });
 
 it("shows the active state if there are manually resolved data breaches", () => {
@@ -64,11 +64,11 @@ it("shows the active state if there are manually resolved data breaches", () =>
   render(<ComposedEmail />);
 
   const manuallyResolvedExposures = screen.getByText(
-    "Manually resolved exposures",
+    "Data breaches resolved manually",
     { exact: false },
   );
 
-  expect(manuallyResolvedExposures).toHaveStyle("color: #7542E5");
+  expect(manuallyResolvedExposures).toHaveStyle("color: #000000");
 });
 
 it("says exposures instead of breaches once a user has run a scan", () => {
@@ -78,14 +78,9 @@ it("says exposures instead of breaches once a user has run a scan", () => {
   );
   render(<ComposedEmail />);
 
-  const manuallyResolvedExposures = screen.getByText(
-    "Manually resolved exposures",
-    { exact: false },
-  );
-
-  const dataExposures = screen.getByText("Data exposures", { exact: false });
+  const dataExposures = screen.getByText("Data exposures", { exact: true });
 
-  expect(manuallyResolvedExposures).toBeInTheDocument();
+  expect(screen.queryByText("Data breaches", { exact: true })).toBeNull();
   expect(dataExposures).toBeInTheDocument();
 });