Merge pull request #18202 from mozilla/FXA-10636

vpomerleau · web-flow · commit 3932c3e51933 · 2025-01-13T10:51:58.000-08:00
feat(emails): Add inactiveAccountFirstWarning email template + partials
diff --git a/libs/shared/l10n/src/lib/branding.ftl b/libs/shared/l10n/src/lib/branding.ftl
@@ -39,6 +39,8 @@
 
 -product-mozilla-vpn = Mozilla VPN
 -product-mozilla-hubs = Mozilla Hubs
+# Mozilla Developer Network
+-product-mdn = MDN
 -product-mdn-plus = MDN Plus
 -product-firefox-cloud = Firefox Cloud
 -product-mozilla-monitor = Mozilla Monitor
diff --git a/packages/fxa-auth-server/lib/senders/emails/global.scss b/packages/fxa-auth-server/lib/senders/emails/global.scss
@@ -9,6 +9,7 @@ $font-sans: sans-serif;
 $blue-500: #0060df;
 $white: #fff;
 $black: #000;
+$grey-100: #e7e7e7;
 $grey-400: #6d6d6e;
 $grey-500: #4b5563;
 $grey-600: #464646;
@@ -139,8 +140,14 @@ tr > td:first-child {
 %banner-common {
   max-width: 640px !important;
   width: 100% !important;
-  background: linear-gradient(88.76deg, #E4EAF6 3.37%, #DBEEF8 39.93%, #DAF3F4 65.09%, #E3F6ED 102.21%);
-  background-color: #DBEEF8;
+  background: linear-gradient(
+    88.76deg,
+    #e4eaf6 3.37%,
+    #dbeef8 39.93%,
+    #daf3f4 65.09%,
+    #e3f6ed 102.21%
+  );
+  background-color: #dbeef8;
 }
 
 %text-banner-common {
diff --git a/packages/fxa-auth-server/lib/senders/emails/layouts/fxa/index.scss b/packages/fxa-auth-server/lib/senders/emails/layouts/fxa/index.scss
@@ -16,7 +16,6 @@
   align-items: center;
 }
 
-
 .sync-img {
   padding: global.$s-5 global.$s-0 !important;
   height: 137px;
@@ -104,3 +103,13 @@
     @extend .text-3xl;
   }
 }
+
+.info-block {
+  margin: 20px 0 0 0;
+  background-color: global.$grey-100;
+  border-radius: 10px;
+}
+
+.info-block div {
+  padding: 20px 0 0 0;
+}
diff --git a/packages/fxa-auth-server/lib/senders/emails/partials/accountDeletionInfoBlock/en.ftl b/packages/fxa-auth-server/lib/senders/emails/partials/accountDeletionInfoBlock/en.ftl
@@ -0,0 +1,4 @@
+account-deletion-info-block-communications = If your account is deleted, you’ll still receive emails from Mozilla Corporation and Mozilla Foundation, unless you <a data-l10n-name="unsubscribeLink">ask to unsubscribe</a>.
+account-deletion-info-block-support = If you have any questions or need assistance, feel free to contact our <a data-l10n-name="supportLink">support team</a>.
+account-deletion-info-block-communications-plaintext = If your account is deleted, you’ll still receive emails from Mozilla Corporation and Mozilla Foundation, unless you ask to unsubscribe:
+account-deletion-info-block-support-plaintext = If you have any questions or need assistance, feel free to contact our support team:
diff --git a/packages/fxa-auth-server/lib/senders/emails/partials/accountDeletionInfoBlock/index.mjml b/packages/fxa-auth-server/lib/senders/emails/partials/accountDeletionInfoBlock/index.mjml
@@ -0,0 +1,20 @@
+<%# 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/. %>
+
+<mj-section>
+  <mj-column css-class="info-block">
+    <mj-text css-class="text-sub-body">
+      <span data-l10n-id="account-deletion-info-block-communications">
+        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>.
+      </span>
+    </mj-text>
+    <%# css-class is not supported for mj-divider and styles must be applied inline %>
+    <mj-divider border-color="#c2c2c2" border-width="2px" padding="10px 0"></mj-divider>
+    <mj-text css-class="text-sub-body">
+      <span data-l10n-id="account-deletion-info-block-support">
+        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>.
+      </span>
+    </mj-text>
+  </mj-column>
+</mj-section>
diff --git a/packages/fxa-auth-server/lib/senders/emails/partials/accountDeletionInfoBlock/index.stories.ts b/packages/fxa-auth-server/lib/senders/emails/partials/accountDeletionInfoBlock/index.stories.ts
@@ -0,0 +1,22 @@
+/* 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 { Meta } from '@storybook/html';
+import { storyWithProps } from '../../storybook-email';
+
+export default {
+  title: 'Partials/accountDeletionInfoBlock',
+} as Meta;
+
+const createStory = storyWithProps(
+  '_storybook',
+  'This partial is used in account deletion emails to provide information and assistance about the deletion process.',
+  {
+    layout: null,
+    subject: 'N/A',
+    partial: 'accountDeletionInfoBlock',
+  }
+);
+
+export const accountDeletionInfoBlock = createStory();
diff --git a/packages/fxa-auth-server/lib/senders/emails/partials/accountDeletionInfoBlock/index.txt b/packages/fxa-auth-server/lib/senders/emails/partials/accountDeletionInfoBlock/index.txt
@@ -0,0 +1,5 @@
+account-deletion-info-block-communications-plaintext = "If your account is deleted, you’ll still receive emails from Mozilla Corporation and Mozilla Foundation, unless you ask to unsubscribe:"
+<%- unsubscribeUrl %>
+
+account-deletion-info-block-support-plaintext = "If you have any questions or need assistance, feel free to contact our support team:"
+<%- supportUrl %>
diff --git a/packages/fxa-auth-server/lib/senders/emails/partials/automatedEmailChangePassword/index.stories.ts b/packages/fxa-auth-server/lib/senders/emails/partials/automatedEmailChangePassword/index.stories.ts
@@ -0,0 +1,23 @@
+/* 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 { Meta } from '@storybook/html';
+import { storyWithProps } from '../../storybook-email';
+
+export default {
+  title: 'Partials/footers/automatedEmailChangePassword',
+} as Meta;
+
+const createStory = storyWithProps(
+  '_storybook',
+  'This partial is used in footers for automated emails recommending a password change.',
+  {
+    layout: null,
+    subject: 'N/A',
+    partial: 'automatedEmailChangePassword',
+    passwordChangeLink: 'http://localhost:3030/settings/change_password',
+  }
+);
+
+export const AutomatedEmailChangePassword = createStory();
diff --git a/packages/fxa-auth-server/lib/senders/emails/partials/automatedEmailInactiveAccount/en.ftl b/packages/fxa-auth-server/lib/senders/emails/partials/automatedEmailInactiveAccount/en.ftl
@@ -0,0 +1 @@
+automated-email-inactive-account = This is an automated email. You are receiving it because you have a { -product-mozilla-account } and it has been 2 years since your last sign-in.
diff --git a/packages/fxa-auth-server/lib/senders/emails/partials/automatedEmailInactiveAccount/index.mjml b/packages/fxa-auth-server/lib/senders/emails/partials/automatedEmailInactiveAccount/index.mjml
@@ -0,0 +1,13 @@
+<%# 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/. %>
+
+<mj-section>
+  <mj-column>
+    <mj-text css-class="text-footer-automatedEmail">
+      <span data-l10n-id="automated-email-inactive-account">
+        This is an automated email. You are receiving it because you have a Mozilla account and it has been 2 years since your last sign-in.
+      </span>
+    </mj-text>
+  </mj-column>
+</mj-section>
diff --git a/packages/fxa-auth-server/lib/senders/emails/partials/automatedEmailInactiveAccount/index.stories.ts b/packages/fxa-auth-server/lib/senders/emails/partials/automatedEmailInactiveAccount/index.stories.ts
@@ -0,0 +1,22 @@
+/* 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 { Meta } from '@storybook/html';
+import { storyWithProps } from '../../storybook-email';
+
+export default {
+  title: 'Partials/footers/automatedEmailInactiveAccount',
+} as Meta;
+
+const createStory = storyWithProps(
+  '_storybook',
+  'This partial is used in footers for automated inactive account email notifications.',
+  {
+    layout: null,
+    subject: 'N/A',
+    partial: 'automatedEmailInactiveAccount',
+  }
+);
+
+export const AutomatedEmailInactiveAccount = createStory();
diff --git a/packages/fxa-auth-server/lib/senders/emails/partials/automatedEmailInactiveAccount/index.txt b/packages/fxa-auth-server/lib/senders/emails/partials/automatedEmailInactiveAccount/index.txt
@@ -0,0 +1 @@
+automated-email-inactive-account = "This is an automated email. You are receiving it because you have a Mozilla account and it has been 2 years since your last sign-in."
diff --git a/packages/fxa-auth-server/lib/senders/emails/partials/automatedEmailNoAction/index.stories.ts b/packages/fxa-auth-server/lib/senders/emails/partials/automatedEmailNoAction/index.stories.ts
@@ -0,0 +1,22 @@
+/* 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 { Meta } from '@storybook/html';
+import { storyWithProps } from '../../storybook-email';
+
+export default {
+  title: 'Partials/footers/automatedEmailNoAction',
+} as Meta;
+
+const createStory = storyWithProps(
+  '_storybook',
+  'This partial is used in footers for automated emails where no action is recommended.',
+  {
+    layout: null,
+    subject: 'N/A',
+    partial: 'automatedEmailNoAction',
+  }
+);
+
+export const AutomatedEmailNoAction = createStory();
diff --git a/packages/fxa-auth-server/lib/senders/emails/partials/automatedEmailNotAuthorized/index.stories.ts b/packages/fxa-auth-server/lib/senders/emails/partials/automatedEmailNotAuthorized/index.stories.ts
@@ -0,0 +1,23 @@
+/* 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 { Meta } from '@storybook/html';
+import { storyWithProps } from '../../storybook-email';
+
+export default {
+  title: 'Partials/footers/automatedEmailNotAuthorized',
+} as Meta;
+
+const createStory = storyWithProps(
+  '_storybook',
+  'This partial is used in footers for automated emails - text format only',
+  {
+    layout: null,
+    subject: 'N/A',
+    partial: 'automatedEmailNotAuthorized',
+    passwordChangeLink: 'http://localhost:3030/settings/change_password',
+  }
+);
+
+export const AutomatedEmailNotAuthorized = createStory();
diff --git a/packages/fxa-auth-server/lib/senders/emails/partials/automatedEmailRecoveryKey/index.stories.ts b/packages/fxa-auth-server/lib/senders/emails/partials/automatedEmailRecoveryKey/index.stories.ts
@@ -0,0 +1,42 @@
+/* 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 { Meta } from '@storybook/html';
+import { storyWithProps } from '../../storybook-email';
+import { MOCK_DEVICE_ALL } from '../userDevice/mocks';
+
+export default {
+  title: 'Partials/footers/automatedEmailRecoveryKey',
+} as Meta;
+
+const createStory = storyWithProps(
+  '_storybook',
+  'This partial is used in footers for automated emails when the action involved an account recovery key.',
+  {
+    layout: null,
+    subject: 'N/A',
+    partial: 'automatedEmailRecoveryKey',
+    passwordChangeLink: 'http://localhost:3030/settings/change_password',
+  }
+);
+
+export const AutomatedEmailRecoveryKey = createStory(
+  {},
+  'When no recovery key exists for the account.'
+);
+
+export const AutomatedEmailRecoveryKeyExists = createStory(
+  {
+    keyExists: true,
+    revokeAccountRecoveryLink: 'http://localhost:3030/settings/#recovery-key',
+  },
+  'When recovery key exists for the account.'
+);
+
+export const AutomatedEmailRecoveryKeyInclDeviceInfo = createStory(
+  {
+    device: MOCK_DEVICE_ALL,
+  },
+  'With device information.'
+);
diff --git a/packages/fxa-auth-server/lib/senders/emails/partials/automatedEmailResetPassword/index.stories.ts b/packages/fxa-auth-server/lib/senders/emails/partials/automatedEmailResetPassword/index.stories.ts
@@ -0,0 +1,23 @@
+/* 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 { Meta } from '@storybook/html';
+import { storyWithProps } from '../../storybook-email';
+
+export default {
+  title: 'Partials/footers/automatedEmailResetPassword',
+} as Meta;
+
+const createStory = storyWithProps(
+  '_storybook',
+  'This partial is used in footers for automated emails where password reset is recommended.',
+  {
+    layout: null,
+    subject: 'N/A',
+    partial: 'automatedEmailResetPassword',
+    resetLink: 'http://localhost:3030/reset_password',
+  }
+);
+
+export const AutomatedEmailResetPassword = createStory();
diff --git a/packages/fxa-auth-server/lib/senders/emails/partials/userDevice/index.stories.ts b/packages/fxa-auth-server/lib/senders/emails/partials/userDevice/index.stories.ts
@@ -13,7 +13,7 @@ import {
 } from './mocks';
 
 export default {
-  title: 'Stateful partials/userInfo/userDevice',
+  title: 'Partials/userInfo/userDevice',
 } as Meta;
 
 const createStory = storyWithProps(
diff --git a/packages/fxa-auth-server/lib/senders/emails/partials/userInfo/index.stories.ts b/packages/fxa-auth-server/lib/senders/emails/partials/userInfo/index.stories.ts
@@ -7,7 +7,7 @@ import { storyWithProps } from '../../storybook-email';
 import { MOCK_USER_INFO, MOCK_USER_INFO_ALL } from './mocks';
 
 export default {
-  title: 'Stateful partials/userInfo',
+  title: 'Partials/userInfo',
 } as Meta;
 
 const createStory = storyWithProps(
diff --git a/packages/fxa-auth-server/lib/senders/emails/storybook-email.ts b/packages/fxa-auth-server/lib/senders/emails/storybook-email.ts
@@ -29,6 +29,8 @@ const commonArgs = {
   supportUrl:
     'https://support.mozilla.org/kb/im-having-problems-my-firefox-account',
   privacyUrl: 'https://www.mozilla.org/privacy/mozilla-accounts/',
+  unsubscribeUrl:
+    'https://privacyportal.onetrust.com/webform/1350748f-7139-405c-8188-22740b3b5587/4ba08202-2ede-4934-a89e-f0b0870f95f0',
 };
 
 const subplatCommonArgs = {
diff --git a/packages/fxa-auth-server/lib/senders/emails/templates/inactiveAccountFirstWarning/en.ftl b/packages/fxa-auth-server/lib/senders/emails/templates/inactiveAccountFirstWarning/en.ftl
@@ -0,0 +1,10 @@
+inactiveAccountFirstWarning-subject = Donʼt lose your account
+inactiveAccountFirstWarning-title = Do you want to keep your { -brand-mozilla } account and data?
+inactiveAccountFirstWarning-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 }.</span>
+inactiveAccountFirstWarning-inactive-status = We noticed you haven’t signed in for 2 years.
+# $deletionDate - the date when the account will be deleted if the user does not take action to-reactivate their account
+# This date will already be formatted with moment.js into Thursday, Jan 9, 2025 format
+inactiveAccountFirstWarning-impact = Your account and your personal data will be permanently deleted on <strong>{ $deletionDate }</strong> because you haven’t been active.
+inactiveAccountFirstWarning-action = Sign in to keep your account
+# followed by link to sign in
+inactiveAccountFirstWarning-action = Sign in to keep your account:
diff --git a/packages/fxa-auth-server/lib/senders/emails/templates/inactiveAccountFirstWarning/includes.json b/packages/fxa-auth-server/lib/senders/emails/templates/inactiveAccountFirstWarning/includes.json
@@ -0,0 +1,10 @@
+{
+  "subject": {
+    "id": "inactiveAccountFirstWarning-subject",
+    "message": "Donʼt lose your account"
+  },
+  "action": {
+    "id": "inactiveAccountFirstWarning-action",
+    "message": "Sign in to keep your account"
+  }
+}
diff --git a/packages/fxa-auth-server/lib/senders/emails/templates/inactiveAccountFirstWarning/index.mjml b/packages/fxa-auth-server/lib/senders/emails/templates/inactiveAccountFirstWarning/index.mjml
@@ -0,0 +1,33 @@
+<%# 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/. %>
+
+<mj-section>
+  <mj-column>
+    <mj-text css-class="text-header">
+      <span data-l10n-id="inactiveAccountFirstWarning-title">Do you want to keep your Mozilla account and data?</span>
+    </mj-text>
+  </mj-column>
+</mj-section>
+
+<mj-section>
+  <mj-column>
+    <mj-text css-class="text-sub-body">
+      <span data-l10n-id="inactiveAccountFirstWarning-account-description">Your Mozilla account is used to access free privacy and browsing products like Firefox sync, Mozilla Monitor, Firefox Relay, and MDN.</span>
+    </mj-text>
+    <mj-text css-class="text-sub-body">
+      <span data-l10n-id="inactiveAccountFirstWarning-inactive-status">We noticed you haven’t signed in for 2 years.</span>
+    </mj-text>
+    <mj-text css-class="text-sub-body">
+      <span data-l10n-id="inactiveAccountFirstWarning-impact" data-l10n-args="<%= JSON.stringify({deletionDate}) %>">Your account and your personal data will be permanently deleted on <strong>{ $deletionDate }</strong> because you haven’t been active.</span>
+    </mj-text>
+  </mj-column>
+</mj-section>
+
+<%- include('/partials/button/index.mjml', {
+  buttonL10nId: "inactiveAccountFirstWarning-action",
+  buttonText: "Sign in to keep your account"
+}) %>
+
+<%- include('/partials/accountDeletionInfoBlock/index.mjml') %>
+<%- include('/partials/automatedEmailInactiveAccount/index.mjml') %>
diff --git a/packages/fxa-auth-server/lib/senders/emails/templates/inactiveAccountFirstWarning/index.stories.ts b/packages/fxa-auth-server/lib/senders/emails/templates/inactiveAccountFirstWarning/index.stories.ts
@@ -0,0 +1,22 @@
+/* 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 { Meta } from '@storybook/html';
+import { storyWithProps } from '../../storybook-email';
+
+export default {
+  title: 'FxA Emails/Templates/inactiveAccountFirstWarning',
+} as Meta;
+
+const createStory = storyWithProps(
+  'inactiveAccountFirstWarning',
+  'First reminder sent to inactive account before account is deleted',
+  {
+    // dates will be passed in to the template already localized and formatted by the email handler
+    deletionDate: 'Thursday, Jan 9, 2025',
+    link: 'http://localhost:3030/signin',
+  }
+);
+
+export const inactiveAccountFirstWarning = createStory();
diff --git a/packages/fxa-auth-server/lib/senders/emails/templates/inactiveAccountFirstWarning/index.txt b/packages/fxa-auth-server/lib/senders/emails/templates/inactiveAccountFirstWarning/index.txt

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+automated-email-inactive-account = This is an automated email. You are receiving it because you have a { -product-mozilla-account } and it has been 2 years since your last sign-in.`