From 08e9c650d95829c8e1e1f776a5620cce3a53ff90 Mon Sep 17 00:00:00 2001
From: Charles Morgan <webdevdaemon@gmail.com>
Date: Sat, 8 Jun 2019 17:58:16 -0700
Subject: [PATCH] fix(client): combine donate & donate-other pages into a
 single page (#36137)

---
 .../Donation/components/DonateOther.js}       | 16 +++++--------
 client/src/pages/donate.js                    | 24 ++++++++++++++-----
 2 files changed, 24 insertions(+), 16 deletions(-)
 rename client/src/{pages/donate-other.js => components/Donation/components/DonateOther.js} (94%)

diff --git a/client/src/pages/donate-other.js b/client/src/components/Donation/components/DonateOther.js
similarity index 94%
rename from client/src/pages/donate-other.js
rename to client/src/components/Donation/components/DonateOther.js
index 4474e64d9e..2e7851f83d 100644
--- a/client/src/pages/donate-other.js
+++ b/client/src/components/Donation/components/DonateOther.js
@@ -1,9 +1,8 @@
 import React, { Component, Fragment } from 'react';
-import Helmet from 'react-helmet';
 import { Grid, Col, Row } from '@freecodecamp/react-bootstrap';
 
-import ReactGA from '../analytics/index.js';
-import { Link, Spacer } from '../components/helpers';
+import ReactGA from '../../../analytics/index.js';
+import { Link, Spacer } from '../../helpers';
 
 const paypalMonthlyDonations = [
   {
@@ -51,7 +50,7 @@ const paypalOneTimeDonation = {
   defaultValue: 'Make a one-time donation'
 };
 
-class DonateOtherPage extends Component {
+class DonateOther extends Component {
   renderForm(item) {
     return (
       <form
@@ -87,7 +86,6 @@ class DonateOtherPage extends Component {
   render() {
     return (
       <Fragment>
-        <Helmet title='Other ways to donate | freeCodeCamp.org' />
         <Spacer />
         <Grid>
           <Row>
@@ -212,9 +210,7 @@ class DonateOtherPage extends Component {
               </h3>
               <Spacer />
               <div className='text-center'>
-                <Link to='/donate'>
-                  Or donate using a Credit or Debit Card.
-                </Link>
+                <Link to='/donate'>Donate using a Credit or Debit card</Link>
               </div>
               <Spacer />
             </Col>
@@ -226,6 +222,6 @@ class DonateOtherPage extends Component {
   /* eslint-enable max-len */
 }
 
-DonateOtherPage.displayName = 'DonateOtherPage';
+DonateOther.displayName = 'DonateOther';
 
-export default DonateOtherPage;
+export default DonateOther;
diff --git a/client/src/pages/donate.js b/client/src/pages/donate.js
index 8b073fa38b..3256f09003 100644
--- a/client/src/pages/donate.js
+++ b/client/src/pages/donate.js
@@ -1,12 +1,12 @@
 import React, { Component, Fragment } from 'react';
 import Helmet from 'react-helmet';
 import { StripeProvider, Elements } from 'react-stripe-elements';
-import { Row, Col } from '@freecodecamp/react-bootstrap';
-import { Link } from 'gatsby';
+import { Row, Col, Button } from '@freecodecamp/react-bootstrap';
 
 import { stripePublicKey } from '../../config/env.json';
 
 import Spacer from '../components/helpers/Spacer';
+import DonateOther from '../components/Donation/components/DonateOther';
 import DonateForm from '../components/Donation/components/DonateForm';
 import DonateText from '../components/Donation/components/DonateText';
 import PoweredByStripe from '../components/Donation/components/poweredByStripe';
@@ -17,9 +17,11 @@ class DonatePage extends Component {
   constructor(...props) {
     super(...props);
     this.state = {
-      stripe: null
+      stripe: null,
+      showOtherOptions: false
     };
     this.handleStripeLoad = this.handleStripeLoad.bind(this);
+    this.toggleOtherOptions = this.toggleOtherOptions.bind(this);
   }
   componentDidMount() {
     if (window.Stripe) {
@@ -52,7 +54,14 @@ class DonatePage extends Component {
     }));
   }
 
+  toggleOtherOptions() {
+    this.setState(({ showOtherOptions }) => ({
+      showOtherOptions: !showOtherOptions
+    }));
+  }
+
   render() {
+    const { showOtherOptions, stripe } = this.state;
     return (
       <Fragment>
         <Helmet title='Support our nonprofit | freeCodeCamp.org' />
@@ -64,19 +73,22 @@ class DonatePage extends Component {
           </Col>
           <Col sm={6} smOffset={3} xs={12}>
             <hr />
-            <StripeProvider stripe={this.state.stripe}>
+            <StripeProvider stripe={stripe}>
               <Elements>
                 <DonateForm />
               </Elements>
             </StripeProvider>
             <div className='text-center'>
-              <Link to='/donate-other'>Other ways to donate.</Link>
-              <Spacer />
               <PoweredByStripe />
+              <Spacer />
+              <Button onClick={this.toggleOtherOptions}>
+                {`${showOtherOptions ? 'Hide' : 'Show'} other ways to donate.`}
+              </Button>
             </div>
             <Spacer />
           </Col>
         </Row>
+        {showOtherOptions && <DonateOther />}
       </Fragment>
     );
   }