Cookie modal edits and add ability to reject cookies

Xanonymous-GitHub · Feb 15, 2024 · 963d4d3 · 963d4d3
1 parent 1f2fdc2
commit 963d4d3
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 46 deletions.
diff --git a/src/about.html b/src/about.html
@@ -12,7 +12,8 @@
   <script src="js/products.ts" type="module" defer></script>
   <script src="js/checkout.ts" type="module" defer></script>
   <script src="main.ts" type="module" defer></script>
-  <script src="js/header.ts" type="module"></script>
+  <script src="js/header.ts" type="module" defer></script>
+  <script src="js/cookie.ts" type="module" defer></script>
   <title>E-Veg Shop</title>
 </head>
 <body>

diff --git a/src/checkout.html b/src/checkout.html
@@ -12,7 +12,8 @@
   <script src="js/products.ts" type="module" defer></script>
   <script src="js/checkout.ts" type="module" defer></script>
   <script src="main.ts" type="module" defer></script>
-  <script src="js/header.ts" type="module"></script>
+  <script src="js/header.ts" type="module" defer></script>
+  <script src="js/cookie.ts" type="module" defer></script>
   <title>E-Veg Shop</title>
 </head>
 <body>

diff --git a/src/css/common.css b/src/css/common.css
@@ -188,25 +188,6 @@ li a, .subnavbar-links li a {
     vertical-align: middle;
 }
 
-#cookieMessage {
-    position: fixed;
-    display: none;
-    right: 0px;
-    bottom: 0px;
-    background-color: hsl(var(--colour-4-h), var(--colour-4-s), var(--colour-4-l));
-    padding: 20px;
-    /* display: none; */
-}
-
-#acceptCookies {
-    font-size: 100%;
-    margin-top: 2rem;
-}
-
-p {
-    font-size: 150%;
-}
-
 body {
     background-color: var(--colour-2);
     max-width: 100%;

diff --git a/src/index.html b/src/index.html
@@ -12,7 +12,8 @@
   <script src="js/products.ts" type="module" defer></script>
   <script src="js/shop.ts" type="module" defer></script>
   <script src="main.ts" type="module" defer></script>
-  <script src="js/header.ts" type="module"></script>
+  <script src="js/header.ts" type="module" defer></script>
+  <script src="js/cookie.ts" type="module" defer></script>
   <title>E-Veg Shop</title>
 </head>
 <body class="d-flex flex-column">
@@ -33,12 +34,5 @@ <h4 class="me-1">Sort by: </h4>
   <div class="position-relative w-100">&copy; 2021 InterVeg Coventry Ltd.</div>
   <div class="position-relative m-auto">Fresh produce from the Midland's green countryside.</div>
 </footer>
-<div id="cookieMessage">
-  <h1>This site uses cookies</h1>
-  <p>By using this site, you are consenting to our use of cookies</p>
-  <p>We use cookies purely for the functionality of the website - to store the products that are in your basket.</p>
-  <p>For further details of how we use your data, please see our privacy policy.</p>
-  <p><a id="acceptCookies">Accept</a></p>
-</div>
 </body>
 </html>
diff --git a/src/js/cookie.ts b/src/js/cookie.ts
@@ -0,0 +1,34 @@
+import Cookies from 'js-cookie'
+import { cookieOptions } from './shared'
+
+const WARWICK_DCS_URL = 'https://warwick.ac.uk/fac/sci/dcs/'
+const COOKIE_HTML = `<div id="cookieMessage" class="p-3 bg-light fixed-bottom d-flex flex-column align-items-center justify-content-center text-center border-top">
+<h3 class="mb-3">This site uses cookies</h3>
+<p class="mb-1">By using this site, you are consenting to our use of cookies</p>
+<p class="mb-1">We use cookies purely for the functionality of the website - to store the products that are in your basket.</p>
+<div class="mt-3 d-flex flex-row align-items-center justify-content-center">
+  <button class="btn btn-success me-2" id="acceptCookies">Accept</button>
+  <button class="btn btn-danger" id="rejectCookies">Reject and exit</button>
+</div>
+</div>`
+
+addEventListener('DOMContentLoaded', () => init())
+
+function init() {
+  document.body.insertAdjacentHTML('afterbegin', COOKIE_HTML)
+  setupCookieModalEventListeners()
+}
+
+function setupCookieModalEventListeners() {
+  const cookieMsgModal = document.querySelector('#cookieMessage') as HTMLDivElement
+  document.querySelector('#acceptCookies')?.addEventListener('click', () => {
+    Cookies.set('cookieMessageSeen', 'true', cookieOptions)
+    cookieMsgModal?.classList.add('d-none')
+  })
+  document.querySelector('#rejectCookies')?.addEventListener('click', () => {
+    window.location.href = WARWICK_DCS_URL
+  })
+
+  if (Cookies.get('cookieMessageSeen') === 'true')
+    cookieMsgModal?.classList.add('d-none')
+}
diff --git a/src/js/header.ts b/src/js/header.ts
@@ -1,4 +1,4 @@
-const headerHTML: string = `
+const HEADER_HTML: string = `
 <div class="sticky-top" height="100">
   <nav class="navbar navbar-expand-lg bg-body-tertiary">
     <div class="container-fluid">
@@ -42,4 +42,4 @@ function isHome(): boolean {
   return window.location.pathname.toLowerCase() === '/'
 }
 
-document.body.insertAdjacentHTML('afterbegin', headerHTML)
+document.body.insertAdjacentHTML('afterbegin', HEADER_HTML)
diff --git a/src/js/shop.ts b/src/js/shop.ts
@@ -13,7 +13,6 @@ addEventListener('DOMContentLoaded', () => init())
 
 function init() {
   setupSearchEventListeners()
-  setupCookieModalEventListeners()
   setupSortingEventListeners()
 
   setTimeout(async () => {
@@ -22,20 +21,6 @@ function init() {
   })
 }
 
-function setupCookieModalEventListeners() {
-  const cookieMsgModal = document.querySelector('#cookieMessage') as HTMLDivElement
-  document.querySelector('#acceptCookies')?.addEventListener('click', () => {
-    Cookies.set('cookieMessageSeen', 'true', {
-      secure: true,
-      sameSite: 'strict',
-    })
-    cookieMsgModal?.classList.add('d-none')
-  })
-
-  if (Cookies.get('cookieMessageSeen') === 'true')
-    cookieMsgModal?.classList.add('d-none')
-}
-
 function setupSearchEventListeners() {
   const searchBox = document.querySelector('#searchbox') as HTMLInputElement
   const noResultsDiv = document.querySelector('#noSearchResults') as HTMLDivElement