feat: add minimal form to modal

client/src/components/Donation/components/DonateFormChildViewForHOC.js

@@ -18,15 +18,16 @@ import { postChargeStripe } from '../../../utils/ajax';
 import { userSelector } from '../../../redux';
 
 const propTypes = {
+  changeCloseBtnLabel: PropTypes.func,
   donationAmount: PropTypes.number.isRequired,
   donationDuration: PropTypes.string.isRequired,
   email: PropTypes.string,
   getDonationButtonLabel: PropTypes.func.isRequired,
-  hideAmountOptionsCB: PropTypes.func.isRequired,
   isSignedIn: PropTypes.bool,
   stripe: PropTypes.shape({
     createToken: PropTypes.func.isRequired
-  })
+  }),
+  theme: PropTypes.string
 };
 const initialState = {
   donationState: {
@@ -38,7 +39,7 @@ const initialState = {
 
 const mapStateToProps = createSelector(
   userSelector,
-  ({ email }) => ({ email })
+  ({ email, theme }) => ({ email, theme })
 );
 
 class DonateFormChildViewForHOC extends Component {
@@ -59,7 +60,6 @@ class DonateFormChildViewForHOC extends Component {
     this.handleSubmit = this.handleSubmit.bind(this);
     this.postDonation = this.postDonation.bind(this);
     this.resetDonation = this.resetDonation.bind(this);
-    this.hideAmountOptions(false);
   }
 
   getUserEmail() {
@@ -113,11 +113,6 @@ class DonateFormChildViewForHOC extends Component {
     });
   }
 
-  hideAmountOptions(hide) {
-    const { hideAmountOptionsCB } = this.props;
-    hideAmountOptionsCB(hide);
-  }
-
   postDonation(token) {
     const { donationAmount: amount, donationDuration: duration } = this.state;
     this.setState(state => ({
@@ -128,10 +123,12 @@ class DonateFormChildViewForHOC extends Component {
       }
     }));
 
-    // hide the donation options on the parent and scroll to top
-    this.hideAmountOptions(true);
+    // scroll to top
     window.scrollTo(0, 0);
 
+    // change the donation modal button to close
+    this.props.changeCloseBtnLabel();
+
     return postChargeStripe({
       token,
       amount,
@@ -179,7 +176,7 @@ class DonateFormChildViewForHOC extends Component {
 
   renderDonateForm() {
     const { isFormValid } = this.state;
-    const { getDonationButtonLabel } = this.props;
+    const { getDonationButtonLabel, theme } = this.props;
     return (
       <Form className='donation-form' onSubmit={this.handleSubmit}>
         <FormGroup className='donation-email-container'>
@@ -194,7 +191,10 @@ class DonateFormChildViewForHOC extends Component {
             value={this.getUserEmail()}
           />
         </FormGroup>
-        <StripeCardForm getValidationState={this.getValidationState} />
+        <StripeCardForm
+          getValidationState={this.getValidationState}
+          theme={theme}
+        />
         <Button
           block={true}
           bsStyle='primary'

client/src/components/Donation/components/DonationModal.js

@@ -4,18 +4,18 @@ import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { Modal, Button } from '@freecodecamp/react-bootstrap';
-import { Link } from '../../../components/helpers';
+import { Modal, Button, Col, Row } from '@freecodecamp/react-bootstrap';
+import { Spacer } from '../../../components/helpers';
 import { blockNameify } from '../../../../utils/blockNameify';
 import Heart from '../../../assets/icons/Heart';
 import Cup from '../../../assets/icons/Cup';
+import MinimalDonateForm from './MinimalDonateForm';
 
 import ga from '../../../analytics';
 import {
   closeDonationModal,
   isDonationModalOpenSelector,
-  isBlockDonationModalSelector,
-  activeDonationsSelector
+  isBlockDonationModalSelector
 } from '../../../redux';
 
 import { challengeMetaSelector } from '../../../templates/Challenges/redux';
@@ -26,12 +26,10 @@ const mapStateToProps = createSelector(
   isDonationModalOpenSelector,
   challengeMetaSelector,
   isBlockDonationModalSelector,
-  activeDonationsSelector,
-  (show, { block }, isBlockDonation, activeDonors) => ({
+  (show, { block }, isBlockDonation) => ({
     show,
     block,
-    isBlockDonation,
-    activeDonors
+    isBlockDonation
   })
 );
 
@@ -51,13 +49,12 @@ const propTypes = {
   show: PropTypes.bool
 };
 
-function DonateModal({
-  show,
-  block,
-  activeDonors,
-  isBlockDonation,
-  closeDonationModal
-}) {
+function DonateModal({ show, block, isBlockDonation, closeDonationModal }) {
+  const [showCloseLabel, setCloseLabel] = React.useState(false);
+  const changeCloseBtnLabel = () => {
+    setCloseLabel(true);
+  };
+
   if (show) {
     ga.modalview('/donation-modal');
   }
@@ -66,12 +63,12 @@ function DonateModal({
       <div className='donation-icon-container'>
         <Cup className='donation-icon' />
       </div>
-      <p className='text-center'>
-        Nicely done. You just completed {blockNameify(block)}.
-      </p>
-      <p className='text-center'>
-        Help us create even more learning resources like this.
-      </p>
+      <Row>
+        <Col sm={10} smOffset={1} xs={12}>
+          <p>Nicely done. You just completed {blockNameify(block)}.</p>
+          <p>Help us create even more learning resources like this.</p>
+        </Col>
+      </Row>
     </div>
   );
 
@@ -80,14 +77,13 @@ function DonateModal({
       <div className='donation-icon-container'>
         <Heart className='donation-icon' />
       </div>
-      <p>
-        freeCodeCamp.org is a tiny nonprofit that's helping millions of people
-        learn to code for free.
-      </p>
-      <p>
-        Join <strong>{activeDonors}</strong> supporters.
-      </p>
-      <p>Your donation will help keep tech education free and open.</p>
+      <Row>
+        <Col sm={10} smOffset={1} xs={12}>
+          <p>
+            Help us create even more learning resources for you and your family.
+          </p>
+        </Col>
+      </Row>
     </div>
   );
 
@@ -95,30 +91,28 @@ function DonateModal({
     <Modal bsSize='lg' className='donation-modal' show={show}>
       <Modal.Header className='fcc-modal'>
         <Modal.Title className='modal-title text-center'>
-          <strong>Support freeCodeCamp.org</strong>
+          <strong>Become a Supporter</strong>
         </Modal.Title>
       </Modal.Header>
       <Modal.Body>
         {isBlockDonation ? blockDonationText : progressDonationText}
+        <Spacer />
+        <MinimalDonateForm changeCloseBtnLabel={changeCloseBtnLabel} />
+        <Spacer />
+        <Row>
+          <Col sm={10} smOffset={1} xs={12}>
+            <Button
+              block={true}
+              bsSize='sm'
+              bsStyle='primary'
+              className='btn-link'
+              onClick={closeDonationModal}
+            >
+              {showCloseLabel ? 'close' : 'Please ask me later.'}
+            </Button>
+          </Col>
+        </Row>
       </Modal.Body>
-      <Modal.Footer>
-        <Link
-          className='btn-invert btn btn-lg btn-primary btn-block btn-cta'
-          onClick={closeDonationModal}
-          to={`/donate`}
-        >
-          Support our nonprofit
-        </Link>
-        <Button
-          block={true}
-          bsSize='lg'
-          bsStyle='primary'
-          className='btn-invert'
-          onClick={closeDonationModal}
-        >
-          Ask me later
-        </Button>
-      </Modal.Footer>
     </Modal>
   );
 }

client/src/components/Donation/components/MinimalDonateForm.js

@@ -0,0 +1,203 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { Button, Row, Col } from '@freecodecamp/react-bootstrap';
+import { StripeProvider, Elements } from 'react-stripe-elements';
+
+import {
+  amountsConfig,
+  durationsConfig,
+  defaultStateConfig
+} from '../../../../../config/donation-settings';
+import { apiLocation } from '../../../../config/env.json';
+import DonateFormChildViewForHOC from './DonateFormChildViewForHOC';
+import {
+  userSelector,
+  isSignedInSelector,
+  signInLoadingSelector,
+  hardGoTo as navigate
+} from '../../../redux';
+
+import '../Donation.css';
+import DonateCompletion from './DonateCompletion.js';
+import { stripePublicKey } from '../../../../../config/env.json';
+import { stripeScriptLoader } from '../../../utils/scriptLoaders';
+
+const numToCommas = num =>
+  num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
+
+const propTypes = {
+  changeCloseBtnLabel: PropTypes.func,
+  isDonating: PropTypes.bool,
+  isSignedIn: PropTypes.bool,
+  navigate: PropTypes.func.isRequired,
+  showLoading: PropTypes.bool.isRequired,
+  stripe: PropTypes.shape({
+    createToken: PropTypes.func.isRequired
+  })
+};
+
+const mapStateToProps = createSelector(
+  userSelector,
+  signInLoadingSelector,
+  isSignedInSelector,
+  ({ isDonating }, showLoading, isSignedIn) => ({
+    isDonating,
+    isSignedIn,
+    showLoading
+  })
+);
+
+const mapDispatchToProps = {
+  navigate
+};
+
+const createOnClick = navigate => e => {
+  e.preventDefault();
+  return navigate(`${apiLocation}/signin?returnTo=donate`);
+};
+
+class ModalDonateForm extends Component {
+  constructor(...args) {
+    super(...args);
+
+    this.durations = durationsConfig;
+    this.amounts = amountsConfig;
+
+    this.state = {
+      ...defaultStateConfig,
+      isDonating: this.props.isDonating,
+      stripe: null
+    };
+    this.handleSelectPaymentType = this.handleSelectPaymentType.bind(this);
+    this.handleStripeLoad = this.handleStripeLoad.bind(this);
+    this.getDonationButtonLabel = this.getDonationButtonLabel.bind(this);
+  }
+
+  componentDidMount() {
+    if (window.Stripe) {
+      this.handleStripeLoad();
+    } else if (document.querySelector('#stripe-js')) {
+      document
+        .querySelector('#stripe-js')
+        .addEventListener('load', this.handleStripeLoad);
+    } else {
+      stripeScriptLoader(this.handleStripeLoad);
+    }
+  }
+
+  componentWillUnmount() {
+    const stripeMountPoint = document.querySelector('#stripe-js');
+    if (stripeMountPoint) {
+      stripeMountPoint.removeEventListener('load', this.handleStripeLoad);
+    }
+  }
+
+  handleStripeLoad() {
+    // Create Stripe instance once Stripe.js loads
+    if (stripePublicKey) {
+      this.setState(state => ({
+        ...state,
+        stripe: window.Stripe(stripePublicKey)
+      }));
+    }
+  }
+
+  handleSelectPaymentType(e) {
+    this.setState({
+      paymentType: e.currentTarget.value
+    });
+  }
+
+  getFormatedAmountLabel(amount) {
+    return `$${numToCommas(amount / 100)}`;
+  }
+
+  getDonationButtonLabel() {
+    const { donationAmount, donationDuration } = this.state;
+    let donationBtnLabel = `Confirm your donation`;
+    if (donationDuration === 'onetime') {
+      donationBtnLabel = `Confirm your one-time donation of ${this.getFormatedAmountLabel(
+        donationAmount
+      )}`;
+    } else {
+      donationBtnLabel = `Confirm your donation of ${this.getFormatedAmountLabel(
+        donationAmount
+      )} ${donationDuration === 'month' ? 'per month' : 'per year'}`;
+    }
+    return donationBtnLabel;
+  }
+
+  renderDonationOptions() {
+    const {
+      donationAmount,
+      donationDuration,
+      paymentType,
+      stripe
+    } = this.state;
+
+    const { changeCloseBtnLabel } = this.props;
+    return (
+      <div>
+        {paymentType === 'Card' ? (
+          <StripeProvider stripe={stripe}>
+            <Elements>
+              <DonateFormChildViewForHOC
+                changeCloseBtnLabel={changeCloseBtnLabel}
+                donationAmount={donationAmount}
+                donationDuration={donationDuration}
+                getDonationButtonLabel={this.getDonationButtonLabel}
+              />
+            </Elements>
+          </StripeProvider>
+        ) : (
+          <p>
+            PayPal is currently unavailable. Please use a Credit/Debit card
+            instead.
+          </p>
+        )}
+      </div>
+    );
+  }
+
+  render() {
+    const { isSignedIn, navigate, showLoading, isDonating } = this.props;
+
+    if (isDonating) {
+      return (
+        <Row>
+          <Col sm={10} smOffset={1} xs={12}>
+            <DonateCompletion success={true} />
+          </Col>
+        </Row>
+      );
+    }
+
+    return (
+      <Row>
+        <Col sm={10} smOffset={1} xs={12}>
+          {!showLoading && !isSignedIn ? (
+            <Button
+              bsStyle='default'
+              className='btn btn-block'
+              onClick={createOnClick(navigate)}
+            >
+              Become a supporter
+            </Button>
+          ) : (
+            this.renderDonationOptions()
+          )}
+        </Col>
+      </Row>
+    );
+  }
+}
+
+ModalDonateForm.displayName = 'ModalDonateForm';
+ModalDonateForm.propTypes = propTypes;
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ModalDonateForm);

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

@@ -1,10 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import {
-  CardNumberElement,
-  CardExpiryElement,
-  CardCVCElement
-} from 'react-stripe-elements';
+import { CardNumberElement, CardExpiryElement } from 'react-stripe-elements';
 import { ControlLabel, FormGroup } from '@freecodecamp/react-bootstrap';
 
 const propTypes = {
@@ -31,10 +27,6 @@ class StripeCardForm extends Component {
         cardExpiry: {
           complete: false,
           error: null
-        },
-        cardCvc: {
-          complete: false,
-          error: null
         }
       }
     };
@@ -92,14 +84,6 @@ class StripeCardForm extends Component {
             style={style}
           />
         </FormGroup>
-        <FormGroup>
-          <ControlLabel>Your Card CVC (3-digit security number):</ControlLabel>
-          <CardCVCElement
-            className='form-control donate-input-element'
-            onChange={this.handleInputChange}
-            style={style}
-          />
-        </FormGroup>
       </div>
     );
   }

config/donation-settings.js

@@ -11,7 +11,7 @@ const amountsConfig = {
 };
 const defaultAmount = {
   year: 25000,
-  month: 3500,
+  month: 500,
   onetime: 25000
 };
 const defaultStateConfig = {