diff --git a/src/App.js b/src/App.js index baaef21176bc9b32f7be69c863c8755c92174530..df8cf8b7f0908163dd7b949d82337abd67f43808 100644 --- a/src/App.js +++ b/src/App.js @@ -26,6 +26,8 @@ import BuildingHeatingSystem from './BuildingHeatingSystem'; import BuildingTypeSubType from './BuildingTypeSubType'; import BuildingPastImprovement from './BuildingPastImprovement'; import BuildingFutureImprovement from './BuildingFutureImprovement'; +import BuildingElectricityShutoff from './BuildingElectricityShutoff'; +import BuildingMedicalDevices from './BuildingMedicalDevices'; import { questionTree } from './constants'; import { connect } from 'react-redux'; import { submitContact, submitAnswer, submitBuilding, submitQuestionnaire, submitUserAnswer } from './actions'; @@ -303,6 +305,36 @@ class App extends React.Component { prev: 'buildingHeatingSystem', next: 'buildingPastImprovement', }, + buildingElectricityShutoff: { + title: 'Building Electricity Shutoffs', + questions: [ + { + id: 59, + title: 'Did your building experience electricity shutoff during recent PGE wildfire mitigation blackouts?', + answer: '', + value: 0, + answerIds: [1, 2], + }, + { + id: 61, + title: 'Do you expect your building to experience blackouts going forward?', + answer: '', + value: 0, + answerIds: [1, 2, 12], + }, + ], + prev: 'buildingFutureImprovement', + next: 'buildingMedicalDevices', + }, + buildingMedicalDevices: { + id: 60, + title: 'Do residents of your building use electrically connected medical devices?', + answer: '', + value: '', + answerIds: [1, 2, 12], + prev: 'buildingElectricityShutoff', + next: 'feedback', + }, buildingPastImprovement: { title: 'Any Energy or Water Improvements in the past 5 years?', questions: [ @@ -621,7 +653,7 @@ class App extends React.Component { }, ], prev: 'buildingPastImprovement', - next: 'feedback', + next: '', } }; } @@ -722,7 +754,8 @@ class App extends React.Component { } // If the survey ID is 2 or 3, set buildingFutureWaterImprovement as prev page for contact if ([2, 3].includes(this.props.building.data.surveyId) && question === 'buildingNeeds') { - questions['feedback'].prev = 'buildingFutureImprovement'; + questions['feedback'].prev = this.props.building.data.surveyId === 3 ? 'buildingFutureImprovement' : 'buildingMedicalDevices'; + questions['buildingFutureImprovement'].next = this.props.building.data.surveyId === 3 ? 'feedback' : 'buildingElectricityShutoff'; this.setState({ questions, }); @@ -797,6 +830,24 @@ class App extends React.Component { }); } + setBuildingElectricityShutoff = (buildingElectricityShutoff) => { + this.setState({ + factors: { + ...this.state.factors, + buildingElectricityShutoff, + }, + }); + } + + setBuildingMedicalDevices = (buildingMedicalDevices) => { + this.setState({ + factors: { + ...this.state.factors, + buildingMedicalDevices, + }, + }); + } + setBuildingType = (buildingTypes, answer, value) => { this.setState({ factors: { @@ -1098,6 +1149,21 @@ class App extends React.Component { answer={this.state.questions['buildingCoolingSystem'].value} answerIds={this.state.questions['buildingCoolingSystem'].answerIds} />, + buildingElectricityShutoff: , + buildingMedicalDevices: , buildingPastImprovement: { + this.props.prevQuestion('buildingElectricityShutoff'); + } + + nextQuestion = () => { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.event({ + category: "Intake Survey General", + action: "Clicked continue button", + label: "building-electicity-shutoff" + }); + } + this.props.nextQuestion( + 'buildingElectricityShutoff', + [ + this.electricityShutoffNames[this.props.answerIdsElectricityShutoff.indexOf(this.state.electricityShutoffAnswer)], + this.futureBlackoutNames[this.props.answerIdsFutureBlackout.indexOf(this.state.futureBlackoutAnswer)] + ], + [this.state.electricityShutoffAnswer,this.state.futureBlackoutAnswer], + ); + } + + chooseElectricityShutoff = (electricityShutoffAnswer) => { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.event({ + category: "Intake Survey General", + action: "Chose building electicity shutoff", + label: "building-electicity-shutoff" + }); + } + this.setState({ electricityShutoffAnswer }); + } + + chooseFutureBlackoutAnswer = (futureBlackoutAnswer) => { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.event({ + category: "Intake Survey General", + action: "Chose future blackout", + label: "building-future-blackout" + }); + } + this.setState({ futureBlackoutAnswer }); + } + + render() { + const futureBlackout = this.state.electricityShutoffAnswer !== 0 ? +
+
+ Do you expect your building to experience blackouts going forward? +
+ + + + { + this.props.answerIdsFutureBlackout.map((answerId, id) => { + return ( + +
this.chooseFutureBlackoutAnswer(answerId)} + > + {this.futureBlackoutNames[id]} +
+ + ); + }) + } + + + +
+ : ''; + + const content = ( +
+
+ Did your building experience electricity shutoff during recent PGE wildfire mitigation blackouts? +
+ + + + { + this.props.answerIdsElectricityShutoff.map((answerId, id) => { + return ( + +
this.chooseElectricityShutoff(answerId)} + > + {this.electricityShutoffNames[id]} +
+ + ); + }) + } + + + + {futureBlackout} + + + + {'<'} Back + + + + + + +
+ ); + + return ( +
+ {content} +
+ ); + } +} diff --git a/src/BuildingMedicalDevices.js b/src/BuildingMedicalDevices.js new file mode 100644 index 0000000000000000000000000000000000000000..dcf4dfd44f54e10862692202a82378fa0edcf4d0 --- /dev/null +++ b/src/BuildingMedicalDevices.js @@ -0,0 +1,111 @@ +import React from "react"; +import { Row, Col, Button } from 'reactstrap'; +import './index.css'; +import ReactGA from 'react-ga'; + + +export default class BuildingMedicalDevices extends React.Component { + constructor(props) { + super(props); + this.state = { + answer: this.props.answer, + }; + this.names = [ + 'Yes', + 'No', + 'I\'m not sure' + ]; + } + + componentDidMount () { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.pageview('/building-medical-devices'); + } + } + + prevQuestion = () => { + this.props.prevQuestion('buildingMedicalDevices'); + } + + nextQuestion = () => { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.event({ + category: "Intake Survey General", + action: "Clicked continue button", + label: "building-medical-devices" + }); + } + this.props.setBuildingMedicalDevices(this.state.answer); + this.props.nextQuestion( + 'buildingMedicalDevices', + this.names[this.props.answerIds.indexOf(this.state.answer)], + this.state.answer, + ); + } + + chooseAnswer = (answer) => { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.event({ + category: "Intake Survey General", + action: "Chose building medical devices", + label: "building-medical-devices" + }); + } + this.setState({ answer }); + } + + render() { + const content = ( +
+
+ Do residents of your building use electrically connected medical devices? +
+ + + + { + this.props.answerIds.map((answerId, id) => { + return ( + +
this.chooseAnswer(answerId)} + > + {this.names[id]} +
+ + ); + }) + } + + + + + + + {'<'} Back + + + + + + +
+ ); + + return ( +
+ {content} +
+ ); + } +}