Moving donations into its own page

* Add /donate page * donate webpack entry * changing /?donate and .js-donate triggers to redirect to /donate
debtcollective · Dec 22, 2018 · a8c6229 · a8c6229
1 parent d3de0c3
commit a8c6229
Show file tree

Hide file tree

Showing 18 changed files with 226 additions and 63 deletions.
diff --git a/controllers/HomeController.js b/controllers/HomeController.js
@@ -17,7 +17,7 @@ const stripeClient = stripe(stripePrivateKey);
 const HomeController = Class('HomeController').inherits(BaseController)({
   prototype: {
     donate(req, res) {
-      res.redirect('/?donate');
+      res.render('donate/index.pug');
     },
 
     donation(req, res) {

diff --git a/public/images/donate/powered_by_stripe_dark@2x.png b/public/images/donate/powered_by_stripe_dark@2x.png
diff --git a/src/javascripts/_entries/donate/index.js b/src/javascripts/_entries/donate/index.js
@@ -0,0 +1,12 @@
+import DonationFlow from '../../components/DonationFlow';
+
+class ViewDonateIndex {
+  constructor() {
+    this.donationFlow = new DonationFlow({
+      name: 'donationFlow',
+      element: document.querySelector('[data-component-donationform]'),
+    });
+  }
+}
+
+window.ViewDonateIndex = ViewDonateIndex;
diff --git a/src/javascripts/components/Common.js b/src/javascripts/components/Common.js
@@ -1,7 +1,5 @@
 import Widget from '../lib/widget';
 import Alert from '../components/Alert';
-import Modal from '../components/Modal';
-import DonationFlow from '../components/DonationFlow'; // rename: DonationFlowForm
 import currentUser from '../lib/currentUser';
 
 export default class Common extends Widget {
@@ -22,40 +20,5 @@ export default class Common extends Widget {
         );
       });
     }
-
-    // DonationFlow modal
-    const donationFlowModal = document.querySelector('.DonationFlow');
-
-    if (!donationFlowModal) {
-      return;
-    }
-
-    this.appendChild(
-      new Modal({
-        name: 'donationFlowModal',
-        element: donationFlowModal,
-      }),
-    ).appendChild(
-      new DonationFlow({
-        name: 'donationFlow',
-        element: donationFlowModal.querySelector('[data-component-donationform]'),
-      }),
-    );
-
-    this.donationFlowModal.bind('activate', () => {
-      this.donationFlowModal.donationFlow.reset();
-    });
-
-    // Activate DonationFlow triggers
-    Array.prototype.slice.call(document.querySelectorAll('.js-donate')).forEach(trigger =>
-      trigger.addEventListener('click', ev => {
-        ev.preventDefault();
-        this.donationFlowModal.activate();
-      }),
-    );
-
-    if (window.location.search.includes('donate')) {
-      this.donationFlowModal.activate();
-    }
   }
 }
diff --git a/src/javascripts/components/DonationFlow.js b/src/javascripts/components/DonationFlow.js
@@ -1,15 +1,16 @@
 /* eslint-disable max-len */
-/* global Checkit */
+/* global Stripe */
+
 import Widget from '../lib/widget';
 import { postStripePayment } from '../lib/api';
 
-/* global Stripe */
-
 const AMOUNT_PRESETS = [1000, 2000, 3000, 5000, 10000, 25000];
 
 const FUND_GENERAL = 'FUND_GENERAL';
 const FUND_STRIKE = 'FUND_STRIKE';
 
+const VALID_EMAIL_REGEX = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+
 const PAGE_DONATE = 'PAGE_DONATE';
 const PAGE_PAYMENT = 'PAGE_PAYMENT';
 const PAGE_SUCCESS = 'PAGE_SUCCESS';
@@ -223,10 +224,7 @@ export default class DonationFlow extends Widget {
     }
 
     // Data: Credit Card Inputs
-    const emailIsValid = Checkit.checkSync('email', this.sectionPaymentInputEmailEl.value, [
-      'required',
-      'email',
-    ])[1];
+    const emailIsValid = VALID_EMAIL_REGEX.test(this.sectionPaymentInputEmailEl.value);
     const numberIsValid = Stripe.card.validateCardNumber(this.sectionPaymentInputNumberEl.value);
     const expiryIsValid = Stripe.card.validateExpiry(this.sectionPaymentInputExpEl.value);
     const cvcIsValid = Stripe.card.validateCVC(this.sectionPaymentInputCvcEl.value);

diff --git a/src/javascripts/donate.js b/src/javascripts/donate.js
@@ -0,0 +1 @@
+require('./_entries/donate');
diff --git a/src/stylesheets/components/DonationFlow.css b/src/stylesheets/components/DonationFlow.css
@@ -182,6 +182,12 @@ section.Payment .flex div:first-child .PaymentMethod {
   margin-right: 30px;
 }
 
