Show error if email not valid

TODO add error translation + add delay
msupply-foundation · Dec 13, 2024 · b39e3eb · b39e3eb
1 parent 405f86d
commit b39e3eb
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 5 deletions.
diff --git a/client/packages/host/src/Help/FeedbackForm.tsx b/client/packages/host/src/Help/FeedbackForm.tsx
@@ -14,8 +14,14 @@ import { useFeedbackForm } from '../api/hooks/help/useFeedbackForm';
 export const FeedbackForm = () => {
   const t = useTranslation();
   const { success, error } = useNotification();
-  const { updateDraft, resetDraft, saveFeedback, draft, isValidInput } =
-    useFeedbackForm();
+  const {
+    updateDraft,
+    resetDraft,
+    saveFeedback,
+    draft,
+    isValidInput,
+    checkEmailValidity,
+  } = useFeedbackForm();
 
   const save = async () => {
     try {
@@ -29,6 +35,8 @@ export const FeedbackForm = () => {
     }
   };
 
+  const isValidEmail = checkEmailValidity(draft.replyEmail);
+
   return (
     <>
       <InputWithLabelRow
@@ -38,7 +46,14 @@ export const FeedbackForm = () => {
           <BasicTextInput
             value={draft.replyEmail}
             onChange={e => updateDraft({ replyEmail: e.target.value })}
+            // onChange={handleChange}
             fullWidth
+            helperText={
+              !isValidEmail
+                ? 'Please enter a valid email e.g [email protected]'
+                : ''
+            }
+            error={!isValidEmail}
           />
         }
       />

diff --git a/client/packages/host/src/api/hooks/help/useFeedbackForm.ts b/client/packages/host/src/api/hooks/help/useFeedbackForm.ts
@@ -23,19 +23,26 @@ export function useFeedbackForm() {
     setDraft(defaultDraft);
   };
 
-  const isValidEmail = () => {
+  const checkEmailValidity = (email: string) => {
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    return emailRegex.test(draft.replyEmail);
+    return emailRegex.test(email);
   };
 
-  const isValidInput = !!draft.replyEmail && !!draft.body && isValidEmail();
+  // const isNotValidEmail = (email: string) => {
+  //   const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  //   if (!emailRegex.test(email)) return true;
+  // };
+
+  const isValidInput =
+    !!draft.replyEmail && !!draft.body && checkEmailValidity(draft.replyEmail);
 
   return {
     updateDraft,
     resetDraft,
     saveFeedback: insert,
     draft,
     isValidInput,
+    checkEmailValidity,
   };
 }