From 941be151e9f08e7c55ba63f5beba5639292b7174 Mon Sep 17 00:00:00 2001 From: ldaws003 Date: Fri, 13 Dec 2019 02:22:28 -0800 Subject: [PATCH 1/3] removed PositionFormFinalStep and added EmailConfirmationPopup.jsx component --- src/component/EmailConfirmationPopup.jsx | 92 ++++++++++++++++++++++++ src/container/FormContainer.jsx | 25 +------ 2 files changed, 93 insertions(+), 24 deletions(-) create mode 100644 src/component/EmailConfirmationPopup.jsx diff --git a/src/component/EmailConfirmationPopup.jsx b/src/component/EmailConfirmationPopup.jsx new file mode 100644 index 0000000..39b6989 --- /dev/null +++ b/src/component/EmailConfirmationPopup.jsx @@ -0,0 +1,92 @@ + +import React, { Component } from 'react'; +import { + Button, + Container, + Divider, + Header, + Icon, + Message, +} from 'semantic-ui-react'; + +class App extends Component { + constructor(props){ + super(props); + this.handleClose = this.handleClose.bind(this); + } + + handleClose() { + evt.preventDefault(); + // TODO once form flow has been optimized reset form + this.props.history.push("/feed/"); + } + + render() { + let pleaseConfirmEmail = { + color: "red", + fontWeight: 600, + fontSize: 20 + }; + + let emailConfirmationContainer = { + position: "absolute", + top: "50%", + left: "50%", + transform: "translate(-50%, -50%)", + width: "75vw", + height: "auto", + minWidth: "200px", + maxWidth: "450px", + textAlign: "center", + backgroundColor: "white", + padding: "15px", + whiteSpace: "normal", + marginRight: "-50%", + paddingBottom: "50px", + borderRadius: "5px" + }; + + let backScreen = { + width: "100vw", + height: "100vh", + position: "fixed", + backgroundColor: "rgba(54, 54, 54, 0.48)", + top: "0px", + left: "0px", + right: "0px", + bottom: "0px", + margin: "0px", + padding: "0px", + overflowY: "auto", + zIndex: 5 + }; + + return ( +
+
+ +
Success!
+

Your feedback will be compiled into a report which we will send to the + City Council in advance of the up coming meeting

+

Please Confirm Your Email Address

+

We sent a confirmation link to your email to verify + you're a real person

+

Your feedback will be submitted to the city even if you do not confirm + your email address, but confirming your email address gives the city more + confidence it is responding to a real person's need

+

Check Your Email for a Confirmation Link

+ + +
+
+ ) + } +} + +export default EmailConfirmationPopup; \ No newline at end of file diff --git a/src/container/FormContainer.jsx b/src/container/FormContainer.jsx index 554553a..1efc5b2 100644 --- a/src/container/FormContainer.jsx +++ b/src/container/FormContainer.jsx @@ -128,30 +128,7 @@ class FormContainer extends Component { ); }} /> - - ( - - )} - /> + ); } From 6cda3de09a504c79ef59e1212c1a42c7ba894c89 Mon Sep 17 00:00:00 2001 From: ldaws003 Date: Fri, 13 Dec 2019 03:17:45 -0800 Subject: [PATCH 2/3] added the email confirmation popup to ConfirmFormContentComponent.jsx --- src/component/ConfirmFormContentComponent.jsx | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/src/component/ConfirmFormContentComponent.jsx b/src/component/ConfirmFormContentComponent.jsx index 24c9555..82afc50 100644 --- a/src/component/ConfirmFormContentComponent.jsx +++ b/src/component/ConfirmFormContentComponent.jsx @@ -3,16 +3,28 @@ import Recaptcha from './Recaptcha.jsx'; import { Segment, Container, Header, Button } from 'semantic-ui-react'; import './ConfirmFormContent.scss'; import PropTypes from 'prop-types'; +import EmailConfirmationPopup from './EmailConfirmationPopup.jsx'; class ConfirmFormContentComponent extends React.Component { constructor(props) { super(props); + this.state = { + showPopup: false + }; + this.showEmailConfirmation = this.showEmailConfirmation.bind(this); } + + showEmailConfirmation(){ + this.setState({showPopup: true}); + } + componentDidMount() { this.props.scrollToAppTop(); } render() { return ( +
+ {this.state.showPopup ? : null}
{ this.props.handleSubmit(this.props.complete); - this.props.history.push( - `/feed/${this.props.AgendaItemId}/submission-confirmation` - ); + this.showEmailConfirmation(); + this.props.history.location.pathname = "/feed/email-confirmation"; }}>
SUBMIT @@ -131,6 +142,7 @@ class ConfirmFormContentComponent extends React.Component {
+ ); } } From 5ce3be7a46f296907de41f22ad96341d804e5cd9 Mon Sep 17 00:00:00 2001 From: ldaws003 Date: Fri, 13 Dec 2019 13:18:49 -0800 Subject: [PATCH 3/3] implemented the email confirmation popup to the ConfirmFormContentComponent.jsx --- src/component/ConfirmFormContentComponent.jsx | 259 +++++++++--------- src/component/EmailConfirmationPopup.jsx | 65 +---- src/component/EmailConfirmationPopup.scss | 59 ++++ 3 files changed, 203 insertions(+), 180 deletions(-) create mode 100644 src/component/EmailConfirmationPopup.scss diff --git a/src/component/ConfirmFormContentComponent.jsx b/src/component/ConfirmFormContentComponent.jsx index 82afc50..035e33f 100644 --- a/src/component/ConfirmFormContentComponent.jsx +++ b/src/component/ConfirmFormContentComponent.jsx @@ -2,6 +2,7 @@ import React from 'react'; import Recaptcha from './Recaptcha.jsx'; import { Segment, Container, Header, Button } from 'semantic-ui-react'; import './ConfirmFormContent.scss'; +import './EmailConfirmationPopup.scss'; import PropTypes from 'prop-types'; import EmailConfirmationPopup from './EmailConfirmationPopup.jsx'; @@ -11,137 +12,147 @@ class ConfirmFormContentComponent extends React.Component { this.state = { showPopup: false }; - this.showEmailConfirmation = this.showEmailConfirmation.bind(this); - } - - showEmailConfirmation(){ - this.setState({showPopup: true}); } componentDidMount() { this.props.scrollToAppTop(); } + + shouldComponentUpdate(nextProps, nextState) { + if(this.state.showPopup == true) { + return false; + } + if(nextState.showPopup == true){ + return true; + } + if(nextProps.token !== this.props.token && this.state.showPopup == false){ + return true; + } + return false; + } + render() { return ( -
- {this.state.showPopup ? : null} -
-
- - -
- Step 2: Confirm Your Position On: -
-
- Agenda Item #{this.props.AgendaItemId} -
- -
Recommended action:
-
{this.props.Recommendations}
- - - -
- Your name and zipcode: -
- {this.props.complete.firstName} {this.props.complete.lastName},{' '} - {this.props.complete.zipcode} -
- Your e-mail address: -
{' '} - {this.props.complete.email} -
- Your position: -
{' '} - {this.props.Pro === 1 - ? 'Agree' - : this.props.Pro === 0 - ? 'Disagree' - : 'Need more information'} -
- Additional comments: -
{' '} - {this.props.complete.content} -
- Additional demographics: -
- {this.props.complete.resident && ( -
- {'Resident of the city'} -
-
- )} - {this.props.complete.homeOwner && ( -
- {'Home owner in the city'} -
-
- )} - {this.props.complete.businessOwner && ( -
{'Business owner in the city'}
- )} - {this.props.complete.childSchool && ( -
- {'Has children in school in the city'} -
-
- )} - {this.props.complete.school && ( -
- {'Attends school in the city'} -
-
- )} - {this.props.complete.works && ( -
- {'Employed in the city'} -
-
- )} - - -
- { - 'By submitting this form, you consent to entering the above data, including your email address, as a matter of Public Record and you certify that you are not knowingly submitting false information.' - } -
- - - - - - - -
-
+
+ {this.state.showPopup ? : null} +
+
+ + +
+ Step 2: Confirm Your Position On: +
+
+ Agenda Item #{this.props.AgendaItemId} +
+ +
Recommended action:
+
{this.props.Recommendations}
+ + + +
+ Your name and zipcode: +
+ {this.props.complete.firstName} {this.props.complete.lastName},{' '} + {this.props.complete.zipcode} +
+ Your e-mail address: +
{' '} + {this.props.complete.email} +
+ Your position: +
{' '} + {this.props.Pro === 1 + ? 'Agree' + : this.props.Pro === 0 + ? 'Disagree' + : 'Need more information'} +
+ Additional comments: +
{' '} + {this.props.complete.content} +
+ Additional demographics: +
+ {this.props.complete.resident && ( +
+ {'Resident of the city'} +
+
+ )} + {this.props.complete.homeOwner && ( +
+ {'Home owner in the city'} +
+
+ )} + {this.props.complete.businessOwner && ( +
{'Business owner in the city'}
+ )} + {this.props.complete.childSchool && ( +
+ {'Has children in school in the city'} +
+
+ )} + {this.props.complete.school && ( +
+ {'Attends school in the city'} +
+
+ )} + {this.props.complete.works && ( +
+ {'Employed in the city'} +
+
+ )} + + +
+ { + 'By submitting this form, you consent to entering the above data, including your email address, as a matter of Public Record and you certify that you are not knowingly submitting false information.' + } +
+ + + + + + + +
+
); } diff --git a/src/component/EmailConfirmationPopup.jsx b/src/component/EmailConfirmationPopup.jsx index 39b6989..d6c8661 100644 --- a/src/component/EmailConfirmationPopup.jsx +++ b/src/component/EmailConfirmationPopup.jsx @@ -1,88 +1,41 @@ import React, { Component } from 'react'; -import { - Button, - Container, - Divider, - Header, - Icon, - Message, -} from 'semantic-ui-react'; +import { Button, Header } from 'semantic-ui-react'; -class App extends Component { +class EmailConfirmationPopup extends Component { constructor(props){ super(props); this.handleClose = this.handleClose.bind(this); } handleClose() { - evt.preventDefault(); // TODO once form flow has been optimized reset form this.props.history.push("/feed/"); } - + render() { - let pleaseConfirmEmail = { - color: "red", - fontWeight: 600, - fontSize: 20 - }; - - let emailConfirmationContainer = { - position: "absolute", - top: "50%", - left: "50%", - transform: "translate(-50%, -50%)", - width: "75vw", - height: "auto", - minWidth: "200px", - maxWidth: "450px", - textAlign: "center", - backgroundColor: "white", - padding: "15px", - whiteSpace: "normal", - marginRight: "-50%", - paddingBottom: "50px", - borderRadius: "5px" - }; - - let backScreen = { - width: "100vw", - height: "100vh", - position: "fixed", - backgroundColor: "rgba(54, 54, 54, 0.48)", - top: "0px", - left: "0px", - right: "0px", - bottom: "0px", - margin: "0px", - padding: "0px", - overflowY: "auto", - zIndex: 5 - }; return (
-
- +
+
Success!

Your feedback will be compiled into a report which we will send to the City Council in advance of the up coming meeting

-

Please Confirm Your Email Address

+

Please Confirm Your Email Address

We sent a confirmation link to your email to verify you're a real person

Your feedback will be submitted to the city even if you do not confirm your email address, but confirming your email address gives the city more confidence it is responding to a real person's need

-

Check Your Email for a Confirmation Link

+

Check Your Email for a Confirmation Link

- +
) diff --git a/src/component/EmailConfirmationPopup.scss b/src/component/EmailConfirmationPopup.scss new file mode 100644 index 0000000..d6d2cdb --- /dev/null +++ b/src/component/EmailConfirmationPopup.scss @@ -0,0 +1,59 @@ +.email-confirmation-container { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 75%; + height: auto; + min-width: 200px; + z-index: 52; + max-width: 450px; + text-align: center; + color: black; + font-weight: 400; + background-color: white; + padding: 15px; + margin-right: -50%; + padding-bottom: 50px; + border-radius: 5px; +} + +@media (max-width: 400px) { + .email-confirmation-container { + position: block; + width: 90%; + height: auto; + min-width: 200px; + z-index: 52; + max-width: 450px; + text-align: center; + color: black; + font-weight: 400; + background-color: white; + padding: 10px; + margin: 0 auto; + padding-bottom: 50px; + border-radius: 5px; + } +} + +.overlay { + width: 100vw; + height: 100vh; + position: fixed; + background-color: rgba(54, 54, 54, 0.48); + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; + margin: 0px; + padding: 0px; + overflow-y: auto; + z-index: 51; +} + +.please-confirm-email { + color: red; + font-weight: 600; + font-size: 20; +} \ No newline at end of file