Skip to content

Commit 7b49952

Browse files
nmreyesnmreyes
authored
Merge pull request protobi#11 from pdo-bulsu/privacy-policy
Privacy Policy Modal
2 parents ac9b038 + 9d67769 commit 7b49952

File tree

2 files changed

+233
-18
lines changed

2 files changed

+233
-18
lines changed

‎src/mainWrapper/components/AccountMenu.js

Lines changed: 53 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from "react";
1+
import React, { useState } from "react";
22
import {
33
Avatar,
44
Button,
@@ -16,7 +16,27 @@ import { useContext } from "react";
1616
import { useHistory } from "react-router-dom";
1717
import { AuthContext } from "../../contexts/AuthContext";
1818
import { Account } from "../../utils/bulsupis_mw";
19-
import { accountTypes, Institutes} from "../../utils/constants";
19+
import { accountTypes, Institutes } from "../../utils/constants";
20+
import PrivacyPolicyModal from "../../sections/accountSection/components/PrivacyPolicyModal";
21+
22+
const useStyles = makeStyles((theme) => ({
23+
cardHeader: {
24+
backgroundColor: theme.palette.primary.light,
25+
color: "white",
26+
},
27+
dialogPaper: {
28+
borderRadius: "10px",
29+
},
30+
button: {
31+
marginTop: theme.spacing(0.1),
32+
marginBottom: theme.spacing(0.1),
33+
width: "100%",
34+
},
35+
listItem: {
36+
paddingTop: theme.spacing(1),
37+
paddingBottom: theme.spacing(1),
38+
},
39+
}));
2040

2141
function AccountMenu({
2242
showDialog,
@@ -25,24 +45,18 @@ function AccountMenu({
2545
setAnchorEl,
2646
setOpen,
2747
}) {
28-
const useStyles = makeStyles((theme) => {
29-
return {
30-
cardHeader: {
31-
backgroundColor: theme.palette.primary.light,
32-
color: "white",
33-
},
34-
dialogPaper: {
35-
borderRadius: "10px",
36-
},
37-
};
38-
});
39-
48+
const [privacyPolicyOpen, setPrivacyPolicyOpen] = useState(false); // State for modal visibility
4049
const classes = useStyles();
4150
const history = useHistory();
4251
const { user, setIsLoggedIn } = useContext(AuthContext);
4352
const institute = Institutes.find(
4453
(institute) => institute._id_ === user.institute.id
4554
);
55+
56+
const handlePrivacyPolicyOpen = () => {
57+
setPrivacyPolicyOpen(true);
58+
};
59+
4660
return (
4761
<Popover
4862
id="popover"
@@ -57,9 +71,8 @@ function AccountMenu({
5771
}}
5872
classes={{ paper: classes.dialogPaper }}
5973
>
60-
<Card style={{ minimumWidth: "250px" }}>
74+
<Card style={{ minWidth: "250px" }}>
6175
<CardHeader
62-
// avatar={<Avatar src={institute.logo} />}
6376
title={
6477
<Typography variant="h6">
6578
{accountTypes[user.type].label}
@@ -70,7 +83,18 @@ function AccountMenu({
7083
/>
7184
<CardContent style={{ padding: 4 }}>
7285
<List>
73-
<ListItem>
86+
<ListItem className={classes.listItem}>
87+
<Button
88+
color="secondary"
89+
variant="contained"
90+
fullWidth
91+
onClick={handlePrivacyPolicyOpen}
92+
className={classes.button}
93+
>
94+
Privacy Policy
95+
</Button>
96+
</ListItem>
97+
<ListItem className={classes.listItem}>
7498
<Button
7599
color="secondary"
76100
variant="contained"
@@ -85,7 +109,7 @@ function AccountMenu({
85109
Change Password
86110
</Button>
87111
</ListItem>
88-
<ListItem>
112+
<ListItem className={classes.listItem}>
89113
<Button
90114
color="secondary"
91115
variant="contained"
@@ -101,9 +125,20 @@ function AccountMenu({
101125
Log Out
102126
</Button>
103127
</ListItem>
128+
<ListItem className={classes.listItem}>
129+
<Typography style={{ fontSize: "0.9rem", textAlign: "center", width: "100%" }}>
130+
Privacy Policy © PDO-DAICU 2024
131+
</Typography>
132+
</ListItem>
104133
</List>
105134
</CardContent>
106135
</Card>
136+
{privacyPolicyOpen && (
137+
<PrivacyPolicyModal
138+
open={privacyPolicyOpen}
139+
handleClose={() => setPrivacyPolicyOpen(false)}
140+
/>
141+
)}
107142
</Popover>
108143
);
109144
}

‎src/sections/accountSection/components/PrivacyPolicyModal.js

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
import React from "react";
2+
import { Modal, Box, Typography, Button, Grid } from "@mui/material";
3+
import { DialogTitle, DialogContent, DialogContentText } from "@mui/material";
4+
5+
const style = {
6+
position: "absolute",
7+
top: "50%",
8+
left: "50%",
9+
transform: "translate(-50%, -50%)",
10+
width: "50vw",
11+
maxWidth: "90vw",
12+
bgcolor: "background.paper",
13+
boxShadow: 24,
14+
p: 4,
15+
};
16+
17+
18+
const PrivacyPolicyModal = ({ open, handleClose }) => {
19+
return (
20+
<Modal
21+
open={open}
22+
onClose={handleClose}
23+
aria-labelledby="scroll-dialog-title"
24+
aria-describedby="scroll-dialog-description"
25+
>
26+
<Box sx={style}>
27+
<DialogTitle
28+
id="scroll-dialog-title"
29+
style={{ color: "#763435", fontWeight: "bold", fontSize: "27px" }}
30+
>
31+
Privacy Policy
32+
</DialogTitle>
33+
<DialogContent dividers>
34+
<DialogContentText
35+
id="scroll-dialog-description"
36+
tabIndex={-1}
37+
style={{
38+
maxHeight: "480px",
39+
overflowY: "auto",
40+
padding: "",
41+
wordWrap: "break-word",
42+
// wordBreak: "break-all",
43+
}}
44+
>
45+
<a
46+
href="https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&ved=2ahUKEwjWsKqa6_H_AhUHV2wGHVxCD9cQwqsBegQICBAG&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DdQw4w9WgXcQ&usg=AOvVaw0aHtehaphMhOCAkCydRLZU&opi=89978449"
47+
target="_blank"
48+
style={{
49+
fontSize: "25",
50+
fontWeight: "bold",
51+
textDecoration: "none",
52+
color: "#8e8e8e",
53+
}}
54+
>
55+
<span style={{ fontSize: "25", fontWeight: "bold" }}>
56+
Welcome to BulSUPIPs.
57+
</span>
58+
</a>
59+
<br />
60+
<br />
61+
We highly value the accuracy, confidentiality, and security of your
62+
personally identifiable information ("Personal Information"). This
63+
Privacy Policy governs our actions regarding the collection, use,
64+
and disclosure of Personal Information on our website. Our
65+
commitment to protecting your privacy is based on the values set by
66+
the Republic Act 10173, also known as the Data Privacy Act of 2012.
67+
By accessing and using our website, you agree to the terms and
68+
conditions outlined in this Privacy Policy. If you do not agree with
69+
any of the provisions stated herein, please refrain from using our
70+
website or providing us with your Personal Information.
71+
<br/>
72+
<br/>
73+
<b>Collection of Personal Information</b>
74+
<br />
75+
We collect Personal Information for specific
76+
and legitimate purposes, which will be clearly identified to you
77+
before or at the time of collection. The types of Personal
78+
Information we collect may include, but are not limited to:
79+
<br />
80+
<br />
81+
<b>Name</b>
82+
<br />
83+
Contact information (such as email address, phone number,
84+
e-signatures)
85+
<br />
86+
<br />
87+
<b>Use of Personal Information</b>
88+
<br />
89+
We use the Personal Information we collect for the following
90+
purposes:
91+
<br />
92+
• To provide and personalize our services to you
93+
<br />
94+
• To process and fulfill your requests and transactions
95+
<br />
96+
• To communicate with you, including responding to your inquiries and
97+
providing you with updates or important information
98+
<br />
99+
• To improve our website, services, and user experience
100+
<br />
101+
• To analyze trends, track usage data, and gather statistical
102+
information for research and marketing purposes
103+
<br />
104+
• To comply with legal obligations and protect our rights and
105+
interests
106+
<br />
107+
<br />
108+
<b>Disclosure of Personal Information</b>
109+
<br />
110+
We do not disclose your Personal Information to third parties
111+
without your consent, except in the following circumstances:
112+
<br />
113+
<br />
114+
When required by law or to comply with a legal process To protect
115+
and defend our rights, property, or safety, as well as those of our
116+
users or the public In connection with a business transfer, such as
117+
a merger, acquisition, or sale of assets, where Personal Information
118+
may be transferred to the acquiring entity
119+
<br />
120+
<br />
121+
<b>Data Security</b>
122+
<br />
123+
We employ appropriate security measures to protect your Personal
124+
Information from unauthorized access, alteration, disclosure, or
125+
destruction. We restrict access to Personal Information to
126+
authorized individuals who need to know this information for
127+
legitimate purposes.
128+
<br />
129+
<br />
130+
<b>Your Rights</b>
131+
<br />
132+
You have certain rights regarding the Personal Information we hold
133+
about you, including the right to access, update, correct, or delete
134+
your information. If you wish to exercise any of these rights,
135+
please contact us using the information provided below.
136+
<br />
137+
<br />
138+
<b>Third-Party Websites</b>
139+
<br />
140+
Our website may contain links to third-party websites that are not
141+
under our control. We are not responsible for the privacy practices
142+
or content of such websites. We encourage you to review the privacy
143+
policies of these third-party websites before providing any Personal
144+
Information.
145+
<br />
146+
<br />
147+
<b>Changes to the Privacy Policy</b>
148+
<br />
149+
We reserve the right to modify or update this Privacy Policy at any
150+
time. Any changes will be effective immediately upon posting the
151+
revised policy on our website. We recommend checking this page
152+
periodically to stay informed about our current privacy practices.
153+
<br />
154+
<br />
155+
<b>Contact Us</b>
156+
<br />
157+
If you have any questions or concerns regarding this Privacy Policy
158+
or our privacy practices, please contact us at [email protected].
159+
<br />
160+
<br />
161+
By continuing to use our website, you acknowledge that you have read
162+
and understood this Privacy Policy and agree to its terms and
163+
conditions.
164+
</DialogContentText>
165+
<Grid
166+
container
167+
justifyContent="flex-end"
168+
style={{ marginTop: "20px" }}
169+
>
170+
<Button onClick={handleClose} color="primary">
171+
Close
172+
</Button>
173+
</Grid>
174+
</DialogContent>
175+
</Box>
176+
</Modal>
177+
);
178+
};
179+
180+
export default PrivacyPolicyModal;

0 commit comments

Comments
 (0)