Skip to content

Commit f552627

Browse files
vpomerleauvpomerleau
committed
feat(emails): Localize email preheaders
Because: * Email preheaders were not localized * MJML has a dedicated tag for email previews This commit: * Remove preHeader passed in template values * Set preview content in email templates instead of handler * Use MJML mj-preview to set preview text * Add localization handling for preview text Closes #FXA-8558
1 parent bb3b09d commit f552627

8 files changed

Lines changed: 41 additions & 38 deletions

File tree

‎packages/fxa-auth-server/lib/senders/email.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -391,12 +391,15 @@ module.exports = function (log, config, bounces) {
391391

392392
Mailer.prototype.localize = async function (message) {
393393
message.layout = message.layout || 'fxa';
394-
const { html, text, subject } = await this.renderer.renderEmail(message);
394+
const { html, text, subject, preview } = await this.renderer.renderEmail(
395+
message
396+
);
395397

396398
return {
397399
html,
398400
language: determineLocale(message.acceptLanguage),
399401
subject,
402+
preview,
400403
text,
401404
};
402405
};
@@ -471,6 +474,7 @@ module.exports = function (log, config, bounces) {
471474
from: this.sender,
472475
to,
473476
subject: localized.subject,
477+
preview: localized.preview,
474478
text: localized.text,
475479
html: localized.html,
476480
xMailer: false,
@@ -621,7 +625,6 @@ module.exports = function (log, config, bounces) {
621625
supportLinkAttributes: links.supportLinkAttributes,
622626
supportUrl: links.supportUrl,
623627
time,
624-
preHeader: 'Copy/paste this code into your registration form.',
625628
},
626629
});
627630
};

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

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,15 @@
77
<mj-raw>
88
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
99
</mj-raw>
10+
1011
<mj-title><%- locals.subject %></mj-title>
12+
<% if (locals.preview) { %>
13+
<mj-preview><%= locals.preview %></mj-preview>
14+
<% } %>
15+
1116
<%- include('/partials/images.mjml') %>
1217
<%- include('/partials/metadata.mjml') %>
1318
</mj-head>
14-
1519
<mj-body>
1620
<mj-include path="<%- locals.cssPath %>/global.css" type="css" css-inline="inline" />
1721
<mj-include path="<%- locals.cssPath %>/fxa/index.css" type="css" css-inline="inline" />
@@ -21,16 +25,6 @@
2125
<mj-wrapper css-class="body">
2226
<mj-section>
2327
<mj-column>
24-
<% if (locals.preHeader) { %>
25-
<mj-text css-class="hidden">
26-
<%- preHeader %>
27-
&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;
28-
&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;
29-
&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;
30-
‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;
31-
‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌‌‌
32-
</mj-text>
33-
<% } %>
3428
<% if (!locals.sync) { %>
3529
<mj-image css-class="mozilla-logo"
3630
width="120px"

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

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
99
</mj-raw>
1010
<mj-title><%- locals.subject %></mj-title>
11+
<mj-preview><%- locals.preview %></mj-preview>
1112
<%- include('/partials/images.mjml') %>
1213
<%- include('/partials/metadata.mjml') %>
1314
</mj-head>
@@ -19,21 +20,6 @@
1920
<%- include('/partials/brandMessaging/index.mjml') %>
2021

2122
<mj-wrapper css-class="body">
22-
<% if (locals.preHeader) { %>
23-
<mj-section>
24-
<mj-column>
25-
<mj-text css-class="hidden">
26-
<%- preHeader %>
27-
&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;
28-
&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;
29-
&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;
30-
‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;
31-
‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌‌‌
32-
</mj-text>
33-
</mj-column>
34-
</mj-section>
35-
<% } %>
36-
3723
<mj-section css-class="header-container">
3824
<mj-column>
3925
<mj-image css-class="subplat-mozilla-logo"

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
# Variables:
22
# $code (Number) - e.g. 123456
33
verifyShortCode-subject-3 = Confirm your account
4+
verifyShortCode-preview = Use the included code to confirm your { -product-mozilla-account }.
45
verifyShortCode-title-3 = Open the internet with { -brand-mozilla }
56
# Information on the browser and device triggering this confirmation email follows below this string.
67
verifyShortCode-title-subtext-2 = Confirm your account and get the most out of { -brand-mozilla } everywhere you sign in starting with:

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,9 @@
22
"subject": {
33
"id": "verifyShortCode-subject-3",
44
"message": "Confirm your account"
5+
},
6+
"preview": {
7+
"id": "verifyShortCode-preview",
8+
"message": "Use the included code to confirm your Mozilla account."
59
}
610
}

