diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/BoundaryForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/BoundaryForm.tsx new file mode 100644 index 0000000000..e8a249ad6f --- /dev/null +++ b/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 ( + + 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. +
+
+ The boundary should be given as a link from:{" "} + + https://www.planning.data.gov.uk/ + + + } + input={ + <> + + + Boundary URL + ) => { + formik.setFieldValue("boundaryUrl", ev.target.value); + }} + /> + + + + } + /> + ); +} diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/ContactForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/ContactForm.tsx new file mode 100644 index 0000000000..24075a8168 --- /dev/null +++ b/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) => + formik.setFieldValue(type, event.target.value); + + return ( + + Details to help direct different messages, feedback, and enquiries + from users. + + } + input={ + <> + + + Homepage URL + { + onChangeFn("homepage", event); + }} + /> + + + + + Contact email address + { + onChangeFn("helpEmail", event); + }} + /> + + + + + Phone number + { + onChangeFn("helpPhone", event); + }} + /> + + + + + Opening hours + { + onChangeFn("helpOpeningHours", event); + }} + /> + + + + } + /> + ); +} diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/index.tsx new file mode 100644 index 0000000000..7ce9edd670 --- /dev/null +++ b/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; + onSuccess: () => void; +} + +const GeneralSettings: React.FC = () => { + const [formikConfig, setFormikConfig] = useState< + FormikConfig | 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 ( + + + + General + + + Important links and settings for how your users connect with you + + + {formikConfig && ( + <> + + + + )} + + + {updateMessage} + + + + ); +}; + +export default GeneralSettings; diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/shared/SettingsForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/shared/SettingsForm.tsx index 99e001d097..3bb553695e 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/shared/SettingsForm.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/shared/SettingsForm.tsx @@ -62,4 +62,4 @@ export const SettingsForm = ({ ); -}; \ No newline at end of file +}; diff --git a/editor.planx.uk/src/routes/teamSettings.tsx b/editor.planx.uk/src/routes/teamSettings.tsx index a21bd4e25a..587160a6ea 100644 --- a/editor.planx.uk/src/routes/teamSettings.tsx +++ b/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, + }, ]} /> ),