fix(donate): remove isDontating check from year-end

api-server/server/boot/donate.js

@@ -273,16 +273,6 @@ export default function donateBoot(app, done) {
     };
 
     return Promise.resolve(fccUser)
-      .then(nonDonatingUser => {
-        const { isDonating } = nonDonatingUser;
-        if (isDonating) {
-          throw {
-            message: `User already has active donation(s).`,
-            type: 'AlreadyDonatingError'
-          };
-        }
-        return nonDonatingUser;
-      })
       .then(createCustomer)
       .then(customer => {
         return createOneTimeCharge(customer).then(charge => {
@@ -292,10 +282,7 @@ export default function donateBoot(app, done) {
       })
       .then(createAsyncUserDonation)
       .catch(err => {
-        if (
-          err.type === 'StripeCardError' ||
-          err.type === 'AlreadyDonatingError'
-        ) {
+        if (err.type === 'StripeCardError') {
           return res.status(402).send({ error: err.message });
         }
         return res

client/src/components/Donation/components/DonateCompletion.js

@@ -9,16 +9,25 @@ const propTypes = {
   error: PropTypes.string,
   processing: PropTypes.bool,
   reset: PropTypes.func.isRequired,
-  success: PropTypes.bool
+  success: PropTypes.bool,
+  yearEndGift: PropTypes.bool
 };
 
-function DonateCompletion({ processing, reset, success, error = null }) {
+function DonateCompletion({
+  processing,
+  reset,
+  success,
+  error = null,
+  yearEndGift = false
+}) {
   /* eslint-disable no-nested-ternary */
   const style = processing ? 'info' : success ? 'success' : 'danger';
   const heading = processing
     ? 'We are processing your donation.'
     : success
-    ? 'Thank you for being a supporter.'
+    ? yearEndGift
+      ? 'Thank you for your donation.'
+      : 'Thank you for being a supporter.'
     : 'Something went wrong with your donation.';
   return (
     <Alert bsStyle={style} className='donation-completion'>
@@ -34,7 +43,7 @@ function DonateCompletion({ processing, reset, success, error = null }) {
             name='line-scale'
           />
         )}
-        {success && (
+        {success && !yearEndGift && (
           <div>
             <p>
               Your donation will support free technology education for people
@@ -42,6 +51,11 @@ function DonateCompletion({ processing, reset, success, error = null }) {
             </p>
           </div>
         )}
+        {success && yearEndGift && (
+          <div>
+            <p>You should receive a receipt in your email.</p>
+          </div>
+        )}
         {error && <p>{error}</p>}
       </div>
       <div className='donation-completion-buttons'>

client/src/components/Donation/components/DonateFormChildViewForHOC.js

@@ -223,12 +223,14 @@ class DonateFormChildViewForHOC extends Component {
     const {
       donationState: { processing, success, error }
     } = this.state;
+    const { yearEndGift } = this.props;
     if (processing || success || error) {
       return this.renderCompletion({
         processing,
         success,
         error,
-        reset: this.resetDonation
+        reset: this.resetDonation,
+        yearEndGift
       });
     }
     return this.renderDonateForm();

client/src/components/YearEndGift/YearEndDonationForm.js

@@ -2,8 +2,6 @@
 /* eslint-disable react/jsx-sort-props */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
 import {
   Row,
   Col,
@@ -17,20 +15,12 @@ import { Spacer } from '../helpers';
 
 // eslint-disable-next-line max-len
 import DonateFormChildViewForHOC from '../Donation/components/DonateFormChildViewForHOC';
-import { userSelector } from '../../redux';
 
 import './YearEndGift.css';
 import '../Donation/Donation.css';
-import DonateCompletion from '../Donation/components/DonateCompletion.js';
 import { stripePublicKey } from '../../../../config/env.json';
 import { stripeScriptLoader } from '../../utils/scriptLoaders';
 
-const defaultYearEndStateConfig = {
-  donationAmount: 25000,
-  donationDuration: 'onetime',
-  paymentType: 'Card'
-};
-
 const numToCommas = num =>
   num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
 
@@ -43,23 +33,14 @@ const propTypes = {
   })
 };
 
-const mapStateToProps = createSelector(
-  userSelector,
-  ({ isDonating }) => ({
-    isDonating
-  })
-);
-
 class YearEndDonationForm extends Component {
   constructor(...args) {
     super(...args);
     this.state = {
-      ...defaultYearEndStateConfig,
+      donationAmount: 25000,
       showOtherAmounts: false,
-      isDonating: this.props.isDonating,
       stripe: null
     };
-    this.handleSelectPaymentType = this.handleSelectPaymentType.bind(this);
     this.handleStripeLoad = this.handleStripeLoad.bind(this);
     this.getDonationButtonLabel = this.getDonationButtonLabel.bind(this);
     this.handleSelectAmount = this.handleSelectAmount.bind(this);
@@ -96,61 +77,33 @@ class YearEndDonationForm extends Component {
     }
   }
 
-  handleSelectPaymentType(e) {
-    this.setState({
-      paymentType: e.currentTarget.value
-    });
-  }
-
-  getFormatedAmountLabel(amount) {
-    return `$${numToCommas(amount / 100)}`;
-  }
-
   getDonationButtonLabel() {
-    const { donationAmount, donationDuration } = this.state;
+    const { donationAmount } = this.state;
     let donationBtnLabel = `Confirm your donation`;
-    if (donationDuration === 'onetime') {
-      donationBtnLabel = `Confirm your one-time donation of ${this.getFormatedAmountLabel(
-        donationAmount
-      )}`;
-    } else {
-      donationBtnLabel = `Confirm your donation of ${this.getFormatedAmountLabel(
-        donationAmount
-      )} ${donationDuration === 'month' ? 'per month' : 'per year'}`;
-    }
+    donationBtnLabel = `Confirm your one-time donation of $${numToCommas(
+      donationAmount / 100
+    )}`;
     return donationBtnLabel;
   }
 
   renderDonationOptions() {
-    const {
-      donationAmount,
-      donationDuration,
-      paymentType,
-      stripe
-    } = this.state;
+    const { donationAmount, stripe } = this.state;
 
     const { showCloseBtn, defaultTheme } = this.props;
     return (
       <div>
-        {paymentType === 'Card' ? (
-          <StripeProvider stripe={stripe}>
-            <Elements>
-              <DonateFormChildViewForHOC
-                showCloseBtn={showCloseBtn}
-                defaultTheme={defaultTheme}
-                donationAmount={donationAmount}
-                donationDuration={donationDuration}
-                getDonationButtonLabel={this.getDonationButtonLabel}
-                yearEndGift={true}
-              />
-            </Elements>
-          </StripeProvider>
-        ) : (
-          <p>
-            PayPal is currently unavailable. Please use a Credit/Debit card
-            instead.
-          </p>
-        )}
+        <StripeProvider stripe={stripe}>
+          <Elements>
+            <DonateFormChildViewForHOC
+              showCloseBtn={showCloseBtn}
+              defaultTheme={defaultTheme}
+              donationAmount={donationAmount}
+              donationDuration='onetime'
+              getDonationButtonLabel={this.getDonationButtonLabel}
+              yearEndGift={true}
+            />
+          </Elements>
+        </StripeProvider>
       </div>
     );
   }
@@ -238,9 +191,9 @@ class YearEndDonationForm extends Component {
           type='submit'
           name='submit'
           className='btn btn-block'
-          title='PayPal - The safer, easier way to pay online!'
-          alt='Donate with PayPal button'
-          value='Make a PayPal donation'
+          title='Donate to freeCodeCamp.org using PayPal'
+          alt='Donate to freeCodeCamp.org using PayPal'
+          value='Donate using PayPal'
         />
       </form>
     );
@@ -285,25 +238,12 @@ class YearEndDonationForm extends Component {
   }
 
   render() {
-    const { isDonating } = this.props;
-    if (isDonating) {
-      return (
-        <Row>
-          <Col sm={10} smOffset={1} xs={12}>
-            <DonateCompletion success={true} />
-          </Col>
-        </Row>
-      );
-    }
-
-    console.log(this.state.donationAmount);
-
     return (
       <Row>
         <Col sm={10} smOffset={1} xs={12}>
           <b>
-            Thank you again for supporting freeCodeCamp.org with a one-time year
-            end gift. Please enter your credit card information below.
+            Thank you again for supporting freeCodeCamp.org with a one-time
+            year-end gift. Please enter your credit card information below.
           </b>
           <Spacer />
         </Col>
@@ -342,7 +282,4 @@ class YearEndDonationForm extends Component {
 YearEndDonationForm.displayName = 'YearEndDonationForm';
 YearEndDonationForm.propTypes = propTypes;
 
-export default connect(
-  mapStateToProps,
-  null
-)(YearEndDonationForm);
+export default YearEndDonationForm;

client/src/components/YearEndGift/index.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import { Grid } from '@freecodecamp/react-bootstrap';
-import { Spacer, FullWidthRow } from '../../components/helpers';
-import YearEndDonationForm from './YearEndDonationForm';
-
-const DonateText = () => {
-  return (
-    <Grid>
-      <main>
-        <Spacer />
-        <FullWidthRow>
-          <h1 className='text-center'>Become a Supporter</h1>
-          <YearEndDonationForm />
-        </FullWidthRow>
-        <Spacer />
-        <Spacer />
-      </main>
-    </Grid>
-  );
-};
-
-DonateText.displayName = '';
-
-export default DonateText;

client/src/pages/year-end-gift-successful.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import Helmet from 'react-helmet';
+import { Grid, Alert } from '@freecodecamp/react-bootstrap';
+
+import { Spacer, FullWidthRow } from '../components/helpers';
+
+import '../components/Donation/Donation.css';
+
+function YearEndGiftPage() {
+  return (
+    <>
+      <Helmet title='Support our nonprofit | freeCodeCamp.org' />
+      <Grid>
+        <main>
+          <Spacer size={3} />
+          <FullWidthRow>
+            <Alert bsStyle='success' className='donation-completion'>
+              <div>
+                <h4>
+                  <b>Thank you for your donation.</b>
+                </h4>
+                <p>You should receive a receipt in your email.</p>
+              </div>
+            </Alert>
+          </FullWidthRow>
+          <Spacer size={2} />
+        </main>
+      </Grid>
+    </>
+  );
+}
+
+YearEndGiftPage.displayName = 'YearEndGiftPage';
+
+export default YearEndGiftPage;

client/src/pages/year-end-gift.js

@@ -1,12 +1,24 @@
 import React from 'react';
 import Helmet from 'react-helmet';
-import YearEndGift from '../components/YearEndGift';
+import { Grid } from '@freecodecamp/react-bootstrap';
+
+import { Spacer, FullWidthRow } from '../components/helpers';
+import YearEndDonationForm from '../components/YearEndGift/YearEndDonationForm';
 
 function YearEndGiftPage() {
   return (
     <>
       <Helmet title='Support our nonprofit | freeCodeCamp.org' />
-      <YearEndGift />
+      <Grid>
+        <main>
+          <Spacer />
+          <FullWidthRow>
+            <YearEndDonationForm />
+          </FullWidthRow>
+          <Spacer />
+          <Spacer />
+        </main>
+      </Grid>
     </>
   );
 }