gecko-dev/devtools/startup/aboutdevtools/subscribe.js

/* 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 http://mozilla.org/MPL/2.0/. */

"use strict";

/**
 * This file handles the newsletter subscription form on about:devtools.
 * It is largely inspired from https://mozilla.github.io/basket-example/
 */

window.addEventListener("load", function() {
  // Timeout for the subscribe XHR.
  const REQUEST_TIMEOUT = 5000;

  const emailInput = document.getElementById("email");
  const newsletterErrors = document.getElementById("newsletter-errors");
  const newsletterForm = document.getElementById("newsletter-form");
  const newsletterPrivacySection = document.getElementById("newsletter-privacy");
  const newsletterThanks = document.getElementById("newsletter-thanks");

  /**
   * Update the error panel to display the provided errors. If the argument is null or
   * empty, a default error message will be displayed.
   *
   * @param {Array} errors
   *        Array of strings, each item being an error message to display.
   */
  async function updateErrorPanel(errors) {
    clearErrorPanel();

    if (!errors || errors.length == 0) {
      errors = [await document.l10n.formatValues([{id: "newsletter-error-unknown"}])];
    }

    // Create errors markup.
    const fragment = document.createDocumentFragment();
    for (const error of errors) {
      const item = document.createElement("p");
      item.classList.add("error");
      item.appendChild(document.createTextNode(error));
      fragment.appendChild(item);
    }

    newsletterErrors.appendChild(fragment);
    newsletterErrors.classList.add("show");
  }

  /**
   * Hide the error panel and remove all errors.
   */
  function clearErrorPanel() {
    newsletterErrors.classList.remove("show");
    newsletterErrors.innerHTML = "";
  }

  // Show the additional form fields on focus of the email input.
  function onEmailInputFocus() {
    // Create a hidden measuring container, append it to the parent of the privacy section
    const container = document.createElement("div");
    container.style.cssText = "visibility: hidden; overflow: hidden; position: absolute";
    newsletterPrivacySection.parentNode.appendChild(container);

    // Clone the privacy section, append the clone to the measuring container.
    const clone = newsletterPrivacySection.cloneNode(true);
    container.appendChild(clone);

    // Measure the target height of the privacy section.
    clone.style.height = "auto";
    const height = clone.offsetHeight;

    // Cleanup the measuring container.
    container.remove();

    // Set the animate class and set the height to the measured height.
    newsletterPrivacySection.classList.add("animate");
    newsletterPrivacySection.style.cssText = `height: ${height}px; margin-bottom: 0;`;
  }

  // XHR subscribe; handle errors; display thanks message on success.
  function onFormSubmit(evt) {
    evt.preventDefault();
    evt.stopPropagation();

    // New submission, clear old errors
    clearErrorPanel();

    const xhr = new XMLHttpRequest();

    xhr.onload = async function(r) {
      if (r.target.status >= 200 && r.target.status < 300) {
        const {response} = r.target;

        if (response.success === true) {
          // Hide form and show success message.
          newsletterForm.style.display = "none";
          newsletterThanks.classList.add("show");
        } else {
          // We trust the error messages from the service to be meaningful for the user.
          updateErrorPanel(response.errors);
        }
      } else {
        const {status, statusText} = r.target;
        const statusInfo = `${status} - ${statusText}`;
        const error = await document.l10n.formatValues([
          { id: "newsletter-error-common", args: { errorDescription: statusInfo } },
        ]);
        updateErrorPanel([error]);
      }
    };

    xhr.onerror = () => {
      updateErrorPanel();
    };

    xhr.ontimeout = async () => {
      const error = await document.l10n.formatValues([
        { id: "newsletter-error-timeout" },
      ]);
      updateErrorPanel([error]);
    };

    const url = newsletterForm.getAttribute("action");

    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    xhr.timeout = REQUEST_TIMEOUT;
    xhr.responseType = "json";

    // Create form data.
    const formData = new FormData(newsletterForm);
    formData.append("source_url", document.location.href);

    const params = new URLSearchParams(formData);

    // Send the request.
    xhr.send(params.toString());
  }

  // Attach event listeners.
  newsletterForm.addEventListener("submit", onFormSubmit);
  emailInput.addEventListener("focus", onEmailInputFocus);
}, { once: true });