Merge branch '377-mailing-list-signup' into staging

mysociety · Mar 27, 2024 · f44c32e · f44c32e
2 parents 754a8b5 + fae35ac
commit f44c32e
Show file tree

Hide file tree

Showing 17 changed files with 433 additions and 16 deletions.
diff --git a/.env-example b/.env-example
@@ -4,3 +4,9 @@ MAPIT_URL="https://mapit.mysociety.org/"
 MAPIT_API_KEY=""
 GOOGLE_ANALYTICS=""
 GOOGLE_SITE_VERIFICATION=""
+MAILCHIMP_MYSOC_KEY=""
+MAILCHIMP_MYSOC_SERVER_PREFIX=""
+MAILCHIMP_MYSOC_LIST_ID=""
+MAILCHIMP_TCC_KEY=""
+MAILCHIMP_TCC_SERVER_PREFIX=""
+MAILCHIMP_TCC_LIST_ID=""
diff --git a/conf/env-example b/conf/env-example
@@ -1,3 +1,11 @@
 SECRET_KEY="secr3t-k3y"
 GOOGLE_ANALYTICS=""
 GOOGLE_SITE_VERIFICATION=""
+MAILCHIMP_MYSOC_KEY=""
+MAILCHIMP_MYSOC_SERVER_PREFIX=""
+MAILCHIMP_MYSOC_LIST_ID=""
+MAILCHIMP_MYSOC_DATA_UPDATE_TAG=""
+MAILCHIMP_MYSOC_CLIMATE_INTEREST=""
+MAILCHIMP_TCC_KEY=""
+MAILCHIMP_TCC_SERVER_PREFIX=""
+MAILCHIMP_TCC_LIST_ID=""
diff --git a/hub/forms.py b/hub/forms.py
@@ -8,6 +8,7 @@
     BooleanField,
     CharField,
     EmailField,
+    Form,
     ModelForm,
     modelformset_factory,
 )
@@ -158,3 +159,20 @@ def confirm_login_allowed(self, user):
                     self.error_messages["inactive"],
                     code="inactive",
                 )
+
+
+class MailingListSignupForm(Form):
+    email = EmailField(label="Email")
+    full_name = CharField()
+    mysoc_signup = BooleanField(
+        required=False,
+        label=mark_safe(
+            'mySociety <a href="https://www.mysociety.org/privacy/">(privacy policy)</a>'
+        ),
+    )
+    tcc_signup = BooleanField(
+        required=False,
+        label=mark_safe(
+            'The Climate Coalition <a href="https://www.theclimatecoalition.org/privacy-policy">(privacy policy)</a>'
+        ),
+    )
diff --git a/hub/management/commands/mailchimp_test.py b/hub/management/commands/mailchimp_test.py
@@ -0,0 +1,21 @@
+from django.conf import settings
+from django.core.management.base import BaseCommand
+
+import mailchimp_marketing as MailchimpMarketing
+from mailchimp_marketing.api_client import ApiClientError
+
+
+class Command(BaseCommand):
+    def handle(self, *args, **kwargs):
+        try:
+            client = MailchimpMarketing.Client()
+            client.set_config(
+                {
+                    "api_key": settings.MAILCHIMP_MYSOC_KEY,
+                    "server": settings.MAILCHIMP_MYSOC_SERVER_PREFIX,
+                }
+            )
+            response = client.ping.get()
+            print(response)
+        except ApiClientError as error:
+            print(error)
diff --git a/hub/static/css/_area.scss b/hub/static/css/_area.scss
@@ -181,3 +181,17 @@
 [data-copy-text][data-copied] {
     animation: 500ms linear success-ping;
 }
+
+// Mailing list signup on area page
+// TODO: This is super hacky, maybe we should make a component for this?
+.row > * + * > .mailing-list-signup {
+    margin-top: map-get($spacers, 4);
+    padding-top: map-get($spacers, 4);
+    border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+
+    @include media-breakpoint-up('lg') {
+        margin-top: 0;
+        padding-top: 0;
+        border-top: none;
+    }
+}
diff --git a/hub/static/css/_utilities.scss b/hub/static/css/_utilities.scss
@@ -59,6 +59,22 @@ $utilities: map-merge(
                 ),
             ),
         ),
