From b8ae853dd6eb635d1238ce617157170bb9e73ee2 Mon Sep 17 00:00:00 2001
From: Matt Webster <me@matt-webster.net>
Date: Fri, 19 Mar 2021 12:37:57 -0700
Subject: [PATCH] [CMPT] Switch to hosted Contact web form Fixes #864 - added
 Formspree - new menu item and route

---
 client/.eslintrc.js                    |  5 ++
 client/Routes.jsx                      |  2 +
 client/components/Header.jsx           |  3 +
 client/components/main/ContactForm.jsx | 99 ++++++++++++++++++++++++++
 client/package-lock.json               | 36 ++++++++++
 client/package.json                    |  1 +
 6 files changed, 146 insertions(+)
 create mode 100644 client/components/main/ContactForm.jsx

diff --git a/client/.eslintrc.js b/client/.eslintrc.js
index 327461d76..053f0736b 100644
--- a/client/.eslintrc.js
+++ b/client/.eslintrc.js
@@ -47,6 +47,11 @@ module.exports = {
         roles: ["tabpanel"],
       },
     ],
+    "jsx-a11y/label-has-associated-control": [ 2, {
+      "labelComponents": ["label"],
+      "labelAttributes": ["htmlFor"],
+      "controlComponents": ["input"]
+    }],
     "react/jsx-filename-extension": [1, { extensions: [".js", ".jsx"] }],
   },
 };
diff --git a/client/Routes.jsx b/client/Routes.jsx
index f7bed0a92..c10e936d4 100644
--- a/client/Routes.jsx
+++ b/client/Routes.jsx
@@ -5,6 +5,7 @@ import Reports from '@components/main/Reports';
 import Privacy from '@components/main/Privacy';
 import Faqs from '@components/main/Faqs';
 import Blog from '@components/main/Blog';
