Add Fx News one-click-subscribe page (Fixes #15142)

bedrock/newsletter/templates/newsletter/firefox-confirm.html

@@ -0,0 +1,48 @@
+{#
+ 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/.
+#}
+
+{% extends 'base-protocol.html' %}
+
+{% block page_title %}Firefox Newsletter{% endblock page_title %}
+
+{% block page_css %}
+  {{ css_bundle('newsletter-firefox-confirm') }}
+{% endblock %}
+
+{% block content %}
+<main class="mzp-l-content mzp-t-content-lg mzp-u-centered">
+  <header>
+    <h1 class="page-title">Firefox Newsletter</h1>
+  </header>
+
+  <form id="confirmation-form" class="c-confirmation-form" method="post" action="{{ action }}" data-recovery-url="{{ url('newsletter.recovery') }}">
+    <input type="hidden" name="newsletters" value="{{ newsletters }}">
+    <input type="hidden" name="source_url" value="{{ source_url|absolute_url }}">
+    <input type="hidden" name="lang" value="{{ newsletter_lang }}">
+    <p class="c-confirmation-form-tagline">Please click the button below to confirm your subscription.</p>
+    <div class="c-confirm-form-errors mzp-c-form-errors hidden" id="confirm-form-errors">
+      <p class="c-confirm-error-msg error-invalid-token hidden">
+        We are sorry, but could not find your email address in our system.
+      </p>
+      <p class="c-confirm-error-msg error-try-again-later hidden">
+        We are sorry, but there was a problem with our system. Please try again later!
+      </p>
+      <p class="c-confirm-error-msg error-update-browser hidden">
+        Please update your web browser in order to use this page.
+      </p>
+    </div>
+    <button type="submit" class="c-confirm-form-submit mzp-c-button">Subscribe</button>
+  </form>
+  <div class="c-confirmation-form-thanks hidden">
+    <p>Thank you for subscribing!</p>
+    <p>Check your inbox soon for the latest Firefox newsletter.</p>
+  </div>
+</main>
+{% endblock %}
+
+{% block js %}
+  {{ js_bundle('newsletter-firefox-confirm') }}
+{% endblock %}

bedrock/newsletter/urls.py

@@ -51,6 +51,8 @@
         ),
         name="newsletter.firefox",
     ),
+    path("newsletter/firefox/confirm/<uuid:token>/", views.firefox_confirm, name="newsletter.firefox.confirm"),
+    path("newsletter/firefox/confirm/", views.firefox_confirm, name="newsletter.firefox.confirm.no-token"),
     page("newsletter/developer/", "newsletter/developer.html", ftl_files=["mozorg/newsletters"]),
     page("newsletter/fxa-error/", "newsletter/fxa-error.html", ftl_files=["mozorg/newsletters"]),
     page("newsletter/family/", "newsletter/family.html", ftl_files=["mozorg/newsletters"], active_locales=["en-US"]),

bedrock/newsletter/views.py

@@ -284,3 +284,18 @@ def newsletter_subscribe(request):
             return l10n_utils.render(request, "newsletter/index.html", ctx, ftl_files=FTL_FILES)
 
     return l10n_utils.render(request, "newsletter/index.html", ftl_files=FTL_FILES)
+
+
+def firefox_confirm(request, token=None):
+    locale = l10n_utils.get_locale(request)
+
+    context = {
+        "action": f"{settings.BASKET_URL}/news/subscribe/",
+        "active_locales": ["en-US", "en-GB", "en-CA", "de", "fr"],
+        "newsletter_lang": locale.split("-")[0],
+        "newsletters": "mozilla-and-you",
+        "recovery_url": reverse("newsletter.recovery"),
+        "source_url": reverse("newsletter.firefox.confirm.no-token"),
+    }
+
+    return l10n_utils.render(request, "newsletter/firefox-confirm.html", context)

media/css/newsletter/newsletter-firefox-confirm.scss

