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); +};