feat: Team Settings Editor Form UI Changes (#3305)

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

@@ -0,0 +1,59 @@
+import { useFormik } from "formik";
+import React, { ChangeEvent } from "react";
+import InputDescription from "ui/editor/InputDescription";
+import Input from "ui/shared/Input";
+import InputRow from "ui/shared/InputRow";
+import InputRowLabel from "ui/shared/InputRowLabel";
+
+import { SettingsForm } from "../shared/SettingsForm";
+import { FormProps } from ".";
+
+export default function BoundaryForm({ formikConfig, onSuccess }: FormProps) {
+  const formik = useFormik({
+    ...formikConfig,
+    onSubmit(values, { resetForm }) {
+      onSuccess();
+      resetForm({ values });
+    },
+  });
+
+  return (
+    <SettingsForm
+      formik={formik}
+      legend="Boundary"
+      description={
+        <InputDescription>
+          The boundary URL is used to retrieve the outer boundary of your
+          council area. This can then help users define whether they are within
+          your council area.
+          <br />
+          <br />
+          The boundary should be given as a link from:{" "}
+          <a
+            href="https://www.planning.data.gov.uk/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            https://www.planning.data.gov.uk/
+          </a>
+        </InputDescription>
+      }
+      input={
+        <>
+          <InputRow>
+            <InputRowLabel>
+              Boundary URL
+              <Input
+                name="boundary"
+                value={formik.values.boundaryUrl}
+                onChange={(ev: ChangeEvent<HTMLInputElement>) => {
+                  formik.setFieldValue("boundaryUrl", ev.target.value);
+                }}
+              />
+            </InputRowLabel>
+          </InputRow>
+        </>
+      }
+    />
+  );
+}

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

@@ -0,0 +1,95 @@
+import { useFormik } from "formik";
+import React, { ChangeEvent } from "react";
+import InputDescription from "ui/editor/InputDescription";
+import Input from "ui/shared/Input";
+import InputRow from "ui/shared/InputRow";
+import InputRowLabel from "ui/shared/InputRowLabel";
+import * as Yup from "yup";
+
+import { SettingsForm } from "../shared/SettingsForm";
+import { FormProps } from ".";
+
+export default function ContactForm({ formikConfig, onSuccess }: FormProps) {
+  const formSchema = Yup.object().shape({
+    helpEmail: Yup.string()
+      .email("Please enter valid email")
+      .required("Help Email is required"),
+    helpPhone: Yup.string().required("Help Phone is required"),
+    helpOpeningHours: Yup.string(),
+    homepage: Yup.string().url("Please enter a valid URL for the homepage"),
+  });
+
+  const formik = useFormik({
+    ...formikConfig,
+    validationSchema: formSchema,
+    onSubmit(values, { resetForm }) {
+      onSuccess();
+      resetForm({ values });
+    },
+  });
+
+  const onChangeFn = (type: string, event: ChangeEvent<HTMLInputElement>) =>
+    formik.setFieldValue(type, event.target.value);
+
+  return (
+    <SettingsForm
+      legend="Contact Information"
+      formik={formik}
+      description={
+        <InputDescription>
+          Details to help direct different messages, feedback, and enquiries
+          from users.
+        </InputDescription>
+      }
+      input={
+        <>
+          <InputRow>
+            <InputRowLabel>
+              Homepage URL
+              <Input
+                name="homepage"
+                onChange={(event) => {
+                  onChangeFn("homepage", event);
+                }}
+              />
+            </InputRowLabel>
+          </InputRow>
+          <InputRow>
+            <InputRowLabel>
+              Contact email address
+              <Input
+                name="helpEmail"
+                onChange={(event) => {
+                  onChangeFn("helpEmail", event);
+                }}
+              />
+            </InputRowLabel>
+          </InputRow>
+          <InputRow>
+            <InputRowLabel>
+              Phone number
+              <Input
+                name="helpPhone"
+                onChange={(event) => {
+                  onChangeFn("helpPhone", event);
+                }}
+              />
+            </InputRowLabel>
+          </InputRow>
+          <InputRow>
+            <InputRowLabel>
+              Opening hours
+              <Input
+                multiline
+                name="helpOpeningHours"
+                onChange={(event) => {
+                  onChangeFn("helpOpeningHours", event);
+                }}
+              />
+            </InputRowLabel>
+          </InputRow>
+        </>
+      }
+    />
+  );
+}

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

@@ -0,0 +1,103 @@
+import Alert from "@mui/material/Alert";
+import Box from "@mui/material/Box";
+import Snackbar from "@mui/material/Snackbar";
+import Typography from "@mui/material/Typography";
+import { FormikConfig } from "formik";
+import React, { useEffect, useState } from "react";
+import EditorRow from "ui/editor/EditorRow";
+
+import BoundaryForm from "./BoundaryForm";
+import ContactForm from "./ContactForm";
+
+export interface GeneralSettings {
+  boundaryUrl: string;
+  helpEmail: string;
+  helpPhone: string;
+  helpOpeningHours: string;
+  homepage: string;
+  isPlanningDataCollected: boolean;
+  portalName: string;
+  portalUrl: string;
+}
+
+export interface FormProps {
+  formikConfig: FormikConfig<GeneralSettings>;
+  onSuccess: () => void;
+}
+
+const GeneralSettings: React.FC = () => {
+  const [formikConfig, setFormikConfig] = useState<
+    FormikConfig<GeneralSettings> | undefined
+  >(undefined);
+
+  const initialValues = {
+    boundaryUrl: "",
+    helpEmail: "",
+    helpPhone: "",
+    helpOpeningHours: "",
+    homepage: "",
+    isPlanningDataCollected: true,
+    portalName: "",
+    portalUrl: "",
+  };
+
+  useEffect(() => {
+    const fetchTeam = async () => {
+      try {
+        setFormikConfig({
+          initialValues: initialValues,
+          onSubmit: () => {},
+          validateOnBlur: false,
+          validateOnChange: false,
+          enableReinitialize: true,
+        });
+      } catch (error) {
+        console.error("Error fetching team:", error);
+      }
+    };
+
+    fetchTeam();
+  }, []);
+
+  const [open, setOpen] = useState(false);
+  const [updateMessage, setUpdateMessage] = useState("Setting Updated");
+
+  const handleClose = (
+    _event?: React.SyntheticEvent | Event,
+    reason?: string,
+  ) => {
+    if (reason === "clickaway") {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  const onSuccess = () => setOpen(true);
+
+  return (
+    <Box maxWidth="formWrap" mx="auto">
+      <EditorRow>
+        <Typography variant="h2" component="h3" gutterBottom>
+          General
+        </Typography>
+        <Typography variant="body1">
+          Important links and settings for how your users connect with you
+        </Typography>
+      </EditorRow>
+      {formikConfig && (
+        <>
+          <ContactForm formikConfig={formikConfig} onSuccess={onSuccess} />
+          <BoundaryForm formikConfig={formikConfig} onSuccess={onSuccess} />
+        </>
+      )}
+      <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
+        <Alert onClose={handleClose} severity="success" sx={{ width: "100%" }}>
+          {updateMessage}
+        </Alert>
+      </Snackbar>
+    </Box>
+  );
+};
+
+export default GeneralSettings;

editor.planx.uk/src/pages/FlowEditor/components/Settings/shared/SettingsForm.tsx

@@ -62,4 +62,4 @@ export const SettingsForm = <TFormikValues,>({
       </form>
     </EditorRow>
   );
-};
+};

editor.planx.uk/src/routes/teamSettings.tsx

@@ -8,6 +8,7 @@ import {
   withData,
 } from "navi";
 import DesignSettings from "pages/FlowEditor/components/Settings/DesignSettings";
+import GeneralSettings from "pages/FlowEditor/components/Settings/GeneralSettings";
 import TeamSettings from "pages/FlowEditor/components/Settings/TeamSettings";
 import { useStore } from "pages/FlowEditor/lib/store";
 import React from "react";
@@ -24,6 +25,7 @@ const teamSettingsRoutes = compose(
     "/": redirect("./team"),
     "/:tab": map(async (req) => {
       const isAuthorised = useStore.getState().canUserEditTeam(req.params.team);
+
       if (!isAuthorised)
         throw new NotFoundError(
           `User does not have access to ${req.originalUrl}`,
@@ -45,6 +47,11 @@ const teamSettingsRoutes = compose(
                 route: "design",
                 Component: DesignSettings,
               },
+              {
+                name: "General",
+                route: "general",
+                Component: GeneralSettings,
+              },
             ]}
           />
         ),