From 48a4be0438a7de5dd0f8d525ab7a51c35ee2b971 Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Mon, 13 May 2024 16:23:10 +0200
Subject: [PATCH 1/3] always enable continue button on findproperty map page

---
 .../components/FindProperty/Public/Map.tsx    | 133 ++++++++++-------
 .../FindProperty/Public/Public.test.tsx       |  15 +-
 .../components/FindProperty/Public/index.tsx  | 136 +++++++++---------
 3 files changed, 161 insertions(+), 123 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/FindProperty/Public/Map.tsx b/editor.planx.uk/src/@planx/components/FindProperty/Public/Map.tsx
index 90978ee9d6..1ad63c2512 100644
--- a/editor.planx.uk/src/@planx/components/FindProperty/Public/Map.tsx
+++ b/editor.planx.uk/src/@planx/components/FindProperty/Public/Map.tsx
@@ -11,10 +11,10 @@ import {
   MapContainer,
   MapFooter,
 } from "@planx/components/shared/Preview/MapContainer";
-import { GeoJSONObject } from "@turf/helpers";
 import { useStore } from "pages/FlowEditor/lib/store";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import InputLabel from "ui/public/InputLabel";
+import ErrorWrapper from "ui/shared/ErrorWrapper";
 import Input from "ui/shared/Input";
 
 import { DEFAULT_NEW_ADDRESS_LABEL, SiteAddress } from "../model";
