Merge pull request #15482 from mozilla/FXA-7527

feat(newsletters): Update newsletter checkbox labels, add new newsletter checkbox w/two slugs
mozilla · Jun 29, 2023 · 59441a9 · 59441a9
2 parents e73668c + 8ed9041
commit 59441a9
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 36 deletions.
diff --git a/packages/fxa-auth-server/lib/routes/validators.js b/packages/fxa-auth-server/lib/routes/validators.js
@@ -866,7 +866,9 @@ module.exports.newsletters = isA
         'knowledge-is-power',
         'take-action-for-the-internet',
         'test-pilot',
-        'mozilla-and-you'
+        'mozilla-and-you',
+        'security-privacy-news',
+        'mozilla-accounts'
       )
   )
   .default([])

diff --git a/packages/fxa-content-server/app/scripts/lib/newsletters.js b/packages/fxa-content-server/app/scripts/lib/newsletters.js
@@ -14,38 +14,23 @@ const t = (msg) => msg;
 
 export default {
   CONSUMER_BETA: {
-    label: t('Test new Firefox products'),
+    label: t('Early access to test new products'),
     slug: 'test-pilot',
   },
   FIREFOX_ACCOUNTS_JOURNEY: {
     label: t('Get the latest news about Mozilla and Firefox'),
     slug: 'firefox-accounts-journey',
   },
   HEALTHY_INTERNET: {
-    label: t('Take action to keep the internet healthy'),
+    label: t('Help keep the internet healthy'),
     slug: 'take-action-for-the-internet',
   },
   ONLINE_SAFETY: {
     label: t('Be safer and smarter online'),
     slug: 'knowledge-is-power',
   },
-};
-
-export const newsletterNewCopy = {
-  CONSUMER_BETA: {
-    label: t('Testing Firefox products'),
-    slug: 'test-pilot',
-  },
-  FIREFOX_ACCOUNTS_JOURNEY: {
-    label: t('Get the latest news about Mozilla and Firefox'),
-    slug: 'firefox-accounts-journey',
-  },
-  HEALTHY_INTERNET: {
-    label: t('Taking action to keep the internet healthy'),
-    slug: 'take-action-for-the-internet',
-  },
-  ONLINE_SAFETY: {
-    label: t('Safety and privacy online with Firefox and Mozilla'),
-    slug: 'knowledge-is-power',
+  SECURITY_PRIVACY: {
+    label: t('Security & privacy news and updates'),
+    slug: ['security-privacy-news', 'mozilla-accounts'],
   },
 };
diff --git a/packages/fxa-content-server/app/scripts/templates/sign_up_password.mustache b/packages/fxa-content-server/app/scripts/templates/sign_up_password.mustache
@@ -42,7 +42,7 @@
       <section class="mb-5">
       {{#isAnyNewsletterEnabled}}
           <header>
-              <h2 class="mb-5 text-base text-start">{{#t}}Practical knowledge is coming to your inbox. Sign up for more:{{/t}}</h2>
+              <h2 class="mb-5 text-base text-start font-bold">{{#t}}Get more from Mozilla:{{/t}}</h2>
           </header>
       {{/isAnyNewsletterEnabled}}
 

diff --git a/packages/fxa-content-server/app/scripts/views/mixins/email-opt-in-mixin.js b/packages/fxa-content-server/app/scripts/views/mixins/email-opt-in-mixin.js
@@ -15,11 +15,13 @@ const MARKETING_EMAIL_CHECKBOX_SELECTOR = '#newsletters-optin input';
  */
 
 const NEWSLETTERS = [
-  Newsletters.ONLINE_SAFETY,
+  Newsletters.SECURITY_PRIVACY,
   Newsletters.CONSUMER_BETA,
   Newsletters.HEALTHY_INTERNET,
 ];
 
+const UNESCAPED_NEWSLETTERS = [Newsletters.SECURITY_PRIVACY];
+
 export default {
   initialize(options = {}) {
     this._experimentGroupingRules = options.experimentGroupingRules;
@@ -38,9 +40,12 @@ export default {
 
     const newsletters = this._getNewsletters().map((newsletter) => {
       // labels are untranslated, make sure to translate them
-      // before rendering.
+      // before rendering. Some newsletter labels should not be HTML escaped.
+      const label = UNESCAPED_NEWSLETTERS.includes(newsletter)
+        ? this.unsafeTranslate(newsletter.label)
+        : this.translate(newsletter.label);
       return {
-        label: this.translate(newsletter.label),
+        label,
         slug: newsletter.slug,
       };
     });
@@ -85,9 +90,14 @@ export default {
    * @returns {String[]} Array containing list of newsletters
    */
   getOptedIntoNewsletters() {
-    return this._getNewsletters()
-      .filter((newsletter) => this._hasOptedIntoNewsletter(newsletter))
-      .map((newsletter) => newsletter.slug);
+    return (
+      this._getNewsletters()
+        .filter((newsletter) => this._hasOptedIntoNewsletter(newsletter))
+        .map((newsletter) => newsletter.slug)
+        // `newsletter.slug` can be an array of strings when one checkbox corresponds
+        // with multiple slugs. Flatten them here to send an array of strings.
+        .flat()
+    );
   },
 
   /**

diff --git a/packages/fxa-content-server/app/tests/spec/views/mixins/email-opt-in-mixin.js b/packages/fxa-content-server/app/tests/spec/views/mixins/email-opt-in-mixin.js
@@ -114,26 +114,49 @@ describe('views/mixins/email-opt-in-mixin', () => {
         .$(view._newsletterTypeToSelector(NEWSLETTERS.CONSUMER_BETA))
         .attr('checked', 'checked');
       view
-        .$(view._newsletterTypeToSelector(NEWSLETTERS.ONLINE_SAFETY))
+        .$(view._newsletterTypeToSelector(NEWSLETTERS.HEALTHY_INTERNET))
         .attr('checked', 'checked');
+      view;
       assert.sameMembers(view.getOptedIntoNewsletters(), [
         'test-pilot',
-        'knowledge-is-power',
+        'take-action-for-the-internet',
+      ]);
+    });
+
+    it('returns list of expected newsletters when newsletter is array of slugs', () => {
+      view
+        .$(view._newsletterTypeToSelector(NEWSLETTERS.SECURITY_PRIVACY))
+        .attr('checked', 'checked');
+      view
+        .$(view._newsletterTypeToSelector(NEWSLETTERS.HEALTHY_INTERNET))
+        .attr('checked', 'checked');
+      view;
+      assert.sameMembers(view.getOptedIntoNewsletters(), [
+        'take-action-for-the-internet',
+        'security-privacy-news',
+        'mozilla-accounts',
       ]);
     });
   });
 
   describe('returns new copy for newsletter experiment', () => {
     beforeEach(() => {
-      view.getExperimentGroup = () => true;
-      sinon.spy(view, 'getExperimentGroup');
+      sinon.stub(experimentGroupingRules, 'choose').callsFake(() => true);
       return view.render();
     });
 
     it('returns list of newsletters', () => {
-      view
-        .$(view._newsletterTypeToSelector(NEWSLETTERS.CONSUMER_BETA))
-        .attr('label', 'Testing Firefox products');
+      assert.equal(
+        view.$(`label[for="${NEWSLETTERS.CONSUMER_BETA.slug}"]`).text(),
+        'Early access to test new products'
+      );
+    });
+
+    it('renders unescaped label as expected', () => {
+      assert.equal(
+        view.$(`label[for="${NEWSLETTERS.SECURITY_PRIVACY.slug}"]`).text(),
+        'Security & privacy news and updates'
+      );
     });
   });
 });
diff --git a/packages/fxa-content-server/app/tests/spec/views/sign_up_password.js b/packages/fxa-content-server/app/tests/spec/views/sign_up_password.js
@@ -192,7 +192,8 @@ describe('views/sign_up_password', () => {
         return Promise.resolve(view.validateAndSubmit()).then(() => {
           assert.isTrue(view.signUp.calledOnceWith(account, 'password123123'));
           assert.sameMembers(account.get('newsletters'), [
-            'knowledge-is-power',
+            'security-privacy-news',
+            'mozilla-accounts',
             'test-pilot',
             'take-action-for-the-internet',
           ]);