Refactor newsletter petition localization

source/js/components/newsletter-signup/data/country-options.js

@@ -1,7 +1,6 @@
 import SALESFORCE_COUNTRY_LIST from "../../petition/salesforce-country-list.js";
-import { getText } from "../../petition/locales";
 
-let countryDefault = { value: "", label: getText(`Your country`) };
+let countryDefault = { value: "", label: gettext("Your country") };
 let countryOptions = Object.keys(SALESFORCE_COUNTRY_LIST).map((code) => {
   return {
     value: code,

source/js/components/newsletter-signup/organisms/default-layout-signup.jsx

@@ -12,7 +12,7 @@ import APIErrorMessage from "../atoms/api-error-message.jsx";
 import withSubmissionLogic from "./with-submission-logic.jsx";
 import utility from "../../../utility.js";
 import { ReactGA } from "../../../common";
-import { getText, getCurrentLanguage } from "../../petition/locales";
+import { getCurrentLanguage } from "../../petition/locales";
 import { COUNTRY_OPTIONS } from "../data/country-options.js";
 import { LANGUAGE_OPTIONS } from "../data/language-options.js";
 import { FORM_STYLE } from "./form-specific-style.js";
@@ -33,7 +33,7 @@ class DefaultSignupForm extends Component {
       "privacy",
     ]);
     this.style = FORM_STYLE[props.formStyle];
-    this.buttonText = props.buttonText || getText("Sign up");
+    this.buttonText = props.buttonText || gettext("Sign up");
   }
 
   getInitialState() {
@@ -169,9 +169,9 @@ class DefaultSignupForm extends Component {
       <InputText
         id={this.ids[name]}
         name={name}
-        ariaLabel={getText(`First name`)}
+        ariaLabel={gettext("First name")}
         value={this.getFormFieldValue(name)}
-        placeholder={getText(`First name`)}
+        placeholder={gettext("First name")}
         onFocus={() => this.handleInputFocus()}
         onChange={(event) => this.handleFirstNameChange(event)}
         required={false}
@@ -189,9 +189,9 @@ class DefaultSignupForm extends Component {
       <InputText
         id={this.ids[name]}
         name={name}
-        ariaLabel={getText(`Last name`)}
+        ariaLabel={gettext("Last name")}
         value={this.getFormFieldValue(name)}
-        placeholder={getText(`Last name`)}
+        placeholder={gettext("Last name")}
         onFocus={() => this.handleInputFocus()}
         onChange={(event) => this.handleLastNameChange(event)}
         required={false}
@@ -210,9 +210,9 @@ class DefaultSignupForm extends Component {
         id={this.ids[name]}
         type="email"
         name={name}
-        ariaLabel={getText(`Email address`)}
+        ariaLabel={gettext("Email address")}
         value={this.getFormFieldValue(name)}
-        placeholder={getText(`Please enter your email`)}
+        placeholder={gettext("Please enter your email")}
         onFocus={() => this.handleEmailFocusAndInput()}
         onInput={() => this.handleEmailFocusAndInput()}
         onChange={(event) => this.handleEmailChange(event)}
@@ -265,8 +265,8 @@ class DefaultSignupForm extends Component {
       <InputCheckboxWithLabel
         id={this.ids[name]}
         name={name}
-        label={getText(
-          `I'm okay with Mozilla handling my info as explained in this Privacy Notice`
+        label={gettext(
+          "<span>I'm okay with Mozilla handling my info as explained in this <a target='_blank' href='https://www.mozilla.org/privacy/websites/'>Privacy Notice</a></span>"
         )}
         value={this.getFormFieldValue(name)}
         checked={this.getFormFieldValue(name) === "true"}
@@ -305,7 +305,7 @@ class DefaultSignupForm extends Component {
             widthClasses={this.style.buttonWidthClasses}
             handleQuitButtonClick={this.props.handleQuitButtonClick}
           >
-            {getText(`No thanks`)}
+            {gettext("No thanks")}
           </ButtonQuit>
         </div>
       );

source/js/components/newsletter-signup/organisms/with-submission-logic.jsx

@@ -1,7 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { ReactGA } from "../../../common";
-import { getText } from "../../petition/locales";
 
 /**
  * Higher-order component that handles form submission logic and validation
@@ -27,20 +26,20 @@ function withSubmissionLogic(WrappedComponent) {
       this.validators = {
         email: (value) => {
           if (!value) {
-            return getText(`This is a required section.`);
+            return gettext("This is a required section.");
           }
 
           // Regex copied from join.jsx
           const emailRegex = new RegExp(/[^@]+@[^.@]+(\.[^.@]+)+$/);
           if (!emailRegex.test(value)) {
-            return getText(`Please enter a valid email address.`);
+            return gettext("Please enter a valid email address.");
           }
 
           return null;
         },
         privacy: (value) => {
           if (value !== "true") {
-            return getText(`Please check this box if you want to proceed.`);
+            return gettext("Please check this box if you want to proceed.");
           }
           return null;
         },
@@ -191,16 +190,16 @@ function withSubmissionLogic(WrappedComponent) {
 
         if (res.status !== 201) {
           this.setState({
-            apiError: getText(
-              `Something went wrong and your signup wasn't completed. Please try again later.`
+            apiError: gettext(
+              "Something went wrong and your signup wasn't completed. Please try again later."
             ),
           });
           throw new Error(res.statusText);
         }
       } catch (error) {
         this.setState({
-          apiError: getText(
-            `Something went wrong and your signup wasn't completed. Please try again later.`
+          apiError: gettext(
+            "Something went wrong and your signup wasn't completed. Please try again later."
           ),
         });
         throw error;
@@ -219,7 +218,7 @@ function withSubmissionLogic(WrappedComponent) {
       if (
         this.state.apiSubmissionStatus === this.API_SUBMISSION_STATUS.SUCCESS
       ) {
-        message = getText(`Thanks!`);
+        message = gettext("Thanks!");
       }
 
       return message;
@@ -239,8 +238,16 @@ function withSubmissionLogic(WrappedComponent) {
       ) {
         message = (
           <>
-            <p>{getText(`confirm your email opt-in`)}</p>
-            <p>{getText(`manage your subscriptions`)}</p>
+            <p>
+              {gettext(
+                "If you haven’t previously confirmed your opt-in to a Mozilla-related email subscription you may have to do so now. <strong>Please check your inbox or spam filter for an email from us to click and confirm your subscription</strong>."
+              )}
+            </p>
+            <p>
+              {gettext(
+                "If you have already confirmed your opt-in to receive Mozilla-related emails, you can now <a href='https://www.mozilla.org/newsletter/recovery/' target='_blank'>manage your subscriptions</a> and update your email preferences."
+              )}
+            </p>
           </>
         );
       }