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

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

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) {
-      this.props.onDonationStateChange(
-        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);
-        });
+    if (!skipAddDonation || isSubscription) {
+      this.props.addDonation(data);
     }
+
+    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(
-            false,
-            false,
-            `Uh - oh. It looks like your transaction didn't go through. Could you please try again?`
-          );
+          this.props.onDonationStateChange({
+            processing: false,
+            success: false,
+            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,