Add stripe donate form

- Copies over approach from mysociety.org
- Requires new recapacha keys in config
- Create new stub pages for thanks/failed in twfy.

classes/Renderer/Markdown.php

@@ -8,6 +8,15 @@
  * Use for converting markdown into help pages.
  */
 
+
+function render_php($template_file)
+{
+    $path = INCLUDESPATH . 'easyparliament/templates/html/' . $template_file . '.php';
+    ob_start();
+    include($path);
+    return ob_get_clean();
+}
+
 class Markdown
 {
     public function markdown_document($this_page, $show_menu = true){
@@ -39,10 +48,16 @@ public function markdown_document($this_page, $show_menu = true){
         // Create new panel when horizontal line used
         $html = preg_replace('/<hr \/>/i', '</div><div class="panel">', $html);
 
+        // render donate box
+        if (strpos($html, '{{ donate_box }}') !== false) {
+            $html = str_replace('{{ donate_box }}', render_php('donate/_stripe_donate'), $html);
+        }
+
         \MySociety\TheyWorkForYou\Renderer::output('static/markdown_template', array(
             'html' => $html,
             'this_page' => $this_page,
             'page_title' => $title,
+            'show_menu' => $show_menu,
         ));
 
     }

conf/general-example

@@ -171,6 +171,11 @@ define('OPTION_PHP_DEBUG_LEVEL', 0);
 define('FACEBOOK_APP_ID', '');
 define('FACEBOOK_APP_SECRET', '');
 
+define('OPTION_RECAPTCHA_SITE_KEY', '');
+define('OPTION_RECAPTCHA_SECRET', '');
+define('STRIPE_DONATE_PUBLIC_KEY', '');
+define('STRIPE_DONATE_SECRET_KEY', '');
+
 define('STRIPE_PUBLIC_KEY', '');
 define('STRIPE_SECRET_KEY', '');
 define('STRIPE_ENDPOINT_SECRET', '');

markdown/support-us-failed.md

@@ -0,0 +1,5 @@
+# Something went wrong with your donation
+
+If you’d like to carry on with your donation, [please try again](/support-us/).
+
+Or [return to TheyWorkForYou](/). 

markdown/support-us-thanks.md

@@ -0,0 +1,7 @@
+# Thank you for supporting TheyWorkForYou and mySociety
+
+Working with people across the country, we can make how British politics works more understandable and transparent, and empower people working to make better decisions. We want to be a lever, that we operate on behalf of our fellow citizens, to shift how politics works.
+
+Your support is about helping us rise to meet the challenges we face, to make TheyWorkForYou and our other services equal to the challenges of the next twenty years.
+
+We’ll [put your donation to good use](/support-us/#why-does-mysociety-need-donations-for-these-sites)- thank you for your help.

www/docs/js/main.js

@@ -358,3 +358,157 @@ function trackLinkClick(link, category, name, value) {
     document.location.href = link.href;
   })
 }
+
+/* Donate page */
+
+function fullname_show(focus){
+  $('.donate-fullname').slideDown(100, function(){
+    if (focus) {
+      $('.donate-fullname input').focus();
+    }
+  });
+}
+
+function fullname_hide(){
+  $('.donate-fullname').slideUp(100);
+}
+
+function fullname_toggle(test, focus){
+  test ? fullname_show(focus) : fullname_hide();
+}
+
+function othervalue_show(focus){
+  $('.how-much-other-value').slideDown(100, function(){
+    $('.how-much-other-value input').prop("disabled", false);
+    if (focus) {
+      $('.how-much-other-value input').focus();
+    }
+  });
+}
+
+function othervalue_hide(){
+  $('.how-much-other-value').slideUp(100, function(){
+    $('.how-much-other-value input').prop("disabled", true);
+  });
+}
+
+function othervalue_toggle(test, focus){
+  test ? othervalue_show(focus) : othervalue_hide();
+}
+
+function amounts_annually(){
+  $('.donate-annually-amount').show();
+  $('.donate-monthly-amount').hide();
+  $('.donate-one-off-amount').hide();
+}
+
+function amounts_monthly(){
+  $('.donate-annually-amount').hide();
+  $('.donate-monthly-amount').show();
+  $('.donate-one-off-amount').hide();
+}
+
+function amounts_oneoff(){
+  $('.donate-annually-amount').hide();
+  $('.donate-monthly-amount').hide();
+  $('.donate-one-off-amount').show();
+}
+
+function wrap_error($message){
+  return '<div class="donate-form__error-wrapper"><p class="donate-form__error">' + $message + '</p></div>';
+}
+
+$(function() {
+
+  $('#how-often-annually').click(function() {
+    var defaultValue = $(this).data('default-amount');
+    $('#how-much-annually-' + defaultValue).prop('checked', true);
+    amounts_annually();
+    othervalue_hide();
+  });
+  $('#how-often-monthly').click(function() {
+    var defaultValue = $(this).data('default-amount');
+    $('#how-much-monthly-' + defaultValue).prop('checked', true);
+    amounts_monthly();
+    othervalue_hide();
+  });
+  $('#how-often-once').click(function() {
+    var defaultValue = $(this).data('default-amount');
+    $('#how-much-one-off-' + defaultValue).prop('checked', true);
+    amounts_oneoff();
+    othervalue_hide();
+  });
+
+  $('#gift-aid-yes').click(function(){
+    fullname_toggle($('#gift-aid-yes').is(':checked'), true);
+  });
+  fullname_toggle($('#gift-aid-yes').is(':checked'));
+
+  $('[id^=how-much-]').click(function(){
+    othervalue_toggle($('#how-much-other').is(':checked'), true);
+  });
+  othervalue_toggle($('#how-much-other').is(':checked'));
+
+  $('#donate_button').click(function(e) {
+    e.preventDefault();
+    var giftaid = $('input[name=gift-aid]:checked').val();
+    var howoften = $('input[name=how-often]:checked').val();
+    var amount = $('input[name=how-much]:checked').val();
+    var contact_permission = $('input[name=contact_permission]:checked').val();
+    var full_name = $('input[name=full_name]').val();
+
+    if (amount == 'other') {
+      amount = $('input[name=how-much-other]').val();
+    }
+    $('.donate-form__error').remove();
+    if (!amount || !howoften) {
+      $(this).parent().before(wrap_error('Please select an amount to donate.'));
+      return;
+    }
+    if (!contact_permission) {
+      $(this).parent().before(wrap_error('Please tell us if we can contact you about our work (or not!).'));
+      return;
+    }
+    if (giftaid == 'Yes' && !full_name) {
+      $(this).parent().before(wrap_error('Please enter your full name for gift aid.'));
+      return;
+    }
+
+    var submitPaymentForm = function(){
+        grecaptcha.execute();
+    };
+
+    if (!window.analytics) {
+      return submitPaymentForm();
+    }
+
+    window.analytics.trackEvent(
+      "donate_form_submit", {"frequency": howoften, "value": amount }
+      ).done(submitPaymentForm);
+    });
+
+  });
+
+  function onDonateError(message) {
+    var displayError = document.getElementsByClassName('donate-form__error-wrapper')[0];
+    document.getElementById('spinner').style.display = 'none';
+    displayError.innerHTML = '<p class="donate-form__error">' + message + '</p>';
+  }
+
+  function onDonatePass(token) {
+    var data = $(document.donation_form).serialize();
+    document.getElementById('spinner').style.display = 'inline-block';
+    $.post('/support-us/?stripe=1', data, 'json').then(function(result) {
+      if (result.error) {
+        return onDonateError(result.error);
+      }
+      stripe.redirectToCheckout({
+        sessionId: result.id
+      }).then(function(result) {
+        if (result.error) {
+          onDonateError(result.error.message);
+        }
+      });
+    });
+  }
+

www/docs/style/sass/_twfy-mixins.scss

@@ -272,6 +272,14 @@ $weight_bold: 700;
   }
 }
 
