feat: add reconfigurable paypal button to donate page

client/src/components/Donation/DonateForm.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
@@ -20,6 +20,8 @@ import {
 } from '../../../../config/donation-settings';
 import Spacer from '../helpers/Spacer';
 import DonateFormChildViewForHOC from './DonateFormChildViewForHOC';
+import PaypalButton from './PaypalButton';
+import DonateCompletion from './DonateCompletion';
 import {
   isSignedInSelector,
   signInLoadingSelector,
@@ -50,11 +52,18 @@ const mapStateToProps = createSelector(
     showLoading
   })
 );
-
 const mapDispatchToProps = {
   navigate
 };
 
+const initialState = {
+  donationState: {
+    processing: false,
+    success: false,
+    error: ''
+  }
+};
+
 class DonateForm extends Component {
   constructor(...args) {
     super(...args);
@@ -63,15 +72,30 @@ class DonateForm extends Component {
     this.amounts = amountsConfig;
 
     this.state = {
+      ...initialState,
       ...defaultStateConfig,
       processing: false
     };
 
+    this.onDonationStateChange = this.onDonationStateChange.bind(this);
     this.getActiveDonationAmount = this.getActiveDonationAmount.bind(this);
     this.getDonationButtonLabel = this.getDonationButtonLabel.bind(this);
     this.handleSelectAmount = this.handleSelectAmount.bind(this);
     this.handleSelectDuration = this.handleSelectDuration.bind(this);
     this.hideAmountOptionsCB = this.hideAmountOptionsCB.bind(this);
+    this.resetDonation = this.resetDonation.bind(this);
+  }
+
+  onDonationStateChange(success, processing, error) {
+    this.setState(state => ({
+      ...state,
+      donationState: {
+        ...state.donationState,
+        processing: processing,
+        success: success,
+        error: error
+      }
+    }));
   }
 
   getActiveDonationAmount(durationSelected, amountSelected) {
@@ -199,13 +223,64 @@ class DonateForm extends Component {
     );
   }
 
+  resetDonation() {
+    return this.setState({ ...initialState });
+  }
+
+  renderCompletion(props) {
+    return <DonateCompletion {...props} />;
+  }
+
   render() {
+    const { donationAmount, donationDuration } = this.state;
+    const { handleProcessing } = this.props;
+    const {
+      donationState: { processing, success, error }
+    } = this.state;
+    const subscriptionPayment = donationDuration !== 'onetime';
+    if (processing || success || error) {
+      return this.renderCompletion({
+        processing,
+        success,
+        error,
+        reset: this.resetDonation
+      });
+    }
     return (
       <Row>
         <Col sm={10} smOffset={1} xs={12}>
           {this.renderDurationAmountOptions()}
         </Col>
         <Col sm={10} smOffset={1} xs={12}>
+          {subscriptionPayment ? (
+            <Fragment>
+              <b>
+                Confirm your donation of ${donationAmount / 100} / year with
+                PayPal:
+              </b>
+              <Spacer />
+            </Fragment>
+          ) : (
+            ''
+          )}
+          <PaypalButton
+            donationAmount={donationAmount}
+            donationDuration={donationDuration}
+            handleProcessing={handleProcessing}
+            onDonationStateChange={this.onDonationStateChange}
+          />
+        </Col>
+
+        <Col sm={10} smOffset={1} xs={12}>
+          {subscriptionPayment ? (
+            <Fragment>
+              <Spacer />
+              <b>Or donate with a credit card:</b>
+              <Spacer />
+            </Fragment>
+          ) : (
+            ''
+          )}
           {this.renderDonationOptions()}
         </Col>
       </Row>

client/src/components/Donation/Donation.css

@@ -169,6 +169,9 @@ li.disabled > a {
   color: var(--gray-15) !important;
 }
 
+.donate-page-wrapper,
+.donate-page-wrapper b,
+.donate-page-wrapper h3,
 .donate-text p,
 .donation-description,
 [name='payment-method'] {

client/src/components/Donation/MinimalDonateForm.js

@@ -134,6 +134,8 @@ class MinimalDonateForm extends Component {
           <b>Confirm your donation of $60 / year with PayPal:</b>
           <Spacer />
           <PaypalButton
+            donationAmount={donationAmount}
+            donationDuration={donationDuration}
             handleProcessing={handleProcessing}
             onDonationStateChange={this.onDonationStateChange}
           />

client/src/components/Donation/PaypalButton.js

@@ -7,22 +7,33 @@ import { createSelector } from 'reselect';
 import { PayPalButton } from 'react-paypal-button-v2';
 import { paypalClientId } from '../../../config/env.json';
 import { verifySubscriptionPaypal } from '../../utils/ajax';
-import { paypalConfig } from '../../../../config/donation-settings';
+import { paypalConfigurator } from '../../../../config/donation-settings';
-import { signInLoadingSelector, userSelector, executeGA } from '../../redux';
+import { signInLoadingSelector, userSelector } from '../../redux';
-
-const { durationPlans } = paypalConfig;
 
 export class PaypalButton extends Component {
-  constructor(...props) {
+  constructor(props) {
-    super(...props);
+    super(props);
-    this.state = {
-      planId: durationPlans.year['6000'].planId
-    };
     this.handleApproval = this.handleApproval.bind(this);
   }
 
+  state = {};
+
+  static getDerivedStateFromProps(props, state) {
+    const { donationAmount, donationDuration } = props;
+
+    const configurationObj = paypalConfigurator(
+      donationAmount,
+      donationDuration
+    );
+    if (state === configurationObj) {
+      return null;
+    }
+    return { ...configurationObj };
+  }
+
   handleApproval = data => {
-    this.props.handleProcessing('year', 6000, 'Paypal payment submission');
+    const { amount, duration } = this.state;
+    this.props.handleProcessing(duration, amount, 'Paypal payment submission');
     this.props.onDonationStateChange(false, true, '');
     verifySubscriptionPaypal(data)
       .then(response => {
@@ -46,18 +57,15 @@ export class PaypalButton extends Component {
   };
 
   render() {
+    const { duration, planId } = this.state;
+    const isOneTimePayment = duration === 'onetime';
+
+    if (!isOneTimePayment) {
       return (
         <PayPalButton
           createSubscription={(data, actions) => {
-          executeGA({
-            type: 'event',
-            data: {
-              category: 'Donation',
-              action: `Modal Paypal clicked`
-            }
-          });
             return actions.subscription.create({
-            plan_id: this.state.planId
+              plan_id: planId
             });
           }}
           onApprove={data => {
@@ -67,7 +75,7 @@ export class PaypalButton extends Component {
             this.props.onDonationStateChange(
               false,
               false,
-            'Payment has been canceled.'
+              `Uh - oh. It looks like your transaction didn't go through. Could you please try again?`
             );
           }}
           onError={() =>
@@ -84,10 +92,13 @@ export class PaypalButton extends Component {
           }}
         />
       );
+    } else return '';
   }
 }
 
 const propTypes = {
+  donationAmount: PropTypes.number,
+  donationDuration: PropTypes.string,
   handleProcessing: PropTypes.func,
   isDonating: PropTypes.bool,
   onDonationStateChange: PropTypes.func

config/donation-settings.js

@@ -43,16 +43,24 @@ const donationSubscriptionConfig = {
 // Shared paypal configuration
 const paypalConfigTypes = {
   live: {
-    durationPlans: {
     month: {
       '500': {
         planId: 'P-1L11422374370240ULZKX3PA'
       }
+    },
+    year: {
+      '6000': {
+        planId: 'P-9Y661558DW462253NLZZ2IMQ'
+      },
+      '25000': {
+        planId: 'P-3NN39392MK1889318LZZ2KQY'
+      },
+      '100000': {
+        planId: 'P-7YN43286C4599382LLZZ2JUI'
       }
     }
   },
   staging: {
-    durationPlans: {
     month: {
       '500': {
         planId: 'P-37N14480BW163382FLZYPVMA'
@@ -61,7 +69,12 @@ const paypalConfigTypes = {
     year: {
       '6000': {
         planId: 'P-0UY77185EM3077131LZYP6VY'
-        }
+      },
+      '25000': {
+        planId: 'P-7K1585908S634694XLZZTHUQ'
+      },
+      '100000': {
+        planId: 'P-0J5231134H608574XLZZTDLQ'
       }
     }
   }
@@ -72,6 +85,17 @@ const paypalConfig =
     ? paypalConfigTypes['live']
     : paypalConfigTypes['staging'];
 
+const paypalConfigurator = (donationAmount, donationDuration) => {
+  if (donationDuration === 'onetime') {
+    return { amount: donationAmount, duration: donationDuration };
+  }
+  return {
+    amount: donationAmount,
+    duration: donationDuration,
+    planId: paypalConfig[donationDuration]['' + donationAmount].planId
+  };
+};
+
 module.exports = {
   durationsConfig,
   amountsConfig,
@@ -81,5 +105,6 @@ module.exports = {
   donationOneTimeConfig,
   donationSubscriptionConfig,
   modalDefaultStateConfig,
-  paypalConfig
+  paypalConfig,
+  paypalConfigurator
 };