‎packages/fxa-auth-server/lib/senders/renderer/bindings.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ export interface RendererContext extends TemplateContext, TemplateValues {
5858
cssPath: string;
5959
subject: string;
6060
action?: string;
61+
preview?: string;
6162
}
6263

6364
export type EjsComponent = {
@@ -83,7 +84,7 @@ export abstract class RendererBindings implements ILocalizerBindings {
8384

8485
/**
8586
* Renders a mjml template with support for fluent localization.
86-
* @param name Name of template
87+
* @param template Name of template
8788
* @param context Contains either values sent through mailer.send or mock values from Storybook
8889
* @param layout Optional layout, which acts as wrapper for for template
8990
* @returns Rendered template

‎packages/fxa-auth-server/lib/senders/renderer/index.ts‎

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ const RTL_LOCALES = [
2323
export interface GlobalTemplateValues {
2424
subject: FtlIdMsg;
2525
action?: FtlIdMsg;
26+
preview?: FtlIdMsg;
2627
}
2728

2829
class Renderer extends Localizer {
@@ -79,22 +80,33 @@ class Renderer extends Localizer {
7980
* `subject` goes inside `mj-title` and `action` goes in a script in `metadata.mjml`
8081
* 2) We need to return a localized `subject` back to the mailer
8182
*/
82-
const { subject, action } = await this.getGlobalTemplateValues(context);
83+
const { subject, action, preview } = await this.getGlobalTemplateValues(
84+
context
85+
);
8386
const localizeAndRenderSubject = this.localizeAndRender(
8487
l10n,
8588
subject,
8689
context
8790
);
88-
if (action) {
89-
const [localizedSubject, localizedAction] = await Promise.all([
90-
localizeAndRenderSubject,
91-
this.localizeAndRender(l10n, action, context),
92-
]);
9391

94-
context.subject = localizedSubject;
92+
context.subject = await localizeAndRenderSubject;
93+
94+
if (action) {
95+
const localizedAction = await this.localizeAndRender(
96+
l10n,
97+
action,
98+
context
99+
);
95100
context.action = localizedAction;
96-
} else {
97-
context.subject = await localizeAndRenderSubject;
101+
}
102+
103+
if (preview) {
104+
const localizedPreview = await this.localizeAndRender(
105+
l10n,
106+
preview,
107+
context
108+
);
109+
context.preview = localizedPreview;
98110
}
99111
}
100112

@@ -123,6 +135,7 @@ class Renderer extends Localizer {
123135
html: rootElement.outerHTML,
124136
text: localizedPlaintext,
125137
subject: context.subject,
138+
preview: context.preview || '',
126139
};
127140
}
128141

‎packages/fxa-auth-server/test/local/senders/emails.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -561,6 +561,7 @@ const TESTS: [string, any, Record<string, any>?][] = [
561561
['X-Verify-Short-Code', { test: 'equal', expected: MESSAGE.code }],
562562
])],
563563
['html', [
564+
{ test: 'include', expected: 'Use the included code to confirm your Mozilla account.'},
564565
{ test: 'include', expected: 'Confirm your account' },
565566
{ test: 'include', expected: 'Open the internet with Mozilla' },
566567
{ test: 'include', expected: decodeUrl(configHref('privacyUrl', 'welcome', 'privacy')) },

0 commit comments

Comments
 (0)