@@ -0,0 +1,37 @@
+// 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/.
+
+$font-path: '/media/protocol/fonts';
+$image-path: '/media/protocol/img';
+
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/forms/form';
+@import '~@mozilla-protocol/core/protocol/css/components/forms/field';
+@import '~@mozilla-protocol/core/protocol/css/components/forms/button-container';
+
+main {
+    min-height: 500px;
+}
+
+.c-confirmation-form {
+    margin-top: $layout-lg;
+}
+
+.c-confirmation-form-tagline {
+    @include text-body-xl;
+}
+
+.c-confirmation-form-thanks {
+    margin-top: $layout-lg;
+    @include text-body-xl;
+}
+
+.c-confirm-form-errors {
+    max-width: 400px;
+    margin: 0 auto $spacing-xl;
+}
+
+.c-confirm-error-msg {
+    margin-bottom: 0;
+}

media/js/newsletter/confirm-init.es6.js

@@ -0,0 +1,9 @@
+/*
+ * 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 ConfirmForm from './confirm.es6';
+
+ConfirmForm.init();

media/js/newsletter/confirm.es6.js

@@ -0,0 +1,108 @@
+/*
+ * 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 FormUtils from './form-utils.es6';
+
+let _form;
+
+const ConfirmationForm = {
+    meetsRequirements: () => {
+        return 'Promise' in window;
+    },
+
+    handleFormError: (msg) => {
+        FormUtils.enableFormFields(_form);
+        _form.querySelector('.mzp-c-form-errors').classList.remove('hidden');
+
+        if (msg && msg === FormUtils.errorList.TOKEN_INVALID) {
+            _form
+                .querySelector('.error-invalid-token')
+                .classList.remove('hidden');
+        } else if (msg && msg === FormUtils.errorList.UPDATE_BROWSER) {
+            _form
+                .querySelector('.error-update-browser')
+                .classList.remove('hidden');
+        } else {
+            _form
+                .querySelector('.error-try-again-later')
+                .classList.remove('hidden');
+        }
+    },
+
+    handleFormSuccess: () => {
+        _form.classList.add('hidden');
+        document
+            .querySelector('.c-confirmation-form-thanks')
+            .classList.remove('hidden');
+    },
+
+    redirectToRecoveryPage: () => {
+        const recoveryUrl = _form.getAttribute('data-recovery-url');
+
+        if (FormUtils.isWellFormedURL(recoveryUrl)) {
+            window.location.href = recoveryUrl;
+        } else {
+            ConfirmationForm.handleFormError();
+        }
+    },
+
+    getFormActionURL: () => {
+        return _form.getAttribute('action');
+    },
+
+    serialize: () => {
+        const params = FormUtils.serialize(_form);
+        const token = FormUtils.getUserToken();
+
+        if (params && token) {
+            return `${params}&token=${token}`;
+        }
+
+        return '';
+    },
+
+    subscribe: (e) => {
+        const url = ConfirmationForm.getFormActionURL();
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        // Disable form fields until POST has completed.
+        FormUtils.disableFormFields(_form);
+
+        // Clear any prior messages that might have been displayed.
+        FormUtils.clearFormErrors(_form);
+
+        const params = ConfirmationForm.serialize();
+
+        FormUtils.postToBasket(
+            null,
+            params,
+            url,
+            ConfirmationForm.handleFormSuccess,
+            ConfirmationForm.handleFormError
+        );
+    },
+
+    init: () => {
+        _form = document.getElementById('confirmation-form');
+
+        if (!ConfirmationForm.meetsRequirements()) {
+            ConfirmationForm.handleFormError('Update your browser');
+            return;
+        }
+
+        _form.addEventListener('submit', ConfirmationForm.subscribe, false);
+
+        // Look for a valid user token before rendering the page.
+        // If not found, redirect to /newsletter/recovery/.
+        return FormUtils.checkForUserToken().catch(
+            ConfirmationForm.redirectToRecoveryPage
+        );
+    }
+};
+
+export default ConfirmationForm;

media/static-bundles.json

@@ -606,6 +606,12 @@
       ],
       "name": "newsletter-firefox"
     },
+    {
+      "files": [
+        "css/newsletter/newsletter-firefox-confirm.scss"
+      ],
+      "name": "newsletter-firefox-confirm"
+    },
     {
       "files": [
         "css/mozorg/mpl-2-0.scss"
@@ -1362,6 +1368,12 @@
       ],
       "name": "newsletter-firefox-experiment"
     },
+    {
+      "files": [
+        "js/newsletter/confirm-init.es6.js"
+      ],
+      "name": "newsletter-firefox-confirm"
+    },
     {
       "files": [
         "js/firefox/features/features-article.es6.js"