+.button--red {
+    background-color: red;
+    &:hover,
+    &:focus {
+        background-color: darken($colour_pale_red, 10%);
+    }
+  }
+
 .button--disabled,
 .button--disabled:hover {
     background-color: lighten($colour_off_white, 3%);

www/docs/style/sass/app.scss

@@ -266,5 +266,6 @@ form {
 @import "parts/policies";
 @import "parts/regional-headers";
 @import "parts/toc";
+@import "parts/donate_form";
 
 @import "print";

www/docs/style/sass/parts/_donate_form.scss

@@ -0,0 +1,87 @@
+.donate-form {
+  label {
+    font-size: 1em;
+    color: inherit;
+  }
+
+  input#full-name {
+    max-width: 25em;
+    margin-top: 1em;
+  }
+}
+
+.donate-form__error-wrapper {
+  color: #e04b4b;
+}
+
+.donate-form .fat-radio-buttons,
+.how-much-other-value,
+.donate-giftaid__label,
+.donate-fullname {
+  margin: 1em 0 1.5em 0;
+}
+
+.fat-radio-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1em;
+
+  .inline-radio-label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    padding: 0.75em 1em;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+
+    input {
+      margin-bottom: 0;
+      margin-right: 0.5em;
+    }
+  }
+
+  .radio-label-large {
+    font-size: 1.75rem;
+    font-weight: 600;
+  }
+}
+
+.how-much-other-value {
+  .row.collapse {
+    max-width: 10em;
+    margin: 1em 0 0 0;
+  }
+
+  input {
+    margin-bottom: 0;
+  }
+}
+
+.donate-giftaid__label {
+  position: relative;
+  padding: 1em 1em 1em 2.5em;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+
+  input {
+    position: absolute;
+    top: 1.2em;
+    left: 1.2em;
+  }
+
+  small {
+    display: block;
+    line-height: 1.3;
+    margin-top: 0.5em;
+    font-size: 0.75em;
+    text-transform: none;
+  }
+}
+
+.donate-submit {
+  p small {
+    color: #666;
+    font-size: 0.75em;
+  }
+}

www/docs/style/sass/parts/_toc.scss

@@ -9,6 +9,7 @@ $toc-page-breakpoint: 40em; // 640px
         &:first-child {
             position: fixed;
             bottom: 0;
+            z-index: 1;
             width: 100%;
             background: $body-bg;
             box-shadow: 0 0 1em rgba(0, 0, 0, 0.2);

www/docs/support-us/failed.php

@@ -0,0 +1,8 @@
+<?php
+include_once '../../includes/easyparliament/init.php';
+
+use MySociety\TheyWorkForYou\Renderer\Markdown;
+
+$markdown = new Markdown;
+$markdown->markdown_document('support-us-failed', false);
+?>

www/docs/support-us/index.php

@@ -1,5 +1,12 @@
 <?php
 include_once '../../includes/easyparliament/init.php';
+include_once '../../includes/easyparliament/helper-donate.php';
+
+// Run the stripe session if the stripe parameter is set
+check_for_stripe_submission(
+    "https://www.theyworkforyou.com/support-us/thanks",
+    "https://www.theyworkforyou.com/support-us/failed"
+);
 
 use MySociety\TheyWorkForYou\Renderer\Markdown;
 

www/docs/support-us/thanks.php

@@ -0,0 +1,8 @@
+<?php
+include_once '../../includes/easyparliament/init.php';
+
+use MySociety\TheyWorkForYou\Renderer\Markdown;
+
+$markdown = new Markdown;
+$markdown->markdown_document('support-us-thanks', false);
+?>