feat: make component modular and GA ready
This commit is contained in:
Ahmad Abdolsaheb
committed by
Stuart Taylor
Stuart Taylor
parent
baf425f907
commit
37f7dd1800
@ -2,10 +2,98 @@
|
|||||||
import React, { Component, Fragment } from 'react';
|
import React, { Component, Fragment } from 'react';
|
||||||
import Helmet from 'react-helmet';
|
import Helmet from 'react-helmet';
|
||||||
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 = [
|
||||||
|
{ eventLabel: 'paypal',
|
||||||
|
eventValue: 5,
|
||||||
|
defaultValueHash: 'KTAXU8B4MYAT8',
|
||||||
|
defaultValue: 'Donate $5 each month'
|
||||||
|
},
|
||||||
|
{ eventLabel: 'paypal',
|
||||||
|
eventValue: 10,
|
||||||
|
defaultValueHash: 'BYEBQEHS5LHNC',
|
||||||
|
defaultValue: 'Donate $10 each month'
|
||||||
|
},
|
||||||
|
{ eventLabel: 'paypal',
|
||||||
|
eventValue: 35,
|
||||||
|
defaultValueHash: '57ZPMKJ8G893Y',
|
||||||
|
defaultValue: 'Donate $35 each month'
|
||||||
|
},
|
||||||
|
{ eventLabel: 'paypal',
|
||||||
|
eventValue: 50,
|
||||||
|
defaultValueHash: '2ZVYTHK6Q7AFW',
|
||||||
|
defaultValue: 'Donate $50 each month'
|
||||||
|
},
|
||||||
|
{ eventLabel: 'paypal',
|
||||||
|
eventValue: 100,
|
||||||
|
defaultValueHash: 'C7PUT3LMJHKK2',
|
||||||
|
defaultValue: 'Donate $100 each month'
|
||||||
|
},
|
||||||
|
{ eventLabel: 'paypal',
|
||||||
|
eventValue: 250,
|
||||||
|
defaultValueHash: '69JGTY4DHSTEN',
|
||||||
|
defaultValue: 'Donate $250 each month'
|
||||||
|
},
|
||||||
|
{ eventLabel: 'paypal one time donation',
|
||||||
|
eventValue: 0,
|
||||||
|
defaultValueHash: 'B256JC6ZCWD3J',
|
||||||
|
defaultValue: 'Make a one-time donation'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
class IndexPage extends Component {
|
class IndexPage extends Component {
|
||||||
|
constructor(props, context) {
|
||||||
|
super(props, context);
|
||||||
|
this.state = {
|
||||||
|
category: '',
|
||||||
|
action: '',
|
||||||
|
label: ''
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
formbuilder(eventLabel, eventValue, defaultValueHash, defaultValue) {
|
||||||
|
return (
|
||||||
|
<form
|
||||||
|
action='//www.paypal.com/cgi-bin/webscr'
|
||||||
|
method='post'
|
||||||
|
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
|
||||||
|
defaultValue={defaultValueHash}
|
||||||
|
name='hosted_button_id'
|
||||||
|
type='hidden'
|
||||||
|
/>{' '}
|
||||||
|
<input
|
||||||
|
className='btn btn-cta signup-btn btn-block'
|
||||||
|
defaultValue={defaultValue}
|
||||||
|
name='submit'
|
||||||
|
type='submit'
|
||||||
|
/>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
formfilter = (array, frequency) => {
|
||||||
|
let returnVal;
|
||||||
|
if (frequency === 'monthly') {
|
||||||
|
returnVal = array
|
||||||
|
.filter(item => item.eventValue > 0)
|
||||||
|
.map((item) => {
|
||||||
|
return this.formbuilder(item.eventLabel, item.eventValue, item.defaultValueHash, item.defaultValue);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
returnVal = array
|
||||||
|
.filter(item => item.eventValue === 0)
|
||||||
|
.map((item) => {
|
||||||
|
return this.formbuilder(item.eventLabel, item.eventValue, item.defaultValueHash, item.defaultValue);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return returnVal;
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
@ -32,125 +120,7 @@ class IndexPage extends Component {
|
|||||||
the links below and following the instructions on PayPal. You can
|
the links below and following the instructions on PayPal. You can
|
||||||
easily stop your donations at any time in the future.
|
easily stop your donations at any time in the future.
|
||||||
</p>
|
</p>
|
||||||
<form
|
{this.formfilter(payPalPayments, 'monthly')}
|
||||||
action='//www.paypal.com/cgi-bin/webscr'
|
|
||||||
method='post'
|
|
||||||
onSubmit="ga('send', { hitType: 'event', eventCategory: 'donation', eventAction: 'click', eventLabel: 'paypal', eventValue: 5 } );"
|
|
||||||
target='_blank'
|
|
||||||
>
|
|
||||||
<input defaultValue='_s-xclick' name='cmd' type='hidden' />{' '}
|
|
||||||
<input
|
|
||||||
defaultValue='KTAXU8B4MYAT8'
|
|
||||||
name='hosted_button_id'
|
|
||||||
type='hidden'
|
|
||||||
/>{' '}
|
|
||||||
<input
|
|
||||||
className='btn btn-cta signup-btn btn-block'
|
|
||||||
defaultValue='Donate $5 each month'
|
|
||||||
name='submit'
|
|
||||||
type='submit'
|
|
||||||
/>
|
|
||||||
</form>
|
|
||||||
<div className='spacer' />
|
|
||||||
<form
|
|
||||||
action='//www.paypal.com/cgi-bin/webscr'
|
|
||||||
method='post'
|
|
||||||
onSubmit="ga('send', { hitType: 'event', eventCategory: 'donation', eventAction: 'click', eventLabel: 'paypal', eventValue: 10} );"
|
|
||||||
target='_blank'
|
|
||||||
>
|
|
||||||
<input defaultValue='_s-xclick' name='cmd' type='hidden' />{' '}
|
|
||||||
<input
|
|
||||||
defaultValue='BYEBQEHS5LHNC'
|
|
||||||
name='hosted_button_id'
|
|
||||||
type='hidden'
|
|
||||||
/>{' '}
|
|
||||||
<input
|
|
||||||
className='btn btn-cta signup-btn btn-block'
|
|
||||||
defaultValue='Donate $10 each month'
|
|
||||||
name='submit'
|
|
||||||
type='submit'
|
|
||||||
/>
|
|
||||||
</form>
|
|
||||||
<div className='spacer' />
|
|
||||||
<form
|
|
||||||
action='//www.paypal.com/cgi-bin/webscr'
|
|
||||||
method='post'
|
|
||||||
onSubmit="ga('send', { hitType: 'event', eventCategory: 'donation', eventAction: 'click', eventLabel: 'paypal', eventValue: 35} );"
|
|
||||||
target='_blank'
|
|
||||||
>
|
|
||||||
<input defaultValue='_s-xclick' name='cmd' type='hidden' />{' '}
|
|
||||||
<input
|
|
||||||
defaultValue='57ZPMKJ8G893Y'
|
|
||||||
name='hosted_button_id'
|
|
||||||
type='hidden'
|
|
||||||
/>{' '}
|
|
||||||
<input
|
|
||||||
className='btn btn-cta signup-btn btn-block'
|
|
||||||
defaultValue='Donate $35 each month'
|
|
||||||
name='submit'
|
|
||||||
type='submit'
|
|
||||||
/>
|
|
||||||
</form>
|
|
||||||
<div className='spacer' />
|
|
||||||
<form
|
|
||||||
action='//www.paypal.com/cgi-bin/webscr'
|
|
||||||
method='post'
|
|
||||||
onSubmit="ga('send', { hitType: 'event', eventCategory: 'donation', eventAction: 'click', eventLabel: 'paypal', eventValue: 50} );"
|
|
||||||
target='_blank'
|
|
||||||
>
|
|
||||||
<input defaultValue='_s-xclick' name='cmd' type='hidden' />{' '}
|
|
||||||
<input
|
|
||||||
defaultValue='2ZVYTHK6Q7AFW'
|
|
||||||
name='hosted_button_id'
|
|
||||||
type='hidden'
|
|
||||||
/>{' '}
|
|
||||||
<input
|
|
||||||
className='btn btn-cta signup-btn btn-block'
|
|
||||||
defaultValue='Donate $50 each month'
|
|
||||||
name='submit'
|
|
||||||
type='submit'
|
|
||||||
/>
|
|
||||||
</form>
|
|
||||||
<div className='spacer' />
|
|
||||||
<form
|
|
||||||
action='//www.paypal.com/cgi-bin/webscr'
|
|
||||||
method='post'
|
|
||||||
onSubmit="ga('send', { hitType: 'event', eventCategory: 'donation', eventAction: 'click', eventLabel: 'paypal', eventValue: 100} );"
|
|
||||||
target='_blank'
|
|
||||||
>
|
|
||||||
<input defaultValue='_s-xclick' name='cmd' type='hidden' />{' '}
|
|
||||||
<input
|
|
||||||
defaultValue='C7PUT3LMJHKK2'
|
|
||||||
name='hosted_button_id'
|
|
||||||
type='hidden'
|
|
||||||
/>{' '}
|
|
||||||
<input
|
|
||||||
className='btn btn-cta signup-btn btn-block'
|
|
||||||
defaultValue='Donate $100 each month'
|
|
||||||
name='submit'
|
|
||||||
type='submit'
|
|
||||||
/>
|
|
||||||
</form>
|
|
||||||
<div className='spacer' />
|
|
||||||
<form
|
|
||||||
action='//www.paypal.com/cgi-bin/webscr'
|
|
||||||
method='post'
|
|
||||||
onSubmit="ga('send', { hitType: 'event', eventCategory: 'donation', eventAction: 'click', eventLabel: 'paypal', eventValue: 250} );"
|
|
||||||
target='_blank'
|
|
||||||
>
|
|
||||||
<input defaultValue='_s-xclick' name='cmd' type='hidden' />{' '}
|
|
||||||
<input
|
|
||||||
defaultValue='69JGTY4DHSTEN'
|
|
||||||
name='hosted_button_id'
|
|
||||||
type='hidden'
|
|
||||||
/>{' '}
|
|
||||||
<input
|
|
||||||
className='btn btn-cta signup-btn btn-block'
|
|
||||||
defaultValue='Donate $250 each month'
|
|
||||||
name='submit'
|
|
||||||
type='submit'
|
|
||||||
/>
|
|
||||||
</form>
|
|
||||||
<hr />
|
<hr />
|
||||||
<h3>Make a one-time donation using PayPal</h3>
|
<h3>Make a one-time donation using PayPal</h3>
|
||||||
<p>
|
<p>
|
||||||
@ -158,25 +128,7 @@ class IndexPage extends Component {
|
|||||||
amount of money by clicking one of the links below and following the
|
amount of money by clicking one of the links below and following the
|
||||||
instructions on PayPal:
|
instructions on PayPal:
|
||||||
</p>
|
</p>
|
||||||
<form
|
{this.formfilter(payPalPayments)}
|
||||||
action='//www.paypal.com/cgi-bin/webscr'
|
|
||||||
method='post'
|
|
||||||
onSubmit="ga('send', { hitType: 'event', eventCategory: 'donation', eventAction: 'click', eventLabel: 'paypal one time donation', eventValue: 0} );"
|
|
||||||
target='_blank'
|
|
||||||
>
|
|
||||||
<input defaultValue='_s-xclick' name='cmd' type='hidden' />{' '}
|
|
||||||
<input
|
|
||||||
defaultValue='B256JC6ZCWD3J'
|
|
||||||
name='hosted_button_id'
|
|
||||||
type='hidden'
|
|
||||||
/>{' '}
|
|
||||||
<input
|
|
||||||
className='btn btn-cta signup-btn btn-block'
|
|
||||||
defaultValue='Make a one-time donation'
|
|
||||||
name='submit'
|
|
||||||
type='submit'
|
|
||||||
/>
|
|
||||||
</form>
|
|
||||||
<hr />
|
<hr />
|
||||||
<h3>Get your employer to match your donation</h3>
|
<h3>Get your employer to match your donation</h3>
|
||||||
<p>
|
<p>
|
||||||
|
|||||||
Reference in New Issue
Block a user