feat: fetching team_settings data from database and populating forms

.github/dependabot.yml

@@ -24,7 +24,7 @@ updates:
       - "theopensystemslab/planx"
     ignore:
       - dependency-name: "*"
-        update-types: ["version-update:semver-patch"]
+        update-types: ["version-update:semver-patch", "version-update:semver-minor"]
 
   # Hasura
   - package-ecosystem: "npm"
@@ -38,7 +38,7 @@ updates:
       - "theopensystemslab/planx"
     ignore:
       - dependency-name: "*"
-        update-types: ["version-update:semver-patch"]
+        update-types: ["version-update:semver-patch", "version-update:semver-minor"]
 
   - package-ecosystem: "docker"
     directory: "/hasura.planx.uk"
@@ -76,7 +76,7 @@ updates:
       - "theopensystemslab/planx"
     ignore:
       - dependency-name: "*"
-        update-types: ["version-update:semver-patch"]
+        update-types: ["version-update:semver-patch", "version-update:semver-minor"]
 
   # ShareDB
   - package-ecosystem: "npm"
@@ -90,7 +90,7 @@ updates:
       - "theopensystemslab/planx"
     ignore:
       - dependency-name: "*"
-        update-types: ["version-update:semver-patch"]
+        update-types: ["version-update:semver-patch", "version-update:semver-minor"]
 
   - package-ecosystem: "docker"
     directory: "/sharedb.planx.uk"
@@ -115,7 +115,7 @@ updates:
       - "theopensystemslab/planx"
     ignore:
       - dependency-name: "*"
-        update-types: ["version-update:semver-patch"]
+        update-types: ["version-update:semver-patch", "version-update:semver-minor"]
 
   - package-ecosystem: "docker"
     directory: "/api.planx.uk"
@@ -142,7 +142,7 @@ updates:
       - "theopensystemslab/planx"
     ignore:
       - dependency-name: "*"
-        update-types: ["version-update:semver-patch"]
+        update-types: ["version-update:semver-patch", "version-update:semver-minor"]
 
   # Infrastructure
   # - package-ecosystem: "npm"

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().updateTeamSettings({
+        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().updateTeamSettings({
+        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,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<GeneralSettings>;
+  formikConfig: FormikConfig<TeamSettings>;
   onSuccess: () => void;
 }
 
 const GeneralSettings: React.FC = () => {
   const [formikConfig, setFormikConfig] = useState<
-    FormikConfig<GeneralSettings> | undefined
+    FormikConfig<TeamSettings> | 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.teamSettings,
           onSubmit: () => {},
           validateOnBlur: false,
           validateOnChange: false,

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

@@ -15,16 +15,17 @@ export interface TeamStore {
   teamId: number;
   teamIntegrations: TeamIntegrations;
   teamName: string;
-  teamSettings: TeamSettings;
   teamSlug: string;
   teamTheme: TeamTheme;
+  teamSettings: TeamSettings;
 
   setTeam: (team: Team) => void;
   getTeam: () => Team;
   initTeamStore: (slug: string) => Promise<void>;
   clearTeamStore: () => void;
   fetchCurrentTeam: () => Promise<Team>;
   updateTeamTheme: (theme: Partial<TeamTheme>) => Promise<boolean>;
+  updateTeamSettings: (teamSettings: Partial<TeamSettings>) => Promise<boolean>;
 }
 
 export const teamStore: StateCreator<
@@ -37,19 +38,19 @@ export const teamStore: StateCreator<
   teamId: 0,
   teamIntegrations: {} as TeamIntegrations,
   teamName: "",
-  teamSettings: {} as TeamSettings,
   teamSlug: "",
   teamTheme: {} as TeamTheme,
+  teamSettings: {} as TeamSettings,
 
   setTeam: (team) => {
     set({
       boundaryBBox: team.boundaryBBox,
       teamId: team.id,
       teamIntegrations: team.integrations,
       teamName: team.name,
-      teamSettings: team.teamSettings,
       teamSlug: team.slug,
       teamTheme: team.theme,
+      teamSettings: team.teamSettings,
     });
 
     if (team.theme?.favicon) {
@@ -63,9 +64,9 @@ export const teamStore: StateCreator<
     id: get().teamId,
     integrations: get().teamIntegrations,
     name: get().teamName,
-    teamSettings: get().teamSettings,
     slug: get().teamSlug,
     theme: get().teamTheme,
+    teamSettings: get().teamSettings,
   }),
 
   initTeamStore: async (slug) => {
@@ -128,4 +129,14 @@ export const teamStore: StateCreator<
     const isSuccess = await $client.team.updateTheme(teamId, theme);
     return isSuccess;
   },
+
+  updateTeamSettings: async (generalSettings: Partial<TeamSettings>) => {
+    const { teamId, $client } = get();
+    console.log(generalSettings);
+    const isSuccess = await $client.team.updateTeamSettings(
+      teamId,
+      generalSettings,
+    );
+    return isSuccess;
+  },
 });