diff --git a/client/src/client-only-routes/ShowCertification.js b/client/src/client-only-routes/ShowCertification.js index 8848af9bab..3981692f6d 100644 --- a/client/src/client-only-routes/ShowCertification.js +++ b/client/src/client-only-routes/ShowCertification.js @@ -15,8 +15,7 @@ import { showCert, userFetchStateSelector, usernameSelector, - isDonatingSelector, - executeGA + isDonatingSelector } from '../redux'; import validCertNames from '../../utils/validCertNames'; import { createFlashMessage } from '../components/Flash/redux'; @@ -38,7 +37,6 @@ const propTypes = { certDashedName: PropTypes.string, certName: PropTypes.string, createFlashMessage: PropTypes.func.isRequired, - executeGA: PropTypes.func, fetchState: PropTypes.shape({ pending: PropTypes.bool, complete: PropTypes.bool, @@ -76,20 +74,19 @@ const mapStateToProps = (state, { certName }) => { }; const mapDispatchToProps = dispatch => - bindActionCreators({ createFlashMessage, showCert, executeGA }, dispatch); + bindActionCreators({ createFlashMessage, showCert }, dispatch); class ShowCertification extends Component { constructor(...args) { super(...args); this.state = { - isDonationSubmitted: false, - isDonationDisplayed: false, - isDonationClosed: false + closeBtn: false, + donationClosed: false }; this.hideDonationSection = this.hideDonationSection.bind(this); - this.handleProcessing = this.handleProcessing.bind(this); + this.showDonationCloseBtn = this.showDonationCloseBtn.bind(this); } componentDidMount() { @@ -100,53 +97,12 @@ class ShowCertification extends Component { return null; } - shouldComponentUpdate(nextProps) { - const { - userFetchState: { complete: userComplete }, - signedInUserName, - isDonating, - cert: { username = '' }, - executeGA - } = nextProps; - const { isDonationDisplayed } = this.state; - - if ( - !isDonationDisplayed && - userComplete && - signedInUserName === username && - !isDonating - ) { - this.setState({ - isDonationDisplayed: true - }); - - executeGA({ - type: 'event', - data: { - category: 'Donation', - action: 'Displayed Certificate Donation', - nonInteraction: true - } - }); - } - return true; - } - hideDonationSection() { - this.setState({ isDonationDisplayed: false, isDonationClosed: true }); + this.setState({ donationClosed: true }); } - handleProcessing(duration, amount) { - this.props.executeGA({ - type: 'event', - data: { - category: 'donation', - action: 'certificate stripe form submission', - label: duration, - value: amount - } - }); - this.setState({ isDonationSubmitted: true }); + showDonationCloseBtn() { + this.setState({ closeBtn: true }); } render() { @@ -155,14 +111,13 @@ class ShowCertification extends Component { fetchState, validCertName, createFlashMessage, - certName + certName, + signedInUserName, + isDonating, + userFetchState } = this.props; - const { - isDonationSubmitted, - isDonationDisplayed, - isDonationClosed - } = this.state; + const { donationClosed, closeBtn } = this.state; if (!validCertName) { createFlashMessage(standardErrorMessage); @@ -170,6 +125,7 @@ class ShowCertification extends Component { } const { pending, complete, errored } = fetchState; + const { complete: userComplete } = userFetchState; if (pending) { return ; @@ -193,6 +149,8 @@ class ShowCertification extends Component { completionTime } = cert; + let conditionalDonationSection = ''; + const donationCloseBtn = (