Skip to content

Issue #182 email confirmation popup #198

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ldaws003 wants to merge 3 commits into
base: staging
Choose a base branch
from
+245 −141
Open

Issue #182 email confirmation popup #198

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
941be15
removed PositionFormFinalStep and added EmailConfirmationPopup.jsx co…
ldaws003 Dec 13, 2019
6cda3de
added the email confirmation popup to ConfirmFormContentComponent.jsx
ldaws003 Dec 13, 2019
5ce3be7
implemented the email confirmation popup to the ConfirmFormContentCom…
ldaws003 Dec 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
257 changes: 140 additions & 117 deletions src/component/ConfirmFormContentComponent.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,134 +2,157 @@ 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';

class ConfirmFormContentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
showPopup: false
};
}

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 (
<div
style={{
display: 'flex',
minHeight: '63vh',
flexDirection: 'column',
}}>
<div
style={{
position: 'relative',
zIndex: 50,
display: this.props.firstName !== '' ? 'none' : 'block',
}}>
<Container>
<Segment>
<Header as="h1" className="agenda-item-step" textAlign="center">
Step 2: Confirm Your Position On:
</Header>
<Header as="h2" className="agenda-item-number" textAlign="center">
Agenda Item #{this.props.AgendaItemId}
</Header>
<Segment className="agenda-item-recommendation">
<Header as="h4">Recommended action:</Header>
<div> {this.props.Recommendations} </div>
</Segment>
<Segment>
<Button
onClick={() => {
this.props.editingForm(true);
this.props.history.goBack();
}}
style={{ position: 'relative', float: 'right' }}>
Edit
</Button>
<Header as="h4" className="agenda-item-section">
Your name and zipcode:
</Header>
{this.props.complete.firstName} {this.props.complete.lastName},{' '}
{this.props.complete.zipcode}
<Header as="h4" className="agenda-item-section">
Your e-mail address:
</Header>{' '}
{this.props.complete.email}
<Header as="h4" className="agenda-item-section">
Your position:
</Header>{' '}
{this.props.Pro === 1
? 'Agree'
: this.props.Pro === 0
? 'Disagree'
: 'Need more information'}
<Header as="h4" className="agenda-item-section">
Additional comments:
</Header>{' '}
{this.props.complete.content}
<Header as="h4" className="agenda-item-section">
Additional demographics:
</Header>
{this.props.complete.resident && (
<div>
{'Resident of the city'}
<br />
</div>
)}
{this.props.complete.homeOwner && (
<div>
{'Home owner in the city'}
<br />
</div>
)}
{this.props.complete.businessOwner && (
<div>{'Business owner in the city'}</div>
)}
{this.props.complete.childSchool && (
<div>
{'Has children in school in the city'}
<br />
</div>
)}
{this.props.complete.school && (
<div>
{'Attends school in the city'}
<br />
</div>
)}
{this.props.complete.works && (
<div>
{'Employed in the city'}
<br />
</div>
)}
</Segment>
<Segment color="orange">
<Header as="h3">
{
'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.'
}
</Header>
</Segment>
<Recaptcha onVerify={this.props.onVerify} />
<Segment textAlign="center">
<Button
color="green"
disabled={this.props.token === null}
onClick={() => {
this.props.handleSubmit(this.props.complete);
this.props.history.push(
`/feed/${this.props.AgendaItemId}/submission-confirmation`
);
}}>
<Header as="h1" style={{ color: 'white' }}>
SUBMIT
</Header>
</Button>
</Segment>
</Segment>
</Container>
</div>
<div>
{this.state.showPopup ? <EmailConfirmationPopup history={this.props.history} /> : null}
<div
style={{
display: 'flex',
minHeight: '63vh',
flexDirection: 'column',
}}>
<div
style={{
position: 'relative',
zIndex: 50,
display: this.props.firstName !== '' ? 'none' : 'block',
}}>
<Container>
<Segment>
<Header as="h1" className="agenda-item-step" textAlign="center">
Step 2: Confirm Your Position On:
</Header>
<Header as="h2" className="agenda-item-number" textAlign="center">
Agenda Item #{this.props.AgendaItemId}
</Header>
<Segment className="agenda-item-recommendation">
<Header as="h4">Recommended action:</Header>
<div> {this.props.Recommendations} </div>
</Segment>
<Segment>
<Button
onClick={() => {
this.props.editingForm(true);
this.props.history.goBack();
}}
style={{ position: 'relative', float: 'right' }}>
Edit
</Button>
<Header as="h4" className="agenda-item-section">
Your name and zipcode:
</Header>
{this.props.complete.firstName} {this.props.complete.lastName},{' '}
{this.props.complete.zipcode}
<Header as="h4" className="agenda-item-section">
Your e-mail address:
</Header>{' '}
{this.props.complete.email}
<Header as="h4" className="agenda-item-section">
Your position:
</Header>{' '}
{this.props.Pro === 1
? 'Agree'
: this.props.Pro === 0
? 'Disagree'
: 'Need more information'}
<Header as="h4" className="agenda-item-section">
Additional comments:
</Header>{' '}
{this.props.complete.content}
<Header as="h4" className="agenda-item-section">
Additional demographics:
</Header>
{this.props.complete.resident && (
<div>
{'Resident of the city'}
<br />
</div>
)}
{this.props.complete.homeOwner && (
<div>
{'Home owner in the city'}
<br />
</div>
)}
{this.props.complete.businessOwner && (
<div>{'Business owner in the city'}</div>
)}
{this.props.complete.childSchool && (
<div>
{'Has children in school in the city'}
<br />
</div>
)}
{this.props.complete.school && (
<div>
{'Attends school in the city'}
<br />
</div>
)}
{this.props.complete.works && (
<div>
{'Employed in the city'}
<br />
</div>
)}
</Segment>
<Segment color="orange">
<Header as="h3">
{
'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.'
}
</Header>
</Segment>
<Recaptcha onVerify={this.props.onVerify} />
<Segment textAlign="center">
<Button
color="green"
disabled={this.props.token === null}
onClick={() => {
this.setState({showPopup: true}, () => {
this.props.scrollToAppTop();
this.props.handleSubmit(this.props.complete);
});
}}>
<Header as="h1" style={{ color: 'white' }}>
SUBMIT
</Header>
</Button>
</Segment>
</Segment>
</Container>
</div>
</div>
</div>
);
}
Expand Down
45 changes: 45 additions & 0 deletions src/component/EmailConfirmationPopup.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@

import React, { Component } from 'react';
import { Button, Header } from 'semantic-ui-react';

class EmailConfirmationPopup extends Component {
constructor(props){
super(props);
this.handleClose = this.handleClose.bind(this);
}

handleClose() {
// TODO once form flow has been optimized reset form
this.props.history.push("/feed/");
}

render() {

return (
<div>
<div className="overlay">
<div className="email-confirmation-container">
<Header
as="h2">Success!</Header>
<p>Your feedback will be compiled into a report which we will send to the
City Council in advance of the up coming meeting</p>
<p className="please-confirm-email">Please Confirm Your Email Address</p>
<p>We sent a confirmation link to your email to verify
you're a real person</p>
<p>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</p>
<p><strong>Check Your Email for a Confirmation Link</strong></p>
<Button
style={{backgroundColor: '#192a56', color: "white"}}
onClick={this.handleClose}
content="Close and Return to Feed">
</Button>
</div>
</div>
</div>
)
}
}

export default EmailConfirmationPopup;
59 changes: 59 additions & 0 deletions src/component/EmailConfirmationPopup.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
Loading