diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/SubmissionForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/SubmissionForm.tsx new file mode 100644 index 0000000000..5a9ecf107e --- /dev/null +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/SubmissionForm.tsx @@ -0,0 +1,60 @@ +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 SubmissionForm({ formikConfig, onSuccess }: FormProps) { + const formSchema = Yup.object().shape({ + submissionEmail: Yup.string().email("Enter a valid email address"), + }); + + const formik = useFormik({ + ...formikConfig, + validationSchema: formSchema, + onSubmit: async (values, { resetForm }) => { + const isSuccess = await useStore.getState().updateTeamSettings({ + submissionEmail: values.submissionEmail, + }); + if (isSuccess) { + onSuccess(); + resetForm({ values }); + } + }, + }); + + return ( + + + The email address used by the Send component to send applications to + your planning office. + + + } + input={ + <> + + { + formik.setFieldValue("submissionEmail", event.target.value); + }} + value={formik.values.submissionEmail ?? ""} + errorMessage={formik.errors.submissionEmail} + id="submissionEmail" + /> + + + } + /> + ); +} 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 dd38a8d463..4b8b08ae98 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 @@ -11,6 +11,7 @@ import SettingsSection from "ui/editor/SettingsSection"; import BoundaryForm from "./BoundaryForm"; import ContactForm from "./ContactForm"; import ReferenceCodeForm from "./ReferenceCodeForm"; +import SubmissionForm from "./SubmissionForm"; export interface FormProps { formikConfig: FormikConfig; @@ -77,6 +78,7 @@ const GeneralSettings: React.FC = () => { formikConfig={formikConfig} onSuccess={onSuccess} /> + )}