From cba3e1f39c59a69b56626f09bd93ab7f0b213919 Mon Sep 17 00:00:00 2001
From: Gurdarshan-Singh <gurdarshan408@gmail.com>
Date: Fri, 23 Aug 2024 14:44:29 -0400
Subject: [PATCH 1/2] feature/894:Empty commit

---
 src/App.jsx |  2 +-
 yarn.lock   | 20 ++++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/App.jsx b/src/App.jsx
index 562bc57..f779f3a 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -53,7 +53,7 @@ class App extends Component {
       preNav: null,
       preCat: null,
       preTime: null,
-    }; // = getUserInfo();
+    };
     let DataToDisplay = new Data(this.props.appLanguage);
     var app_language = this.props.appLanguage;
 
diff --git a/yarn.lock b/yarn.lock
index fdbdc01..fb0f81f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4307,6 +4307,13 @@ binary@~0.3.0:
     buffers "~0.1.1"
     chainsaw "~0.1.0"
 
+bindings@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz"
+  integrity sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==
+  dependencies:
+    file-uri-to-path "1.0.0"
+
 bl@^4.0.3:
   version "4.1.0"
   resolved "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz"
@@ -8191,6 +8198,14 @@ fs.realpath@^1.0.0:
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
+fsevents@^1.2.7:
+  version "1.2.13"
+  resolved "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz"
+  integrity sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==
+  dependencies:
+    bindings "^1.5.0"
+    nan "^2.12.1"
+
 fstream@^1.0.12:
   version "1.0.12"
   resolved "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz"
@@ -11874,6 +11889,11 @@ mute-stream@0.0.7:
   resolved "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz"
   integrity sha512-r65nCZhrbXXb6dXOACihYApHw2Q6pV0M3V0PSxd74N0+D8nzAdEAITq2oAjA1jVnKI+tGvEBUpqiMh0+rW6zDQ==
 
+nan@^2.12.1:
+  version "2.19.0"
+  resolved "https://registry.npmjs.org/nan/-/nan-2.19.0.tgz"
+  integrity sha512-nO1xXxfh/RWNxfd/XPfbIfFk5vgLsAxUR9y5O0cHMJu/AW9U95JLXqthYHjEp+8gQ5p96K9jUp8nbVOxCdRbtw==
+
 nanoid@^3.3.7:
   version "3.3.7"
   resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz"

From 4ebaa85d19e05309d1acb8afbf57900eedd80ee8 Mon Sep 17 00:00:00 2001
From: Gurdarshan-Singh <gurdarshan408@gmail.com>
Date: Fri, 23 Aug 2024 22:03:25 -0400
Subject: [PATCH 2/2] Feature Completed

---
 src/App.jsx              |   5 +-
 src/Feedback/feedback.js | 217 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 220 insertions(+), 2 deletions(-)
 create mode 100644 src/Feedback/feedback.js

diff --git a/src/App.jsx b/src/App.jsx
index f779f3a..f191d70 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -30,6 +30,7 @@ import { englishForm, frenchForm } from "./constants.js";
 import FeedbackDialogEn from "./components/feedback-components/FeedbackDialogEn.js";
 import FeedbackDialogFr from "./components/feedback-components/FeedbackDialogFr";
 import DialogBox from "./components/DialogBox.js";
