Feature/capture feedback

package.json

@@ -21,6 +21,7 @@
         "react-dom": "^18.2.0",
         "react-hot-toast": "^2.4.1",
         "react-jwt": "^1.2.0",
+        "react-modal": "^3.16.1",
         "react-router": "^6.13.0",
         "react-router-dom": "^6.13.0",
         "react-scripts": "5.0.1",

src/components/Dropdown/Dropdown.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import toast, { Toaster } from 'react-hot-toast';
 import { useNavigate } from 'react-router-dom';
 import Box from '@mui/material/Box';
@@ -16,11 +16,12 @@ import HelpIcon from '@mui/icons-material/Help';
 import MessageIcon from '@mui/icons-material/Message';
 import PolicyIcon from '@mui/icons-material/Policy';
 import ManageAccountsIcon from '@mui/icons-material/ManageAccounts';
-import { useEffect } from 'react';
+import { CaptureFeedback } from '../Feedback/CaptureFeedback'; //
 
 export default function Dropdown() {
     const [anchorEl, setAnchorEl] = useState(null);
     const [loggedIn, setLoggedIn] = useState(false); // Change the state name to 'loggedIn'
+    const [feedbackVisible, setFeedbackVisible] = useState(false); // Toggle visibility of feedback modal
     const open = Boolean(anchorEl);
     const navigate = useNavigate();
 
@@ -62,6 +63,12 @@ export default function Dropdown() {
         navigate('/privacy-policy');
     }
 
+    // Toggle CaptureFeedback modal component visibility
+    function toggleFeedbackModal() {
+        setFeedbackVisible((prevFeedbackVisible) => !prevFeedbackVisible);
+        handleClose();
+    }
+
     return (
         <React.Fragment>
             <Box
@@ -88,7 +95,6 @@ export default function Dropdown() {
                 id='account-menu'
                 open={open}
                 onClose={handleClose}
-                onClick={handleClose}
                 PaperProps={{
                     elevation: 0,
                     sx: {
@@ -122,7 +128,7 @@ export default function Dropdown() {
                     <HelpIcon fontSize='large' />
                     &nbsp; Help
                 </MenuItem>
-                <MenuItem>
+                <MenuItem onClick={toggleFeedbackModal}>
                     <MessageIcon fontSize='large' />
                     &nbsp; Feedback
                 </MenuItem>
@@ -162,6 +168,13 @@ export default function Dropdown() {
                 )}
             </Menu>
             <Toaster />
+            {/* Conditionally render CaptureFeedback modal component */}
+            {feedbackVisible && (
+                <CaptureFeedback
+                    isActive={feedbackVisible}
+                    onClose={toggleFeedbackModal}
+                />
+            )}
         </React.Fragment>
     );
 }

src/components/Feedback/CaptureFeedback.jsx

@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+import Modal from 'react-modal';
+import PropTypes from 'prop-types';
+import { Toaster } from 'react-hot-toast';
+import DirectFeedback from './DirectFeedback';
+import EmailFeedback from './EmailFeedback';
+import Typography from '@mui/material/Typography';
+
+Modal.setAppElement('#root');
+
+export function CaptureFeedback({ isActive, onClose }) {
+    const [formToShow, setFormToShow] = useState('initialPrompt');
+    const [rating, setRating] = useState(0);
+
+    const handleFormSwitch = (formType) => {
+        setRating(0);
+        setFormToShow(formType);
+    };
+
+    const onPointerMove = (value) => {
+        if (rating === 0) {
+            setRating(value);
+        }
+    };
+
+    return (
+        <React.Fragment>
+            <Modal
+                isOpen={isActive}
+                onRequestClose={onClose}
+                contentLabel='Feedback Modal'
+                className='feedback-modal'
+                overlayClassName='overlay'
+            >
+                <button className='close-button' onClick={onClose}>
+                    X
+                </button>
+                <div className='modal-form'>
+                    <Typography
+                        variant={'p'}
+                        component='div'
+                        className='feedback-header'
+                        sx={{
+                            flexGrow: 1,
+                            letterSpacing: '0.009em',
+                            marginTop: '1%',
+                            marginBottom: '6%',
+                            fontWeight: 'bold',
+                        }}
+                    >
+                        We appreciate your feedback. <br />
+                        Please let us know how we can improve.
+                    </Typography>
+                    {formToShow === 'initialPrompt' && (
+                        <div className='button-group'>
+                            <button
+                                className='feedback-button'
+                                onClick={() =>
+                                    handleFormSwitch('directFeedback')
+                                }
+                            >
+                                Leave us a message
+                            </button>
+                            <button
+                                className='feedback-button'
+                                onClick={() =>
+                                    handleFormSwitch('emailFeedback')
+                                }
+                            >
+                                Send us an email
+                            </button>
+                        </div>
+                    )}
+                    {formToShow === 'directFeedback' && (
+                        <DirectFeedback
+                            handleFormSwitch={handleFormSwitch}
+                            rating={rating}
+                            onPointerMove={onPointerMove}
+                            setRating={setRating}
+                            onClose={onClose}
+                        />
+                    )}
+                    {formToShow === 'emailFeedback' && (
+                        <EmailFeedback
+                            handleFormSwitch={handleFormSwitch}
+                            rating={rating}
+                            onPointerMove={onPointerMove}
+                            setRating={setRating}
+                            onClose={onClose}
+                        />
+                    )}
+                </div>
+            </Modal>
+            <Toaster />
+        </React.Fragment>
+    );
+}
+
+CaptureFeedback.propTypes = {
+    isActive: PropTypes.bool.isRequired,
+    onClose: PropTypes.func.isRequired,
+};

src/components/Feedback/DirectFeedback.jsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import { Formik, Form, Field } from 'formik';
+import { Rating } from 'react-simple-star-rating';
+import * as Yup from 'yup';
+import axios from 'axios';
+import PropTypes from 'prop-types';
+import toast, { Toaster } from 'react-hot-toast';
+import './Feedback.css';
+
+const feedbackValidationSchema = Yup.object().shape({
+    feedback: Yup.string()
+        .trim()
+        .required('Feedback is required')
+        .max(2000, 'Feedback should not exceed 2000 characters'),
+    rating: Yup.number()
+        .required('Rating is required')
+        .min(0, 'Rating should be at least 0')
+        .max(5, 'Rating should not exceed 5'),
+});
+
+export default function DirectFeedback({
+    handleFormSwitch,
+    rating,
+    onPointerMove,
+    setRating,
+    onClose,
+}) {
+    return (
+        <React.Fragment>
+            <Formik
+                initialValues={{ feedback: '', rating: rating }}
+                validationSchema={feedbackValidationSchema}
+                onSubmit={(values, { setSubmitting }) => {
+                    //Get token and user info
+                    const token = localStorage.getItem('token');
+                    const user = JSON.parse(localStorage.getItem('user'));
+
+                    if (token && user) {
+                        // User logged in and user details are available
+                        const userId = user._id;
+                        axios
+                            .post(
+                                'http://localhost:3001/api/user/feedback/new',
+                                {
+                                    feedback: values.feedback,
+                                    rating: values.rating,
+                                    author: userId,
+                                },
+                                {
+                                    headers: {
+                                        'Content-Type': 'application/json',
+                                        Authorization: `Bearer ${token}`,
+                                    },
+                                }
+                            )
+                            .then((response) => {})
+                            .then(() => {
+                                setSubmitting(false);
+                                onClose();
+                                toast.success(
+                                    'Thank you, your feedback has been submitted!'
+                                );
+                            })
+                            .catch((error) => {
+                                console.error(
+                                    'There was an error submitting the feedback',
+                                    error
+                                );
+                            });
+                    } else {
+                        // User is not logged in or user details are not available
+                        console.error(
+                            'User is not authenticated or user details are missing.'
+                        );
+                    }
+                }}
+            >
+                {({ isSubmitting, setFieldValue }) => (
+                    <Form>
+                        <Field
+                            as='textarea'
+                            name='feedback'
+                            disabled={isSubmitting}
+                            className='feedback-textarea'
+                        />
+                        <div className='rating-container'>
+                            <div className='rating-container'>
+                                <Rating
+                                    disabled={isSubmitting}
+                                    onClick={(value) => {
+                                        setRating(value);
+                                        setFieldValue('rating', value);
+                                    }}
+                                    onPointerMove={onPointerMove}
+                                    initialValue={rating}
+                                />
+                            </div>
+                        </div>
+                        <div className='button-group'>
+                            <button
+                                type='button'
+                                disabled={isSubmitting}
+                                onClick={() =>
+                                    handleFormSwitch('initialPrompt')
+                                }
+                                className='back-button'
+                            >
+                                Back
+                            </button>
+                            <button
+                                type='submit'
+                                disabled={isSubmitting}
+                                className='submit-button'
+                            >
+                                Submit Feedback
+                            </button>
+                        </div>
+                    </Form>
+                )}
+            </Formik>
+            <Toaster />
+        </React.Fragment>
+    );
+}
+
+DirectFeedback.propTypes = {
+    handleFormSwitch: PropTypes.func.isRequired,
+    rating: PropTypes.number.isRequired,
+    onPointerMove: PropTypes.func.isRequired,
+    setRating: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
+};