From 2b2d84b1384e463bc883bc81745da840c570bc98 Mon Sep 17 00:00:00 2001 From: Mavis Ou Date: Fri, 16 Feb 2024 12:52:38 -0800 Subject: [PATCH] Remove old newsletter code (#11876) * remove obsolete code * remove more files --- maintenance/maintenance.html | 5 - .../templates/maintenance/maintenance.html | 5 - source/js/common/inject-react/index.js | 2 - source/js/common/inject-react/join-us.js | 28 - source/js/components/join/join.jsx | 597 ------------------ source/js/components/join/join.scss | 25 - source/js/components/join/language-select.jsx | 56 -- .../js/components/petition/country-select.jsx | 45 -- source/sass/buyers-guide/bg-main.scss | 1 - source/sass/main.scss | 1 - source/sass/views/home.scss | 14 - 11 files changed, 779 deletions(-) delete mode 100644 source/js/common/inject-react/join-us.js delete mode 100644 source/js/components/join/join.jsx delete mode 100644 source/js/components/join/join.scss delete mode 100644 source/js/components/join/language-select.jsx delete mode 100644 source/js/components/petition/country-select.jsx diff --git a/maintenance/maintenance.html b/maintenance/maintenance.html index 561742c5a3d..06e24fe46bc 100644 --- a/maintenance/maintenance.html +++ b/maintenance/maintenance.html @@ -28,11 +28,6 @@
-
-
-
-
-
diff --git a/network-api/networkapi/wagtailpages/templates/maintenance/maintenance.html b/network-api/networkapi/wagtailpages/templates/maintenance/maintenance.html index b9f7fc722fe..580bb30d5e5 100644 --- a/network-api/networkapi/wagtailpages/templates/maintenance/maintenance.html +++ b/network-api/networkapi/wagtailpages/templates/maintenance/maintenance.html @@ -27,11 +27,6 @@
-
-
-
-
-
diff --git a/source/js/common/inject-react/index.js b/source/js/common/inject-react/index.js index d96a3637117..a1bb47314f5 100644 --- a/source/js/common/inject-react/index.js +++ b/source/js/common/inject-react/index.js @@ -1,4 +1,3 @@ -import injectJoinUs from "./join-us.js"; import injectNewsletterSignup from "./newsletter-signup-module.js"; import injectPetitionThankYou from "./petition-thank-you.js"; @@ -8,7 +7,6 @@ import injectPetitionThankYou from "./petition-thank-you.js"; * @param {String} siteUrl Foundation site base URL */ export const injectCommonReactComponents = (apps, siteUrl) => { - injectJoinUs(apps, siteUrl); injectNewsletterSignup(apps, siteUrl); // FormAssembly petition thank you screen injectPetitionThankYou(apps); diff --git a/source/js/common/inject-react/join-us.js b/source/js/common/inject-react/join-us.js deleted file mode 100644 index c778761d009..00000000000 --- a/source/js/common/inject-react/join-us.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from "react"; -import { createRoot } from "react-dom/client"; -import JoinUs from "../../components/join/join.jsx"; - -/** - * Inject newsletter signup forms - * @param {Array} apps The existing array we are using to to track all React client rendering calls - * @param {String} siteUrl Foundation site base URL - */ -export default (apps, siteUrl) => { - // excluding `.join-us.on-nav` because it's taken care of by nav-newsletter.js - document - .querySelectorAll(`.join-us:not(.on-nav):not(.react-rendered)`) - .forEach((element) => { - const props = element.dataset; - const sid = props.signupId || 0; - - props.apiUrl = `${siteUrl}/api/campaign/signups/${sid}/`; - props.isHidden = false; - - apps.push( - new Promise((resolve) => { - const root = createRoot(element); - root.render( resolve()} />); - }) - ); - }); -}; diff --git a/source/js/components/join/join.jsx b/source/js/components/join/join.jsx deleted file mode 100644 index fd0b67b1a99..00000000000 --- a/source/js/components/join/join.jsx +++ /dev/null @@ -1,597 +0,0 @@ -import { Component, Fragment } from "react"; -import { ReactGA } from "../../common"; -import ReactDOM from "react-dom"; -import classNames from "classnames"; -import CountrySelect from "../petition/country-select.jsx"; -import { getText } from "../petition/locales"; -import { getCurrentLanguage } from "../petition/locales"; -import LanguageSelect from "./language-select.jsx"; -import utility from "../../utility"; - -const FORM_CONTROL_CLASS = - "tw-form-control has-error:tw-border has-error:tw-border-solid has-error:tw-border-[#c01] dark:has-error:tw-border-2 dark:has-error:tw-border-red-40"; -const ERROR_CLASS = "tw-text-[#c01] dark:tw-text-red-40"; - -/** - * Newsletter sign-up form - * TODO: Need to split into separate components and reorganize. Component is way too big. - * Would recommend refactoring before adding a new variant of newsletter - */ -class JoinUs extends Component { - constructor(props) { - super(props); - this.id = { - userEmail: utility.generateUniqueId(`join-user-email`), - privacyCheckbox: utility.generateUniqueId(`join-privacy-checkbox`), - }; - this.state = this.getInitialState(props); - } - - getInitialState(props) { - return { - apiSubmitted: false, - apiSuccess: false, - apiFailed: false, - userTriedSubmitting: false, - lang: getCurrentLanguage(), - hideLocaleFields: [`body`, `callout-box`].includes(props.formPosition), - submitButtonDisabled: props.disableSubmitButton, - }; - } - - /** - * Ensure that the parent component is informed - * about this component being mounted (primarily - * used in the context of automated testing) - */ - componentDidMount() { - if (this.props.whenLoaded) { - this.props.whenLoaded(); - } - } - - componentDidUpdate(prevProps, prevState) { - let navWrapper = document.querySelector("#nav-newsletter-form-wrapper"); - - // when user has successfully signed up for newsletter from the newsletter section on the nav, - // update the dismiss button so it reads "Back to menu" instead of "No thanks" - if ( - navWrapper && - navWrapper.contains(ReactDOM.findDOMNode(this)) && - navWrapper.querySelector(".form-dismiss") && - this.state.apiSuccess - ) { - navWrapper.querySelector(".form-dismiss").textContent = "Back to menu"; - } - } - - // state update function - apiSubmissionSuccessful() { - this.setState({ - apiSuccess: true, - }); - } - - // state update function - apiSubmissionFailure(e) { - if (e && e instanceof Error) { - this.setState({ - apiFailed: true, - }); - } - } - - // state check function - apiIsDone() { - return ( - this.state.apiSubmitted && (this.state.apiSuccess || this.state.apiFailed) - ); - } - - /** - * Performs very simple validation for emails. - * @param {string} input the string that should be validated as an email address - * @returns {boolean} true if the input is a legal-enough email address, else false - */ - validatesAsEmail(input) { - if (!input) { - return { - valid: false, - errorMessage: getText(`This is a required section.`), - }; - } - - let valid = input.match(/[^@]+@[^.@]+(\.[^.@]+)+$/) !== null; - - if (!valid) { - return { - valid: false, - errorMessage: getText(`Please enter a valid email address.`), - }; - } - - return { - valid: true, - }; - } - - /** - * Submit the user's data to the API server. - */ - submitDataToApi() { - this.setState({ apiSubmitted: true }); - - return new Promise((resolve, reject) => { - let payload = { - email: this.email.value, - /* keeping query params in source url for newsletter signups: https://github.com/mozilla/foundation.mozilla.org/issues/4102#issuecomment-590973606 */ - source: window.location.href, - }; - - if (this.givenNames) { - payload.givenNames = this.givenNames.value; - } - if (this.surname) { - payload.surname = this.surname.value; - } - - if (this.country && this.country.element.value) { - payload.country = this.country.element.value; - } - - if (this.state.lang) { - payload.lang = this.state.lang; - } - - let xhr = new XMLHttpRequest(); - - xhr.onreadystatechange = () => { - if (xhr.readyState !== XMLHttpRequest.DONE) { - return; - } - - if (xhr.status !== 201) { - reject(new Error(xhr.responseText)); - } - - resolve(); - }; - - xhr.open(`POST`, this.props.apiUrl, true); - xhr.setRequestHeader(`Content-Type`, `application/json`); - xhr.setRequestHeader(`X-Requested-With`, `XMLHttpRequest`); - xhr.timeout = 5000; - xhr.ontimeout = () => reject(new Error(`xhr timed out`)); - - xhr.send(JSON.stringify(payload)); - }); - } - - /** - * Process the form data, to make sure there is a valid - * email address, and the consent checkbox has been checked, - * before proceding with a data post to the API server. - */ - processFormData(event) { - this.setState({ userTriedSubmitting: true }); - event.preventDefault(); - - // validate data here. Do not continue unless we're cool. - let email = this.email.value; - let consent = this.privacy.checked; - - if (email && this.validatesAsEmail(email).valid && consent) { - this.submitDataToApi() - .then(() => { - this.apiSubmissionSuccessful(); - }) - .catch((e) => { - this.apiSubmissionFailure(e); - }); - - ReactGA.event({ - category: `signup`, - action: `form submit tap`, - label: `Signup submitted from ${ - this.props.formPosition ? this.props.formPosition : document.title - }`, - }); - - window.dataLayer = window.dataLayer || []; - window.dataLayer.push({ - event: "form_submission", - form_type: "newsletter_signup", - form_location: this.props.formPosition || null, - country: this.country?.element.value, - language: this.state.lang, - }); - } - } - - /** - * On focus, we want to do two things: - * 1.Fire a GA event when users interact with the signup form - * 2.Reveal localization fields - */ - onInputFocus() { - ReactGA.event({ - category: `signup`, - action: `form focus`, - label: `Signup form input focused`, - }); - - if (this.state.hideLocaleFields) { - this.setState({ - hideLocaleFields: false, - }); - } - } - - /** - * Enable submit button according to each scenario - */ - toggleSubmitButton(event) { - // Submit button is never set to be disabled. Return early. - if (!this.props.disableSubmitButton) return; - - // If the email input is empty, disable the submit button if it's currently enabled. - if (event.target.value === "" && !this.state.submitButtonDisabled) { - this.setState({ - submitButtonDisabled: true, - }); - } - - // If the email input is not empty, enable the submit button if it's currently disabled. - if (event.target.value !== "" && this.state.submitButtonDisabled) { - this.setState({ - submitButtonDisabled: false, - }); - } - } - - /** - * Render the signup CTA. - */ - render() { - let signupState = classNames({ - "signup-success": this.state.apiSuccess && this.state.apiSubmitted, - "signup-fail": !this.state.apiFailed && this.state.apiSubmitted, - }); - - let layoutClasses = classNames(`col-12`, { - "col-md-6": this.props.layout === `2-column` && !this.state.apiSuccess, - "col-sm-12 col-md-8": - this.props.layout === `2-column` && this.state.apiSuccess, - }); - - return ( -
-
{this.renderFormHeading()}
-
{this.renderFormContent()}
-
- ); - } - - /** - * Render the CTA heading. - */ - renderSnippetHeading() { - let headingClasses = classNames( - `${ - this.props.formStyle == "pop" - ? "tw-h1-heading large:tw-pr-24" - : this.props.formStyle == "pni" - ? "tw-text-3xl tw-font-zilla tw-mb-4 medium:tw-w-4/5" - : "tw-h5-heading" - }` - ); - let descriptionClasses = classNames( - `${ - this.props.formStyle == "pop" - ? "large:tw-pr-24" - : this.props.formStyle == "pni" - ? "tw-text-base tw-mb-4 medium:tw-w-4/5" - : "" - }` - ); - - return ( - -

- {!this.state.apiSuccess - ? `${this.props.ctaHeader}` - : getText(`Thanks!`)} -

- {!this.state.apiSuccess ? ( -
- ) : ( - -

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

-

{getText(`manage your subscriptions`)}

- - )} - - ); - } - - /** - * Render the CTA heading. - */ - renderFormHeading() { - return this.renderSnippetHeading(); - } - - /** - * Render the email field in signup CTA. - */ - renderEmailField() { - // During the first render, we bind the email field to this.email - // using ref={el => (this.email = el)} - // This means this.email is undefined until the second render. - // To avoid TypeError we have do the following conditional assignment. - let emailValidation = this.email - ? this.validatesAsEmail(this.email.value) - : false; - - let wrapperClasses = classNames({ - "tw-has-error": - (!this.state.apiSuccess && - this.state.userTriedSubmitting && - !emailValidation.valid) || - this.state.signupFailed, - }); - - let classes = classNames(`mb-2`, { - "position-relative": wrapperClasses !== ``, - }); - - let inputClasses = classNames(`${FORM_CONTROL_CLASS} tw-pr-18`, { - "tw-border-1 tw-border-black placeholder:tw-text-gray-40 focus:tw-border-blue-40 focus:tw-shadow-none focus-visible:tw-drop-shadow-none tw-mt-8": - this.props.formStyle == `pop`, - "tw-h-24": this.props.formStyle == `pni`, - }); - - let errorWrapperClasses = "glyph-container"; - - return ( -
-
- (this.email = el)} - onFocus={(evt) => this.onInputFocus(evt)} - onInput={(evt) => this.toggleSubmitButton(evt)} - aria-label="Email" - id={this.id.userEmail} - /> - {this.state.userTriedSubmitting && !emailValidation.valid && ( -
- -
- )} -
- {this.state.userTriedSubmitting && !emailValidation.valid && ( -

- {emailValidation.errorMessage} -

- )} - {this.state.signupFailed && ( - - Something went wrong. Please check your email address and try again - - )} -
- ); - } - - /** - * Render localization fields - */ - - setLang(lang) { - this.setState({ lang }); - } - - renderLocaleFields() { - let selectInputClasses = classNames(`tw-w-full`, { - "tw-border-1 tw-border-black focus:tw-border-blue-40 focus:tw-shadow-none": - this.props.formStyle == `pop`, - }); - - return ( - - ); - } - - /** - * Render fields asking for user name - */ - renderNameFields() { - return ( -
-
- (this.givenNames = el)} - onFocus={(evt) => this.onInputFocus(evt)} - /> -
-
- (this.surname = el)} - onFocus={(evt) => this.onInputFocus(evt)} - /> -
-
- ); - } - /** - * Render the privacy field in signup CTA. - */ - renderPrivacyField() { - let classes = classNames(`my-3 form-check form-group`, { - "tw-has-error": - !this.state.apiSuccess && - this.state.userTriedSubmitting && - !this.privacy.checked, - }); - - let privacyStatementClasses = classNames("form-check-label tw-body-small", { - "tw-text-black": - this.props.formStyle == "pop" || this.props.formStyle == "pni", - }); - - return ( -
-
- (this.privacy = el)} - required - /> - - {this.state.userTriedSubmitting && - !this.state.apiSubmitted && - !this.privacy.checked && ( - - )} -
- {this.state.userTriedSubmitting && !this.privacy.checked && ( -

- {getText(`Please check this box if you want to proceed.`)} -

- )} -
- ); - } - - /** - * Render the submit button in signup CTA. - */ - renderSubmitButton() { - let classnames; - let buttonText; - - if (this.props.formStyle == "pop") { - classnames = classNames( - "tw-border-1 tw-btn-secondary tw-mt-24 medium:-tw-mb-16 medium:tw-mt-12" - ); - buttonText = getText("Subscribe"); - } else if (this.props.formStyle == "pni") { - classnames = classNames( - "tw-btn", - "tw-btn-primary", - "tw-w-max", - "tw-h-24" - ); - buttonText = getText("Sign up"); - } else { - classnames = "tw-btn tw-btn-primary w-100"; - buttonText = getText("Sign up"); - } - - return ( - - ); - } - - /** - * Render the actual CTA form, with an email - * field and a consent checkbox. - */ - renderFormContent() { - if (this.state.apiSuccess) return null; - - let formClass = `d-flex flex-column`; - - let fieldsWrapperClass = classNames(`w-100`, { - "large:tw-pl-24": this.props.formStyle == `pop`, - }); - - let buttonsWrapperClass = `w-100`; - - if (this.props.buttonPosition === `side`) { - formClass = `${formClass} flex-md-row`; - fieldsWrapperClass = ``; - buttonsWrapperClass = `ml-md-3`; - } - - if (this.props.formStyle === `pop`) { - buttonsWrapperClass = `w-auto tw-text-right`; - } - - if (this.props.formStyle === "pni") { - formClass = `tw-w-full tw-flex tw-flex-row`; - buttonsWrapperClass = `w-auto`; - } - - return ( -
this.processFormData(evt)} - className={formClass} - > -
- {/* the data attribute is passed as a String from Python, so we need this check structured this way */} - {this.props.askName === "True" && this.renderNameFields()} - {this.renderEmailField()} - {this.renderLocaleFields()} - {this.renderPrivacyField()} -
-
{this.renderSubmitButton()}
-
- ); - } -} - -JoinUs.defaultProps = { - ctaHeader: getText(`Help shape the future of the web for the public good`), - ctaDescription: getText(`Join our list`), - newsletter: `mozilla-foundation`, - askName: false, -}; - -export default JoinUs; diff --git a/source/js/components/join/join.scss b/source/js/components/join/join.scss deleted file mode 100644 index 5ad267df77c..00000000000 --- a/source/js/components/join/join.scss +++ /dev/null @@ -1,25 +0,0 @@ -.join-us { - background: inherit; - - .tw-has-error { - $glyph-container: ( - "margin-x": 10px, - "height": 20px, - "width": 13px, - ); - - .glyph-container { - position: absolute; - top: 0; - bottom: 0; - right: map-get($glyph-container, "margin-x"); - height: map-get($glyph-container, "height"); - width: map-get($glyph-container, "width"); - margin: auto; - } - } - - .fields-wrapper { - flex: 1 1 auto; - } -} diff --git a/source/js/components/join/language-select.jsx b/source/js/components/join/language-select.jsx deleted file mode 100644 index f52b8471c11..00000000000 --- a/source/js/components/join/language-select.jsx +++ /dev/null @@ -1,56 +0,0 @@ -import { Component } from "react"; -import classNames from "classnames"; - -/** - * Displays a language list dropdown for newsletter sign-up form. - */ -class JoinUsLanguageSelect extends Component { - constructor(props) { - super(props); - } - - handleChange(event) { - this.props.handleLangChange(event.target.value); - } - - renderOptions() { - let languages = { - en: `English`, - de: `Deutsch`, - es: `Español`, - fr: `Français`, - pl: `Polski`, - "pt-BR": `Português`, - }; - - let lang_codes = Object.keys(languages); - let options = lang_codes.map((lang_code) => { - const optionAttributes = { - key: lang_code, - value: lang_code, - }; - return ; - }); - - return options; - } - - render() { - let classes = classNames(`tw-form-control`, this.props.className); - - return ( - - ); - } -} - -export default JoinUsLanguageSelect; diff --git a/source/js/components/petition/country-select.jsx b/source/js/components/petition/country-select.jsx deleted file mode 100644 index e8b81b54586..00000000000 --- a/source/js/components/petition/country-select.jsx +++ /dev/null @@ -1,45 +0,0 @@ -import { Component } from "react"; -import classNames from "classnames"; -import SALESFORCE_COUNTRY_LIST from "./salesforce-country-list.js"; - -/** - * Displays a country list dropdown for newsletter sign-up form and petition form. - */ -class CountrySelect extends Component { - constructor(props) { - super(props); - } - - render() { - let classes = classNames( - `country-picker tw-form-control`, - this.props.className - ); - let codes = Object.keys(SALESFORCE_COUNTRY_LIST); - let options = codes.map((code) => { - return ( - - ); - }); - - return ( - - ); - } -} - -export default CountrySelect; diff --git a/source/sass/buyers-guide/bg-main.scss b/source/sass/buyers-guide/bg-main.scss index 0485bceb3d3..b2357eb285c 100644 --- a/source/sass/buyers-guide/bg-main.scss +++ b/source/sass/buyers-guide/bg-main.scss @@ -39,7 +39,6 @@ html { @import "../../js/buyers-guide/components/primary-nav/primary-nav"; @import "../../js/buyers-guide/components/creepiness-chart/creepiness-chart"; -@import "../../js/components/join/join"; // Non-React Components diff --git a/source/sass/main.scss b/source/sass/main.scss index a68da86b85c..84b2b204b75 100755 --- a/source/sass/main.scss +++ b/source/sass/main.scss @@ -15,7 +15,6 @@ // React Components -@import "../js/components/join/join"; @import "../js/components/loading-indicator/loading-indicator"; @import "../js/components/multipage-nav-mobile/multipage-nav-mobile"; @import "../js/components/pulse-project-list/pulse-project-list"; diff --git a/source/sass/views/home.scss b/source/sass/views/home.scss index 9d62f2bcad8..f230dbaec4d 100644 --- a/source/sass/views/home.scss +++ b/source/sass/views/home.scss @@ -93,20 +93,6 @@ font-family: $font-family-sans-serif; font-weight: bold; } - - .join-us .tw-btn { - display: block; - width: 100%; - - @media screen and (max-width: $bp-lg) and (min-width: $bp-md) { - // TODO: - // See if we can avoid having !important by altering the existing join-us React/SCSS code. - // Do this after we've merged the homepage work as touching join-us code can - // easily affect existing sign up forms on the site. - display: inline; - width: auto !important; - } - } } .section-quote {