From c5b64e143cbfd13ba310fbd2941f4c94ced4645a Mon Sep 17 00:00:00 2001 From: yemoski Date: Wed, 3 Apr 2024 01:46:30 -0700 Subject: [PATCH] feedback form --- app/client/package-lock.json | 20 +- app/client/package.json | 9 +- app/client/src/App.jsx | 5 + app/client/src/pages/ContactUs/ContactUs.jsx | 86 + app/client/src/pages/ContactUs/ContactUs.scss | 80 + .../src/pages/ContactUs/Feedback.test.js | 45 + app/client/src/pages/Profile/Profile.jsx | 1 + app/client/yarn.lock | 17699 +++++++--------- 8 files changed, 8367 insertions(+), 9578 deletions(-) create mode 100644 app/client/src/pages/ContactUs/ContactUs.jsx create mode 100644 app/client/src/pages/ContactUs/ContactUs.scss create mode 100644 app/client/src/pages/ContactUs/Feedback.test.js diff --git a/app/client/package-lock.json b/app/client/package-lock.json index 563728b3..1b6ecaff 100644 --- a/app/client/package-lock.json +++ b/app/client/package-lock.json @@ -8,6 +8,7 @@ "name": "client", "version": "0.1.0", "dependencies": { + "@emailjs/browser": "^4.3.3", "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.14.14", @@ -24,19 +25,8 @@ "react-dom": "^18.2.0", "react-easy-crop": "^5.0.5", "react-icons": "^4.11.0", -<<<<<<< HEAD -<<<<<<< HEAD "react-image-crop": "^11.0.5", -======= "react-modal": "^3.16.1", ->>>>>>> cc8a9dd605522ec0a7377d687f92fd0666c1d996 -======= - - "react-image-crop": "^11.0.5", - - "react-modal": "^3.16.1", - ->>>>>>> 2cc080134488e5fcd4bf6aa2a7662abd5e3b3875 "react-player": "^2.14.1", "react-router-dom": "^6.17.0", "react-scripts": "5.0.1", @@ -2607,6 +2597,14 @@ "ms": "^2.1.1" } }, + "node_modules/@emailjs/browser": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@emailjs/browser/-/browser-4.3.3.tgz", + "integrity": "sha512-ltpt2S/WVREIBXptxYAVYBvXb2O6yTUYiRUWF8OLikMxlmiGsIgKpgHppikNd4Df0uAav7jCsQKcOJ3TJFUx5g==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@emotion/babel-plugin": { "version": "11.11.0", "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz", diff --git a/app/client/package.json b/app/client/package.json index 6100a28e..e5d29a4e 100644 --- a/app/client/package.json +++ b/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", diff --git a/app/client/src/App.jsx b/app/client/src/App.jsx index 198c0732..daa65452 100644 --- a/app/client/src/App.jsx +++ b/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: }, + { + path:"/contactUs", + element: + }, { path:"*", element: diff --git a/app/client/src/pages/ContactUs/ContactUs.jsx b/app/client/src/pages/ContactUs/ContactUs.jsx new file mode 100644 index 00000000..162834dc --- /dev/null +++ b/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 ( +
+ +
+

Feedback Form

+
+ + +
+ +
+ + +
+ +
+ +