Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature/894:Feature 3 and 4 Done #896

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

feature/894:Feature 3 and 4 Done #896

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cba3e1f
feature/894:Empty commit
Gurdarshan-Singh Aug 23, 2024
4ebaa85
Feature Completed
Gurdarshan-Singh Aug 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -53,7 +54,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;

Expand Down Expand Up @@ -1355,7 +1356,7 @@ class App extends Component {
{this.state.lang.feedback}
</p>
</div>

<DialogBox
open={this.state.feedbackDialog}
setOpen={this.handleFeedBackToggle}
Expand All @@ -1370,7 +1371,7 @@ class App extends Component {
)
}
/>

<Feedback />
<div>
{this.state.configurationIsOpen && (
<MyBody
Expand Down
217 changes: 217 additions & 0 deletions src/Feedback/feedback.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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="[email protected]"
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;
20 changes: 20 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -11874,6 +11889,11 @@ [email protected]:
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"
Expand Down