feat: wrap paypal form with ReactGA

This commit is contained in:
Ahmad Abdolsaheb
2019-02-08 18:39:45 +03:00
committed by Stuart Taylor
parent 37f7dd1800
commit c0d05cc96a

View File

@ -1,7 +1,9 @@
/* eslint-disable max-len */ /* eslint-disable max-len */
import React, { Component, Fragment } from 'react'; import React, { Component, Fragment } from 'react';
import Helmet from 'react-helmet'; import Helmet from 'react-helmet';
import ReactGA from 'react-ga';
import { Grid, Col, Row } from '@freecodecamp/react-bootstrap'; import { Grid, Col, Row } from '@freecodecamp/react-bootstrap';
import Spacer from '../components/helpers/Spacer'; import Spacer from '../components/helpers/Spacer';
const payPalPayments = [ const payPalPayments = [
@ -45,53 +47,48 @@ const payPalPayments = [
class IndexPage extends Component { class IndexPage extends Component {
constructor(props, context) { constructor(props, context) {
super(props, context); super(props, context);
this.state = {
category: '',
action: '',
label: ''
};
} }
formbuilder(eventLabel, eventValue, defaultValueHash, defaultValue) { formbuilder(eventLabel, eventValue, defaultValueHash, defaultValue) {
return ( return (
<form <div onClick={()=> ReactGA.event({category: 'Donation', action: 'paypal', label: eventValue.toString()})}>
action='//www.paypal.com/cgi-bin/webscr' <form
method='post' action='//www.paypal.com/cgi-bin/webscr'
onSubmit={`ga('send', { hitType: 'event', eventCategory: 'donation', eventAction: 'click', eventLabel: ${eventLabel} 'paypal', eventValue: ${eventValue} } );`} method='post'
target='_blank' onSubmit={`ga('send', { hitType: 'event', eventCategory: 'donation', eventAction: 'click', eventLabel: ${eventLabel} 'paypal', eventValue: ${eventValue} } );`}
> target='_blank'
<input defaultValue='_s-xclick' name='cmd' type='hidden' />{' '} >
<input <input defaultValue='_s-xclick' name='cmd' type='hidden' />{' '}
defaultValue={defaultValueHash} <input
name='hosted_button_id' defaultValue={defaultValueHash}
type='hidden' name='hosted_button_id'
/>{' '} type='hidden'
<input />{' '}
className='btn btn-cta signup-btn btn-block' <input
defaultValue={defaultValue} className='btn btn-cta signup-btn btn-block'
name='submit' defaultValue={defaultValue}
type='submit' name='submit'
/> type='submit'
</form> />
</form>
</div>
); );
} }
formfilter = (array, frequency) => { formfilter = (array, frequency) => {
let returnVal;
if (frequency === 'monthly') { if (frequency === 'monthly') {
returnVal = array return array
.filter(item => item.eventValue > 0) .filter(item => item.eventValue > 0)
.map((item) => { .map((item) => {
return this.formbuilder(item.eventLabel, item.eventValue, item.defaultValueHash, item.defaultValue); return this.formbuilder(item.eventLabel, item.eventValue, item.defaultValueHash, item.defaultValue);
}); });
} else { } else {
returnVal = array return array
.filter(item => item.eventValue === 0) .filter(item => item.eventValue === 0)
.map((item) => { .map((item) => {
return this.formbuilder(item.eventLabel, item.eventValue, item.defaultValueHash, item.defaultValue); return this.formbuilder(item.eventLabel, item.eventValue, item.defaultValueHash, item.defaultValue);
}); });
} }
return returnVal;
} }
render() { render() {