From dc975b43f1186494399291dd66558a249b5da753 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Wed, 3 Jul 2024 17:13:45 +0100 Subject: [PATCH 1/5] alter tone of voice for error messaging --- .../components/Settings/GeneralSettings/BoundaryForm.tsx | 8 ++++++++ .../components/Settings/GeneralSettings/ContactForm.tsx | 8 ++++---- 2 files changed, 12 insertions(+), 4 deletions(-) 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..4e7b528f66 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,21 @@ 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("The URL should be in the form shown above") + .required("Enter a boundary URL"), + }); + const formik = useFormik({ ...formikConfig, + validationSchema: formSchema, onSubmit: async (values, { resetForm }) => { const isSuccess = await useStore.getState().updateTeamSettings({ boundaryUrl: values.boundaryUrl, 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..b505f9dcea 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,12 @@ 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"), + .email("Enter a valid email address") + .required("Enter a help email address"), + helpPhone: Yup.string().required("Enter a help phone number"), helpOpeningHours: Yup.string().required(), homepage: Yup.string() - .url("Please enter a valid URL for the homepage") + .url("Enter a valid URL") .required("Enter a homepage"), }); From af0ce99a241f5afae025476a3d12851a9eb40cd0 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Wed, 3 Jul 2024 17:14:43 +0100 Subject: [PATCH 2/5] remove error wrapper from SettingsForm --- .../Settings/shared/SettingsForm.tsx | 21 ------------------- 1 file changed, 21 deletions(-) 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..912a388143 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,6 @@ export const SettingsForm = ({ {preview} )} - - - - - - - ); From bbb4efbedfaa9040218fcaf38203e6ce1b117a6c Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Fri, 5 Jul 2024 09:24:23 +0100 Subject: [PATCH 3/5] update theme forms, color picker, and contact form --- .../Settings/DesignSettings/ButtonForm.tsx | 1 + .../Settings/DesignSettings/TextLinkForm.tsx | 1 + .../DesignSettings/ThemeAndLogoForm.tsx | 1 + .../Settings/GeneralSettings/ContactForm.tsx | 6 ++- .../Settings/shared/SettingsForm.tsx | 15 ++++++ editor.planx.uk/src/ui/editor/ColorPicker.tsx | 51 ++++++++++--------- 6 files changed, 51 insertions(+), 24 deletions(-) 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/ContactForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/ContactForm.tsx index b505f9dcea..782b2e9b2a 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 @@ -14,7 +14,7 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) { .email("Enter a valid email address") .required("Enter a help email address"), helpPhone: Yup.string().required("Enter a help phone number"), - helpOpeningHours: Yup.string().required(), + helpOpeningHours: Yup.string().required("Enter your opening hours"), homepage: Yup.string() .url("Enter a valid URL") .required("Enter a homepage"), @@ -59,6 +59,7 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) { onChangeFn("homepage", event); }} value={formik.values.homepage} + errorMessage={formik.errors.homepage} id="homepage" /> @@ -66,6 +67,7 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) { { onChangeFn("helpEmail", event); }} @@ -76,6 +78,7 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) { { onChangeFn("helpPhone", event); }} @@ -87,6 +90,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 912a388143..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,6 +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..301ebb1386 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 | undefined; onChange?: (newColor: string) => void; } @@ -93,28 +96,30 @@ export default function ColorPicker(props: Props): FCReturn { }; return ( - - - {props.label || "Background colour"}:{" "} - - - - {props.color} - - {show ? ( - - - - - ) : null} - + + + + {props.label || "Background colour"}:{" "} + + + + {props.color} + + {show ? ( + + + + + ) : null} + + ); } From 3b0dfa675f91ebece73ffd157b8eeaf77a917e09 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Fri, 5 Jul 2024 09:30:03 +0100 Subject: [PATCH 4/5] add error messaging to boundary form and update error messaging --- .../components/Settings/GeneralSettings/BoundaryForm.tsx | 5 ++++- .../components/Settings/GeneralSettings/ContactForm.tsx | 8 ++++++-- 2 files changed, 10 insertions(+), 3 deletions(-) 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 4e7b528f66..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 @@ -11,7 +11,9 @@ import { FormProps } from "."; export default function BoundaryForm({ formikConfig, onSuccess }: FormProps) { const formSchema = Yup.object().shape({ boundaryUrl: Yup.string() - .url("The URL should be in the form shown above") + .url( + "Enter a boundary URL in the correct format, https://www.planning.data.gov.uk/", + ) .required("Enter a boundary URL"), }); @@ -57,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 782b2e9b2a..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("Enter a valid email address") + .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("Enter a valid URL") + .url( + "Enter a homepage URL in the correct format, like https://www.localauthority.gov.uk/", + ) .required("Enter a homepage"), }); From e2e191e9420a2a4edf6df413aecaeaf1551a84fb Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Fri, 5 Jul 2024 11:20:53 +0100 Subject: [PATCH 5/5] add changes request on colour picker --- editor.planx.uk/src/ui/editor/ColorPicker.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/editor.planx.uk/src/ui/editor/ColorPicker.tsx b/editor.planx.uk/src/ui/editor/ColorPicker.tsx index 301ebb1386..3f56a4e996 100644 --- a/editor.planx.uk/src/ui/editor/ColorPicker.tsx +++ b/editor.planx.uk/src/ui/editor/ColorPicker.tsx @@ -11,7 +11,7 @@ export interface Props { label?: string; inline?: boolean; color?: string; - errorMessage?: string | undefined; + errorMessage?: string; onChange?: (newColor: string) => void; } @@ -96,7 +96,10 @@ export default function ColorPicker(props: Props): FCReturn { }; return ( - + {props.label || "Background colour"}:{" "}