gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(client): combine donate & donate-other pages into a single page (#36137)

Browse Source
This commit is contained in:
Charles Morgan
2019-06-08 17:58:16 -07:00
committed by mrugesh
parent b6a68d8bdf
commit 08e9c650d9
2 changed files with 24 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
client/src/pages/donate-other.js → client/src/components/Donation/components/DonateOther.js
View File

@ -1,9 +1,8 @@
import React, { Component, Fragment } from 'react'; import React, { Component, Fragment } from 'react';
import Helmet from 'react-helmet';
import { Grid, Col, Row } from '@freecodecamp/react-bootstrap'; import { Grid, Col, Row } from '@freecodecamp/react-bootstrap';
import ReactGA from '../analytics/index.js'; import ReactGA from '../../../analytics/index.js';
import { Link, Spacer } from '../components/helpers'; import { Link, Spacer } from '../../helpers';
const paypalMonthlyDonations = [ const paypalMonthlyDonations = [
{ {
@ -51,7 +50,7 @@ const paypalOneTimeDonation = {
defaultValue: 'Make a one-time donation' defaultValue: 'Make a one-time donation'
}; };
class DonateOtherPage extends Component { class DonateOther extends Component {
renderForm(item) { renderForm(item) {
return ( return (
<form <form
@ -87,7 +86,6 @@ class DonateOtherPage extends Component {
render() { render() {
return ( return (
<Fragment> <Fragment>
<Helmet title='Other ways to donate | freeCodeCamp.org' />
<Spacer /> <Spacer />
<Grid> <Grid>
<Row> <Row>
@ -212,9 +210,7 @@ class DonateOtherPage extends Component {
</h3> </h3>
<Spacer /> <Spacer />
<div className='text-center'> <div className='text-center'>
<Link to='/donate'> <Link to='/donate'>Donate using a Credit or Debit card</Link>
Or donate using a Credit or Debit Card.
</Link>
</div> </div>
<Spacer /> <Spacer />
</Col> </Col>
@ -226,6 +222,6 @@ class DonateOtherPage extends Component {
/* eslint-enable max-len */ /* eslint-enable max-len */
} }
DonateOtherPage.displayName = 'DonateOtherPage'; DonateOther.displayName = 'DonateOther';
export default DonateOtherPage; export default DonateOther;

24
client/src/pages/donate.js
View File

@ -1,12 +1,12 @@
import React, { Component, Fragment } from 'react'; import React, { Component, Fragment } from 'react';
import Helmet from 'react-helmet'; import Helmet from 'react-helmet';
import { StripeProvider, Elements } from 'react-stripe-elements'; import { StripeProvider, Elements } from 'react-stripe-elements';
import { Row, Col } from '@freecodecamp/react-bootstrap'; import { Row, Col, Button } from '@freecodecamp/react-bootstrap';
import { Link } from 'gatsby';
import { stripePublicKey } from '../../config/env.json'; import { stripePublicKey } from '../../config/env.json';
import Spacer from '../components/helpers/Spacer'; import Spacer from '../components/helpers/Spacer';
import DonateOther from '../components/Donation/components/DonateOther';
import DonateForm from '../components/Donation/components/DonateForm'; import DonateForm from '../components/Donation/components/DonateForm';
import DonateText from '../components/Donation/components/DonateText'; import DonateText from '../components/Donation/components/DonateText';
import PoweredByStripe from '../components/Donation/components/poweredByStripe'; import PoweredByStripe from '../components/Donation/components/poweredByStripe';
@ -17,9 +17,11 @@ class DonatePage extends Component {
constructor(...props) { constructor(...props) {
super(...props); super(...props);
this.state = { this.state = {
stripe: null stripe: null,
showOtherOptions: false
}; };
this.handleStripeLoad = this.handleStripeLoad.bind(this); this.handleStripeLoad = this.handleStripeLoad.bind(this);
this.toggleOtherOptions = this.toggleOtherOptions.bind(this);
} }
componentDidMount() { componentDidMount() {
if (window.Stripe) { if (window.Stripe) {
@ -52,7 +54,14 @@ class DonatePage extends Component {
})); }));
} }
toggleOtherOptions() {
this.setState(({ showOtherOptions }) => ({
showOtherOptions: !showOtherOptions
}));
}
render() { render() {
const { showOtherOptions, stripe } = this.state;
return ( return (
<Fragment> <Fragment>
<Helmet title='Support our nonprofit | freeCodeCamp.org' /> <Helmet title='Support our nonprofit | freeCodeCamp.org' />
@ -64,19 +73,22 @@ class DonatePage extends Component {
</Col> </Col>
<Col sm={6} smOffset={3} xs={12}> <Col sm={6} smOffset={3} xs={12}>
<hr /> <hr />
<StripeProvider stripe={this.state.stripe}> <StripeProvider stripe={stripe}>
<Elements> <Elements>
<DonateForm /> <DonateForm />
</Elements> </Elements>
</StripeProvider> </StripeProvider>
<div className='text-center'> <div className='text-center'>
<Link to='/donate-other'>Other ways to donate.</Link>
<Spacer />
<PoweredByStripe /> <PoweredByStripe />
<Spacer />
<Button onClick={this.toggleOtherOptions}>
{`${showOtherOptions ? 'Hide' : 'Show'} other ways to donate.`}
</Button>
</div> </div>
<Spacer /> <Spacer />
</Col> </Col>
</Row> </Row>
{showOtherOptions && <DonateOther />}
</Fragment> </Fragment>
); );
} }