fix(client): unify client donations methods (#39562)

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

client/src/client-only-routes/ShowCertification.js

@@ -8,7 +8,7 @@ import format from 'date-fns/format';
 import { Grid, Row, Col, Image, Button } from '@freecodecamp/react-bootstrap';
 import FreeCodeCampLogo from '../assets/icons/freeCodeCampLogo';
 // eslint-disable-next-line max-len
-import MinimalDonateForm from '../components/Donation/MinimalDonateForm';
+import DonateForm from '../components/Donation/DonateForm';
 
 import {
   showCertSelector,
@@ -233,9 +233,10 @@ class ShowCertification extends Component {
             </Col>
           </Row>
         )}
-        <MinimalDonateForm
+        <DonateForm
           handleProcessing={this.handleProcessing}
           defaultTheme='light'
+          isMinimalForm={true}
         />
         <Row>
           <Col sm={4} smOffset={4} xs={6} xsOffset={3}>

client/src/components/Donation/DonateForm.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
+import { StripeProvider, Elements } from 'react-stripe-elements';
 import {
   Button,
   Col,
@@ -18,15 +19,28 @@ import {
   amountsConfig,
   durationsConfig,
   defaultAmount,
-  defaultStateConfig,
+  defaultDonation,
   onetimeSKUConfig,
-  donationUrls
+  donationUrls,
+  modalDefaultDonation
 } from '../../../../config/donation-settings';
+import { stripePublicKey } from '../../../../config/env.json';
+import { stripeScriptLoader } from '../../utils/scriptLoaders';
+import DonateFormChildViewForHOC from './DonateFormChildViewForHOC';
 import { deploymentEnv } from '../../../config/env.json';
 import Spacer from '../helpers/Spacer';
 import PaypalButton from './PaypalButton';
 import DonateCompletion from './DonateCompletion';
-import { isSignedInSelector, signInLoadingSelector } from '../../redux';
+import {
+  isSignedInSelector,
+  signInLoadingSelector,
+  donationFormStateSelector,
+  hardGoTo as navigate,
+  addDonation,
+  postChargeStripe,
+  updateDonationFormState,
+  defaultDonationFormState
+} from '../../redux';
 
 import './Donation.css';
 
@@ -34,32 +48,35 @@ const numToCommas = num =>
   num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
 
 const propTypes = {
+  addDonation: PropTypes.func,
+  defaultTheme: PropTypes.string,
+  donationFormState: PropTypes.object,
   handleProcessing: PropTypes.func,
   isDonating: PropTypes.bool,
+  isMinimalForm: PropTypes.bool,
   isSignedIn: PropTypes.bool,
   navigate: PropTypes.func.isRequired,
+  postChargeStripe: PropTypes.func.isRequired,
   showLoading: PropTypes.bool.isRequired,
-  stripe: PropTypes.shape({
+  updateDonationFormState: PropTypes.func
-    createToken: PropTypes.func.isRequired,
-    redirectToCheckout: PropTypes.func.isRequired
-  })
 };
 
 const mapStateToProps = createSelector(
   signInLoadingSelector,
   isSignedInSelector,
-  (showLoading, isSignedIn) => ({
+  donationFormStateSelector,
+  (showLoading, isSignedIn, donationFormState) => ({
     isSignedIn,
-    showLoading
+    showLoading,
+    donationFormState
   })
 );
 
-const initialState = {
+const mapDispatchToProps = {
-  donationState: {
+  addDonation,
-    processing: false,
+  navigate,
-    success: false,
+  postChargeStripe,
-    error: ''
+  updateDonationFormState
-  }
 };
 
 class DonateForm extends Component {
@@ -69,12 +86,17 @@ class DonateForm extends Component {
     this.durations = durationsConfig;
     this.amounts = amountsConfig;
 
+    const initialAmountAndDuration = this.props.isMinimalForm
+      ? modalDefaultDonation
+      : defaultDonation;
+
     this.state = {
-      ...initialState,
+      ...initialAmountAndDuration,
-      ...defaultStateConfig,
+      processing: false,
-      processing: false
+      stripe: null
     };
 
+    this.handleStripeLoad = this.handleStripeLoad.bind(this);
     this.onDonationStateChange = this.onDonationStateChange.bind(this);
     this.getActiveDonationAmount = this.getActiveDonationAmount.bind(this);
     this.getDonationButtonLabel = this.getDonationButtonLabel.bind(this);
@@ -87,17 +109,43 @@ class DonateForm extends Component {
     this.resetDonation = this.resetDonation.bind(this);
   }
 
-  onDonationStateChange(success, processing, error) {
+  componentDidMount() {
-    this.setState(state => ({
+    if (window.Stripe) {
-      ...state,
+      this.handleStripeLoad();
-      donationState: {
+    } else if (document.querySelector('#stripe-js')) {
-        ...state.donationState,
+      document
-        processing: processing,
+        .querySelector('#stripe-js')
-        success: success,
+        .addEventListener('load', this.handleStripeLoad);
-        error: error
+    } else {
-      }
+      stripeScriptLoader(this.handleStripeLoad);
-    }));
+    }
-    if (success) {
+  }
+
+  componentWillUnmount() {
+    const stripeMountPoint = document.querySelector('#stripe-js');
+    if (stripeMountPoint) {
+      stripeMountPoint.removeEventListener('load', this.handleStripeLoad);
+    }
+    this.resetDonation();
+  }
+
+  handleStripeLoad() {
+    // Create Stripe instance once Stripe.js loads
+    if (stripePublicKey) {
+      this.setState(state => ({
+        ...state,
+        stripe: window.Stripe(stripePublicKey)
+      }));
+    }
+  }
+
+  onDonationStateChange(donationState) {
+    // scroll to top
+    window.scrollTo(0, 0);
+
+    this.props.updateDonationFormState(donationState);
+    // send donation made on the donate page to related news article
+    if (donationState.success && !this.props.isMinimalForm) {
       this.props.navigate(donationUrls.successUrl);
     }
   }
@@ -126,7 +174,7 @@ class DonateForm extends Component {
     } else {
       donationBtnLabel = `Confirm your donation of ${this.getFormatedAmountLabel(
         donationAmount
-      )} ${donationDuration === 'month' ? 'per month' : 'per year'}`;
+      )} ${donationDuration === 'month' ? ' / month' : ' / year'}`;
     }
     return donationBtnLabel;
   }
@@ -140,10 +188,16 @@ class DonateForm extends Component {
     this.setState({ donationAmount });
   }
 
-  async handleStripeCheckoutRedirect(e) {
+  async handleStripeCheckoutRedirect(e, paymentMethod) {
-    const { stripe } = this.props;
+    const { stripe } = this.state;
     const { donationAmount, donationDuration } = this.state;
 
+    this.props.handleProcessing(
+      donationDuration,
+      donationAmount,
+      `stripe (${paymentMethod}) button click`
+    );
+
     const isOneTime = donationDuration === 'onetime';
     const getSKUId = () => {
       const { id } = onetimeSKUConfig[deploymentEnv || 'staging'].find(
@@ -236,7 +290,7 @@ class DonateForm extends Component {
   }
 
   renderDonationOptions() {
-    const { handleProcessing, isSignedIn } = this.props;
+    const { handleProcessing, isSignedIn, addDonation } = this.props;
     const { donationAmount, donationDuration } = this.state;
 
     const isOneTime = donationDuration === 'onetime';
@@ -257,7 +311,7 @@ class DonateForm extends Component {
           bsStyle='primary'
           className='btn-cta'
           id='confirm-donation-btn'
-          onClick={this.handleStripeCheckoutRedirect}
+          onClick={e => this.handleStripeCheckoutRedirect(e, 'apple pay')}
         >
           <span>Donate with Apple Pay</span>
 
@@ -269,7 +323,7 @@ class DonateForm extends Component {
           bsStyle='primary'
           className='btn-cta'
           id='confirm-donation-btn'
-          onClick={this.handleStripeCheckoutRedirect}
+          onClick={e => this.handleStripeCheckoutRedirect(e, 'google pay')}
         >
           <span>Donate with Google Pay</span>
           <GooglePay className='google-pay-logo' />
@@ -280,7 +334,7 @@ class DonateForm extends Component {
           bsStyle='primary'
           className='btn-cta'
           id='confirm-donation-btn'
-          onClick={this.handleStripeCheckoutRedirect}
+          onClick={e => this.handleStripeCheckoutRedirect(e, 'credit card')}
         >
           <span>Donate with Card</span>
 
@@ -292,6 +346,7 @@ class DonateForm extends Component {
         </Button>
         <Spacer />
         <PaypalButton
+          addDonation={addDonation}
           donationAmount={donationAmount}
           donationDuration={donationDuration}
           handleProcessing={handleProcessing}
@@ -305,25 +360,59 @@ class DonateForm extends Component {
   }
 
   resetDonation() {
-    return this.setState({ ...initialState });
+    return this.props.updateDonationFormState({ ...defaultDonationFormState });
   }
 
   renderCompletion(props) {
     return <DonateCompletion {...props} />;
   }
 
-  render() {
+  renderModalForm() {
+    const { donationAmount, donationDuration, stripe } = this.state;
     const {
-      donationState: { processing, success, error }
+      handleProcessing,
-    } = this.state;
+      defaultTheme,
-    if (processing || success || error) {
+      addDonation,
-      return this.renderCompletion({
+      postChargeStripe
-        processing,
+    } = this.props;
-        success,
+
-        error,
+    return (
-        reset: this.resetDonation
+      <Row>
-      });
+        <Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}>
-    }
+          <Spacer />
+          <b>{this.getDonationButtonLabel()} with PayPal:</b>
+          <Spacer />
+          <PaypalButton
+            addDonation={addDonation}
+            donationAmount={donationAmount}
+            donationDuration={donationDuration}
+            handleProcessing={handleProcessing}
+            onDonationStateChange={this.onDonationStateChange}
+          />
+        </Col>
+        <Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}>
+          <Spacer />
+          <b>Or donate with a credit card:</b>
+          <Spacer />
+          <StripeProvider stripe={stripe}>
+            <Elements>
+              <DonateFormChildViewForHOC
+                defaultTheme={defaultTheme}
+                donationAmount={donationAmount}
+                donationDuration={donationDuration}
+                getDonationButtonLabel={this.getDonationButtonLabel}
+                handleProcessing={handleProcessing}
+                onDonationStateChange={this.onDonationStateChange}
+                postChargeStripe={postChargeStripe}
+              />
+            </Elements>
+          </StripeProvider>
+        </Col>
+      </Row>
+    );
+  }
+
+  renderPageForm() {
     return (
       <Row>
         <Col sm={10} smOffset={1} xs={12}>
@@ -335,9 +424,45 @@ class DonateForm extends Component {
       </Row>
     );
   }
+
+  render() {
+    const {
+      donationFormState: { processing, success, error },
+      isMinimalForm
+    } = this.props;
+    if (success || error) {
+      return this.renderCompletion({
+        processing,
+        success,
+        error,
+        reset: this.resetDonation
+      });
+    }
+
+    // keep payment provider elements on DOM during processing to avoid errors.
+    return (
+      <>
+        {processing &&
+          this.renderCompletion({
+            processing,
+            success,
+            error,
+            reset: this.resetDonation
+          })}
+        <div className={processing ? 'hide' : ''}>
+          {isMinimalForm
+            ? this.renderModalForm(processing)
+            : this.renderPageForm(processing)}
+        </div>
+      </>
+    );
+  }
 }
 
 DonateForm.displayName = 'DonateForm';
 DonateForm.propTypes = propTypes;
 
-export default connect(mapStateToProps)(DonateForm);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(DonateForm);

client/src/components/Donation/DonateFormChildViewForHOC.js

@@ -15,7 +15,6 @@ import { injectStripe } from 'react-stripe-elements';
 
 import StripeCardForm from './StripeCardForm';
 import DonateCompletion from './DonateCompletion';
-import { postChargeStripe } from '../../utils/ajax';
 import { userSelector } from '../../redux';
 
 const propTypes = {
@@ -26,19 +25,14 @@ const propTypes = {
   getDonationButtonLabel: PropTypes.func.isRequired,
   handleProcessing: PropTypes.func,
   isSignedIn: PropTypes.bool,
+  onDonationStateChange: PropTypes.func,
+  postChargeStripe: PropTypes.func,
   showCloseBtn: PropTypes.func,
   stripe: PropTypes.shape({
     createToken: PropTypes.func.isRequired
   }),
   theme: PropTypes.string
 };
-const initialState = {
-  donationState: {
-    processing: false,
-    success: false,
-    error: ''
-  }
-};
 
 const mapStateToProps = createSelector(
   userSelector,
@@ -50,9 +44,6 @@ class DonateFormChildViewForHOC extends Component {
     super(...args);
 
     this.state = {
-      ...initialState,
-      donationAmount: this.props.donationAmount,
-      donationDuration: this.props.donationDuration,
       isSubmissionValid: null,
       email: null,
       isEmailValid: true,
@@ -63,7 +54,6 @@ class DonateFormChildViewForHOC extends Component {
     this.handleEmailChange = this.handleEmailChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
     this.postDonation = this.postDonation.bind(this);
-    this.resetDonation = this.resetDonation.bind(this);
     this.handleEmailBlur = this.handleEmailBlur.bind(this);
   }
 
@@ -106,41 +96,26 @@ class DonateFormChildViewForHOC extends Component {
 
     const email = this.getUserEmail();
     if (!email || !isEmail(email)) {
-      return this.setState(state => ({
+      return this.props.onDonationStateChange({
-        ...state,
+        error:
-        donationState: {
+          'We need a valid email address to which we can send your' +
-          ...state.donationState,
+          ' donation tax receipt.'
-          error:
+      });
-            'We need a valid email address to which we can send your' +
-            ' donation tax receipt.'
-        }
-      }));
     }
     return this.props.stripe.createToken({ email }).then(({ error, token }) => {
       if (error) {
-        return this.setState(state => ({
+        return this.props.onDonationStateChange({
-          ...state,
+          error:
-          donationState: {
+            'Something went wrong processing your donation. Your card' +
-            ...state.donationState,
+            ' has not been charged.'
-            error:
+        });
-              'Something went wrong processing your donation. Your card' +
-              ' has not been charged.'
-          }
-        }));
       }
       return this.postDonation(token);
     });
   }
 
   postDonation(token) {
-    const { donationAmount: amount, donationDuration: duration } = this.state;
+    const { donationAmount: amount, donationDuration: duration } = this.props;
-    this.setState(state => ({
-      ...state,
-      donationState: {
-        ...state.donationState,
-        processing: true
-      }
-    }));
 
     // scroll to top
     window.scrollTo(0, 0);
@@ -150,50 +125,15 @@ class DonateFormChildViewForHOC extends Component {
     if (this.props.handleProcessing) {
       this.props.handleProcessing(
         this.state.donationDuration,
-        Math.round(this.state.donationAmount / 100)
+        Math.round(amount / 100)
       );
     }
 
-    return postChargeStripe({
+    return this.props.postChargeStripe({
       token,
       amount,
       duration
-    })
+    });
-      .then(response => {
-        const data = response && response.data;
-        this.setState(state => ({
-          ...state,
-          donationState: {
-            ...state.donationState,
-            processing: false,
-            success: true,
-            error: data.error ? data.error : null
-          }
-        }));
-      })
-      .catch(error => {
-        const data =
-          error.response && error.response.data
-            ? error.response.data
-            : {
-                error:
-                  'Something is not right. ' +
-                  'Please contact donors@freecodecamp.org.'
-              };
-        this.setState(state => ({
-          ...state,
-          donationState: {
-            ...state.donationState,
-            processing: false,
-            success: false,
-            error: data.error
-          }
-        }));
-      });
-  }
-
-  resetDonation() {
-    return this.setState({ ...initialState });
   }
 
   renderCompletion(props) {
@@ -267,25 +207,13 @@ class DonateFormChildViewForHOC extends Component {
     );
   }
 
-  componentWillReceiveProps({ donationAmount, donationDuration, email }) {
+  componentWillReceiveProps({ email }) {
-    this.setState({ donationAmount, donationDuration });
     if (this.state.email === null && email) {
       this.setState({ email });
     }
   }
 
   render() {
-    const {
-      donationState: { processing, success, error }
-    } = this.state;
-    if (processing || success || error) {
-      return this.renderCompletion({
-        processing,
-        success,
-        error,
-        reset: this.resetDonation
-      });
-    }
     return this.renderDonateForm();
   }
 }

client/src/components/Donation/Donation.css

@@ -348,3 +348,7 @@ li.disabled > a {
   justify-content: center;
   align-content: center;
 }
+
+.hide {
+  display: none;
+}

client/src/components/Donation/DonationModal.js

@@ -1,5 +1,5 @@
 /* eslint-disable max-len */
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
@@ -9,8 +9,8 @@ import { Spacer } from '../helpers';
 import { blockNameify } from '../../../../utils/block-nameify';
 import Heart from '../../assets/icons/Heart';
 import Cup from '../../assets/icons/Cup';
-import MinimalDonateForm from './MinimalDonateForm';
+import DonateForm from './DonateForm';
-import { modalDefaultStateConfig } from '../../../../config/donation-settings';
+import { modalDefaultDonation } from '../../../../config/donation-settings';
 
 import {
   closeDonationModal,
@@ -77,19 +77,21 @@ function DonateModal({
     setCloseLabel(true);
   };
 
-  if (show) {
+  useEffect(() => {
-    executeGA({ type: 'modal', data: '/donation-modal' });
+    if (show) {
-    executeGA({
+      executeGA({ type: 'modal', data: '/donation-modal' });
-      type: 'event',
+      executeGA({
-      data: {
+        type: 'event',
-        category: 'Donation',
+        data: {
-        action: `Displayed ${
+          category: 'Donation',
-          isBlockDonation ? 'block' : 'progress'
+          action: `Displayed ${
-        } donation modal`,
+            isBlockDonation ? 'block' : 'progress'
-        nonInteraction: true
+          } donation modal`,
-      }
+          nonInteraction: true
-    });
+        }
-  }
+      });
+    }
+  }, [show, isBlockDonation, executeGA]);
 
   const durationToText = donationDuration => {
     if (donationDuration === 'onetime') return 'a one-time';
@@ -100,8 +102,8 @@ function DonateModal({
 
   const donationText = (
     <b>
-      Become {durationToText(modalDefaultStateConfig.donationDuration)}{' '}
+      Become {durationToText(modalDefaultDonation.donationDuration)} supporter
-      supporter of our nonprofit.
+      of our nonprofit.
     </b>
   );
   const blockDonationText = (
@@ -141,7 +143,7 @@ function DonateModal({
       <Modal.Body>
         {isBlockDonation ? blockDonationText : progressDonationText}
         <Spacer />
-        <MinimalDonateForm handleProcessing={handleProcessing} />
+        <DonateForm handleProcessing={handleProcessing} isMinimalForm={true} />
         <Spacer />
         <Row>
           <Col sm={4} smOffset={4} xs={8} xsOffset={2}>

client/src/components/Donation/MinimalDonateForm.js

@@ -1,174 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { Row, Col } from '@freecodecamp/react-bootstrap';
-import { StripeProvider, Elements } from 'react-stripe-elements';
-
-import {
-  amountsConfig,
-  durationsConfig,
-  modalDefaultStateConfig
-} from '../../../../config/donation-settings';
-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 = {
-  defaultTheme: PropTypes.string,
-  handleProcessing: PropTypes.func,
-  isDonating: PropTypes.bool,
-  stripe: PropTypes.shape({
-    createToken: PropTypes.func.isRequired
-  })
-};
-
-const mapStateToProps = createSelector(
-  userSelector,
-  ({ isDonating }) => ({
-    isDonating
-  })
-);
-
-const initialState = {
-  donationState: {
-    processing: false,
-    success: false,
-    error: ''
-  }
-};
-
-class MinimalDonateForm extends Component {
-  constructor(...args) {
-    super(...args);
-
-    this.durations = durationsConfig;
-    this.amounts = amountsConfig;
-
-    this.state = {
-      ...modalDefaultStateConfig,
-      ...initialState,
-      isDonating: this.props.isDonating,
-      stripe: null
-    };
-    this.handleStripeLoad = this.handleStripeLoad.bind(this);
-    this.onDonationStateChange = this.onDonationStateChange.bind(this);
-    this.resetDonation = this.resetDonation.bind(this);
-  }
-
-  componentDidMount() {
-    if (window.Stripe) {
-      this.handleStripeLoad();
-    } else if (document.querySelector('#stripe-js')) {
-      document
-        .querySelector('#stripe-js')
-        .addEventListener('load', this.handleStripeLoad);
-    } else {
-      stripeScriptLoader(this.handleStripeLoad);
-    }
-  }
-
-  componentWillUnmount() {
-    const stripeMountPoint = document.querySelector('#stripe-js');
-    if (stripeMountPoint) {
-      stripeMountPoint.removeEventListener('load', this.handleStripeLoad);
-    }
-  }
-
-  handleStripeLoad() {
-    // Create Stripe instance once Stripe.js loads
-    if (stripePublicKey) {
-      this.setState(state => ({
-        ...state,
-        stripe: window.Stripe(stripePublicKey)
-      }));
-    }
-  }
-
-  resetDonation() {
-    return this.setState({ ...initialState });
-  }
-
-  onDonationStateChange(success, processing, error) {
-    this.setState(state => ({
-      ...state,
-      donationState: {
-        ...state.donationState,
-        processing: processing,
-        success: success,
-        error: error
-      }
-    }));
-  }
-
-  renderCompletion(props) {
-    return <DonateCompletion {...props} />;
-  }
-
-  render() {
-    const { donationAmount, donationDuration, stripe } = this.state;
-    const { handleProcessing, defaultTheme } = this.props;
-    const {
-      donationState: { processing, success, error }
-    } = this.state;
-
-    const donationPlan = `$${donationAmount / 100} / ${donationDuration}`;
-    if (processing || success || error) {
-      return this.renderCompletion({
-        processing,
-        success,
-        error,
-        reset: this.resetDonation
-      });
-    }
-
-    return (
-      <Row>
-        <Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}>
-          <Spacer />
-          <b>Confirm your donation of {donationPlan} with PayPal:</b>
-          <Spacer />
-          <PaypalButton
-            donationAmount={donationAmount}
-            donationDuration={donationDuration}
-            handleProcessing={handleProcessing}
-            onDonationStateChange={this.onDonationStateChange}
-          />
-        </Col>
-        <Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}>
-          <Spacer />
-          <b>Or donate with a credit card:</b>
-          <Spacer />
-          <StripeProvider stripe={stripe}>
-            <Elements>
-              <DonateFormChildViewForHOC
-                defaultTheme={defaultTheme}
-                donationAmount={donationAmount}
-                donationDuration={donationDuration}
-                getDonationButtonLabel={() =>
-                  `Confirm your donation of ${donationPlan}`
-                }
-                handleProcessing={handleProcessing}
-              />
-            </Elements>
-          </StripeProvider>
-        </Col>
-      </Row>
-    );
-  }
-}
-
-MinimalDonateForm.displayName = 'MinimalDonateForm';
-MinimalDonateForm.propTypes = propTypes;
-
-export default connect(
-  mapStateToProps,
-  null
-)(MinimalDonateForm);

client/src/components/Donation/PaypalButton.js

@@ -6,7 +6,6 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import PayPalButtonScriptLoader from './PayPalButtonScriptLoader';
 import { paypalClientId, deploymentEnv } from '../../../config/env.json';
-import { verifySubscriptionPaypal } from '../../utils/ajax';
 import {
   paypalConfigurator,
   paypalConfigTypes
@@ -38,39 +37,20 @@ export class PaypalButton extends Component {
   handleApproval = (data, isSubscription) => {
     const { amount, duration } = this.state;
     const { skipAddDonation = false } = this.props;
+
     // Skip the api if user is not signed in or if its a one-time donation
-    if (skipAddDonation || !isSubscription) {
+    if (!skipAddDonation || isSubscription) {
-      this.props.onDonationStateChange(
+      this.props.addDonation(data);
-        true,
-        false,
-        data.error ? data.error : ''
-      );
-    } else {
-      this.props.handleProcessing(
-        duration,
-        amount,
-        'Paypal payment submission'
-      );
-      this.props.onDonationStateChange(false, true, '');
-      verifySubscriptionPaypal(data)
-        .then(response => {
-          const data = response && response.data;
-          this.props.onDonationStateChange(
-            true,
-            false,
-            data.error ? data.error : ''
-          );
-        })
-        .catch(error => {
-          const data =
-            error.response && error.response.data
-              ? error.response.data
-              : {
-                  error: `Something is not right. Please contact team@freecodecamp.org`
-                };
-          this.props.onDonationStateChange(false, false, data.error);
-        });
     }
+
+    this.props.handleProcessing(duration, amount, 'Paypal payment submission');
+
+    // Show success anytime because the payment has gone through paypal
+    this.props.onDonationStateChange({
+      processing: false,
+      success: true,
+      error: data.error ? data.error : null
+    });
   };
 
   render() {
@@ -107,14 +87,18 @@ export class PaypalButton extends Component {
           this.handleApproval(data, isSubscription);
         }}
         onCancel={() => {
-          this.props.onDonationStateChange(
+          this.props.onDonationStateChange({
-            false,
+            processing: false,
-            false,
+            success: false,
-            `Uh - oh. It looks like your transaction didn't go through. Could you please try again?`
+            error: `Uh - oh. It looks like your transaction didn't go through. Could you please try again?`
-          );
+          });
         }}
         onError={() =>
-          this.props.onDonationStateChange(false, false, 'Please try again.')
+          this.props.onDonationStateChange({
+            processing: false,
+            success: false,
+            error: 'Please try again.'
+          })
         }
         plantId={planId}
         style={{
@@ -127,6 +111,7 @@ export class PaypalButton extends Component {
 }
 
 const propTypes = {
+  addDonation: PropTypes.func,
   donationAmount: PropTypes.number,
   donationDuration: PropTypes.string,
   handleProcessing: PropTypes.func,

client/src/pages/donate.js

@@ -6,12 +6,10 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { Grid, Row, Col, Alert } from '@freecodecamp/react-bootstrap';
 
-import { stripePublicKey } from '../../config/env.json';
 import { Spacer, Loader } from '../components/helpers';
 import DonateForm from '../components/Donation/DonateForm';
 import DonateText from '../components/Donation/DonateText';
 import { signInLoadingSelector, userSelector, executeGA } from '../redux';
-import { stripeScriptLoader } from '../utils/scriptLoaders';
 
 const propTypes = {
   executeGA: PropTypes.func,
@@ -40,11 +38,9 @@ export class DonatePage extends Component {
   constructor(...props) {
     super(...props);
     this.state = {
-      stripe: null,
       enableSettings: false
     };
     this.handleProcessing = this.handleProcessing.bind(this);
-    this.handleStripeLoad = this.handleStripeLoad.bind(this);
   }
 
   componentDidMount() {
@@ -56,47 +52,21 @@ export class DonatePage extends Component {
         nonInteraction: true
       }
     });
-    if (window.Stripe) {
-      this.handleStripeLoad();
-    } else if (document.querySelector('#stripe-js')) {
-      document
-        .querySelector('#stripe-js')
-        .addEventListener('load', this.handleStripeLoad);
-    } else {
-      stripeScriptLoader(this.handleStripeLoad);
-    }
   }
 
-  componentWillUnmount() {
+  handleProcessing(duration, amount, action = 'stripe button click') {
-    const stripeMountPoint = document.querySelector('#stripe-js');
-    if (stripeMountPoint) {
-      stripeMountPoint.removeEventListener('load', this.handleStripeLoad);
-    }
-  }
-
-  handleProcessing(duration, amount) {
     this.props.executeGA({
       type: 'event',
       data: {
         category: 'donation',
-        action: 'donate page stripe form submission',
+        action: `donate page ${action}`,
         label: duration,
         value: amount
       }
     });
   }
 
-  handleStripeLoad() {
-    // Create Stripe instance once Stripe.js loads
-    console.info('stripe has loaded');
-    this.setState(state => ({
-      ...state,
-      stripe: window.Stripe(stripePublicKey)
-    }));
-  }
-
   render() {
-    const { stripe } = this.state;
     const { showLoading, isDonating } = this.props;
 
     if (showLoading) {
@@ -141,7 +111,6 @@ export class DonatePage extends Component {
                 <DonateForm
                   enableDonationSettingsPage={this.enableDonationSettingsPage}
                   handleProcessing={this.handleProcessing}
-                  stripe={stripe}
                 />
               </Col>
               <Col md={6}>

client/src/redux/donation-saga.js

@@ -1,13 +1,28 @@
-import { put, select, takeEvery, delay } from 'redux-saga/effects';
+import {
+  put,
+  select,
+  takeEvery,
+  takeLeading,
+  delay,
+  call
+} from 'redux-saga/effects';
 
 import {
   openDonationModal,
   preventBlockDonationRequests,
   shouldRequestDonationSelector,
   preventProgressDonationRequests,
-  canRequestBlockDonationSelector
+  canRequestBlockDonationSelector,
+  addDonationComplete,
+  addDonationError,
+  postChargeStripeComplete,
+  postChargeStripeError
 } from './';
 
+import { addDonation, postChargeStripe } from '../utils/ajax';
+
+const defaultDonationError = `Something is not right. Please contact donors@freecodecamp.org`;
+
 function* showDonateModalSaga() {
   let shouldRequestDonation = yield select(shouldRequestDonationSelector);
   if (shouldRequestDonation) {
@@ -22,6 +37,38 @@ function* showDonateModalSaga() {
   }
 }
 
-export function createDonationSaga(types) {
+function* addDonationSaga({ payload }) {
-  return [takeEvery(types.tryToShowDonationModal, showDonateModalSaga)];
+  try {
+    yield call(addDonation, payload);
+    yield put(addDonationComplete());
+  } catch (error) {
+    const data =
+      error.response && error.response.data
+        ? error.response.data
+        : {
+            message: defaultDonationError
+          };
+    yield put(addDonationError(data.message));
+  }
+}
+
+function* postChargeStripeSaga({ payload }) {
+  try {
+    yield call(postChargeStripe, payload);
+    yield put(postChargeStripeComplete());
+  } catch (error) {
+    const err =
+      error.response && error.response.data
+        ? error.response.data.error
+        : defaultDonationError;
+    yield put(postChargeStripeError(err));
+  }
+}
+
+export function createDonationSaga(types) {
+  return [
+    takeEvery(types.tryToShowDonationModal, showDonateModalSaga),
+    takeEvery(types.addDonation, addDonationSaga),
+    takeLeading(types.postChargeStripe, postChargeStripeSaga)
+  ];
 }

client/src/redux/index.js

@@ -31,6 +31,12 @@ export const defaultFetchState = {
   error: null
 };
 
+export const defaultDonationFormState = {
+  processing: false,
+  success: false,
+  error: ''
+};
+
 const initialState = {
   appUsername: '',
   canRequestBlockDonation: false,
@@ -51,7 +57,10 @@ const initialState = {
   sessionMeta: { activeDonations: 0 },
   showDonationModal: false,
   isBlockDonationModal: false,
-  isOnline: true
+  isOnline: true,
+  donationFormState: {
+    ...defaultDonationFormState
+  }
 };
 
 export const types = createTypes(
@@ -71,7 +80,10 @@ export const types = createTypes(
     'updateComplete',
     'updateCurrentChallengeId',
     'updateFailed',
+    'updateDonationFormState',
     ...createAsyncTypes('fetchUser'),
+    ...createAsyncTypes('addDonation'),
+    ...createAsyncTypes('postChargeStripe'),
     ...createAsyncTypes('fetchProfileForUser'),
     ...createAsyncTypes('acceptTerms'),
     ...createAsyncTypes('showCert'),
@@ -112,6 +124,9 @@ export const preventBlockDonationRequests = createAction(
 export const preventProgressDonationRequests = createAction(
   types.preventProgressDonationRequests
 );
+export const updateDonationFormState = createAction(
+  types.updateDonationFormState
+);
 
 export const onlineStatusChange = createAction(types.onlineStatusChange);
 
@@ -133,6 +148,16 @@ export const fetchUser = createAction(types.fetchUser);
 export const fetchUserComplete = createAction(types.fetchUserComplete);
 export const fetchUserError = createAction(types.fetchUserError);
 
+export const addDonation = createAction(types.addDonation);
+export const addDonationComplete = createAction(types.addDonationComplete);
+export const addDonationError = createAction(types.addDonationError);
+
+export const postChargeStripe = createAction(types.postChargeStripe);
+export const postChargeStripeComplete = createAction(
+  types.postChargeStripeComplete
+);
+export const postChargeStripeError = createAction(types.postChargeStripeError);
+
 export const fetchProfileForUser = createAction(types.fetchProfileForUser);
 export const fetchProfileForUserComplete = createAction(
   types.fetchProfileForUserComplete
@@ -160,7 +185,6 @@ export const completedChallengesSelector = state =>
 export const completionCountSelector = state => state[ns].completionCount;
 export const currentChallengeIdSelector = state => state[ns].currentChallengeId;
 export const isDonatingSelector = state => userSelector(state).isDonating;
-
 export const isOnlineSelector = state => state[ns].isOnline;
 export const isSignedInSelector = state => !!state[ns].appUsername;
 export const isDonationModalOpenSelector = state => state[ns].showDonationModal;
@@ -168,12 +192,11 @@ export const canRequestBlockDonationSelector = state =>
   state[ns].canRequestBlockDonation;
 export const isBlockDonationModalSelector = state =>
   state[ns].isBlockDonationModal;
-
+export const donationFormStateSelector = state => state[ns].donationFormState;
 export const signInLoadingSelector = state =>
   userFetchStateSelector(state).pending;
 export const showCertSelector = state => state[ns].showCert;
 export const showCertFetchStateSelector = state => state[ns].showCertFetchState;
-
 export const shouldRequestDonationSelector = state => {
   const completedChallenges = completedChallengesSelector(state);
   const completionCount = completionCountSelector(state);
@@ -389,6 +412,56 @@ export const reducer = handleActions(
       ...state,
       canRequestBlockDonation: true
     }),
+    [types.updateDonationFormState]: (state, { payload }) => ({
+      ...state,
+      donationFormState: { ...state.donationFormState, ...payload }
+    }),
+    [types.addDonation]: state => ({
+      ...state,
+      donationFormState: { ...defaultDonationFormState, processing: true }
+    }),
+    [types.addDonationComplete]: state => {
+      const { appUsername } = state;
+      return {
+        ...state,
+        user: {
+          ...state.user,
+          [appUsername]: {
+            ...state.user[appUsername],
+            isDonating: true
+          }
+        },
+
+        donationFormState: { ...defaultDonationFormState, success: true }
+      };
+    },
+    [types.addDonationError]: (state, { payload }) => ({
+      ...state,
+      donationFormState: { ...defaultDonationFormState, error: payload }
+    }),
+    [types.postChargeStripe]: state => ({
+      ...state,
+      donationFormState: { ...defaultDonationFormState, processing: true }
+    }),
+    [types.postChargeStripeComplete]: state => {
+      const { appUsername } = state;
+      return {
+        ...state,
+        user: {
+          ...state.user,
+          [appUsername]: {
+            ...state.user[appUsername],
+            isDonating: true
+          }
+        },
+
+        donationFormState: { ...defaultDonationFormState, success: true }
+      };
+    },
+    [types.postChargeStripeError]: (state, { payload }) => ({
+      ...state,
+      donationFormState: { ...defaultDonationFormState, error: payload }
+    }),
     [types.fetchUser]: state => ({
       ...state,
       userFetchState: { ...defaultFetchState }

client/src/utils/ajax.js

@@ -62,7 +62,7 @@ export function postChargeStripe(body) {
   return post('/donate/charge-stripe', body);
 }
 
-export function verifySubscriptionPaypal(body) {
+export function addDonation(body) {
   return post('/donate/add-donation', body);
 }
 

config/donation-settings.js

@@ -14,11 +14,11 @@ const defaultAmount = {
   month: 500,
   onetime: 25000
 };
-const defaultStateConfig = {
+const defaultDonation = {
   donationAmount: defaultAmount['month'],
   donationDuration: 'month'
 };
-const modalDefaultStateConfig = {
+const modalDefaultDonation = {
   donationAmount: 500,
   donationDuration: 'month'
 };
@@ -123,11 +123,11 @@ module.exports = {
   durationsConfig,
   amountsConfig,
   defaultAmount,
-  defaultStateConfig,
+  defaultDonation,
   durationKeysConfig,
   donationOneTimeConfig,
   donationSubscriptionConfig,
-  modalDefaultStateConfig,
+  modalDefaultDonation,
   onetimeSKUConfig,
   paypalConfigTypes,
   paypalConfigurator,