update theme forms, color picker, and contact form

theopensystemslab · Jul 5, 2024 · bbb4efb · bbb4efb
1 parent af0ce99
commit bbb4efb
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 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
@@ -61,6 +61,7 @@ export const ButtonForm: React.FC<FormProps> = ({
               color={formik.values.actionColour}
               onChange={(color) => formik.setFieldValue("actionColour", color)}
               label="Button colour"
+              errorMessage={formik.errors.actionColour}
             />
           </InputRowItem>
         </InputRow>

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
@@ -70,6 +70,7 @@ export const TextLinkForm: React.FC<FormProps> = ({
               color={formik.values.linkColour}
               onChange={(color) => formik.setFieldValue("linkColour", color)}
               label="Text link colour"
+              errorMessage={formik.errors.linkColour}
             />
           </InputRowItem>
         </InputRow>

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
@@ -86,6 +86,7 @@ export const ThemeAndLogoForm: React.FC<FormProps> = ({
                   formik.setFieldValue("primaryColour", color)
                 }
                 label="Theme colour"
+                errorMessage={formik.errors.primaryColour}
               />
             </InputRowItem>
           </InputRow>

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
@@ -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,13 +59,15 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) {
                 onChangeFn("homepage", event);
               }}
               value={formik.values.homepage}
+              errorMessage={formik.errors.homepage}
               id="homepage"
             />
           </InputLabel>
           <InputLabel label="Contact email address" htmlFor="helpEmail">
             <Input
               name="helpEmail"
               value={formik.values.helpEmail}
+              errorMessage={formik.errors.helpEmail}
               onChange={(event) => {
                 onChangeFn("helpEmail", event);
               }}
@@ -76,6 +78,7 @@ export default function ContactForm({ formikConfig, onSuccess }: FormProps) {
             <Input
               name="helpPhone"
               value={formik.values.helpPhone}
+              errorMessage={formik.errors.helpPhone}
               onChange={(event) => {
                 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
@@ -40,6 +40,21 @@ export const SettingsForm = <TFormikValues,>({
             {preview}
           </Box>
         )}
+        <Box>
+          <Button type="submit" variant="contained" disabled={!formik.dirty}>
+            Save
+          </Button>
+          <Button
+            onClick={() => formik.resetForm()}
+            type="reset"
+            variant="contained"
+            disabled={!formik.dirty}
+            color="secondary"
+            sx={{ ml: 1.5 }}
+          >
+            Reset changes
+          </Button>
+        </Box>
       </form>
     </SettingsSection>
   );

diff --git 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 (
-    <Root inline={props.inline}>
-      <Typography mr={2} variant="body2" component="label">
-        {props.label || "Background colour"}:{" "}
-      </Typography>
-      <StyledButtonBase show={show} onClick={handleClick} disableRipple>
-        <Swatch sx={{ backgroundColor: props.color }} className="swatch" />
-        {props.color}
-      </StyledButtonBase>
-      {show ? (
-        <Popover className="popover">
-          <Cover
-            onClick={handleClose}
-            aria-label="Close Colour Picker"
-            disableRipple
-          />
-          <ChromePicker
-            color={props.color}
-            disableAlpha={true}
-            onChange={handleChange}
-          />
-        </Popover>
-      ) : null}
-    </Root>
+    <ErrorWrapper error={props.errorMessage || undefined} id="settings-error">
+      <Root inline={props.inline}>
+        <Typography mr={2} variant="body2" component="label">
+          {props.label || "Background colour"}:{" "}
+        </Typography>
+        <StyledButtonBase show={show} onClick={handleClick} disableRipple>
+          <Swatch sx={{ backgroundColor: props.color }} className="swatch" />
+          {props.color}
+        </StyledButtonBase>
+        {show ? (
+          <Popover className="popover">
+            <Cover
+              onClick={handleClose}
+              aria-label="Close Colour Picker"
+              disableRipple
+            />
+            <ChromePicker
+              color={props.color}
+              disableAlpha={true}
+              onChange={handleChange}
+            />
+          </Popover>
+        ) : null}
+      </Root>
+    </ErrorWrapper>
   );
 }