feat: Drop old inaccuracy reports, add new feedback category (#2801)

api.planx.uk/types.ts

@@ -44,7 +44,6 @@ export interface UserData {
   data?: Record<string, any>;
   auto?: boolean;
   override?: Record<string, any>;
-  feedback?: string;
 }
 
 export type Breadcrumb = Record<string, UserData>;

editor.planx.uk/src/@planx/components/PlanningConstraints/Public.tsx

@@ -9,7 +9,6 @@ import Card from "@planx/components/shared/Preview/Card";
 import QuestionHeader from "@planx/components/shared/Preview/QuestionHeader";
 import type { PublicProps } from "@planx/components/ui";
 import DelayedLoadingIndicator from "components/DelayedLoadingIndicator";
-import { useFormik } from "formik";
 import capitalize from "lodash/capitalize";
 import { useStore } from "pages/FlowEditor/lib/store";
 import { handleSubmit } from "pages/Preview/Node";
@@ -136,8 +135,7 @@ function Component(props: Props) {
           disclaimer={props.disclaimer}
           constraints={constraints}
           metadata={metadata}
-          previousFeedback={props.previouslySubmittedData?.feedback}
-          handleSubmit={(values: { feedback?: string }) => {
+          handleSubmit={() => {
             const _constraints: Array<
               EnhancedGISResponse | GISResponse["constraints"]
             > = [];
@@ -175,7 +173,6 @@ function Component(props: Props) {
             };
 
             props.handleSubmit?.({
-              ...values,
               data: passportData,
             });
           }}
@@ -201,32 +198,15 @@ export type PlanningConstraintsContentProps = {
   disclaimer: string;
   constraints: GISResponse["constraints"];
   metadata: GISResponse["metadata"];
-  handleSubmit: (values: { feedback: string }) => void;
+  handleSubmit: () => void;
   refreshConstraints: () => void;
-  previousFeedback?: string;
 };
 
 export function PlanningConstraintsContent(
   props: PlanningConstraintsContentProps,
 ) {
-  const {
-    title,
-    description,
-    disclaimer,
-    constraints,
-    metadata,
-    handleSubmit,
-    refreshConstraints,
-    previousFeedback,
-  } = props;
-  const formik = useFormik({
-    initialValues: {
-      feedback: previousFeedback || "",
-    },
-    onSubmit: (values) => {
-      handleSubmit?.(values);
-    },
-  });
+  const { title, description, constraints, metadata, refreshConstraints, disclaimer } =
+    props;
   const error = constraints.error || undefined;
   const showError = error || !Object.values(constraints)?.length;
 
@@ -239,7 +219,7 @@ export function PlanningConstraintsContent(
   );
 
   return (
-    <Card handleSubmit={formik.handleSubmit} isValid>
+    <Card handleSubmit={props.handleSubmit}>
       <QuestionHeader title={title} description={description} />
       {showError && (
         <ConstraintsFetchError

editor.planx.uk/src/@planx/components/PropertyInformation/Public.test.tsx

@@ -43,9 +43,6 @@ test("renders correctly when property override is enabled", async () => {
   expect(screen.getByText("About the property")).toBeInTheDocument();
   expect(screen.getByText("Property type")).toBeInTheDocument();
 
-  expect(screen.getByText("Change")).toBeInTheDocument();
-  expect(screen.queryByText("Report an inaccuracy")).not.toBeInTheDocument();
-
   await user.click(screen.getByTestId("continue-button"));
   expect(handleSubmit).toHaveBeenCalledTimes(1);
 });
@@ -67,26 +64,7 @@ test("renders correctly when property override is toggled off", async () => {
   expect(screen.getByText("Property type")).toBeInTheDocument();
 
   expect(screen.queryByText("Change")).not.toBeInTheDocument();
-  expect(screen.getByText("Report an inaccuracy")).toBeInTheDocument();
 
   await user.click(screen.getByTestId("continue-button"));
   expect(handleSubmit).toHaveBeenCalledTimes(1);
 });
-
-test("retains previously submitted feedback when going back", async () => {
-  const { user } = setup(
-    <MockedProvider>
-      <Presentational
-        {...defaultPresentationalProps}
-        showPropertyTypeOverride={false}
-        previousFeedback="My property type is wrong"
-      />
-    </MockedProvider>,
-  );
-
-  expect(screen.getByText("Report an inaccuracy")).toBeInTheDocument();
-
-  // expand the feedback input
-  await user.click(screen.getByText("Report an inaccuracy"));
-  expect(screen.getByText("My property type is wrong")).toBeInTheDocument();
-});

editor.planx.uk/src/@planx/components/PropertyInformation/Public.tsx

@@ -9,7 +9,6 @@ import QuestionHeader from "@planx/components/shared/Preview/QuestionHeader";
 import { SummaryListTable } from "@planx/components/shared/Preview/SummaryList";
 import type { PublicProps } from "@planx/components/ui";
 import { Feature } from "@turf/helpers";
-import { useFormik } from "formik";
 import { publicClient } from "lib/graphql";
 import find from "lodash/find";
 import { useAnalyticsTracking } from "pages/FlowEditor/lib/analyticsProvider";
@@ -19,7 +18,6 @@ import React from "react";
 
 import type { SiteAddress } from "../FindProperty/model";
 import { FETCH_BLPU_CODES } from "../FindProperty/Public";
-import FeedbackInput from "../shared/FeedbackInput";
 import { ErrorSummaryContainer } from "../shared/Preview/ErrorSummaryContainer";
 import type { PropertyInformation } from "./model";
 
@@ -46,7 +44,6 @@ function Component(props: PublicProps<PropertyInformation>) {
       }
       titleBoundary={passport.data?.["property.boundary.title"]}
       blpuCodes={blpuCodes}
-      previousFeedback={props.previouslySubmittedData?.feedback}
       overrideAnswer={overrideAnswer}
       handleSubmit={props.handleSubmit}
     />
@@ -78,7 +75,6 @@ export interface PresentationalProps {
   localAuthorityDistrict?: string[];
   titleBoundary?: Feature;
   blpuCodes?: any;
-  previousFeedback?: string;
   overrideAnswer: (fn: string) => void;
   handleSubmit?: handleSubmit;
 }
@@ -104,20 +100,10 @@ export function Presentational(props: PresentationalProps) {
     localAuthorityDistrict,
     titleBoundary,
     blpuCodes,
-    previousFeedback,
     overrideAnswer,
     handleSubmit,
   } = props;
   const teamName = useStore((state) => state.teamName);
-  const formik = useFormik({
-    initialValues: {
-      feedback: previousFeedback || "",
-    },
-    onSubmit: (values) => {
-      handleSubmit?.(values);
-    },
-  });
-
   const propertyDetails: PropertyDetail[] = [
     {
       heading: "Address",
@@ -143,7 +129,7 @@ export function Presentational(props: PresentationalProps) {
   ];
 
   return (
-    <Card handleSubmit={formik.handleSubmit} isValid>
+    <Card handleSubmit={handleSubmit}>
       <QuestionHeader title={title} description={description} />
       <MapContainer>
         <p style={visuallyHidden}>
@@ -179,15 +165,6 @@ export function Presentational(props: PresentationalProps) {
           overrideAnswer={overrideAnswer}
         />
       )}
-      {!showPropertyTypeOverride && (
-        <Box textAlign="right">
-          <FeedbackInput
-            text="Report an inaccuracy"
-            handleChange={formik.handleChange}
-            value={formik.values.feedback}
-          />
-        </Box>
-      )}
     </Card>
   );
 }

editor.planx.uk/src/@planx/components/Result/Public/index.tsx

@@ -2,14 +2,12 @@ import ErrorOutline from "@mui/icons-material/ErrorOutline";
 import Box from "@mui/material/Box";
 import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
-import FeedbackInput from "@planx/components/shared/FeedbackInput";
 import Card from "@planx/components/shared/Preview/Card";
 import SimpleExpand from "@planx/components/shared/Preview/SimpleExpand";
 import { WarningContainer } from "@planx/components/shared/Preview/WarningContainer";
-import { useFormik } from "formik";
 import { Store, useStore } from "pages/FlowEditor/lib/store";
 import type { handleSubmit } from "pages/Preview/Node";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 import type { Node, TextContent } from "types";
 
@@ -95,43 +93,18 @@ const Result: React.FC<Props> = ({
   reasonsTitle = "",
   responses,
   disclaimer,
-  previouslySubmittedData,
 }) => {
-  const formik = useFormik({
-    initialValues: {
-      feedback: previouslySubmittedData?.feedback || "",
-    },
-    onSubmit: (values, { resetForm }) => {
-      if (values.feedback) {
-        resetForm();
-      }
-      handleSubmit?.({ feedback: values.feedback });
-    },
-  });
   const visibleResponses = responses.filter((r) => !r.hidden);
   const hiddenResponses = responses.filter((r) => r.hidden);
 
-  const [showSubmitButton, setShowSubmitButton] = useState<boolean>(
-    Boolean(handleSubmit),
-  );
-
-  useEffect(() => {
-    if (handleSubmit) return;
-
-    setShowSubmitButton(formik.values.feedback.length > 0);
-  }, [formik.values.feedback]);
-
   return (
     <Box width="100%" display="flex" flexDirection="column" alignItems="center">
       <ResultSummary
         heading={headingTitle}
         description={description}
         color={headingColor}
       />
-      <Card
-        handleSubmit={showSubmitButton ? formik.handleSubmit : undefined}
-        isValid
-      >
+      <Card handleSubmit={handleSubmit}>
         <Box mt={4} mb={3}>
           <Typography variant="h2" gutterBottom>
             {reasonsTitle}
@@ -178,11 +151,6 @@ const Result: React.FC<Props> = ({
             </Box>
           </WarningContainer>
         )}
-        <FeedbackInput
-          text="Is this information inaccurate? **Tell us why.**"
-          handleChange={formik.handleChange}
-          value={formik.values.feedback}
-        />
       </Card>
     </Box>
   );

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

@@ -143,11 +143,46 @@ describe("Feedback component triage journey", () => {
     await user.click(getByText("feedback"));
     await user.click(getByRole("button", { name: "Comment" }));
 
+    await waitFor(() => {});
+    expect(getByText("Share a comment")).toBeInTheDocument();
+
+    await user.type(getByTestId("userCommentTextarea"), "What about 3D maps");
+
+    await user.click(getByText("Send feedback"));
+
     await waitFor(() => {
-      expect(getByText("Share a comment")).toBeInTheDocument();
+      expect(getInternalFeedbackMetadata).toBeCalledTimes(1);
+      expect(insertFeedbackMutation).toBeCalledTimes(1);
+      expect(getByText("Thank you for your feedback.")).toBeInTheDocument();
     });
+  });
+
+  test("Selecting 'Inaccuracy' from triage scrolls the comment form into view", async () => {
+    const { getByText, getByRole, user } = setup(<Feedback />);
+
+    await user.click(getByText("feedback"));
+    await user.click(getByRole("button", { name: "Inaccuracy" }));
 
-    await user.type(getByTestId("userCommentTextarea"), "This page is great");
+    expect(scrollIntoViewMock).toBeCalledTimes(2);
+
+    await waitFor(() => {
+      expect(getByText("Report an inaccuracy")).toBeInTheDocument();
+    });
+  });
+
+  test("Submitting 'Inaccuracy' form changes view to thank you message", async () => {
+    const { getByText, getByTestId, getByRole, user } = setup(<Feedback />);
+
+    await user.click(getByText("feedback"));
+    await user.click(getByRole("button", { name: "Inaccuracy" }));
+
+    await waitFor(() => {});
+    expect(getByText("Report an inaccuracy")).toBeInTheDocument();
+
+    await user.type(
+      getByTestId("userCommentTextarea"),
+      "This information is wrong",
+    );
 
     await user.click(getByText("Send feedback"));