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

fix(donate): unify layouts and navigation for consitency (#37795)

Browse Source 
This commit updates the layouts and the styles to be consistent with the rest of the application. This also ensures now that the gatsby navigation is used for smoother transtions.
This commit is contained in:
mrugesh
2019-11-21 15:00:22 +05:30
committed by GitHub
parent c25916c9a2
commit 06a26861f6
7 changed files with 136 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
client/src/client-only-routes/ShowSettings.js
View File

@ -24,6 +24,7 @@ import Portfolio from '../components/settings/Portfolio';
import Honesty from '../components/settings/Honesty'; import Honesty from '../components/settings/Honesty';
import Certification from '../components/settings/Certification'; import Certification from '../components/settings/Certification';
import DangerZone from '../components/settings/DangerZone'; import DangerZone from '../components/settings/DangerZone';
import SectionHeader from '../components/settings/SectionHeader.js';
const propTypes = { const propTypes = {
createFlashMessage: PropTypes.func.isRequired, createFlashMessage: PropTypes.func.isRequired,
@ -54,6 +55,7 @@ const propTypes = {
isApisMicroservicesCert: PropTypes.bool, isApisMicroservicesCert: PropTypes.bool,
isBackEndCert: PropTypes.bool, isBackEndCert: PropTypes.bool,
isDataVisCert: PropTypes.bool, isDataVisCert: PropTypes.bool,
isDonating: PropTypes.bool,
isEmailVerified: PropTypes.bool, isEmailVerified: PropTypes.bool,
isFrontEndCert: PropTypes.bool, isFrontEndCert: PropTypes.bool,
isFrontEndLibsCert: PropTypes.bool, isFrontEndLibsCert: PropTypes.bool,
@ -122,6 +124,7 @@ export function ShowSettings(props) {
user: { user: {
completedChallenges, completedChallenges,
email, email,
isDonating,
is2018DataVisCert, is2018DataVisCert,
isApisMicroservicesCert, isApisMicroservicesCert,
isJsAlgoDataStructCert, isJsAlgoDataStructCert,
@ -161,7 +164,7 @@ export function ShowSettings(props) {
return <Loader fullScreen={true} />; return <Loader fullScreen={true} />;
} }
if (!showLoading && !isSignedIn) { if (!isSignedIn) {
navigate(`${apiLocation}/signin?returnTo=settings`); navigate(`${apiLocation}/signin?returnTo=settings`);
return <Loader fullScreen={true} />; return <Loader fullScreen={true} />;
} }
@ -215,6 +218,20 @@ export function ShowSettings(props) {
updateQuincyEmail={updateQuincyEmail} updateQuincyEmail={updateQuincyEmail}
/> />
<Spacer /> <Spacer />
{isDonating ? (
<div>
<SectionHeader>Donation Settings</SectionHeader>
<FullWidthRow className='button-group'>
<Link
className='btn-invert btn btn-lg btn-primary btn-block'
to={`/donation/settings`}
>
Manage your existing donations
</Link>
</FullWidthRow>
<Spacer />
</div>
) : null}
<Internet <Internet
githubProfile={githubProfile} githubProfile={githubProfile}
linkedin={linkedin} linkedin={linkedin}

3
client/src/components/Donation/Donation.css
View File

@ -159,3 +159,6 @@ li.disabled > a {
[name='payment-method'] { [name='payment-method'] {
font-family: 'Lato', sans-serif; font-family: 'Lato', sans-serif;
} }
.servicebot-embed-panel .panel {
padding: 20px;
}

2
client/src/components/Intro/index.js
View File

@ -57,7 +57,7 @@ function Intro({
View my Portfolio View my Portfolio
</Link> </Link>
<Link className='btn btn-lg btn-primary btn-block' to='/settings'> <Link className='btn btn-lg btn-primary btn-block' to='/settings'>
Update my settings Update my account settings
</Link> </Link>
</FullWidthRow> </FullWidthRow>
</Row> </Row>

2
client/src/components/profile/Profile.js
View File

@ -175,7 +175,7 @@ function Profile({ user, isSessionUser, navigate }) {
{isSessionUser ? ( {isSessionUser ? (
<FullWidthRow className='button-group'> <FullWidthRow className='button-group'>
<Link className='btn btn-lg btn-primary btn-block' to='/settings'> <Link className='btn btn-lg btn-primary btn-block' to='/settings'>
Update my settings Update my account settings
</Link> </Link>
<Button <Button
block={true} block={true}

2
client/src/components/profile/Profile.test.js
View File

@ -59,7 +59,7 @@ describe('<Profile/>', () => {
it('renders the settings button on your own profile', () => { it('renders the settings button on your own profile', () => {
const { getByText } = render(<Profile {...myProfileProps} />); const { getByText } = render(<Profile {...myProfileProps} />);
expect(getByText('Update my settings')).toHaveAttribute( expect(getByText('Update my account settings')).toHaveAttribute(
'href', 'href',
'/settings' '/settings'
); );

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

@ -3,10 +3,10 @@ import Helmet from 'react-helmet';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
import { Grid, Row, Col, Button } from '@freecodecamp/react-bootstrap'; import { Grid, Row, Col } from '@freecodecamp/react-bootstrap';
import { stripePublicKey } from '../../config/env.json'; import { stripePublicKey } from '../../config/env.json';
import { Spacer, Loader } from '../components/helpers'; import { Spacer, Loader, FullWidthRow, Link } from '../components/helpers';
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 { signInLoadingSelector, userSelector } from '../redux'; import { signInLoadingSelector, userSelector } from '../redux';
@ -85,13 +85,12 @@ export class DonatePage extends Component {
<Fragment> <Fragment>
<Helmet title='Support our nonprofit | freeCodeCamp.org' /> <Helmet title='Support our nonprofit | freeCodeCamp.org' />
<Grid> <Grid>
<main>
<Spacer /> <Spacer />
<Row> <FullWidthRow>
<Col sm={10} smOffset={1} xs={12}>
<h1 className='text-center'>Become a Supporter</h1> <h1 className='text-center'>Become a Supporter</h1>
</FullWidthRow>
<Spacer /> <Spacer />
</Col>
</Row>
<Row> <Row>
<Col md={6}> <Col md={6}>
<DonateForm <DonateForm
@ -101,23 +100,24 @@ export class DonatePage extends Component {
<Row> <Row>
<Col sm={10} smOffset={1} xs={12}> <Col sm={10} smOffset={1} xs={12}>
<Spacer size={2} /> <Spacer size={2} />
<h3 className='text-center'>Manage your existing donation</h3> <h3 className='text-center'>
Manage your existing donation
</h3>
<div className='button-group'>
{[ {[
`Update your existing donation`, `Update your existing donation`,
`Download donation receipts` `Download donation receipts`
].map(donationSettingOps => ( ].map(donationSettingOps => (
<div key={donationSettingOps}> <Link
<Button className='btn btn-block'
block={true}
bsStyle='primary'
disabled={!isDonating && !enableSettings} disabled={!isDonating && !enableSettings}
href='/donation/settings' key={donationSettingOps}
to='/donation/settings'
> >
{donationSettingOps} {donationSettingOps}
</Button> </Link>
<Spacer />
</div>
))} ))}
</div>
</Col> </Col>
</Row> </Row>
</Col> </Col>
@ -125,6 +125,8 @@ export class DonatePage extends Component {
<DonateText /> <DonateText />
</Col> </Col>
</Row> </Row>
<Spacer />
</main>
</Grid> </Grid>
</Fragment> </Fragment>
); );

104
client/src/pages/donation/settings.js
View File

@ -3,7 +3,7 @@ import Helmet from 'react-helmet';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
import { Grid, Row, Col, Button } from '@freecodecamp/react-bootstrap'; import { Grid, Button, Panel } from '@freecodecamp/react-bootstrap';
import { uniq } from 'lodash'; import { uniq } from 'lodash';
import { apiLocation } from '../../../config/env.json'; import { apiLocation } from '../../../config/env.json';
@ -16,7 +16,8 @@ import {
} from '../../redux'; } from '../../redux';
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
import DonateServicebotEmbed from '../../components/Donation/components/DonateServicebotEmbed'; import DonateServicebotEmbed from '../../components/Donation/components/DonateServicebotEmbed';
import { Loader, Spacer, Link } from '../../components/helpers'; import { Loader, Spacer, Link, FullWidthRow } from '../../components/helpers';
import SectionHeader from '../../components/settings/SectionHeader.js';
const propTypes = { const propTypes = {
donationEmails: PropTypes.array, donationEmails: PropTypes.array,
@ -85,36 +86,39 @@ export class DonationSettingsPage extends Component {
renderServicebotEmbed() { renderServicebotEmbed() {
const { currentSettingsEmail, hash } = this.state; const { currentSettingsEmail, hash } = this.state;
if (!hash || !currentSettingsEmail) {
return null;
}
return ( return (
<div> <div className='servicebot-embed-panel'>
{!hash || !currentSettingsEmail ? (
<Panel>
<Spacer />
<p className='text-center'>
Select the email associated to your donations above.
</p>
</Panel>
) : (
<Panel>
<Spacer /> <Spacer />
<DonateServicebotEmbed email={currentSettingsEmail} hash={hash} /> <DonateServicebotEmbed email={currentSettingsEmail} hash={hash} />
<Spacer />
</Panel>
)}
</div> </div>
); );
} }
renderDonationEmailsList() { renderDonationEmailsList() {
const { donationEmails } = this.props; const { donationEmails } = this.props;
return ( return uniq(donationEmails).map(email => (
<div>
{uniq(donationEmails).map(email => (
<div key={email}>
<Button <Button
bsStyle='primary' bsStyle='primary'
className='btn btn-block' className='btn btn-block'
key={email}
onClick={this.handleSelectDonationEmail} onClick={this.handleSelectDonationEmail}
value={email} value={email}
> >
{`Show donations for your ${email} email address`} {`Show donations for your ${email} email address`}
</Button> </Button>
<Spacer /> ));
</div>
))}
</div>
);
} }
render() { render() {
@ -138,38 +142,42 @@ export class DonationSettingsPage extends Component {
<Fragment> <Fragment>
<Helmet title='Manage your donation | freeCodeCamp.org' /> <Helmet title='Manage your donation | freeCodeCamp.org' />
<Grid> <Grid>
<Row> <main>
<Col sm={6} smOffset={3} xs={12}>
<Spacer size={2} /> <Spacer size={2} />
<Button block={true} bsStyle='primary' href='/donate'>
<FullWidthRow className='button-group'>
<Link
className='btn-invert btn btn-lg btn-primary btn-block'
to={`/donate`}
>
Go to donate page Go to donate page
</Button> </Link>
</Col> <Link
</Row> className='btn-invert btn btn-lg btn-primary btn-block'
<Row> to={`/settings`}
<Col sm={8} smOffset={2} xs={12}> >
Update my account settings
</Link>
</FullWidthRow>
<FullWidthRow>
<Spacer /> <Spacer />
<h1 className='text-center'>Manage your donations</h1> <h1 className='text-center'>Manage your donations</h1>
</FullWidthRow>
<Spacer /> <Spacer />
<h3 className='text-center'> <SectionHeader>
Donations made using a credit or debit card Donations made using a credit or debit card
</h3> </SectionHeader>
</Col> <FullWidthRow className='button-group'>
</Row>
<Row>
<Col sm={6} smOffset={3} xs={12}>
{this.renderDonationEmailsList()} {this.renderDonationEmailsList()}
</Col> </FullWidthRow>
</Row> <Spacer />
<Row> <FullWidthRow>{this.renderServicebotEmbed()}</FullWidthRow>
<Col sm={8} smOffset={2} xs={12}>
{this.renderServicebotEmbed()} <Spacer />
</Col> <SectionHeader>Donations made using PayPal</SectionHeader>
</Row> <FullWidthRow>
<Row>
<Col sm={8} smOffset={2} xs={12}>
<hr />
<h3 className='text-center'>Donations made using PayPal</h3>
<p className='text-center'> <p className='text-center'>
You can update your PayPal donation{' '} You can update your PayPal donation{' '}
<Link <Link
@ -180,20 +188,20 @@ export class DonationSettingsPage extends Component {
</Link> </Link>
. .
</p> </p>
</Col> </FullWidthRow>
</Row>
<Row> <Spacer />
<Col sm={8} smOffset={2} xs={12}> <SectionHeader>Still need help?</SectionHeader>
<hr /> <FullWidthRow>
<h3 className='text-center'>Still need help?</h3>
<p> <p>
If you can't see your donation here, forward a donation receipt If you can't see your donation here, forward a donation receipt
you have recieved in your email to team@freeCodeCamp.org and you have recieved in your email to team@freeCodeCamp.org and
tell us how we can help you with it. tell us how we can help you with it.
</p> </p>
</FullWidthRow>
<Spacer /> <Spacer />
</Col> </main>
</Row>
</Grid> </Grid>
</Fragment> </Fragment>
); );