Feat/add a help feature

package.json

@@ -11,6 +11,7 @@
         "@testing-library/react": "^14.0.0",
         "@testing-library/user-event": "^14.4.3",
         "axios": "^1.4.0",
+        "formik": "^2.4.3",
         "isbn-validate": "^1.0.3",
         "lodash": "^4.17.21",
         "material-ui-popup-state": "^5.0.9",
@@ -25,7 +26,8 @@
         "react-scripts": "5.0.1",
         "react-simple-star-rating": "^5.1.7",
         "styled-components": "^5.3.11",
-        "web-vitals": "^3.3.2"
+        "web-vitals": "^3.3.2",
+        "yup": "^1.2.0"
     },
     "scripts": {
         "start": "react-scripts start",

src/App.js

@@ -8,14 +8,15 @@ import Register from './components/Register/Register';
 import UserAuthenticated from './ProtectedRoute';
 import ForgotPassword from './pages/ForgotPassword/ForgotPassword';
 import ResetPassword from './pages/ResetPassword/ResetPassword';
+import Support from './pages/Support/Support';
 import PrivacyPolicy from './pages/PrivacyPolicy/PrivacyPolicy';
-
 export default function App() {
     return (
         <Router>
             <Routes>
                 <Route element={<UserAuthenticated />}>
                     <Route path='/' element={<Home />} />
+                    <Route path='/support' element={<Support />} />
                     <Route path='/profile' element={<Profile />} />
                     <Route path='/privacy-policy' element={<PrivacyPolicy />} />
                 </Route>

src/components/Dropdown/Dropdown.js

@@ -118,7 +118,7 @@ export default function Dropdown() {
                 transformOrigin={{ horizontal: 'right', vertical: 'top' }}
                 anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
             >
-                <MenuItem>
+                <MenuItem onClick={() => navigate('/support')}>
                     <HelpIcon fontSize='large' />
                     &nbsp; Help
                 </MenuItem>

src/components/FormikContainer/SupportForm/SupportForm.js

@@ -0,0 +1,186 @@
+import { Box, Button, Grid, IconButton, Paper, TextField } from '@mui/material';
+import axios from 'axios';
+import { Formik, Field, Form, ErrorMessage } from 'formik';
+import * as Yup from 'yup';
+import CircularProgress from '@mui/material/CircularProgress';
+import Snackbar from '@mui/material/Snackbar';
+import CloseIcon from '@mui/icons-material/Close';
+import React, { useState } from 'react';
+const SupportForm = () => {
+    const [loading, setLoading] = useState(false);
+    const [showSnackBar, setShowSnackBar] = useState(false);
+    const [showError, setShowError] = useState(false);
+    const [supportError, setSupportError] = useState('');
+    const initialValue = {
+        name: '',
+        email: '',
+        description: '',
+    };
+    const validationSchema = Yup.object({
+        name: Yup.string().required('Required'),
+        email: Yup.string().email('E-mail is not valid').required('Required'),
+        description: Yup.string().required('Required!'),
+    });
+    const handleSubmit = async (values, onSubmitProps) => {
+        const { name, email, description } = values;
+        try {
+            setLoading(true);
+            const response = await axios.post(
+                'http://localhost:3001/api/support/newsupport',
+                {
+                    name,
+                    email,
+                    description,
+                }
+            );
+            if (response.status === 200) {
+                setShowSnackBar(true);
+                onSubmitProps.resetForm();
+            }
+        } catch (err) {
+            const errorMsg = err.response.data.message;
+            setSupportError(errorMsg);
+            setShowError(true);
+        }
+        setLoading(false);
+    };
+    const closeSnackBar = () => {
+        setShowSnackBar(false);
+        setShowError(false);
+    };
+    const action = (
+        <React.Fragment>
+            <IconButton
+                size='small'
+                aria-label='close'
+                color='inherit'
+                onClick={closeSnackBar}
+                autoHideDuration={4000}
+            >
+                <CloseIcon fontSize='small' />
+            </IconButton>
+        </React.Fragment>
+    );
+
+    return (
+        <>
+            <Snackbar
+                action={action}
+                open={showSnackBar}
+                autoHideDuration={3000}
+                onClose={closeSnackBar}
+                message='Support Query Successfully Submitted'
+            />
+            <Snackbar
+                action={action}
+                open={showError}
+                autoHideDuration={3000}
+                onClose={closeSnackBar}
+                message={supportError}
+            />
+            <Grid container>
+                <Grid item sm={3} xs={false}></Grid>
+                <Grid item sm={6} xs={12}>
+                    <Paper>
+                        <Box m={5} p={3}>
+                            <Formik
+                                initialValues={initialValue}
+                                validationSchema={validationSchema}
+                                onSubmit={handleSubmit}
+                            >
+                                {({
+                                    values,
+                                    handleChange,
+                                    handleBlur,
+                                    touched,
+                                    errors,
+                                }) => {
+                                    const { name, email } = values;
+                                    return (
+                                        <Form>
+                                            <TextField
+                                                label='Name'
+                                                name='name'
+                                                fullWidth
+                                                variant='outlined'
+                                                margin='dense'
+                                                value={name}
+                                                onChange={handleChange}
+                                                onBlur={handleBlur}
+                                                helperText={
+                                                    <ErrorMessage name='name' />
+                                                }
+                                                error={
+                                                    errors.name && touched.name
+                                                }
+                                                required
+                                            />
+                                            <TextField
+                                                label='E-mail'
+                                                name='email'
+                                                fullWidth
+                                                variant='outlined'
+                                                margin='dense'
+                                                value={email}
+                                                onChange={handleChange}
+                                                onBlur={handleBlur}
+                                                helperText={
+                                                    <ErrorMessage name='email' />
+                                                }
+                                                error={
+                                                    errors.email &&
+                                                    touched.email
+                                                }
+                                                required
+                                            />
+                                            <Field
+                                                as={TextField}
+                                                label='How can we help?'
+                                                type='text'
+                                                name='description'
+                                                fullWidth
+                                                multiline
+                                                margin='dense'
+                                                variant='outlined'
+                                                InputProps={{
+                                                    inputComponent: 'textarea',
+                                                    rows: 10,
+                                                }}
+                                                helperText={
+                                                    <ErrorMessage name='description' />
+                                                }
+                                                error={
+                                                    errors.description &&
+                                                    touched.description
+                                                }
+                                            />
+                                            <Button
+                                                variant='contained'
+                                                type='submit'
+                                                color='primary'
+                                                fullWidth
+                                                disabled={loading}
+                                            >
+                                                {loading && (
+                                                    <CircularProgress
+                                                        size={15}
+                                                        sx={{ mr: '10px' }}
+                                                        color='inherit'
+                                                    />
+                                                )}
+                                                Submit
+                                            </Button>
+                                        </Form>
+                                    );
+                                }}
+                            </Formik>
+                        </Box>
+                    </Paper>
+                </Grid>
+                <Grid item sm={3} xs={false}></Grid>
+            </Grid>
+        </>
+    );
+};
+
+export default SupportForm;