From e9d5f116fac2ed7424a8184d6cf3dfeefa7fa8d4 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Tue, 14 May 2024 20:54:57 +0100
Subject: [PATCH 1/2] feat(#5): Add cookie consent banner

---
 src/lib/components/CookieConsent.svelte | 37 +++++++++++++++++++++++++
 src/routes/+layout.svelte               | 18 ++++++++++++
 2 files changed, 55 insertions(+)
 create mode 100644 src/lib/components/CookieConsent.svelte

diff --git a/src/lib/components/CookieConsent.svelte b/src/lib/components/CookieConsent.svelte
new file mode 100644
index 0000000..5e1c64f
--- /dev/null
+++ b/src/lib/components/CookieConsent.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { isBrowser } from '@supabase/ssr';
+
+	let showBanner = false;
+
+	const acceptCookies = () => {
+		if (isBrowser()) {
+			localStorage.setItem('cookiesAccepted', 'true');
+			showBanner = false;
+		}
+
+		location.reload();
+	};
+
+	let cookiesAccepted = false;
+
+	onMount(() => {
+		if (isBrowser()) {
+			if (localStorage.getItem('cookiesAccepted')) {
+				cookiesAccepted = true;
+			}
+		}
+	});
+</script>
+
+{#if !cookiesAccepted}
+	<div class="fixed bottom-0 left-0 w-full bg-gray-800 text-white p-4">
+		<p class="text-sm">
+			We use cookies to ensure you get the best experience on our website. By continuing, you agree
+			to our use of cookies.
+		</p>
+		<button class="bg-blue-500 hover:bg-blue-600 px-4 py-2 rounded" on:click={acceptCookies}
+			>Accept</button
+		>
+	</div>
+{/if}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 3fa38ee..0b3f792 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
 	import 'tailwindcss/tailwind.css';
 	import { onDestroy, onMount } from 'svelte';
+	import { isBrowser } from '@supabase/ssr';
 	import { basket, type Basket, type Item } from '$lib/stores/basket.js';
 	import { general } from '$lib/stores/generalStore.js';
 	import { invalidate } from '$app/navigation';
 	import SignIn from '$lib/components/SignIn.svelte';
 	import SignOut from '$lib/components/SignOut.svelte';
+	import CookieConsent from '$lib/components/CookieConsent.svelte';
 
 	export let data;
 	let { supabase, session } = data;
@@ -20,11 +22,14 @@
 	const unsubscribeToGeneralStore = general.subscribe((value) => {
 		localGeneral = value;
 	});
+
 	onDestroy(() => {
 		unsubscribeToBasket();
 		unsubscribeToGeneralStore();
 	});
 
+	let cookiesAccepted = false;
+
 	onMount(() => {
 		const { data } = supabase.auth.onAuthStateChange((event, _session) => {
 			if (_session?.expires_at !== session?.expires_at) {
@@ -33,6 +38,12 @@
 			}
 		});
 
+		if (isBrowser()) {
+			if (localStorage.getItem('cookiesAccepted')) {
+				cookiesAccepted = true;
+			}
+		}
+
 		return () => data.subscription.unsubscribe();
 	});
 </script>
@@ -44,6 +55,10 @@
 	<meta property="og:description" content="" />
 	<link rel="canonical" href="" />
 	<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+
+	{#if cookiesAccepted}
+		<!-- Google Analytics script goes here -->
+	{/if}
 </svelte:head>
 
 <header>
@@ -162,6 +177,8 @@
 	<slot />
 </main>
 
+<CookieConsent />
+
 <footer class="footer items-center p-4 bg-neutral text-neutral-content">
 	<aside class="items-center grid-flow-col">
 		<svg
@@ -218,6 +235,7 @@
 		</a>
 	</nav>
 </footer>
+
 <div
 	id="success-toast"
 	role="alert"

From 7c4667171c2940555cc5632df3eead4ed2288f29 Mon Sep 17 00:00:00 2001
From: Olly <OllyNicholass@users.noreply.github.com>
Date: Tue, 14 May 2024 22:31:10 +0000
Subject: [PATCH 2/2] refactor(#5): reduce code duplication in cookie consent

---
 src/lib/components/CookieConsent.svelte | 18 ++++--------------
 src/routes/+layout.svelte               |  2 +-
 2 files changed, 5 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/CookieConsent.svelte b/src/lib/components/CookieConsent.svelte
index 5e1c64f..e120364 100644
--- a/src/lib/components/CookieConsent.svelte
+++ b/src/lib/components/CookieConsent.svelte
@@ -1,30 +1,20 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import { isBrowser } from '@supabase/ssr';
 
-	let showBanner = false;
+	export let cookiesAccepted;
+	let showBanner = !cookiesAccepted;
+	$: showBanner = !cookiesAccepted;
 
 	const acceptCookies = () => {
 		if (isBrowser()) {
 			localStorage.setItem('cookiesAccepted', 'true');
 			showBanner = false;
 		}
-
-		location.reload();
 	};
 
-	let cookiesAccepted = false;
-
-	onMount(() => {
-		if (isBrowser()) {
-			if (localStorage.getItem('cookiesAccepted')) {
-				cookiesAccepted = true;
-			}
-		}
-	});
 </script>
 
-{#if !cookiesAccepted}
+{#if showBanner}
 	<div class="fixed bottom-0 left-0 w-full bg-gray-800 text-white p-4">
 		<p class="text-sm">
 			We use cookies to ensure you get the best experience on our website. By continuing, you agree
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 0b3f792..88063d5 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -177,7 +177,7 @@
 	<slot />
 </main>
 
-<CookieConsent />
+<CookieConsent {cookiesAccepted} />
 
 <footer class="footer items-center p-4 bg-neutral text-neutral-content">
 	<aside class="items-center grid-flow-col">