feat(donate): integrate servicebot

client/src/components/Donation/components/DonateCompletion.js

@@ -42,7 +42,7 @@ function DonateCompletion({ processing, reset, success, error = null }) {
             </p>
             <p>
               You can update your supporter status at any time from the 'manage
-              your existing donation' section on this page.
+              your existing donation' section below on this page.
             </p>
           </div>
         )}

client/src/components/Donation/components/DonateForm.js

@@ -30,6 +30,7 @@ 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,
@@ -204,7 +205,7 @@ class DonateForm extends Component {
   }
 
   renderDonationOptions() {
-    const { stripe } = this.props;
+    const { stripe, enableDonationSettingsPage } = this.props;
     const {
       donationAmount,
       donationDuration,
@@ -242,6 +243,7 @@ class DonateForm extends Component {
               <DonateFormChildViewForHOC
                 donationAmount={donationAmount}
                 donationDuration={donationDuration}
+                enableDonationSettingsPage={enableDonationSettingsPage}
                 getDonationButtonLabel={this.getDonationButtonLabel}
                 hideAmountOptionsCB={this.hideAmountOptionsCB}
               />
@@ -288,18 +290,6 @@ class DonateForm extends Component {
             this.renderDonationOptions()
           )}
         </Col>
-        <Col sm={10} smOffset={1} xs={12}>
-          <Spacer size={2} />
-          <h3 className='text-center'>Manage your existing donation</h3>
-          <Button block={true} bsStyle='primary' disabled={true}>
-            Update your existing donation
-          </Button>
-          <Spacer />
-          <Button block={true} bsStyle='primary' disabled={true}>
-            Download donation receipts
-          </Button>
-          <Spacer />
-        </Col>
       </Row>
     );
   }

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

@@ -21,6 +21,7 @@ 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,
@@ -119,6 +120,7 @@ class DonateFormChildViewForHOC extends Component {
   }
 
   postDonation(token) {
+    const { enableDonationSettingsPage } = this.props;
     const { donationAmount: amount, donationDuration: duration } = this.state;
     this.setState(state => ({
       ...state,
@@ -144,6 +146,7 @@ class DonateFormChildViewForHOC extends Component {
             error: data.error ? data.error : null
           }
         }));
+        enableDonationSettingsPage();
       })
       .catch(error => {
         const data =

client/src/components/Donation/components/DonateServicebotEmbed.js

@@ -0,0 +1,71 @@
+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,
+        disableTiers: [
+          'Monthly $10 Donation  - Unavailable',
+          'Monthly $3 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;