Skip to content

Commit

Permalink
MNTOR-3701, MNTOR-3702, MNTOR-3704 - Fix email count, align upgrade C…
Browse files Browse the repository at this point in the history 
…TA & add telemetry to View Dashboard + Upgrade CTA (#5229)

* MNTOR-3701 - Fix email count

* remove c8 ignore

* fix line height

* add telemetry

* add telemetry to buttons
  • Loading branch information
@codemist
codemist authored Oct 23, 2024
1 parent e12fe45 commit 17e4d72
Show file tree
Hide file tree
Showing 3 changed files with 122 additions and 147 deletions.
158 changes: 62 additions & 96 deletions src/emails/templates/monthlyActivityFree/MonthlyActivityFreeEmail.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
import { StorybookEmailRenderer } from "../../StorybookEmailRenderer";
import { getL10n } from "../../../app/functions/l10n/storybookAndJest";
import { SanitizedSubscriberRow } from "../../../app/functions/server/sanitize";
import { dataClassKeyMap } from "../../../app/functions/server/dashboard";

const meta: Meta<FC<MonthlyActivityFreeEmailProps>> = {
title: "Emails/Monthly activity (free user)",
Expand All @@ -29,38 +30,38 @@ type Story = StoryObj<MonthlyActivityFreeEmailProps>;

const mockedDataPoints = {
// shared
emailAddresses: 10,
phoneNumbers: 10,
emailAddresses: 0,
phoneNumbers: 0,

// data brokers
addresses: 10,
familyMembers: 10,
addresses: 0,
familyMembers: 0,

// data breaches
socialSecurityNumbers: 10,
ipAddresses: 10,
passwords: 10,
creditCardNumbers: 10,
pins: 10,
securityQuestions: 10,
bankAccountNumbers: 10,
socialSecurityNumbers: 0,
ipAddresses: 0,
passwords: 0,
creditCardNumbers: 0,
pins: 0,
securityQuestions: 0,
bankAccountNumbers: 0,
};

const mockedDataSummary = {
dataBreachTotalNum: 10,
dataBreachUnresolvedNum: 500,
dataBreachResolvedNum: 10,
dataBreachTotalDataPointsNum: 10,
dataBreachFixedDataPointsNum: 10,
dataBrokerTotalNum: 10,
dataBrokerTotalDataPointsNum: 10,
dataBrokerAutoFixedNum: 15,
dataBrokerManuallyResolvedNum: 10,
dataBrokerAutoFixedDataPointsNum: 10,
dataBrokerInProgressNum: 10,
dataBrokerInProgressDataPointsNum: 10,
dataBrokerManuallyResolvedDataPointsNum: 10,
totalDataPointsNum: 10,
dataBreachTotalNum: 0,
dataBreachUnresolvedNum: 0,
dataBreachResolvedNum: 0,
dataBreachTotalDataPointsNum: 0,
dataBreachFixedDataPointsNum: 0,
dataBrokerTotalNum: 0,
dataBrokerTotalDataPointsNum: 0,
dataBrokerAutoFixedNum: 0,
dataBrokerManuallyResolvedNum: 0,
dataBrokerAutoFixedDataPointsNum: 0,
dataBrokerInProgressNum: 0,
dataBrokerInProgressDataPointsNum: 0,
dataBrokerManuallyResolvedDataPointsNum: 0,
totalDataPointsNum: 0,
allDataPoints: mockedDataPoints,
unresolvedDataPoints: mockedDataPoints,
inProgressDataPoints: mockedDataPoints,
Expand All @@ -70,14 +71,13 @@ const mockedDataSummary = {
fixedSanitizedDataPoints: [],
};

export const MonthlyReportFreeUserNoScanWithExposures: Story = {
name: "No Scan With Exposures No Resolved",
export const MonthlyReportFreeUserNoScanWithBreachesNothingResolved: Story = {
name: "No Scan With Data Breaches, Nothing Resolved",
args: {
unsubscribeLink: "/",
dataSummary: {
...mockedDataSummary,
dataBreachResolvedNum: 0,
dataBrokerManuallyResolvedNum: 0,
dataBreachUnresolvedNum: 10,
},
subscriber: {
onerep_profile_id: null,
Expand All @@ -89,28 +89,17 @@ export const MonthlyReportFreeUserNoScanWithExposures: Story = {
},
};

export const MonthlyReportFreeUserWithScan: Story = {
name: "With Scan",
args: {
unsubscribeLink: "/",
dataSummary: mockedDataSummary,
subscriber: {
onerep_profile_id: 1,
fxa_profile_json: {
locale: "en-US",
subscriptions: ["not-monitor-plus"],
},
} as SanitizedSubscriberRow,
},
};

export const MonthlyReportFreeUserResolvedBreachesWithScan: Story = {
name: "With Scan and Resolved Breaches",
export const MonthlyReportFreeUserNoScanWithBreachesResolved: Story = {
name: "No Scan With Data Breaches, Breaches Resolved",
args: {
unsubscribeLink: "/",
dataSummary: mockedDataSummary,
dataSummary: {
...mockedDataSummary,
dataBreachUnresolvedNum: 10,
dataBreachResolvedNum: 5,
},
subscriber: {
onerep_profile_id: 1,
onerep_profile_id: null,
fxa_profile_json: {
locale: "en-US",
subscriptions: ["not-monitor-plus"],
Expand All @@ -119,15 +108,19 @@ export const MonthlyReportFreeUserResolvedBreachesWithScan: Story = {
},
};

export const MonthlyReportFreeUserResolvedBreachesWithScanWithUnresolvedBreachesAndBroker: Story =
// With scan, only check from unresolvedSanitizedDataPoints
export const MonthlyReportFreeUserWithScanWithExposuresNothingResolved: Story =
{
name: "With Scan and Unresolved Breaches and Brokers",
name: "With Scan With Data Breaches and Brokers, Nothing Resolved",
args: {
unsubscribeLink: "/",
dataSummary: {
...mockedDataSummary,
dataBreachUnresolvedNum: 12,
dataBrokerInProgressNum: 11,
unresolvedSanitizedDataPoints: [
{ [dataClassKeyMap.passwords]: 10 },
{ [dataClassKeyMap.familyMembers]: 10 },
{ [dataClassKeyMap.phoneNumbers]: 5 },
],
},
subscriber: {
onerep_profile_id: 1,
Expand All @@ -139,29 +132,22 @@ export const MonthlyReportFreeUserResolvedBreachesWithScanWithUnresolvedBreaches
},
};

export const MonthlyReportFreeUserResolvedBreachesWithoutScan: Story = {
name: "With Scan and Resolved Breaches",
args: {
unsubscribeLink: "/",
dataSummary: mockedDataSummary,
subscriber: {
onerep_profile_id: null,
fxa_profile_json: {
locale: "en-US",
subscriptions: ["not-monitor-plus"],
},
} as SanitizedSubscriberRow,
},
};

export const MonthlyReportFreeUserWithScanNoManuallyResolvedExposures: Story = {
name: "With Scan Without Manually Resolved Data Brokers, just Breaches",
export const MonthlyReportFreeUserWithScanWithExposuresResolved: Story = {
name: "With Scan With Data Breaches and Data Brokers and Resolved Exposures",
args: {
unsubscribeLink: "/",
dataSummary: {
...mockedDataSummary,
dataBreachResolvedNum: 5,
dataBrokerManuallyResolvedNum: 0,
unresolvedSanitizedDataPoints: [
{ [dataClassKeyMap.passwords]: 10 },
{ [dataClassKeyMap.familyMembers]: 10 },
{ [dataClassKeyMap.phoneNumbers]: 5 },
],
fixedSanitizedDataPoints: [
{ [dataClassKeyMap.passwords]: 10 },
{ [dataClassKeyMap.familyMembers]: 10 },
{ [dataClassKeyMap.phoneNumbers]: 5 },
],
},
subscriber: {
onerep_profile_id: 1,
Expand All @@ -173,14 +159,13 @@ export const MonthlyReportFreeUserWithScanNoManuallyResolvedExposures: Story = {
},
};

export const MonthlyReportFreeUserNoRemainingExposures: Story = {
export const MonthlyReportFreeUserWithScanNoRemainingExposures: Story = {
name: "With Scan No Remaining Exposures",
args: {
unsubscribeLink: "/",
dataSummary: {
...mockedDataSummary,
dataBreachUnresolvedNum: 0,
dataBrokerInProgressNum: 0,
unresolvedSanitizedDataPoints: [],
},
subscriber: {
onerep_profile_id: 1,
Expand All @@ -192,13 +177,13 @@ export const MonthlyReportFreeUserNoRemainingExposures: Story = {
},
};

export const MonthlyReportFreeUserNoScanNoExposuresRemaining: Story = {
name: "No Scan No Exposures Left",
export const MonthlyReportFreeUserWithoutScanNoExposures: Story = {
name: "No Scan No Remaining Exposures",
args: {
unsubscribeLink: "/",
dataSummary: {
...mockedDataSummary,
dataBreachUnresolvedNum: 0,
dataBreachResolvedNum: 0,
},
subscriber: {
onerep_profile_id: null,
Expand All @@ -209,22 +194,3 @@ export const MonthlyReportFreeUserNoScanNoExposuresRemaining: Story = {
} as SanitizedSubscriberRow,
},
};

export const MonthlyReportFreeUserWithScanNoExposuresRemaining: Story = {
name: "With Scan No Exposures Left",
args: {
unsubscribeLink: "/",
dataSummary: {
...mockedDataSummary,
dataBreachUnresolvedNum: 0,
dataBrokerInProgressNum: 0,
},
subscriber: {
onerep_profile_id: 1,
fxa_profile_json: {
locale: "en-US",
subscriptions: ["not-monitor-plus"],
},
} as SanitizedSubscriberRow,
},
};
51 changes: 31 additions & 20 deletions src/emails/templates/monthlyActivityFree/MonthlyActivityFreeEmail.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,16 @@ import { it } from "@jest/globals";
import { composeStory } from "@storybook/react";
import { render, screen } from "@testing-library/react";
import Meta, {
MonthlyReportFreeUserNoScanNoExposuresRemaining,
MonthlyReportFreeUserNoScanWithExposures,
MonthlyReportFreeUserWithScan,
MonthlyReportFreeUserWithScanNoExposuresRemaining,
MonthlyReportFreeUserNoScanWithBreachesNothingResolved,
MonthlyReportFreeUserWithoutScanNoExposures,
MonthlyReportFreeUserWithScanNoRemainingExposures,
MonthlyReportFreeUserWithScanWithExposuresNothingResolved,
MonthlyReportFreeUserWithScanWithExposuresResolved,
} from "./MonthlyActivityFreeEmail.stories";

it("shows the right cta label if a user has not yet run a scan", () => {
const ComposedEmail = composeStory(
MonthlyReportFreeUserNoScanWithExposures,
MonthlyReportFreeUserNoScanWithBreachesNothingResolved,
Meta,
);
render(<ComposedEmail />);
Expand All @@ -27,7 +28,10 @@ it("shows the right cta label if a user has not yet run a scan", () => {
});

it("shows the right cta label if a user has run a scan", () => {
const ComposedEmail = composeStory(MonthlyReportFreeUserWithScan, Meta);
const ComposedEmail = composeStory(
MonthlyReportFreeUserWithScanWithExposuresNothingResolved,
Meta,
);
render(<ComposedEmail />);

const getFirstScanFreeBtn = screen.getByRole("link", {
Expand All @@ -37,50 +41,57 @@ it("shows the right cta label if a user has run a scan", () => {
expect(getFirstScanFreeBtn).toBeInTheDocument();
});

it("shows the right data exposure value if a user is a free user", () => {
it("shows the inactive state if there are 0 manually resolved data breaches", () => {
const ComposedEmail = composeStory(
MonthlyReportFreeUserNoScanWithExposures,
MonthlyReportFreeUserNoScanWithBreachesNothingResolved,
Meta,
);
render(<ComposedEmail />);

// For free users, the data point count should be "Data breaches" instead
expect(screen.queryByText("Data exposures")).not.toBeInTheDocument();
const manuallyResolvedDataBreaches = screen.getByText(
"Manually resolved data breaches",
{ exact: false },
);

expect(manuallyResolvedDataBreaches).toHaveStyle("color: #9E9E9E");
});

it("shows the inactive state if there are 0 manually resolved data breaches", () => {
it("shows the active state if there are manually resolved data breaches", () => {
const ComposedEmail = composeStory(
MonthlyReportFreeUserNoScanWithExposures,
MonthlyReportFreeUserWithScanWithExposuresResolved,
Meta,
);
render(<ComposedEmail />);

const manuallyResolvedDataBreaches = screen.getByText(
"Manually resolved data breaches",
const manuallyResolvedExposures = screen.getByText(
"Manually resolved exposures",
{ exact: false },
);

expect(manuallyResolvedDataBreaches).toHaveStyle("color: #9E9E9E");
expect(manuallyResolvedExposures).toHaveStyle("color: #7542E5");
});

it("says exposures instead of breaches once a user has run a scan", () => {
const ComposedEmail = composeStory(MonthlyReportFreeUserWithScan, Meta);
const ComposedEmail = composeStory(
MonthlyReportFreeUserWithScanWithExposuresNothingResolved,
Meta,
);
render(<ComposedEmail />);

const manuallyResolvedDataBreaches = screen.getByText(
const manuallyResolvedExposures = screen.getByText(
"Manually resolved exposures",
{ exact: false },
);

const dataExposures = screen.getByText("Data exposures", { exact: false });

expect(manuallyResolvedDataBreaches).toBeInTheDocument();
expect(manuallyResolvedExposures).toBeInTheDocument();
expect(dataExposures).toBeInTheDocument();
});

it("shows the congratulatory banner if no exposures remaining before scan", () => {
const ComposedEmail = composeStory(
MonthlyReportFreeUserNoScanNoExposuresRemaining,
MonthlyReportFreeUserWithoutScanNoExposures,
Meta,
);
render(<ComposedEmail />);
Expand All @@ -92,7 +103,7 @@ it("shows the congratulatory banner if no exposures remaining before scan", () =

it("shows the congratulatory banner if no exposures remaining after scan", () => {
const ComposedEmail = composeStory(
MonthlyReportFreeUserWithScanNoExposuresRemaining,
MonthlyReportFreeUserWithScanNoRemainingExposures,
Meta,
);
render(<ComposedEmail />);
Expand Down
Loading

0 comments on commit 17e4d72

Please sign in to comment.