From 2d5ad70fa72bbf830d72376a63755e5ac12797ac Mon Sep 17 00:00:00 2001 From: Rory Doak <138574807+RODO94@users.noreply.github.com> Date: Wed, 3 Jul 2024 17:02:57 +0100 Subject: [PATCH] feat: Fetch `team_settings` data for Editor forms and adding Update fn (#3366) --- .../Settings/GeneralSettings/BoundaryForm.tsx | 12 ++++++-- .../Settings/GeneralSettings/ContactForm.tsx | 29 ++++++++++++++----- .../Settings/GeneralSettings/index.tsx | 27 +++++------------ .../Settings/shared/SettingsForm.tsx | 1 + .../src/pages/FlowEditor/lib/store/team.ts | 10 +++++++ editor.planx.uk/src/routes/teamSettings.tsx | 10 +++---- 6 files changed, 55 insertions(+), 34 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 dbd93e3f0b..a33aa3d16c 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,4 +1,5 @@ import { useFormik } from "formik"; +import { useStore } from "pages/FlowEditor/lib/store"; import React, { ChangeEvent } from "react"; import InputLabel from "ui/editor/InputLabel"; import Input from "ui/shared/Input"; @@ -9,9 +10,14 @@ import { FormProps } from "."; export default function BoundaryForm({ formikConfig, onSuccess }: FormProps) { const formik = useFormik({ ...formikConfig, - onSubmit(values, { resetForm }) { - onSuccess(); - resetForm({ values }); + onSubmit: async (values, { resetForm }) => { + const isSuccess = await useStore.getState().updateTeamSettings({ + boundaryUrl: values.boundaryUrl, + }); + if (isSuccess) { + onSuccess(); + resetForm({ values }); + } }, }); 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 5b8c8c4047..906ab6531d 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 @@ -1,4 +1,5 @@ import { useFormik } from "formik"; +import { useStore } from "pages/FlowEditor/lib/store"; import React, { ChangeEvent } from "react"; import InputLabel from "ui/editor/InputLabel"; import Input from "ui/shared/Input"; @@ -13,16 +14,26 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) { .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"), + helpOpeningHours: Yup.string().required(), + homepage: Yup.string() + .url("Please enter a valid URL for the homepage") + .required("Enter a homepage"), }); const formik = useFormik({ ...formikConfig, validationSchema: formSchema, - onSubmit(values, { resetForm }) { - onSuccess(); - resetForm({ values }); + onSubmit: async (values, { resetForm }) => { + const isSuccess = await useStore.getState().updateTeamSettings({ + helpEmail: values.helpEmail, + helpOpeningHours: values.helpOpeningHours, + helpPhone: values.helpPhone, + homepage: values.homepage, + }); + if (isSuccess) { + onSuccess(); + resetForm({ values }); + } }, }); @@ -41,18 +52,20 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) { } input={ <> - + { onChangeFn("homepage", event); }} - id="homepageUrl" + value={formik.values.homepage} + id="homepage" /> { onChangeFn("helpEmail", event); }} @@ -62,6 +75,7 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) { { onChangeFn("helpPhone", event); }} @@ -72,6 +86,7 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) { { 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 index a2fec53d73..b2ee94db39 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 @@ -2,44 +2,33 @@ 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 { TeamSettings } from "@opensystemslab/planx-core/types"; import { FormikConfig } from "formik"; +import { useStore } from "pages/FlowEditor/lib/store"; import React, { useEffect, useState } from "react"; import SettingsSection from "ui/editor/SettingsSection"; import BoundaryForm from "./BoundaryForm"; import ContactForm from "./ContactForm"; -export interface GeneralSettings { - boundaryUrl: string; - helpEmail: string; - helpPhone: string; - helpOpeningHours: string; - homepage: string; -} - export interface FormProps { - formikConfig: FormikConfig; + formikConfig: FormikConfig; onSuccess: () => void; } const GeneralSettings: React.FC = () => { const [formikConfig, setFormikConfig] = useState< - FormikConfig | undefined + FormikConfig | undefined >(undefined); - const initialValues = { - boundaryUrl: "", - helpEmail: "", - helpPhone: "", - helpOpeningHours: "", - homepage: "", - }; - useEffect(() => { const fetchTeam = async () => { try { + const fetchedTeam = await useStore.getState().fetchCurrentTeam(); + if (!fetchedTeam) throw Error("Unable to find team"); + setFormikConfig({ - initialValues: initialValues, + initialValues: fetchedTeam.teamSettings, onSubmit: () => {}, validateOnBlur: false, validateOnChange: false, 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 aefab091a4..61b67c6f6c 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 @@ -40,6 +40,7 @@ export const SettingsForm = ({ {preview} )} + void; fetchCurrentTeam: () => Promise; updateTeamTheme: (theme: Partial) => Promise; + updateTeamSettings: (teamSettings: Partial) => Promise; } export const teamStore: StateCreator< @@ -128,4 +129,13 @@ export const teamStore: StateCreator< const isSuccess = await $client.team.updateTheme(teamId, theme); return isSuccess; }, + + updateTeamSettings: async (teamSettings: Partial) => { + const { teamId, $client } = get(); + const isSuccess = await $client.team.updateTeamSettings( + teamId, + teamSettings, + ); + return isSuccess; + }, }); diff --git a/editor.planx.uk/src/routes/teamSettings.tsx b/editor.planx.uk/src/routes/teamSettings.tsx index 27fcb11715..75f14a89b7 100644 --- a/editor.planx.uk/src/routes/teamSettings.tsx +++ b/editor.planx.uk/src/routes/teamSettings.tsx @@ -37,6 +37,11 @@ const teamSettingsRoutes = compose( ),