survey: add a banner explaining the usage of necessary cookies

packages/evolution-frontend/src/apps/participant/index.tsx

@@ -22,6 +22,7 @@ import appConfig, { setApplicationConfiguration } from 'chaire-lib-frontend/lib/
 import '../../styles/survey/styles-participant-survey.scss';
 import verifyAuthentication from 'chaire-lib-frontend/lib/services/auth/verifyAuthentication';
 import SegmentsSection from '../../components/survey/sectionTemplates/TripsAndSegmentsSection';
+import CookieBanner from '../../components/pageParts/CookieBanner';
 
 setApplicationConfiguration({ homePage: '/survey', templateMapping: { tripsAndSegmentsWithMap: SegmentsSection } });
 
@@ -51,6 +52,7 @@ const App = (settings?: AppSettings) => {
                     <Provider store={store}>
                         <I18nextProvider i18n={i18n}>
                             <BrowserRouter>
+                                <CookieBanner/>
                                 <SurveyRouter />
                             </BrowserRouter>
                         </I18nextProvider>

packages/evolution-frontend/src/components/pageParts/CookieBanner.tsx

@@ -0,0 +1,29 @@
+import React, { useState, useEffect } from 'react';
+
+const CookieBanner: React.FC = () => {
+    const [showBanner, setShowBanner] = useState(false);
+
+    useEffect(() => {
+        // Check if user already accepted cookies
+        const cookiesAccepted = localStorage.getItem('cookiesAccepted');
+        if (!cookiesAccepted) {
+            setShowBanner(true);
+        }
+    }, []);
+
+    const acceptCookies = () => {
+        localStorage.setItem('cookiesAccepted', 'true');
+        setShowBanner(false);
+    };
+
+    if (!showBanner) return null;
+
+    return (
+        <div className="cookie-banner">
+            <p>We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies.</p>
+            <button onClick={acceptCookies}>Accept</button>
+        </div>
+    );
+};
+
+export default CookieBanner;