diff --git a/.env-example b/.env-example index db16df378..2fc8d77f8 100644 --- 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 index 9e5cfbad6..e10adfdf9 100644 --- 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 index 4d8a04081..859ed16bd 100644 --- 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 (privacy policy)' + ), + ) + tcc_signup = BooleanField( + required=False, + label=mark_safe( + 'The Climate Coalition (privacy policy)' + ), + ) diff --git a/hub/management/commands/mailchimp_test.py b/hub/management/commands/mailchimp_test.py new file mode 100644 index 000000000..fe7ca91e1 --- /dev/null +++ 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 index 15ccaecb5..add7c17b2 100644 --- 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; + } +} \ No newline at end of file diff --git a/hub/static/css/_utilities.scss b/hub/static/css/_utilities.scss index 215c77386..284fc5dbc 100644 --- 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 index 88b79f6b5..7283bb177 100644 --- 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 = $('
' + response["errors"][k].join(", ") + '
' ) + el.after(error_el) + } + + if ("mailchimp" in response["errors"]) { + var error_el = $('There was a problem signing you up, please try again.
' ) + $form.before(error_el) + } + } + }); + }) }) diff --git a/hub/templates/hub/area.html b/hub/templates/hub/area.html index 5815e4ed1..a1833a251 100644 --- a/hub/templates/hub/area.html +++ b/hub/templates/hub/area.html @@ -675,18 +675,25 @@We’ll let you know when there’s new data we think you’ll be interested in, on the Local Intelligence Hub.
+Thanks for signing up!
+ ++ The Local Intelligence Hub brings together data from a number of public and private sources, under four categories: MP, Public opinion, Place, and Movement. +
+The Local Intelligence Hub brings together data from a number of public and private sources, under four categories: MP, Public opinion, Place, and Movement.
-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, please get in touch.
+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, please get in touch.
+