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 Certification from '../components/settings/Certification';
import DangerZone from '../components/settings/DangerZone';
import SectionHeader from '../components/settings/SectionHeader.js';
const propTypes = {
createFlashMessage: PropTypes.func.isRequired,
@ -54,6 +55,7 @@ const propTypes = {
isApisMicroservicesCert: PropTypes.bool,
isBackEndCert: PropTypes.bool,
isDataVisCert: PropTypes.bool,
isDonating: PropTypes.bool,
isEmailVerified: PropTypes.bool,
isFrontEndCert: PropTypes.bool,
isFrontEndLibsCert: PropTypes.bool,
@ -122,6 +124,7 @@ export function ShowSettings(props) {
user: {
completedChallenges,
email,
isDonating,
is2018DataVisCert,
isApisMicroservicesCert,
isJsAlgoDataStructCert,
@ -161,7 +164,7 @@ export function ShowSettings(props) {
return <Loader fullScreen={true} />;
}
if (!showLoading && !isSignedIn) {
if (!isSignedIn) {
navigate(`${apiLocation}/signin?returnTo=settings`);
return <Loader fullScreen={true} />;
}
@ -215,6 +218,20 @@ export function ShowSettings(props) {
updateQuincyEmail={updateQuincyEmail}
/>
<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
githubProfile={githubProfile}
linkedin={linkedin}

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

@ -159,3 +159,6 @@ li.disabled > a {
[name='payment-method'] {
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
</Link>
<Link className='btn btn-lg btn-primary btn-block' to='/settings'>
Update my settings
Update my account settings
</Link>
</FullWidthRow>
</Row>

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

@ -175,7 +175,7 @@ function Profile({ user, isSessionUser, navigate }) {
{isSessionUser ? (
<FullWidthRow className='button-group'>
<Link className='btn btn-lg btn-primary btn-block' to='/settings'>
Update my settings
Update my account settings
</Link>
<Button
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', () => {
const { getByText } = render(<Profile {...myProfileProps} />);
expect(getByText('Update my settings')).toHaveAttribute(
expect(getByText('Update my account settings')).toHaveAttribute(
'href',
'/settings'
);

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

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

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

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