+import ContactForm from '@components/main/ContactForm';
 
 export default function Routes() {
   return (
@@ -14,6 +15,7 @@ export default function Routes() {
       <Route path="/privacy" component={Privacy} />
       <Route path="/faqs" component={Faqs} />
       <Route path="/blog" component={Blog} />
+      <Route path="/contact" component={ContactForm} />
       <Route path="/">
         <Redirect to="map" />
       </Route>
diff --git a/client/components/Header.jsx b/client/components/Header.jsx
index 96c6cd836..cb1776dec 100644
--- a/client/components/Header.jsx
+++ b/client/components/Header.jsx
@@ -106,6 +106,9 @@ const Header = () => {
         <Link to="/privacy">
           <Button className={classes.button}>Privacy</Button>
         </Link>
+        <Link to="/contact">
+          <Button className={classes.button}>Contact</Button>
+        </Link>
       </Toolbar>
     </AppBar>
   );
diff --git a/client/components/main/ContactForm.jsx b/client/components/main/ContactForm.jsx
new file mode 100644
index 000000000..379e7b306
--- /dev/null
+++ b/client/components/main/ContactForm.jsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import { useForm } from '@formspree/react';
+import {
+  makeStyles,
+  Container,
+  Grid,
+  Button,
+} from '@material-ui/core';
+
+const useStyles = makeStyles({
+  root: {
+    color: 'black',
+    backgroundColor: 'white',
+    minHeight: '40em',
+    padding: '2em',
+    '& h1': {
+      fontSize: '2.5em',
+    },
+    '& img': {
+      maxWidth: '100%',
+      height: 'auto',
+      display: 'block',
+      marginLeft: 'auto',
+      marginRight: 'auto',
+    },
+    '& label': {
+      marginTop: '1em',
+      fontWeight: 500,
+      display: 'block',
+      width: '20em',
+    },
+    '& input': {
+      width: '40em',
+      padding: '0.5em',
+    },
+    '& textarea': {
+      width: '40em',
+      padding: '0.5em',
+    },
+  },
+});
+
+const FORMSPREE_FORM_ID = 'xknkwwez';
+
+const ContactForm = () => {
+  const [state, handleSubmit] = useForm(FORMSPREE_FORM_ID);
+  const classes = useStyles();
+
+  React.useEffect(() => {
+    console.log(state);
+  });
+
+  return (
+    <Container className={classes.root} maxWidth="md">
+      <Grid container spacing={2}>
+        <Grid item xs={9}>
+          <h1>Contact Us</h1>
+          { state.succeeded
+              && (
+                <div>
+                  Thank you for signing up! We will get back to you in 2-3 business days.
+                </div>
+              )}
+          { !state.succeeded
+              && (
+                <>
+                  <div>
+                    Don&apos;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.
+                  </div>
+                  <form id="fs-frm" onSubmit={handleSubmit} name="simple-contact-form">
+                    <div>
+                      <label htmlFor="full-name">Full Name</label>
+                      <input type="text" name="name" id="full-name" placeholder="First and Last" />
+                    </div>
+                    <div>
+                      <label htmlFor="email-address">Email Address</label>
+                      <input type="email" name="_replyto" id="email-address" placeholder="email@domain.com" required="" />
+                    </div>
+                    <div>
+                      <label htmlFor="message">Message</label>
+                      <textarea rows="5" name="message" id="message" placeholder="Your message here" required="" />
+                    </div>
+                    <input type="hidden" name="_subject" id="email-subject" value="Contact Form Submission" />
+                    <Button variant="contained" color="primary" type="submit" disabled={state.submitting}>Send Message</Button>
+                  </form>
+                </>
+              )}
+        </Grid>
+      </Grid>
+    </Container>
+  );
+};
+
+export default ContactForm;
diff --git a/client/package-lock.json b/client/package-lock.json
index 51ad9604c..a275a8de3 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -1182,6 +1182,24 @@
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
       "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
     },
+    "@formspree/core": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@formspree/core/-/core-2.6.2.tgz",
+      "integrity": "sha512-cbaNhWQ4BFZWosh1Oa4pKD3CWAK3sn+nK3D1UQj6hO1O+AUH502OabKo5+ugC/P2+d4YZLadIY3mC11Ig4kEzA==",
+      "requires": {
+        "@types/promise-polyfill": "^6.0.3",
+        "fetch-ponyfill": "^6.1.0",
+        "promise-polyfill": "^8.1.3"
+      }
+    },
+    "@formspree/react": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@formspree/react/-/react-2.2.3.tgz",
+      "integrity": "sha512-paiDNr0lsf3XwNiV8SrYQGXdSN471c9boFLesqxM01VimCgA0MwZbyo46cDxWO7ZML6FsuKUOvdjnRguSHFkow==",
+      "requires": {
+        "@formspree/core": "^2.6.1"
+      }
+    },
     "@jest/console": {
       "version": "24.9.0",
       "resolved": "https://registry.npmjs.org/@jest/console/-/console-24.9.0.tgz",
@@ -3428,6 +3446,11 @@
       "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
       "dev": true
     },
+    "@types/promise-polyfill": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/@types/promise-polyfill/-/promise-polyfill-6.0.3.tgz",
+      "integrity": "sha512-f/BFgF9a+cgsMseC7rpv9+9TAE3YNjhfYrtwCo/pIeCDDfQtE6PY0b5bao2eIIEpZCBUy8Y5ToXd4ObjPSJuFw=="
+    },
     "@types/prop-types": {
       "version": "15.7.3",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
@@ -7826,6 +7849,14 @@
         "bser": "2.1.1"
       }
     },
+    "fetch-ponyfill": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/fetch-ponyfill/-/fetch-ponyfill-6.1.1.tgz",
+      "integrity": "sha512-rWLgTr5A44/XhvCQPYj0X9Tc+cjUaHofSM4lcwjc9MavD5lkjIhJ+h8JQlavPlTIgDpwhuRozaIykBvX9ItaSA==",
+      "requires": {
+        "node-fetch": "~2.6.0"
+      }
+    },
     "figgy-pudding": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
@@ -12459,6 +12490,11 @@
       "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
       "dev": true
     },
+    "promise-polyfill": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-8.2.0.tgz",
+      "integrity": "sha512-k/TC0mIcPVF6yHhUvwAp7cvL6I2fFV7TzF1DuGPI8mBh4QQazf36xCKEHKTZKRysEoTQoQdKyP25J8MPJp7j5g=="
+    },
     "prompts": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.3.2.tgz",
diff --git a/client/package.json b/client/package.json
index 0cedb0a53..ff6f38c5d 100644
--- a/client/package.json
+++ b/client/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "homepage": "https://www.311-data.org/",
   "dependencies": {
+    "@formspree/react": "^2.2.3",
     "@mapbox/mapbox-gl-geocoder": "^4.7.0",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",