From 900e30b121fb0d8241fb93338945d94f9fdf0122 Mon Sep 17 00:00:00 2001
From: Rory Doak <138574807+RODO94@users.noreply.github.com>
Date: Thu, 22 Aug 2024 11:58:22 +0100
Subject: [PATCH] refactor: Alter layout and copy of Feedback component in
 Footer (#3542)

---
 .../src/components/Feedback/FeedbackForm.tsx  | 21 +++++++++++++++++--
 .../src/components/Feedback/index.test.tsx    | 12 ++++++-----
 .../src/components/Feedback/index.tsx         |  4 ++--
 .../src/ui/public/FeedbackDisclaimer.tsx      | 20 +++++-------------
 4 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/editor.planx.uk/src/components/Feedback/FeedbackForm.tsx b/editor.planx.uk/src/components/Feedback/FeedbackForm.tsx
index f374b36b60..63fb6408f7 100644
--- a/editor.planx.uk/src/components/Feedback/FeedbackForm.tsx
+++ b/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"
diff --git a/editor.planx.uk/src/components/Feedback/index.test.tsx b/editor.planx.uk/src/components/Feedback/index.test.tsx
index 2009dea98f..35fe87d4a5 100644
--- a/editor.planx.uk/src/components/Feedback/index.test.tsx
+++ b/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"));
diff --git a/editor.planx.uk/src/components/Feedback/index.tsx b/editor.planx.uk/src/components/Feedback/index.tsx
index f8dd889277..51d0e73ea7 100644
--- a/editor.planx.uk/src/components/Feedback/index.tsx
+++ b/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>
         </>
diff --git a/editor.planx.uk/src/ui/public/FeedbackDisclaimer.tsx b/editor.planx.uk/src/ui/public/FeedbackDisclaimer.tsx
index e2d3d9d359..d76d3cc4ec 100644
--- a/editor.planx.uk/src/ui/public/FeedbackDisclaimer.tsx
+++ b/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>
   );
 }