feat: Team Settings Form Fetching Boundary GeoJSON using Boundary URL

editor.planx.uk/package.json

@@ -36,6 +36,8 @@
     "@tiptap/react": "^2.4.0",
     "@tiptap/suggestion": "^2.0.3",
     "@turf/area": "^7.0.0",
+    "@turf/bbox": "^7.0.0",
+    "@turf/bbox-polygon": "^7.0.0",
     "@turf/buffer": "^7.0.0",
     "@turf/helpers": "^7.0.0",
     "array-move": "^4.0.0",

editor.planx.uk/src/@planx/components/FindProperty/Public/Map.tsx

@@ -63,7 +63,7 @@ export default function PlotNewAddress(props: PlotNewAddressProps): FCReturn {
 
   const [environment, boundaryBBox] = useStore((state) => [
     state.previewEnvironment,
-    state.boundaryBBox,
+    state.teamSettings.boundaryBbox,
   ]);
 
   useEffect(() => {

editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/BoundaryForm.tsx

@@ -1,4 +1,8 @@
+import { bbox } from "@turf/bbox";
+import { bboxPolygon } from "@turf/bbox-polygon";
+import axios, { isAxiosError } from "axios";
 import { useFormik } from "formik";
+import type { Feature, MultiPolygon, Polygon } from "geojson";
 import { useStore } from "pages/FlowEditor/lib/store";
 import React, { ChangeEvent } from "react";
 import InputLabel from "ui/editor/InputLabel";
@@ -8,11 +12,26 @@ import * as Yup from "yup";
 import { SettingsForm } from "../shared/SettingsForm";
 import { FormProps } from ".";
 
+export type PlanningDataEntity = Feature<
+  Polygon | MultiPolygon,
+  Record<string, unknown>
+>;
+
+/**
+ * Convert a complex local authority boundary to a simplified bounding box
+ */
+const convertToBoundingBox = (feature: PlanningDataEntity): Feature<Polygon> =>
+  bboxPolygon(bbox(feature));
+
 export default function BoundaryForm({ formikConfig, onSuccess }: FormProps) {
+  const planningDataURLRegex =
+    /^https:\/\/www\.planning\.data\.gov\.uk\/entity\/\d{1,7}$/;
+
   const formSchema = Yup.object().shape({
     boundaryUrl: Yup.string()
-      .url(
-        "Enter a boundary URL in the correct format, https://www.planning.data.gov.uk/",
+      .matches(
+        planningDataURLRegex,
+        "Enter a boundary URL in the correct format, https://www.planning.data.gov.uk/entity/1234567",
       )
       .required("Enter a boundary URL"),
   });
@@ -21,12 +40,27 @@ export default function BoundaryForm({ formikConfig, onSuccess }: FormProps) {
     ...formikConfig,
     validationSchema: formSchema,
     onSubmit: async (values, { resetForm }) => {
-      const isSuccess = await useStore.getState().updateTeamSettings({
-        boundaryUrl: values.boundaryUrl,
-      });
-      if (isSuccess) {
-        onSuccess();
-        resetForm({ values });
+      try {
+        const { data } = await axios.get<PlanningDataEntity>(
+          `${values.boundaryUrl}.geojson`,
+        );
+
+        const isUpdateSuccess = await useStore.getState().updateTeamSettings({
+          boundaryUrl: values.boundaryUrl,
+          boundaryBbox: convertToBoundingBox(data),
+        });
+        if (isUpdateSuccess) {
+          onSuccess();
+          resetForm({ values });
+        }
+      } catch (error) {
+        if (isAxiosError(error)) {
+          formik.setFieldError(
+            "boundaryUrl",
+            "We are unable to retrieve your boundary, check your boundary URL and try again",
+          );
+        }
+        console.error(error);
       }
     },
   });
@@ -49,7 +83,7 @@ export default function BoundaryForm({ formikConfig, onSuccess }: FormProps) {
               target="_blank"
               rel="noopener noreferrer"
             >
-              https://www.planning.data.gov.uk/
+              https://www.planning.data.gov.uk/entity/1234567
             </a>
           </p>
         </>

editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/ContactForm.tsx

@@ -14,8 +14,8 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) {
       .email(
         "Enter an email address in the correct format, like [email protected]",
       )
-      .required("Enter a help email address"),
-    helpPhone: Yup.string().required("Enter a help phone number"),
+      .required("Enter a contact email address"),
+    helpPhone: Yup.string().required("Enter a phone number"),
     helpOpeningHours: Yup.string().required("Enter your opening hours"),
     homepage: Yup.string()
       .url(

editor.planx.uk/src/pages/FlowEditor/lib/store/team.ts

@@ -11,7 +11,6 @@ import type { StateCreator } from "zustand";
 import { SharedStore } from "./shared";
 
 export interface TeamStore {
-  boundaryBBox?: Team["boundaryBBox"];
   teamId: number;
   teamIntegrations: TeamIntegrations;
   teamName: string;
@@ -34,7 +33,6 @@ export const teamStore: StateCreator<
   [],
   TeamStore
 > = (set, get) => ({
-  boundaryBBox: undefined,
   teamId: 0,
   teamIntegrations: {} as TeamIntegrations,
   teamName: "",
@@ -44,7 +42,6 @@ export const teamStore: StateCreator<
 
   setTeam: (team) => {
     set({
-      boundaryBBox: team.boundaryBBox,
       teamId: team.id,
       teamIntegrations: team.integrations,
       teamName: team.name,
@@ -60,7 +57,6 @@ export const teamStore: StateCreator<
   },
 
   getTeam: () => ({
-    boundaryBBox: get().boundaryBBox,
     id: get().teamId,
     integrations: get().teamIntegrations,
     name: get().teamName,
@@ -105,7 +101,6 @@ export const teamStore: StateCreator<
 
   clearTeamStore: () =>
     set({
-      boundaryBBox: undefined,
       teamId: 0,
       teamIntegrations: undefined,
       teamName: "",

editor.planx.uk/src/routes/views/draft.tsx

@@ -71,6 +71,7 @@ const fetchSettingsForDraftView = async (
               name
               settings: team_settings {
                 boundaryUrl: boundary_url
+                boundaryBBox: boundary_bbox
                 homepage
                 helpEmail: help_email
                 helpPhone: help_phone
@@ -81,7 +82,6 @@ const fetchSettingsForDraftView = async (
                 hasPlanningData: has_planning_data
               }
               slug
-              boundaryBBox: boundary_bbox
             }
             settings
             slug

editor.planx.uk/src/routes/views/published.tsx

@@ -97,6 +97,7 @@ export const fetchSettingsForPublishedView = async (
               name
               settings: team_settings {
                 boundaryUrl: boundary_url
+                boundaryBBox: boundary_bbox
                 homepage
                 helpEmail: help_email
                 helpPhone: help_phone
@@ -107,8 +108,6 @@ export const fetchSettingsForPublishedView = async (
                 hasPlanningData: has_planning_data
               }
               slug
-
-              boundaryBBox: boundary_bbox
             }
             settings
             status

editor.planx.uk/src/routes/views/standalone.tsx

@@ -71,6 +71,7 @@ const fetchDataForStandaloneView = async (
               name
               settings: team_settings {
                 boundaryUrl: boundary_url
+                boundaryBBox: boundary_bbox
                 homepage
                 helpEmail: help_email
                 helpPhone: help_phone
@@ -81,7 +82,6 @@ const fetchDataForStandaloneView = async (
                 hasPlanningData: has_planning_data
               }
               slug
-              boundaryBBox: boundary_bbox
             }
             settings
           }

hasura.planx.uk/metadata/tables.yaml

@@ -1729,6 +1729,7 @@
     - role: platformAdmin
       permission:
         columns:
+          - boundary_bbox
           - boundary_url
           - email_reply_to_id
           - external_planning_site_name
@@ -1744,6 +1745,7 @@
     - role: teamEditor
       permission:
         columns:
+          - boundary_bbox
           - boundary_url
           - email_reply_to_id
           - external_planning_site_name