Skip to content

Commit 549230f

Browse files
LZoogLZoog
authored
Merge pull request #18222 from mozilla/FXA-10943
feat(email): Add inactiveAccountFinalWarning template, tweak styles
2 parents a938746 + 0b06ae6 commit 549230f

8 files changed

Lines changed: 98 additions & 6 deletions

File tree

‎packages/fxa-auth-server/lib/senders/emails/global.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ $font-sans: sans-serif;
99
$blue-500: #0060df;
1010
$white: #fff;
1111
$black: #000;
12+
$grey-50: #f0f0f4;
1213
$grey-100: #e7e7e7;
1314
$grey-400: #6d6d6e;
1415
$grey-500: #4b5563;
@@ -115,6 +116,9 @@ $s-10: 40px;
115116
&-4 {
116117
padding: $s-4 !important;
117118
}
119+
&b-2 {
120+
padding-bottom: $s-2 !important;
121+
}
118122
}
119123
// Global styles
120124
tbody > td:first-child,

‎packages/fxa-auth-server/lib/senders/emails/layouts/fxa/index.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -105,11 +105,11 @@
105105
}
106106

107107
.info-block {
108-
margin: 20px 0 0 0;
109-
background-color: global.$grey-100;
108+
margin: 28px 0 0 0;
109+
background-color: global.$grey-50;
110110
border-radius: 10px;
111111
}
112112

113113
.info-block div {
114-
padding: 20px 0 0 0;
114+
padding: 20px 32px 0;
115115
}

‎packages/fxa-auth-server/lib/senders/emails/partials/accountDeletionInfoBlock/index.mjml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@
99
If your account is deleted, you’ll still receive emails from Mozilla Corporation and Mozilla Foundation, unless you <a class="link-blue" href="<%- unsubscribeUrl %>" data-l10n-name="unsubscribeLink">ask to unsubscribe</a>.
1010
</span>
1111
</mj-text>
12-
<%# css-class is not supported for mj-divider and styles must be applied inline %>
13-
<mj-divider border-color="#c2c2c2" border-width="2px" padding="10px 0"></mj-divider>
14-
<mj-text css-class="text-sub-body">
12+
<%# css-class is not supported for mj-divider and styles must be applied inline. Border-color is $grey-100 %>
13+
<mj-divider border-color="#E7E7E7" border-width="1px"></mj-divider>
14+
<mj-text css-class="text-sub-body pb-2">
1515
<span data-l10n-id="account-deletion-info-block-support">
1616
If you have any questions or need assistance, feel free to contact our <a class="link-blue" href="<%- supportUrl %>" data-l10n-name="supportLink">support team</a>.
1717
</span>

‎packages/fxa-auth-server/lib/senders/emails/templates/inactiveAccountFinalWarning/en.ftl‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
inactiveAccountFinalWarning-subject = Last chance to keep your { -product-mozilla-account }
2+
inactiveAccountFinalWarning-title = Your { -brand-mozilla } account and data will be deleted
3+
inactiveAccountFinalWarning-preview = Sign in to keep your account
4+
inactiveAccountFinalWarning-account-description = Your { -product-mozilla-account } is used to access free privacy and browsing products like { -brand-firefox } sync, { -product-mozilla-monitor }, { -product-firefox-relay }, and { -product-mdn }.
5+
# $deletionDate - the date when the account will be deleted if the user does not take action to-reactivate their account
6+
# This date will already be formatted with moment.js into Thursday, Jan 9, 2025 format
7+
inactiveAccountFinalWarning-impact = On <strong>{ $deletionDate }</strong>, your account and your personal data will be permanently deleted unless you sign in.
8+
inactiveAccountFirstWarning-action = Sign in to keep your account
9+
# followed by link to sign in
10+
inactiveAccountFirstWarning-action-plaintext = Sign in to keep your account:

‎packages/fxa-auth-server/lib/senders/emails/templates/inactiveAccountFinalWarning/includes.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"subject": {
3+
"id": "inactiveAccountFinalWarning-subject",
4+
"message": "Donʼt lose your account"
5+
},
6+
"action": {
7+
"id": "inactiveAccountFinalWarning-action",
8+
"message": "Sign in to keep your account"
9+
},
10+
"preview": {
11+
"id": "inactiveAccountFinalWarning-preview",
12+
"message": "Sign in to keep your account"
13+
}
14+
}

‎packages/fxa-auth-server/lib/senders/emails/templates/inactiveAccountFinalWarning/index.mjml‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<%# This Source Code Form is subject to the terms of the Mozilla Public
2+
# License, v. 2.0. If a copy of the MPL was not distributed with this
3+
# file, You can obtain one at http://mozilla.org/MPL/2.0/. %>
4+
5+
<mj-section>
6+
<mj-column>
7+
<mj-text css-class="text-header">
8+
<span data-l10n-id="inactiveAccountFinalWarning-title">Your Mozilla account and data will be deleted</span>
9+
</mj-text>
10+
</mj-column>
11+
</mj-section>
12+
13+
<mj-section>
14+
<mj-column>
15+
<mj-text css-class="text-sub-body">
16+
<span data-l10n-id="inactiveAccountFinalWarning-account-description">Your Mozilla account is used to access free privacy and browsing products like Firefox sync, Mozilla Monitor, Firefox Relay, and MDN.</span>
17+
</mj-text>
18+
<mj-text css-class="text-sub-body">
19+
<span data-l10n-id="inactiveAccountFinalWarning-impact" data-l10n-args="<%= JSON.stringify({deletionDate}) %>">On <strong>{ $deletionDate }</strong>, your account and your personal data will be permanently deleted unless you sign in.</span>
20+
</mj-text>
21+
</mj-column>
22+
</mj-section>
23+
24+
<%- include('/partials/button/index.mjml', {
25+
buttonL10nId: "inactiveAccountFirstWarning-action",
26+
buttonText: "Sign in to keep your account"
27+
}) %>
28+
29+
<%- include('/partials/accountDeletionInfoBlock/index.mjml') %>
30+
<%- include('/partials/automatedEmailInactiveAccount/index.mjml') %>

‎packages/fxa-auth-server/lib/senders/emails/templates/inactiveAccountFinalWarning/index.stories.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/* This Source Code Form is subject to the terms of the Mozilla Public
2+
* License, v. 2.0. If a copy of the MPL was not distributed with this
3+
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
4+
5+
import { Meta } from '@storybook/html';
6+
import { storyWithProps } from '../../storybook-email';
7+
8+
export default {
9+
title: 'FxA Emails/Templates/inactiveAccountFinalWarning',
10+
} as Meta;
11+
12+
const createStory = storyWithProps(
13+
'inactiveAccountFinalWarning',
14+
'Final reminder sent to inactive account before account is deleted',
15+
{
16+
// dates will be passed in to the template already localized and formatted by the email handler
17+
deletionDate: 'Thursday, Jan 9, 2025',
18+
link: 'http://localhost:3030/signin',
19+
}
20+
);
21+
22+
export const inactiveAccountFinalWarning = createStory();

‎packages/fxa-auth-server/lib/senders/emails/templates/inactiveAccountFinalWarning/index.txt‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
inactiveAccountFinalWarning-title = "Your Mozilla account and data will be deleted"
2+
3+
inactiveAccountFinalWarning-account-description = "Your Mozilla account is used to access free privacy and browsing products like Firefox sync, Mozilla Monitor, Firefox Relay, and MDN."
4+
5+
inactiveAccountFinalWarning-impact = "On <%- deletionDate %>, your account and your personal data will be permanently deleted unless you sign in."
6+
7+
inactiveAccountFinalWarning-action-plaintext = "Sign in to keep your account:"
8+
<%- link %>
9+
10+
<%- include('/partials/accountDeletionInfoBlock/index.txt') %>
11+
12+
<%- include('/partials/automatedEmailInactiveAccount/index.txt') %>

0 commit comments

Comments
 (0)