feat: Add reference code field to team settings

editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/ContactForm.tsx

@@ -62,7 +62,7 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) {
               onChange={(event) => {
                 onChangeFn("homepage", event);
               }}
-              value={formik.values.homepage}
+              value={formik.values.homepage ?? ""}
               errorMessage={formik.errors.homepage}
               id="homepage"
             />
@@ -91,7 +91,6 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) {
           </InputLabel>
           <InputLabel label="Opening hours" htmlFor="helpOpeningHours">
             <Input
-              multiline
               name="helpOpeningHours"
               value={formik.values.helpOpeningHours}
               errorMessage={formik.errors.helpOpeningHours}

editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/ReferenceCodeForm.tsx

@@ -0,0 +1,80 @@
+import Link from "@mui/material/Link";
+import Typography from "@mui/material/Typography";
+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 * as Yup from "yup";
+
+import { SettingsForm } from "../shared/SettingsForm";
+import { FormProps } from ".";
+
+export default function ReferenceCodeForm({
+  formikConfig,
+  onSuccess,
+}: FormProps) {
+  const formSchema = Yup.object().shape({
+    referenceCode: Yup.string()
+      .min(3, "Code must be 3 characters long")
+      .max(3, "Code must be 3 characters long")
+      .required("Enter a reference code"),
+  });
+
+  const formik = useFormik({
+    ...formikConfig,
+    validationSchema: formSchema,
+    onSubmit: async (values, { resetForm }) => {
+      const isSuccess = await useStore.getState().updateTeamSettings({
+        referenceCode: values.referenceCode,
+      });
+      if (isSuccess) {
+        onSuccess();
+        resetForm({ values });
+      }
+    },
+  });
+
+  const onChangeFn = (type: string, event: ChangeEvent<HTMLInputElement>) =>
+    formik.setFieldValue(type, event.target.value.toUpperCase());
+
+  return (
+    <SettingsForm
+      legend="Local authority reference code"
+      formik={formik}
+      description={
+        <>
+          <Typography variant="body2">
+            Your local authority reference code is required for submissions.
+            This is a unique three-letter code per local authority.
+          </Typography>
+          <Typography variant="body2">
+            The reference code can be found from Planning Data at:{" "}
+            <Link
+              href="https://www.planning.data.gov.uk/entity/?dataset=local-authority"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              https://www.planning.data.gov.uk/entity/?dataset=local-authority
+            </Link>
+          </Typography>
+        </>
+      }
+      input={
+        <>
+          <InputLabel label="Reference code" htmlFor="referenceCode">
+            <Input
+              name="referenceCode"
+              onChange={(event) => {
+                onChangeFn("referenceCode", event);
+              }}
+              value={formik.values.referenceCode ?? ""}
+              errorMessage={formik.errors.referenceCode}
+              id="homepage"
+            />
+          </InputLabel>
+        </>
+      }
+    />
+  );
+}

editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/index.tsx

@@ -10,6 +10,7 @@ import SettingsSection from "ui/editor/SettingsSection";
 
 import BoundaryForm from "./BoundaryForm";
 import ContactForm from "./ContactForm";
+import ReferenceCodeForm from "./ReferenceCodeForm";
 
 export interface FormProps {
   formikConfig: FormikConfig<TeamSettings>;
@@ -62,7 +63,7 @@ const GeneralSettings: React.FC = () => {
     <Container maxWidth="formWrap">
       <SettingsSection>
         <Typography variant="h2" component="h3" gutterBottom>
-          General
+          Settings
         </Typography>
         <Typography variant="body1">
           Important links and settings for how your users connect with you.
@@ -72,6 +73,10 @@ const GeneralSettings: React.FC = () => {
         <>
           <ContactForm formikConfig={formikConfig} onSuccess={onSuccess} />
           <BoundaryForm formikConfig={formikConfig} onSuccess={onSuccess} />
+          <ReferenceCodeForm
+            formikConfig={formikConfig}
+            onSuccess={onSuccess}
+          />
         </>
       )}
       <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>