From 69d252cedf6db3ab0fbf393c58fa9cd9f8ed490d Mon Sep 17 00:00:00 2001 From: Rob DiVincenzo Date: Tue, 23 Apr 2024 10:56:47 -0400 Subject: [PATCH 1/9] refactor newsletter-signup localization --- .../newsletter-signup/data/country-options.js | 3 +-- .../organisms/with-submission-logic.jsx | 21 +++++++++---------- 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/source/js/components/newsletter-signup/data/country-options.js b/source/js/components/newsletter-signup/data/country-options.js index a7abe03c352..6d878b5d737 100644 --- a/source/js/components/newsletter-signup/data/country-options.js +++ b/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, diff --git a/source/js/components/newsletter-signup/organisms/with-submission-logic.jsx b/source/js/components/newsletter-signup/organisms/with-submission-logic.jsx index ce3f31654cc..d74bce8b748 100644 --- a/source/js/components/newsletter-signup/organisms/with-submission-logic.jsx +++ b/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,8 @@ function withSubmissionLogic(WrappedComponent) { ) { message = ( <> -

{getText(`confirm your email opt-in`)}

-

{getText(`manage your subscriptions`)}

+

{gettext("confirm your email opt-in")}

+

{gettext("manage your subscriptions")}

); } From 93fee2ba01f80885fea6e000c99dae7d6726b5a1 Mon Sep 17 00:00:00 2001 From: Rob DiVincenzo Date: Tue, 23 Apr 2024 11:01:10 -0400 Subject: [PATCH 2/9] More refactoring of newsletter-signup localization --- .../organisms/default-layout-signup.jsx | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/source/js/components/newsletter-signup/organisms/default-layout-signup.jsx b/source/js/components/newsletter-signup/organisms/default-layout-signup.jsx index c879282f027..40fe630b5a6 100644 --- a/source/js/components/newsletter-signup/organisms/default-layout-signup.jsx +++ b/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 { this.handleInputFocus()} onChange={(event) => this.handleFirstNameChange(event)} required={false} @@ -189,9 +189,9 @@ class DefaultSignupForm extends Component { 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 { - {getText(`No thanks`)} + {gettext("No thanks")} ); From 4be3cb0f1f39dddf2e235a0c330bb63686b79658 Mon Sep 17 00:00:00 2001 From: Rob DiVincenzo Date: Tue, 23 Apr 2024 12:26:56 -0400 Subject: [PATCH 3/9] Refactor aliases to use actual strings --- .../newsletter-signup/organisms/default-layout-signup.jsx | 2 +- .../newsletter-signup/organisms/with-submission-logic.jsx | 8 ++++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/source/js/components/newsletter-signup/organisms/default-layout-signup.jsx b/source/js/components/newsletter-signup/organisms/default-layout-signup.jsx index 40fe630b5a6..de0dcaeccbf 100644 --- a/source/js/components/newsletter-signup/organisms/default-layout-signup.jsx +++ b/source/js/components/newsletter-signup/organisms/default-layout-signup.jsx @@ -266,7 +266,7 @@ class DefaultSignupForm extends Component { id={this.ids[name]} name={name} label={gettext( - "I'm okay with Mozilla handling my info as explained in this Privacy Notice" + "I'm okay with Mozilla handling my info as explained in this Privacy Notice" )} value={this.getFormFieldValue(name)} checked={this.getFormFieldValue(name) === "true"} diff --git a/source/js/components/newsletter-signup/organisms/with-submission-logic.jsx b/source/js/components/newsletter-signup/organisms/with-submission-logic.jsx index d74bce8b748..1f0298be2d1 100644 --- a/source/js/components/newsletter-signup/organisms/with-submission-logic.jsx +++ b/source/js/components/newsletter-signup/organisms/with-submission-logic.jsx @@ -238,8 +238,12 @@ function withSubmissionLogic(WrappedComponent) { ) { message = ( <> -

{gettext("confirm your email opt-in")}

-

{gettext("manage your subscriptions")}

+

+ {gettext("If you haven’t previously confirmed your opt-in to a Mozilla-related email subscription you may have to do so now. Please check your inbox or spam filter for an email from us to click and confirm your subscription.")} +

+

+ {gettext("If you have already confirmed your opt-in to receive Mozilla-related emails, you can now manage your subscriptions and update your email preferences.")} +

); } From ca930b093805e44d08a703798ac3f567ee930919 Mon Sep 17 00:00:00 2001 From: Rob DiVincenzo Date: Tue, 23 Apr 2024 12:31:28 -0400 Subject: [PATCH 4/9] linting --- .../newsletter-signup/organisms/with-submission-logic.jsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/source/js/components/newsletter-signup/organisms/with-submission-logic.jsx b/source/js/components/newsletter-signup/organisms/with-submission-logic.jsx index 1f0298be2d1..bf3df29cab2 100644 --- a/source/js/components/newsletter-signup/organisms/with-submission-logic.jsx +++ b/source/js/components/newsletter-signup/organisms/with-submission-logic.jsx @@ -239,10 +239,14 @@ function withSubmissionLogic(WrappedComponent) { message = ( <>

- {gettext("If you haven’t previously confirmed your opt-in to a Mozilla-related email subscription you may have to do so now. Please check your inbox or spam filter for an email from us to click and confirm your subscription.")} + {gettext( + "If you haven’t previously confirmed your opt-in to a Mozilla-related email subscription you may have to do so now. Please check your inbox or spam filter for an email from us to click and confirm your subscription." + )}

- {gettext("If you have already confirmed your opt-in to receive Mozilla-related emails, you can now manage your subscriptions and update your email preferences.")} + {gettext( + "If you have already confirmed your opt-in to receive Mozilla-related emails, you can now manage your subscriptions and update your email preferences." + )}

); From f19130d743fd5c6d4c9274fb647653d0c918b763 Mon Sep 17 00:00:00 2001 From: Rob DiVincenzo Date: Wed, 8 May 2024 11:21:07 -0400 Subject: [PATCH 5/9] Update string to use pre-text/link-text/post-text localizations --- .../organisms/default-layout-signup.jsx | 23 ++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/source/js/components/newsletter-signup/organisms/default-layout-signup.jsx b/source/js/components/newsletter-signup/organisms/default-layout-signup.jsx index de0dcaeccbf..a243a697e60 100644 --- a/source/js/components/newsletter-signup/organisms/default-layout-signup.jsx +++ b/source/js/components/newsletter-signup/organisms/default-layout-signup.jsx @@ -261,13 +261,30 @@ class DefaultSignupForm extends Component { renderPrivacyCheckbox() { const name = "privacy"; + const label = ( + + {pgettext( + "Pre-link text of: I'm okay with Mozilla handling my info as explained in this Privacy Notice.", + "I'm okay with Mozilla handling my info as explained in this " + )} + + {pgettext( + "Link text of: I'm okay with Mozilla handling my info as explained in this Privacy Notice.", + "Privacy Notice" + )} + + {pgettext( + "Post-link text of: I'm okay with Mozilla handling my info as explained in this Privacy Notice.", + "." + )} + + ); + return ( I'm okay with Mozilla handling my info as explained in this Privacy Notice" - )} + label={label} value={this.getFormFieldValue(name)} checked={this.getFormFieldValue(name) === "true"} onChange={(event) => this.handlePrivacyChange(event)} From 8a7737ac6bcfab397df0bf2169e52404c3d48e0d Mon Sep 17 00:00:00 2001 From: Rob DiVincenzo Date: Thu, 9 May 2024 16:11:19 -0400 Subject: [PATCH 6/9] Fragmenting out opt-in text for localization --- .../organisms/with-submission-logic.jsx | 33 ++++++++++++++++--- 1 file changed, 29 insertions(+), 4 deletions(-) diff --git a/source/js/components/newsletter-signup/organisms/with-submission-logic.jsx b/source/js/components/newsletter-signup/organisms/with-submission-logic.jsx index bf3df29cab2..84605ccd882 100644 --- a/source/js/components/newsletter-signup/organisms/with-submission-logic.jsx +++ b/source/js/components/newsletter-signup/organisms/with-submission-logic.jsx @@ -239,13 +239,38 @@ function withSubmissionLogic(WrappedComponent) { message = ( <>

- {gettext( - "If you haven’t previously confirmed your opt-in to a Mozilla-related email subscription you may have to do so now. Please check your inbox or spam filter for an email from us to click and confirm your subscription." + {pgettext( + "Pre-bold text of: If you haven’t previously confirmed your opt-in to a Mozilla-related email subscription you may have to do so now. Please check your inbox or spam filter for an email from us to click and confirm your subscription.", + "If you haven’t previously confirmed your opt-in to a Mozilla-related email subscription you may have to do so now. " + )} + + {pgettext( + "Bold text of: If you haven’t previously confirmed your opt-in to a Mozilla-related email subscription you may have to do so now. Please check your inbox or spam filter for an email from us to click and confirm your subscription.", + "Please check your inbox or spam filter for an email from us to click and confirm your subscription" + )} + + {pgettext( + "If you haven’t previously confirmed your opt-in to a Mozilla-related email subscription you may have to do so now. Please check your inbox or spam filter for an email from us to click and confirm your subscription.", + "." )}

- {gettext( - "If you have already confirmed your opt-in to receive Mozilla-related emails, you can now manage your subscriptions and update your email preferences." + {pgettext( + "Pre-link text of: If you have already confirmed your opt-in to receive Mozilla-related emails, you can now manage your subscriptions and update your email preferences.", + "If you have already confirmed your opt-in to receive Mozilla-related emails, you can now " + )} + + {pgettext( + "Link text of: If you have already confirmed your opt-in to receive Mozilla-related emails, you can now manage your subscriptions and update your email preferences.", + "manage your subscriptions" + )} + + {pgettext( + "Post-link text of: If you have already confirmed your opt-in to receive Mozilla-related emails, you can now manage your subscriptions and update your email preferences.", + " and update your email preferences." )}

From bbf6cf4ad8515d4891536201e18d27f590fd2be7 Mon Sep 17 00:00:00 2001 From: Rob DiVincenzo Date: Thu, 9 May 2024 16:49:16 -0400 Subject: [PATCH 7/9] reduce repitition since our gettext version supports js literals --- .../organisms/default-layout-signup.jsx | 14 +++++-------- .../organisms/with-submission-logic.jsx | 20 ++++++++++--------- 2 files changed, 16 insertions(+), 18 deletions(-) diff --git a/source/js/components/newsletter-signup/organisms/default-layout-signup.jsx b/source/js/components/newsletter-signup/organisms/default-layout-signup.jsx index a243a697e60..0e8098f80cb 100644 --- a/source/js/components/newsletter-signup/organisms/default-layout-signup.jsx +++ b/source/js/components/newsletter-signup/organisms/default-layout-signup.jsx @@ -260,23 +260,19 @@ class DefaultSignupForm extends Component { renderPrivacyCheckbox() { const name = "privacy"; + const privacy_text = + "I'm okay with Mozilla handling my info as explained in this Privacy Notice."; const label = ( {pgettext( - "Pre-link text of: I'm okay with Mozilla handling my info as explained in this Privacy Notice.", + `Pre-link text of: ${privacy_text}`, "I'm okay with Mozilla handling my info as explained in this " )} - {pgettext( - "Link text of: I'm okay with Mozilla handling my info as explained in this Privacy Notice.", - "Privacy Notice" - )} + {pgettext(`Link text of: ${privacy_text}`, "Privacy Notice")} - {pgettext( - "Post-link text of: I'm okay with Mozilla handling my info as explained in this Privacy Notice.", - "." - )} + {pgettext(`Post-link text of: ${privacy_text}`, ".")} ); diff --git a/source/js/components/newsletter-signup/organisms/with-submission-logic.jsx b/source/js/components/newsletter-signup/organisms/with-submission-logic.jsx index 84605ccd882..50e1ce344d7 100644 --- a/source/js/components/newsletter-signup/organisms/with-submission-logic.jsx +++ b/source/js/components/newsletter-signup/organisms/with-submission-logic.jsx @@ -236,27 +236,29 @@ function withSubmissionLogic(WrappedComponent) { if ( this.state.apiSubmissionStatus === this.API_SUBMISSION_STATUS.SUCCESS ) { + const subscription_intro_text = + "If you haven’t previously confirmed your opt-in to a Mozilla-related email subscription you may have to do so now. Please check your inbox or spam filter for an email from us to click and confirm your subscription."; + const subscription_manage_text = + "If you have already confirmed your opt-in to receive Mozilla-related emails, you can now manage your subscriptions and update your email preferences."; + message = ( <>

{pgettext( - "Pre-bold text of: If you haven’t previously confirmed your opt-in to a Mozilla-related email subscription you may have to do so now. Please check your inbox or spam filter for an email from us to click and confirm your subscription.", + `Pre-bold text of: ${subscription_intro_text}`, "If you haven’t previously confirmed your opt-in to a Mozilla-related email subscription you may have to do so now. " )} {pgettext( - "Bold text of: If you haven’t previously confirmed your opt-in to a Mozilla-related email subscription you may have to do so now. Please check your inbox or spam filter for an email from us to click and confirm your subscription.", + `Bold text of: ${subscription_intro_text}`, "Please check your inbox or spam filter for an email from us to click and confirm your subscription" )} - {pgettext( - "If you haven’t previously confirmed your opt-in to a Mozilla-related email subscription you may have to do so now. Please check your inbox or spam filter for an email from us to click and confirm your subscription.", - "." - )} + {pgettext(`Post-bold text of: ${subscription_intro_text}`, ".")}

{pgettext( - "Pre-link text of: If you have already confirmed your opt-in to receive Mozilla-related emails, you can now manage your subscriptions and update your email preferences.", + `Pre-link text of: ${subscription_manage_text}`, "If you have already confirmed your opt-in to receive Mozilla-related emails, you can now " )} {pgettext( - "Link text of: If you have already confirmed your opt-in to receive Mozilla-related emails, you can now manage your subscriptions and update your email preferences.", + `Link text of: ${subscription_manage_text}`, "manage your subscriptions" )} {pgettext( - "Post-link text of: If you have already confirmed your opt-in to receive Mozilla-related emails, you can now manage your subscriptions and update your email preferences.", + `Post-link text of: ${subscription_manage_text}`, " and update your email preferences." )}

From 9cf5071ae67f413c22cfadbecbe560ca1358295f Mon Sep 17 00:00:00 2001 From: Rob DiVincenzo Date: Tue, 14 May 2024 11:14:49 -0400 Subject: [PATCH 8/9] remove backticks --- .../organisms/default-layout-signup.jsx | 6 +++--- .../organisms/with-submission-logic.jsx | 12 ++++++------ 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/source/js/components/newsletter-signup/organisms/default-layout-signup.jsx b/source/js/components/newsletter-signup/organisms/default-layout-signup.jsx index 0e8098f80cb..f5e9faeeac5 100644 --- a/source/js/components/newsletter-signup/organisms/default-layout-signup.jsx +++ b/source/js/components/newsletter-signup/organisms/default-layout-signup.jsx @@ -266,13 +266,13 @@ class DefaultSignupForm extends Component { const label = ( {pgettext( - `Pre-link text of: ${privacy_text}`, + "Pre-link text of: "+privacy_text, "I'm okay with Mozilla handling my info as explained in this " )} - {pgettext(`Link text of: ${privacy_text}`, "Privacy Notice")} + {pgettext("Link text of: "+privacy_text, "Privacy Notice")} - {pgettext(`Post-link text of: ${privacy_text}`, ".")} + {pgettext("Post-link text of: "+privacy_text, ".")} ); diff --git a/source/js/components/newsletter-signup/organisms/with-submission-logic.jsx b/source/js/components/newsletter-signup/organisms/with-submission-logic.jsx index 50e1ce344d7..3cc6fd06415 100644 --- a/source/js/components/newsletter-signup/organisms/with-submission-logic.jsx +++ b/source/js/components/newsletter-signup/organisms/with-submission-logic.jsx @@ -245,20 +245,20 @@ function withSubmissionLogic(WrappedComponent) { <>

{pgettext( - `Pre-bold text of: ${subscription_intro_text}`, + "Pre-bold text of: "+subscription_intro_text, "If you haven’t previously confirmed your opt-in to a Mozilla-related email subscription you may have to do so now. " )} {pgettext( - `Bold text of: ${subscription_intro_text}`, + "Bold text of: "+subscription_intro_text, "Please check your inbox or spam filter for an email from us to click and confirm your subscription" )} - {pgettext(`Post-bold text of: ${subscription_intro_text}`, ".")} + {pgettext("Post-bold text of: "+subscription_intro_text, ".")}

{pgettext( - `Pre-link text of: ${subscription_manage_text}`, + "Pre-link text of: "+subscription_manage_text, "If you have already confirmed your opt-in to receive Mozilla-related emails, you can now " )} {pgettext( - `Link text of: ${subscription_manage_text}`, + "Link text of: "+subscription_manage_text, "manage your subscriptions" )} {pgettext( - `Post-link text of: ${subscription_manage_text}`, + "Post-link text of: "+subscription_manage_text, " and update your email preferences." )}

From a8f11e8806350d21e927d4661daae5c8ccafb4ef Mon Sep 17 00:00:00 2001 From: Rob DiVincenzo Date: Tue, 14 May 2024 11:23:32 -0400 Subject: [PATCH 9/9] linting --- .../organisms/default-layout-signup.jsx | 6 +++--- .../organisms/with-submission-logic.jsx | 12 ++++++------ 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/source/js/components/newsletter-signup/organisms/default-layout-signup.jsx b/source/js/components/newsletter-signup/organisms/default-layout-signup.jsx index f5e9faeeac5..310f3fb076e 100644 --- a/source/js/components/newsletter-signup/organisms/default-layout-signup.jsx +++ b/source/js/components/newsletter-signup/organisms/default-layout-signup.jsx @@ -266,13 +266,13 @@ class DefaultSignupForm extends Component { const label = ( {pgettext( - "Pre-link text of: "+privacy_text, + "Pre-link text of: " + privacy_text, "I'm okay with Mozilla handling my info as explained in this " )} - {pgettext("Link text of: "+privacy_text, "Privacy Notice")} + {pgettext("Link text of: " + privacy_text, "Privacy Notice")} - {pgettext("Post-link text of: "+privacy_text, ".")} + {pgettext("Post-link text of: " + privacy_text, ".")} ); diff --git a/source/js/components/newsletter-signup/organisms/with-submission-logic.jsx b/source/js/components/newsletter-signup/organisms/with-submission-logic.jsx index 3cc6fd06415..9c8ef26318b 100644 --- a/source/js/components/newsletter-signup/organisms/with-submission-logic.jsx +++ b/source/js/components/newsletter-signup/organisms/with-submission-logic.jsx @@ -245,20 +245,20 @@ function withSubmissionLogic(WrappedComponent) { <>

{pgettext( - "Pre-bold text of: "+subscription_intro_text, + "Pre-bold text of: " + subscription_intro_text, "If you haven’t previously confirmed your opt-in to a Mozilla-related email subscription you may have to do so now. " )} {pgettext( - "Bold text of: "+subscription_intro_text, + "Bold text of: " + subscription_intro_text, "Please check your inbox or spam filter for an email from us to click and confirm your subscription" )} - {pgettext("Post-bold text of: "+subscription_intro_text, ".")} + {pgettext("Post-bold text of: " + subscription_intro_text, ".")}

{pgettext( - "Pre-link text of: "+subscription_manage_text, + "Pre-link text of: " + subscription_manage_text, "If you have already confirmed your opt-in to receive Mozilla-related emails, you can now " )} {pgettext( - "Link text of: "+subscription_manage_text, + "Link text of: " + subscription_manage_text, "manage your subscriptions" )} {pgettext( - "Post-link text of: "+subscription_manage_text, + "Post-link text of: " + subscription_manage_text, " and update your email preferences." )}