feat: wire up feedback forms (#2701)

editor.planx.uk/src/@planx/components/shared/Preview/MoreInfo.tsx

@@ -4,7 +4,7 @@ import Container from "@mui/material/Container";
 import Drawer, { DrawerProps } from "@mui/material/Drawer";
 import IconButton from "@mui/material/IconButton";
 import { styled } from "@mui/material/styles";
-import MoreInfoFeedbackComponent from "components/MoreInfoFeedback";
+import MoreInfoFeedbackComponent from "components/Feedback/MoreInfoFeedback";
 import { hasFeatureFlag } from "lib/featureFlags";
 import React from "react";
 

editor.planx.uk/src/components/Feedback/FeedbackForm.tsx

@@ -0,0 +1,76 @@
+import Button from "@mui/material/Button";
+import { styled } from "@mui/material/styles";
+import { contentFlowSpacing } from "@planx/components/shared/Preview/Card";
+import { Form, Formik, useFormikContext } from "formik";
+import React from "react";
+import FeedbackDisclaimer from "ui/public/FeedbackDisclaimer";
+import InputLabel from "ui/public/InputLabel";
+import ErrorWrapper from "ui/shared/ErrorWrapper";
+import Input from "ui/shared/Input";
+
+import { FeedbackFormInput, FormProps, UserFeedback } from ".";
+
+const StyledForm = styled(Form)(({ theme }) => ({
+  "& > *": contentFlowSpacing(theme),
+}));
+
+function FormInputs({ inputs }: { inputs: FeedbackFormInput[] }): FCReturn {
+  const { values, errors, handleChange } = useFormikContext<UserFeedback>();
+
+  return (
+    <>
+      {inputs.map((input: FeedbackFormInput) => (
+        <ErrorWrapper
+          key={input.name}
+          error={errors?.[input.name]}
+          id={`${input.label || input.ariaDescribedBy}-error`}
+        >
+          {input.label ? (
+            <InputLabel label={input.label} htmlFor={input.id}>
+              <Input
+                required
+                multiline
+                bordered
+                id={input.id}
+                name={input.name}
+                value={values?.[input.name]}
+                onChange={handleChange}
+              />
+            </InputLabel>
+          ) : (
+            <Input
+              name={input.name}
+              required
+              multiline
+              bordered
+              aria-describedby={input.ariaDescribedBy}
+              value={values?.[input.name]}
+              onChange={handleChange}
+            />
+          )}
+        </ErrorWrapper>
+      ))}
+    </>
+  );
+}
+
+const FeedbackForm: React.FC<FormProps> = ({ inputs, handleSubmit }) => {
+  const initialValues: UserFeedback = {
+    userContext: undefined,
+    userComment: "",
+  };
+
+  return (
+    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+      <StyledForm>
+        <FormInputs inputs={inputs} />
+        <FeedbackDisclaimer />
+        <Button type="submit" variant="contained" sx={{ marginTop: 2.5 }}>
+          Send feedback
+        </Button>
+      </StyledForm>
+    </Formik>
+  );
+};
+
+export default FeedbackForm;

editor.planx.uk/src/components/MoreInfoFeedback.tsx → editor.planx.uk/src/components/Feedback/MoreInfoFeedback.tsx

@@ -1,15 +1,19 @@
 import CancelIcon from "@mui/icons-material/Cancel";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
 import Container from "@mui/material/Container";
 import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 import { contentFlowSpacing } from "@planx/components/shared/Preview/Card";
+import {
+  getInternalFeedbackMetadata,
+  insertFeedbackMutation,
+} from "lib/feedback";
 import React, { useState } from "react";
-import FeedbackDisclaimer from "ui/public/FeedbackDisclaimer";
 import FeedbackOption from "ui/public/FeedbackOption";
-import Input from "ui/shared/Input";
+
+import { FeedbackFormInput, UserFeedback } from ".";
+import FeedbackForm from "./FeedbackForm";
 
 const MoreInfoFeedback = styled(Box)(({ theme }) => ({
   borderTop: `2px solid ${theme.palette.border.main}`,
@@ -21,9 +25,7 @@ const MoreInfoFeedback = styled(Box)(({ theme }) => ({
 
 const FeedbackBody = styled(Box)(({ theme }) => ({
   padding: theme.spacing(1, 0),
-  "& form > * + *": {
-    ...contentFlowSpacing(theme),
-  },
+  "& form > * + *": contentFlowSpacing(theme),
 }));
 
 const MoreInfoFeedbackComponent: React.FC = () => {
@@ -49,23 +51,14 @@ const MoreInfoFeedbackComponent: React.FC = () => {
     }
   };
 
-  const handleFeedbackFormSubmit = (e: any) => {
-    e.preventDefault();
-
-    const formData = new FormData(e.target);
-    const formDataPayload: any = {};
-
-    for (const [key, value] of formData.entries()) {
-      formDataPayload[key] = value;
-    }
-
-    console.log("The users selection", feedbackOption);
-
-    console.log("The user inputs", formDataPayload);
-    // Prep the form data payload?
-
+  async function handleFeedbackFormSubmit(values: UserFeedback) {
+    if (!feedbackOption) return;
+    const metadata = await getInternalFeedbackMetadata();
+    const feedbackType = { feedbackType: feedbackOption };
+    const data = { ...metadata, ...feedbackType, ...values };
+    await insertFeedbackMutation(data);
     setCurrentFeedbackView("thanks");
-  };
+  }
 
   function FeedbackYesNo(): FCReturn {
     return (
@@ -94,26 +87,24 @@ const MoreInfoFeedbackComponent: React.FC = () => {
   }
 
   function FeedbackInput(): FCReturn {
+    const commentFormInputs: FeedbackFormInput[] = [
+      {
+        name: "userComment",
+        ariaDescribedBy: "comment-title",
+      },
+    ];
+
     return (
       <MoreInfoFeedback>
         <Container maxWidth={false}>
           <Typography variant="h4" component="h3" gutterBottom>
             Please help us to improve this service by sharing feedback
           </Typography>
           <FeedbackBody>
-            <form onSubmit={(e) => handleFeedbackFormSubmit(e)}>
-              <Input
-                name="userComment"
-                required
-                multiline
-                bordered
-                aria-describedby="comment-title"
-              />
-              <FeedbackDisclaimer />
-              <Button type="submit" variant="contained" sx={{ marginTop: 2.5 }}>
-                Send feedback
-              </Button>
-            </form>
+            <FeedbackForm
+              inputs={commentFormInputs}
+              handleSubmit={handleFeedbackFormSubmit}
+            />
           </FeedbackBody>
         </Container>
       </MoreInfoFeedback>