fix(donate): refactor to add completion in form

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;

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 }) {
             <span />
           </Fragment>
         )}
-        {!processing && <Button onClick={close}>Close</Button>}
       </p>
     </Alert>
   );

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 (
+      <DonateCompletion {...props}/>
+    );
+  }
+
   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,

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 (
-      <DonateCompletion close={this.props.closeDonationModal} {...props} />
-    );
-  }
-
   renderMaybe() {
     const { closeDonationModal } = this.props;
     const handleClick = e => {
@@ -109,7 +101,6 @@ class DonateModal extends Component {
                 <DonateForm
                   email={email}
                   maybeButton={this.renderMaybe}
-                  renderCompletion={this.renderCompletion}
                 />
               </Modal.Body>
               <Modal.Footer>

client/src/components/Donation/components/StripeCardForm.js

@@ -77,25 +77,31 @@ class StripeCardForm extends Component {
     return (
       <div className='donation-elements'>
         <FormGroup>
-          <ControlLabel>Card Number:</ControlLabel>
+          <ControlLabel>
+            Your Card Number:
+          </ControlLabel>
           <CardNumberElement
-            className='form-control donate-input-element donate-card-element'
+            className='form-control donate-input-element'
             onChange={this.handleInputChange}
             style={style}
           />
         </FormGroup>
         <FormGroup>
-          <ControlLabel>Expiry:</ControlLabel>
+          <ControlLabel>
+            Your Card Expiration Month:
+          </ControlLabel>
           <CardExpiryElement
-            className='form-control donate-input-element donate-expiry-element'
+            className='form-control donate-input-element'
             onChange={this.handleInputChange}
             style={style}
           />
         </FormGroup>
         <FormGroup>
-          <ControlLabel>CVC:</ControlLabel>
+          <ControlLabel>
+            Your Card CVC (3-digit security number):
+          </ControlLabel>
           <CardCVCElement
-            className='form-control donate-input-element donate-cvc-element'
+            className='form-control donate-input-element'
             onChange={this.handleInputChange}
             style={style}
           />

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 <DonateCompletion close={() => {}} {...props} />;
-  }
-
   render() {
     const { email = '' } = this.props;
     return (
@@ -90,7 +85,6 @@ class IndexPage extends Component {
                 <DonateForm
                   email={email}
                   maybeButton={() => null}
-                  renderCompletion={this.renderCompletion}
                 />
               </Elements>
             </StripeProvider>

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: {},