+import Feedback from "./Feedback/feedback.js";
 
 class App extends Component {
   static propTypes = {
@@ -1355,7 +1356,7 @@ class App extends Component {
               {this.state.lang.feedback}
             </p>
           </div>
-
+              
           <DialogBox
             open={this.state.feedbackDialog}
             setOpen={this.handleFeedBackToggle}
@@ -1370,7 +1371,7 @@ class App extends Component {
               )
             }
           />
-
+          <Feedback />
           <div>
             {this.state.configurationIsOpen && (
               <MyBody
diff --git a/src/Feedback/feedback.js b/src/Feedback/feedback.js
new file mode 100644
index 0000000..91cc360
--- /dev/null
+++ b/src/Feedback/feedback.js
@@ -0,0 +1,217 @@
+import React, { useState } from "react";
+import {
+  Modal,
+  Box,
+  Button,
+  Typography,
+  TextField,
+  Rating,
+} from "@mui/material";
+// import CloseIcon from "@mui/icons-material/Close";
+import logo from "../assets/Logos/logo_21-02-02.png";
+
+const style = {
+  position: "absolute",
+  top: "10%",
+  left: "50%",
+  right: "10%",
+  transform: "translate(-50%, 0%)",
+  maxWidth: "600px", // Sets the maximum width
+  minWidth: "350px", // Sets the minimum width
+  height: "100%",
+  bgcolor: "background.paper",
+  borderRadius: "16px",
+  boxShadow: 24,
+  p: 4,
+  overflowY: "auto",
+  maxHeight: "90vh",
+};
+
+const Feedback = () => {
+  const [open, setOpen] = useState(false);
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    rating: 0,
+  });
+
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
+  const handleRatingChange = (event, newValue) => {
+    setFormData({ ...formData, rating: newValue });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log(formData);
+    handleClose();
+  };
+
+  return (
+    <div>
+      <Button
+        sx={{
+          position: "fixed",
+          right: "0",
+          top: "50%",
+          transform: "translateY(-50%) rotate(270deg)",
+          transformOrigin: "right center",
+          zIndex: 1000,
+          fontSize: "1.5rem",
+          bgcolor: "#2596be",
+          color: "white",
+          borderRadius: "16px",
+          marginRight:'10px',
+          '&:hover': {
+            bgcolor: "#2596be",  // Maintain the same background color on hover
+            color: "white",      // Maintain the same text color on hover
+          }
+        }}
+        onClick={handleOpen}
+      >
+        <strong>Feedback</strong>
+      </Button>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        <Box sx={style}>
+          <Button
+            sx={{
+              position: "absolute",
+              right: 0,
+              top: 8,
+            }}
+            onClick={handleClose}
+          >
+            {/* <CloseIcon sx={{color:"#2596be", bgcolor:"#d7df21", borderRadius:"16px"}}/> */}
+            <span
+              style={{
+                backgroundColor: "#d7df21",
+                borderRadius: "16px",
+                width: "30px",
+                height: "30px",
+                fontSize: "16px",
+                fontWeight: "bold",
+                border:'2px solid #2596be'
+              }}
+            >
+              X
+            </span>
+          </Button>
+          <Box sx={{ textAlign: "center", marginBottom: "16px" }}>
+            <img src={logo} alt="Logo" width="100px" />
+          </Box>
+          <Typography
+            id="modal-modal-title"
+            variant="h5"
+            component="h2"
+            sx={{
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              fontSize: "2rem",
+              marginBottom: "20px",
+              color: "#2596be",
+            }}
+          >
+            <strong>Help us improve!</strong>
+          </Typography>
+          <Typography
+            variant="h5"
+            component="label"
+            htmlFor="email"
+            sx={{ marginBottom: "4px", marginTop: "12px" }}
+          >
+            How would you like to rate your experience with icanbewell.ca?
+          </Typography>
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              marginTop: "10px",
+            }}
+          >
+            <Typography sx={{ fontSize: "1.3rem" }}>Poor</Typography>
+            <Rating
+              name="rating"
+              value={formData.rating}
+              onChange={handleRatingChange}
+              size="large"
+            />
+            <Typography sx={{ fontSize: "1.3rem" }}>Excellent</Typography>
+          </Box>
+          <form onSubmit={handleSubmit}>
+            <Typography
+              variant="h5"
+              component="label"
+              htmlFor="name"
+              sx={{ marginBottom: "4px", marginTop: "12px" }}
+            >
+              Tell us a bit about your rank.
+            </Typography>
+            <TextField
+              name="name"
+              value={formData.name}
+              onChange={handleChange}
+              fullWidth
+              InputProps={{ style: { fontSize: "1.5rem" } }} // Increase input font size
+              multiline
+              rows={4}
+              placeholder="E.g. did you learn something new? What other resources would you like on the top? Any techinal diffuculties using the app?"
+            />
+            <Typography
+              variant="h5"
+              component="label"
+              htmlFor="email"
+              sx={{ marginBottom: "4px", marginTop: "12px" }}
+            >
+              Your e-mail if you wish to hear back from us.
+            </Typography>
+            <TextField
+              name="email"
+              value={formData.email}
+              onChange={handleChange}
+              fullWidth
+              placeholder="example@example.com"
+              InputProps={{ style: { fontSize: "1.5rem" } }} // Increase input font size
+            />
+            <div style={{ marginTop: "10px", fontSize: "12px", color: "gray" }}>
+              <p>
+                <em>
+                  Do not leave requests for a family doctor or nurse
+                  practitioner, we have no information about this
+                </em>
+              </p>
+            </div>
+            <Button
+              sx={{
+                fontSize: "1.5rem",
+                marginTop: "20px",
+                width: "100%",
+                bgcolor: "#d7df21",
+                color: "#1285a9",
+              }}
+              type="submit"
+              variant="contained"
+              color="primary"
+            >
+              <strong> Done</strong>
+            </Button>
+          </form>
+        </Box>
+      </Modal>
+    </div>
+  );
+};
+
+export default Feedback;