Get sign up component to look right (#2998)

* new signup component
* update to bannered-campaign-page to signups as option
* updated campaign/views.py to handle signup data (=>sqs/basket)

network-api/networkapi/campaign/views.py

@@ -36,7 +36,6 @@ def send_message(self, QueueUrl, MessageBody):
     'client': SQSProxy()
 }
 
-
 if settings.CRM_AWS_SQS_ACCESS_KEY_ID:
     crm_sqs['client'] = boto3.client(
         'sqs',
@@ -59,10 +58,11 @@ def signup_submission_view(request, pk):
     try:
         signup = Signup.objects.get(id=pk)
     except ObjectDoesNotExist:
-        return Response(
-            {'error': 'Invalid signup id'},
-            status=status.HTTP_400_BAD_REQUEST,
-        )
+        # Create a "default" Signup object, but without
+        # actually saving that object to the database,
+        # because we really just want to use it for getting
+        # the default newsletter to sign up for.
+        signup = Signup()
 
     return signup_submission(request, signup)
 
@@ -173,6 +173,7 @@ def send_to_sqs(sqs, queue_url, message, type='petition'):
         logger.info(f'Sending {type} message: {message}')
 
         if not sqs:
+            # TODO: can this still kick in now that we have an SQS proxy object?
             logger.info('Faking a success message (debug=true, sqs=nonexistent).')
             return Response({'message': 'success (faked)'}, 201)
 

network-api/networkapi/templates/pages/base.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">{% block socialMetadata %}{% endblock %}
     <meta name="google-site-verification" content="D7k-r3fHm-XfJ9E7T1uZ5aqHJG2mx-0uUZFeBUDN2lY">
+    <meta name="csrf-token" content="{{ csrf_token }}">
     <link rel="stylesheet" href="/_css/main.compiled.css">
     <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Nunito+Sans:400,300,700,300i">
     <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Zilla+Slab:300,400,600,700,300i">
@@ -32,23 +33,8 @@
       </div>
       {% block heroGuts %}{% endblock %}
       {% block content %}{% endblock %}
-      <footer class="mofo-footer">
-        <div class="container">
-          <ul class="list-unstyled footer-links row justify-content-center mb-0">
-            <li class="col-auto"><a class="footer-link-twitter" href="https://twitter.com/mozilla">Twitter</a></li>
-            <li class="col-auto"><a class="footer-link-github" href="https://www.github.com/mozilla/foundation.mozilla.org/">Github</a></li>
-            <li class="col-auto"><a class="footer-link-participation-guidelines" href="https://www.mozilla.org/about/governance/policies/participation/">Participation Guidelines</a></li>
-            <li class="col-auto"><a class="footer-link-cc-license" href="https://creativecommons.org/licenses/by/4.0">License</a></li>
-            <li class="col-auto"><a class="footer-link-legal" href="https://mozilla.org/en-US/about/legal/">Legal</a></li>
-            <li class="col-auto"><a class="footer-link-privacy" href="https://mozilla.org/en-US/privacy/websites/">Privacy</a></li>
-            <li class="col-auto"><a class="footer-link-donate" id="donate-footer-btn" href="https://donate.mozilla.org?utm_source=foundation.mozilla.org&amp;utm_medium=referral&amp;utm_content=footer" target="_blank" rel="noopener noreferrer">Donate</a></li>
-          </ul>
-          <div class="org-info mozilla">
-            <div class="logo-container"><a class="logo" href="https://mozilla.org"></a></div>
-            <p>Mozilla is a global non-profit dedicated to putting you in control of your online experience and shaping the future of the web for the public good. Visit us at <a href="https://mozilla.org">mozilla.org</a>.</p>
-          </div>
-        </div>
-      </footer>
+
+      {% include "partials/footer.html" %}
     </div>
     <script src="/_js/main.compiled.js"></script>
   </body>

network-api/networkapi/templates/partials/footer.html

@@ -0,0 +1,58 @@
+{% with wrapper_class="py-5" %}
+
+<div class="donate-banner {{wrapper_class}}">
+  <div class="container">
+    <div class="row">
+      <div class="col-12">
+        <h3 class="h3-heading dark-theme mb-0">We all love the Web. Join Mozilla in defending it.</h3>
+        <h4 class="h3-heading dark-theme mb-4">Let’s protect the world’s largest resource for future generations.</h4>
+        <div>
+          <a href="https://donate.mozilla.org?utm_source=foundation.mozilla.org&amp;utm_medium=referral&amp;utm_content=footer-cta" target="_blank" rel="noopener noreferrer" c class="btn btn-secondary dark-theme">Donate now</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<footer class="site-footer {{wrapper_class}}">
+  <div class="container">
+    <div class="row">
+      <div class="col-md-5">
+        <div class="join-us dark-theme mb-5" data-theme="dark-theme" data-layout="side-button"></div>
+        <div class="my-5">
+          <a class="logo" href="https://mozilla.org"><img src="/_images/mozilla-block-white.svg"></a>
+        </div>
+      </div>
+      <div class="col-md-6 offset-md-1">
+        <div class="row">
+          <div class="col-md-4">
+            <h5 class="h5-heading dark-theme">More about us</h5>
+            <ul class="d-flex">
+              <li class="mr-3"><a class="" href="https://twitter.com/mozilla"><img src="/_images/glyphs/twitter-dark-theme.svg" alt="Twitter"><span class="sr-only">Twitter</span></a></li>
+              <li class="mr-3"><a class="" href="https://www.instagram.com/mozilla/"><img src="/_images/glyphs/instagram-dark-theme.svg" alt="Instagram"><span class="sr-only">Instagram</span></a></li>
+              <li class="mr-3"><a class="" href="https://www.github.com/mozilla/foundation.mozilla.org/"><img src="/_images/glyphs/github-dark-theme.svg" alt="Github"><span class="sr-only">Github</span></a></li>
+            </ul>
+          </div>
+          <div class="col-md-8">
+            <ul class="link-list list-unstyled mb-0">
+              <li class="mb-2"><a id="donate-footer-btn" href="https://donate.mozilla.org/?utm_source=foundation.mozilla.org&utm_medium=referral&utm_content=footer" target="_blank" rel="noopener noreferrer" class="dark-theme">Donate</a></li>
+              <li class="mb-2"><a href="https://mozilla.org/en-US/about/legal/" class="dark-theme">Legal</a></li>
+              <li class="mb-2"><a href="https://creativecommons.org/licenses/by/4.0" class="dark-theme">License</a></li>
+              <li class="mb-2"><a href="https://www.mozilla.org/about/governance/policies/participation/" class="dark-theme">Participation Guidelines</a></li>
+              <li class="mb-2"><a href="https://mozilla.org/en-US/privacy/websites/" class="dark-theme">Privacy</a></li>
+            </ul>
+          </div>
+        </div>
+        <hr class="mt-3 mt-md-5" />
+        <div class="row">
+          <div class="col-12">
+            <p class="dark-theme">Mozilla is a global non-profit dedicated to putting you in control of your online experience and shaping the future of the web for the public good.</p>
+            <p class="dark-theme mb-0">Visit us at <a href="https://mozilla.org">mozilla.org</a></p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+{% endwith %}

network-api/networkapi/wagtailpages/migrations/0067_auto_20190410_1229.py

@@ -0,0 +1,26 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.11.20 on 2019-04-10 19:29
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailpages', '0066_auto_20190409_0906'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='banneredcampaignpage',
+            name='signup',
+            field=models.ForeignKey(blank=True, help_text='Choose an existing, or create a new, sign-up form', null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='bcpage', to='wagtailpages.Signup'),
+        ),
+        migrations.AlterField(
+            model_name='banneredcampaignpage',
+            name='cta',
+            field=models.ForeignKey(blank=True, help_text='Choose an existing, or create a new, pettition form', null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='bcpage', to='wagtailpages.Petition'),
+        ),
+    ]

