diff --git a/editor.planx.uk/src/components/Header.test.tsx b/editor.planx.uk/src/components/Header.test.tsx index 94e370320e..488b269936 100644 --- a/editor.planx.uk/src/components/Header.test.tsx +++ b/editor.planx.uk/src/components/Header.test.tsx @@ -85,7 +85,7 @@ describe("Header Component - Editor Route", () => { id: 123, email: "test@example.com", }, - }), + }) ); jest.spyOn(ReactNavi, "useCurrentRoute").mockImplementation( @@ -98,7 +98,7 @@ describe("Header Component - Editor Route", () => { data: { flow: "test-flow", }, - }) as any, + }) as any ); }); @@ -139,7 +139,7 @@ for (const route of ["/published", "/preview", "/draft", "/pay", "/invite"]) { data: { flow: "test-flow", }, - }) as any, + }) as any ); }); @@ -148,7 +148,7 @@ for (const route of ["/published", "/preview", "/draft", "/pay", "/invite"]) { expect(screen.queryByText("Plan✕")).not.toBeInTheDocument(); expect(screen.getByAltText(`${mockTeam1.name} Logo`)).toHaveAttribute( "src", - "logo.jpg", + "logo.jpg" ); }); @@ -156,7 +156,7 @@ for (const route of ["/published", "/preview", "/draft", "/pay", "/invite"]) { act(() => setState({ teamTheme: mockTeam2.theme })); setup(
); expect( - screen.queryByAltText(`${mockTeam2.name} Logo`), + screen.queryByAltText(`${mockTeam2.name} Logo`) ).not.toBeInTheDocument(); expect(screen.getByText("Plan✕")).toBeInTheDocument(); act(() => setState({ teamTheme: mockTeam1.theme })); @@ -190,7 +190,7 @@ describe("Section navigation bar", () => { data: { flow: "test-flow", }, - }) as any, + }) as any ); }); diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/index.tsx index a5071ba261..0fcaebad06 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/index.tsx @@ -42,7 +42,6 @@ const DesignSettings: React.FC = () => { 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 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..33d562e289 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,16 @@ 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().updateGeneralSettings({ + boundaryUrl: values.boundaryUrl, + }); + console.log("button pressed"); + console.log({ successBool: isSuccess }); + 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..604039692b 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,7 +1,10 @@ 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"; +import InputRow from "ui/shared/InputRow"; +import InputRowLabel from "ui/shared/InputRowLabel"; import * as Yup from "yup"; import { SettingsForm } from "../shared/SettingsForm"; @@ -20,9 +23,17 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) { const formik = useFormik({ ...formikConfig, validationSchema: formSchema, - onSubmit(values, { resetForm }) { - onSuccess(); - resetForm({ values }); + onSubmit: async (values, { resetForm }) => { + const isSuccess = await useStore.getState().updateGeneralSettings({ + homepage: values.homepage, + helpEmail: values.helpEmail, + helpPhone: values.helpPhone, + helpOpeningHours: values.helpOpeningHours, + }); + if (isSuccess) { + onSuccess(); + resetForm({ values }); + } }, }); @@ -41,43 +52,55 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) { } input={ <> - - { - onChangeFn("homepage", event); - }} - id="homepageUrl" - /> - - - { - onChangeFn("helpEmail", event); - }} - id="helpEmail" - /> - - - { - onChangeFn("helpPhone", event); - }} - id="helpPhone" - /> - - - { - onChangeFn("helpOpeningHours", event); - }} - id="helpOpeningHours" - /> - + + + 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 index a2fec53d73..bc7ea75ee2 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,7 +2,9 @@ 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 { GeneralTeamSettings } 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"; @@ -18,28 +20,23 @@ export interface GeneralSettings { } 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(); + console.log(fetchedTeam); + if (!fetchedTeam) throw Error("Unable to find team"); setFormikConfig({ - initialValues: initialValues, + initialValues: fetchedTeam.team_settings, onSubmit: () => {}, validateOnBlur: false, validateOnChange: false, diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/team.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/team.ts index 884b4e5cb9..2f1254840b 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/store/team.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/store/team.ts @@ -18,6 +18,7 @@ export interface TeamStore { teamSettings: TeamSettings; teamSlug: string; teamTheme: TeamTheme; + teamGeneralSettings: GeneralTeamSettings; setTeam: (team: Team) => void; getTeam: () => Team; @@ -25,6 +26,9 @@ export interface TeamStore { clearTeamStore: () => void; fetchCurrentTeam: () => Promise; updateTeamTheme: (theme: Partial) => Promise; + updateGeneralSettings: ( + generalSettings: Partial, + ) => Promise; } export const teamStore: StateCreator< @@ -40,6 +44,7 @@ export const teamStore: StateCreator< teamSettings: {} as TeamSettings, teamSlug: "", teamTheme: {} as TeamTheme, + teamGeneralSettings: {} as GeneralTeamSettings, setTeam: (team) => { set({ @@ -50,6 +55,7 @@ export const teamStore: StateCreator< teamSettings: team.teamSettings, teamSlug: team.slug, teamTheme: team.theme, + teamGeneralSettings: team.team_settings, }); if (team.theme?.favicon) { @@ -66,6 +72,7 @@ export const teamStore: StateCreator< teamSettings: get().teamSettings, slug: get().teamSlug, theme: get().teamTheme, + team_settings: get().teamGeneralSettings, }), initTeamStore: async (slug) => { @@ -128,4 +135,16 @@ export const teamStore: StateCreator< const isSuccess = await $client.team.updateTheme(teamId, theme); return isSuccess; }, + + updateGeneralSettings: async ( + generalSettings: Partial, + ) => { + const { teamId, $client } = get(); + console.log(generalSettings); + const isSuccess = await $client.team.updateGeneralSettings( + teamId, + generalSettings, + ); + return isSuccess; + }, }); diff --git a/editor.planx.uk/src/routes/teamSettings.tsx b/editor.planx.uk/src/routes/teamSettings.tsx index 27fcb11715..48afba1a8d 100644 --- a/editor.planx.uk/src/routes/teamSettings.tsx +++ b/editor.planx.uk/src/routes/teamSettings.tsx @@ -28,7 +28,7 @@ const teamSettingsRoutes = compose( if (!isAuthorised) throw new NotFoundError( - `User does not have access to ${req.originalUrl}`, + `User does not have access to ${req.originalUrl}` ); return route(async (req) => ({ @@ -47,17 +47,17 @@ const teamSettingsRoutes = compose( route: "design", Component: DesignSettings, }, - // { - // name: "General", - // route: "general", - // Component: GeneralSettings, - // }, + { + name: "General", + route: "general", + Component: GeneralSettings, + }, ]} /> ), })); }), - }), + }) ); export default teamSettingsRoutes;