@@ -23,10 +23,15 @@ interface PlotNewAddressProps {
   setAddress: React.Dispatch<React.SetStateAction<SiteAddress | undefined>>;
   setPage: React.Dispatch<React.SetStateAction<"os-address" | "new-address">>;
   initialProposedAddress?: SiteAddress;
-  boundary?: GeoJSONObject | undefined;
   id?: string;
   description?: string;
   descriptionLabel?: string;
+  mapValidationError?: string;
+  setMapValidationError: React.Dispatch<
+    React.SetStateAction<string | undefined>
+  >;
+  showSiteDescriptionError: boolean;
+  setShowSiteDescriptionError: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 type Coordinates = {
@@ -55,8 +60,6 @@ export default function PlotNewAddress(props: PlotNewAddressProps): FCReturn {
   const [siteDescription, setSiteDescription] = useState<string | null>(
     props.initialProposedAddress?.title ?? null,
   );
-  const [showSiteDescriptionError, setShowSiteDescriptionError] =
-    useState<boolean>(false);
 
   const [environment, boundaryBBox] = useStore((state) => [
     state.previewEnvironment,
@@ -85,6 +88,17 @@ export default function PlotNewAddress(props: PlotNewAddressProps): FCReturn {
     };
   }, [setCoordinates]);
 
+  const mapValidationErrorRef = useRef(props.mapValidationError);
+  useEffect(() => {
+    mapValidationErrorRef.current = props.mapValidationError;
+  }, [props.mapValidationError]);
+
+  useEffect(() => {
+    if (mapValidationErrorRef.current) {
+      props.setMapValidationError(undefined);
+    }
+  }, [coordinates]);
+
   useEffect(() => {
     // when we have all required address parts, call setAddress to enable the "Continue" button
     if (siteDescription && coordinates) {
@@ -99,7 +113,7 @@ export default function PlotNewAddress(props: PlotNewAddressProps): FCReturn {
   }, [coordinates, siteDescription]);
 
   const handleSiteDescriptionCheck = () => {
-    if (!siteDescription) setShowSiteDescriptionError(true);
+    if (!siteDescription) props.setShowSiteDescriptionError(true);
   };
 
   const handleSiteDescriptionInputChange = (
@@ -111,54 +125,65 @@ export default function PlotNewAddress(props: PlotNewAddressProps): FCReturn {
 
   return (
     <>
-      <MapContainer environment={environment} size="large">
-        <p style={visuallyHidden}>
-          An interactive map centred on the local authority district, showing
-          the Ordnance Survey basemap. Click to place a point representing your
-          proposed site location.
-        </p>
-        {/* @ts-ignore */}
-        <my-map
-          id="plot-new-address-map"
-          ariaLabelOlFixedOverlay="An interactive map for providing your site location"
-          data-testid="map-web-component"
-          zoom={14}
-          drawMode
-          drawType="Point"
-          geojsonData={JSON.stringify(props?.boundary)}
-          geojsonColor="#efefef"
-          geojsonBuffer={10}
-          resetControlImage="trash"
-          showScale
-          showNorthArrow
-          osProxyEndpoint={`${process.env.REACT_APP_API_URL}/proxy/ordnance-survey`}
-          clipGeojsonData={JSON.stringify(boundaryBBox)}
-          collapseAttributions={window.innerWidth < 500 ? true : undefined}
-        />
-        <MapFooter>
+      <ErrorWrapper error={props.mapValidationError} id="plot-new-address-map">
+        <MapContainer environment={environment} size="large">
+          <p style={visuallyHidden}>
+            An interactive map centred on the local authority district, showing
+            the Ordnance Survey basemap. Click to place a point representing
+            your proposed site location.
+          </p>
+          {/* @ts-ignore */}
+          <my-map
+            id="plot-new-address-map"
+            ariaLabelOlFixedOverlay="An interactive map for providing your site location"
+            data-testid="map-web-component"
+            zoom={14}
+            drawMode
+            drawType="Point"
+            drawGeojsonData={
+              coordinates &&
+              JSON.stringify({
+                type: "Feature",
+                geometry: {
+                  type: "Point",
+                  coordinates: [coordinates?.longitude, coordinates?.latitude],
+                },
+                properties: {},
+              })
+            }
+            drawGeojsonDataBuffer={20}
+            resetControlImage="trash"
+            showScale
+            showNorthArrow
+            osProxyEndpoint={`${process.env.REACT_APP_API_URL}/proxy/ordnance-survey`}
+            clipGeojsonData={JSON.stringify(boundaryBBox)}
+            collapseAttributions={window.innerWidth < 500 ? true : undefined}
+          />
+        </MapContainer>
+      </ErrorWrapper>
+      <MapFooter>
+        <Typography variant="body2">
+          The coordinate location of your address point is:{" "}
+          <strong>
+            {`${
+              (coordinates?.x && Math.round(coordinates.x)) || 0
+            } Easting (X), ${
+              (coordinates?.y && Math.round(coordinates.y)) || 0
+            } Northing (Y)`}
+          </strong>
+        </Typography>
+        <Link
+          component="button"
+          onClick={() => {
+            props.setPage("os-address");
+            props.setAddress(undefined);
+          }}
+        >
           <Typography variant="body2">
-            The coordinate location of your address point is:{" "}
-            <strong>
-              {`${
-                (coordinates?.x && Math.round(coordinates.x)) || 0
-              } Easting (X), ${
-                (coordinates?.y && Math.round(coordinates.y)) || 0
-              } Northing (Y)`}
-            </strong>
+            I want to select an existing address
           </Typography>
-          <Link
-            component="button"
-            onClick={() => {
-              props.setPage("os-address");
-              props.setAddress(undefined);
-            }}
-          >
-            <Typography variant="body2">
-              I want to select an existing address
-            </Typography>
-          </Link>
-        </MapFooter>
-      </MapContainer>
+        </Link>
+      </MapFooter>
       <DescriptionInput data-testid="new-address-input" mt={2}>
         <InputLabel
           label={props.descriptionLabel || DEFAULT_NEW_ADDRESS_LABEL}
@@ -171,7 +196,7 @@ export default function PlotNewAddress(props: PlotNewAddressProps): FCReturn {
             id={`${props.id}-siteDescription`}
             value={siteDescription || ""}
             errorMessage={
-              showSiteDescriptionError && !siteDescription
+              props.showSiteDescriptionError && !siteDescription
                 ? `Enter a site description such as "Land at..."`
                 : ""
             }
@@ -183,7 +208,7 @@ export default function PlotNewAddress(props: PlotNewAddressProps): FCReturn {
             inputProps={{
               "aria-describedby": [
                 props.description ? DESCRIPTION_TEXT : "",
-                showSiteDescriptionError && !siteDescription
+                props.showSiteDescriptionError && !siteDescription
                   ? `${ERROR_MESSAGE}-${props.id}`
                   : "",
               ]
diff --git a/editor.planx.uk/src/@planx/components/FindProperty/Public/Public.test.tsx b/editor.planx.uk/src/@planx/components/FindProperty/Public/Public.test.tsx
index 343e6d7990..7e5dee7686 100644
--- a/editor.planx.uk/src/@planx/components/FindProperty/Public/Public.test.tsx
+++ b/editor.planx.uk/src/@planx/components/FindProperty/Public/Public.test.tsx
@@ -198,8 +198,9 @@ describe("render states", () => {
     const descriptionInput = screen.getByTestId("new-address-input");
     expect(descriptionInput).toBeInTheDocument();
 
-    // expect continue to be disabled because an address has not been selected
-    expect(screen.getByTestId("continue-button")).toBeDisabled();
+    // Continue button is always enabled, but validation prevents submit until we have complete address details
+    expect(screen.getByTestId("continue-button")).toBeEnabled();
+    await user.click(screen.getByTestId("continue-button"));
     expect(handleSubmit).not.toHaveBeenCalled();
   });
 
@@ -416,9 +417,15 @@ describe("plotting a new address that does not have a uprn yet", () => {
       screen.getByText(`Enter a site description such as "Land at..."`),
     ).toBeInTheDocument();
 
-    // expect continue to be disabled because we have incomplete address details
-    expect(screen.getByTestId("continue-button")).toBeDisabled();
+    // Continue button is always enabled, but validation prevents submit until we have complete address details
+    expect(screen.getByTestId("continue-button")).toBeEnabled();
+    await user.click(screen.getByTestId("continue-button"));
     expect(handleSubmit).not.toHaveBeenCalled();
+
+    // continue should trigger map error wrapper too
+    expect(
+      screen.getByTestId("error-message-plot-new-address-map"),
+    ).toBeInTheDocument();
   });
 
   it("recovers previously submitted address when clicking the back button and lands on the map page", async () => {
diff --git a/editor.planx.uk/src/@planx/components/FindProperty/Public/index.tsx b/editor.planx.uk/src/@planx/components/FindProperty/Public/index.tsx
index 02307ff308..10bdab7330 100644
--- a/editor.planx.uk/src/@planx/components/FindProperty/Public/index.tsx
+++ b/editor.planx.uk/src/@planx/components/FindProperty/Public/index.tsx
@@ -7,9 +7,9 @@ import QuestionHeader from "@planx/components/shared/Preview/QuestionHeader";
 import { squareMetresToHectares } from "@planx/components/shared/utils";
 import { PublicProps } from "@planx/components/ui";
 import area from "@turf/area";
-import { Feature, GeoJSONObject } from "@turf/helpers";
+import { Feature } from "@turf/helpers";
 import DelayedLoadingIndicator from "components/DelayedLoadingIndicator";
-import { Store, useStore } from "pages/FlowEditor/lib/store";
+import { Store } from "pages/FlowEditor/lib/store";
 import React, { useEffect, useState } from "react";
 import useSWR from "swr";
 import ExternalPlanningSiteDialog, {
@@ -51,6 +51,10 @@ function Component(props: Props) {
       : "os-address";
   const [page, setPage] = useState<"os-address" | "new-address">(startPage);
 
+  const [mapValidationError, setMapValidationError] = useState<string>();
+  const [showSiteDescriptionError, setShowSiteDescriptionError] =
+    useState<boolean>(false);
+
   const [address, setAddress] = useState<SiteAddress | undefined>(
     previouslySubmittedData?._address,
   );
@@ -59,9 +63,6 @@ function Component(props: Props) {
   >();
   const [regions, setRegions] = useState<string[] | undefined>();
   const [titleBoundary, setTitleBoundary] = useState<Feature | undefined>();
-  const [boundary, setBoundary] = useState<GeoJSONObject | undefined>();
-
-  const teamSettings = useStore((state) => state.teamSettings);
 
   // Use the address point to fetch the Local Authority District(s) & region via Digital Land
   const options = new URLSearchParams({
@@ -89,21 +90,6 @@ function Component(props: Props) {
     },
   );
 
-  // if allowNewAddresses is on, fetch the boundary geojson for this team to position the map view or default to London
-  //   example value for team.settings.boundary is https://www.planning.data.gov.uk/entity/8600093.geojson
-  const { data: geojson } = useSWR(
-    () =>
-      props.allowNewAddresses && teamSettings?.boundary
-        ? teamSettings.boundary
-        : null,
-    fetcher,
-    {
-      shouldRetryOnError: true,
-      errorRetryInterval: 500,
-      errorRetryCount: 1,
-    },
-  );
-
   useEffect(() => {
     if (address && data?.features?.length > 0) {
       const lads: string[] = [];
@@ -124,11 +110,62 @@ function Component(props: Props) {
     }
   }, [data, address]);
 
-  useEffect(() => {
-    if (geojson) setBoundary(geojson);
-  }, [geojson]);
+  const validateAndSubmit = () => {
+    // TODO `if (isValidating)` on either page, wrap Continue button in error mesage?
+
+    if (page === "new-address") {
+      if (address?.x === undefined && address?.y === undefined)
+        setMapValidationError("Click or tap to place a point on the map");
+
+      if (address?.title === undefined) setShowSiteDescriptionError(true);
+    }
+
+    if (address) {
+      const newPassportData: Store.userData["data"] = {};
+      newPassportData["_address"] = address;
+      if (address?.planx_value) {
+        newPassportData["property.type"] = [address.planx_value];
+      }
+
+      if (localAuthorityDistricts) {
+        newPassportData["property.localAuthorityDistrict"] =
+          localAuthorityDistricts;
+      }
+      if (regions) {
+        newPassportData["property.region"] = regions;
+      }
+      if (titleBoundary) {
+        const areaSquareMetres =
+          Math.round(area(titleBoundary as Feature) * 100) / 100;
+        newPassportData["property.boundary.title"] = titleBoundary;
+        newPassportData["property.boundary.title.area"] = areaSquareMetres;
+        newPassportData["property.boundary.title.area.hectares"] =
+          squareMetresToHectares(areaSquareMetres);
+      }
+
+      newPassportData[PASSPORT_COMPONENT_ACTION_KEY] =
+        address?.source === "os"
+          ? FindPropertyUserAction.Existing
+          : FindPropertyUserAction.New;
+
+      props.handleSubmit?.({ data: { ...newPassportData } });
+    }
+  };
+
+  return (
+    <Card
+      handleSubmit={validateAndSubmit}
+      isValid={
+        page === "new-address" && !isValidating
+          ? true
+          : Boolean(address) && !isValidating
+      }
+    >
+      {getBody()}
+    </Card>
+  );
 
-  function getPageBody() {
+  function getBody() {
     if (props.allowNewAddresses && page === "new-address") {
       return (
         <>
@@ -143,11 +180,20 @@ function Component(props: Props) {
               previouslySubmittedData?._address?.source === "proposed" &&
               previouslySubmittedData?._address
             }
-            boundary={boundary}
             id={props.id}
             description={props.newAddressDescription || ""}
             descriptionLabel={props.newAddressDescriptionLabel || ""}
+            mapValidationError={mapValidationError}
+            setMapValidationError={setMapValidationError}
+            showSiteDescriptionError={showSiteDescriptionError}
+            setShowSiteDescriptionError={setShowSiteDescriptionError}
           />
+          {Boolean(address) && isValidating && (
+            <DelayedLoadingIndicator
+              msDelayBeforeVisible={50}
+              text="Fetching data..."
+            />
+          )}
         </>
       );
     } else {
@@ -200,44 +246,4 @@ function Component(props: Props) {
       );
     }
   }
-
-  return (
-    <Card
-      isValid={Boolean(address) && !isValidating}
-      handleSubmit={() => {
-        if (address) {
-          const newPassportData: Store.userData["data"] = {};
-          newPassportData["_address"] = address;
-          if (address?.planx_value) {
-            newPassportData["property.type"] = [address.planx_value];
-          }
-
-          if (localAuthorityDistricts) {
-            newPassportData["property.localAuthorityDistrict"] =
-              localAuthorityDistricts;
-          }
-          if (regions) {
-            newPassportData["property.region"] = regions;
-          }
-          if (titleBoundary) {
-            const areaSquareMetres =
-              Math.round(area(titleBoundary as Feature) * 100) / 100;
-            newPassportData["property.boundary.title"] = titleBoundary;
-            newPassportData["property.boundary.title.area"] = areaSquareMetres;
-            newPassportData["property.boundary.title.area.hectares"] =
-              squareMetresToHectares(areaSquareMetres);
-          }
-
-          newPassportData[PASSPORT_COMPONENT_ACTION_KEY] =
-            address?.source === "os"
-              ? FindPropertyUserAction.Existing
-              : FindPropertyUserAction.New;
-
-          props.handleSubmit?.({ data: { ...newPassportData } });
-        }
-      }}
-    >
-      {getPageBody()}
-    </Card>
-  );
 }

From b2b0e034e9495bfce80a1e6528adf9ccc24ed77a Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Mon, 13 May 2024 21:06:27 +0200
Subject: [PATCH 2/3] wip

---
 .../FindProperty/Public/Autocomplete.tsx      | 42 ++++++++++++-------
 .../FindProperty/Public/Public.test.tsx       | 27 ++++++++++--
 .../components/FindProperty/Public/index.tsx  | 31 ++++++++++----
 .../@planx/components/shared/Preview/Card.tsx | 27 ++++++------
 4 files changed, 88 insertions(+), 39 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/FindProperty/Public/Autocomplete.tsx b/editor.planx.uk/src/@planx/components/FindProperty/Public/Autocomplete.tsx
index 9dc263a464..f6e53b8290 100644
--- a/editor.planx.uk/src/@planx/components/FindProperty/Public/Autocomplete.tsx
+++ b/editor.planx.uk/src/@planx/components/FindProperty/Public/Autocomplete.tsx
@@ -10,6 +10,7 @@ import find from "lodash/find";
 import { parse, toNormalised } from "postcode";
 import React, { useEffect, useState } from "react";
 import InputLabel from "ui/public/InputLabel";
+import ErrorWrapper from "ui/shared/ErrorWrapper";
 import Input from "ui/shared/Input";
 
 import type { SiteAddress } from "../model";
@@ -25,6 +26,12 @@ interface PickOSAddressProps {
   initialSelectedAddress?: Option;
   id?: string;
   description?: string;
+  showPostcodeError: boolean;
+  setShowPostcodeError: React.Dispatch<React.SetStateAction<boolean>>;
+  addressAutocompleteError?: string;
+  setAddressAutocompleteError: React.Dispatch<
+    React.SetStateAction<string | undefined>
+  >;
 }
 
 const AutocompleteWrapper = styled(Box)(({ theme }) => ({
@@ -55,7 +62,6 @@ export default function PickOSAddress(props: PickOSAddressProps): FCReturn {
   const [selectedOption, setSelectedOption] = useState<Option | undefined>(
     props.initialSelectedAddress ?? undefined,
   );
-  const [showPostcodeError, setShowPostcodeError] = useState<boolean>(false);
 
   // Fetch blpu_codes records so that we can join address CLASSIFICATION_CODE to planx variable
   const { data: blpuCodes } = useQuery(FETCH_BLPU_CODES, {
@@ -109,6 +115,7 @@ export default function PickOSAddress(props: PickOSAddressProps): FCReturn {
           ), // display value shown on PropertyInformation, should match <address-autocomplete /> options formatting
           source: "os",
         });
+        props.setAddressAutocompleteError(undefined);
       }
     };
 
@@ -124,7 +131,7 @@ export default function PickOSAddress(props: PickOSAddressProps): FCReturn {
   }, [sanitizedPostcode, selectedOption]);
 
   const handleCheckPostcode = () => {
-    if (!sanitizedPostcode) setShowPostcodeError(true);
+    if (!sanitizedPostcode) props.setShowPostcodeError(true);
   };
 
   // XXX: If you press a key on the keyboard, you expect something to show up on the screen,
@@ -135,7 +142,7 @@ export default function PickOSAddress(props: PickOSAddressProps): FCReturn {
     if (selectedOption) {
       // Reset the selected address on change of postcode to ensures no visual mismatch between address and postcode
       setSelectedOption(undefined);
-      // Disable the "Continue" button if changing postcode before selecting new address after having come "back"
+      // Invalidate the "Continue" button if changing postcode before selecting new address after having come "back"
       props.setAddress(undefined);
     }
 
@@ -160,7 +167,7 @@ export default function PickOSAddress(props: PickOSAddressProps): FCReturn {
           id="postcode-input"
           value={postcode || ""}
           errorMessage={
-            showPostcodeError && !sanitizedPostcode
+            props.showPostcodeError && !sanitizedPostcode
               ? "Enter a valid UK postcode"
               : ""
           }
@@ -174,7 +181,7 @@ export default function PickOSAddress(props: PickOSAddressProps): FCReturn {
             maxLength: 8,
             "aria-describedby": [
               props.description ? DESCRIPTION_TEXT : "",
-              showPostcodeError && !sanitizedPostcode
+              props.showPostcodeError && !sanitizedPostcode
                 ? `${ERROR_MESSAGE}-${props.id}`
                 : "",
             ]
@@ -184,16 +191,21 @@ export default function PickOSAddress(props: PickOSAddressProps): FCReturn {
         />
       </InputLabel>
       {sanitizedPostcode && (
-        /* @ts-ignore */
-        <address-autocomplete
-          id="address-autocomplete"
-          data-testid="address-autocomplete-web-component"
-          postcode={sanitizedPostcode}
-          initialAddress={selectedOption?.title || ""}
-          osProxyEndpoint={`${process.env.REACT_APP_API_URL}/proxy/ordnance-survey`}
-          arrowStyle="light"
-          labelStyle="static"
-        />
+        <ErrorWrapper
+          error={props.addressAutocompleteError}
+          id={"address-autocomplete"}
+        >
+          {/* @ts-ignore */}
+          <address-autocomplete
+            id="address-autocomplete"
+            data-testid="address-autocomplete-web-component"
+            postcode={sanitizedPostcode}
+            initialAddress={selectedOption?.title || ""}
+            osProxyEndpoint={`${process.env.REACT_APP_API_URL}/proxy/ordnance-survey`}
+            arrowStyle="light"
+            labelStyle="static"
+          />
+        </ErrorWrapper>
       )}
     </AutocompleteWrapper>
   );
diff --git a/editor.planx.uk/src/@planx/components/FindProperty/Public/Public.test.tsx b/editor.planx.uk/src/@planx/components/FindProperty/Public/Public.test.tsx
index 7e5dee7686..cb6e25089d 100644
--- a/editor.planx.uk/src/@planx/components/FindProperty/Public/Public.test.tsx
+++ b/editor.planx.uk/src/@planx/components/FindProperty/Public/Public.test.tsx
@@ -159,8 +159,14 @@ describe("render states", () => {
     expect(autocomplete.getAttribute("postcode")).toEqual("SE5 0HU");
     expect(autocomplete.getAttribute("initialAddress")).toBeFalsy();
 
-    // expect continue to be disabled because an address has not been selected
-    expect(screen.getByTestId("continue-button")).toBeDisabled();
+    // user is unable to continue and to submit incomplete data
+    const continueButton = screen.getByTestId("continue-button");
+    expect(continueButton).toBeEnabled();
+    await user.click(continueButton);
+
+    expect(
+      screen.getByTestId("error-message-address-autocomplete"),
+    ).toBeInTheDocument();
     expect(handleSubmit).not.toHaveBeenCalled();
   });
 
@@ -233,7 +239,11 @@ describe("render states", () => {
       await screen.findByText("Type your postal code"),
     ).toBeInTheDocument();
 
-    expect(screen.getByTestId("continue-button")).toBeDisabled();
+    // user is unable to continue and submit incomplete data
+    expect(screen.getByTestId("continue-button")).toBeEnabled();
+    await user.click(screen.getByTestId("continue-button"));
+
+    expect(screen.getByText("Enter a valid UK postcode")).toBeInTheDocument();
     expect(handleSubmit).not.toHaveBeenCalled();
   });
 
@@ -316,11 +326,14 @@ describe("picking an OS address", () => {
   });
 
   it("updates the address-autocomplete props when the postcode is changed", async () => {
+    const handleSubmit = jest.fn();
+
     const { user } = setup(
       <MockedProvider mocks={findAddressReturnMock} addTypename={false}>
         <FindProperty
           description="Find your property"
           title="Type your postal code"
+          handleSubmit={handleSubmit}
         />
       </MockedProvider>,
     );
@@ -351,7 +364,13 @@ describe("picking an OS address", () => {
 
     // User is unable to continue and to submit incomplete data
     const continueButton = screen.getByTestId("continue-button");
-    expect(continueButton).toBeDisabled();
+    expect(continueButton).toBeEnabled();
+    await user.click(continueButton);
+
+    expect(
+      screen.getByTestId("error-message-address-autocomplete"),
+    ).toBeInTheDocument();
+    expect(handleSubmit).not.toHaveBeenCalled();
   });
 
   it("recovers previously submitted address when clicking the back button", async () => {
diff --git a/editor.planx.uk/src/@planx/components/FindProperty/Public/index.tsx b/editor.planx.uk/src/@planx/components/FindProperty/Public/index.tsx
index 10bdab7330..01406a4014 100644
--- a/editor.planx.uk/src/@planx/components/FindProperty/Public/index.tsx
+++ b/editor.planx.uk/src/@planx/components/FindProperty/Public/index.tsx
@@ -51,9 +51,14 @@ function Component(props: Props) {
       : "os-address";
   const [page, setPage] = useState<"os-address" | "new-address">(startPage);
 
+  const [showPostcodeError, setShowPostcodeError] = useState<boolean>(false);
+  const [addressAutocompleteError, setAddressAutocompleteError] =
+    useState<string>();
   const [mapValidationError, setMapValidationError] = useState<string>();
   const [showSiteDescriptionError, setShowSiteDescriptionError] =
     useState<boolean>(false);
+  const [dataFetchError, setDataFetchError] =
+    useState<string>("This is a test");
 
   const [address, setAddress] = useState<SiteAddress | undefined>(
     previouslySubmittedData?._address,
@@ -111,7 +116,16 @@ function Component(props: Props) {
   }, [data, address]);
 
   const validateAndSubmit = () => {
-    // TODO `if (isValidating)` on either page, wrap Continue button in error mesage?
+    if (isValidating) {
+      setDataFetchError("Please wait for data fetching to complete");
+    }
+
+    if (page === "os-address") {
+      if (address?.postcode === undefined) setShowPostcodeError(true);
+
+      if (address?.title === undefined)
+        setAddressAutocompleteError("Select an address");
+    }
 
     if (page === "new-address") {
       if (address?.x === undefined && address?.y === undefined)
@@ -155,11 +169,8 @@ function Component(props: Props) {
   return (
     <Card
       handleSubmit={validateAndSubmit}
-      isValid={
-        page === "new-address" && !isValidating
-          ? true
-          : Boolean(address) && !isValidating
-      }
+      isValid={true}
+      error={dataFetchError}
     >
       {getBody()}
     </Card>
@@ -190,7 +201,7 @@ function Component(props: Props) {
           />
           {Boolean(address) && isValidating && (
             <DelayedLoadingIndicator
-              msDelayBeforeVisible={50}
+              msDelayBeforeVisible={0}
               text="Fetching data..."
             />
           )}
@@ -216,6 +227,10 @@ function Component(props: Props) {
             }
             id={props.id}
             description={props.description || ""}
+            showPostcodeError={showPostcodeError}
+            setShowPostcodeError={setShowPostcodeError}
+            addressAutocompleteError={addressAutocompleteError}
+            setAddressAutocompleteError={setAddressAutocompleteError}
           />
           {!props.allowNewAddresses ? (
             <ExternalPlanningSiteDialog
@@ -238,7 +253,7 @@ function Component(props: Props) {
           )}
           {Boolean(address) && isValidating && (
             <DelayedLoadingIndicator
-              msDelayBeforeVisible={50}
+              msDelayBeforeVisible={0}
               text="Fetching data..."
             />
           )}
diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/Card.tsx b/editor.planx.uk/src/@planx/components/shared/Preview/Card.tsx
index 6eb6ba8dda..96b340db24 100644
--- a/editor.planx.uk/src/@planx/components/shared/Preview/Card.tsx
+++ b/editor.planx.uk/src/@planx/components/shared/Preview/Card.tsx
@@ -7,6 +7,7 @@ import { useAnalyticsTracking } from "pages/FlowEditor/lib/analytics/provider";
 import { useStore } from "pages/FlowEditor/lib/store";
 import React, { useEffect } from "react";
 import { ApplicationPath } from "types";
+import ErrorWrapper from "ui/shared/ErrorWrapper";
 
 import SaveResumeButton from "./SaveResumeButton";
 
@@ -14,6 +15,7 @@ interface Props {
   children: React.ReactNode;
   isValid?: boolean;
   handleSubmit?: (data?: any) => void;
+  error?: string;
 }
 
 export const contentFlowSpacing = (theme: Theme): React.CSSProperties => ({
@@ -78,20 +80,21 @@ const Card: React.FC<Props> = ({
           {...props}
         >
           {children}
-
           <Box pt={2}>
             {handleSubmit && (
-              <Button
-                variant="contained"
-                color="prompt"
-                size="large"
-                type="submit"
-                disabled={!isValid}
-                onClick={async () => await handleSubmit()}
-                data-testid="continue-button"
-              >
-                Continue
-              </Button>
+              <ErrorWrapper error={props.error} id="continue-button">
+                <Button
+                  variant="contained"
+                  color="prompt"
+                  size="large"
+                  type="submit"
+                  disabled={!isValid}
+                  onClick={async () => await handleSubmit()}
+                  data-testid="continue-button"
+                >
+                  Continue
+                </Button>
+              </ErrorWrapper>
             )}
             {showSaveResumeButton && <SaveResumeButton />}
           </Box>

From 9a5ab948b8ed962fa6c0984cbc32d01b8f61de80 Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Mon, 13 May 2024 21:32:46 +0200
Subject: [PATCH 3/3] fix default error msg

---
 .../src/@planx/components/FindProperty/Public/index.tsx        | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/FindProperty/Public/index.tsx b/editor.planx.uk/src/@planx/components/FindProperty/Public/index.tsx
index 01406a4014..6be079f44e 100644
--- a/editor.planx.uk/src/@planx/components/FindProperty/Public/index.tsx
+++ b/editor.planx.uk/src/@planx/components/FindProperty/Public/index.tsx
@@ -57,8 +57,7 @@ function Component(props: Props) {
   const [mapValidationError, setMapValidationError] = useState<string>();
   const [showSiteDescriptionError, setShowSiteDescriptionError] =
     useState<boolean>(false);
-  const [dataFetchError, setDataFetchError] =
-    useState<string>("This is a test");
+  const [dataFetchError, setDataFetchError] = useState<string>();
 
   const [address, setAddress] = useState<SiteAddress | undefined>(
     previouslySubmittedData?._address,