feat: add donation form to certificate

client/src/client-only-routes/ShowCertification.js

@@ -3,7 +3,9 @@ import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { Grid, Row, Col, Image } from '@freecodecamp/react-bootstrap';
+import { Grid, Row, Col, Image, Button } from '@freecodecamp/react-bootstrap';
+// eslint-disable-next-line max-len
+import MinimalDonateForm from '../components/Donation/components/MinimalDonateForm';
 
 import {
   showCertSelector,
@@ -19,7 +21,7 @@ import standardErrorMessage from '../utils/standardErrorMessage';
 import reallyWeirdErrorMessage from '../utils/reallyWeirdErrorMessage';
 
 import RedirectHome from '../components/RedirectHome';
-import { Loader, Link } from '../components/helpers';
+import { Loader, Spacer } from '../components/helpers';
 
 const propTypes = {
   cert: PropTypes.shape({
@@ -73,6 +75,18 @@ const mapDispatchToProps = dispatch =>
   bindActionCreators({ createFlashMessage, showCert }, dispatch);
 
 class ShowCertification extends Component {
+  constructor(...args) {
+    super(...args);
+
+    this.state = {
+      showCloseBtn: false,
+      donationClosed: false
+    };
+
+    this.hideDonationSection = this.hideDonationSection.bind(this);
+    this.showDonationCloseBtn = this.showDonationCloseBtn.bind(this);
+  }
+
   componentDidMount() {
     const { username, certName, validCertName, showCert } = this.props;
     if (validCertName) {
@@ -80,7 +94,17 @@ class ShowCertification extends Component {
     }
     return null;
   }
+
+  hideDonationSection() {
+    this.setState({ donationClosed: true });
+  }
+
+  showDonationCloseBtn() {
+    this.setState({ showCloseBtn: true });
+  }
+
   render() {
+    console.log(this.props);
     const {
       cert,
       fetchState,
@@ -92,6 +116,8 @@ class ShowCertification extends Component {
       userFetchState
     } = this.props;
 
+    const { donationClosed, showCloseBtn } = this.state;
+
     if (!validCertName) {
       createFlashMessage(standardErrorMessage);
       return <RedirectHome />;
@@ -122,22 +148,49 @@ class ShowCertification extends Component {
       completionTime
     } = cert;
 
-    let conditionalDonationMessage = '';
+    let conditionalDonationSection = '';
 
-    if (userComplete && signedInUserName === username && !isDonating) {
+    const donationCloseBtn = (
-      conditionalDonationMessage = (
+      <div>
-        <Grid>
+        <Spacer />
-          <Row className='certification-donation text-center'>
+        <Button
-            <p>
+          block={true}
-              Only you can see this message. Congratulations on earning this
+          bsSize='sm'
-              certification. It’s no easy task. Running freeCodeCamp isn’t easy
+          bsStyle='primary'
-              either. Nor is it cheap. Help us help you and many other people
+          onClick={this.hideDonationSection}
-              around the world. Make a tax-deductible supporting donation to our
+        >
-              nonprofit today.
+          close
-            </p>
+        </Button>
-            <Link className={'btn'} to={'/donate'}>
+      </div>
-              Check out our donation dashboard
+    );
-            </Link>
+
+    if (
+      userComplete &&
+      signedInUserName === username &&
+      !isDonating &&
+      !donationClosed
+    ) {
+      conditionalDonationSection = (
+        <Grid className='donation-section'>
+          <Row className='certification-donation'>
+            <Col sm={10} smOffset={1} xs={12}>
+              <p>
+                Only you can see this message. Congratulations on earning this
+                certification. It’s no easy task. Running freeCodeCamp isn’t
+                easy either. Nor is it cheap. Help us help you and many other
+                people around the world. Make a tax-deductible supporting
+                donation to our nonprofit today.
+              </p>
+            </Col>
+          </Row>
+          <MinimalDonateForm
+            changeCloseBtnLabel={this.showDonationCloseBtn}
+            defaultTheme='light'
+          />
+          <Row className='certification-donation'>
+            <Col sm={10} smOffset={1} xs={12}>
+              {showCloseBtn ? donationCloseBtn : ''}
+            </Col>
           </Row>
         </Grid>
       );
@@ -145,7 +198,7 @@ class ShowCertification extends Component {
 
     return (
       <div className='certificate-outer-wrapper'>
-        {conditionalDonationMessage}
+        {conditionalDonationSection}
         <Grid className='certificate-wrapper certification-namespace'>
           <Row>
             <header>

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

@@ -19,6 +19,7 @@ import { userSelector } from '../../../redux';
 
 const propTypes = {
   changeCloseBtnLabel: PropTypes.func,
+  defaultTheme: PropTypes.string,
   donationAmount: PropTypes.number.isRequired,
   donationDuration: PropTypes.string.isRequired,
   email: PropTypes.string,
@@ -176,7 +177,7 @@ class DonateFormChildViewForHOC extends Component {
 
   renderDonateForm() {
     const { isFormValid } = this.state;
-    const { getDonationButtonLabel, theme } = this.props;
+    const { getDonationButtonLabel, theme, defaultTheme } = this.props;
     return (
       <Form className='donation-form' onSubmit={this.handleSubmit}>
         <FormGroup className='donation-email-container'>
@@ -193,7 +194,7 @@ class DonateFormChildViewForHOC extends Component {
         </FormGroup>
         <StripeCardForm
           getValidationState={this.getValidationState}
-          theme={theme}
+          theme={defaultTheme ? defaultTheme : theme}
         />
         <Button
           block={true}

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

@@ -29,6 +29,7 @@ const numToCommas = num =>
 
 const propTypes = {
   changeCloseBtnLabel: PropTypes.func,
+  defaultTheme: PropTypes.string,
   isDonating: PropTypes.bool,
   isSignedIn: PropTypes.bool,
   navigate: PropTypes.func.isRequired,
@@ -137,7 +138,7 @@ class ModalDonateForm extends Component {
       stripe
     } = this.state;
 
-    const { changeCloseBtnLabel } = this.props;
+    const { changeCloseBtnLabel, defaultTheme } = this.props;
     return (
       <div>
         {paymentType === 'Card' ? (
@@ -145,6 +146,7 @@ class ModalDonateForm extends Component {
             <Elements>
               <DonateFormChildViewForHOC
                 changeCloseBtnLabel={changeCloseBtnLabel}
+                defaultTheme={defaultTheme}
                 donationAmount={donationAmount}
                 donationDuration={donationDuration}
                 getDonationButtonLabel={this.getDonationButtonLabel}

client/src/pages/certification.css

@@ -38,8 +38,8 @@
   flex-direction: column;
 }
 
-.certificate-outer-wrapper .certification-donation {
+.certificate-outer-wrapper .donation-section {
-  padding: 15px 0px;
+  padding: 20px 0px;
 }
 
 .certificate-outer-wrapper .certification-donation .btn {
@@ -54,6 +54,13 @@
   color: var(--gray-05);
 }
 
+.certificate-outer-wrapper .btn[disabled],
+.certificate-outer-wrapper .btn[disabled]:hover {
+  background-color: var(--gray-15);
+  border-color: var(--quaternary-color);
+  color: var(--quaternary-color);
+}
+
 .certification-namespace header {
   width: 100%;
   height: 140px;