fix: replace donate page

client/src/components/Donation/components/DonateText.js

@@ -1,30 +1,62 @@
 import React from 'react';
-import { Row, Col } from '@freecodecamp/react-bootstrap';
+
+import { Spacer, Link } from '../../../components/helpers';
 
 const DonateText = () => {
   return (
-    <Row className='donate-text'>
-      <Col sm={10} smOffset={1} xs={12}>
-        <p>freeCodeCamp is a highly efficient education nonprofit.</p>
+    <div className='donate-text'>
+      <Spacer />
+      <h3>How to donate to freeCodeCamp.org</h3>
+
+      <p>freeCodeCamp is a tax-exempt 501(c)(3) public charity.</p>
+
       <p>
-          In 2019 alone, we provided 18 million hours of free education to
-          people around the world.
+        We get almost all of our budget from our supporters, who donate $5 per
+        month to our nonprofit.
       </p>
+
       <p>
-          Since freeCodeCamp's total budget is only $373,000, that means every
-          dollar you donate to freeCodeCamp translates into 50 hours worth of
-          technology education.
+        To become a supporter, just{' '}
+        <Link to='/learn'>start going through the curriculum</Link> and you will
+        see a prompt to donate.
       </p>
+
       <p>
-          When you donate to freeCodeCamp, you help people learn new skills and
-          provide for their families.
+        If you want to make a larger one-time donation, set up employer
+        matching, or support us in other ways, email team@freecodecamp.org and
+        we can help make that happen.
       </p>
+      <Spacer />
+
+      <h3> How does freeCodeCamp use these donations?</h3>
+
       <p>
-          You also help us create new resources for you to use to expand your
-          own technology skills.
+        100% of donations go to pay for servers, and to pay teachers and
+        developers who help build our learning resources.
       </p>
-      </Col>
-    </Row>
+
+      <p>
+        We earned the 2019 Platinum Seal of Transparency from Guidestar.org. You
+        can view all our nonprofit's details and download our accounting
+        documents [there](https://www.guidestar.org/profile/82-0779546).
+      </p>
+      <Spacer />
+
+      <h3> How do I stop my monthly recurring donation.</h3>
+
+      <p>
+        Easy. Just forward a donation receipt to team@freecodecamp.org and we'll
+        stop it.
+      </p>
+
+      <Spacer />
+      <h3>How do I restart my monthly recurring donation?</h3>
+
+      <p>
+        Email one of your old donation receipts to team@freecodecamp.org and
+        we'll restart it for you.
+      </p>
+    </div>
   );
 };
 

client/src/pages/donate.js

@@ -1,78 +1,11 @@
-import React, { Component, Fragment } from 'react';
+import React, { Fragment } from 'react';
 import Helmet from 'react-helmet';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { Grid, Row, Col } from '@freecodecamp/react-bootstrap';
+import { Grid } from '@freecodecamp/react-bootstrap';
 
-import { stripePublicKey } from '../../config/env.json';
-import { Spacer, Loader, FullWidthRow } from '../components/helpers';
-import DonateForm from '../components/Donation/components/DonateForm';
+import { Spacer, FullWidthRow } from '../components/helpers';
 import DonateText from '../components/Donation/components/DonateText';
-import { signInLoadingSelector, userSelector } from '../redux';
-import { stripeScriptLoader } from '../utils/scriptLoaders';
-
-const propTypes = {
-  isDonating: PropTypes.bool,
-  showLoading: PropTypes.bool.isRequired
-};
-
-const mapStateToProps = createSelector(
-  userSelector,
-  signInLoadingSelector,
-  ({ isDonating }, showLoading) => ({
-    isDonating,
-    showLoading
-  })
-);
-
-export class DonatePage extends Component {
-  constructor(...props) {
-    super(...props);
-    this.state = {
-      stripe: null
-    };
-
-    this.handleStripeLoad = this.handleStripeLoad.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)
-      }));
-    }
-  }
-
-  render() {
-    const { stripe } = this.state;
-    const { showLoading } = this.props;
-
-    if (showLoading) {
-      return <Loader fullScreen={true} />;
-    }
 
+function DonatePage() {
   return (
     <Fragment>
       <Helmet title='Support our nonprofit | freeCodeCamp.org' />
@@ -81,25 +14,16 @@ export class DonatePage extends Component {
           <Spacer />
           <FullWidthRow>
             <h1 className='text-center'>Become a Supporter</h1>
+            <DonateText />
           </FullWidthRow>
           <Spacer />
-            <Row>
-              <Col md={6}>
-                <DonateForm stripe={stripe} />
-              </Col>
-              <Col md={6}>
-                <DonateText />
-              </Col>
-            </Row>
           <Spacer />
         </main>
       </Grid>
     </Fragment>
   );
 }
-}
 
 DonatePage.displayName = 'DonatePage';
-DonatePage.propTypes = propTypes;
 
-export default connect(mapStateToProps)(DonatePage);
+export default DonatePage;