diff --git a/editor.planx.uk/src/@planx/components/DrawBoundary/Public/Public.test.tsx b/editor.planx.uk/src/@planx/components/DrawBoundary/Public/Public.test.tsx
index 6bb2c55aba..7d39c9f59f 100644
--- a/editor.planx.uk/src/@planx/components/DrawBoundary/Public/Public.test.tsx
+++ b/editor.planx.uk/src/@planx/components/DrawBoundary/Public/Public.test.tsx
@@ -370,3 +370,86 @@ test("appends to existing '_requestedFiles' value", async () => {
expect(recommended).toEqual(["elevations.existing"]);
expect(optional).toHaveLength(0);
});
+
+test("submits data based on the page you continue onwards from", async () => {
+ // Context - Planning Officers don't want to receive both geojson and an uploaded locationPlan, only one or the other
+ // But accessibility auditing says a user should always be able to toggle between draw & upload pages with their previous inputs retained
+
+ const handleSubmit = jest.fn();
+
+ // Setup file mock
+ const mockFileName = "test.png";
+ const mockFileURL =
+ "https://api.editor.planx.dev/file/private/gws7l5d1/test.png";
+
+ const file = new File(["test"], mockFileName, { type: "image/png" });
+
+ const mockedPost = mockedAxios.post.mockResolvedValueOnce({
+ data: {
+ fileType: "image/png",
+ fileUrl: mockFileURL,
+ },
+ });
+
+ // Previously submitted data is a good proxy for having previously fetched a title boundary and arriving to Draw with geojson in passport !
+ const previouslySubmittedData = {
+ "property.boundary.site": {
+ type: "Feature",
+ properties: {},
+ geometry: {
+ type: "Polygon",
+ coordinates: [
+ [
+ [-0.07643975531307334, 51.485847769536015],
+ [-0.0764006164494183, 51.4855918619739],
+ [-0.07587615567891393, 51.48561867140494],
+ [-0.0759899845402056, 51.48584045791162],
+ [-0.07643975531307334, 51.485847769536015],
+ ],
+ ],
+ },
+ },
+ };
+
+ const { user } = setup(
+ ,
+ );
+
+ // Toggle to file upload mode
+ await user.click(screen.getByTestId("upload-file-button"));
+
+ // Upload file
+ const input = screen.getByTestId("upload-input");
+ await user.upload(input, file);
+ expect(mockedPost).toHaveBeenCalled();
+
+ // Toggle back to map view after uploading
+ await user.click(screen.getByTestId("use-map-button"));
+
+ // Click "continue" from map page
+ await user.click(screen.getByTestId("continue-button"));
+ expect(handleSubmit).toHaveBeenCalledTimes(1);
+
+ // Confirm that file is NOT saved to passport, but geojson is
+ const submitted = handleSubmit.mock.calls[0][0];
+ expect(submitted.data).not.toHaveProperty(PASSPORT_UPLOAD_KEY);
+ expect(submitted.data["property.boundary.site"]).toEqual(
+ previouslySubmittedData["property.boundary.site"],
+ );
+
+ // DrawBoundary action captured correctly based on page
+ expect(submitted.data[PASSPORT_COMPONENT_ACTION_KEY]).toEqual(
+ DrawBoundaryUserAction.Draw,
+ );
+});
diff --git a/editor.planx.uk/src/@planx/components/DrawBoundary/Public/index.tsx b/editor.planx.uk/src/@planx/components/DrawBoundary/Public/index.tsx
index d28e8b9cc2..69697144be 100644
--- a/editor.planx.uk/src/@planx/components/DrawBoundary/Public/index.tsx
+++ b/editor.planx.uk/src/@planx/components/DrawBoundary/Public/index.tsx
@@ -43,7 +43,7 @@ export default function Component(props: Props) {
passport.data?.["property.boundary.title.area"];
const [boundary, setBoundary] = useState(previousBoundary);
const [area, setArea] = useState(previousArea);
-
+
// Buffer applied to the address point to clip this map extent
// and applied to the site boundary and written to the passport to later clip the map extent in overview documents
const bufferInMeters = area && area > 15000 ? 300 : 120;
@@ -100,7 +100,7 @@ export default function Component(props: Props) {
const newPassportData: Store.userData["data"] = {};
// Used the map
- if (boundary && props.dataFieldBoundary) {
+ if (page === "draw" && boundary && props.dataFieldBoundary) {
newPassportData[props.dataFieldBoundary] = boundary;
newPassportData[`${props.dataFieldBoundary}.buffered`] = buffer(
boundary,
@@ -131,7 +131,7 @@ export default function Component(props: Props) {
}
// Uploaded a file
- if (slots.length) {
+ if (page === "upload" && slots.length) {
newPassportData[PASSPORT_UPLOAD_KEY] = slots;
newPassportData[PASSPORT_COMPONENT_ACTION_KEY] =
DrawBoundaryUserAction.Upload;
@@ -150,7 +150,14 @@ export default function Component(props: Props) {
props.handleSubmit?.({ data: { ...newPassportData } });
}}
- isValid={props.hideFileUpload ? true : Boolean(boundary || slots[0]?.url)}
+ isValid={
+ props.hideFileUpload
+ ? true
+ : Boolean(
+ (page === "draw" && boundary) ||
+ (page === "upload" && slots[0]?.url),
+ )
+ }
>
{getBody(bufferInMeters)}
@@ -180,11 +187,9 @@ export default function Component(props: Props) {
{!props.hideFileUpload && (
- If you prefer to upload a location plan file instead of using
- the map, please reset the map view first to erase the
- pre-populated boundary. Then click the "Upload a location plan
- instead" link below. A location plan can only be submitted as
- a digital boundary or file, not both.
+ If you prefer to upload a file instead of using the
+ interactive map, please click "Upload a location plan instead"
+ below to navigate to the file upload.
)}
{/* @ts-ignore */}
@@ -229,7 +234,6 @@ export default function Component(props: Props) {
setPage("upload")}
- disabled={Boolean(boundary)}
data-testid="upload-file-button"
>
@@ -257,7 +261,7 @@ export default function Component(props: Props) {
setPage("draw")}
- disabled={Boolean(slots[0]?.url)}
+ data-testid="use-map-button"
>
Draw the boundary on a map instead