diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/ButtonForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/ButtonForm.tsx index 464cf9a215..1a8383e325 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/ButtonForm.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/ButtonForm.tsx @@ -61,6 +61,7 @@ export const ButtonForm: React.FC = ({ color={formik.values.actionColour} onChange={(color) => formik.setFieldValue("actionColour", color)} label="Button colour" + errorMessage={formik.errors.actionColour} /> diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/TextLinkForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/TextLinkForm.tsx index 6064cbac15..6f454d6144 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/TextLinkForm.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/TextLinkForm.tsx @@ -70,6 +70,7 @@ export const TextLinkForm: React.FC = ({ color={formik.values.linkColour} onChange={(color) => formik.setFieldValue("linkColour", color)} label="Text link colour" + errorMessage={formik.errors.linkColour} /> diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/ThemeAndLogoForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/ThemeAndLogoForm.tsx index 2ab48b447b..3629d5d0c5 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/ThemeAndLogoForm.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/ThemeAndLogoForm.tsx @@ -86,6 +86,7 @@ export const ThemeAndLogoForm: React.FC = ({ formik.setFieldValue("primaryColour", color) } label="Theme colour" + errorMessage={formik.errors.primaryColour} /> 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 a33aa3d16c..f59e2bee97 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 @@ -3,13 +3,23 @@ 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 BoundaryForm({ formikConfig, onSuccess }: FormProps) { + const formSchema = Yup.object().shape({ + boundaryUrl: Yup.string() + .url( + "Enter a boundary URL in the correct format, https://www.planning.data.gov.uk/", + ) + .required("Enter a boundary URL"), + }); + const formik = useFormik({ ...formikConfig, + validationSchema: formSchema, onSubmit: async (values, { resetForm }) => { const isSuccess = await useStore.getState().updateTeamSettings({ boundaryUrl: values.boundaryUrl, @@ -49,6 +59,7 @@ export default function BoundaryForm({ formikConfig, onSuccess }: FormProps) { ) => { formik.setFieldValue("boundaryUrl", ev.target.value); }} 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 906ab6531d..7924634a00 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 @@ -11,12 +11,16 @@ import { FormProps } from "."; export default function ContactForm({ formikConfig, onSuccess }: FormProps) { const formSchema = Yup.object().shape({ helpEmail: Yup.string() - .email("Please enter valid email") - .required("Help Email is required"), - helpPhone: Yup.string().required("Help Phone is required"), - helpOpeningHours: Yup.string().required(), + .email( + "Enter an email address in the correct format, like example@email.com", + ) + .required("Enter a help email address"), + helpPhone: Yup.string().required("Enter a help phone number"), + helpOpeningHours: Yup.string().required("Enter your opening hours"), homepage: Yup.string() - .url("Please enter a valid URL for the homepage") + .url( + "Enter a homepage URL in the correct format, like https://www.localauthority.gov.uk/", + ) .required("Enter a homepage"), }); @@ -59,6 +63,7 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) { onChangeFn("homepage", event); }} value={formik.values.homepage} + errorMessage={formik.errors.homepage} id="homepage" /> @@ -66,6 +71,7 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) { { onChangeFn("helpEmail", event); }} @@ -76,6 +82,7 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) { { onChangeFn("helpPhone", event); }} @@ -87,6 +94,7 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) { multiline name="helpOpeningHours" value={formik.values.helpOpeningHours} + errorMessage={formik.errors.helpOpeningHours} onChange={(event) => { onChangeFn("helpOpeningHours", event); }} diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/shared/SettingsForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/shared/SettingsForm.tsx index 61b67c6f6c..10cf9fefee 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/shared/SettingsForm.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/shared/SettingsForm.tsx @@ -40,27 +40,21 @@ export const SettingsForm = ({ {preview} )} - - - - - - - + + + + ); diff --git a/editor.planx.uk/src/ui/editor/ColorPicker.tsx b/editor.planx.uk/src/ui/editor/ColorPicker.tsx index d855547bc1..3f56a4e996 100644 --- a/editor.planx.uk/src/ui/editor/ColorPicker.tsx +++ b/editor.planx.uk/src/ui/editor/ColorPicker.tsx @@ -2,13 +2,16 @@ import Box, { BoxProps } from "@mui/material/Box"; import ButtonBase, { ButtonBaseProps } from "@mui/material/ButtonBase"; import { styled } from "@mui/material/styles"; import Typography from "@mui/material/Typography"; +import { ErrorMessage } from "formik"; import React, { useState } from "react"; import { ChromePicker, ColorChangeHandler } from "react-color"; +import ErrorWrapper from "ui/shared/ErrorWrapper"; export interface Props { label?: string; inline?: boolean; color?: string; + errorMessage?: string; onChange?: (newColor: string) => void; } @@ -93,28 +96,33 @@ export default function ColorPicker(props: Props): FCReturn { }; return ( - - - {props.label || "Background colour"}:{" "} - - - - {props.color} - - {show ? ( - - - - - ) : null} - + + + + {props.label || "Background colour"}:{" "} + + + + {props.color} + + {show ? ( + + + + + ) : null} + + ); }