Merge pull request #172 from Front-znad-zatoki/frontend/#171-#169-coo…

…kies-local-storage

Frontend/#171 cookies consent in local storage

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 ? (
+    <div className="cookies">
+      <div className="cookies-text">
+        <h3>This website uses cookies</h3>
+        <p>
+          We use cookies to give you the best online experience. Please let us
+          know if you agree.
+        </p>
+        <div className="button__group">
+          <button className="button--submit" onClick={handleCookies}>
+            Accept
+          </button>
+        </div>
+      </div>
+    </div>
+  ) : null;
+}
+
+export default CookiesDesclaimer;

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() {
         )}
         <ThemeToggler />
       </ul>
+      <CookiesDesclaimer />
     </nav>
   );
 }

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

client/src/styles/_global.scss

@@ -15,6 +15,7 @@ body {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  position: relative;
 }
 
 .dark-mode {

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