{% if ftl_has_messages('multi-newsletter-form-title', 'multi-newsletter-form-desc', 'multi-newsletter-form-checkboxes-legend') %}
{{ email_newsletter_form(
- newsletters='mozilla-foundation, mozilla-and-you',
+ newsletters='mozilla-foundation' if switch('foundation-separate-newsletter') else 'mozilla-foundation, mozilla-and-you',
button_class='button-dark'
)}}
{% elif LANG.startswith('en-') %}
diff --git a/bedrock/newsletter/templates/newsletter/family.html b/bedrock/newsletter/templates/newsletter/family.html
index 1c8f27cc25b..51e1bf9481e 100644
--- a/bedrock/newsletter/templates/newsletter/family.html
+++ b/bedrock/newsletter/templates/newsletter/family.html
@@ -37,7 +37,7 @@
{{ email_newsletter_form(
title=newsletter_title|safe,
desc='Firefox is made in part by lots of real-life, tired yet strangely optimistic parents, and we’re backed by an awesome non-profit too.',
- newsletters='mozilla-foundation, mozilla-and-you',
+ newsletters='mozilla-and-you' if switch('foundation-separate-newsletter') else 'mozilla-foundation, mozilla-and-you',
button_class='mzp-t-dark',
include_title=True,
include_country=False,
diff --git a/bedrock/newsletter/templates/newsletter/includes/form.html b/bedrock/newsletter/templates/newsletter/includes/form.html
index 15dbbbb931f..76366c0a445 100644
--- a/bedrock/newsletter/templates/newsletter/includes/form.html
+++ b/bedrock/newsletter/templates/newsletter/includes/form.html
@@ -102,11 +102,20 @@
{% if ftl_has_messages('multi-newsletter-form-title', 'multi-newsletter-form-desc', 'multi-newsletter-form-checkboxes-legend') %}
{{ email_newsletter_form(
- newsletters='mozilla-foundation, mozilla-and-you',
+ newsletters='mozilla-foundation' if switch('foundation-separate-newsletter') else 'mozilla-foundation, mozilla-and-you',
button_class='button-dark'
) }}
{% else %}
diff --git a/bedrock/newsletter/templates/newsletter/mozilla.html b/bedrock/newsletter/templates/newsletter/mozilla.html
index 124426c54cc..54773942aaa 100644
--- a/bedrock/newsletter/templates/newsletter/mozilla.html
+++ b/bedrock/newsletter/templates/newsletter/mozilla.html
@@ -34,7 +34,7 @@
{{ self.page_title() }}
{{ self.page_desc() }}
{% if ftl_has_messages('multi-newsletter-form-title', 'multi-newsletter-form-desc', 'multi-newsletter-form-checkboxes-legend') %}
{{ email_newsletter_form(
- newsletters='mozilla-foundation, mozilla-and-you',
+ newsletters='mozilla-foundation' if switch('foundation-separate-newsletter') else 'mozilla-foundation, mozilla-and-you',
include_title=False,
button_class='button-dark'
)}}
diff --git a/bedrock/newsletter/templatetags/helpers.py b/bedrock/newsletter/templatetags/helpers.py
index 11f59741b06..8034f7036e1 100644
--- a/bedrock/newsletter/templatetags/helpers.py
+++ b/bedrock/newsletter/templatetags/helpers.py
@@ -11,6 +11,7 @@
from django_jinja import library
from markupsafe import Markup
+from bedrock.base.waffle import switch
from bedrock.newsletter.forms import NewsletterFooterForm
from lib.l10n_utils import get_locale
@@ -43,7 +44,11 @@ def email_newsletter_form(
):
request = ctx["request"]
context = ctx.get_all()
- action = settings.BASKET_SUBSCRIBE_URL
+
+ if switch("foundation-separate-newsletter") and newsletters == "mozilla-foundation":
+ action = settings.FOUNDATION_SUBSCRIBE_URL
+ else:
+ action = settings.BASKET_SUBSCRIBE_URL
success = bool(ctx.get("success"))
if success and not use_thankyou:
diff --git a/bedrock/newsletter/tests/test_footer_form.py b/bedrock/newsletter/tests/test_footer_form.py
index 12ddce20add..2abbb5f5676 100644
--- a/bedrock/newsletter/tests/test_footer_form.py
+++ b/bedrock/newsletter/tests/test_footer_form.py
@@ -4,9 +4,11 @@
from unittest.mock import patch
+from django.conf import settings
from django.test.utils import override_settings
from pyquery import PyQuery as pq
+from waffle.testutils import override_switch
from bedrock.base.urlresolvers import reverse
from bedrock.mozorg.tests import TestCase
@@ -62,18 +64,19 @@ def test_language_selected(self):
assert doc('#id_lang option[selected="selected"]').val() == ""
@override_settings(DEV=True)
- def test_newsletters_selected(self):
+ def test_newsletter_action(self):
"""
- By default both newsletters should be checked.
+ Newsletter points to correct POST URL.
"""
- with self.activate_locale("en-US"):
- resp = self.client.get(reverse(self.view_name))
- doc = pq(resp.content)
- assert doc('#id_newsletters_0[checked="checked"]').length == 1
- assert doc('#id_newsletters_1[checked="checked"]').length == 1
- with self.activate_locale("en-US"):
- resp = self.client.get(reverse("firefox.nothing-personal.index"))
- doc = pq(resp.content)
- assert doc('#id_newsletters_0[checked="checked"]').length == 0
- assert doc('#id_newsletters_1[checked="checked"]').length == 0
+ with override_switch("FOUNDATION_SEPARATE_NEWSLETTER", active=True):
+ with self.activate_locale("en-US"):
+ resp = self.client.get(reverse(self.view_name))
+ doc = pq(resp.content)
+ assert doc("#newsletter-form").attr("action") == settings.FOUNDATION_SUBSCRIBE_URL
+
+ with override_switch("FOUNDATION_SEPARATE_NEWSLETTER", active=False):
+ with self.activate_locale("en-US"):
+ resp = self.client.get(reverse(self.view_name))
+ doc = pq(resp.content)
+ assert doc("#newsletter-form").attr("action") == settings.BASKET_SUBSCRIBE_URL
diff --git a/bedrock/settings/__init__.py b/bedrock/settings/__init__.py
index e4ac9e86407..65410351e30 100644
--- a/bedrock/settings/__init__.py
+++ b/bedrock/settings/__init__.py
@@ -51,6 +51,7 @@
"www.mozilla.org/submit/bedrock/",
BASKET_URL,
FXA_ENDPOINT,
+ FOUNDATION_URL,
}
_csp_font_src = {
csp.constants.SELF,
@@ -62,6 +63,7 @@
# progressively enhance forms by using Javascript.
BASKET_URL,
FXA_ENDPOINT,
+ FOUNDATION_URL,
}
# On hosts with wagtail admin enabled, we need to allow the admin to frame itself for previews.
_csp_frame_ancestors = {
diff --git a/bedrock/settings/base.py b/bedrock/settings/base.py
index d68d131ebf6..7b825ec8cc0 100644
--- a/bedrock/settings/base.py
+++ b/bedrock/settings/base.py
@@ -885,6 +885,13 @@ def _is_bedrock_custom_app(app_name):
BASKET_TIMEOUT = config("BASKET_TIMEOUT", parser=int, default="10")
BASKET_SUBSCRIBE_URL = f"{BASKET_URL}/news/subscribe/"
+# Foundation newsletters are handled through Campaign Monitor
+FOUNDATION_URL = config(
+ "FOUNDATION_URL",
+ default="https://kmq73rfvbh.execute-api.us-east-2.amazonaws.com" if DEV else "https://abdri3ttkb.execute-api.us-east-2.amazonaws.com",
+)
+FOUNDATION_SUBSCRIBE_URL = f"{FOUNDATION_URL}/api/newsletter/mozillaorg"
+
BOUNCER_URL = config("BOUNCER_URL", default="https://download.mozilla.org/")
# Use a message storage mechanism that doesn't need a database.
diff --git a/l10n/en/newsletter_form.ftl b/l10n/en/newsletter_form.ftl
index b212f913d23..6dae6f4214c 100644
--- a/l10n/en/newsletter_form.ftl
+++ b/l10n/en/newsletter_form.ftl
@@ -35,6 +35,10 @@ newsletter-form-available-languages = Available Languages
newsletter-form-select-country = Select country
newsletter-form-sign-me-up = Sign me up
newsletter-form-sign-up-now = Sign Up Now
+
+# Alt text for SVG animation indicating the form has submitted and is waiting for response
+newsletter-form-submit-sending = Sending
+
newsletter-form-thanks = Thanks!
newsletter-form-leave-this-field-empty = Leave this field empty.
newsletter-form-yes = Yes
diff --git a/media/css/protocol/protocol-mozilla.scss b/media/css/protocol/protocol-mozilla.scss
index 632fd01394b..29f46056d56 100644
--- a/media/css/protocol/protocol-mozilla.scss
+++ b/media/css/protocol/protocol-mozilla.scss
@@ -59,6 +59,17 @@
max-width: 30em;
}
+#newsletter-submit {
+ position: relative;
+}
+
+#newsletter-submit .submit-loading {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+}
+
// style classes automatically added by python to match Protocol form error styles
.errorlist {
@include white-links;
diff --git a/media/js/newsletter/newsletter-init.es6.js b/media/js/newsletter/newsletter-init.es6.js
index d105cb35032..4c7d9b5ca48 100644
--- a/media/js/newsletter/newsletter-init.es6.js
+++ b/media/js/newsletter/newsletter-init.es6.js
@@ -4,7 +4,7 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
-import MzpNewsletter from '@mozilla-protocol/core/protocol/js/newsletter';
+import MzpNewsletter from './newsletter.es6.js';
const successCustomCallback = () => {
const newsletters = Array.from(
diff --git a/media/js/newsletter/newsletter.es6.js b/media/js/newsletter/newsletter.es6.js
new file mode 100644
index 00000000000..d29df2ac376
--- /dev/null
+++ b/media/js/newsletter/newsletter.es6.js
@@ -0,0 +1,383 @@
+/*
+ * 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 https://mozilla.org/MPL/2.0/.
+ */
+
+// Copy paste from https://raw.githubusercontent.com/mozilla/protocol/refs/heads/main/assets/js/protocol/newsletter.js
+// With AWS-specific changes commented
+
+let form;
+
+const ERROR_LIST = {
+ COUNTRY_ERROR: 'Country not selected',
+ EMAIL_INVALID_ERROR: 'Invalid email address',
+ EMAIL_UNKNOWN_ERROR: 'Email address not known',
+ LANGUAGE_ERROR: 'Language not selected',
+ LEGAL_TERMS_ERROR: 'Terms not checked',
+ NEWSLETTER_ERROR: 'Newsletter not selected',
+ NOT_FOUND: 'Not Found',
+ PRIVACY_POLICY_ERROR: 'Privacy policy not checked',
+ REASON_ERROR: 'Reason not selected'
+};
+
+const MzpNewsletter = {
+ /**
+ * Really primitive validation (e.g a@a)
+ * matches built-in validation in Firefox
+ * @param {String} email
+ * @returns {Boolean}
+ */
+ checkEmailValidity: (email) => {
+ return /\S+@\S+/.test(email);
+ },
+
+ /**
+ * Add disabled property to all form fields. Show loading indicator.
+ * @param {HTMLFormElement} form
+ */
+ disableFormFields: (form) => {
+ const submitText = form.querySelector('.submit-text');
+ const submitLoading = form.querySelector('.submit-loading');
+
+ // Hide text and show loader
+ submitText.style.opacity = 0;
+ submitLoading.removeAttribute('hidden');
+
+ const formFields = form.querySelectorAll('input, button, select');
+
+ for (let i = 0; i < formFields.length; i++) {
+ formFields[i].disabled = true;
+ }
+ },
+
+ /**
+ * Remove disabled property to all form fields. Hide loading indicator.
+ * @param {HTMLFormElement} form
+ */
+ enableFormFields: (form) => {
+ const submitText = form.querySelector('.submit-text');
+ const submitLoading = form.querySelector('.submit-loading');
+
+ // Hide loader and show text
+ submitLoading.setAttribute('hidden', true);
+ submitText.style.opacity = 1;
+
+ const formFields = form.querySelectorAll('input, button, select');
+
+ for (let i = 0; i < formFields.length; i++) {
+ formFields[i].disabled = false;
+ }
+ },
+
+ /**
+ * Hide all visible form error labels.
+ * @param {HTMLFormElement} form
+ */
+ clearFormErrors: (form) => {
+ const errorMsgs = form.querySelectorAll('.mzp-c-form-errors li');
+
+ form.querySelector('.mzp-c-form-errors').classList.add('hidden');
+
+ for (let i = 0; i < errorMsgs.length; i++) {
+ errorMsgs[i].classList.add('hidden');
+ }
+ },
+
+ handleFormError: (msg) => {
+ let error;
+
+ MzpNewsletter.enableFormFields(form);
+
+ form.querySelector('.mzp-c-form-errors').classList.remove('hidden');
+
+ switch (msg) {
+ case ERROR_LIST.EMAIL_INVALID_ERROR:
+ error = form.querySelector('.error-email-invalid');
+ break;
+ case ERROR_LIST.NEWSLETTER_ERROR:
+ form.querySelector(
+ '.error-newsletter-checkbox'
+ ).classList.remove('hidden');
+ break;
+ case ERROR_LIST.COUNTRY_ERROR:
+ error = form.querySelector('.error-select-country');
+ break;
+ case ERROR_LIST.LANGUAGE_ERROR:
+ error = form.querySelector('.error-select-language');
+ break;
+ case ERROR_LIST.PRIVACY_POLICY_ERROR:
+ error = form.querySelector('.error-privacy-policy');
+ break;
+ case ERROR_LIST.LEGAL_TERMS_ERROR:
+ error = form.querySelector('.error-terms');
+ break;
+ default:
+ error = form.querySelector('.error-try-again-later');
+ }
+
+ if (error) {
+ error.classList.remove('hidden');
+ }
+
+ if (typeof MzpNewsletter.customErrorCallback === 'function') {
+ MzpNewsletter.customErrorCallback(msg);
+ }
+ },
+
+ handleFormSuccess: () => {
+ form.classList.add('hidden');
+ document.getElementById('newsletter-thanks').classList.remove('hidden');
+
+ if (typeof MzpNewsletter.customSuccessCallback === 'function') {
+ MzpNewsletter.customSuccessCallback();
+ }
+ },
+
+ /**
+ * Perform an AJAX POST to Basket
+ * @param {String} email
+ * @param {String} params (URI encoded query string)
+ * @param {String} url (Basket API endpoint)
+ * @param {Function} successCallback
+ * @param {Function} errorCallback
+ */
+ postToBasket: (email, params, url, successCallback, errorCallback) => {
+ const xhr = new XMLHttpRequest();
+
+ // Emails used in automation for page-level integration tests
+ // should avoid hitting server directly.
+ if (email === 'success@example.com') {
+ successCallback();
+ return;
+ } else if (email === 'failure@example.com') {
+ errorCallback();
+ return;
+ }
+
+ xhr.onload = function (e) {
+ let response = e.target.response || e.target.responseText;
+
+ if (typeof response !== 'object') {
+ response = JSON.parse(response);
+ }
+
+ if (response) {
+ if (response.status !== undefined) {
+ // BASKET response structure
+ if (
+ response.status === 'ok' &&
+ e.target.status >= 200 &&
+ e.target.status < 300
+ ) {
+ successCallback();
+ } else if (response.status === 'error' && response.desc) {
+ errorCallback(response.desc);
+ } else {
+ errorCallback();
+ }
+ } else {
+ // AWS response structure
+ if (e.target.status >= 200 && e.target.status < 300) {
+ successCallback();
+ } else {
+ errorCallback();
+ }
+ }
+ } else {
+ errorCallback();
+ }
+ };
+
+ xhr.onerror = errorCallback;
+ xhr.open('POST', url, true);
+ xhr.setRequestHeader(
+ 'Content-type',
+ 'application/x-www-form-urlencoded'
+ );
+ xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+ xhr.timeout = 10000; // increased AWS timeout
+ xhr.ontimeout = errorCallback;
+ xhr.responseType = 'json';
+ xhr.send(params);
+ },
+
+ serialize: () => {
+ // Email address
+ const email = encodeURIComponent(
+ form.querySelector('input[type="email"]').value
+ );
+
+ // Country (optional form