diff --git a/client/src/components/Donation/Donation.css b/client/src/components/Donation/Donation.css index 3477da2134..815d29e586 100644 --- a/client/src/components/Donation/Donation.css +++ b/client/src/components/Donation/Donation.css @@ -22,7 +22,7 @@ .donation-elements { display: flex; - flex-direction: row; + flex-direction: column; justify-content: space-between; } @@ -70,21 +70,6 @@ padding-top: 8px; } -.donate-card-element { - min-width: 280px; - flex: 1 1 auto; -} - -.donate-expiry-element { - min-width: 120px; - flex: 0 0 auto; -} - -.donate-cvc-element { - min-width: 80px; - flex: 0 0 auto; -} - .StripeElement--focus { border-color: #66afe9; outline: 0; diff --git a/client/src/components/Donation/components/DonateCompletion.js b/client/src/components/Donation/components/DonateCompletion.js index 9a7f774444..cd48df33e8 100644 --- a/client/src/components/Donation/components/DonateCompletion.js +++ b/client/src/components/Donation/components/DonateCompletion.js @@ -4,14 +4,13 @@ import { Alert, Button } from '@freecodecamp/react-bootstrap'; import Spinner from 'react-spinkit'; const propTypes = { - close: PropTypes.func.isRequired, error: PropTypes.string, processing: PropTypes.bool, reset: PropTypes.func.isRequired, success: PropTypes.bool }; -function DonateCompletion({ close, processing, reset, success, error = null }) { +function DonateCompletion({ processing, reset, success, error = null }) { /* eslint-disable no-nested-ternary */ const style = processing ? 'info' : success ? 'success' : 'danger'; const heading = processing @@ -43,7 +42,6 @@ function DonateCompletion({ close, processing, reset, success, error = null }) { )} - {!processing && }

); diff --git a/client/src/components/Donation/components/DonateForm.js b/client/src/components/Donation/components/DonateForm.js index ca6189cb77..50c44c50c7 100644 --- a/client/src/components/Donation/components/DonateForm.js +++ b/client/src/components/Donation/components/DonateForm.js @@ -12,12 +12,12 @@ import { injectStripe } from 'react-stripe-elements'; import Spacer from '../../../components/helpers/Spacer'; import StripeCardForm from './StripeCardForm'; +import DonateCompletion from './DonateCompletion'; import { postJSON$ } from '../../../templates/Challenges/utils/ajax-stream.js'; const propTypes = { email: PropTypes.string, maybeButton: PropTypes.func.isRequired, - renderCompletion: PropTypes.func.isRequired, stripe: PropTypes.shape({ createToken: PropTypes.func.isRequired }) @@ -147,6 +147,12 @@ class DonateForm extends Component { return this.setState(() => initialSate); } + renderCompletion(props) { + return ( + + ); + } + renderDonateForm() { const { isFormValid } = this.state; return ( @@ -186,9 +192,8 @@ class DonateForm extends Component { const { donationState: { processing, success, error } } = this.state; - const { renderCompletion } = this.props; if (processing || success || error) { - return renderCompletion({ + return this.renderCompletion({ processing, success, error, diff --git a/client/src/components/Donation/components/DonateModal.js b/client/src/components/Donation/components/DonateModal.js index b688bf2d7c..18d9988b4c 100644 --- a/client/src/components/Donation/components/DonateModal.js +++ b/client/src/components/Donation/components/DonateModal.js @@ -10,7 +10,6 @@ import { stripePublicKey } from '../../../../config/env.json'; import ga from '../../../analytics'; import DonateForm from './DonateForm'; -import DonateCompletion from './DonateCompletion'; import { userSelector, closeDonationModal, @@ -48,7 +47,6 @@ class DonateModal extends Component { this.state = { stripe: null }; - this.renderCompletion = this.renderCompletion.bind(this); this.renderMaybe = this.renderMaybe.bind(this); } componentDidMount() { @@ -70,12 +68,6 @@ class DonateModal extends Component { } } - renderCompletion(props) { - return ( - - ); - } - renderMaybe() { const { closeDonationModal } = this.props; const handleClick = e => { @@ -109,7 +101,6 @@ class DonateModal extends Component { diff --git a/client/src/components/Donation/components/StripeCardForm.js b/client/src/components/Donation/components/StripeCardForm.js index 2033c3fc8c..c8422de4c0 100644 --- a/client/src/components/Donation/components/StripeCardForm.js +++ b/client/src/components/Donation/components/StripeCardForm.js @@ -77,25 +77,31 @@ class StripeCardForm extends Component { return (
- Card Number: + + Your Card Number: + - Expiry: + + Your Card Expiration Month: + - CVC: + + Your Card CVC (3-digit security number): + diff --git a/client/src/pages/donate.js b/client/src/pages/donate.js index 8ae738e856..6e434955a8 100644 --- a/client/src/pages/donate.js +++ b/client/src/pages/donate.js @@ -12,7 +12,6 @@ import { userSelector } from '../redux'; import Spacer from '../components/helpers/Spacer'; import DonateForm from '../components/Donation/components/DonateForm'; -import DonateCompletion from '../components/Donation/components/DonateCompletion'; import DonateText from '../components/Donation/components/DonateText'; import PoweredByStripe from '../components/Donation/components/poweredByStripe'; @@ -66,10 +65,6 @@ class IndexPage extends Component { })); } - renderCompletion(props) { - return {}} {...props} />; - } - render() { const { email = '' } = this.props; return ( @@ -90,7 +85,6 @@ class IndexPage extends Component { null} - renderCompletion={this.renderCompletion} /> diff --git a/client/src/redux/index.js b/client/src/redux/index.js index 1e71d6dbf9..7ba654068e 100644 --- a/client/src/redux/index.js +++ b/client/src/redux/index.js @@ -251,14 +251,14 @@ export const reducer = handleActions( ...state, isOnline }), - [types.openDonationModal]: state => ({ - ...state, - showDonationModal: true - }), [types.closeDonationModal]: state => ({ ...state, showDonationModal: false }), + [types.openDonationModal]: state => ({ + ...state, + showDonationModal: true + }), [types.showCert]: state => ({ ...state, showCert: {},