#2697 captcha to feedback from submission

verification/curator-service/api/openapi/openapi.yaml

@@ -1125,14 +1125,14 @@ paths:
         post:
             summary: Sends feedback email to global.health
             tags: [User]
-            operationId: feeback
+            operationId: feedback
             requestBody:
                 description: Email and message of User
                 required: true
                 content:
                     application/json:
                         schema:
-                            description: Message send to global.health sa feedback
+                            description: Message sent to global.health as feedback
                             type: object
                             properties:
                                 message:

verification/curator-service/api/src/index.ts

@@ -411,16 +411,21 @@ async function makeApp() {
             const { message } = req.body;
 
             try {
-                emailClient.send(
+                await emailClient.send(
                     [env.EMAIL_USER_ADDRESS],
                     'Feedback regarding Covid-19 curator portal',
                     message,
                 );
-                res.status(200).send({ message: 'Email sent successfully' });
+                return res
+                    .status(200)
+                    .json({ message: 'Email sent successfully' });
             } catch (err) {
                 const error = err as Error;
                 logger.error(error);
-                return res.sendStatus(500);
+                return res.status(500).json({
+                    message:
+                        'Unfortunately, an error occurred. Please, try again later.',
+                });
             }
         },
     );

verification/curator-service/ui/src/components/FeedbackEmailDialog/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Button from '@material-ui/core/Button';
 import TextField from '@material-ui/core/TextField';
 import Dialog from '@material-ui/core/Dialog';
@@ -8,14 +8,14 @@ import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
-import { useStyles } from './styled';
 import axios from 'axios';
 import { useAppSelector } from '../../hooks/redux';
 import { selectUser } from '../../redux/auth/selectors';