+        "max-width": map-merge(
+            map-get($utilities, "max-width"),
+            (
+                values: (
+                    50: 50%,
+                    100: 100%,
+                    10rem: 10rem, // 160px, 3-6 words
+                    20rem: 20rem, // 320px, 6-9 words
+                    30rem: 30rem, // 480px, 9-12 words
+                    35rem: 35rem,
+                    40rem: 40rem, // 640px, 12-15 words
+                    45rem: 45rem,
+                    50rem: 50rem,
+                ),
+            ),
+        ),
         "position": map-merge(
             map-get($utilities, "position"),
             (

diff --git a/hub/static/js/home.js b/hub/static/js/home.js
@@ -2,6 +2,42 @@ import $ from 'jquery/dist/jquery.slim'
 import Collapse from 'bootstrap/js/dist/collapse'
 import trackEvent from './analytics.esm.js'
 
+async function mailingListSignup($form) {
+    const response = await fetch($form.attr('action'), {
+        method: $form.attr('method') || 'GET',
+        mode: 'cors',
+        credentials: 'same-origin',
+        body: $form.serialize(),
+        headers: {
+            "Content-Type": 'application/x-www-form-urlencoded',
+            "Accept": 'application/json; charset=utf-8',
+        },
+    })
+    return response.json()
+}
+
+var setUpCollapsableMailingListForm = function() {
+    var $form = $(this);
+    var selectors = '.js-mailing-list-name, .js-mailing-list-extras';
+    var trigger = '.js-mailing-list-email input#email';
+    var instances = [];
+
+    var updateUI = function() {
+        var emailEntered = $(trigger).val() !== '';
+        $.each(instances, function(i, instance){
+            emailEntered ? instance.show() : instance.hide();
+        });
+    };
+
+    $(selectors, $form).addClass('collapse').each(function(){
+        instances.push(new Collapse(this, { toggle: false }));
+    });
+    $(trigger, $form).on('keyup change', function(){
+        updateUI();
+    });
+    updateUI();
+};
+
 $(function(){
     if( 'geolocation' in navigator ) {
         $('.js-geolocate').removeClass('d-none');
@@ -85,4 +121,36 @@ $(function(){
             window.location.href = href;
         });
     })
+
+    $('.js-collapsable-mailing-list-form').each(setUpCollapsableMailingListForm);
+
+    $('.js-mailing-list-signup').on('submit', function(e){
+        e.preventDefault();
+        var $form = $(this);
+        $('.invalid-feedback').remove()
+        mailingListSignup($form).then(function(response){
+            if (response['response'] == 'ok') {
+                $form.hide()
+                $('.js-mailing-list-success').removeClass('d-none')
+            } else {
+                console.log(response)
+                for (var k in response["errors"]) {
+                    var id = '#' + k
+                    var el = $(id)
+                    el.addClass('is-invalid')
+                    var error_el = $('<div>')
+                    error_el.addClass('invalid-feedback d-block fs-6 mt-2')
+                    error_el.html( '<p>' + response["errors"][k].join(", ") + '</p>' )
+                    el.after(error_el)
+                }
+
+                if ("mailchimp" in response["errors"]) {
+                    var error_el = $('<div>')
+                    error_el.addClass('invalid-feedback d-block fs-6 mt-2')
+                    error_el.html( '<p>There was a problem signing you up, please try again.</p>' )
+                    $form.before(error_el)
+                }
+            }
+        });
+    })
 })
diff --git a/hub/templates/hub/area.html b/hub/templates/hub/area.html
@@ -675,18 +675,25 @@ <h3 class="h5">{{ dataset.label }}</h3>
     </div>
 </div>
 
-{% if not user.is_authenticated %}
-<div class="py-4 py-lg-5 bg-yellow-100 border-top d-print-none">
+<aside class="py-4 py-lg-5 bg-yellow-100 border-top d-print-none">
     <div class="container">
-        <aside class="d-flex align-items-center">
-            {% include 'hub/includes/icons/tcc-heart.html' with width="3em" height="3em" classes="me-3 me-lg-4 flex-shrink-0 flex-grow-0" %}
-            <div>
-                <h2 class="h4">Climate Coalition member?</h2>
-                <p class="mb-0"><a href="{% url 'login' %}">Sign in</a> or <a href="{% url 'signup' %}">request an account</a> to access exclusive members-only MRP and local movement data.</p>
+        <div class="row">
+          {% if not user.is_authenticated %}
+            <div class="col-lg-5 me-lg-auto">
+                <div class="d-flex align-items-center">
+                    {% include 'hub/includes/icons/tcc-heart.html' with width="3em" height="3em" classes="me-3 me-lg-4 flex-shrink-0 flex-grow-0" %}
+                    <div>
+                        <h2 class="h4">Climate Coalition member?</h2>
+                        <p class="mb-0"><a href="{% url 'login' %}">Sign in</a> or <a href="{% url 'signup' %}">request an account</a> to access exclusive members-only MRP and local movement data.</p>
+                    </div>
+                </div>
             </div>
-        </aside>
+          {% endif %}
+            <div class="col-lg-6">
+                {% include 'hub/includes/mailing-list-form.html' with classes="js-collapsable-mailing-list-form" %}
+            </div>
+        </div>
     </div>
-</div>
-{% endif %}
+</aside>
 
 {% endblock %}
diff --git a/hub/templates/hub/includes/mailing-list-form.html b/hub/templates/hub/includes/mailing-list-form.html
@@ -0,0 +1,48 @@
+<form class="mailing-list-signup js-mailing-list-signup {{ classes }}" method="POST" action="{% url 'mailing_list_signup' %}">
+    {% csrf_token %}
+    <h2 class="h4 mt-0">Want to know when we add new data?</h2>
+    <fieldset class="mw-30rem">
+        <legend class="float-none mb-0">Tell us your email address and we’ll notify you when we add new data to the Local Intelligence Hub.</legend>
+        <div class="mt-3 js-mailing-list-email">
+            <label class="form-label" for="email">Email address</label>
+            <input type="email" name="email" id="email" class="form-control" autocomplete="email" spellcheck="false">
+          {% if form.errors.email %}
+            <div class="invalid-feedback d-block fs-6 mt-2 mb-n3">
+                {{ form.errors.email }}
+            </div>
+          {% endif %}
+        </div>
+        <div class="mt-3 js-mailing-list-name">
+            <label class="form-label" for="full_name">Name</label>
+            <input type="text" name="full_name" id="full_name" class="form-control">
+          {% if form.errors.full_name %}
+            <div class="invalid-feedback d-block fs-6 mt-2 mb-n3">
+                {{ form.errors.full_name }}
+            </div>
+          {% endif %}
+        </div>
+    </fieldset>
+    <fieldset class="mt-4 js-mailing-list-extras mw-30rem">
+        <legend>You can also, optionally, join our newsletters for more inspiration on data, democracy, and climate action:</legend>
+        <div class="form-check">
+            <input class="form-check-input" type="checkbox" value="yes" name="mysoc_signup" id="mysoc_signup">
+            <label class="form-check-label" for="mysoc_signup">
+                mySociety newsletter
+                <a href="https://www.mysociety.org/privacy/" target="_blank" title="Opens in a new window">(privacy policy)</a>
+            </label>
+        </div>
+        <div class="form-check mt-2">
+            <input class="form-check-input" type="checkbox" value="yes" name="tcc_signup" id="tcc_signup">
+            <label class="form-check-label" for="tcc_signup">
+                The Climate Coalition  newsletter
+                <a href="https://www.theclimatecoalition.org/privacy-policy" target="_blank" title="Opens in a new window">(privacy policy)</a>
+            </label>
+        </div>
+    </fieldset>
+    <button type="submit" class="btn btn-primary mt-4">Subscribe</button>
+</form>
+
+<div class="d-none js-mailing-list-success">
+    <h2 class="h4 mt-0">Thanks for signing up!</h2>
+    <p class="mw-30rem">We’ll let you know when there’s new data we think you’ll be interested in, on the Local Intelligence Hub.</p>
+</div>
diff --git a/hub/templates/hub/sign_up.html b/hub/templates/hub/sign_up.html
@@ -0,0 +1,13 @@
+{% extends "hub/base.html" %}
+
+{% block content %}
+
+<div class="py-4 py-lg-5">
+    <div class="container">
+
+        {% include 'hub/includes/mailing-list-form.html' %}
+
+    </div>
+</div>
+
+{% endblock %}
diff --git a/hub/templates/hub/sign_up_success.html b/hub/templates/hub/sign_up_success.html
@@ -0,0 +1,18 @@
+{% extends "hub/base.html" %}
+
+{% block content %}
+
+<div class="py-4 py-lg-5">
+    <div class="container">
+
+        <div class="readable">
+            <h1 class="mb-4">Signed up</h1>
+
+            <p>Thanks for signing up!</p>
+
+        </div>
+
+    </div>
+</div>
+
+{% endblock %}
diff --git a/hub/templates/hub/sources.html b/hub/templates/hub/sources.html
@@ -3,14 +3,30 @@
 {% block content %}
 
 <div class="py-4 py-lg-5">
-    <div class="container pb-5">
 
+    <div class="container pb-5">
         <h1>Datasets and data sources</h1>
+        <p class="readable mt-4 mb-0">
+            The Local Intelligence Hub brings together data from a number of public and private sources, under four categories: <a href="#mp">MP</a>, <a href="#opinion">Public opinion</a>, <a href="#place">Place</a>, and <a href="#movement">Movement</a>.
+        </p>
+    </div>
 
-        <div class="readable mt-4">
-            <p>The Local Intelligence Hub brings together data from a number of public and private sources, under four categories: <a href="#mp">MP</a>, <a href="#opinion">Public opinion</a>, <a href="#place">Place</a>, and <a href="#movement">Movement</a>.</p>
-            <p>We are constantly incorporating new data into the Local Intelligence Hub, for the benefit of the entire climate and nature movement. If your organisation has data to contribute, <a href="{% url 'contact' %}">please get in touch</a>.</p>
+    <div class="bg-gray-100 border-top border-bottom py-5">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-5 col-xl-6">
+                    {% include 'hub/includes/mailing-list-form.html' with classes="js-collapsable-mailing-list-form" %}
+                </div>
+                <div class="col-md-5 mt-5 mt-md-0 mx-md-auto">
+                    <h2 class="h4 mt-0">Got new data to contribute?</h2>
+                    <p>We are constantly incorporating new data into the Local Intelligence Hub, for the benefit of the entire climate and nature movement.</p>
+                    <p class="mb-0">If your organisation has data to contribute, <a href="{% url 'contact' %}">please get in touch</a>.</p>
+                </div>
+            </div>
         </div>
+    </div>
+
+    <div class="container pb-5">
 
       {% for slug, category in categories.items %}
         <h2 class="mt-5 text-primary" id="{{ slug }}">{{ category.label }}</h2>