Suggestion box

src/components/Feeds/AllyFeed.js

@@ -167,11 +167,7 @@ const AllyFeed = props => {
         ) : (
           <NoResultsCard type="allies" />
         )}
-        <ModalForm
-          isOpen={isOpen}
-          title="Sign up to be an Ally"
-          onClose={onClose}
-        />
+        <ModalForm isOpen={isOpen} onClose={onClose} />
       </Box>
     </>
   );

src/components/Forms/AllySignUpForm.js

@@ -63,6 +63,10 @@ const AllySignUpForm = () => {
         }
       }}
     >
+      <Text fontSize="xl" textAlign="center">
+        Sign up to be an Ally
+      </Text>
+
       {/* renders when form is submitted with validation errors */}
       {validationMessage && <Text>{validationMessage}</Text>}
 

src/components/Forms/BusinessSignUpForm.js

@@ -153,6 +153,9 @@ const BusinessSignUpForm = () => {
         }
       }}
     >
+      <Text fontSize="xl" textAlign="center">
+        Register your business
+      </Text>
       {/* renders when form is submitted with validation errors */}
       {validationMessage && <Text>{validationMessage}</Text>}
 

src/components/Forms/SuggestionBox.js

@@ -0,0 +1,192 @@
+import React, { useState } from 'react';
+import {
+  FormControl,
+  Flex,
+  useTheme,
+  FormLabel,
+  Input,
+  Textarea,
+  Text,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
+  NumberIncrementStepper,
+  NumberDecrementStepper,
+} from '@chakra-ui/core';
+import PrimaryButton from '../Buttons/PrimaryButton';
+
+const encode = data => {
+  return Object.keys(data)
+    .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
+    .join('&');
+};
+
+//how to intigrate with netlifys for handling
+//https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/#form-handling-with-static-site-generators
+
+export default function SuggestionBox() {
+  const [topic, setTopic] = useState(null);
+  const [description, setDescription] = useState(null);
+  const [benifits, setBenifits] = useState(null);
+  const [urgency, setUrgency] = useState(5);
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [validationMessage, setValidationMessage] = useState(null);
+  const [submitted, setSubmitted] = useState(false);
+
+  const theme = useTheme();
+
+  const handleSubmit = event => {
+    const toSubmit = {
+      topic,
+      description,
+      benifits,
+      urgency,
+      name,
+      email,
+    };
+
+    //Custom Validation
+    const valuesToValidate = Object.values(toSubmit);
+    //Validates all required fields (initiated with null) are filled
+    if (valuesToValidate.includes(null)) {
+      setValidationMessage('All fields with * are required.');
+      return;
+    }
+
+    //posts to Netlify intigration
+    fetch('/', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      body: encode({ 'form-name': 'contact', toSubmit }),
+    })
+      .then(() => console.log('Success!'))
+      .catch(error => console.log(error));
+
+    event.preventDefault();
+    setSubmitted(true);
+  };
+
+  if (submitted) {
+    return (
+      <Text fontSize="2xl" textAlign="center">
+        Thank you for your suggestion!
+      </Text>
+    );
+  }
+
+  return (
+    <FormControl
+      width="100%"
+      maxWidth="1000px"
+      margin="0 auto 3rem"
+      padding="0 24px"
+      onKeyPress={event => {
+        if (event.key === 'Enter') {
+          handleSubmit(event);
+        }
+      }}
+      //netlify form handling
+      method="post"
+      data-netlify-honeypot="bot-field"
+      data-netlify="true"
+      name="contact"
+    >
+      {/* netlify form handling */}
+      <input type="hidden" name="bot-field" />
+      <input type="hidden" name="form-name" value="contact" />
+      {/* netlify form handling */}
+
+      <Text fontSize="xl" textAlign="center">
+        Suggestion Box
+      </Text>
+
+      {/* renders when form is submitted with validation errors */}
+      {validationMessage && <Text textAlign="center">{validationMessage}</Text>}
+
+      <Flex direction="column" margin={theme.spacing.base}>
+        <FormLabel isRequired htmlFor="topic">
+          Topic
+        </FormLabel>
+        <Input
+          value={topic}
+          id="topic"
+          type="text"
+          placeholder="e.g. Business, Functionality, New Feature"
+          onChange={event => setTopic(event.currentTarget.value)}
+        />
+      </Flex>
+
+      <Flex direction="column" margin={theme.spacing.base}>
+        <FormLabel isRequired htmlFor="textField">
+          Description
+        </FormLabel>
+        <Textarea
+          value={description}
+          id="description"
+          placeholder="Description"
+          onChange={event => setDescription(event.currentTarget.value)}
+        />
+      </Flex>
+
+      <Flex direction="column" margin={theme.spacing.base}>
+        <FormLabel isRequired htmlFor="benifits">
+          Benifits
+        </FormLabel>
+        <Textarea
+          value={benifits}
+          id="benifits"
+          placeholder="Benifits"
+          onChange={event => setBenifits(event.currentTarget.value)}
+        />
+      </Flex>
+
+      <Flex direction="column" margin={theme.spacing.base}>
+        <FormLabel isRequired htmlFor="urgency">
+          Urgency: 1 (Most Urgent) - 5 (Not Urgent)
+        </FormLabel>
+        <NumberInput
+          id="urgency"
+          type="number"
+          min={1}
+          max={5}
+          value={urgency}
+          onChange={value => setUrgency(value > 5 ? 5 : value)}
+        >
+          <NumberInputField />
+          <NumberInputStepper>
+            <NumberIncrementStepper />
+            <NumberDecrementStepper />
+          </NumberInputStepper>
+        </NumberInput>
+      </Flex>
+
+      <Flex width="100%" direction="column">
+        <Flex direction="column" margin={theme.spacing.base}>
+          <FormLabel htmlFor="name">Name</FormLabel>
+          <Input
+            value={name}
+            id="name"
+            type="text"
+            placeholder="Name"
+            onChange={event => setName(event.currentTarget.value)}
+          />
+        </Flex>
+        <Flex direction="column" margin={theme.spacing.base}>
+          <FormLabel htmlFor="email">Email</FormLabel>
+          <Input
+            value={email}
+            id="email"
+            type="text"
+            placeholder="Email"
+            onChange={event => setEmail(event.currentTarget.value)}
+          />
+        </Flex>
+
+        <Flex width="100%" justify="center">
+          <PrimaryButton onClick={handleSubmit}>Submit</PrimaryButton>
+        </Flex>
+      </Flex>
+    </FormControl>
+  );
+}

