diff --git a/client/src/components/CookiesDesclaimer/index.js b/client/src/components/CookiesDesclaimer/index.js
new file mode 100644
index 0000000..c6d5f43
--- /dev/null
+++ b/client/src/components/CookiesDesclaimer/index.js
@@ -0,0 +1,29 @@
+import { useState } from 'react';
+import { getLocalStorage, setLocalStorage } from '../../utils/localStorage';
+
+function CookiesDesclaimer() {
+ const hasCookie = getLocalStorage('cookies-consent');
+ const [cookiesConsent, setCookiesConsent] = useState(hasCookie);
+ const handleCookies = () => {
+ setLocalStorage('cookies-consent', true);
+ setCookiesConsent(true);
+ };
+ return !cookiesConsent ? (
+
+
+
This website uses cookies
+
+ We use cookies to give you the best online experience. Please let us
+ know if you agree.
+
+
+
+
+
+
+ ) : null;
+}
+
+export default CookiesDesclaimer;
diff --git a/client/src/components/Navbar/index.js b/client/src/components/Navbar/index.js
index 84b33b6..ef53ad0 100644
--- a/client/src/components/Navbar/index.js
+++ b/client/src/components/Navbar/index.js
@@ -9,6 +9,7 @@ import AuthenticatedNavBar from './AuthenticatedNavbar';
import { CinemaContext } from '../../context/Cinema';
import { ReservationContext } from '../../context/Reservation';
import { RESET_RESERVATION } from '../../actions/types';
+import CookiesDesclaimer from '../CookiesDesclaimer';
function Navbar() {
const history = useHistory();
@@ -49,6 +50,7 @@ function Navbar() {
)}
+
);
}
diff --git a/client/src/components/Navbar/style.scss b/client/src/components/Navbar/style.scss
index a8767cb..316c6d5 100644
--- a/client/src/components/Navbar/style.scss
+++ b/client/src/components/Navbar/style.scss
@@ -34,3 +34,34 @@
display: flex;
align-items: flex-start;
}
+
+.cookies {
+ position: absolute;
+ top: 0;
+ width: 100vw;
+ padding-top: 25vh;
+ height: 100%;
+ left: 0;
+ text-align: center;
+ background-color: #0000007b;
+
+ z-index: 1;
+ & p {
+ line-height: 1.5;
+ }
+ & h3 {
+ line-height: 2;
+ }
+ &-text {
+ width: 50vw;
+ height: 50vh;
+ background-color: #000;
+ border-radius: 4px;
+ margin: 0 auto;
+ padding: 32px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ font-weight: 400;
+ }
+}
diff --git a/client/src/styles/_global.scss b/client/src/styles/_global.scss
index 5bbca18..b8b3c7d 100644
--- a/client/src/styles/_global.scss
+++ b/client/src/styles/_global.scss
@@ -15,6 +15,7 @@ body {
display: flex;
flex-direction: column;
justify-content: space-between;
+ position: relative;
}
.dark-mode {
diff --git a/client/src/utils/localStorage/index.js b/client/src/utils/localStorage/index.js
new file mode 100644
index 0000000..10b6d32
--- /dev/null
+++ b/client/src/utils/localStorage/index.js
@@ -0,0 +1,14 @@
+export const setLocalStorage = (key, value) => {
+ localStorage.setItem(key, value);
+};
+
+// Retrieve information from local storage
+export const getLocalStorage = (key) => {
+ const reservationValue = JSON.parse(localStorage.getItem(key));
+ return reservationValue;
+};
+
+// Remove information from local storage
+export const removeLocalStorage = (key) => {
+ localStorage.removeItem(key);
+};