feat: add paypal donation to modals and certificates

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

@@ -211,7 +211,7 @@ class ShowCertification extends Component {
       <Grid className='donation-section'>
         {!isDonationSubmitted && (
           <Row>
-            <Col sm={10} smOffset={1} xs={12}>
+            <Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}>
               <p>
                 Only you can see this message. Congratulations on earning this
                 certification. It’s no easy task. Running freeCodeCamp isn’t

client/src/components/Donation/DonateCompletion.js

@@ -40,10 +40,6 @@ function DonateCompletion({ processing, reset, success, error = null }) {
               Your donations will support free technology education for people
               all over the world.
             </p>
-            <p>
-              You can update your supporter status at any time from your
-              settings page.
-            </p>
           </div>
         )}
         {error && <p>{error}</p>}

client/src/components/Donation/DonateForm.js

@@ -78,7 +78,6 @@ class DonateForm extends Component {
     this.getDonationButtonLabel = this.getDonationButtonLabel.bind(this);
     this.handleSelectAmount = this.handleSelectAmount.bind(this);
     this.handleSelectDuration = this.handleSelectDuration.bind(this);
-    this.handleSelectPaymentType = this.handleSelectPaymentType.bind(this);
     this.hideAmountOptionsCB = this.hideAmountOptionsCB.bind(this);
   }
 
@@ -120,12 +119,6 @@ class DonateForm extends Component {
     this.setState({ donationAmount });
   }
 
-  handleSelectPaymentType(e) {
-    this.setState({
-      paymentType: e.currentTarget.value
-    });
-  }
-
   renderAmountButtons(duration) {
     return this.amounts[duration].map(amount => (
       <ToggleButton
@@ -193,28 +186,22 @@ class DonateForm extends Component {
 
   renderDonationOptions() {
     const { stripe, handleProcessing } = this.props;
-    const { donationAmount, donationDuration, paymentType } = this.state;
+    const { donationAmount, donationDuration } = this.state;
     return (
       <div>
-        {paymentType === 'Card' ? (
-          <StripeProvider stripe={stripe}>
-            <Elements>
-              <DonateFormChildViewForHOC
-                defaultTheme='default'
-                donationAmount={donationAmount}
-                donationDuration={donationDuration}
-                getDonationButtonLabel={this.getDonationButtonLabel}
-                handleProcessing={handleProcessing}
-                hideAmountOptionsCB={this.hideAmountOptionsCB}
-              />
-            </Elements>
-          </StripeProvider>
-        ) : (
-          <p>
-            PayPal is currently unavailable. Please use a Credit/Debit card
-            instead.
-          </p>
-        )}
+        <StripeProvider stripe={stripe}>
+          <Elements>
+            <DonateFormChildViewForHOC
+              defaultTheme='default'
+              donationAmount={donationAmount}
+              donationDuration={donationDuration}
+              getDonationButtonLabel={this.getDonationButtonLabel}
+              handleProcessing={handleProcessing}
+              hideAmountOptionsCB={this.hideAmountOptionsCB}
+            />
+          </Elements>
+        </StripeProvider>
+        <Spacer size={2} />
       </div>
     );
   }

client/src/components/Donation/DonationModal.js

@@ -90,12 +90,7 @@ function DonateModal({
     });
   }
 
-  const donationText = (
-    <b>
-      Become a $5 / month supporter and help us create even more learning
-      resources for you and your family.
-    </b>
-  );
+  const donationText = <b>Become an annual supporter of our nonprofit.</b>;
   const blockDonationText = (
     <div className='block-modal-text'>
       <div className='donation-icon-container'>
@@ -105,6 +100,7 @@ function DonateModal({
         {!closeLabel && (
           <Col sm={10} smOffset={1} xs={12}>
             <b>Nicely done. You just completed {blockNameify(block)}. </b>
+            <br />
             {donationText}
           </Col>
         )}

client/src/components/Donation/MinimalDonateForm.js

@@ -130,17 +130,18 @@ class MinimalDonateForm extends Component {
     return (
       <Row>
         <Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}>
+          <Spacer />
+          <b>Confirm your donation of $60 / year with PayPal:</b>
+          <Spacer />
           <PaypalButton
             handleProcessing={handleProcessing}
             onDonationStateChange={this.onDonationStateChange}
           />
         </Col>
-        <Col sm={10} smOffset={1} xs={12}>
+        <Col lg={8} lgOffset={2} 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
@@ -148,7 +149,7 @@ class MinimalDonateForm extends Component {
                 donationAmount={donationAmount}
                 donationDuration={donationDuration}
                 getDonationButtonLabel={() =>
-                  `Confirm your donation of $5 / month`
+                  `Confirm your donation of $60 / year`
                 }
                 handleProcessing={handleProcessing}
               />

client/src/pages/donate.js

@@ -12,7 +12,6 @@ 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,
@@ -132,14 +131,6 @@ 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 />

client/src/redux/index.js

@@ -181,6 +181,12 @@ export const shouldRequestDonationSelector = state => {
   const isDonating = isDonatingSelector(state);
   const canRequestBlockDonation = canRequestBlockDonationSelector(state);
 
+  const debugModal = localStorage.getItem('DEBUG_DONATE_MODAL', false);
+  console.log(debugModal);
+  if (debugModal === 'yes-please') {
+    return true;
+  }
+
   // don't request donation if already donating
   if (isDonating) return false;