Add templates for the monthly activity emails

This commit is contained in:
Vincent 2024-03-28 23:20:11 +01:00 коммит произвёл Vincent
Родитель acc97b4335
Коммит a39af60601
11 изменённых файлов: 662 добавлений и 4 удалений

Просмотреть файл

@ -13,3 +13,57 @@ email-footer-support-content = Visit our <support-link>Support Center</support-l
email-footer-reason-subscriber = Youre 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 = Were always working to help keep your personal info safe. Heres whats 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 whats 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 weve protected your personal information.
email-monthly-plus-auto-hero-heading = Your { -brand-monitor-plus } protection
email-monthly-plus-auto-hero-content = Were always working to help keep your personal info safe. Heres how weve 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. Heres 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 whats 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 whats 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 }

Двоичные данные
public/images/email/monthly-activity/hero-bg.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 13 KiB

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 7.1 KiB

Двоичные данные
public/images/email/monthly-activity/illustration-done.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 2.8 KiB

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 7.7 KiB

Двоичные данные
public/images/email/monthly-activity/illustration-in-progress.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 3.4 KiB

Двоичные данные
public/images/email/monthly-activity/illustration-manual.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 2.8 KiB

Двоичные данные
public/images/email/monthly-activity/illustration-plus.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 3.3 KiB

12
src/emails/templates/mjml.d.ts поставляемый
Просмотреть файл

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