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

fix(client): remove donate settings page

Browse Source
This commit is contained in:
Mrugesh Mohapatra
2019-12-09 21:43:21 +05:30
committed by Ahmad Abdolsaheb
parent 6a91f7c5b2
commit c40680b81e
6 changed files with 5 additions and 362 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,7 +24,6 @@ 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,
@ -55,7 +54,6 @@ const propTypes = {
isApisMicroservicesCert: PropTypes.bool,
isBackEndCert: PropTypes.bool,
isDataVisCert: PropTypes.bool,
isDonating: PropTypes.bool,
isEmailVerified: PropTypes.bool,
isFrontEndCert: PropTypes.bool,
isFrontEndLibsCert: PropTypes.bool,
@ -124,7 +122,6 @@ export function ShowSettings(props) {
user: {
completedChallenges,
email,
isDonating,
is2018DataVisCert,
isApisMicroservicesCert,
isJsAlgoDataStructCert,
@ -218,20 +215,6 @@ 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}

4
client/src/components/Donation/components/DonateForm.js
View File

@ -36,7 +36,6 @@ const numToCommas = num =>
num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
const propTypes = {
enableDonationSettingsPage: PropTypes.func.isRequired,
isDonating: PropTypes.bool,
isSignedIn: PropTypes.bool,
navigate: PropTypes.func.isRequired,
@ -197,7 +196,7 @@ class DonateForm extends Component {
}
renderDonationOptions() {
const { stripe, enableDonationSettingsPage } = this.props;
const { stripe } = this.props;
const { donationAmount, donationDuration, paymentType } = this.state;
return (
<div>
@ -207,7 +206,6 @@ class DonateForm extends Component {
<DonateFormChildViewForHOC
donationAmount={donationAmount}
donationDuration={donationDuration}
enableDonationSettingsPage={enableDonationSettingsPage}
getDonationButtonLabel={this.getDonationButtonLabel}
hideAmountOptionsCB={this.hideAmountOptionsCB}
/>

3
client/src/components/Donation/components/DonateFormChildViewForHOC.js
View File

@ -21,7 +21,6 @@ const propTypes = {
donationAmount: PropTypes.number.isRequired,
donationDuration: PropTypes.string.isRequired,
email: PropTypes.string,
enableDonationSettingsPage: PropTypes.func.isRequired,
getDonationButtonLabel: PropTypes.func.isRequired,
hideAmountOptionsCB: PropTypes.func.isRequired,
isSignedIn: PropTypes.bool,
@ -120,7 +119,6 @@ class DonateFormChildViewForHOC extends Component {
}
postDonation(token) {
const { enableDonationSettingsPage } = this.props;
const { donationAmount: amount, donationDuration: duration } = this.state;
this.setState(state => ({
...state,
@ -150,7 +148,6 @@ class DonateFormChildViewForHOC extends Component {
error: data.error ? data.error : null
}
}));
enableDonationSettingsPage();
})
.catch(error => {
const data =

71
client/src/components/Donation/components/DonateServicebotEmbed.js
View File

@ -1,71 +0,0 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { servicebotId } from '../../../../config/env.json';
import { servicebotScriptLoader } from '../../../utils/scriptLoaders';
import '../Donation.css';
const propTypes = {
email: PropTypes.string.isRequired,
hash: PropTypes.string.isRequired
};
export class DonationServicebotEmbed extends Component {
constructor(...props) {
super(...props);
this.state = {
email: this.props.email,
hash: this.props.hash
};
this.setServiceBotConfig = this.setServiceBotConfig.bind(this);
}
setServiceBotConfig() {
const { email, hash } = this.state;
/* eslint-disable camelcase */
window.servicebotSettings = {
type: 'portal',
servicebot_id: servicebotId,
service: 'freeCodeCamp.org',
email,
hash,
options: {
cancel_now: true,
disableCoupon: true,
forceCard: true,
hideTiers: [
'Monthly $3 Donation - Unavailable',
'Monthly $10 Donation - Unavailable'
],
card: {
hideName: true,
hideAddress: true,
hideCountryPostal: true
},
messageOnCancel: `Thanks again for supporting our tiny nonprofit. We are helping millions of people around the world learn to code for free. Please confirm: are you certain you want to stop your donation?`
}
};
/* eslint-enable camelcase */
}
componentDidMount() {
servicebotScriptLoader();
}
render() {
this.setServiceBotConfig();
return (
<div className='fcc-servicebot-embed-portal'>
<div id='servicebot-subscription-portal'></div>
</div>
);
}
}
DonationServicebotEmbed.displayName = 'DonationServicebotEmbed';
DonationServicebotEmbed.propTypes = propTypes;
export default DonationServicebotEmbed;

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

@ -6,7 +6,7 @@ import { createSelector } from 'reselect';
import { Grid, Row, Col } from '@freecodecamp/react-bootstrap';
import { stripePublicKey } from '../../config/env.json';
import { Spacer, Loader, FullWidthRow, Link } 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 { signInLoadingSelector, userSelector } from '../redux';
@ -30,13 +30,9 @@ export class DonatePage extends Component {
constructor(...props) {
super(...props);
this.state = {
stripe: null,
enableSettings: false
stripe: null
};
this.enableDonationSettingsPage = this.enableDonationSettingsPage.bind(
this
);
this.handleStripeLoad = this.handleStripeLoad.bind(this);
}
@ -69,14 +65,9 @@ export class DonatePage extends Component {
}
}
enableDonationSettingsPage(enableSettings = true) {
this.setState({ enableSettings });
}
render() {
const { stripe } = this.state;
const { showLoading, isDonating } = this.props;
const { enableSettings } = this.state;
const { showLoading } = this.props;
if (showLoading) {
return <Loader fullScreen={true} />;
@ -94,33 +85,7 @@ export class DonatePage extends Component {
<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>
<DonateForm stripe={stripe} />
</Col>
<Col md={6}>
<DonateText />

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

@ -1,229 +0,0 @@
import React, { Component, Fragment } from 'react';
import Helmet from 'react-helmet';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { Grid, Button, Panel } from '@freecodecamp/react-bootstrap';
import { uniq } from 'lodash';
import { apiLocation } from '../../../config/env.json';
import { postCreateHmacHash } from '../../utils/ajax';
import {
signInLoadingSelector,
userSelector,
hardGoTo as navigate,
isSignedInSelector
} from '../../redux';
// eslint-disable-next-line max-len
import DonateServicebotEmbed from '../../components/Donation/components/DonateServicebotEmbed';
import { Loader, Spacer, Link, FullWidthRow } from '../../components/helpers';
import SectionHeader from '../../components/settings/SectionHeader.js';
const propTypes = {
donationEmails: PropTypes.array,
email: PropTypes.string,
isDonating: PropTypes.bool,
isSignedIn: PropTypes.bool,
navigate: PropTypes.func.isRequired,
showLoading: PropTypes.bool.isRequired
};
const mapStateToProps = createSelector(
isSignedInSelector,
userSelector,
signInLoadingSelector,
(isSignedIn, { email, isDonating, donationEmails }, showLoading) => ({
isSignedIn,
email,
isDonating,
donationEmails,
showLoading
})
);
const mapDispatchToProps = {
navigate
};
export class DonationSettingsPage extends Component {
constructor(...props) {
super(...props);
this.state = {
hash: null,
currentSettingsEmail: null
};
this.getEmailHmacHash = this.getEmailHmacHash.bind(this);
this.handleSelectDonationEmail = this.handleSelectDonationEmail.bind(this);
}
getEmailHmacHash(currentSettingsEmail) {
return postCreateHmacHash({
email: currentSettingsEmail
})
.then(response => {
const data = response && response.data;
this.setState({ hash: '' + data.hash, currentSettingsEmail });
})
.catch(error => {
const data =
error.response && error.response.data
? error.response.data
: {
error:
'Something is not right. Please contact team@freecodecamp.org'
};
console.error(data.error);
});
}
handleSelectDonationEmail(e) {
e.preventDefault();
this.setState({ hash: null, currentSettingsEmail: null });
this.getEmailHmacHash(e.currentTarget.value);
}
renderServicebotEmbed() {
const { donationEmails } = this.props;
if (!donationEmails || donationEmails.length === 0) {
return null;
}
const { currentSettingsEmail, hash } = this.state;
return (
<div className='servicebot-embed-panel'>
{!hash || !currentSettingsEmail ? (
<Panel>
<Spacer />
<p className='text-center'>
Select the email associated with your donations above.
</p>
</Panel>
) : (
<Panel>
<Spacer />
<DonateServicebotEmbed email={currentSettingsEmail} hash={hash} />
<Spacer />
</Panel>
)}
</div>
);
}
renderDonationEmailsList() {
const { donationEmails } = this.props;
if (!donationEmails || donationEmails.length === 0) {
return (
<p>
Some of the data associated with your donation is unavailable. Please
contact team@freeCodeCamp.org to get your donation updated manually.
</p>
);
}
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() {
const { showLoading, isSignedIn, isDonating, navigate } = this.props;
if (showLoading) {
return <Loader fullScreen={true} />;
}
if (!isSignedIn) {
navigate(`${apiLocation}/signin?returnTo=donation/settings`);
return <Loader fullScreen={true} />;
}
if (!isDonating) {
navigate(`/donate`);
return <Loader fullScreen={true} />;
}
return (
<Fragment>
<Helmet title='Manage your donation | freeCodeCamp.org' />
<Grid>
<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
</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>
</FullWidthRow>
<Spacer />
<SectionHeader>
Donations made using a credit or debit card
</SectionHeader>
<FullWidthRow className='button-group'>
{this.renderDonationEmailsList()}
</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
external={true}
to='https://www.paypal.com/cgi-bin/webscr?cmd=_manage-paylist'
>
directly on PayPal
</Link>
.
</p>
</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>
</FullWidthRow>
<Spacer />
</main>
</Grid>
</Fragment>
);
}
}
DonationSettingsPage.displayName = 'DonationSettingsPage';
DonationSettingsPage.propTypes = propTypes;
export default connect(
mapStateToProps,
mapDispatchToProps
)(DonationSettingsPage);