refactor: Alter layout and copy of Feedback component in Footer (#3542)

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

@@ -7,8 +7,8 @@ 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 ".";
+import Link from "@mui/material/Link";
 
 const StyledForm = styled(Form)(({ theme }) => ({
   "& > *": contentFlowSpacing(theme),
@@ -52,8 +52,25 @@ const FeedbackForm: React.FC<FormProps> = ({ inputs, handleSubmit }) => {
   return (
     <Formik initialValues={initialValues} onSubmit={handleSubmit}>
       <StyledForm>
+        <FeedbackDisclaimer>
+          Do not share personal or financial information in your feedback. If
+          you do we’ll act according to our{" "}
+          <Link
+            href="https://www.planx.uk/privacy"
+            target="_blank"
+            rel="noopener"
+          >
+            privacy policy
+          </Link>
+          .
+        </FeedbackDisclaimer>
         <FormInputs inputs={inputs} />
-        <FeedbackDisclaimer />
+        <FeedbackDisclaimer>
+          This information is not monitored frequently by planning officers, do
+          not use it to provide extra information or queries with regard to your
+          application or project. Any information of this nature will be
+          disregarded.
+        </FeedbackDisclaimer>
         <Button
           type="submit"
           variant="contained"

editor.planx.uk/src/components/Feedback/index.test.tsx

@@ -181,7 +181,7 @@ describe("Feedback component triage journey", () => {
 
     await user.type(
       getByTestId("userCommentTextarea"),
-      "This information is wrong",
+      "This information is wrong"
     );
 
     await user.click(getByText("Send feedback"));
@@ -207,7 +207,9 @@ describe("Feedback component 'Report an issue with this page journey'", () => {
     expect(scrollIntoViewMock).toBeCalledTimes(1);
 
     await waitFor(() => {
-      expect(getByText("Report an issue")).toBeInTheDocument();
+      expect(
+        getByText("Report an issue with this service")
+      ).toBeInTheDocument();
       expect(getByLabelText("What were you doing?")).toBeInTheDocument();
       expect(getByLabelText("What went wrong?")).toBeInTheDocument();
     });
@@ -321,7 +323,7 @@ describe("Feedback component accessibility", () => {
 
   test("Issue form via triage should have no accessibility violations", async () => {
     const { container, getByText, getByLabelText, getByRole, user } = setup(
-      <Feedback />,
+      <Feedback />
     );
 
     await user.click(getByText("feedback"));
@@ -385,11 +387,11 @@ describe("Feedback component accessibility", () => {
 
     await user.type(
       getByLabelText("What were you doing?"),
-      "Answering a question",
+      "Answering a question"
     );
     await user.type(
       getByLabelText("What went wrong?"),
-      "I couldn't select Continue",
+      "I couldn't select Continue"
     );
 
     await user.click(getByText("Send feedback"));

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

@@ -197,7 +197,7 @@ const Feedback: React.FC = () => {
       return (
         <TitleAndCloseFeedbackHeader
           Icon={WarningIcon}
-          title="Report an issue"
+          title="Report an issue with this service"
         />
       );
     } else
@@ -207,7 +207,7 @@ const Feedback: React.FC = () => {
           <FeedbackTitle>
             <WarningIcon />
             <Typography variant="h3" component="h2">
-              Report an issue
+              Report an issue with this service
             </Typography>
           </FeedbackTitle>
         </>

editor.planx.uk/src/ui/public/FeedbackDisclaimer.tsx

@@ -1,23 +1,13 @@
 import Box from "@mui/material/Box";
-import Link from "@mui/material/Link";
 import Typography from "@mui/material/Typography";
-import React from "react";
+import React, { PropsWithChildren } from "react";
 
-export default function FeedbackDisclaimer(): FCReturn {
+export default function FeedbackDisclaimer({
+  children,
+}: PropsWithChildren): FCReturn {
   return (
     <Box>
-      <Typography variant="body2">
-        Do not share personal or financial information in your feedback. If you
-        do we’ll act according to our{" "}
-        <Link
-          href="https://www.planx.uk/privacy"
-          target="_blank"
-          rel="noopener"
-        >
-          privacy policy
-        </Link>
-        .
-      </Typography>
+      <Typography variant="body2">{children}</Typography>
     </Box>
   );
 }