feat: fetching team_settings data from database and populating forms

editor.planx.uk/src/components/Header.test.tsx

@@ -85,7 +85,7 @@ describe("Header Component - Editor Route", () => {
           id: 123,
           email: "[email protected]",
         },
-      }),
+      })
     );
 
     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,15 +148,15 @@ 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"
       );
     });
 
     it("falls back to the PlanX link when a logo is not present", () => {
       act(() => setState({ teamTheme: mockTeam2.theme }));
       setup(<Header />);
       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
     );
   });
 

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

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 });
+      }
     },
   });
 

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={
         <>
-          <InputLabel label="Homepage URL" htmlFor="homepageUrl">
-            <Input
-              name="homepage"
-              onChange={(event) => {
-                onChangeFn("homepage", event);
-              }}
-              id="homepageUrl"
-            />
-          </InputLabel>
-          <InputLabel label="Contact email address" htmlFor="helpEmail">
-            <Input
-              name="helpEmail"
-              onChange={(event) => {
-                onChangeFn("helpEmail", event);
-              }}
-              id="helpEmail"
-            />
-          </InputLabel>
-          <InputLabel label="Phone number" htmlFor="helpPhone">
-            <Input
-              name="helpPhone"
-              onChange={(event) => {
-                onChangeFn("helpPhone", event);
-              }}
-              id="helpPhone"
-            />
-          </InputLabel>
-          <InputLabel label="Opening hours" htmlFor="helpOpeningHours">
-            <Input
-              multiline
-              name="helpOpeningHours"
-              onChange={(event) => {
-                onChangeFn("helpOpeningHours", event);
-              }}
-              id="helpOpeningHours"
-            />
-          </InputLabel>
+          <InputRow>
+            <InputRowLabel>
+              Homepage URL
+              <Input
+                name="homepage"
+                value={formik.values.homepage}
+                onChange={(event) => {
+                  onChangeFn("homepage", event);
+                }}
+              />
+            </InputRowLabel>
+          </InputRow>
+          <InputRow>
+            <InputRowLabel>
+              Contact email address
+              <Input
+                name="helpEmail"
+                value={formik.values.helpEmail}
+                onChange={(event) => {
+                  onChangeFn("helpEmail", event);
+                }}
+              />
+            </InputRowLabel>
+          </InputRow>
+          <InputRow>
+            <InputRowLabel>
+              Phone number
+              <Input
+                name="helpPhone"
+                value={formik.values.helpPhone}
+                onChange={(event) => {
+                  onChangeFn("helpPhone", event);
+                }}
+              />
+            </InputRowLabel>
+          </InputRow>
+          <InputRow>
+            <InputRowLabel>
+              Opening hours
+              <Input
+                multiline
+                name="helpOpeningHours"
+                value={formik.values.helpOpeningHours}
+                onChange={(event) => {
+                  onChangeFn("helpOpeningHours", event);
+                }}
+              />
+            </InputRowLabel>
+          </InputRow>
         </>
       }
     />

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<GeneralSettings>;
+  formikConfig: FormikConfig<GeneralTeamSettings>;
   onSuccess: () => void;
 }
 
 const GeneralSettings: React.FC = () => {
   const [formikConfig, setFormikConfig] = useState<
-    FormikConfig<GeneralSettings> | undefined
+    FormikConfig<GeneralTeamSettings> | 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,

editor.planx.uk/src/pages/FlowEditor/lib/store/team.ts

@@ -18,13 +18,17 @@ export interface TeamStore {
   teamSettings: TeamSettings;
   teamSlug: string;
   teamTheme: TeamTheme;
+  teamGeneralSettings: GeneralTeamSettings;
 
   setTeam: (team: Team) => void;
   getTeam: () => Team;
   initTeamStore: (slug: string) => Promise<void>;
   clearTeamStore: () => void;
   fetchCurrentTeam: () => Promise<Team>;
   updateTeamTheme: (theme: Partial<TeamTheme>) => Promise<boolean>;
+  updateGeneralSettings: (
+    generalSettings: Partial<GeneralTeamSettings>,
+  ) => Promise<boolean>;
 }
 
 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<GeneralTeamSettings>,
+  ) => {
+    const { teamId, $client } = get();
+    console.log(generalSettings);
+    const isSuccess = await $client.team.updateGeneralSettings(
+      teamId,
+      generalSettings,
+    );
+    return isSuccess;
+  },
 });

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;