add evaluation of email in Send Feedback

src/components/primitives/BasicModal.tsx

@@ -8,6 +8,7 @@ export interface BasicModalProps {
   setOpen: (value: boolean) => void;
   withCloseButton?: boolean;
   contentMaxWidth?: number;
+  closeCallback?: () => void;
   disableEnforceFocus?: boolean;
 }
 
@@ -17,10 +18,14 @@ export const BasicModal = ({
   withCloseButton = true,
   contentMaxWidth = 420,
   children,
+  closeCallback,
   disableEnforceFocus,
   ...props
 }: BasicModalProps) => {
-  const handleClose = () => setOpen(false);
+  const handleClose = () => {
+    if (closeCallback) closeCallback();
+    setOpen(false);
+  };
 
   return (
     <Modal

src/layouts/FeedbackDialog.tsx

@@ -18,17 +18,41 @@ export const FeedbackModal = () => {
   const [success, setSuccess] = useState(false);
   const [error, setError] = useState(false);
   const [email, setEmail] = useState('');
+  const [emailError, setEmailError] = useState('');
+  const [dirtyEmailField, setDirtyEmailField] = useState(false);
+
+  const onBlur = () => {
+    if (!dirtyEmailField) setDirtyEmailField(true);
+  };
 
   useEffect(() => {
     if (feedbackDialogOpen) {
       setSuccess(false);
       setError(false);
+      setEmailError('');
     }
   }, [feedbackDialogOpen]);
 
+  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const emailValue = e.target.value;
+    setEmail(emailValue);
+
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(emailValue)) {
+      setEmailError('Please enter a valid email address');
+    } else {
+      setEmailError('');
+    }
+  };
+
   const handleFeedbackSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
+    if (emailError || !email) {
+      setEmailError('Please enter a valid email address');
+      return;
+    }
+
     setIsLoading(true);
 
     const url = process.env.NEXT_PUBLIC_API_BASEURL + '/feedback';
@@ -53,11 +77,18 @@ export const FeedbackModal = () => {
     } finally {
       setIsLoading(false);
       setValue('');
+      setEmail('');
     }
   };
 
+  const onClose = () => {
+    setEmailError('');
+    setValue('');
+    setDirtyEmailField(false);
+  };
+
   return (
-    <BasicModal open={feedbackDialogOpen} setOpen={setFeedbackOpen}>
+    <BasicModal open={feedbackDialogOpen} setOpen={setFeedbackOpen} closeCallback={onClose}>
       <Box
         sx={{
           display: 'flex',
@@ -147,9 +178,12 @@ export const FeedbackModal = () => {
 
                 <TextField
                   // label="Email"
+                  onBlur={onBlur}
                   fullWidth
                   value={email}
-                  onChange={(e) => setEmail(e.target.value)}
+                  onChange={handleEmailChange}
+                  error={dirtyEmailField && !!emailError}
+                  helperText={dirtyEmailField ? emailError : undefined}
                   sx={{ mb: 2 }}
                 />
                 <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
@@ -175,7 +209,7 @@ export const FeedbackModal = () => {
                   }}
                 />
                 <Box display="flex" flexDirection={'row-reverse'} mt={3}>
-                  <Button disabled={!value} variant="contained" type="submit">
+                  <Button disabled={!value || !!emailError} variant="contained" type="submit">
                     <Trans>Send Feedback</Trans>
                   </Button>
                 </Box>