feat: add error message display to operator contact info

new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.js

@@ -128,7 +128,7 @@ const ContactInfo = ({ wizard }) => {
     phone: Yup.string(),
     email: Yup.string()
       .email('Please enter a valid email address')
-      .required(),
+      .required('An email is required'),
     website: Yup.string(),
     companyNumber: Yup.string()
   })
@@ -182,6 +182,9 @@ const ContactInfo = ({ wizard }) => {
     }
   }
 
+  const getErrorMsg = formikErrors =>
+    !R.isNil(formikErrors.email) ? formikErrors.email : null
+
   return (
     <>
       <div className={classes.header}>
@@ -223,6 +226,7 @@ const ContactInfo = ({ wizard }) => {
             setEditing(false)
             setError(null)
           }}>
+          {({ errors }) => (
             <Form>
               <PromptWhenDirty />
               <div className={classes.row}>
@@ -261,6 +265,11 @@ const ContactInfo = ({ wizard }) => {
                   onFocus={() => setError(null)}
                 />
               </div>
+              {editing && !!getErrorMsg(errors) && (
+                <ErrorMessage className={classes.formErrorMsg}>
+                  {getErrorMsg(errors)}
+                </ErrorMessage>
+              )}
               <div className={classnames(classes.row, classes.submit)}>
                 {editing && (
                   <>
@@ -270,11 +279,14 @@ const ContactInfo = ({ wizard }) => {
                     <Link color="secondary" type="reset">
                       Cancel
                     </Link>
-                  {error && <ErrorMessage>Failed to save changes</ErrorMessage>}
+                    {error && (
+                      <ErrorMessage>Failed to save changes</ErrorMessage>
+                    )}
                   </>
                 )}
               </div>
             </Form>
+          )}
         </Formik>
       </div>
       {!wizard && (

new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.styles.js

@@ -62,6 +62,9 @@ const global = {
       marginTop: 4,
       marginLeft: 16
     }
+  },
+  formErrorMsg: {
+    margin: [[0, 0, 20, 0]]
   }
 }