From 7e6e9fdda156bf9286365da54dd2d2834f705652 Mon Sep 17 00:00:00 2001
From: Alex Gibson <alexgibson@users.noreply.github.com>
Date: Thu, 26 Oct 2023 13:32:01 +0100
Subject: [PATCH] Port basket newsletter JS to Protocol (Fixes #839)

---
 .eslintrc.js                                  |  15 +-
 CHANGELOG.md                                  |   1 +
 assets/js/protocol/newsletter.js              | 366 +++++++++++++--
 .../sass/protocol/base/elements/_forms.scss   |   8 +-
 .../protocol/components/_newsletter-form.scss |  18 +-
 components/forms/02-select/select.config.yml  |   4 +-
 components/newsletter/newsletter--errors.html |  52 ++-
 .../newsletter/newsletter--success.html       |  53 ++-
 components/newsletter/newsletter.config.yml   |  16 +-
 components/newsletter/newsletter.html         |  69 ++-
 components/newsletter/readme.md               |  28 +-
 package-lock.json                             | 148 ++++++
 package.json                                  |   1 +
 tests/karma.conf.js                           |   8 +-
 tests/unit/newsletter.js                      | 427 ++++++++++++++++++
 15 files changed, 1093 insertions(+), 121 deletions(-)
 create mode 100644 tests/unit/newsletter.js

diff --git a/.eslintrc.js b/.eslintrc.js
index da0a6981..83959ae7 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -3,7 +3,6 @@ module.exports = {
         'browser': true,
         'commonjs': true,
         'es2017': true,
-        'jasmine': true,
         'node': true
     },
     extends: [
@@ -74,5 +73,17 @@ module.exports = {
         // Disallow the use of `console`
         // https://eslint.org/docs/rules/no-console
         'no-console': 'error'
-    }
+    },
+    overrides: [
+        {
+            // JS Jasmine test files.
+            files: ['tests/unit/**/*.js'],
+            env: {
+                jasmine: true
+            },
+            globals: {
+                sinon: 'writable'
+            }
+        }
+    ]
 };
diff --git a/CHANGELOG.md b/CHANGELOG.md
index a92b109d..bf9e7a6f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## Features
 
