- Contact
+
+
+
+
);
diff --git a/src/components/contact/ContactForm.jsx b/src/components/contact/ContactForm.jsx
new file mode 100644
index 000000000..c6434dbd5
--- /dev/null
+++ b/src/components/contact/ContactForm.jsx
@@ -0,0 +1,250 @@
+import React, { Component } from 'react';
+import PropTypes from 'proptypes';
+import { connect } from 'react-redux';
+import { sendGitRequest } from '@reducers/data';
+import { showFeedbackSuccess } from '@reducers/ui';
+
+import Loader from '@components/common/Loader';
+import Modal from '@components/common/Modal';
+import DataRequestError from '@components/main/body/DataRequestError';
+
+const contactInitialState = {
+ firstName: '',
+ lastName: '',
+ email: '',
+ association: '',
+ message: '',
+ disableButton: true,
+ invalidEmail: false,
+};
+
+class ContactForm extends Component {
+ constructor(props) {
+ super(props);
+ this.state = contactInitialState;
+ this.timer = null;
+ }
+
+ componentDidUpdate() {
+ const { displayFeedbackSuccess } = this.props;
+ // Hide success message and clear form fields after 5 seconds
+ if (displayFeedbackSuccess) {
+ this.timer = setTimeout(() => this.clearFeedback(), 5000);
+ }
+ }
+
+ componentWillUnmount() {
+ const { displayFeedbackSuccess } = this.props;
+ if (displayFeedbackSuccess) {
+ this.clearFeedback();
+ }
+ // Clear timeout to prevent memory leak if user navigates to another page before timer fires
+ if (this.timer) {
+ clearTimeout(this.timer);
+ }
+ }
+
+ clearFeedback = () => {
+ // Dispatches UI action to hide feedback success message and clears form fields
+ const { showSuccessMessage } = this.props;
+ showSuccessMessage(false);
+ this.setState(contactInitialState);
+ };
+
+ validateEmail = email => {
+ // eslint-disable-next-line
+ if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
+ return true;
+ }
+ return false;
+ }
+
+ onInputChange = event => {
+ event.preventDefault();
+ this.setState({ [event.target.name]: event.target.value },
+ () => {
+ const {
+ firstName,
+ lastName,
+ email,
+ message,
+ } = this.state;
+
+ if (firstName !== '' && lastName !== '' && email !== '' && message !== '') {
+ this.setState({
+ disableButton: false,
+ });
+ } else {
+ this.setState({
+ disableButton: true,
+ invalidEmail: false,
+ });
+ }
+ });
+ }
+
+ handleSubmit = event => {
+ event.preventDefault();
+ const {
+ firstName,
+ lastName,
+ email,
+ association,
+ message,
+ } = this.state;
+
+ if (this.validateEmail(email)) {
+ const { submitFeedback } = this.props;
+ this.setState({
+ disableButton: true,
+ invalidEmail: false,
+ });
+
+ const body = [
+ `First name: ${firstName}`,
+ `Last name: ${lastName}`,
+ `Email: ${email}`,
+ `Association: ${association || 'Not provided'}`,
+ `Message: ${message}`,
+ ].join('\n');
+
+ submitFeedback({ title: email, body });
+ } else {
+ this.setState({
+ invalidEmail: true,
+ });
+ }
+ };
+
+ render() {
+ const {
+ firstName,
+ lastName,
+ email,
+ association,
+ message,
+ disableButton,
+ invalidEmail,
+ } = this.state;
+
+ const {
+ openErrorModal,
+ displayFeedbackSuccess,
+ } = this.props;
+
+ return (
+
+ );
+ }
+}
+
+const mapStateToProps = state => ({
+ openErrorModal: state.ui.error.isOpen,
+ displayFeedbackSuccess: state.ui.displayFeedbackSuccess,
+});
+
+const mapDispatchToProps = dispatch => ({
+ submitFeedback: fields => dispatch(sendGitRequest(fields)),
+ showSuccessMessage: bool => dispatch(showFeedbackSuccess(bool)),
+});
+
+ContactForm.propTypes = {
+ submitFeedback: PropTypes.func.isRequired,
+ openErrorModal: PropTypes.bool.isRequired,
+ showSuccessMessage: PropTypes.func.isRequired,
+ displayFeedbackSuccess: PropTypes.bool.isRequired,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ContactForm);
diff --git a/src/components/contact/ContactImage.jsx b/src/components/contact/ContactImage.jsx
new file mode 100644
index 000000000..62389e0ca
--- /dev/null
+++ b/src/components/contact/ContactImage.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const ContactImage = () => (
+
+);
+
+export default ContactImage;
diff --git a/src/components/contact/ContactIntro.jsx b/src/components/contact/ContactIntro.jsx
new file mode 100644
index 000000000..99cc90003
--- /dev/null
+++ b/src/components/contact/ContactIntro.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const ContactIntro = () => (
+
+
Don't See What You Need?
+
+ We want to build a tool that works for you. We are open to suggestions and feedback and would
+ love the opportunity to get connected. Feel free to input your information in the contact form
+ below and we will be sure to get back to you within 2-3 business days. Thank you!
+
+
+);
+
+export default ContactIntro;
diff --git a/src/components/main/menu/DistrictSelector/DistrictSelector.jsx b/src/components/main/menu/DistrictSelector/DistrictSelector.jsx
index a488a9de3..e5ab001d2 100644
--- a/src/components/main/menu/DistrictSelector/DistrictSelector.jsx
+++ b/src/components/main/menu/DistrictSelector/DistrictSelector.jsx
@@ -33,7 +33,7 @@ const DistrictSelector = ({
const renderSet = set => {
const renderHeader = type => {
const [header] = DISTRICT_TYPES.filter(district => district.id === type);
- return header.name;
+ return `${header.name} (Set ${set.charAt(set.length - 1)}):`;
};
if (comparison[set]?.district && comparison[set]?.list.length > 0) {
@@ -42,7 +42,6 @@ const DistrictSelector = ({
{renderHeader(comparison[set].district)}
- :
({
@@ -36,6 +39,21 @@ export const getPinInfoFailure = error => ({
payload: error,
});
+export const sendGitRequest = fields => ({
+ type: types.SEND_GIT_REQUEST,
+ payload: fields,
+});
+
+export const gitResponseSuccess = response => ({
+ type: types.GIT_RESPONSE_SUCCESS,
+ payload: response,
+});
+
+export const gitResponseFailure = error => ({
+ type: types.GIT_RESPONSE_FAILURE,
+ payload: error,
+});
+
const initialState = {
isLoading: false,
error: null,
@@ -107,6 +125,33 @@ export default (state = initialState, action) => {
isLoading: false,
};
}
+ case types.SEND_GIT_REQUEST:
+ return {
+ ...state,
+ isLoading: true,
+ };
+ case types.GIT_RESPONSE_SUCCESS:
+ return {
+ ...state,
+ error: null,
+ isLoading: false,
+ };
+ case types.GIT_RESPONSE_FAILURE: {
+ const {
+ response: { status },
+ message,
+ } = action.payload;
+
+ return {
+ ...state,
+ error: {
+ code: status,
+ message,
+ error: action.payload,
+ },
+ isLoading: false,
+ };
+ }
default:
return state;
}
diff --git a/src/redux/reducers/ui.js b/src/redux/reducers/ui.js
index 9fc36a377..31d8169a5 100644
--- a/src/redux/reducers/ui.js
+++ b/src/redux/reducers/ui.js
@@ -6,6 +6,7 @@ const types = {
SET_ERROR_MODAL: 'SET_ERROR_MODAL',
SHOW_DATA_CHARTS: 'SHOW_DATA_CHARTS',
SHOW_COMPARISON_CHARTS: 'SHOW_COMPARISON_CHARTS',
+ SHOW_FEEDBACK_SUCCESS: 'SHOW_FEEDBACK_SUCCESS',
};
export const toggleMenu = () => ({
@@ -32,6 +33,11 @@ export const showComparisonCharts = isShown => ({
payload: isShown,
});
+export const showFeedbackSuccess = isShown => ({
+ type: types.SHOW_FEEDBACK_SUCCESS,
+ payload: isShown,
+});
+
const initialState = {
menu: {
isOpen: true,
@@ -42,6 +48,7 @@ const initialState = {
},
showDataCharts: false,
showComparisonCharts: false,
+ displayFeedbackSuccess: false,
};
export default (state = initialState, action) => {
@@ -80,6 +87,11 @@ export default (state = initialState, action) => {
...state,
showComparisonCharts: action.payload,
};
+ case types.SHOW_FEEDBACK_SUCCESS:
+ return {
+ ...state,
+ displayFeedbackSuccess: action.payload,
+ };
default:
return state;
}
diff --git a/src/redux/rootSaga.js b/src/redux/rootSaga.js
index 01a236187..7034b4a30 100644
--- a/src/redux/rootSaga.js
+++ b/src/redux/rootSaga.js
@@ -3,6 +3,7 @@ import { all } from 'redux-saga/effects';
import data from './sagas/data';
import comparisonData from './sagas/comparisonData';
+
export default function* rootSaga() {
yield all([
data(),
diff --git a/src/redux/sagas/data.js b/src/redux/sagas/data.js
index ab75d9be4..62b057c82 100644
--- a/src/redux/sagas/data.js
+++ b/src/redux/sagas/data.js
@@ -15,11 +15,14 @@ import {
getDataFailure,
getPinInfoSuccess,
getPinInfoFailure,
+ gitResponseSuccess,
+ gitResponseFailure,
} from '../reducers/data';
import {
setErrorModal,
showDataCharts,
+ showFeedbackSuccess,
} from '../reducers/ui';
@@ -76,6 +79,13 @@ function* fetchPinInfo(srnumber) {
return data;
}
+function* postFeedback(message) {
+ const contactURL = `${BASE_URL}/feedback`;
+
+ const response = yield call(axios.post, contactURL, message);
+ return response;
+}
+
/* //////////// COMBINED API CALL //////////// */
function* getAll(filters) {
@@ -149,7 +159,20 @@ function* getPinData(action) {
}
}
+function* sendContactData(action) {
+ try {
+ const message = action.payload;
+ const data = yield call(postFeedback, message);
+ yield put(gitResponseSuccess(data));
+ yield put(showFeedbackSuccess(true));
+ } catch (e) {
+ yield put(gitResponseFailure(e));
+ yield put(setErrorModal(true));
+ }
+}
+
export default function* rootSaga() {
yield takeLatest(types.GET_DATA_REQUEST, getData);
yield takeEvery(types.GET_PIN_INFO_REQUEST, getPinData);
+ yield takeLatest(types.SEND_GIT_REQUEST, sendContactData);
}
diff --git a/src/styles/common/_dropdown.scss b/src/styles/common/_dropdown.scss
new file mode 100644
index 000000000..e572c86c9
--- /dev/null
+++ b/src/styles/common/_dropdown.scss
@@ -0,0 +1,7 @@
+.dropdown-content {
+ .dropdown-item {
+ &:hover {
+ background-color: #e0e0e0;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/styles/contact/_contact.scss b/src/styles/contact/_contact.scss
new file mode 100644
index 000000000..3bf5bd2d8
--- /dev/null
+++ b/src/styles/contact/_contact.scss
@@ -0,0 +1,7 @@
+.contact-311 {
+ position: absolute;
+ top: 62px;
+ bottom: 80px;
+ overflow-y: auto;
+ color: $brand-main-color;
+}
\ No newline at end of file
diff --git a/src/styles/contact/_contactform.scss b/src/styles/contact/_contactform.scss
new file mode 100644
index 000000000..5ef2e6417
--- /dev/null
+++ b/src/styles/contact/_contactform.scss
@@ -0,0 +1,103 @@
+.feedback-form {
+ width: 50%;
+ margin: 50px auto;
+ text-align: center;
+
+ .form-group {
+ float: left;
+ margin-bottom: 15px;
+ width: 100%;
+ }
+
+ #fname-form {
+ width: 45%;
+ }
+
+ #lname-form {
+ width: 45%;
+ float: right;
+ }
+
+ .asterisk, .error-msg {
+ color: red;
+ }
+
+ .error-msg {
+ float: left;
+ font-size: 14px;
+ }
+
+ label {
+ font-weight: bold;
+ display: block;
+ text-align: left;
+ }
+
+ input, textarea {
+ width: 100%;
+ }
+
+ .btn-container {
+ text-align: center;
+ clear: both;
+ }
+
+ textarea {
+ padding: 3px;
+ }
+
+ .feedback-success {
+ font-weight: bold;
+ }
+
+ .invalid-email-message {
+ text-align: left;
+ }
+
+ .contact-btn {
+ background-color: $brand-cta1-color;
+ color: $brand-text-color;
+ font-weight: bold;
+ font-size: 18px;
+ font-family: $brand-heading-family;
+ width: 256px;
+ height: 42px;
+ margin-top: 30px;
+ border-radius: 10px;
+ &:focus:not(:active),
+ &:hover {
+ box-shadow: none;
+ background-color: transparent;
+ color: $brand-main-color;
+ }
+ }
+
+ .contact-btn:disabled,
+ .contact-btn[disabled]{
+ border: none;
+ background-color: #cccccc;
+ }
+
+ .loader-container {
+ position: absolute;
+ top: 80vh;
+ }
+
+ .data-request-error {
+ border-radius: 5px;
+ background: rgba(153, 153, 153, 0.7);
+ padding: 10px 35px;
+ margin: 0 10em;
+ }
+
+ @media only screen and (max-width: 768px) {
+ #fname-form {
+ width: 100%;
+ }
+
+ #lname-form {
+ width: 100%;
+ float: none;
+ }
+ }
+}
diff --git a/src/styles/contact/_contactimage.scss b/src/styles/contact/_contactimage.scss
new file mode 100644
index 000000000..fbcfdcdb0
--- /dev/null
+++ b/src/styles/contact/_contactimage.scss
@@ -0,0 +1,25 @@
+.contact-cover {
+ height: 55vh;
+ background-image: url('../assets/contact_bg.png');
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ position: relative;
+
+
+ .overlay-text {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ text-align: center;
+ font-size: 40px;
+ font-weight: bold;
+ font-family: $brand-heading-family;
+
+ .text-contact {
+ color: $brand-bg-color;
+ }
+ }
+}
+
\ No newline at end of file
diff --git a/src/styles/contact/_contactintro.scss b/src/styles/contact/_contactintro.scss
new file mode 100644
index 000000000..e34f8aabd
--- /dev/null
+++ b/src/styles/contact/_contactintro.scss
@@ -0,0 +1,17 @@
+.contact-intro-text {
+ margin-top: 48px;
+ margin-left: 5em;
+ margin-right: 5em;
+
+ h1 {
+ text-align: center;
+ }
+
+ p {
+ margin-top: 20px;
+ text-align: left;
+ font-size: 16px;
+ line-height: 19px;
+ }
+ }
+
\ No newline at end of file
diff --git a/src/styles/map/_map.scss b/src/styles/map/_map.scss
index 7fec344b2..d474b0a39 100644
--- a/src/styles/map/_map.scss
+++ b/src/styles/map/_map.scss
@@ -13,6 +13,25 @@
z-index: $z-map-export-button;
height: auto;
}
+
+ .heatmap-legend-wrapper {
+ z-index: $z-map-export-button;
+ position: absolute;
+ right: 10px;
+ bottom: 150px;
+ font-size: 12px;
+ font-weight: 600;
+
+ #heatmap-gradient-legend {
+ background: linear-gradient(90deg, blue 10%, cyan 25%, lime 45%, yellow 65%, red 100%);
+ width: 218px;
+ height: 35px;
+ color: white;
+ padding-left: 5px;
+ padding-right: 5px;
+ border-radius: 3px;
+ }
+ }
}
@import '~react-leaflet-markercluster/dist/styles.min.css';
diff --git a/src/styles/menu/_districtSelector.scss b/src/styles/menu/_districtSelector.scss
index 3e8074e70..1c47091bb 100644
--- a/src/styles/menu/_districtSelector.scss
+++ b/src/styles/menu/_districtSelector.scss
@@ -48,7 +48,7 @@
}
.district-selector-dropdown{
- #dropdown-item-label {
+ .dropdown-item-label {
font: $brand-text-family;
font-size: 16px;
}
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 05e057efd..64993c707 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -7,6 +7,7 @@
@import './common/tooltip';
@import './common/loader';
@import './common/collapsibleList';
+@import './common/dropdown';
@import './main/header';
@import './main/body';
@@ -34,3 +35,8 @@
@import './about/heroimage';
@import './about/whatis311data';
@import './about/howitworks';
+
+@import './contact/contact';
+@import './contact/contactimage';
+@import './contact/contactintro';
+@import './contact/contactform';
\ No newline at end of file