network-api/networkapi/wagtailpages/models.py

@@ -481,12 +481,25 @@ class BanneredCampaignPage(PrimaryPage):
         blank=True,
         null=True,
         on_delete=models.SET_NULL,
-        help_text='Choose existing or create new sign-up form'
+        help_text='Choose an existing, or create a new, pettition form'
     )
 
-    content_panels = PrimaryPage.content_panels + [
-        SnippetChooserPanel('cta')
-    ]
+    signup = models.ForeignKey(
+        'Signup',
+        related_name='bcpage',
+        blank=True,
+        null=True,
+        on_delete=models.SET_NULL,
+        help_text='Choose an existing, or create a new, sign-up form'
+    )
+
+    panel_count = len(PrimaryPage.content_panels)
+    n = panel_count - 1
+
+    content_panels = PrimaryPage.content_panels[:n] + [
+        SnippetChooserPanel('cta'),
+        SnippetChooserPanel('signup'),
+    ] + PrimaryPage.content_panels[n:]
 
     subpage_types = [
         'BanneredCampaignPage',

network-api/networkapi/wagtailpages/templates/wagtailpages/bannered_campaign_page.html

@@ -23,3 +23,47 @@
     </div>
   </div>
 {% endblock %}
+
+The following block has been borrowed from the templates/tags/cta/petition.html file,
+rather than using the `cta` tag from our mini_site_tags collection, because the cta
+tag was written in the assumption that models would only ever have a single CTA field
+named "cta", which is an assumption that the bannered campaign page squarely violates.
+
+As such, the CTA tag needs to be refactored to take this into account, however this
+work should not be done at the same time as adding signup CTAs to the b.c. pages.
+
+
+{% block cta %}
+  {% if page.cta != None or page.signup != None %}
+  <div class="cta
+    {% if page.specific.narrowed_page_content == False %}
+      col-lg-4 offset-lg-1
+    {% else %}
+      col-lg-12
+    {% endif %}"
+  >
+    <div class="narrow-sticky-button-container hidden">
+      <a href="#cta-anchor" class="btn btn-primary d-block">TAKE ACTION</a>
+    </div>
+    <div class="sticky-cta">
+      <div id="cta-anchor">
+        <div class="mt-5 mt-md-0">
+          {% cta page %}
+
+          {% if page.signup %}
+            <div
+              class="join-us mb-5"
+              data-csrf-token="{{ csrf_token }}"
+              data-signup-id="{{ page.signup.id }}"
+              data-cta-header="{{ page.signup.header | escape }}"
+              data-cta-description="{{ page.signup.description | escape }}"
+              data-newsletter="{{ page.signup.newsletter }}">
+            </div>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+    <script src="https://c.shpg.org/352/sp.js"></script>
+  </div>
+  {% endif %}
+{% endblock %}

network-api/networkapi/wagtailpages/templates/wagtailpages/campaign_page.html

@@ -22,6 +22,8 @@
       <div class="cms
         {% if page.cta and page.specific.narrowed_page_content == False %}
           col-lg-7
+        {% elif page.signup and page.specific.narrowed_page_content == False %}
+          col-lg-7
         {% else %}
           col-12
         {% endif %}"
@@ -53,6 +55,7 @@ <h1>{{ block.value }}</h1>
         {% endblock %}
       </div>
 
+      {% block cta %}
       {% if page.cta != None %}
       <div class="cta
         {% if page.specific.narrowed_page_content == False %}
@@ -72,6 +75,8 @@ <h1>{{ block.value }}</h1>
         <script src="https://c.shpg.org/352/sp.js"></script>
       </div>
       {% endif %}
+      {% endblock %}
+
       <div class="cms
         {% if page.cta and page.specific.narrowed_page_content == False %}
           col-lg-7

network-api/networkapi/wagtailpages/templates/wagtailpages/homepage.html

@@ -159,5 +159,4 @@ <h3>We want to give users the knowledge and the power to make informed decisions
 </div>
 </div>
 
-<div class="join-us full-width d-flex justify-content-center"></div>
 {% endblock %}

network-api/networkapi/wagtailpages/templates/wagtailpages/primary_page.html

@@ -30,7 +30,3 @@ <h1>{{ block.value }}</h1>
     </div>
   </div>
 {% endblock %}
-
-{% block postContent %}
-  <div class="join-us full-width d-flex justify-content-center"></div>
-{% endblock %}

network-api/networkapi/wagtailpages/templates/wagtailpages/tags/cta/signup.html

@@ -1,5 +1,5 @@
 <div
-	class="join-us p-2 full-width mb-5"
+  class="join-us mb-5"
 	data-cta-header="{{ cta.header | escape }}"
 	data-cta-description="{{ cta.description | escape }}"
 	data-newsletter="{{ cta.newsletter }}">