fix(client): fixup PayPal intergration

client/src/components/Donation/MinimalDonateForm.js

@@ -14,8 +14,11 @@ import { stripePublicKey } from '../../../../config/env.json';
 import { stripeScriptLoader } from '../../utils/scriptLoaders';
 import DonateFormChildViewForHOC from './DonateFormChildViewForHOC';
 import DonateCompletion from './DonateCompletion';
+import PaypalButton from './PaypalButton';
 import { userSelector } from '../../redux';
 
+import { Spacer } from '../../components/helpers';
+
 import './Donation.css';
 
 const propTypes = {
@@ -126,7 +129,18 @@ class MinimalDonateForm extends Component {
 
     return (
       <Row>
+        <Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}>
+          <PaypalButton
+            handleProcessing={handleProcessing}
+            onDonationStateChange={this.onDonationStateChange}
+          />
+        </Col>
         <Col sm={10} smOffset={1} xs={12}>
+          <Spacer />
+          <b>Or donate with a credit card:</b>
+          <Spacer />
+        </Col>
+        <Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}>
           <StripeProvider stripe={stripe}>
             <Elements>
               <DonateFormChildViewForHOC

client/src/components/Donation/PaypalButton.js

@@ -16,13 +16,13 @@ export class PaypalButton extends Component {
   constructor(...props) {
     super(...props);
     this.state = {
-      planId: durationPlans.month['500'].planId
+      planId: durationPlans.year['6000'].planId
     };
     this.handleApproval = this.handleApproval.bind(this);
   }
 
   handleApproval = data => {
-    this.props.handleProcessing('month', 500, 'Paypal payment submission');
+    this.props.handleProcessing('year', 6000, 'Paypal payment submission');
     this.props.onDonationStateChange(false, true, '');
     verifySubscriptionPaypal(data)
       .then(response => {

client/src/pages/donate.js

@@ -12,6 +12,7 @@ import DonateForm from '../components/Donation/DonateForm';
 import DonateText from '../components/Donation/DonateText';
 import { signInLoadingSelector, userSelector, executeGA } from '../redux';
 import { stripeScriptLoader } from '../utils/scriptLoaders';
+import { PaypalButton } from '../components/Donation/PaypalButton';
 
 const propTypes = {
   executeGA: PropTypes.func,
@@ -131,6 +132,14 @@ export class DonatePage extends Component {
                     handleProcessing={this.handleProcessing}
                     stripe={stripe}
                   />
+                  <Spacer size={2} />
+                  <Row>
+                    <Col sm={10} smOffset={1} xs={12}>
+                      <b>Or donate with:</b>
+                      <Spacer />
+                      <PaypalButton />
+                    </Col>
+                  </Row>
                 </Col>
                 <Col md={6}>
                   <DonateText />

config/donation-settings.js

@@ -1,4 +1,5 @@
-require('dotenv').config();
+const path = require('path');
+require('dotenv').config({ path: path.resolve(__dirname, '../.env') });
 
 // Configuration for client side
 const durationsConfig = {
@@ -56,14 +57,20 @@ const paypalConfigTypes = {
     durationPlans: {
       month: {
         '500': {
-          planId: 'P-146249205C631091BLZKRHGA'
+          planId: 'P-37N14480BW163382FLZYPVMA'
+        }
+      },
+      year: {
+        '6000': {
+          planId: 'P-0UY77185EM3077131LZYP6VY'
         }
       }
     }
   }
 };
 
-const paypalConfig = process.env.DEPLOYMENT_ENV
+const paypalConfig =
+  process.env.DEPLOYMENT_ENV && process.env.DEPLOYMENT_ENV === 'live'
     ? paypalConfigTypes['live']
     : paypalConfigTypes['staging'];