Add debounce to email input

client/packages/common/src/intl/locales/en/common.json

@@ -1365,6 +1365,7 @@
   "messages.error-generic_one": "{{count}} error",
   "messages.error-generic_other": "{{count}} errors",
   "messages.error-no-file-selected": "No file selected",
+  "messages.error-not-valid-email": "Please enter a valid email address",
   "messages.error-saving-prescription": "Error saving prescription 🥺",
   "messages.error-saving-return": "Error saving return 🥺",
   "messages.error-saving-shipment": "Error saving shipment 🥺",

client/packages/host/src/Help/FeedbackForm.tsx

@@ -20,7 +20,9 @@ export const FeedbackForm = () => {
     saveFeedback,
     draft,
     isValidInput,
-    checkEmailValidity,
+    checkEmailIsValid,
+    debounceValidation,
+    emailError,
   } = useFeedbackForm();
 
   const save = async () => {
@@ -35,7 +37,13 @@ export const FeedbackForm = () => {
     }
   };
 
-  const isValidEmail = checkEmailValidity(draft.replyEmail);
+  const isValidEmail = checkEmailIsValid(draft.replyEmail);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const email = e.target.value;
+    updateDraft({ replyEmail: email });
+    debounceValidation(email);
+  };
 
   return (
     <>
@@ -45,15 +53,10 @@ export const FeedbackForm = () => {
         Input={
           <BasicTextInput
             value={draft.replyEmail}
-            onChange={e => updateDraft({ replyEmail: e.target.value })}
-            // onChange={handleChange}
+            onChange={handleChange}
             fullWidth
-            helperText={
-              !isValidEmail
-                ? 'Please enter a valid email e.g [email protected]'
-                : ''
-            }
-            error={!isValidEmail}
+            helperText={emailError}
+            error={!isValidEmail && draft.replyEmail !== ''}
           />
         }
       />

client/packages/host/src/api/hooks/help/useFeedbackForm.ts

@@ -1,7 +1,13 @@
 import { InsertContactFormInput } from '@common/types';
 import { useState } from 'react';
 import { useFeedbackFormGraphQL } from './useFeedbackFormGraphQL';
-import { FnUtils, isEmpty, useMutation } from '@openmsupply-client/common';
+import {
+  FnUtils,
+  isEmpty,
+  useMutation,
+  useDebounceCallback,
+  useTranslation,
+} from '@openmsupply-client/common';
 
 type ContactFormInput = Pick<InsertContactFormInput, 'replyEmail' | 'body'>;
 
@@ -11,6 +17,8 @@ export function useFeedbackForm() {
     body: '',
   };
   const [draft, setDraft] = useState<ContactFormInput>(defaultDraft);
+  const [emailError, setEmailError] = useState('');
+  const t = useTranslation();
 
   const { mutateAsync: insert } = useInsert();
 
@@ -23,26 +31,33 @@ export function useFeedbackForm() {
     setDraft(defaultDraft);
   };
 
-  const checkEmailValidity = (email: string) => {
+  const checkEmailIsValid = (email: string) => {
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     return emailRegex.test(email);
   };
 
-  // const isNotValidEmail = (email: string) => {
-  //   const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-  //   if (!emailRegex.test(email)) return true;
-  // };
+  const debounceValidation = useDebounceCallback(
+    (email: string) => {
+      if (!checkEmailIsValid(email))
+        return setEmailError(t('messages.error-not-valid-email'));
+      return setEmailError('');
+    },
+    [setEmailError],
+    100
+  );
 
   const isValidInput =
-    !!draft.replyEmail && !!draft.body && checkEmailValidity(draft.replyEmail);
+    !!draft.replyEmail && !!draft.body && checkEmailIsValid(draft.replyEmail);
 
   return {
     updateDraft,
     resetDraft,
     saveFeedback: insert,
     draft,
     isValidInput,
-    checkEmailValidity,
+    checkEmailIsValid,
+    debounceValidation,
+    emailError,
   };
 }