Add templates for the monthly activity emails
|
@ -13,3 +13,57 @@ email-footer-support-content = Visit our <support-link>Support Center</support-l
|
|||
email-footer-reason-subscriber = You’re receiving this automated email as a subscriber of { -brand-mozilla-monitor }. If you received it in error, no action is required. For more information, please visit <support-link>{ -brand-Mozilla } Support</support-link>.
|
||||
email-footer-source-hibp = Breach data provided by <hibp-link>{ -brand-HIBP }</hibp-link>
|
||||
email-footer-logo-mozilla-alt = { -brand-mozilla }
|
||||
|
||||
## Monthly overview email
|
||||
|
||||
# Variables:
|
||||
# $month (string) - Translated month this email is about, e.g. "April"
|
||||
email-monthly-plus-manual-subject = Your { $month } { -brand-monitor } report
|
||||
email-monthly-plus-manual-preview = See what was fixed this month and what needs your attention.
|
||||
email-monthly-plus-manual-hero-heading = Your monthly { -brand-monitor } activity
|
||||
email-monthly-plus-manual-hero-content = We’re always working to help keep your personal info safe. Here’s what’s happened over the past month.
|
||||
email-monthly-plus-manual-intro-content = As a { -brand-monitor-plus } subscriber, you have our highest level of protection. Sign in to see what exposures need you to take action, and what’s already been fixed.
|
||||
email-monthly-plus-manual-cta-label = View your dashboard
|
||||
email-monthly-plus-manual-fixed-heading = What we fixed
|
||||
email-monthly-plus-manual-fixed-lead = We auto-remove your personal info from data broker sites — no matter how many times they re-add you. And we guide you to resolve data breaches that require manual action.
|
||||
# Accompanies a number that indicates how many data broker exposures the user fixed themselves
|
||||
email-monthly-plus-manual-fixed-section-manual-heading = Manually fixed
|
||||
# Accompanies a number that indicates how many data broker exposures we're still fixing
|
||||
email-monthly-plus-manual-fixed-section-in-progress-heading = Removals in progress
|
||||
# Accompanies a number that indicates how many data broker exposures we've already fixed
|
||||
email-monthly-plus-manual-fixed-section-done-heading = Auto-removed
|
||||
|
||||
# Variables:
|
||||
# $month (string) - Translated month this email is about, e.g. "April"
|
||||
email-monthly-plus-auto-subject = Your { $month } { -brand-monitor } report
|
||||
email-monthly-plus-auto-preview = See how we’ve protected your personal information.
|
||||
email-monthly-plus-auto-hero-heading = Your { -brand-monitor-plus } protection
|
||||
email-monthly-plus-auto-hero-content = We’re always working to help keep your personal info safe. Here’s how we’ve protected you.
|
||||
email-monthly-plus-auto-intro-content = As a { -brand-monitor-plus } subscriber, you have our highest level of protection. We remove your personal info from data broker sites — no matter how many times they re-add you. We also help you resolve data breaches that require manual action. Here’s what we fixed:
|
||||
email-monthly-plus-auto-cta-label = View all activity
|
||||
# Accompanies a number that indicates how many data broker exposures the user fixed themselves
|
||||
email-monthly-plus-auto-fixed-section-manual-heading = Manually fixed
|
||||
# Accompanies a number that indicates how many data broker exposures we're still fixing
|
||||
email-monthly-plus-auto-fixed-section-in-progress-heading = Removals in progress
|
||||
# Accompanies a number that indicates how many data broker exposures we've already fixed
|
||||
email-monthly-plus-auto-fixed-section-done-heading = Auto-removed
|
||||
|
||||
# Variables:
|
||||
# $month (string) - Translated month this email is about, e.g. "April"
|
||||
email-monthly-free-subject = Your { $month } { -brand-monitor } report
|
||||
email-monthly-free-preview = See what was fixed this month and what needs your attention.
|
||||
email-monthly-free-hero-heading = Your monthly { -brand-monitor } activity
|
||||
email-monthly-free-hero-content = We work hard to keep your personal info safe. Find out what’s happened this month.
|
||||
email-monthly-free-intro-content = We constantly monitor for new exposures of your personal info. Sign in to see what exposures need you to take action, and what’s already been fixed.
|
||||
email-monthly-free-cta-label = View your dashboard
|
||||
email-monthly-free-fixed-heading = What we fixed
|
||||
email-monthly-free-fixed-lead = We guide you to resolve data breaches that require manual action. For { -brand-monitor-plus } subscribers, we auto-remove your personal info from data broker sites that are selling it.
|
||||
# Accompanies a number that indicates how many data broker exposures the user fixed themselves
|
||||
email-monthly-free-fixed-section-manual-heading = Manually fixed
|
||||
# Accompanies a number that indicates how many data broker exposures we're still fixing (always 0 for free users)
|
||||
email-monthly-free-fixed-section-in-progress-heading = Removals in progress
|
||||
# Accompanies a number that indicates how many data broker exposures we've already fixed (always 0 for free users)
|
||||
email-monthly-free-fixed-section-done-heading = Auto-removed
|
||||
email-monthly-free-banner-plus-heading = Upgrade for extra protection
|
||||
email-monthly-free-banner-plus-content = Get auto-removal of your profiles for sale plus continuous monitoring for new exposures.
|
||||
email-monthly-free-banner-plus-cta-label = Get { -brand-monitor-plus }
|
||||
|
|
После Ширина: | Высота: | Размер: 13 KiB |
После Ширина: | Высота: | Размер: 7.1 KiB |
После Ширина: | Высота: | Размер: 2.8 KiB |
Двоичные данные
public/images/email/monthly-activity/illustration-in-progress-disabled.png
Normal file
После Ширина: | Высота: | Размер: 7.7 KiB |
После Ширина: | Высота: | Размер: 3.4 KiB |
После Ширина: | Высота: | Размер: 2.8 KiB |
После Ширина: | Высота: | Размер: 3.3 KiB |
|
@ -8,9 +8,9 @@ declare namespace React.JSX {
|
|||
"mj-class": string;
|
||||
}>;
|
||||
|
||||
type MjmlValuePx = `${number}px`;
|
||||
type MjmlValueEm = `${number}em`;
|
||||
type MjmlValuePercentage = `${number}%`;
|
||||
type MjmlValuePx = `${number}px` | "0";
|
||||
type MjmlValueEm = `${number}em` | "0";
|
||||
type MjmlValuePercentage = `${number}%` | "0";
|
||||
type MjmlValueAlign = "left" | "right" | "center";
|
||||
type MjmlValueVerticalAlign = "top" | "middle" | "bottom";
|
||||
|
||||
|
@ -97,7 +97,11 @@ declare namespace React.JSX {
|
|||
href?: string;
|
||||
"inner-padding"?: MjmlValuePx;
|
||||
"letter-spacing"?: MjmlValuePx | MjmlValueEm;
|
||||
"line-height"?: MjmlValueEm | MjmlValuePercentage | undefined;
|
||||
"line-height"?:
|
||||
| MjmlValuePx
|
||||
| MjmlValueEm
|
||||
| MjmlValuePercentage
|
||||
| undefined;
|
||||
rel?: AnchorHTMLAttributes<HTMLAnchorElement>["rel"];
|
||||
target?: AnchorHTMLAttributes<HTMLAnchorElement>["target"];
|
||||
"text-align"?: MjmlValueAlign;
|
||||
|
|
|
@ -0,0 +1,80 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { FC } from "react";
|
||||
import { Props, MonthlyActivityEmail } from "./MonthlyActivityEmail";
|
||||
import { StorybookEmailRenderer } from "../../StorybookEmailRenderer";
|
||||
import { SanitizedSubscriberRow } from "../../../app/functions/server/sanitize";
|
||||
import { getSpecificL10nSync } from "../../../app/functions/server/mockL10n";
|
||||
import { DashboardSummary } from "../../../app/functions/server/dashboard";
|
||||
|
||||
const meta: Meta<FC<Props>> = {
|
||||
title: "Emails/Monthly activity",
|
||||
component: (props: Props) => (
|
||||
<StorybookEmailRenderer>
|
||||
<MonthlyActivityEmail {...props} />
|
||||
</StorybookEmailRenderer>
|
||||
),
|
||||
args: {
|
||||
l10n: getSpecificL10nSync("en"),
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<FC<Props>>;
|
||||
|
||||
export const MonthlyActivityEmailPlusWithManualStory: Story = {
|
||||
name: "A Plus user, with manually-resolved items",
|
||||
args: {
|
||||
subscriber: {
|
||||
signup_language: "en",
|
||||
fxa_profile_json: {
|
||||
subscriptions: ["monitor"],
|
||||
},
|
||||
} as SanitizedSubscriberRow,
|
||||
data: {
|
||||
dataBrokerManuallyResolvedDataPointsNum: 40,
|
||||
dataBreachFixedDataPointsNum: 2,
|
||||
dataBrokerInProgressDataPointsNum: 13,
|
||||
dataBrokerAutoFixedDataPointsNum: 37,
|
||||
} as DashboardSummary,
|
||||
},
|
||||
};
|
||||
|
||||
export const MonthlyActivityEmailPlusWithoutManualStory: Story = {
|
||||
name: "A Plus user, with only auto-resolved items",
|
||||
args: {
|
||||
subscriber: {
|
||||
signup_language: "en",
|
||||
fxa_profile_json: {
|
||||
subscriptions: ["monitor"],
|
||||
},
|
||||
} as SanitizedSubscriberRow,
|
||||
data: {
|
||||
dataBrokerManuallyResolvedDataPointsNum: 0,
|
||||
dataBreachFixedDataPointsNum: 0,
|
||||
dataBrokerInProgressDataPointsNum: 13,
|
||||
dataBrokerAutoFixedDataPointsNum: 37,
|
||||
} as DashboardSummary,
|
||||
},
|
||||
};
|
||||
|
||||
export const MonthlyActivityEmailFreeStory: Story = {
|
||||
name: "A free user",
|
||||
args: {
|
||||
subscriber: {
|
||||
signup_language: "en",
|
||||
fxa_profile_json: {
|
||||
subscriptions: ["not-monitor"],
|
||||
},
|
||||
} as SanitizedSubscriberRow,
|
||||
data: {
|
||||
dataBrokerManuallyResolvedDataPointsNum: 40,
|
||||
dataBreachFixedDataPointsNum: 2,
|
||||
dataBrokerInProgressDataPointsNum: 0,
|
||||
dataBrokerAutoFixedDataPointsNum: 0,
|
||||
} as DashboardSummary,
|
||||
},
|
||||
};
|
|
@ -0,0 +1,520 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
import { DashboardSummary } from "../../../app/functions/server/dashboard";
|
||||
import { SanitizedSubscriberRow } from "../../../app/functions/server/sanitize";
|
||||
import { ExtendedReactLocalization } from "../../../app/hooks/l10n";
|
||||
import { EmailFooter } from "../EmailFooter";
|
||||
import { EmailHeader } from "../EmailHeader";
|
||||
|
||||
export type Props = {
|
||||
subscriber: SanitizedSubscriberRow;
|
||||
l10n: ExtendedReactLocalization;
|
||||
data: DashboardSummary;
|
||||
};
|
||||
|
||||
export const MonthlyActivityEmail = (props: Props) => {
|
||||
if (props.subscriber.fxa_profile_json?.subscriptions?.includes("monitor")) {
|
||||
if (
|
||||
props.data.dataBreachFixedDataPointsNum +
|
||||
props.data.dataBrokerManuallyResolvedDataPointsNum >
|
||||
0
|
||||
) {
|
||||
return <MonthlyActivityPlusWithManualRemovalsEmail {...props} />;
|
||||
}
|
||||
|
||||
return <MonthlyActivityPlusWithAutoRemovalsOnlyEmail {...props} />;
|
||||
}
|
||||
|
||||
return <MonthlyActivityFreeEmail {...props} />;
|
||||
};
|
||||
|
||||
const MonthlyActivityPlusWithManualRemovalsEmail = (props: Props) => {
|
||||
const l10n = props.l10n;
|
||||
const utmCampaign = "monthly-report-plus";
|
||||
|
||||
return (
|
||||
<mjml>
|
||||
<mj-head>
|
||||
<mj-preview>
|
||||
{l10n.getString("email-monthly-plus-manual-preview")}
|
||||
</mj-preview>
|
||||
</mj-head>
|
||||
<mj-body background-color="#F9F9FA">
|
||||
<EmailHeader l10n={l10n} utm_campaign={utmCampaign} />
|
||||
<mj-section
|
||||
full-width="full-width"
|
||||
background-color="white"
|
||||
background-position-x="center"
|
||||
background-url={`${process.env.SERVER_URL}/images/email/monthly-activity/hero-bg.png`}
|
||||
background-repeat="no-repeat"
|
||||
text-align="left"
|
||||
>
|
||||
<mj-column width="50%">
|
||||
<mj-text font-size="38px" line-height="40px" font-weight={700}>
|
||||
{l10n.getString("email-monthly-plus-manual-hero-heading")}
|
||||
</mj-text>
|
||||
<mj-text font-size="18px" line-height="27px" font-weight={400}>
|
||||
{l10n.getString("email-monthly-plus-manual-hero-content")}
|
||||
</mj-text>
|
||||
</mj-column>
|
||||
</mj-section>
|
||||
<mj-section padding="20px">
|
||||
<mj-column>
|
||||
<mj-text
|
||||
align="center"
|
||||
font-size="16px"
|
||||
line-height="24px"
|
||||
padding-bottom="40px"
|
||||
>
|
||||
{l10n.getString("email-monthly-plus-manual-intro-content")}
|
||||
</mj-text>
|
||||
<mj-button
|
||||
href={`${process.env.SERVER_URL}/user/dashboard?utm_source=monitor-product&utm_medium=email&utm_campaign=${utmCampaign}&utm_content=view-your-dashboard-us`}
|
||||
background-color="#0060DF"
|
||||
font-weight={600}
|
||||
font-size="15px"
|
||||
line-height="22px"
|
||||
>
|
||||
{l10n.getString("email-monthly-plus-manual-cta-label")}
|
||||
</mj-button>
|
||||
</mj-column>
|
||||
</mj-section>
|
||||
<mj-section padding="20px">
|
||||
<mj-column>
|
||||
<mj-text
|
||||
align="center"
|
||||
font-size="24px"
|
||||
line-height="26px"
|
||||
font-weight={700}
|
||||
>
|
||||
{l10n.getString("email-monthly-plus-manual-fixed-heading")}
|
||||
</mj-text>
|
||||
<mj-text align="center" font-size="16px" line-height="24px">
|
||||
{l10n.getString("email-monthly-plus-manual-fixed-lead")}
|
||||
</mj-text>
|
||||
</mj-column>
|
||||
</mj-section>
|
||||
<mj-section>
|
||||
<mj-column vertical-align="bottom">
|
||||
<mj-image
|
||||
href={`${process.env.SERVER_URL}/user/dashboard?utm_source=monitor-product&utm_medium=email&utm_campaign=${utmCampaign}&utm_content=manually-fixed`}
|
||||
src={`${process.env.SERVER_URL}/images/email/monthly-activity/illustration-manual.png`}
|
||||
alt=""
|
||||
width="90px"
|
||||
align="center"
|
||||
/>
|
||||
<mj-text
|
||||
font-size="16px"
|
||||
line-height="24px"
|
||||
font-weight={600}
|
||||
align="center"
|
||||
>
|
||||
{l10n.getString(
|
||||
"email-monthly-plus-manual-fixed-section-manual-heading",
|
||||
)}
|
||||
</mj-text>
|
||||
<mj-text
|
||||
font-size="38px"
|
||||
line-height="40px"
|
||||
font-weight={700}
|
||||
align="center"
|
||||
>
|
||||
{props.data.dataBrokerManuallyResolvedDataPointsNum +
|
||||
props.data.dataBreachFixedDataPointsNum}
|
||||
</mj-text>
|
||||
</mj-column>
|
||||
<mj-column vertical-align="bottom">
|
||||
<mj-image
|
||||
href={`${process.env.SERVER_URL}/user/dashboard?utm_source=monitor-product&utm_medium=email&utm_campaign=${utmCampaign}&utm_content=in-progress`}
|
||||
src={`${process.env.SERVER_URL}/images/email/monthly-activity/illustration-in-progress.png`}
|
||||
alt=""
|
||||
width="90px"
|
||||
align="center"
|
||||
/>
|
||||
<mj-text
|
||||
font-size="16px"
|
||||
line-height="24px"
|
||||
font-weight={600}
|
||||
align="center"
|
||||
>
|
||||
{l10n.getString(
|
||||
"email-monthly-plus-manual-fixed-section-in-progress-heading",
|
||||
)}
|
||||
</mj-text>
|
||||
<mj-text
|
||||
font-size="38px"
|
||||
line-height="40px"
|
||||
font-weight={700}
|
||||
align="center"
|
||||
>
|
||||
{props.data.dataBrokerInProgressDataPointsNum}
|
||||
</mj-text>
|
||||
</mj-column>
|
||||
<mj-column vertical-align="bottom">
|
||||
<mj-image
|
||||
href={`${process.env.SERVER_URL}/user/dashboard?utm_source=monitor-product&utm_medium=email&utm_campaign=${utmCampaign}&utm_content=auto-removed`}
|
||||
src={`${process.env.SERVER_URL}/images/email/monthly-activity/illustration-done.png`}
|
||||
alt=""
|
||||
width="90px"
|
||||
align="center"
|
||||
/>
|
||||
<mj-text
|
||||
font-size="16px"
|
||||
line-height="24px"
|
||||
font-weight={600}
|
||||
align="center"
|
||||
>
|
||||
{l10n.getString(
|
||||
"email-monthly-plus-manual-fixed-section-done-heading",
|
||||
)}
|
||||
</mj-text>
|
||||
<mj-text
|
||||
font-size="38px"
|
||||
line-height="40px"
|
||||
font-weight={700}
|
||||
align="center"
|
||||
>
|
||||
{props.data.dataBrokerAutoFixedDataPointsNum}
|
||||
</mj-text>
|
||||
</mj-column>
|
||||
</mj-section>
|
||||
<EmailFooter l10n={l10n} utm_campaign={utmCampaign} />
|
||||
</mj-body>
|
||||
</mjml>
|
||||
);
|
||||
};
|
||||
|
||||
const MonthlyActivityPlusWithAutoRemovalsOnlyEmail = (props: Props) => {
|
||||
const l10n = props.l10n;
|
||||
const utmCampaign = "monthly-report-plus";
|
||||
|
||||
return (
|
||||
<mjml>
|
||||
<mj-head>
|
||||
<mj-preview>
|
||||
{l10n.getString("email-monthly-plus-auto-preview")}
|
||||
</mj-preview>
|
||||
</mj-head>
|
||||
<mj-body background-color="#F9F9FA">
|
||||
<EmailHeader l10n={l10n} utm_campaign={utmCampaign} />
|
||||
<mj-section
|
||||
full-width="full-width"
|
||||
background-color="white"
|
||||
background-position-x="center"
|
||||
background-url={`${process.env.SERVER_URL}/images/email/monthly-activity/hero-bg.png`}
|
||||
background-repeat="no-repeat"
|
||||
text-align="left"
|
||||
>
|
||||
<mj-column width="50%">
|
||||
<mj-text font-size="38px" line-height="40px" font-weight={700}>
|
||||
{l10n.getString("email-monthly-plus-auto-hero-heading")}
|
||||
</mj-text>
|
||||
<mj-text font-size="18px" line-height="27px" font-weight={400}>
|
||||
{l10n.getString("email-monthly-plus-auto-hero-content")}
|
||||
</mj-text>
|
||||
</mj-column>
|
||||
</mj-section>
|
||||
<mj-section padding="20px">
|
||||
<mj-column>
|
||||
<mj-text align="center" font-size="16px" line-height="24px">
|
||||
{l10n.getString("email-monthly-plus-auto-intro-content")}
|
||||
</mj-text>
|
||||
</mj-column>
|
||||
</mj-section>
|
||||
<mj-section>
|
||||
<mj-column vertical-align="bottom">
|
||||
<mj-image
|
||||
href={`${process.env.SERVER_URL}/user/dashboard?utm_source=monitor-product&utm_medium=email&utm_campaign=${utmCampaign}&utm_content=manually-fixed`}
|
||||
src={`${process.env.SERVER_URL}/images/email/monthly-activity/illustration-manual.png`}
|
||||
alt=""
|
||||
width="90px"
|
||||
align="center"
|
||||
/>
|
||||
<mj-text
|
||||
font-size="16px"
|
||||
line-height="24px"
|
||||
font-weight={600}
|
||||
align="center"
|
||||
>
|
||||
{l10n.getString(
|
||||
"email-monthly-plus-auto-fixed-section-manual-heading",
|
||||
)}
|
||||
</mj-text>
|
||||
<mj-text
|
||||
font-size="38px"
|
||||
line-height="40px"
|
||||
font-weight={700}
|
||||
align="center"
|
||||
>
|
||||
{props.data.dataBrokerManuallyResolvedDataPointsNum +
|
||||
props.data.dataBreachFixedDataPointsNum}
|
||||
</mj-text>
|
||||
</mj-column>
|
||||
<mj-column vertical-align="bottom">
|
||||
<mj-image
|
||||
href={`${process.env.SERVER_URL}/user/dashboard?utm_source=monitor-product&utm_medium=email&utm_campaign=${utmCampaign}&utm_content=in-progress`}
|
||||
src={`${process.env.SERVER_URL}/images/email/monthly-activity/illustration-in-progress.png`}
|
||||
alt=""
|
||||
width="90px"
|
||||
align="center"
|
||||
/>
|
||||
<mj-text
|
||||
font-size="16px"
|
||||
line-height="24px"
|
||||
font-weight={600}
|
||||
align="center"
|
||||
>
|
||||
{l10n.getString(
|
||||
"email-monthly-plus-auto-fixed-section-in-progress-heading",
|
||||
)}
|
||||
</mj-text>
|
||||
<mj-text
|
||||
font-size="38px"
|
||||
line-height="40px"
|
||||
font-weight={700}
|
||||
align="center"
|
||||
>
|
||||
{props.data.dataBrokerInProgressDataPointsNum}
|
||||
</mj-text>
|
||||
</mj-column>
|
||||
<mj-column vertical-align="bottom">
|
||||
<mj-image
|
||||
href={`${process.env.SERVER_URL}/user/dashboard?utm_source=monitor-product&utm_medium=email&utm_campaign=${utmCampaign}&utm_content=auto-removed`}
|
||||
src={`${process.env.SERVER_URL}/images/email/monthly-activity/illustration-done.png`}
|
||||
alt=""
|
||||
width="90px"
|
||||
align="center"
|
||||
/>
|
||||
<mj-text
|
||||
font-size="16px"
|
||||
line-height="24px"
|
||||
font-weight={600}
|
||||
align="center"
|
||||
>
|
||||
{l10n.getString(
|
||||
"email-monthly-plus-auto-fixed-section-done-heading",
|
||||
)}
|
||||
</mj-text>
|
||||
<mj-text
|
||||
font-size="38px"
|
||||
line-height="40px"
|
||||
font-weight={700}
|
||||
align="center"
|
||||
>
|
||||
{props.data.dataBrokerAutoFixedDataPointsNum}
|
||||
</mj-text>
|
||||
</mj-column>
|
||||
</mj-section>
|
||||
<mj-section padding="20px">
|
||||
<mj-column>
|
||||
<mj-button
|
||||
href={`${process.env.SERVER_URL}/user/dashboard?utm_source=monitor-product&utm_medium=email&utm_campaign=${utmCampaign}&utm_content=view-your-dashboard-us`}
|
||||
background-color="#0060DF"
|
||||
font-weight={600}
|
||||
font-size="15px"
|
||||
line-height="22px"
|
||||
>
|
||||
{l10n.getString("email-monthly-plus-auto-cta-label")}
|
||||
</mj-button>
|
||||
</mj-column>
|
||||
</mj-section>
|
||||
<EmailFooter l10n={l10n} utm_campaign={utmCampaign} />
|
||||
</mj-body>
|
||||
</mjml>
|
||||
);
|
||||
};
|
||||
|
||||
const MonthlyActivityFreeEmail = (props: Props) => {
|
||||
const l10n = props.l10n;
|
||||
const utmCampaign = "monthly-report-free";
|
||||
|
||||
return (
|
||||
<mjml>
|
||||
<mj-head>
|
||||
<mj-preview>{l10n.getString("email-monthly-free-preview")}</mj-preview>
|
||||
</mj-head>
|
||||
<mj-body background-color="#F9F9FA">
|
||||
<EmailHeader l10n={l10n} utm_campaign={utmCampaign} />
|
||||
<mj-section
|
||||
full-width="full-width"
|
||||
background-color="white"
|
||||
background-position-x="center"
|
||||
background-url={`${process.env.SERVER_URL}/images/email/monthly-activity/hero-bg.png`}
|
||||
background-repeat="no-repeat"
|
||||
text-align="left"
|
||||
>
|
||||
<mj-column width="50%">
|
||||
<mj-text font-size="38px" line-height="40px" font-weight={700}>
|
||||
{l10n.getString("email-monthly-free-hero-heading")}
|
||||
</mj-text>
|
||||
<mj-text font-size="18px" line-height="27px" font-weight={400}>
|
||||
{l10n.getString("email-monthly-free-hero-content")}
|
||||
</mj-text>
|
||||
</mj-column>
|
||||
</mj-section>
|
||||
<mj-section padding="20px">
|
||||
<mj-column>
|
||||
<mj-text
|
||||
align="center"
|
||||
font-size="16px"
|
||||
line-height="24px"
|
||||
padding-bottom="40px"
|
||||
>
|
||||
{l10n.getString("email-monthly-free-intro-content")}
|
||||
</mj-text>
|
||||
<mj-button
|
||||
href={`${process.env.SERVER_URL}/user/dashboard?utm_source=monitor-product&utm_medium=email&utm_campaign=${utmCampaign}&utm_content=view-your-dashboard-us`}
|
||||
background-color="#0060DF"
|
||||
font-weight={600}
|
||||
font-size="15px"
|
||||
line-height="22px"
|
||||
>
|
||||
{l10n.getString("email-monthly-free-cta-label")}
|
||||
</mj-button>
|
||||
</mj-column>
|
||||
</mj-section>
|
||||
<mj-section padding="20px">
|
||||
<mj-column>
|
||||
<mj-text
|
||||
align="center"
|
||||
font-size="24px"
|
||||
line-height="26px"
|
||||
font-weight={700}
|
||||
>
|
||||
{l10n.getString("email-monthly-free-fixed-heading")}
|
||||
</mj-text>
|
||||
<mj-text align="center" font-size="16px" line-height="24px">
|
||||
{l10n.getString("email-monthly-free-fixed-lead")}
|
||||
</mj-text>
|
||||
</mj-column>
|
||||
</mj-section>
|
||||
<mj-section padding-bottom="40px">
|
||||
<mj-column vertical-align="bottom">
|
||||
<mj-image
|
||||
href={`${process.env.SERVER_URL}/user/dashboard?utm_source=monitor-product&utm_medium=email&utm_campaign=${utmCampaign}&utm_content=auto-removed`}
|
||||
src={`${process.env.SERVER_URL}/images/email/monthly-activity/illustration-done-disabled.png`}
|
||||
alt=""
|
||||
width="90px"
|
||||
align="center"
|
||||
/>
|
||||
<mj-text
|
||||
font-size="16px"
|
||||
line-height="24px"
|
||||
font-weight={600}
|
||||
align="center"
|
||||
>
|
||||
{l10n.getString("email-monthly-free-fixed-section-done-heading")}
|
||||
</mj-text>
|
||||
<mj-text
|
||||
font-size="38px"
|
||||
line-height="40px"
|
||||
font-weight={700}
|
||||
align="center"
|
||||
>
|
||||
{props.data.dataBrokerAutoFixedDataPointsNum}
|
||||
</mj-text>
|
||||
</mj-column>
|
||||
<mj-column vertical-align="bottom">
|
||||
<mj-image
|
||||
href={`${process.env.SERVER_URL}/user/dashboard?utm_source=monitor-product&utm_medium=email&utm_campaign=${utmCampaign}&utm_content=in-progress`}
|
||||
src={`${process.env.SERVER_URL}/images/email/monthly-activity/illustration-in-progress-disabled.png`}
|
||||
alt=""
|
||||
width="90px"
|
||||
align="center"
|
||||
/>
|
||||
<mj-text
|
||||
font-size="16px"
|
||||
line-height="24px"
|
||||
font-weight={600}
|
||||
align="center"
|
||||
>
|
||||
{l10n.getString(
|
||||
"email-monthly-free-fixed-section-in-progress-heading",
|
||||
)}
|
||||
</mj-text>
|
||||
<mj-text
|
||||
font-size="38px"
|
||||
line-height="40px"
|
||||
font-weight={700}
|
||||
align="center"
|
||||
>
|
||||
{props.data.dataBrokerInProgressDataPointsNum}
|
||||
</mj-text>
|
||||
</mj-column>
|
||||
<mj-column vertical-align="bottom">
|
||||
<mj-image
|
||||
href={`${process.env.SERVER_URL}/user/dashboard?utm_source=monitor-product&utm_medium=email&utm_campaign=${utmCampaign}&utm_content=manually-fixed`}
|
||||
src={`${process.env.SERVER_URL}/images/email/monthly-activity/illustration-manual.png`}
|
||||
alt=""
|
||||
width="90px"
|
||||
align="center"
|
||||
/>
|
||||
<mj-text
|
||||
font-size="16px"
|
||||
line-height="24px"
|
||||
font-weight={600}
|
||||
align="center"
|
||||
>
|
||||
{l10n.getString(
|
||||
"email-monthly-free-fixed-section-manual-heading",
|
||||
)}
|
||||
</mj-text>
|
||||
<mj-text
|
||||
font-size="38px"
|
||||
line-height="40px"
|
||||
font-weight={700}
|
||||
align="center"
|
||||
>
|
||||
{props.data.dataBrokerManuallyResolvedDataPointsNum +
|
||||
props.data.dataBreachFixedDataPointsNum}
|
||||
</mj-text>
|
||||
</mj-column>
|
||||
</mj-section>
|
||||
<mj-section
|
||||
border-radius="8px"
|
||||
border="2px solid #FF9100"
|
||||
background-color="white"
|
||||
padding="10px"
|
||||
text-align="center"
|
||||
>
|
||||
<mj-column vertical-align="middle">
|
||||
<mj-image
|
||||
src={`${process.env.SERVER_URL}/images/email/monthly-activity/illustration-plus.png`}
|
||||
alt=""
|
||||
align="center"
|
||||
width="115px"
|
||||
/>
|
||||
</mj-column>
|
||||
<mj-column width="300px" vertical-align="middle">
|
||||
<mj-text font-size="18px" line-height="20px" font-weight={700}>
|
||||
{l10n.getString("email-monthly-free-banner-plus-heading")}
|
||||
</mj-text>
|
||||
<mj-text font-size="16px" line-height="24px">
|
||||
{l10n.getString("email-monthly-free-banner-plus-content")}
|
||||
</mj-text>
|
||||
</mj-column>
|
||||
<mj-column width="300px" vertical-align="middle">
|
||||
<mj-button
|
||||
href={`${process.env.SERVER_URL}?utm_source=monitor-product&utm_medium=email&utm_campaign=${utmCampaign}&utm_content=plus-banner-cta#plans`}
|
||||
background-color="#0060DF"
|
||||
font-weight={600}
|
||||
font-size="15px"
|
||||
line-height="22px"
|
||||
align="center"
|
||||
>
|
||||
{l10n.getString("email-monthly-free-banner-plus-cta-label")}
|
||||
</mj-button>
|
||||
</mj-column>
|
||||
</mj-section>
|
||||
<mj-section>
|
||||
<mj-column>
|
||||
<mj-spacer height="55px" />
|
||||
</mj-column>
|
||||
</mj-section>
|
||||
<EmailFooter l10n={l10n} utm_campaign={utmCampaign} />
|
||||
</mj-body>
|
||||
</mjml>
|
||||
);
|
||||
};
|