From 2ac58210069a91178bc64425f4944273c2dbe9dc Mon Sep 17 00:00:00 2001 From: Jose Contreras Date: Fri, 10 Jan 2020 14:30:14 -0500 Subject: [PATCH 01/12] Add comments to ask for clarity. --- src/App.js | 24 ++++++++++++++++++------ 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index 24d5d31f1..07dc55a5b 100644 --- a/src/App.js +++ b/src/App.js @@ -52,7 +52,7 @@ class App extends React.Component { buildingTypes: '', }, prevQuestion: '', - question: 'addressSearch', + question: 'addressSearch', // Set the first question as address search when initializing reviewQuestions: [], questions: this.resetQuestions(), pages: { @@ -886,11 +886,13 @@ class App extends React.Component { render() { const building = this.props.building; + // TODO: Why did we comment out the section below? // const questions = this.props.questions; const contact = this.props.contact; const complete = this.props.complete; let addressSearchMessage = ""; + // TODO: Explain why search success is set to true in render function? let addressSearchSuccess = true; if (building.data !== undefined && building.data.success === false && building.data.message !== undefined) { addressSearchSuccess = false; @@ -899,6 +901,9 @@ class App extends React.Component { addressSearchSuccess = true; } + // Generating an object to represent all the questions in our survey + // Each key value pair associates a title with a component that either handles one question or a set of questions + // each time we render this is being generated... why? const questions = { addressSearch: -1) { if (this.state.question === 'addressSearch') { - if(this.props.building.data.surveyId === 1) { - content = questions['fuels']; - } else if ([2, 3].includes(this.props.building.data.surveyId)) { - content = questions['buildingTypeSubType']; - } + // If we are in the address search question and we have building data set the content to the next question depending on survey id + if(this.props.building.data.surveyId === 1) { + // For NYC go to the fuel type question + content = questions['fuels']; + } else if ([2, 3].includes(this.props.building.data.surveyId)) { + // For Oakland and NYC go to the Building Type/ Subtype question + content = questions['buildingTypeSubType']; + } } else { content = questions[this.state.question]; } } else if (Object.keys(this.state.pages).indexOf(this.state.question) > -1) { + // If question index is not out of bounds display content of either the Thank you or congrats page content = this.state.pages[this.state.question]; } else { + // TODO: When would we reach this point? What case is this? content = questions[this.state.questions[this.state.question].prev]; } + // TODO: What is this.props.num ? return (
-- GitLab From eb7d17cac549517eeca389e4a6b4978c1a61843e Mon Sep 17 00:00:00 2001 From: Jose Contreras Date: Fri, 10 Jan 2020 14:36:32 -0500 Subject: [PATCH 02/12] Add page-view event and next question event. --- src/AddressSearch.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/AddressSearch.js b/src/AddressSearch.js index 0f97691ba..608cc7d35 100644 --- a/src/AddressSearch.js +++ b/src/AddressSearch.js @@ -4,6 +4,7 @@ import './index.css'; import Geocoder from 'react-mapbox-gl-geocoder'; import location from './utils/images/location.svg'; // with import import jsonp from "jsonp"; +import ReactGA from 'react-ga'; const mapAccess = { mapboxApiAccessToken: process.env.REACT_APP_MAPBOX_TOKEN @@ -46,6 +47,9 @@ export default class AddressSearch extends React.Component { } } } + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.pageview('/address-search'); + } } handleOnSelected = (viewport, item) => { @@ -64,6 +68,13 @@ export default class AddressSearch extends React.Component { } nextQuestion = () => { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.event({ + category: "Intake Survey", + action: "Clicked continue button", + label: "address-search" + }); + } this.setState({ loadingAddressSearchBtn: true, disabledAddressSearchBtn: true, -- GitLab From 36616e39736dca7cfcf3d2373b6411e5d3dc6e08 Mon Sep 17 00:00:00 2001 From: Jose Contreras Date: Fri, 10 Jan 2020 14:45:30 -0500 Subject: [PATCH 03/12] Add GA events to fuel type component. --- src/Fuels.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/Fuels.js b/src/Fuels.js index ccb314361..0453b0ef8 100644 --- a/src/Fuels.js +++ b/src/Fuels.js @@ -7,6 +7,7 @@ import dualFuel from './utils/images/icon-dual-fuel.svg'; import other from './utils/images/icon-i-don_t-know.svg'; import starIcon from './utils/images/icon-star.svg'; import './index.css'; +import ReactGA from 'react-ga'; export default class Fuels extends React.Component { @@ -24,11 +25,24 @@ export default class Fuels extends React.Component { }; } + componentDidMount () { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.pageview('/fuel-type'); + } + } + prevQuestion = () => { this.props.prevQuestion('fuels'); } nextQuestion = () => { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.event({ + category: "Intake Survey", + action: "Clicked continue button", + label: "fuel-type" + }); + } this.props.setFuelType(this.state.answer); this.props.nextQuestion('fuels', this.names[this.state.answer], @@ -38,6 +52,13 @@ export default class Fuels extends React.Component { } chooseFuel = (answer) => { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.event({ + category: "Intake Survey", + action: "Chose fuel type", + label: "fuel-type" + }); + } this.setState({ answer }); } -- GitLab From 8d78f214d0df01ca792c182081b797ca7a9f090b Mon Sep 17 00:00:00 2001 From: Jose Contreras Date: Fri, 10 Jan 2020 14:55:09 -0500 Subject: [PATCH 04/12] Add events for selecting heating distribution type. --- src/HeatDistribution.js | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/src/HeatDistribution.js b/src/HeatDistribution.js index 625143a9b..f94e4f822 100644 --- a/src/HeatDistribution.js +++ b/src/HeatDistribution.js @@ -6,6 +6,7 @@ import hotWater from './utils/images/hot-water-hydronic.png'; import electricBaseboard from './utils/images/electric-baseboard@3x.png'; import forcedAir from './utils/images/forced-air@3x.png'; import other from './utils/images/icon-i-don_t-know.svg'; +import ReactGA from 'react-ga'; export default class HeatDistribution extends React.Component { @@ -23,11 +24,24 @@ export default class HeatDistribution extends React.Component { }; } + componentDidMount () { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.pageview('/heat-distribution'); + } + } + prevQuestion = () => { this.props.prevQuestion('heatDistribution'); } nextQuestion = () => { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.event({ + category: "Intake Survey", + action: "Clicked continue button", + label: "heat-distribution" + }); + } this.props.setHeatDistribution(this.state.answer); this.props.nextQuestion( 'heatDistribution', @@ -38,6 +52,13 @@ export default class HeatDistribution extends React.Component { } chooseAnswer = (answer) => { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.event({ + category: "Intake Survey", + action: "Chose type of heat distribution", + label: "heat-distribution" + }); + } this.setState({ answer }); } @@ -59,6 +80,7 @@ export default class HeatDistribution extends React.Component { { this.props.answerIds.map((answerId, id) => { + // TODO: This value is not used it seems const answerName = this.props.answers[answerId]; return ( -- GitLab From 4ed58abb7f3f5e1323c9dce7e587b7603b7c4698 Mon Sep 17 00:00:00 2001 From: Jose Contreras Date: Fri, 10 Jan 2020 15:01:42 -0500 Subject: [PATCH 05/12] Add heating system age event. --- src/HeatingSystemAge.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/HeatingSystemAge.js b/src/HeatingSystemAge.js index 6d34a6fd3..798caa33d 100644 --- a/src/HeatingSystemAge.js +++ b/src/HeatingSystemAge.js @@ -2,6 +2,7 @@ import React from "react"; import { Row, Col, Button } from 'reactstrap'; import starIcon from './utils/images/icon-star.svg'; import './index.css'; +import ReactGA from 'react-ga'; export default class HeatingSystemAge extends React.Component { @@ -19,11 +20,24 @@ export default class HeatingSystemAge extends React.Component { ]; } + componentDidMount () { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.pageview('/heating-system-age'); + } + } + prevQuestion = () => { this.props.prevQuestion('heatingSystemAge'); } nextQuestion = () => { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.event({ + category: "Intake Survey", + action: "Clicked continue button", + label: "heating-system-age" + }); + } this.props.setHeatingSystemAge(this.state.answer); this.props.nextQuestion( 'heatingSystemAge', @@ -33,6 +47,13 @@ export default class HeatingSystemAge extends React.Component { } chooseAnswer = (answer) => { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.event({ + category: "Intake Survey", + action: "Chose heating system age", + label: "heating-system-age" + }); + } this.setState({ answer }); } -- GitLab From b197749f3d2b01d30c94f58385a631aabb3773dc Mon Sep 17 00:00:00 2001 From: Jose Contreras Date: Fri, 10 Jan 2020 15:05:01 -0500 Subject: [PATCH 06/12] Add events to heating system plan. --- src/HeatingSystemPlan.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/HeatingSystemPlan.js b/src/HeatingSystemPlan.js index 7e8949955..aed08c45a 100644 --- a/src/HeatingSystemPlan.js +++ b/src/HeatingSystemPlan.js @@ -2,6 +2,7 @@ import React from "react"; import { Row, Col, Button } from 'reactstrap'; import './index.css'; import starIcon from './utils/images/icon-star.svg'; +import ReactGA from 'react-ga'; export default class HeatingSystemPlan extends React.Component { @@ -18,11 +19,24 @@ export default class HeatingSystemPlan extends React.Component { ]; } + componentDidMount () { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.pageview('/heating-system-plan'); + } + } + prevQuestion = () => { this.props.prevQuestion('heatingSystemPlan'); } nextQuestion = () => { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.event({ + category: "Intake Survey", + action: "Clicked continue button", + label: "heating-system-plan" + }); + } this.props.setHeatingSystemPlan(this.state.answer); this.props.nextQuestion( 'heatingSystemPlan', @@ -32,6 +46,13 @@ export default class HeatingSystemPlan extends React.Component { } chooseAnswer = (answer) => { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.event({ + category: "Intake Survey", + action: "Chose heating system plan", + label: "heating-system-plan" + }); + } this.setState({ answer }); } -- GitLab From 6d4cbe0e2eb3bc717b7f43f6a28b5a82310a7ca6 Mon Sep 17 00:00:00 2001 From: Jose Contreras Date: Fri, 10 Jan 2020 15:19:41 -0500 Subject: [PATCH 07/12] Add events to building types question page. --- src/BuildingTypes.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/BuildingTypes.js b/src/BuildingTypes.js index 1b86d0598..bb36fbdff 100644 --- a/src/BuildingTypes.js +++ b/src/BuildingTypes.js @@ -7,6 +7,7 @@ import church from './utils/images/illustration-church.svg'; import coop from './utils/images/illustration-co-op.svg'; import warehouse from './utils/images/illustration-warehouse.svg'; import './index.css'; +import ReactGA from 'react-ga'; export default class BuildingTypes extends React.Component { @@ -26,11 +27,24 @@ export default class BuildingTypes extends React.Component { ]; } + componentDidMount () { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.pageview('/building-type'); + } + } + prevQuestion = () => { this.props.prevQuestion('buildingTypes'); } nextQuestion = () => { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.event({ + category: "Intake Survey", + action: "Clicked continue button", + label: "building-type" + }); + } this.props.setBuildingType( this.state.answer, this.names[this.props.answerIds.indexOf(this.state.answer)], @@ -39,6 +53,13 @@ export default class BuildingTypes extends React.Component { } chooseAnswer = (answer) => { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.event({ + category: "Intake Survey", + action: "Chose building type", + label: "building-type" + }); + } this.setState({ answer }); } -- GitLab From 1cc1e2138d1e4a4e31cda16876228aa51b017bd5 Mon Sep 17 00:00:00 2001 From: Jose Contreras Date: Fri, 10 Jan 2020 15:23:06 -0500 Subject: [PATCH 08/12] Add events to finance interest component. --- src/FinanceInterest.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/FinanceInterest.js b/src/FinanceInterest.js index 7d5edda08..d465d7df3 100644 --- a/src/FinanceInterest.js +++ b/src/FinanceInterest.js @@ -1,6 +1,7 @@ import React from "react"; import { Row, Col, Button } from 'reactstrap'; import './index.css'; +import ReactGA from 'react-ga'; export default class FinanceInterest extends React.Component { @@ -15,11 +16,24 @@ export default class FinanceInterest extends React.Component { }; } + componentDidMount () { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.pageview('/finance-interest'); + } + } + prevQuestion = () => { this.props.prevQuestion('financeInterest'); } nextQuestion = () => { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.event({ + category: "Intake Survey", + action: "Clicked continue button", + label: "finance-interest" + }); + } this.props.nextQuestion('financeInterest', this.names[this.state.answer], this.state.answer); } -- GitLab From bb060ff34943bba4336aa38331b60a55d6716e1d Mon Sep 17 00:00:00 2001 From: Jose Contreras Date: Fri, 10 Jan 2020 15:28:14 -0500 Subject: [PATCH 09/12] Add GA Events for contact page. --- src/Contact.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/Contact.js b/src/Contact.js index 18350b062..30335e16c 100644 --- a/src/Contact.js +++ b/src/Contact.js @@ -2,6 +2,7 @@ import React from "react"; import { Row, Col, Input, Button } from 'reactstrap'; import './index.css'; import jsonp from "jsonp"; +import ReactGA from 'react-ga'; export default class Contact extends React.Component { constructor(props) { @@ -12,6 +13,12 @@ export default class Contact extends React.Component { }; } + componentDidMount () { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.pageview('/contact-information'); + } + } + handleInputChange = (event) => { const val = event.target.value; const name = event.target.name; @@ -28,6 +35,13 @@ export default class Contact extends React.Component { } submitContact = () => { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.event({ + category: "Intake Survey", + action: "Clicked continue button", + label: "contact-information" + }); + } if (this.validateContact()) { // Call the function only if the environment is production. if (process.env.NODE_ENV === 'production') { -- GitLab From a696752f5ac07174fde5c840be16d1c7261fad3a Mon Sep 17 00:00:00 2001 From: Jose Contreras Date: Fri, 10 Jan 2020 15:30:19 -0500 Subject: [PATCH 10/12] Add events to review answers page. --- src/ReviewAnswers.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/ReviewAnswers.js b/src/ReviewAnswers.js index b294c20c0..89682de66 100644 --- a/src/ReviewAnswers.js +++ b/src/ReviewAnswers.js @@ -1,6 +1,7 @@ import React from "react"; import { Row, Col, Button } from 'reactstrap'; import iconEdit from './utils/images/icon-edit.svg'; +import ReactGA from 'react-ga'; export default class ReviewAnswers extends React.Component { @@ -9,6 +10,12 @@ export default class ReviewAnswers extends React.Component { this.state = {}; } + componentDidMount () { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.pageview('/review-answers'); + } + } + prevQuestion = () => { this.props.prevQuestion('comfortIssues'); } @@ -18,6 +25,13 @@ export default class ReviewAnswers extends React.Component { } submit = () => { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.event({ + category: "Intake Survey", + action: "Clicked submit button", + label: "review-answers" + }); + } this.props.submit(); } -- GitLab From 947113d6ce8964c275aa4f0c9d5e3e5b5692f5c0 Mon Sep 17 00:00:00 2001 From: Jose Contreras Date: Fri, 10 Jan 2020 15:55:24 -0500 Subject: [PATCH 11/12] Add events to comfort issues component. --- src/ComfortIssues.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/ComfortIssues.js b/src/ComfortIssues.js index b3aacc522..a206cca51 100644 --- a/src/ComfortIssues.js +++ b/src/ComfortIssues.js @@ -1,5 +1,6 @@ import React from "react"; import { Row, Col, Button } from 'reactstrap'; +import ReactGA from 'react-ga'; export default class ComfortIssues extends React.Component { @@ -18,11 +19,24 @@ export default class ComfortIssues extends React.Component { } } + componentDidMount () { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.pageview('/comfort-issues'); + } + } + prevQuestion = () => { this.props.prevQuestion('comfortIssues'); } nextQuestion = () => { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.event({ + category: "Intake Survey", + action: "Clicked continue button", + label: "comfort-issues" + }); + } this.props.nextQuestion( 'comfortIssues', this.state.answerIds.map(answerId => this.names[this.props.answers[answerId]]), @@ -31,6 +45,13 @@ export default class ComfortIssues extends React.Component { } chooseAnswer = (answerId) => { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.event({ + category: "Intake Survey", + action: "Select answer", + label: "comfort-issues" + }); + } let answerIds = this.state.answerIds if (answerIds.includes(answerId)) { answerIds = answerIds.filter(id => id !== answerId); -- GitLab From 291b43e54cb351401934c9773d309afa2f46da4e Mon Sep 17 00:00:00 2001 From: Jose Contreras Date: Fri, 10 Jan 2020 16:26:27 -0500 Subject: [PATCH 12/12] Add GA events to utility bills question. --- src/UtilityBills.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/UtilityBills.js b/src/UtilityBills.js index e97f9cbe5..b93ba1a55 100644 --- a/src/UtilityBills.js +++ b/src/UtilityBills.js @@ -1,6 +1,7 @@ import React from "react"; import { Row, Col, Button } from 'reactstrap'; import './index.css'; +import ReactGA from 'react-ga'; export default class UtilityBills extends React.Component { @@ -13,11 +14,24 @@ export default class UtilityBills extends React.Component { this.names = ['Tenant', 'Landlord']; } + componentDidMount () { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.pageview('/utility-bills'); + } + } + prevQuestion = () => { this.props.prevQuestion('utilityBills'); } nextQuestion = () => { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.event({ + category: "Intake Survey", + action: "Clicked continue button", + label: "utility-bills" + }); + } this.props.nextQuestion( 'utilityBills', [ @@ -29,6 +43,13 @@ export default class UtilityBills extends React.Component { } chooseAnswer = (utility, answer) => { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.event({ + category: "Intake Survey", + action: "Chose who pays the bills", + label: "utility-bills" + }); + } if (utility === 'electricity') { this.setState({ electricityAnswer: answer }); } -- GitLab