feat: Team Settings Editor Form UI Changes

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

@@ -0,0 +1,59 @@
+import { useFormik } from "formik";
+import React, { ChangeEvent, useState } 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,83 @@
+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(),
+  });
+
+  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>
+              Help Email
+              <Input
+                name="helpEmail"
+                onChange={(event) => {
+                  onChangeFn("helpEmail", event);
+                }}
+              />
+            </InputRowLabel>
+          </InputRow>
+          <InputRow>
+            <InputRowLabel>
+              Help Phone
+              <Input
+                name="helpPhone"
+                onChange={(event) => {
+                  onChangeFn("helpPhone", event);
+                }}
+              />
+            </InputRowLabel>
+          </InputRow>
+          <InputRow>
+            <InputRowLabel>
+              Help Opening Hours
+              <Input
+                multiline
+                name="helpOpeningHours"
+                onChange={(event) => {
+                  onChangeFn("helpOpeningHours", event);
+                }}
+              />
+            </InputRowLabel>
+          </InputRow>
+        </>
+      }
+    />
+  );
+}

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

@@ -0,0 +1,123 @@
+import RadioGroup from "@mui/material/RadioGroup";
+import BasicRadio from "@planx/components/shared/Radio/BasicRadio";
+import { useFormik } from "formik";
+import React, { ChangeEvent, useState } 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 HomepagePlanningForm({
+  formikConfig,
+  onSuccess,
+}: FormProps) {
+  const [showPlanningInputs, setShowPlanningInputs] = useState(false);
+
+  const formik = useFormik({
+    ...formikConfig,
+    onSubmit(values, { resetForm }) {
+      onSuccess();
+      resetForm({ values });
+    },
+  });
+
+  const onChangeFn = (type: string, event: ChangeEvent<HTMLInputElement>) =>
+    formik.setFieldValue(type, event.target.value);
+
+  const boolTransform = (event: ChangeEvent<HTMLInputElement>) => {
+    if (event.target.value === "yes") {
+      setShowPlanningInputs(true);
+      return true;
+    } else if (event.target.value === "no") {
+      setShowPlanningInputs(false);
+      return false;
+    }
+  };
+
+  return (
+    <SettingsForm
+      legend="Homepage and Planning Portal"
+      formik={formik}
+      description={
+        <InputDescription>
+          A link to your homepage displayed publicly to your users to help
+          navigate your council services and a link to your Planning Portal to
+          connect your planning data with our outputs.
+        </InputDescription>
+      }
+      input={
+        <>
+          <InputRow>
+            <InputRowLabel>
+              Homepage URL
+              <Input
+                name="homepage"
+                onChange={(event) => {
+                  onChangeFn("homepage", event);
+                }}
+              />
+            </InputRowLabel>
+          </InputRow>
+          <InputRow>
+            <InputRowLabel>
+              Do you collect Planning data?
+              <RadioGroup
+                name="isPlanningDataCollected"
+                defaultValue={
+                  formik.values.isPlanningDataCollected === true ? "yes" : "no"
+                }
+                onChange={(event) => {
+                  formik.setFieldValue(
+                    "isPlanningDataCollected",
+                    boolTransform(event),
+                  );
+                }}
+              >
+                <BasicRadio
+                  title="Yes"
+                  variant="compact"
+                  id="yes"
+                  value="yes"
+                  onChange={() => {}}
+                />
+                <BasicRadio
+                  title="No"
+                  variant="compact"
+                  id="no"
+                  value="no"
+                  onChange={() => {}}
+                />
+              </RadioGroup>
+            </InputRowLabel>
+          </InputRow>
+          <InputRow>
+            <InputRowLabel>
+              Planning Portal Name
+              <Input
+                name="portalName"
+                disabled={showPlanningInputs ? false : true}
+                onChange={(event) => {
+                  onChangeFn("portalName", event);
+                }}
+              />
+            </InputRowLabel>
+          </InputRow>
+          <InputRow>
+            <InputRowLabel>
+              Planning Portal URL
+              <Input
+                name="portalUrl"
+                disabled={showPlanningInputs ? false : true}
+                onChange={(event) => {
+                  onChangeFn("portalUrl", event);
+                }}
+              />
+            </InputRowLabel>
+          </InputRow>
+        </>
+      }
+    />
+  );
+}

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

@@ -0,0 +1,119 @@
+import Alert from "@mui/material/Alert";
+import Box from "@mui/material/Box";
+import Snackbar from "@mui/material/Snackbar";
+import { styled } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
+import { TeamTheme } from "@opensystemslab/planx-core/types";
+import { FormikConfig } from "formik";
+import { useStore } from "pages/FlowEditor/lib/store";
+import React, { useEffect, useState } from "react";
+import EditorRow from "ui/editor/EditorRow";
+
+import BoundaryForm from "./BoundaryForm";
+import ContactForm from "./ContactForm";
+import HomepagePlanningForm from "./HomepagePlanningForm";
+
+export const DesignPreview = styled(Box)(({ theme }) => ({
+  border: `2px solid ${theme.palette.border.input}`,
+  padding: theme.spacing(2),
+  boxShadow: "4px 4px 0px rgba(150, 150, 150, 0.5)",
+}));
+
+export const EXAMPLE_COLOUR = "#007078";
+
+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(true);
+  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} />
+          <HomepagePlanningForm
+            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;