Merge pull request #312 from COSC-499-W2023/feeback-form

Feedback form

app/client/package.json

@@ -8,6 +8,7 @@
   },
   "private": true,
   "dependencies": {
+    "@emailjs/browser": "^4.3.3",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.14",
@@ -24,16 +25,8 @@
     "react-dom": "^18.2.0",
     "react-easy-crop": "^5.0.5",
     "react-icons": "^4.11.0",
-
     "react-image-crop": "^11.0.5",
-
     "react-modal": "^3.16.1",
-
-    "react-image-crop": "^11.0.5",
-
-    "react-modal": "^3.16.1",
-
-
     "react-player": "^2.14.1",
     "react-router-dom": "^6.17.0",
     "react-scripts": "5.0.1",

app/client/src/App.jsx

@@ -22,6 +22,7 @@ import "./app.scss";
 import {useAuth} from "./context/authContext";
 import ViewVideo from "./pages/ViewVideo/ViewVideo";
 import ChangeName from "./pages/ChangeUserInfo/ChangeName";
+import { ContactUs } from "./pages/ContactUs/ContactUs";
 import ChangePassword from "./pages/ChangeUserInfo/ChangePassword";
 
 
@@ -117,6 +118,10 @@ const Layout = () =>{
           path:"/login",
           element:<Login/>
         },
+        {
+          path:"/contactUs",
+          element:<ContactUs/>
+        },
         {
           path:"*",
           element:<DoesNotExist />

app/client/src/pages/ContactUs/ContactUs.jsx

@@ -0,0 +1,86 @@
+import React, { useRef } from 'react';
+import "./ContactUs.scss";
+import emailjs from '@emailjs/browser';
+
+export const ContactUs = () => {
+  const form = useRef();
+
+  const sendEmail = (e) => {
+    e.preventDefault();
+
+    var Name = document.getElementById('name');
+    var email = document.getElementById('email');
+    var msg = document.getElementById('msg');
+    const success = document.getElementById('success');
+    const danger = document.getElementById('danger');
+
+
+    if(Name.value === '' || email.value === '' || msg.value === ''){
+        danger.style.display = 'block';
+    }
+    else{
+        setTimeout(() => {
+            Name.value = '';
+            email.value = '';
+            msg.value = '';
+        }, 2000);
+        emailjs
+      .sendForm('service_7d1h1b7', 'template_ghyn6vm', form.current, {
+        publicKey: 'wTpL4bKtsHmQMpnVa',
+      })
+      .then(
+        () => {
+          //console.log('SUCCESS!');
+        },
+        (error) => {
+          //console.log('FAILED...', error.text);
+        },
+      );
+        success.style.display = 'block';
+
+    }
+
+
+    setTimeout(() => {
+        danger.style.display = 'none';
+        success.style.display = 'none';
+    }, 4000);
+
+
+  };
+
+  return (
+    <div className='contactUsContainer'>
+
+        <form ref={form} onSubmit={sendEmail} className='contactUsForm'>
+        <h2 className='formHeader'>Feedback Form</h2>
+        <div className='formField'>
+            <label>Name</label>
+            <input data-testid="name" id='name' type="text" name="from_name" />
+        </div>
+
+      <div className='formField'>
+        <label>Email</label>
+        <input id='email' data-testid="email" type="email" name="from_email" />
+      </div>
+
+      <div className='formField'>
+        <label>Message</label>
+        <textarea id='msg' data-testid="msg" name="message" />
+      </div>
+
+      <div className='sendButtonContainer'>
+        <input className='sendButton' type="submit" value="Send" />
+      </div>
+
+      <div className='message'>
+            <div className='success' id='success'>Your message has been successfully sent! Our developers will reach out to you soon.</div>
+            <div className='danger' id='danger'>Fields Cant be Empty!</div>
+      </div>
+
+    </form>
+
+    </div>
+
+  );
+};

app/client/src/pages/ContactUs/ContactUs.scss

@@ -0,0 +1,80 @@
+.contactUsContainer{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 45vh;
+    color: var(--body_color);
+    background-color: var(--body_background);
+    padding: 10%;
+
+    .contactUsForm{
+        .formHeader{
+            text-align: center;
+        }
+        .formField{
+            margin: 40px;
+
+            label{
+                align-items: left;
+                margin-right: 30px;
+                display: inline-block;
+                width: 50px;
+            }
+            input,textarea {
+                align-items: right;
+                width: 300px;
+                height: 30px;
+            }
+        }
+
+     .message{
+        width: 100%;
+        position: relative;
+
+        margin: 40px;
+        display: flex;
+        justify-content: center;
+        text-align: center;
+
+        .success{
+            font-size: 20px;
+            color: green;
+            position: absolute;
+            animation: button .3s linear;
+            display: none;
+
+        }
+        .danger{
+            font-size: 20px;
+            color: red;
+            position: absolute;
+            animation: button .3s linear;
+            display: none;
+        }
+     }  
+
+}
+
+}
+
+
+
+.sendButtonContainer{ 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .sendButton{
+        background-color: teal;
+        border: none;
+        cursor: pointer;
+        width: 170px;
+        height: 45px;
+        line-height: 45px;
+        border-radius: 7px;
+        font-weight: 400;
+        box-shadow: 0 4px 14px 0 rgba(0, 118, 255, 0.39);
+        transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
+
+
+    }
+}

app/client/src/pages/ContactUs/Feedback.test.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import {render,screen, fireEvent} from "@testing-library/react";
+import '@testing-library/jest-dom/extend-expect';
+import { ContactUs } from './ContactUs';
+
+describe('ContactUs component', () => {
+  test('renders form fields and submit button', () => {
+    const { getByText } = render(<ContactUs />);
+    const nameInput = screen.getByTestId(/name/i)
+    const emailInput = screen.getByTestId(/email/i)
+    const messageInput = screen.getByTestId(/msg/i)
+    const sendButton = getByText('Send');
+
+    expect(nameInput).toBeInTheDocument();
+    expect(emailInput).toBeInTheDocument();
+    expect(messageInput).toBeInTheDocument();
+    expect(sendButton).toBeInTheDocument();
+  });
+
+  test('displays error message if form fields are empty on submit', () => {
+    const { getByText } = render(<ContactUs />);
+    const sendButton = getByText('Send');
+
+    fireEvent.click(sendButton);
+
+    const errorMessage = getByText('Fields Cant be Empty!');
+    expect(errorMessage).toBeInTheDocument();
+  });
+
+  test('displays success message if form is submitted with valid data', () => {
+    const {  getByText } = render(<ContactUs />);
+    const nameInput = screen.getByTestId(/name/i)
+    const emailInput =screen.getByTestId(/email/i)
+    const messageInput = screen.getByTestId(/msg/i)
+    const sendButton = getByText('Send');
+
+    fireEvent.change(nameInput, { target: { value: 'John Doe' } });
+    fireEvent.change(emailInput, { target: { value: '[email protected]' } });
+    fireEvent.change(messageInput, { target: { value: 'Test message' } });
+    fireEvent.click(sendButton);
+
+    const successMessage = getByText('Your message has been successfully sent! Our developers will reach out to you soon.');
+    expect(successMessage).toBeInTheDocument();
+  });
+});

app/client/src/pages/Profile/Profile.jsx

@@ -87,6 +87,7 @@ const Profile = () => {
                   <Link to="/changename">Change Name</Link>
                   <a href="#">Change Background photo</a>
                   <Link to="/changepassword">Change Password</Link>
+                  <Link to="/contactUs">Give Feedback</Link>
                 </div>
             </div>
           }