fix: replace donate page
This commit is contained in:
committed by
mrugesh
parent
00f18dc21c
commit
d7b7f0bfde
@ -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>
|
||||
<p>
|
||||
In 2019 alone, we provided 18 million hours of free education to
|
||||
people around the world.
|
||||
</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.
|
||||
</p>
|
||||
<p>
|
||||
When you donate to freeCodeCamp, you help people learn new skills and
|
||||
provide for their families.
|
||||
</p>
|
||||
<p>
|
||||
You also help us create new resources for you to use to expand your
|
||||
own technology skills.
|
||||
</p>
|
||||
</Col>
|
||||
</Row>
|
||||
<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>
|
||||
We get almost all of our budget from our supporters, who donate $5 per
|
||||
month to our nonprofit.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
To become a supporter, just{' '}
|
||||
<Link to='/learn'>start going through the curriculum</Link> and you will
|
||||
see a prompt to donate.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
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>
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -1,105 +1,29 @@
|
||||
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} />;
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
function DonatePage() {
|
||||
return (
|
||||
<Fragment>
|
||||
<Helmet title='Support our nonprofit | freeCodeCamp.org' />
|
||||
<Grid>
|
||||
<main>
|
||||
<Spacer />
|
||||
<FullWidthRow>
|
||||
<h1 className='text-center'>Become a Supporter</h1>
|
||||
<DonateText />
|
||||
</FullWidthRow>
|
||||
<Spacer />
|
||||
<Spacer />
|
||||
</main>
|
||||
</Grid>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
DonatePage.displayName = 'DonatePage';
|
||||
DonatePage.propTypes = propTypes;
|
||||
|
||||
export default connect(mapStateToProps)(DonatePage);
|
||||
export default DonatePage;
|
||||
|
Reference in New Issue
Block a user