added cookie consent and accept/reject logic

BU-Spark · Oct 26, 2024 · a43322a · a43322a
1 parent ad8a1e9
commit a43322a
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 18 deletions.
diff --git a/client/src/components/cookieConsent.tsx b/client/src/components/cookieConsent.tsx
@@ -0,0 +1,71 @@
+// src/components/cookieConsent.tsx
+
+import React, { useState, useEffect } from 'react';
+import Cookies from 'js-cookie';
+import { Button, Typography, Box } from '@mui/material';
+
+const CookieConsent: React.FC = () => {
+    const [showBanner, setShowBanner] = useState(false);
+
+    useEffect(() => {
+        const consent = Cookies.get('cookieConsent');
+        if (consent !== 'accepted') {
+            setShowBanner(true);
+        }
+    }, []);
+
+    const handleAccept = () => {
+        Cookies.set('cookieConsent', 'accepted', { expires: 365 });
+        setShowBanner(false);
+    };
+    const handleDeny = () => {
+        // in case cookieConsent expires and user clicks deny, clear all cookies, expired or not.
+        Cookies.remove('cookieConsent');
+        Cookies.remove('address');
+        Cookies.remove('pollingInfo');
+        setShowBanner(false)
+    }
+
+    return (
+        <>
+            {showBanner && (
+                <Box
+                    sx={{
+                        position: 'fixed',
+                        bottom: 0,
+                        width: '100%',
+                        backgroundColor: '#333',
+                        color: '#fff',
+                        padding: '16px',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        zIndex: 1000,
+                    }}
+                >
+                    <Typography variant="body1" sx={{ mr: 2 }}>
+                        We use cookies to enhance your experience by caching location information securely on your browser. By clicking "Accept," you consent to our use of cookies.
+                        <a href="/cookie-policy" style={{ color: '#ffdd57', marginLeft: '5px' }}>Learn more</a>
+                    </Typography>
+                    <Button
+                        variant="contained"
+                        color="primary"
+                        onClick={handleAccept}
+                    >
+                        Accept
+                    </Button>
+                    <Button
+                        variant="contained"
+                        color="primary"
+                        onClick={handleDeny}
+                        sx={{ ml: 2 }}
+                    >
+                        Deny
+                    </Button>
+                </Box>
+            )}
+        </>
+    );
+};
+
+export default CookieConsent;
diff --git a/client/src/pages/_app.tsx b/client/src/pages/_app.tsx
@@ -1,7 +1,8 @@
 // pages/_app.tsx
 import 'tailwindcss/tailwind.css';
-import '@/app/globals.css'
+import '@/app/globals.css';
 import NavBar from '../components/nav/NavBar'; // Import the NavBar component
+import CookieConsent from '../components/cookieConsent'; // Import the CookieConsent component
 import { AppProps } from 'next/app'; // Import AppProps from Next.js
 import { useEffect } from 'react';
 import { useRouter } from 'next/router';
@@ -27,6 +28,7 @@ function MyApp({ Component, pageProps }: AppProps) {
             <div className=' '>
                 <Component {...pageProps} />
             </div>
+            <CookieConsent /> {/* Add the CookieConsent component */}
         </>
     );
 }

diff --git a/client/src/pages/voterInfo/addressForm.tsx b/client/src/pages/voterInfo/addressForm.tsx
@@ -53,13 +53,17 @@ const AddressForm: React.FC<AddressFormProps> = ({ setPollingInformation, setErr
 
     // save component state variables into cookies
     const saveCookieData = (street: string, city: string, zip: string, pollingInfo: PollingInfo) => {
-        // Save address to cookie only if successful response (valid address)
-        Cookies.set('address', JSON.stringify({ street, city, zip }));
+        const consent = Cookies.get('cookieConsent');
+        if (consent === 'accepted') {  // Check if cookieConsent is 'accepted'
+            // Save address to cookie only if successful response (valid address)
+            Cookies.set('address', JSON.stringify({ street, city, zip }));
 
-        // Save polling information to cookie (expires in 7 days)
-        Cookies.set('pollingInfo', JSON.stringify(pollingInfo), { expires: 7 });
+            // Save polling information to cookie (expires in 7 days)
+            Cookies.set('pollingInfo', JSON.stringify(pollingInfo), { expires: 7 });
+        }
     };
 
+
     // Load saved address and pollingInfo from cookies if available
     useEffect(() => {
         loadSavedCookieData();

diff --git a/client/src/pages/voterInfo/index.tsx b/client/src/pages/voterInfo/index.tsx
@@ -117,19 +117,21 @@ export default function VoterInfo() {
 
                                 {/* Second Column Content */}
                                 <div className="space-y-2 text-center">
-                                    <a
-                                        href={`https://www.sec.state.ma.us/WhereDoIVoteMA/ShowBallot/ViewMyBallot/BallotOut/ST/35/${pollingInfo.ward}/${pollingInfo.precinct}`}
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        className="text-blue-600 underline text-xl"
-                                    >
-                                        View Your Ballot
-                                        <img
-                                            src="/sample_ballot.png" // Replace with the actual image path
-                                            alt="Preview of the ballot website"
-                                            className="w-full rounded-lg shadow-lg"
-                                        />
-                                    </a>
+                                {pollingInfo && (
+                                        <a
+                                            href={`https://www.sec.state.ma.us/WhereDoIVoteMA/ShowBallot/ViewMyBallot/BallotOut/ST/35/${pollingInfo.ward}/${pollingInfo.precinct}`}
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                            className="text-blue-600 underline text-xl"
+                                        >
+                                            View Your Ballot
+                                            <img
+                                                src="/sample_ballot.png" // Replace with the actual image path
+                                                alt="Preview of the ballot website"
+                                                className="w-full rounded-lg shadow-lg"
+                                            />
+                                        </a>
+                                    )}
                                 </div>
 
                             </div>