From 575b5813d025ac5a3512d9475129be2f587df2ab Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Thu, 20 Jun 2024 15:15:06 +0100 Subject: [PATCH 01/22] init editor changes to plan ui additions --- .../Settings/TeamNewSettings/ContactForm.tsx | 6 ++ .../Settings/TeamNewSettings/index.tsx | 99 +++++++++++++++++++ .../src/pages/FlowEditor/lib/store/user.ts | 2 - editor.planx.uk/src/routes/teamSettings.tsx | 7 ++ 4 files changed, 112 insertions(+), 2 deletions(-) create mode 100644 editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/ContactForm.tsx create mode 100644 editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/index.tsx diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/ContactForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/ContactForm.tsx new file mode 100644 index 0000000000..3a2ad95ba7 --- /dev/null +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/ContactForm.tsx @@ -0,0 +1,6 @@ +import React from "react"; +import EditorRow from "ui/editor/EditorRow"; + +export default function ContactForm(props: { type: string }) { + return {props.type}} />; +} diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/index.tsx new file mode 100644 index 0000000000..30936c3694 --- /dev/null +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/index.tsx @@ -0,0 +1,99 @@ +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 ContactForm from "./ContactForm"; + +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 FormProps { + formikConfig: FormikConfig; + onSuccess: () => void; +} + +const TeamNewSettings: React.FC = () => { + const [formikConfig, setFormikConfig] = useState< + FormikConfig | undefined + >(undefined); + + /** + * Fetch current team and setup shared form config + */ + useEffect(() => { + const fetchTeam = async () => { + try { + const fetchedTeam = await useStore.getState().fetchCurrentTeam(); + if (!fetchedTeam) throw Error("Unable to find team"); + + setFormikConfig({ + initialValues: fetchedTeam.theme, + // This value will be set per form section + 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 ( + + + + General + + + Important links and settings for how your users connect with you + + + {formikConfig && ( + <> + + + + + )} + + + {updateMessage} + + + + ); +}; + +export default TeamNewSettings; diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/user.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/user.ts index 52eff95823..0a06a4db6e 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/store/user.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/store/user.ts @@ -35,10 +35,8 @@ export const userStore: StateCreator< canUserEditTeam(teamSlug) { const user = get().getUser(); if (!user) return false; - const hasTeamEditorRole = (team: UserTeams) => team.role === "teamEditor" && team.team.slug === teamSlug; - return user.isPlatformAdmin || user.teams.some(hasTeamEditorRole); }, diff --git a/editor.planx.uk/src/routes/teamSettings.tsx b/editor.planx.uk/src/routes/teamSettings.tsx index a21bd4e25a..8897acd4d9 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 TeamNewSettings from "pages/FlowEditor/components/Settings/TeamNewSettings"; 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: TeamNewSettings, + }, ]} /> ), From 4b6c6831b0a9b9d6e9cfef6af9834164e0065414 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Thu, 20 Jun 2024 15:43:16 +0100 Subject: [PATCH 02/22] continue layout and small form additions --- .../Settings/TeamNewSettings/BoundaryForm.tsx | 26 +++++++++++++++++++ .../TeamNewSettings/HomepagePlanningForm.tsx | 16 ++++++++++++ .../Settings/TeamNewSettings/index.tsx | 6 +++-- 3 files changed, 46 insertions(+), 2 deletions(-) create mode 100644 editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/BoundaryForm.tsx create mode 100644 editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/HomepagePlanningForm.tsx diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/BoundaryForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/BoundaryForm.tsx new file mode 100644 index 0000000000..dde7d53f6e --- /dev/null +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/BoundaryForm.tsx @@ -0,0 +1,26 @@ +import React, { ChangeEvent, useState } from "react"; +import { eventManager } from "react-toastify/dist/core"; +import EditorRow from "ui/editor/EditorRow"; +import RichTextInput from "ui/editor/RichTextInput"; + +export default function BoundaryForm() { + const [boundaryState, setBoundaryState] = useState(""); + return ( + +

Homepage and Planning Portal

+ ) => { + setBoundaryState(ev.target.value); + }} + placeholder="homepage" + /> + + } + /> + ); +} diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/HomepagePlanningForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/HomepagePlanningForm.tsx new file mode 100644 index 0000000000..b7cc9970bb --- /dev/null +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/HomepagePlanningForm.tsx @@ -0,0 +1,16 @@ +import React from "react"; +import EditorRow from "ui/editor/EditorRow"; +import RichTextInput from "ui/editor/RichTextInput"; +export default function HomepagePlanningForm() { + return ( + +

Homepage and Planning Portal

+ + + } + /> + ); +} diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/index.tsx index 30936c3694..5854f91cfa 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/index.tsx @@ -9,7 +9,9 @@ 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}`, @@ -83,8 +85,8 @@ const TeamNewSettings: React.FC = () => { {formikConfig && ( <> - - + + )} From 15e5e080ef6780da0b3f59cfc5ecc3d7980bb46f Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Fri, 21 Jun 2024 11:34:02 +0100 Subject: [PATCH 03/22] changes made to general settings --- .../Settings/TeamNewSettings/BoundaryForm.tsx | 95 ++++++++++++++++--- .../TeamNewSettings/newSettingsForm.tsx | 47 +++++++++ 2 files changed, 131 insertions(+), 11 deletions(-) create mode 100644 editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/newSettingsForm.tsx diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/BoundaryForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/BoundaryForm.tsx index dde7d53f6e..fa14464bc9 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/BoundaryForm.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/BoundaryForm.tsx @@ -1,26 +1,99 @@ +import Box from "@mui/material/Box"; +import Typography from "@mui/material/Typography"; import React, { ChangeEvent, useState } from "react"; -import { eventManager } from "react-toastify/dist/core"; import EditorRow from "ui/editor/EditorRow"; +import InputDescription from "ui/editor/InputDescription"; +import InputGroup from "ui/editor/InputGroup"; +import InputLegend from "ui/editor/InputLegend"; import RichTextInput from "ui/editor/RichTextInput"; +import InputRow from "ui/shared/InputRow"; +import InputRowItem from "ui/shared/InputRowItem"; +import InputRowLabel from "ui/shared/InputRowLabel"; + +import { NewSettingsForm } from "./newSettingsForm"; export default function BoundaryForm() { const [boundaryState, setBoundaryState] = useState(""); - return ( + + const boundaryOriginal = ( -

Homepage and Planning Portal

- ) => { - setBoundaryState(ev.target.value); - }} - placeholder="homepage" - /> + + Boundary + + 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/ + + + + + + Boundary URL + + + + ) => { + setBoundaryState(ev.target.value); + }} + /> + + + + + } + /> + ); + + const newBoundary = ( + + 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={ + <> + + Logo: + ) => { + setBoundaryState(ev.target.value); + }} + /> + } /> ); + return newBoundary; } diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/newSettingsForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/newSettingsForm.tsx new file mode 100644 index 0000000000..d6c3ba06f4 --- /dev/null +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/newSettingsForm.tsx @@ -0,0 +1,47 @@ +import Box from "@mui/material/Box"; +import Button from "@mui/material/Button"; +import Typography from "@mui/material/Typography"; +import React from "react"; +import EditorRow from "ui/editor/EditorRow"; +import InputGroup from "ui/editor/InputGroup"; +import InputLegend from "ui/editor/InputLegend"; +import ErrorWrapper from "ui/shared/ErrorWrapper"; + +interface NewSettingsProps { + legend: string; + description: React.ReactElement; + input: React.ReactElement; +} + +export const NewSettingsForm: React.FC = ({ + legend, + description, + input, +}) => { + return ( + +
+ {legend} + {description} + + {input} + + + + + + + +
+ + ); +}; From 26a764093733c197406dde35d8aa2395d34da965 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Fri, 21 Jun 2024 13:50:58 +0100 Subject: [PATCH 04/22] update SettingsForm to make formik optional and add inputs for contact form --- .../Settings/TeamNewSettings/BoundaryForm.tsx | 22 +++++----- .../Settings/TeamNewSettings/ContactForm.tsx | 40 ++++++++++++++++++- .../Settings/shared/SettingsForm.tsx | 14 +++---- .../src/ui/shared/InputRowLabel.tsx | 1 + 4 files changed, 60 insertions(+), 17 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/BoundaryForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/BoundaryForm.tsx index fa14464bc9..bf788b0b90 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/BoundaryForm.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/BoundaryForm.tsx @@ -6,10 +6,12 @@ import InputDescription from "ui/editor/InputDescription"; import InputGroup from "ui/editor/InputGroup"; import InputLegend from "ui/editor/InputLegend"; import RichTextInput from "ui/editor/RichTextInput"; +import Input from "ui/shared/Input"; import InputRow from "ui/shared/InputRow"; import InputRowItem from "ui/shared/InputRowItem"; import InputRowLabel from "ui/shared/InputRowLabel"; +import { SettingsForm } from "../shared/SettingsForm"; import { NewSettingsForm } from "./newSettingsForm"; export default function BoundaryForm() { @@ -60,7 +62,7 @@ export default function BoundaryForm() { ); const newBoundary = ( - @@ -82,14 +84,16 @@ export default function BoundaryForm() { input={ <> - Logo: - ) => { - setBoundaryState(ev.target.value); - }} - /> + + Logo: + ) => { + setBoundaryState(ev.target.value); + }} + /> + } diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/ContactForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/ContactForm.tsx index 3a2ad95ba7..7837877a60 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/ContactForm.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamNewSettings/ContactForm.tsx @@ -1,6 +1,44 @@ import React from "react"; import EditorRow from "ui/editor/EditorRow"; +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"; export default function ContactForm(props: { type: string }) { - return {props.type}} />; + return ( + + Details to help direct different messages, feedback, and enquiries + from users. + + } + input={ + <> + + + Help Email + + + + + + Help Phone + + + + + + Help Opening Hours + + + + + } + /> + ); } 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..2cec2d69fb 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 @@ -12,7 +12,7 @@ type SettingsFormProps = { legend: string; description: React.ReactElement; input: React.ReactElement; - formik: FormikProps; + formik?: FormikProps; preview?: React.ReactElement; }; @@ -25,7 +25,7 @@ export const SettingsForm = ({ }: SettingsFormProps) => { return ( -
+ {legend} {description} @@ -40,18 +40,18 @@ export const SettingsForm = ({ )} - - - - - -
- ); -}; From 329fec4514f822e0f3c5b027929839455826f5c5 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Mon, 24 Jun 2024 14:42:14 +0100 Subject: [PATCH 14/22] remove redundant variable --- .../FlowEditor/components/Settings/GeneralSettings/index.tsx | 2 -- 1 file changed, 2 deletions(-) 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 index dd83a03e85..15b6693d5f 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/index.tsx @@ -19,8 +19,6 @@ export const DesignPreview = styled(Box)(({ theme }) => ({ boxShadow: "4px 4px 0px rgba(150, 150, 150, 0.5)", })); -export const EXAMPLE_COLOUR = "#007078"; - export interface GeneralSettings { boundaryUrl: string; helpEmail: string; From 52a56c018b300d1198c5a13b0ac6b2b5702da2d0 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Mon, 24 Jun 2024 14:55:24 +0100 Subject: [PATCH 15/22] made changes to comments from Daf@ --- .../Settings/GeneralSettings/BoundaryForm.tsx | 2 +- .../Settings/GeneralSettings/ContactForm.tsx | 6 +++--- .../components/Settings/GeneralSettings/index.tsx | 11 +---------- 3 files changed, 5 insertions(+), 14 deletions(-) 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 index 8921d064b9..e8a249ad6f 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/BoundaryForm.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/BoundaryForm.tsx @@ -1,5 +1,5 @@ import { useFormik } from "formik"; -import React, { ChangeEvent, useState } from "react"; +import React, { ChangeEvent } from "react"; import InputDescription from "ui/editor/InputDescription"; import Input from "ui/shared/Input"; import InputRow from "ui/shared/InputRow"; 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 index 36bfea74bb..a1b18aa897 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/ContactForm.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/ContactForm.tsx @@ -44,7 +44,7 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) { <> - Help Email + Contact email address { @@ -55,7 +55,7 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) { - Help Phone + Phone number { @@ -66,7 +66,7 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) { - Help Opening Hours + Opening hours ({ - border: `2px solid ${theme.palette.border.input}`, - padding: theme.spacing(2), - boxShadow: "4px 4px 0px rgba(150, 150, 150, 0.5)", -})); - export interface GeneralSettings { boundaryUrl: string; helpEmail: string; @@ -69,7 +60,7 @@ const GeneralSettings: React.FC = () => { fetchTeam(); }, []); - const [open, setOpen] = useState(true); + const [open, setOpen] = useState(false); const [updateMessage, setUpdateMessage] = useState("Setting Updated"); const handleClose = ( From 9c4b56d83a8ac551bbc62bb73ad9b5abb165136f Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Mon, 24 Jun 2024 15:07:32 +0100 Subject: [PATCH 16/22] remove optional operand from return comp of settingsForm --- .../components/Settings/shared/SettingsForm.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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 9a34ad54f3..60dac9a34d 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 @@ -25,7 +25,7 @@ export const SettingsForm = ({ }: SettingsFormProps) => { return ( -
+ {legend} {description} @@ -40,15 +40,15 @@ export const SettingsForm = ({ )} -