+* **js:** Update newsletter component to include JS to post directly to Basket (#839).
 * **css:** Add CSS utility class for centered text and document existing title utility classes (#897).
 
 ## Bug Fixes
diff --git a/assets/js/protocol/newsletter.js b/assets/js/protocol/newsletter.js
index 15dfcc42..3b4c7211 100644
--- a/assets/js/protocol/newsletter.js
+++ b/assets/js/protocol/newsletter.js
@@ -2,49 +2,349 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-const MzpNewsletter = {};
-
-// !! This file assumes only one signup form per page !!
-// Expand email form on input focus or submit if details aren't visible
-MzpNewsletter.init = () => {
-    const newsletterForm = document.getElementById('newsletter-form');
-    let submitButton;
-    let formDetails;
-    let emailField;
-    let formExpanded;
-
-    function emailFormShowDetails() {
-        if (!formExpanded) {
-            formDetails.style.display = 'block';
-            formExpanded = true;
+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.
+     * @param {HTMLFormElement} form
+     */
+    disableFormFields: (form) => {
+        const formFields = form.querySelectorAll('input, button, select');
+
+        for (let i = 0; i < formFields.length; i++) {
+            formFields[i].disabled = true;
         }
-    }
+    },
 
-    if (newsletterForm) {
-        submitButton = document.getElementById('newsletter-submit');
-        formDetails = document.getElementById('newsletter-details');
-        emailField = document.querySelector('.mzp-js-email-field');
-        formExpanded = window.getComputedStyle(formDetails).display === 'none' ? false : true;
+    /**
+     * Remove disabled property to all form fields.
+     * @param {HTMLFormElement} form
+     */
+    enableFormFields: (form) => {
+        const formFields = form.querySelectorAll('input, button, select');
 
-        emailField.addEventListener('focus', () => {
-            emailFormShowDetails();
-        }, false);
+        for (let i = 0; i < formFields.length; i++) {
+            formFields[i].disabled = false;
+        }
+    },
 
-        submitButton.addEventListener('click', (e) => {
-            if (!formExpanded) {
-                e.preventDefault();
-                emailFormShowDetails();
+    /**
+     * 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 basket 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);
             }
-        }, false);
 
-        newsletterForm.addEventListener('submit', (e) => {
+            if (response) {
+                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 {
+                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 = 5000;
+        xhr.ontimeout = errorCallback;
+        xhr.responseType = 'json';
+        xhr.send(params);
+    },
+
+    serialize: () => {
+        // Email address
+        const email = encodeURIComponent(
+            form.querySelector('input[type="email"]').value
+        );
+
+        // Newsletter format
+        const format = form.querySelector('input[name="format"]:checked').value;
+
+        // Country (optional form <select>)
+        const countrySelect = form.querySelector('select[name="country"]');
+        const country = countrySelect ? `&country=${countrySelect.value}` : '';
+
+        // Language (get by DOM ID as field can be <input> or <select>)
+        const lang = form.querySelector('#id_lang').value;
+
+        // Selected newsletter(s)
+        let newsletters = Array.from(
+            form.querySelectorAll('input[name="newsletters"]:checked')
+        )
+            .map((newsletter) => {
+                return `${newsletter.value}`;
+            })
+            .join(',');
+        newsletters = encodeURIComponent(newsletters);
+
+        // Source URL (hidden field)
+        const sourceUrl = encodeURIComponent(
+            form.querySelector('input[name="source_url"]').value
+        );
+
+        return `email=${email}&format=${format}${country}&lang=${lang}&source_url=${sourceUrl}&newsletters=${newsletters}`;
+    },
+
+    validateFields: () => {
+        const email = form.querySelector('input[type="email"]').value;
+        const privacy = form.querySelector('input[name="privacy"]:checked')
+            ? true
+            : false;
+        const newsletters = form.querySelectorAll(
+            'input[name="newsletters"]:checked'
+        );
+        const countrySelect = form.querySelector('select[name="country"]');
+        const lang = form.querySelector('#id_lang').value;
+        const terms = form.querySelector('input[name="terms"]');
+
+        // Really basic client side email validity check.
+        if (!MzpNewsletter.checkEmailValidity(email)) {
+            MzpNewsletter.handleFormError(
+                ERROR_LIST.EMAIL_INVALID_ERROR
+            );
+            return false;
+        }
+
+        // Check for country selection value.
+        if (countrySelect && !countrySelect.value) {
+            MzpNewsletter.handleFormError(ERROR_LIST.COUNTRY_ERROR);
+            return false;
+        }
+
+        // Check for language selection value.
+        if (!lang) {
+            MzpNewsletter.handleFormError(ERROR_LIST.LANGUAGE_ERROR);
+            return false;
+        }
+
+        // Confirm at least one newsletter is checked
+        if (newsletters.length === 0) {
+            MzpNewsletter.handleFormError(
+                ERROR_LIST.NEWSLETTER_ERROR
+            );
+            return false;
+        }
+
+        // Confirm privacy policy is checked
+        if (!privacy) {
+            MzpNewsletter.handleFormError(
+                ERROR_LIST.PRIVACY_POLICY_ERROR
+            );
+            return false;
+        }
+
+        if (terms && !terms.checked) {
+            MzpNewsletter.handleFormError(
+                ERROR_LIST.LEGAL_TERMS_ERROR
+            );
+            return false;
+        }
+
+        return true;
+    },
+
+    subscribe: (e) => {
+        const url = form.getAttribute('action');
+        const email = form.querySelector('input[type="email"]').value;
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        // Disable form fields until POST has completed.
+        MzpNewsletter.disableFormFields(form);
+
+        // Clear any prior messages that might have been displayed.
+        MzpNewsletter.clearFormErrors(form);
+
+        // Perform client side form field validation.
+        if (!MzpNewsletter.validateFields()) {
+            return;
+        }
+
+        const params = MzpNewsletter.serialize();
+
+        MzpNewsletter.postToBasket(
+            email,
+            params,
+            url,
+            MzpNewsletter.handleFormSuccess,
+            MzpNewsletter.handleFormError
+        );
+    },
+
+    init: (customSuccessCallback, customErrorCallback) => {
+        form = document.getElementById('newsletter-form');
+
+        let submitButton;
+        let formDetails;
+        let emailField;
+        let formExpanded;
+
+        function emailFormShowDetails() {
             if (!formExpanded) {
-                e.preventDefault();
+                formDetails.style.display = 'block';
+                formExpanded = true;
+            }
+        }
+
+        if (form) {
+            submitButton = document.getElementById('newsletter-submit');
+            formDetails = document.getElementById('newsletter-details');
+            emailField = document.querySelector('.mzp-js-email-field');
+            formExpanded = window.getComputedStyle(formDetails).display === 'none' ? false : true;
+
+            // Expand email form on input focus or submit if details aren't visible
+            emailField.addEventListener('focus', () => {
                 emailFormShowDetails();
+            }, false);
+
+            submitButton.addEventListener('click', (e) => {
+                if (!formExpanded) {
+                    e.preventDefault();
+                    emailFormShowDetails();
+                }
+            }, false);
+
+            form.addEventListener('submit', (e) => {
+                if (!formExpanded) {
+                    e.preventDefault();
+                    emailFormShowDetails();
+                }
+            }, false);
+
+            form.addEventListener('submit', MzpNewsletter.subscribe, false);
+
+            if (typeof customSuccessCallback === 'function') {
+                MzpNewsletter.customSuccessCallback = customSuccessCallback;
             }
-        }, false);
+
+            if (typeof customErrorCallback === 'function') {
+                MzpNewsletter.customErrorCallback = customErrorCallback;
+            }
+        }
     }
 };
 
 module.exports = MzpNewsletter;
-
diff --git a/assets/sass/protocol/base/elements/_forms.scss b/assets/sass/protocol/base/elements/_forms.scss
index 8fe05bbe..13926f6b 100644
--- a/assets/sass/protocol/base/elements/_forms.scss
+++ b/assets/sass/protocol/base/elements/_forms.scss
@@ -32,12 +32,12 @@ legend {
         @include forms.field-label;
     }
     @include text-body-lg;
-    font-family: $title-font-family;
+    font-family: $body-font-family;
     font-weight: bold;
     margin-bottom: forms.$field-v-spacing;
 
     @supports (--css: variables) {
-        font-family: var(--title-font-family);
+        font-family: var(--body-font-family);
     }
 }
 
@@ -388,10 +388,6 @@ select {
     .mzp-is-error & {
         color: forms.$form-red;
     }
-
-    .mzp-c-button + & {
-        margin-top: $spacing-sm * -1;
-    }
 }
 
 // * -------------------------------------------------------------------------- */
diff --git a/assets/sass/protocol/components/_newsletter-form.scss b/assets/sass/protocol/components/_newsletter-form.scss
index 1301ebbf..4ffca6f8 100644
--- a/assets/sass/protocol/components/_newsletter-form.scss
+++ b/assets/sass/protocol/components/_newsletter-form.scss
@@ -20,9 +20,18 @@
         width: 100%;
     }
 
-    // Hide errors
+    .mzp-c-button + .mzp-c-fieldnote {
+        @include text-body-xs;
+    }
+
     .mzp-c-form-errors {
-        @include hidden;
+        li {
+            display: list-item;
+
+            &.hidden {
+                @include hidden;
+            }
+        }
     }
 }
 
@@ -36,11 +45,6 @@
     text-align: center;
 }
 
-// Hide thank you message
-.mzp-c-newsletter-thanks {
-    @include hidden;
-}
-
 // hide details for JS users
 // (displayed when email field is focused)
 .js .mzp-c-newsletter-details {
diff --git a/components/forms/02-select/select.config.yml b/components/forms/02-select/select.config.yml
index d20c4274..02611d4c 100644
--- a/components/forms/02-select/select.config.yml
+++ b/components/forms/02-select/select.config.yml
@@ -3,10 +3,10 @@ context:
   name: language
   id: language
   options:
-    - text: Deutsch
-      value: de
     - text: English
       value: en
+    - text: Deutsch
+      value: de
     - text: Español
       value: es
     - text: Français
diff --git a/components/newsletter/newsletter--errors.html b/components/newsletter/newsletter--errors.html
index 8b0ddeb8..86751992 100644
--- a/components/newsletter/newsletter--errors.html
+++ b/components/newsletter/newsletter--errors.html
@@ -1,17 +1,12 @@
-<style>
-/* Styles for visual demo only. Ordinarily these styles would be applied by a validation script. */
-.mzp-c-newsletter .mzp-c-form-errors,
-.mzp-c-newsletter .mzp-c-newsletter-details {
-    display: block;
-}
-</style>
-
 <aside class="mzp-c-newsletter">
   <div class="mzp-c-newsletter-image">
     <img src="{{ '/img/newsletter-image.png' | path }}" width="346" height="346" alt="">
   </div>
 
-  <form id="newsletter-form" class="mzp-c-newsletter-form" name="newsletter-form" action="#" method="">
+  <form id="newsletter-form" class="mzp-c-newsletter-form" action="https://basket.mozilla.org/news/subscribe/" method="post">
+    <!-- The value for the source_url field below should match the URL of your page where the newsletter form appears-->
+    <input type="hidden" name="source_url" value="https://www.mozilla.org/">
+
     <header class="mzp-c-newsletter-header">
       <h3 class="mzp-c-newsletter-title">Love the Web?</h3>
       <p class="mzp-c-newsletter-tagline">Get the Mozilla newsletter and help us keep it open and free.</p>
@@ -20,28 +15,43 @@ <h3 class="mzp-c-newsletter-title">Love the Web?</h3>
     <fieldset class="mzp-c-newsletter-content">
       <div class="mzp-c-form-errors" id="newsletter-errors">
         <ul class="mzp-u-list-styled">
-          <li>Please enter a valid email address.</li>
-          <li>You must agree to the privacy notice.</li>
+          <li class="error-email-invalid">
+            Please enter a valid email address
+          </li>
+          <li class="error-privacy-policy">
+            You must agree to the privacy notice
+          </li>
         </ul>
       </div>
 
-      <div>
-        <label for="email">Your email address</label>
-        <input type="email" class="mzp-js-email-field" id="email" name="email" placeholder="yourname@example.com" required aria-required="true" value="not-an-email">
-      </div>
+      <label for="id_email">Your email address:</label>
+      <input type="email" id="id_email" name="email" required="" maxlength="320" placeholder="yourname@example.com" class="mzp-js-email-field">
 
       <div id="newsletter-details" class="mzp-c-newsletter-details">
-        {% render '@select', { label: 'Country', name: 'country', required: True, options: '@newsletter.options' } %}
-        {% render '@select', { required: True }, true %}
+        {% render '@select', { label: 'Country', name: 'country', required: True, id: 'id_country', options: '@newsletter.options' } %}
+        {% render '@select', { required: True, id: 'id_lang' }, true %}
+
+        <fieldset class="mzp-u-inline">
+          <legend>I want information about:</legend>
+          <p>
+            <label for="id_newsletters_0" class="mzp-u-inline">
+              <input type="checkbox" name="newsletters" value="mozilla-foundation" id="id_newsletters_0" checked> Mozilla Foundation
+            </label>
+
+            <label for="id_newsletters_1" class="mzp-u-inline">
+              <input type="checkbox" name="newsletters" value="mozilla-and-you" id="id_newsletters_1" checked> Firefox
+            </label>
+          </p>
+        </fieldset>
 
         <fieldset class="mzp-u-inline">
           <legend>Format</legend>
           <p>
             <label for="format-html" class="mzp-u-inline">
-              <input type="radio" id="format-html" name="fmt" value="H" checked> HTML
+              <input type="radio" id="format-html" name="format" value="H" checked> HTML
             </label>
             <label for="format-text" class="mzp-u-inline">
-              <input type="radio" id="format-text" name="fmt" value="T"> Text
+              <input type="radio" id="format-text" name="format" value="T"> Text
             </label>
           </p>
         </fieldset>
@@ -61,11 +71,9 @@ <h3 class="mzp-c-newsletter-title">Love the Web?</h3>
     </fieldset>
   </form>
 
-  <div id="newsletter-thanks" class="mzp-c-newsletter-thanks">
+  <div id="newsletter-thanks" class="mzp-c-newsletter-thanks hidden">
     <h3>Thanks!</h3>
     <p>If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us.</p>
   </div>
 
 </aside>
-
-<script src="{{ '/protocol/js/newsletter.js' | path }}"></script>
diff --git a/components/newsletter/newsletter--success.html b/components/newsletter/newsletter--success.html
index 03d80ae4..53af304a 100644
--- a/components/newsletter/newsletter--success.html
+++ b/components/newsletter/newsletter--success.html
@@ -1,20 +1,12 @@
-<style>
-/* Styles for visual demo only. Ordinarily these styles would be applied by a validation script. */
-.mzp-c-newsletter .mzp-c-newsletter-form {
-  display: none;
-}
-
-.mzp-c-newsletter .mzp-c-newsletter-thanks {
-  display: block;
-}
-</style>
-
 <aside class="mzp-c-newsletter">
   <div class="mzp-c-newsletter-image">
     <img src="{{ '/img/newsletter-image.png' | path }}" width="346" height="346" alt="">
   </div>
 
-  <form id="newsletter-form" class="mzp-c-newsletter-form" name="newsletter-form" action="#" method="">
+  <form id="newsletter-form" class="mzp-c-newsletter-form hidden" action="https://basket.mozilla.org/news/subscribe/" method="post">
+    <!-- The value for the source_url field below should match the URL of your page where the newsletter form appears-->
+    <input type="hidden" name="source_url" value="https://www.mozilla.org/">
+
     <header class="mzp-c-newsletter-header">
       <h3 class="mzp-c-newsletter-title">Love the Web?</h3>
       <p class="mzp-c-newsletter-tagline">Get the Mozilla newsletter and help us keep it open and free.</p>
@@ -23,28 +15,43 @@ <h3 class="mzp-c-newsletter-title">Love the Web?</h3>
     <fieldset class="mzp-c-newsletter-content">
       <div class="mzp-c-form-errors" id="newsletter-errors">
         <ul class="mzp-u-list-styled">
-          <li>Please enter a valid email address.</li>
-          <li>You must agree to the privacy notice.</li>
+          <li class="error-email-invalid">
+            Please enter a valid email address
+          </li>
+          <li class="error-privacy-policy">
+            You must agree to the privacy notice
+          </li>
         </ul>
       </div>
 
-      <div>
-        <label for="email">Your email address</label>
-        <input type="email" class="mzp-js-email-field" id="email" name="email" placeholder="yourname@example.com" required aria-required="true">
-      </div>
+      <label for="id_email">Your email address:</label>
+      <input type="email" id="id_email" name="email" required="" maxlength="320" placeholder="yourname@example.com" class="mzp-js-email-field">
 
       <div id="newsletter-details" class="mzp-c-newsletter-details">
-        {% render '@select', { label: 'Country', name: 'country', required: True, options: '@newsletter.options' } %}
-        {% render '@select', { required: True }, true %}
+        {% render '@select', { label: 'Country', name: 'country', required: True, id: 'id_country', options: '@newsletter.options' } %}
+        {% render '@select', { required: True, id: 'id_lang' }, true %}
+
+        <fieldset class="mzp-u-inline">
+          <legend>I want information about:</legend>
+          <p>
+            <label for="id_newsletters_0" class="mzp-u-inline">
+              <input type="checkbox" name="newsletters" value="mozilla-foundation" id="id_newsletters_0" checked> Mozilla Foundation
+            </label>
+
+            <label for="id_newsletters_1" class="mzp-u-inline">
+              <input type="checkbox" name="newsletters" value="mozilla-and-you" id="id_newsletters_1" checked> Firefox
+            </label>
+          </p>
+        </fieldset>
 
         <fieldset class="mzp-u-inline">
           <legend>Format</legend>
           <p>
             <label for="format-html" class="mzp-u-inline">
-              <input type="radio" id="format-html" name="fmt" value="H" checked> HTML
+              <input type="radio" id="format-html" name="format" value="H" checked> HTML
             </label>
             <label for="format-text" class="mzp-u-inline">
-              <input type="radio" id="format-text" name="fmt" value="T"> Text
+              <input type="radio" id="format-text" name="format" value="T"> Text
             </label>
           </p>
         </fieldset>
@@ -70,5 +77,3 @@ <h3>Thanks!</h3>
   </div>
 
 </aside>
-
-<script src="{{ '/protocol/js/newsletter.js' | path }}"></script>
diff --git a/components/newsletter/newsletter.config.yml b/components/newsletter/newsletter.config.yml
index 0ecc8f46..6d15749f 100644
--- a/components/newsletter/newsletter.config.yml
+++ b/components/newsletter/newsletter.config.yml
@@ -1,20 +1,18 @@
 preview: '@preview-unpadded'
 context:
   options:
+    - text: United States
+      value: us
     - text: Germany
-      value: DE
+      value: de
     - text: France
-      value: FR
+      value: fr
     - text: India
-      value: IN
+      value: in
     - text: Japan
-      value: JP
+      value: jp
     - text: Spain
-      value: ES
-    - text: United States
-      value: US
-    - text: And so on…
-      value: ''
+      value: es
 variants:
   - name: Errors
     notes: An error summary can be shown at the top of the form.
diff --git a/components/newsletter/newsletter.html b/components/newsletter/newsletter.html
index 83342e6a..098899b7 100644
--- a/components/newsletter/newsletter.html
+++ b/components/newsletter/newsletter.html
@@ -3,30 +3,67 @@
     <img src="{{ '/img/newsletter-image.png' | path }}" width="346" height="346" alt="">
   </div>
 
-  <form id="newsletter-form" class="mzp-c-newsletter-form" name="newsletter-form" action="#" method="">
+  <form id="newsletter-form" class="mzp-c-newsletter-form" action="https://basket.mozilla.org/news/subscribe/" method="post">
+    <!-- The value for the source_url field below should match the URL of your page where the newsletter form appears-->
+    <input type="hidden" name="source_url" value="https://www.mozilla.org/">
+
     <header class="mzp-c-newsletter-header">
       <h3 class="mzp-c-newsletter-title">Love the Web?</h3>
       <p class="mzp-c-newsletter-tagline">Get the Mozilla newsletter and help us keep it open and free.</p>
     </header>
 
     <fieldset class="mzp-c-newsletter-content">
-      <div>
-        <label for="email">Your email address</label>
-        <input type="email" class="mzp-js-email-field" id="email" name="email" placeholder="yourname@example.com" required aria-required="true">
+      <div class="mzp-c-form-errors hidden" id="newsletter-errors">
+        <ul class="mzp-u-list-styled">
+          <li class="error-email-invalid hidden">
+            Please enter a valid email address
+          </li>
+          <li class="error-select-country hidden">
+            Please select a country or region
+          </li>
+          <li class="error-select-language hidden">
+            Please select a language
+          </li>
+          <li class="error-newsletter-checkbox hidden">
+            Please check at least one of the newsletter options.
+          </li>
+          <li class="error-privacy-policy hidden">
+            You must agree to the privacy notice
+          </li>
+          <li class="error-try-again-later hidden">
+            We are sorry, but there was a problem with our system. Please try again later!
+          </li>
+        </ul>
       </div>
 
+      <label for="id_email">Your email address:</label>
+      <input type="email" id="id_email" name="email" required="" maxlength="320" placeholder="yourname@example.com" class="mzp-js-email-field">
+
       <div id="newsletter-details" class="mzp-c-newsletter-details">
-        {% render '@select', { label: 'Country', name: 'country', required: True, options: '@newsletter.options' } %}
-        {% render '@select', { required: True }, true %}
+        {% render '@select', { label: 'Country', name: 'country', required: True, id: 'id_country', options: '@newsletter.options' } %}
+        {% render '@select', { required: True, id: 'id_lang' }, true %}
+
+        <fieldset class="mzp-u-inline">
+          <legend>I want information about:</legend>
+          <p>
+            <label for="id_newsletters_0" class="mzp-u-inline">
+              <input type="checkbox" name="newsletters" value="mozilla-foundation" id="id_newsletters_0" checked> Mozilla Foundation
+            </label>
+
+            <label for="id_newsletters_1" class="mzp-u-inline">
+              <input type="checkbox" name="newsletters" value="mozilla-and-you" id="id_newsletters_1" checked> Firefox
+            </label>
+          </p>
+        </fieldset>
 
         <fieldset class="mzp-u-inline">
           <legend>Format</legend>
           <p>
             <label for="format-html" class="mzp-u-inline">
-              <input type="radio" id="format-html" name="fmt" value="H" checked> HTML
+              <input type="radio" id="format-html" name="format" value="H" checked> HTML
             </label>
             <label for="format-text" class="mzp-u-inline">
-              <input type="radio" id="format-text" name="fmt" value="T"> Text
+              <input type="radio" id="format-text" name="format" value="T"> Text
             </label>
           </p>
         </fieldset>
@@ -46,7 +83,7 @@ <h3 class="mzp-c-newsletter-title">Love the Web?</h3>
     </fieldset>
   </form>
 
-  <div id="newsletter-thanks" class="mzp-c-newsletter-thanks">
+  <div id="newsletter-thanks" class="mzp-c-newsletter-thanks hidden">
     <h3>Thanks!</h3>
     <p>If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us.</p>
   </div>
@@ -54,4 +91,16 @@ <h3>Thanks!</h3>
 </aside>
 
 <script src="{{ '/protocol/js/newsletter.js' | path }}"></script>
-<script>window.MzpNewsletter.init();</script>
+<script>
+const successCustomCallback = () => {
+  console.log('Form success');
+};
+
+const errorCustomCallback = (msg) => {
+  if (msg) {
+    console.log(msg);
+  }
+};
+
+window.MzpNewsletter.init(successCustomCallback, errorCustomCallback);
+</script>
diff --git a/components/newsletter/readme.md b/components/newsletter/readme.md
index 3533e7be..9ebcbc5a 100644
--- a/components/newsletter/readme.md
+++ b/components/newsletter/readme.md
@@ -1,8 +1,9 @@
 The standard newsletter subscription form.
 
-This component only provides the essentials for form display. Making this
-newsletter form fully functional requires additional functionality. See
-the [Basket example](https://github.com/mozilla/basket-example/) for more.
+This component provides both form styling and the functionality required to
+POST directly to [Basket](https://basket.mozilla.org/).
+
+Note: the example form on this page is fully functional.
 
 ### Usage
 
@@ -30,8 +31,25 @@ You can then initialize the component using `init()`.
 MzpNewsletter.init();
 ```
 
+You can also pass custom callbacks for both sign-up success and failure, which
+can be useful for things like analytics events.
+
+```javascript
+const successCustomCallback = () => {
+  // custom on success code
+};
+
+const errorCustomCallback = () => {
+  // custom on error code
+};
+
+MzpNewsletter.init(successCustomCallback, errorCustomCallback);
+```
+
 ### Tips
 
 - Make sure to initialize the component *after* the DOM has loaded.
-- Some newsletters are only available in one language, so don’t require a
-  language selection.
+- Both country and language fields are optional.
+- If there is only one newsletter, you can use a hidden input field for the newsletter ID instead of a checkbox.
+- Use `success@example.com` as the email to have the request return successfully but not actually record a subscription, and `failure@example.com` to always return failure.
+- The `source_url` hidden input field value should match the URL of the page where the newsletter form appears. This is used to attribute where the sign-up originated from.
diff --git a/package-lock.json b/package-lock.json
index 0d90a073..857b1b5b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,6 +37,7 @@
         "karma-jasmine": "^5.1.0",
         "karma-sourcemap-loader": "^0.4.0",
         "karma-webpack": "^5.0.0",
+        "sinon": "^17.0.0",
         "stylelint": "^15.11.0",
         "stylelint-config-standard-scss": "^11.0.0"
       },
@@ -2376,6 +2377,50 @@
         "node": ">=6"
       }
     },
+    "node_modules/@sinonjs/commons": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-3.0.0.tgz",
+      "integrity": "sha512-jXBtWAF4vmdNmZgD5FoKsVLv3rPgDnLgPbU84LIJ3otV44vJlDRokVng5v8NFJdCf/da9legHcKaRuZs4L7faA==",
+      "dev": true,
+      "dependencies": {
+        "type-detect": "4.0.8"
+      }
+    },
+    "node_modules/@sinonjs/fake-timers": {
+      "version": "11.2.2",
+      "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-11.2.2.tgz",
+      "integrity": "sha512-G2piCSxQ7oWOxwGSAyFHfPIsyeJGXYtc6mFbnFA+kRXkiEnTl8c/8jul2S329iFBnDI9HGoeWWAZvuvOkZccgw==",
+      "dev": true,
+      "dependencies": {
+        "@sinonjs/commons": "^3.0.0"
+      }
+    },
+    "node_modules/@sinonjs/samsam": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@sinonjs/samsam/-/samsam-8.0.0.tgz",
+      "integrity": "sha512-Bp8KUVlLp8ibJZrnvq2foVhP0IVX2CIprMJPK0vqGqgrDa0OHVKeZyBykqskkrdxV6yKBPmGasO8LVjAKR3Gew==",
+      "dev": true,
+      "dependencies": {
+        "@sinonjs/commons": "^2.0.0",
+        "lodash.get": "^4.4.2",
+        "type-detect": "^4.0.8"
+      }
+    },
+    "node_modules/@sinonjs/samsam/node_modules/@sinonjs/commons": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-2.0.0.tgz",
+      "integrity": "sha512-uLa0j859mMrg2slwQYdO/AkrOfmH+X6LTVmNTS9CqexuE2IvVORIkSpJLqePAbEnKJ77aMmCwr1NUZ57120Xcg==",
+      "dev": true,
+      "dependencies": {
+        "type-detect": "4.0.8"
+      }
+    },
+    "node_modules/@sinonjs/text-encoding": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/@sinonjs/text-encoding/-/text-encoding-0.7.2.tgz",
+      "integrity": "sha512-sXXKG+uL9IrKqViTtao2Ws6dy0znu9sOaP1di/jKGW1M6VssO8vlpXCQcpZ+jisQ1tTFAC5Jo/EOzFbggBagFQ==",
+      "dev": true
+    },
     "node_modules/@socket.io/component-emitter": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz",
@@ -4748,6 +4793,15 @@
       "integrity": "sha512-uJaamHkagcZtHPqCIHZxnFrXlunQXgBOsZSUOWwFw31QJCAbyTBoHMW75YOTur5ZNx8pIeAKgf6GWIgaqqiLhA==",
       "dev": true
     },
+    "node_modules/diff": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-5.1.0.tgz",
+      "integrity": "sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -7420,6 +7474,12 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/just-extend": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/just-extend/-/just-extend-4.2.1.tgz",
+      "integrity": "sha512-g3UB796vUFIY90VIv/WX3L2c8CS2MdWUww3CNrYmqza1Fg0DURc2K/O4YrnklBdQarSJ/y8JnJYDGc+1iumQjg==",
+      "dev": true
+    },
     "node_modules/karma": {
       "version": "6.4.2",
       "resolved": "https://registry.npmjs.org/karma/-/karma-6.4.2.tgz",
@@ -7907,6 +7967,12 @@
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
     },
+    "node_modules/lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==",
+      "dev": true
+    },
     "node_modules/lodash.isfinite": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/lodash.isfinite/-/lodash.isfinite-3.3.2.tgz",
@@ -8427,6 +8493,61 @@
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
     },
+    "node_modules/nise": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/nise/-/nise-5.1.5.tgz",
+      "integrity": "sha512-VJuPIfUFaXNRzETTQEEItTOP8Y171ijr+JLq42wHes3DiryR8vT+1TXQW/Rx8JNUhyYYWyIvjXTU6dOhJcs9Nw==",
+      "dev": true,
+      "dependencies": {
+        "@sinonjs/commons": "^2.0.0",
+        "@sinonjs/fake-timers": "^10.0.2",
+        "@sinonjs/text-encoding": "^0.7.1",
+        "just-extend": "^4.0.2",
+        "path-to-regexp": "^1.7.0"
+      }
+    },
+    "node_modules/nise/node_modules/@sinonjs/commons": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-2.0.0.tgz",
+      "integrity": "sha512-uLa0j859mMrg2slwQYdO/AkrOfmH+X6LTVmNTS9CqexuE2IvVORIkSpJLqePAbEnKJ77aMmCwr1NUZ57120Xcg==",
+      "dev": true,
+      "dependencies": {
+        "type-detect": "4.0.8"
+      }
+    },
+    "node_modules/nise/node_modules/@sinonjs/fake-timers": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-10.3.0.tgz",
+      "integrity": "sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==",
+      "dev": true,
+      "dependencies": {
+        "@sinonjs/commons": "^3.0.0"
+      }
+    },
+    "node_modules/nise/node_modules/@sinonjs/fake-timers/node_modules/@sinonjs/commons": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-3.0.0.tgz",
+      "integrity": "sha512-jXBtWAF4vmdNmZgD5FoKsVLv3rPgDnLgPbU84LIJ3otV44vJlDRokVng5v8NFJdCf/da9legHcKaRuZs4L7faA==",
+      "dev": true,
+      "dependencies": {
+        "type-detect": "4.0.8"
+      }
+    },
+    "node_modules/nise/node_modules/isarray": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==",
+      "dev": true
+    },
+    "node_modules/nise/node_modules/path-to-regexp": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+      "dev": true,
+      "dependencies": {
+        "isarray": "0.0.1"
+      }
+    },
     "node_modules/node-localstorage": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/node-localstorage/-/node-localstorage-0.6.0.tgz",
@@ -10771,6 +10892,24 @@
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
     },
+    "node_modules/sinon": {
+      "version": "17.0.1",
+      "resolved": "https://registry.npmjs.org/sinon/-/sinon-17.0.1.tgz",
+      "integrity": "sha512-wmwE19Lie0MLT+ZYNpDymasPHUKTaZHUH/pKEubRXIzySv9Atnlw+BUMGCzWgV7b7wO+Hw6f1TEOr0IUnmU8/g==",
+      "dev": true,
+      "dependencies": {
+        "@sinonjs/commons": "^3.0.0",
+        "@sinonjs/fake-timers": "^11.2.2",
+        "@sinonjs/samsam": "^8.0.0",
+        "diff": "^5.1.0",
+        "nise": "^5.1.5",
+        "supports-color": "^7.2.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/sinon"
+      }
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -12108,6 +12247,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/type-detect": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
+      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/type-fest": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
diff --git a/package.json b/package.json
index 2c74c05d..f835519b 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "karma-jasmine": "^5.1.0",
     "karma-sourcemap-loader": "^0.4.0",
     "karma-webpack": "^5.0.0",
+    "sinon": "^17.0.0",
     "stylelint": "^15.11.0",
     "stylelint-config-standard-scss": "^11.0.0"
   },
diff --git a/tests/karma.conf.js b/tests/karma.conf.js
index 9442c6d9..19a3061c 100644
--- a/tests/karma.conf.js
+++ b/tests/karma.conf.js
@@ -26,7 +26,13 @@ module.exports = function(config) {
             'tests/unit/lang-switcher.js',
             'tests/unit/menu.js',
             'tests/unit/navigation.js',
-            'tests/unit/notification-bar.js'
+            'tests/unit/newsletter.js',
+            'tests/unit/notification-bar.js',
+            {
+                pattern: 'node_modules/sinon/pkg/sinon.js',
+                watched: false,
+                included: true
+            },
         ],
 
 
diff --git a/tests/unit/newsletter.js b/tests/unit/newsletter.js
new file mode 100644
index 00000000..66be27f5
--- /dev/null
+++ b/tests/unit/newsletter.js
@@ -0,0 +1,427 @@
+/*
+ * 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/.
+ */
+
+import MzpNewsletter from '../../assets/js/protocol/newsletter';
+
+/**
+ * Note: There is a `novalidate` attribute added to the <form>
+ * element below for testing purposes only.
+ */
+describe('MzpNewsletter', function () {
+    beforeEach(async function () {
+        const form = `<aside class="mzp-c-newsletter">
+            <div class="newsletter-content">
+                <form id="newsletter-form" class="mzp-c-newsletter-form" action="https://basket.mozilla.org/news/subscribe/" method="post" novalidate>
+                    <input type="hidden" name="source_url" value="https://www.mozilla.org/en-US/">
+                    <fieldset class="mzp-c-newsletter-content">
+                        <div class="mzp-c-form-errors hidden" id="newsletter-errors">
+                            <ul class="mzp-u-list-styled">
+                                <li class="error-email-invalid hidden">
+                                    Please enter a valid email address
+                                </li>
+                                <li class="error-select-country hidden">
+                                    Please select a country or region
+                                </li>
+                                <li class="error-select-language hidden">
+                                    Please select a language
+                                </li>
+                                <li class="error-newsletter-checkbox hidden">
+                                    Please check at least one of the newsletter options.
+                                </li>
+                                <li class="error-privacy-policy hidden">
+                                    You must agree to the privacy notice
+                                </li>
+                                <li class="error-try-again-later hidden">
+                                    We are sorry, but there was a problem with our system. Please try again later!
+                                </li>
+                            </ul>
+                        </div>
+                        <label for="id_email">Your email address:</label>
+                        <input type="email" name="email" placeholder="yourname@example.com" class="mzp-js-email-field" id="id_email">
+                        <div id="newsletter-details" class="mzp-c-newsletter-details">
+                            <label for="id_country">Select country or region:</label>
+                            <p>
+                                <select name="country" id="id_country">
+                                    <option value="" selected="">Select a country or region</option>
+                                    <option value="de">Germany</option>
+                                    <option value="fr">France</option>
+                                    <option value="us">United States</option>
+                                </select>
+                            </p>
+                            <label for="id_lang">Select language:</label>
+                            <p>
+                                <select name="lang" id="id_lang">
+                                    <option value="" selected="">Select a language</option>
+                                    <option value="de">Deutsch</option>
+                                    <option value="en">English</option>
+                                    <option value="fr">Français</option>
+                                </select>
+                            </p>
+                            <fieldset class="mzp-u-inline">
+                                <legend>I want information about:</legend>
+                                <p>
+                                    <label for="id_newsletters_0" class="mzp-u-inline">
+                                        <input type="checkbox" name="newsletters" value="mozilla-foundation" id="id_newsletters_0" checked=""> Mozilla Foundation
+                                    </label>
+                                    <label for="id_newsletters_1" class="mzp-u-inline">
+                                        <input type="checkbox" name="newsletters" value="mozilla-and-you" id="id_newsletters_1" checked=""> Firefox
+                                    </label>
+                                </p>
+                            </fieldset>
+                            <fieldset class="mzp-u-inline">
+                                <legend>Format</legend>
+                                <p>
+                                    <label for="format-html" class="mzp-u-inline">
+                                        <input type="radio" id="format-html" name="format" value="H" checked=""> HTML
+                                    </label>
+                                    <label for="format-text" class="mzp-u-inline">
+                                        <input type="radio" id="format-text" name="format" value="T"> Text
+                                    </label>
+                                </p>
+                            </fieldset>
+                            <p>
+                                <label for="privacy" class="mzp-u-inline">
+                                    <input type="checkbox" id="privacy" name="privacy"">
+                                    I’m okay with Mozilla handling my info as explained in this Privacy Notice
+                                </label>
+                            </p>
+                        </div>
+                        <p class="mzp-c-form-submit">
+                            <button type="submit" id="newsletter-submit" class="mzp-c-button button-dark">Sign Up Now</button>
+                        </p>
+                    </fieldset>
+                </form>
+                <div id="newsletter-thanks" class="mzp-c-newsletter-thanks hidden">
+                    <h3>Thanks!</h3>
+                </div>
+            </div>
+        </aside>`;
+
+        document.body.insertAdjacentHTML('beforeend', form);
+    });
+
+    afterEach(function () {
+        const form = document.querySelector('.mzp-c-newsletter');
+        form.parentNode.removeChild(form);
+    });
+
+    describe('form submission', function () {
+        let xhr;
+        let xhrRequests = [];
+
+        beforeEach(function () {
+            xhr = sinon.useFakeXMLHttpRequest();
+            xhr.onCreate = (req) => {
+                xhrRequests.push(req);
+            };
+        });
+
+        afterEach(function () {
+            xhr.restore();
+            xhrRequests = [];
+        });
+
+        it('should handle success', function () {
+            spyOn(MzpNewsletter, 'handleFormSuccess').and.callThrough();
+            MzpNewsletter.init();
+            document.getElementById('id_email').value = 'fox@example.com';
+            document.getElementById('id_country').value = 'us';
+            document.getElementById('id_lang').value = 'en';
+            document.getElementById('privacy').click();
+            document.getElementById('newsletter-submit').click();
+            xhrRequests[0].respond(
+                200,
+                { 'Content-Type': 'application/json' },
+                '{"status": "ok"}'
+            );
+
+            expect(MzpNewsletter.handleFormSuccess).toHaveBeenCalled();
+            expect(
+                document
+                    .getElementById('newsletter-thanks')
+                    .classList.contains('hidden')
+            ).toBeFalse();
+            expect(
+                document
+                    .getElementById('newsletter-form')
+                    .classList.contains('hidden')
+            ).toBeTrue();
+        });
+
+        it('should handle invalid email', function () {
+            spyOn(MzpNewsletter, 'handleFormError').and.callThrough();
+            MzpNewsletter.init();
+            document.getElementById('id_email').value = 'invalid@email';
+            document.getElementById('id_country').value = 'us';
+            document.getElementById('id_lang').value = 'en';
+            document.getElementById('privacy').click();
+            document.getElementById('newsletter-submit').click();
+            xhrRequests[0].respond(
+                400,
+                { 'Content-Type': 'application/json' },
+                '{"status": "error", "desc": "Invalid email address"}'
+            );
+
+            expect(MzpNewsletter.handleFormError).toHaveBeenCalledWith(
+                'Invalid email address'
+            );
+            expect(
+                document
+                    .getElementById('newsletter-errors')
+                    .classList.contains('hidden')
+            ).toBeFalse();
+            expect(
+                document
+                    .querySelector('.error-email-invalid')
+                    .classList.contains('hidden')
+            ).toBeFalse();
+        });
+
+        it('should handle incomplete country selection', function () {
+            spyOn(MzpNewsletter, 'handleFormError').and.callThrough();
+            MzpNewsletter.init();
+            document.getElementById('id_email').value = 'fox@example.com';
+            document.getElementById('id_lang').value = 'en';
+            document.getElementById('privacy').click();
+            document.getElementById('newsletter-submit').click();
+
+            expect(MzpNewsletter.handleFormError).toHaveBeenCalledWith(
+                'Country not selected'
+            );
+            expect(
+                document
+                    .getElementById('newsletter-errors')
+                    .classList.contains('hidden')
+            ).toBeFalse();
+            expect(
+                document
+                    .querySelector('.error-select-country')
+                    .classList.contains('hidden')
+            ).toBeFalse();
+        });
+
+        it('should handle incomplete language selection', function () {
+            spyOn(MzpNewsletter, 'handleFormError').and.callThrough();
+            MzpNewsletter.init();
+            document.getElementById('id_email').value = 'fox@example.com';
+            document.getElementById('id_country').value = 'us';
+            document.getElementById('privacy').click();
+            document.getElementById('newsletter-submit').click();
+
+            expect(MzpNewsletter.handleFormError).toHaveBeenCalledWith(
+                'Language not selected'
+            );
+            expect(
+                document
+                    .getElementById('newsletter-errors')
+                    .classList.contains('hidden')
+            ).toBeFalse();
+            expect(
+                document
+                    .querySelector('.error-select-language')
+                    .classList.contains('hidden')
+            ).toBeFalse();
+        });
+
+        it('should handle incomplete newsletter selection', function () {
+            spyOn(MzpNewsletter, 'handleFormError').and.callThrough();
+            MzpNewsletter.init();
+            document.getElementById('id_email').value = 'fox@example.com';
+            document.getElementById('id_country').value = 'us';
+            document.getElementById('id_lang').value = 'en';
+            document.getElementById('id_newsletters_0').click();
+            document.getElementById('id_newsletters_1').click();
+            document.getElementById('newsletter-submit').click();
+
+            expect(MzpNewsletter.handleFormError).toHaveBeenCalledWith(
+                'Newsletter not selected'
+            );
+            expect(
+                document
+                    .getElementById('newsletter-errors')
+                    .classList.contains('hidden')
+            ).toBeFalse();
+            expect(
+                document
+                    .querySelector('.error-newsletter-checkbox')
+                    .classList.contains('hidden')
+            ).toBeFalse();
+        });
+
+        it('should handle incomplete privacy agreement', function () {
+            spyOn(MzpNewsletter, 'handleFormError').and.callThrough();
+            MzpNewsletter.init();
+            document.getElementById('id_email').value = 'fox@example.com';
+            document.getElementById('id_country').value = 'us';
+            document.getElementById('id_lang').value = 'en';
+            document.getElementById('newsletter-submit').click();
+
+            expect(MzpNewsletter.handleFormError).toHaveBeenCalledWith(
+                'Privacy policy not checked'
+            );
+            expect(
+                document
+                    .getElementById('newsletter-errors')
+                    .classList.contains('hidden')
+            ).toBeFalse();
+            expect(
+                document
+                    .querySelector('.error-privacy-policy')
+                    .classList.contains('hidden')
+            ).toBeFalse();
+        });
+
+        it('should handle unknown error', function () {
+            spyOn(MzpNewsletter, 'handleFormError').and.callThrough();
+            MzpNewsletter.init();
+            document.getElementById('id_email').value = 'fox@example.com';
+            document.getElementById('id_country').value = 'us';
+            document.getElementById('id_lang').value = 'en';
+            document.getElementById('privacy').click();
+            document.getElementById('newsletter-submit').click();
+            xhrRequests[0].respond(
+                400,
+                { 'Content-Type': 'application/json' },
+                '{"status": "error", "desc": "Unknown non-helpful error"}'
+            );
+
+            expect(MzpNewsletter.handleFormError).toHaveBeenCalled();
+            expect(
+                document
+                    .getElementById('newsletter-errors')
+                    .classList.contains('hidden')
+            ).toBeFalse();
+            expect(
+                document
+                    .querySelector('.error-try-again-later')
+                    .classList.contains('hidden')
+            ).toBeFalse();
+        });
+
+        it('should handle failure', function () {
+            spyOn(MzpNewsletter, 'handleFormError').and.callThrough();
+            MzpNewsletter.init();
+            document.getElementById('id_email').value = 'fox@example.com';
+            document.getElementById('id_country').value = 'us';
+            document.getElementById('id_lang').value = 'en';
+            document.getElementById('privacy').click();
+            document.getElementById('newsletter-submit').click();
+            xhrRequests[0].respond(
+                500,
+                { 'Content-Type': 'application/json' },
+                null
+            );
+
+            expect(MzpNewsletter.handleFormError).toHaveBeenCalled();
+            expect(
+                document
+                    .getElementById('newsletter-errors')
+                    .classList.contains('hidden')
+            ).toBeFalse();
+            expect(
+                document
+                    .querySelector('.error-try-again-later')
+                    .classList.contains('hidden')
+            ).toBeFalse();
+        });
+
+        it('should handle custom success callback', function () {
+            const testObj = {
+                successCallback: () => {
+                    // no-op
+                },
+                errorCallback: () => {
+                    // no-op
+                }
+            };
+            spyOn(MzpNewsletter, 'handleFormSuccess').and.callThrough();
+            spyOn(testObj, 'successCallback');
+            MzpNewsletter.init(testObj.successCallback, testObj.errorCallback);
+            document.getElementById('id_email').value = 'fox@example.com';
+            document.getElementById('id_country').value = 'us';
+            document.getElementById('id_lang').value = 'en';
+            document.getElementById('privacy').click();
+            document.getElementById('newsletter-submit').click();
+            xhrRequests[0].respond(
+                200,
+                { 'Content-Type': 'application/json' },
+                '{"status": "ok"}'
+            );
+
+            expect(MzpNewsletter.handleFormSuccess).toHaveBeenCalled();
+            expect(testObj.successCallback).toHaveBeenCalled();
+        });
+
+        it('should handle custom error callback', function () {
+            const testObj = {
+                successCallback: () => {
+                    // no-op
+                },
+                errorCallback: () => {
+                    // no-op
+                }
+            };
+            spyOn(MzpNewsletter, 'handleFormError').and.callThrough();
+            spyOn(testObj, 'errorCallback');
+            MzpNewsletter.init(testObj.successCallback, testObj.errorCallback);
+            document.getElementById('id_email').value = 'fox@example.com';
+            document.getElementById('id_country').value = 'us';
+            document.getElementById('id_lang').value = 'en';
+            document.getElementById('privacy').click();
+            document.getElementById('newsletter-submit').click();
+            xhrRequests[0].respond(
+                500,
+                { 'Content-Type': 'application/json' },
+                null
+            );
+
+            expect(MzpNewsletter.handleFormError).toHaveBeenCalled();
+            expect(testObj.errorCallback).toHaveBeenCalled();
+        });
+    });
+
+    describe('serialize', function () {
+        it('should serialize form data as expected', function () {
+            MzpNewsletter.init();
+            document.getElementById('id_email').value = 'fox@example.com';
+            document.getElementById('id_country').value = 'us';
+            document.getElementById('id_lang').value = 'en';
+
+            const data1 = MzpNewsletter.serialize();
+            expect(data1).toEqual(
+                'email=fox%40example.com&format=H&country=us&lang=en&source_url=https%3A%2F%2Fwww.mozilla.org%2Fen-US%2F&newsletters=mozilla-foundation%2Cmozilla-and-you'
+            );
+            document.getElementById('id_newsletters_0').click();
+            const data2 = MzpNewsletter.serialize();
+            expect(data2).toEqual(
+                'email=fox%40example.com&format=H&country=us&lang=en&source_url=https%3A%2F%2Fwww.mozilla.org%2Fen-US%2F&newsletters=mozilla-and-you'
+            );
+            document.getElementById('format-text').click();
+            const data3 = MzpNewsletter.serialize();
+            expect(data3).toEqual(
+                'email=fox%40example.com&format=T&country=us&lang=en&source_url=https%3A%2F%2Fwww.mozilla.org%2Fen-US%2F&newsletters=mozilla-and-you'
+            );
+        });
+    });
+});
+
+describe('checkEmailValidity', function () {
+    it('should return true for primitive email format', function () {
+        expect(MzpNewsletter.checkEmailValidity('a@a')).toBeTruthy();
+        expect(
+            MzpNewsletter.checkEmailValidity('example@example.com')
+        ).toBeTruthy();
+    });
+
+    it('should return false for anything else', function () {
+        expect(MzpNewsletter.checkEmailValidity(1234567890)).toBeFalsy();
+        expect(MzpNewsletter.checkEmailValidity('aaa')).toBeFalsy();
+        expect(MzpNewsletter.checkEmailValidity(null)).toBeFalsy();
+        expect(MzpNewsletter.checkEmailValidity(undefined)).toBeFalsy();
+        expect(MzpNewsletter.checkEmailValidity(true)).toBeFalsy();
+        expect(MzpNewsletter.checkEmailValidity(false)).toBeFalsy();
+    });
+});