+import { SnackbarAlert } from '../SnackbarAlert/index';
 
 interface FeedbackEmailDialogProps {
     isOpen: boolean;
-    handleClose: () => void;
+    closeFeedbackModal: () => void;
 }
 
 export interface FeedbackFormValues {
@@ -25,13 +25,27 @@ export interface FeedbackFormValues {
 
 const FeedbackEmailDialog = ({
     isOpen,
-    handleClose,
+    closeFeedbackModal,
 }: FeedbackEmailDialogProps): JSX.Element => {
-    const classes = useStyles();
     const user = useAppSelector(selectUser);
 
     const maxSizeMessage = 800;
 
+    const [alertInformationOpen, setAlertInformationOpen] =
+        useState<boolean>(false);
+    const [alertInformationMessage, setAlertInformationMessage] =
+        useState<string>('');
+    const [alertInformationType, setAlertInformationType] = useState<
+        'success' | 'error' | ''
+    >('');
+
+    useEffect(() => {
+        return () => {
+            formik.setErrors({});
+        };
+        // eslint-disable-next-line
+    }, [isOpen]);
+
     const validationFormSchema = Yup.object().shape({
         message: Yup.string()
             .max(maxSizeMessage, 'Message is too long.')
@@ -46,25 +60,40 @@ const FeedbackEmailDialog = ({
         validateOnChange: true,
         onSubmit: async (values) => {
             try {
-                const response = await axios.post('/feedback', {
-                    message: `From: ${user?.email}<br><br>${values.message}`,
-                });
-                console.log(response);
+                await axios
+                    .post('/feedback', {
+                        message: `From: ${user?.email}<br><br>${values.message}`,
+                    })
+                    .then((response) => {
+                        setAlertInformationType('success');
+                        setAlertInformationMessage(response.data.message);
+                        setAlertInformationOpen(true);
+                    });
             } catch (error) {
-                console.error(error);
+                setAlertInformationMessage(
+                    error.response.data.message ||
+                        'Unfortunately, an error occurred. Please, try again later.',
+                );
+                setAlertInformationType('error');
+                setAlertInformationOpen(true);
                 throw error;
             }
 
-            handleClose();
+            closeFeedbackModal();
         },
     });
 
     // -------------------
     // isOpen = true;
     // -------------------
     return (
-        <div>
-            <Dialog open={isOpen} onClose={handleClose} fullWidth maxWidth="md">
+        <>
+            <Dialog
+                open={isOpen}
+                onClose={closeFeedbackModal}
+                fullWidth
+                maxWidth="md"
+            >
                 <DialogTitle>Send Feedback</DialogTitle>
                 <DialogContent>
                     <form onSubmit={formik.handleSubmit}>
@@ -92,13 +121,20 @@ const FeedbackEmailDialog = ({
                             />
                         </DialogContentText>
                         <DialogActions>
-                            <Button onClick={handleClose}>Cancel</Button>
+                            <Button onClick={closeFeedbackModal}>Cancel</Button>
                             <Button type="submit">Send</Button>
                         </DialogActions>
                     </form>
                 </DialogContent>
             </Dialog>
-        </div>
+            <SnackbarAlert
+                isOpen={alertInformationOpen}
+                onClose={() => setAlertInformationOpen(false)}
+                message={alertInformationMessage}
+                type={alertInformationType || 'info'}
+                durationMs={4000}
+            />
+        </>
     );
 };
 

verification/curator-service/ui/src/components/Footer/index.tsx

@@ -18,11 +18,11 @@ const Footer = ({ drawerOpen }: FooterProps): JSX.Element => {
     const classes = useStyles();
     const [feedbackModalOpen, setFeedbackModalOpen] = useState(false);
 
-    const handleClickOpen = () => {
+    const openFeedbackModal = () => {
         setFeedbackModalOpen(true);
     };
 
-    const handleClose = () => {
+    const closeFeedbackModal = () => {
         setFeedbackModalOpen(false);
     };
 
@@ -122,14 +122,14 @@ const Footer = ({ drawerOpen }: FooterProps): JSX.Element => {
                 <Typography
                     display="inline"
                     className={classes.feedbackButton}
-                    onClick={() => handleClickOpen()}
+                    onClick={openFeedbackModal}
                 >
                     Feedback
                 </Typography>
                 <FeedbackEmailDialog
                     isOpen={feedbackModalOpen}
-                    handleClose={handleClose}
-                ></FeedbackEmailDialog>
+                    closeFeedbackModal={closeFeedbackModal}
+                />
             </section>
         </footer>
     );

verification/curator-service/ui/src/components/Footer/styled.ts

@@ -62,8 +62,6 @@ export const useStyles = makeStyles((theme: Theme) => ({
         fontSize: '14px',
         margin: '0 20px',
         color: theme.palette.primary.main,
-        '&:hover': {
-            cursor: 'pointer',
-        },
+        cursor: 'pointer',
     },
 }));

verification/curator-service/ui/src/components/landing-page/LandingPage.test.tsx

@@ -16,6 +16,27 @@ beforeAll(() => server.listen());
 afterEach(() => server.resetHandlers());
 afterAll(() => server.close());
 
+jest.mock('react-google-recaptcha', () => {
+    const React = require('react');
+    const RecaptchaV2 = React.forwardRef((props, ref) => {
+        React.useImperativeHandle(ref, () => ({
+            reset: jest.fn(),
+            execute: jest.fn(),
+            executeAsync: jest.fn(() => 'token'),
+        }));
+        return (
+            <input
+                ref={ref}
+                type="checkbox"
+                data-testid="mock-v2-captcha-element"
+                {...props}
+            />
+        );
+    });
+
+    return RecaptchaV2;
+});
+
 describe('<LandingPage />', () => {
     test('shows all content', async () => {
         render(<LandingPage />);

verification/curator-service/ui/src/components/landing-page/SignInForm.tsx

@@ -97,17 +97,23 @@ export default function SignInForm({
         },
         validationSchema,
         onSubmit: async (values) => {
-            const token =
-                (await recaptchaRef.current?.executeAsync()) as string;
-            recaptchaRef.current?.reset();
+            if (!recaptchaRef.current) return;
 
-            dispatch(
-                signInWithEmailAndPassword({
-                    email: values.email,
-                    password: values.password,
-                    token,
-                }),
-            );
+            // eslint-disable-next-line no-useless-catch
+            try {
+                const token =
+                    (await recaptchaRef.current.executeAsync()) as string;
+                recaptchaRef.current.reset();
+                dispatch(
+                    signInWithEmailAndPassword({
+                        email: values.email,
+                        password: values.password,
+                        token,
+                    }),
+                );
+            } catch (error) {
+                throw error;
+            }
         },
     });
 

verification/curator-service/ui/src/components/landing-page/SignUpForm.tsx

@@ -3,7 +3,6 @@ import { useFormik } from 'formik';
 import * as Yup from 'yup';
 import { useAppDispatch } from '../../hooks/redux';
 import { signUpWithEmailAndPassword } from '../../redux/auth/thunk';
-
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import FormHelperText from '@material-ui/core/FormHelperText';
@@ -154,20 +153,25 @@ export default function SignUpForm({
         },
         validationSchema,
         onSubmit: async (values) => {
+            if (!recaptchaRef.current) return;
             const { email, password, isNewsletterChecked } = values;
+            // eslint-disable-next-line no-useless-catch
+            try {
+                const token =
+                    (await recaptchaRef.current.executeAsync()) as string;
+                recaptchaRef.current.reset();
 
-            const token =
-                (await recaptchaRef.current?.executeAsync()) as string;
-            recaptchaRef.current?.reset();
-
-            dispatch(
-                signUpWithEmailAndPassword({
-                    email,
-                    password,
-                    newsletterAccepted: isNewsletterChecked,
-                    token,
-                }),
-            );
+                dispatch(
+                    signUpWithEmailAndPassword({
+                        email,
+                        password,
+                        newsletterAccepted: isNewsletterChecked,
+                        token,
+                    }),
+                );
+            } catch (error) {
+                throw error;
+            }
         },
     });