From 30cd82611f505479cb173abe62b32013bc3e80ab Mon Sep 17 00:00:00 2001
From: Alex Gomez <alex@aave.com>
Date: Fri, 12 Jul 2024 18:04:26 +0200
Subject: [PATCH 1/2] add evaluation of email in Send Feedback

---
 src/layouts/FeedbackDialog.tsx | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/layouts/FeedbackDialog.tsx b/src/layouts/FeedbackDialog.tsx
index b4329a445b..9e3c592ca2 100644
--- a/src/layouts/FeedbackDialog.tsx
+++ b/src/layouts/FeedbackDialog.tsx
@@ -18,17 +18,36 @@ export const FeedbackModal = () => {
   const [success, setSuccess] = useState(false);
   const [error, setError] = useState(false);
   const [email, setEmail] = useState('');
+  const [emailError, setEmailError] = useState('');
 
   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,6 +72,7 @@ export const FeedbackModal = () => {
     } finally {
       setIsLoading(false);
       setValue('');
+      setEmail('');
     }
   };
 
@@ -149,7 +169,9 @@ export const FeedbackModal = () => {
                   // label="Email"
                   fullWidth
                   value={email}
-                  onChange={(e) => setEmail(e.target.value)}
+                  onChange={handleEmailChange}
+                  error={!!emailError}
+                  helperText={emailError}
                   sx={{ mb: 2 }}
                 />
                 <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
@@ -175,7 +197,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>
@@ -186,4 +208,4 @@ export const FeedbackModal = () => {
       </Box>
     </BasicModal>
   );
-};
+};
\ No newline at end of file

From 522570449c7fb7ac174330cee445c586ad38e863 Mon Sep 17 00:00:00 2001
From: Joaquin Battilana <battilanajn@gmail.com>
Date: Wed, 31 Jul 2024 22:27:59 +0100
Subject: [PATCH 2/2] feat: added modal cleanup + check dirty field

---
 src/components/primitives/BasicModal.tsx |  7 ++++++-
 src/layouts/FeedbackDialog.tsx           | 20 ++++++++++++++++----
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/primitives/BasicModal.tsx b/src/components/primitives/BasicModal.tsx
index 83bdbf7559..41a6aa10d5 100644
--- a/src/components/primitives/BasicModal.tsx
+++ b/src/components/primitives/BasicModal.tsx
@@ -8,6 +8,7 @@ export interface BasicModalProps {
   setOpen: (value: boolean) => void;
   withCloseButton?: boolean;
   contentMaxWidth?: number;
+  closeCallback?: () => void;
 }
 
 export const BasicModal = ({
@@ -16,9 +17,13 @@ export const BasicModal = ({
   withCloseButton = true,
   contentMaxWidth = 420,
   children,
+  closeCallback,
   ...props
 }: BasicModalProps) => {
-  const handleClose = () => setOpen(false);
+  const handleClose = () => {
+    if (closeCallback) closeCallback();
+    setOpen(false);
+  };
 
   return (
     <Modal
diff --git a/src/layouts/FeedbackDialog.tsx b/src/layouts/FeedbackDialog.tsx
index 9e3c592ca2..cf47f884dd 100644
--- a/src/layouts/FeedbackDialog.tsx
+++ b/src/layouts/FeedbackDialog.tsx
@@ -19,6 +19,11 @@ export const FeedbackModal = () => {
   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) {
@@ -76,8 +81,14 @@ export const FeedbackModal = () => {
     }
   };
 
+  const onClose = () => {
+    setEmailError('');
+    setValue('');
+    setDirtyEmailField(false);
+  };
+
   return (
-    <BasicModal open={feedbackDialogOpen} setOpen={setFeedbackOpen}>
+    <BasicModal open={feedbackDialogOpen} setOpen={setFeedbackOpen} closeCallback={onClose}>
       <Box
         sx={{
           display: 'flex',
@@ -167,11 +178,12 @@ export const FeedbackModal = () => {
 
                 <TextField
                   // label="Email"
+                  onBlur={onBlur}
                   fullWidth
                   value={email}
                   onChange={handleEmailChange}
-                  error={!!emailError}
-                  helperText={emailError}
+                  error={dirtyEmailField && !!emailError}
+                  helperText={dirtyEmailField ? emailError : undefined}
                   sx={{ mb: 2 }}
                 />
                 <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
@@ -208,4 +220,4 @@ export const FeedbackModal = () => {
       </Box>
     </BasicModal>
   );
-};
\ No newline at end of file
+};