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

fix: replace donate page

Browse Source
This commit is contained in:
Ahmad Abdolsaheb
2019-12-10 18:51:15 +01:00
committed by mrugesh
parent 00f18dc21c
commit d7b7f0bfde
2 changed files with 76 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
client/src/components/Donation/components/DonateText.js
View File

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

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

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