+.DonationForm {
+  display: flex;
+  align-items: center;
+  min-height: 500px;
+}
+
 .DonationForm .btn-back {
   cursor: pointer;
 }
@@ -195,22 +201,15 @@ section.Payment .flex div:first-child .PaymentMethod {
 * Success section
 */
 
+section.Error,
 section.Success {
   position: relative;
-  padding-top: 200px;
 }
 
 /**
 * Error section
 */
 
-section.Error {
-  position: relative;
-  width: 380px;
-  height: 380px;
-  padding-top: 120px;
-}
-
 section.Error .DonationResponse {
   padding: 0 10px;
 }

diff --git a/views/dispute-tools/index.pug b/views/dispute-tools/index.pug
@@ -76,7 +76,7 @@ block content
           h2.pb3 What happens <br/>after I file?
           p.pb3 The Debt Collective will send hard copies of your dispute if you cannot mail the forms yourself. They will be sent to all relevant parties, including the Department of Education, loan servicers, collectors, and the credit reporting agencies. You will also receive a copy by email.
           p.pb3 You will receive notifications asking you to provide information about any response you receive from the collector.
-          p.pb3 #[a.js-donate(href='#') Make a donation] to the Debt Collective General Fund to help more people dispute debts of all kinds.
+          p.pb3 #[a(href='/donate') Make a donation] to the Debt Collective General Fund to help more people dispute debts of all kinds.
           .my2(style="width: 23px; height: 3px; background-color: #d8d8d8;")
           p.-caption.-fw-600 The tools we provide here are not the only ways you can dispute your debt.
           p.-caption.-fw-500.-neutral-mid For a complete list of discharge options, go here: #[a(href="https://studentaid.ed.gov/sa/repay-loans/forgiveness-cancellation" target="_blank" rel="noopener noreferrer") https://studentaid.ed.gov/sa/repay-loans/forgiveness-cancellation]

diff --git a/views/donate/index.pug b/views/donate/index.pug
@@ -0,0 +1,128 @@
+extends ../layouts/donate.pug
+
+block title
+  | Donate — The Debt Collective
+
+block content
+  .DonationForm.max-width-1.mx-auto.py3(data-component-donationform)
+    section.Donate
+      h3.tight Donate
+      .DonateOptions
+        .DonateOption.active(data-fund-option-general)
+          h4 Donate to the Debt Collective General Fund
+          small Your donation will help us grow our organization, provide services to people in debt, and support the ongoing efforts of our organizing team.
+        .DonateOption(data-fund-option-strike)
+          h4 Donate to the Strike Fund
+          small Your donation will be used to support debt strikers as they fight back against lenders and help build a national debtors movement.
+      .AmountPicker
+        .clearfix
+          .col.col-4.pb1.pr1
+            .AmountOption.active(data-donation-amount="1000") $10
+          .col.col-4.pb1.pl1.pr1
+            .AmountOption(data-donation-amount="2000") $20
+          .col.col-4.pb1.pl1
+            .AmountOption(data-donation-amount="3000") $30
+          .col.col-4.pt1.pr1
+            .AmountOption(data-donation-amount="5000") $50
+          .col.col-4.pt1.pl1.pr1
+            .AmountOption(data-donation-amount="10000") $100
+          .col.col-4.pt1.pl1
+            .AmountOption(data-donation-amount="25000") $250
+        .clearfix.my3
+          .col.sm-col-3.col-12.p1.right-align.xs-left-align.-fw-500 Amount
+          .col.sm-col-9.col-12.px1
+            input.form-control.-fw(type="text" name="custom-amount" value="10.00" data-donation-custom-input)
+            p.-on-error.-danger.-caption.-fw-500.mt1 ▲ Invalid Amount
+        .clearfix
+          .col-12
+            button.-k-btn.btn-primary.-fw.-fw-600(type="submit") Donate
+    section.Payment(style="display: none")
+      h3.tight Donate
+      .pb2
+        img(width="150" src="/images/donate/powered_by_stripe_dark@2x.png")
+      .PaymentMethods
+        div.flex
+          div
+            .PaymentMethod(data-payment-method="credit-card")
+              svg(width=48 height=48)
+                use(xlink:href="#svg-credit-card")
+              strong Credit Card
+              small (Powered by Stripe)
+          div
+            .PaymentMethod(data-payment-method="paypal")
+              svg(width=48 height=48)
+                use(xlink:href="#svg-paypal")
+              strong PayPal
+              small (Opens a new window)
+              form(action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top")
+                input(type="hidden" name="cmd" value="_donations")
+                input(type="hidden" name="business" value="#{PAYPAL_ACCOUNT}")
+                input(type="hidden" name="lc" value="US")
+                input(type="hidden" name="item_name" value="Debt Collective")
+                input(type="hidden" name="amount" value="0.00")
+                input(type="hidden" name="currency_code" value="USD")
+                input(type="hidden" name="no_note" value="1")
+                input(type="hidden" name="no_shipping" value="1")
+                input(type="hidden" name="rm" value="1")
+                input(type="hidden" name="return" value="")
+                input(type="hidden" name="cancel_return" value="")
+                input(type="hidden" name="bn" value="PP-DonationsBF:btn_donate_LG.gif:NonHosted")
+      .clearfix.mb2
+        .col.sm-col-4.col-12.p1.right-align.xs-left-align.-fw-500 Email
+        .col.sm-col-8.col-12.px1
+          input.form-control.-fw(type="email" name="email")
+          p.-on-error.-danger.-caption.-fw-500.mt1 ▲ Invalid email
+      .clearfix.mb2
+        .col.sm-col-4.col-12.p1.right-align.xs-left-align.-fw-500 Card #
+        .col.sm-col-8.col-12.px1
+          input.form-control.-fw(type="text" name="number" maxLength="16")
+          p.-on-error.-danger.-caption.-fw-500.mt1 ▲ Invalid Card Number
+      .clearfix.mb2
+        .col.sm-col-4.col-12.p1.right-align.xs-left-align.-fw-500 Expires on
+        .col.sm-col-8.col-12.px1
+          .col.col-7
+            input.form-control.-fw(type="text" name="exp" placeholder="MM/YY" maxLength="5")
+            p.-on-error.-danger.-caption.-fw-500.mt1 ▲ Invalid Expiration
+      .clearfix.mb3
+        .col.sm-col-4.col-12.p1.right-align.xs-left-align.-fw-500 CVC
+        .col.sm-col-8.col-12.px1
+          .col.col-5
+            input.form-control.-fw(type="text" name="cvc" maxLength="5")
+            p.-on-error.-danger.-caption.-fw-500.mt1 ▲ Invalid CVC
+
+      .clearfix.mb4
+        h4.mb1 Want to support more than once?
+
+        .-ff-sec.form-check.form-check-inline
+          input.form-check-input.mr1.js-donate-monthly(
+            type='checkbox'
+            id='donate_monthly_checkbox'
+          )
+          label.block(for="donate_monthly_checkbox")
+            span.ml1 Yes, I agree to donate $#[span.js-amount-value 10]/#[b month].
+
+      .flex
+        .flex-none.mr1
+          div.btn-back.btn-secondary.-k-btn.-fw-600
+            svg(width=14 height=14)
+              use(xlink:href="#svg-arrow-backward")
+        .flex-auto
+          button.-k-btn.btn-primary.-fw.-fw-600.js-donate-amount(type="submit") Donate $#[span.js-amount-value 10]
+    section.Success(style="display: none")
+      .DonationResponse
+        img(src="/svg/heart.svg")
+        h2 Thank you!
+        p Our growing movement needs people willing to throw down like you just did!
+    section.Error(style="display: none")
+      .DonationResponse
+        img(src="/svg/credit-card-cut.svg")
+        h3 Got some bad news
+        p Your card has been declined. Get in touch with your bank or card issuer to solve the problem.
+
+        .flex
+          div.btn-back.btn-primary.-k-btn.-fw-600 Try again
+
+block scripts
+  script.
+    window.STRIPE_PUBLISHABLE_KEY = "#{STRIPE_PUBLISHABLE_KEY}";
+    new ViewDonateIndex();
diff --git a/views/home/contact.pug b/views/home/contact.pug
@@ -29,7 +29,7 @@ block content
           p.-on-error.-danger.-caption.-fw-500.mt1 ▲ Invalid message
       .clearfix.mb2
         .g-recaptcha(data-sitekey=config.recaptcha.siteKey)
-      button.-k-btn.btn-primary.-fw.-fw-600.js-donate-amount(type="submit") Contact Us
+      button.-k-btn.btn-primary.-fw.-fw-600(type="submit") Contact Us
     .clearfix
       .col.col-6
         p.mb2

diff --git a/views/includes/donation-flow.pug b/views/includes/donation-flow.pug
@@ -115,7 +115,7 @@ script(type="text/javascript").
           .DonationResponse
             img(src="/svg/heart.svg")
             h2 Thank you!
-            p Our growing movement needs people willing to throw down like you just did. Thank you.
+            p Our growing movement needs people willing to throw down like you just did!
         section.Error
           .DonationResponse
             img(src="/svg/credit-card-cut.svg")

diff --git a/views/includes/footer.pug b/views/includes/footer.pug
@@ -31,7 +31,7 @@
       header: 'More',
       links: [
         { name: 'Contact', href: routeMappings.contact.url() },
-        { name: 'Donate', href: '/#donate', class: 'js-donate' },
+        { name: 'Donate', href: '/donate' },
         { name: 'Open Source', href: repoURL }
       ]
     }

diff --git a/views/layouts/admin.pug b/views/layouts/admin.pug
@@ -45,7 +45,6 @@ html(lang="en")
       block content
 
     block body
-      include ../includes/donation-flow
 
     script(src='/build/shared.js')
     script(src='/build/admin.js')

diff --git a/views/layouts/application.pug b/views/layouts/application.pug
@@ -55,7 +55,6 @@ html(lang='en')
       include ../includes/footer
 
     block body
-      include ../includes/donation-flow
 
     script(src='/build/shared.js')
     script(src='/build/index.js')

diff --git a/views/layouts/donate.pug b/views/layouts/donate.pug
@@ -0,0 +1,62 @@
+doctype html
+html(lang='en')
+
+  head
+    meta(charset='UTF-8')
+    meta(name='csrf-token' content=csrfToken)
+    meta(name='keywords' content='Debt,Student loans,Everest,Corinthian,Student Debt,Medical Debt,Credit Card Debt,Mortgage Debt,Bankruptcy,Debt discharge,Debt cancellation,Erase my debt,Jubilee,Strike Debt,Confused about debt,Rolling Jubilee,Interest rates,Principle reduction,What happens if I don’t pay my debt?,Judgement Debt,Bad Credit,Credit Score,Credit Report,Credit Reporting Agencies,Can’t Pay My Debt,Debt strike,Debt union,Credit cards,Fair credit,Wages garnished,Consumer rights,Strike creditors,Debt refusal,Debt resistance,Debt Help')
+    meta(name='description' content='We are debtors and allies organizing to renegotiate and resist our debts. Alone, our debts are a burden. Together, they make us powerful.')
+
+    meta(name='apple-mobile-web-app-capable' content='yes')
+    meta(name='apple-mobile-web-app-status-bar-style' content='black')
+    meta(name='apple-mobile-web-app-title' content='The Debt Collective')
+    meta(name='format-detection' content='telephone=no')
+    meta(name='viewport' content='width=device-width, initial-scale=1.0')
+    each size in [57, 76, 120, 152, 180]
+      link(rel='apple-touch-icon' sizes=`${size}x${size}` href=`/images/social/apple-icon-${size}.png`)
+
+    link(rel='icon' type='image/png' href='https://s3.amazonaws.com/tds-static/img/debtcollective/0.0.1/favicon.png')
+
+    title
+      block title
+        | The Debt Collective
+
+    link(rel='stylesheet' href='/build/index.css')
+    link(rel='stylesheet' href='https://fonts.googleapis.com/css?family=Space+Mono')
+
+    script(src=`https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.${NODE_ENV === 'production' ? 'min.' : ''}js`)
+    link(rel='stylesheet' href='https://s3.amazonaws.com/tds-static/css/dc-vue-header/0.0.1/index.min.css')
+    script(src='https://s3.amazonaws.com/tds-static/js/dc-vue-header/0.0.1/index.min.js')
+    script.
+      Vue.component(DebtCollectiveHeader.name, DebtCollectiveHeader)
+
+    script(src='https://js.stripe.com/v2/')
+    script(src='/build/donate.js')
+
+  body
+    include ../includes/svg/sprite.svg
+    include ../includes/header
+    main(aria-hidden='false' role='main')
+      if errors || error || flash
+        .AlertWrapper
+          if errors || error
+            .Alert.wrapper.center.-fw-500.-error
+              button.Alert__close(aria-label='close')
+                svg: use(xlink:href='#svg-close')
+              p= error
+              if errors
+                each val in errors
+                  p= val
+          if flash
+            each val, key in flash
+              .Alert.wrapper.center.-fw-500(class=`-${key}`)
+                button.Alert__close(aria-label='close')
+                  svg: use(xlink:href='#svg-close')
+                p!= val
+
+      block content
+      include ../includes/footer
+
+    include ../mixins/utils.pug
+
+    block scripts
diff --git a/views/layouts/placeholder.pug b/views/layouts/placeholder.pug
@@ -55,7 +55,6 @@ html(lang='en')
       block content
 
     block body
-      include ../includes/donation-flow
 
     script(src='/build/shared.js')
     script(src='/build/index.js')