src/components/about/ContactCard.js

@@ -18,6 +18,7 @@ import React from 'react';
 import Image from '../../components/Image.js';
 import { VOLUNTEER_URL } from '../../constants/about';
 import BusinessSignUpForm from '../Forms/BusinessSignUpForm.js';
+import SuggestionBox from '../Forms/SuggestionBox.js';
 
 const CardContent = ({ title, blurb, publicId, alt, transforms = {} }) => {
   const theme = useTheme();
@@ -76,14 +77,14 @@ const CardImage = ({ publicId, transforms, alt }) => {
   );
 };
 
-const ModalForm = ({ isOpen, onClose, title }) => (
+const ModalForm = ({ isOpen, onClose, title, suggestions }) => (
   <Modal isOpen={isOpen} onClose={onClose}>
     <ModalOverlay />
     <ModalContent>
       <ModalHeader>{title}</ModalHeader>
       <ModalCloseButton />
       <ModalBody>
-        <BusinessSignUpForm />
+        {suggestions ? <SuggestionBox /> : <BusinessSignUpForm />}
       </ModalBody>
     </ModalContent>
   </Modal>
@@ -97,6 +98,7 @@ const ModalCard = ({
   blurb,
   margin,
   transforms = {},
+  suggestions,
 }) => {
   const { onOpen, isOpen, onClose } = useDisclosure();
   const focusRef = React.useRef();
@@ -120,7 +122,12 @@ const ModalCard = ({
           transforms={transforms}
         />
       </Flex>
-      <ModalForm isOpen={isOpen} title={modalTitle} onClose={onClose} />
+      <ModalForm
+        isOpen={isOpen}
+        title={modalTitle}
+        onClose={onClose}
+        suggestions={suggestions}
+      />
     </>
   );
 };
@@ -191,6 +198,7 @@ const ContactCard = ({
   modalTitle,
   email,
   transforms = {},
+  suggestions,
 }) => {
   const cardStyle = {
     hover: {
@@ -206,6 +214,7 @@ const ContactCard = ({
     return (
       <PseudoBox _hover={cardStyle.hover} _focus={cardStyle.focus}>
         <ModalCard
+          suggestions={suggestions}
           modalTitle={modalTitle}
           title={title}
           blurb={blurb}

src/pages/about.js

@@ -164,13 +164,22 @@ export default function About() {
             paddingTop="2rem"
             paddingBottom="2rem"
           >
-            <ContactCard
+            {/* <ContactCard
               modalCard
               title="Business Owners"
               publicId="assets/contact-left"
               alt="business shop window"
               transforms={{ width: 800, height: 450, crop: 'crop' }}
               blurb="Add your business to our list"
+            /> */}
+            <ContactCard
+              modalCard
+              suggestions
+              title="Suggestions"
+              blurb="How can we improve?"
+              publicId="assets/contact-left"
+              alt="business shop window"
+              transforms={{ width: 800, height: 450, crop: 'crop' }}
             />
             <ErrorBoundary>
               <StaticQuery