feat(sms): Create post add, post change, post remove recovery phone email templates #18161

LZoog · 2024-12-20T17:01:31Z

Because:

We want to send users an email when they add/change/remove a backup authentication phone number

This commit:

Adds 3x email templates including storybook and l10n
Adds basic mailer methods
Adjusts spacing after "You requested it from:" and "You enabled it from:"

…mail templates Because: * We want to send users an email when they add/change/remove a backup authentication phone number This commit: * Adds 3x email templates including storybook and l10n * Adds basic mailer methods * Adjusts spacing after "You requested it from:" and "You enabled it from:" closes FXA-10240

vpomerleau

Thanks for working on these and creating the mailer methods! The implementation matches the design, but in reviewing these I noticed that we might want to modify a few things (e.g., change password instead of reset password, which I think you might have noticed would make more sense based on the links you've included in storybooks)

Going to go ahead and approve, and will leave to your discretion whether or not the suggestions should be applied.

vpomerleau · 2024-12-23T20:43:19Z

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

+  Mailer.prototype.postAddRecoveryPhoneEmail = function (message) {
+    const templateName = 'postAddRecoveryPhone';
+    const links = this._generateLinks(
+      this.initiatePasswordResetUrl,


I wonder if these emails should include a link to change the password instead of reset the password 🤔 I just checked some of our other emails for settings changes and they include "change your password" prompts.

Should we also suggest that they review their two-step authentication settings?

Similar to the recovery key emails that include a prompt to delete the key if it wasn't configured by the user: https://storage.googleapis.com/mozilla-storybooks-fxa/commits/latest/fxa-auth-server/index.html?path=/story/fxa-emails-templates-postaddaccountrecovery--post-add-account-recovery

vpomerleau · 2024-12-23T20:45:06Z

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

+        device: this._formatUserAgentInfo(message),
+        privacyUrl: links.privacyUrl,
+        link: links.link,
+        // TODO, get actual last 4 when functionality is implemented


Add ticket number in TODO? This should be updated in FXA-10370

vpomerleau · 2024-12-23T20:48:59Z

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

+postAddRecoveryPhone-title = You created a new backup recovery method
+# Variables:
+#  $lastFourPhoneNumber (String) - The last four digits of the user's phone number
+postAddRecoveryPhone-description = You added ••••••{ $lastFourPhoneNumber } as your backup recovery phone


Should we add spaces or dashes to the phone number? e.g., •••-•••-1234

Since not every country uses this format, I'm not sure we want to do that? It wouldn't match Figma anyway. 🤔

This is a nice-to-have for readability, not a requirement, but we might need to review anyway once we support more countries because the number of digits won't be the same

vpomerleau · 2024-12-23T20:50:44Z

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

+postAddRecoveryPhone-how-protect = How this protects your account
+# Variables:
+#  $twoFactorSupportLink (String) - a link to a support article about two factor authentication
+postAddRecoveryPhone-how-protect-plaintext = How this protects your account: { $twoFactorSupportLink }


For plaintext, link probably shouldn't be included in localized string, and the link could just be mentioned in a comment

We do have a few other things similar to this, like subscriptionFirstInvoice-content-invoice-number-plaintext. For this I thought it'd be nice for localizers to have the context that this was going to be a link and what that link was, but yes I can pull this out (they can have context with a comment).

The example you mention includes a variable in string (not a link), so that seems a bit different :)

It is a variable though, it'll be coming from templateValues. I have a TODO in that referenced ticket to update the hard coded string (it needs UTM params etc.)

Other places we send links in plain text like this with a variable:

partials/viewInvoice/index.txt (for invoiceLink)

partials/support/index.txt (for supportUrl)

templates/fradulentAccountDeletion/index.txt (for mozillaSupportUrl

vpomerleau · 2024-12-23T20:51:51Z

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

+    </mj-text>
+
+    <mj-text css-class="text-body-no-margin">
+      <span data-l10n-id="postAddRecoveryPhone-description" data-l10n-args="<%= JSON.stringify({ lastFourPhoneNumber }) %>">You added ••••••<%- lastFourPhoneNumber %> as your backup recovery phone</span>


Update phone number format here too

I wonder how the phone numbers are going to render in RTL languages - we might need to add a span with dir="ltr" to force the number to stay in ltr as is expected for both ltr and rtl languages

Still not sure we want to update the format per Figma BUT you make a good point about adding  here that I will do.

vpomerleau · 2024-12-23T21:02:18Z

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

@@ -0,0 +1,4 @@
+postRemoveRecoveryPhone-subject = Backup recovery phone removed
+postRemoveRecoveryPhone-title = Backup recovery phone removed
+postRemoveRecoveryPhone-description = Your backup recovery phone has been removed from your two-step authentication settings. You still have your backup recovery codes available for use.


Looks like we missed a terminology update in Figma. This should be "backup authentication codes" - I've updated Figma to have the correct term.

Suggested change

postRemoveRecoveryPhone-description = Your backup recovery phone has been removed from your two-step authentication settings. You still have your backup recovery codes available for use.

postRemoveRecoveryPhone-description = Your backup recovery phone has been removed from your two-step authentication settings. You still have your backup authentication codes available for use.

vpomerleau · 2024-12-23T21:02:40Z

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

+<mj-section>
+  <mj-column>
+    <mj-text css-class="text-body">
+      <span data-l10n-id="postRemoveRecoveryPhone-description">Your backup recovery phone has been removed from your two-step authentication settings. You still have your backup recovery codes available for use.</span>


Suggested change

Your backup recovery phone has been removed from your two-step authentication settings. You still have your backup recovery codes available for use.

Your backup recovery phone has been removed from your two-step authentication settings. You still have your backup authentication codes available for use.

vpomerleau · 2024-12-23T21:02:56Z

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

@@ -0,0 +1,10 @@
+postRemoveRecoveryPhone-title = "Backup recovery phone removed"
+
+postRemoveRecoveryPhone-description = "Your backup recovery phone has been removed from your two-step authentication settings. You still have your backup recovery codes available for use."


Suggested change

postRemoveRecoveryPhone-description = "Your backup recovery phone has been removed from your two-step authentication settings. You still have your backup recovery codes available for use."

postRemoveRecoveryPhone-description = "Your backup recovery phone has been removed from your two-step authentication settings. You still have your backup authentication codes available for use."

vpomerleau · 2024-12-23T21:03:10Z

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

+    ])],
+    ['html', [
+      { test: 'include', expected: 'Backup recovery phone removed' },
+      { test: 'include', expected: 'Your backup recovery phone has been removed from your two-step authentication settings. You still have your backup recovery codes available for use.' },


Suggested change

{ test: 'include', expected: 'Your backup recovery phone has been removed from your two-step authentication settings. You still have your backup recovery codes available for use.' },

{ test: 'include', expected: 'Your backup recovery phone has been removed from your two-step authentication settings. You still have your backup authentication codes available for use.' },

vpomerleau · 2024-12-23T21:03:27Z

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

+    ]],
+    ['text', [
+      { test: 'include', expected: 'Backup recovery phone removed' },
+      { test: 'include', expected: 'Your backup recovery phone has been removed from your two-step authentication settings. You still have your backup recovery codes available for use.' },


Suggested change

{ test: 'include', expected: 'Your backup recovery phone has been removed from your two-step authentication settings. You still have your backup recovery codes available for use.' },

{ test: 'include', expected: 'Your backup recovery phone has been removed from your two-step authentication settings. You still have your backup authentication codes available for use.' },

Thanks for the catches here!

LZoog force-pushed the FXA-10240 branch 3 times, most recently from 32ae4eb to 9cfcb94 Compare December 23, 2024 17:41

LZoog marked this pull request as ready for review December 23, 2024 17:42

LZoog requested review from a team as code owners December 23, 2024 17:42

LZoog force-pushed the FXA-10240 branch from 9cfcb94 to 9347624 Compare December 23, 2024 18:10

vpomerleau approved these changes Dec 23, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(sms): Create post add, post change, post remove recovery phone email templates #18161

feat(sms): Create post add, post change, post remove recovery phone email templates #18161

LZoog commented Dec 20, 2024 •

edited

Loading

vpomerleau left a comment

vpomerleau Dec 23, 2024

vpomerleau Dec 23, 2024

vpomerleau Dec 23, 2024

LZoog Dec 23, 2024 •

edited

Loading

vpomerleau Dec 23, 2024

vpomerleau Dec 23, 2024

LZoog Dec 23, 2024 •

edited

Loading

vpomerleau Dec 23, 2024

LZoog Dec 23, 2024 •

edited

Loading

vpomerleau Dec 23, 2024

vpomerleau Dec 23, 2024

LZoog Dec 23, 2024

vpomerleau Dec 23, 2024

vpomerleau Dec 23, 2024

vpomerleau Dec 23, 2024

vpomerleau Dec 23, 2024

vpomerleau Dec 23, 2024

LZoog Dec 23, 2024

	postRemoveRecoveryPhone-description = Your backup recovery phone has been removed from your two-step authentication settings. You still have your backup recovery codes available for use.
	postRemoveRecoveryPhone-description = Your backup recovery phone has been removed from your two-step authentication settings. You still have your backup authentication codes available for use.

	<span data-l10n-id="postRemoveRecoveryPhone-description">Your backup recovery phone has been removed from your two-step authentication settings. You still have your backup recovery codes available for use.</span>
	<span data-l10n-id="postRemoveRecoveryPhone-description">Your backup recovery phone has been removed from your two-step authentication settings. You still have your backup authentication codes available for use.</span>

		@@ -0,0 +1,10 @@
		postRemoveRecoveryPhone-title = "Backup recovery phone removed"

		postRemoveRecoveryPhone-description = "Your backup recovery phone has been removed from your two-step authentication settings. You still have your backup recovery codes available for use."

	{ test: 'include', expected: 'Your backup recovery phone has been removed from your two-step authentication settings. You still have your backup recovery codes available for use.' },
	{ test: 'include', expected: 'Your backup recovery phone has been removed from your two-step authentication settings. You still have your backup authentication codes available for use.' },

feat(sms): Create post add, post change, post remove recovery phone email templates #18161

Are you sure you want to change the base?

feat(sms): Create post add, post change, post remove recovery phone email templates #18161

Conversation

LZoog commented Dec 20, 2024 • edited Loading

vpomerleau left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

LZoog Dec 23, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

LZoog Dec 23, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

LZoog Dec 23, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

LZoog commented Dec 20, 2024 •

edited

Loading

LZoog Dec 23, 2024 •

edited

Loading

LZoog Dec 23, 2024 •

edited

Loading

LZoog Dec 23, 2024 •

edited

Loading