From 8f7075db28a62e7f0c38ae0e887d5fb1e3ebfe2a Mon Sep 17 00:00:00 2001
From: OllyNicholass <OllyNicholass@users.noreply.github.com>
Date: Tue, 15 Oct 2024 19:36:17 +0100
Subject: [PATCH 1/3] feat(#34): display message in place of add to basket for
 prior purchase

---
 .../products/[productId]/+page.server.ts      | 35 +++++++
 src/routes/products/[productId]/+page.svelte  | 98 ++++++++++---------
 src/routes/products/[productId]/+page.ts      |  4 -
 3 files changed, 86 insertions(+), 51 deletions(-)
 create mode 100644 src/routes/products/[productId]/+page.server.ts
 delete mode 100644 src/routes/products/[productId]/+page.ts

diff --git a/src/routes/products/[productId]/+page.server.ts b/src/routes/products/[productId]/+page.server.ts
new file mode 100644
index 0000000..d99e062
--- /dev/null
+++ b/src/routes/products/[productId]/+page.server.ts
@@ -0,0 +1,35 @@
+import { redirect } from '@sveltejs/kit';
+import { hasProductAccess } from '$lib/utils/supabase/admin';
+
+export const load = async ({ params, locals: { safeGetSession }, fetch }) => {
+	const { session } = await safeGetSession();
+	if (!session) {
+		throw redirect(303, '/login'); // Redirect unauthenticated users to login
+	}
+	
+	const productResponse = await fetch(`/products/${params.productId}`);
+	const product = await productResponse.json();
+	
+	// Create the item object
+	const item = {
+		id: product.id,
+		name: product.name,
+		categoryDescription: product.description,
+		imgAlt: product.description,
+		imgSrc: product.images[0],
+		price: 0,
+		priceId: product.default_price,
+		quantity: 1
+	}
+
+	// Fetch the price of the product
+	const priceResponse = await fetch(`/products/prices/${product.default_price}`);
+	const price = await priceResponse.json();
+	// Set the price of the product
+	item.price = price.unit_amount / 100;
+
+	// Check if the user has access to the 'EXAMPLE PRODUCT' product
+	const hasPurchasedProduct = await hasProductAccess(session.user.id, params.productId);
+
+	return { params, hasPurchasedProduct, item };
+};
diff --git a/src/routes/products/[productId]/+page.svelte b/src/routes/products/[productId]/+page.svelte
index 6e81008..e000679 100644
--- a/src/routes/products/[productId]/+page.svelte
+++ b/src/routes/products/[productId]/+page.svelte
@@ -1,11 +1,15 @@
 <script lang="ts">
-	import { onDestroy, onMount } from 'svelte';
+	import { onDestroy } from 'svelte';
+	import { redirect } from '@sveltejs/kit';
 	import { basket, type Basket, type Item } from '$lib/stores/basket.js';
 	import { general } from '$lib/stores/generalStore.js';
 
 	/** @type {import('./$types').PageData} */
 	export let data;
 
+	let { supabase, session, hasPurchasedProduct, item } = data;
+	$: ({ supabase, session, hasPurchasedProduct, item } = data);
+
 	let localBasket: Basket;
 	const unsubscribeToBasket = basket.subscribe((value) => {
 		localBasket = value;
@@ -16,6 +20,9 @@
 	});
 
 	function addToBasket() {
+		if (!session) {
+			redirect(303, '/');
+		}
 		basket.update((value) => {
 			const existingItemIndex = value.items.findIndex((basketItem) => basketItem.id === item.id);
 
@@ -43,32 +50,6 @@
 			});
 		}, 5000);
 	}
-
-	let item = {};
-
-	onMount(() => {
-		fetch(`/products/${data.productId}`)
-			.then((response) => response.json())
-			.then((product) => {
-				item = {
-					id: product.id,
-					name: product.name,
-					categoryDescription: product.description,
-					imgAlt: product.description,
-					imgSrc: product.images[0],
-					price: 0,
-					priceId: product.default_price,
-					quantity: 1
-				};
-
-				// Fetch the price of the product
-				fetch(`/products/prices/${product.default_price}`)
-					.then((response) => response.json())
-					.then((price) => {
-						item.price = price.unit_amount / 100;
-					});
-			});
-	});
 </script>
 
 <section class="relative">
@@ -370,27 +351,50 @@
 								</svg>
 							</button>
 						</div>
-						<button
-							class="group py-4 px-5 rounded-full bg-indigo-50 text-indigo-600 font-semibold text-lg w-full flex items-center justify-center gap-2 transition-all duration-500 hover:bg-indigo-100"
-							on:click={addToBasket}
-						>
-							<svg
-								class="stroke-indigo-600"
-								width="22"
-								height="22"
-								viewBox="0 0 22 22"
-								fill="none"
-								xmlns="http://www.w3.org/2000/svg"
+						{#if !hasPurchasedProduct}
+							<button
+								class="group py-4 px-5 rounded-full bg-indigo-50 text-indigo-600 font-semibold text-lg w-full flex items-center justify-center gap-2 transition-all duration-500 hover:bg-indigo-100"
+								on:click={addToBasket}
 							>
-								<path
-									d="M10.7394 17.875C10.7394 18.6344 10.1062 19.25 9.32511 19.25C8.54402 19.25 7.91083 18.6344 7.91083 17.875M16.3965 17.875C16.3965 18.6344 15.7633 19.25 14.9823 19.25C14.2012 19.25 13.568 18.6344 13.568 17.875M4.1394 5.5L5.46568 12.5908C5.73339 14.0221 5.86724 14.7377 6.37649 15.1605C6.88573 15.5833 7.61377 15.5833 9.06984 15.5833H15.2379C16.6941 15.5833 17.4222 15.5833 17.9314 15.1605C18.4407 14.7376 18.5745 14.0219 18.8421 12.5906L19.3564 9.84059C19.7324 7.82973 19.9203 6.8243 19.3705 6.16215C18.8207 5.5 17.7979 5.5 15.7522 5.5H4.1394ZM4.1394 5.5L3.66797 2.75"
-									stroke=""
-									stroke-width="1.6"
-									stroke-linecap="round"
-								/>
-							</svg>
-							Add to basket</button
-						>
+								<svg
+									class="stroke-indigo-600"
+									width="22"
+									height="22"
+									viewBox="0 0 22 22"
+									fill="none"
+									xmlns="http://www.w3.org/2000/svg"
+								>
+									<path
+										d="M10.7394 17.875C10.7394 18.6344 10.1062 19.25 9.32511 19.25C8.54402 19.25 7.91083 18.6344 7.91083 17.875M16.3965 17.875C16.3965 18.6344 15.7633 19.25 14.9823 19.25C14.2012 19.25 13.568 18.6344 13.568 17.875M4.1394 5.5L5.46568 12.5908C5.73339 14.0221 5.86724 14.7377 6.37649 15.1605C6.88573 15.5833 7.61377 15.5833 9.06984 15.5833H15.2379C16.6941 15.5833 17.4222 15.5833 17.9314 15.1605C18.4407 14.7376 18.5745 14.0219 18.8421 12.5906L19.3564 9.84059C19.7324 7.82973 19.9203 6.8243 19.3705 6.16215C18.8207 5.5 17.7979 5.5 15.7522 5.5H4.1394ZM4.1394 5.5L3.66797 2.75"
+										stroke=""
+										stroke-width="1.6"
+										stroke-linecap="round"
+									/>
+								</svg>
+								Add to basket
+							</button>
+						{:else}
+							<button
+								class="group py-4 px-5 rounded-full bg-indigo-50 text-indigo-600 font-semibold text-lg w-full flex items-center justify-center gap-2 transition-all duration-500 hover:bg-indigo-100"
+							>
+								<svg
+									class="stroke-indigo-600"
+									width="22"
+									height="22"
+									viewBox="0 0 22 22"
+									fill="none"
+									xmlns="http://www.w3.org/2000/svg"
+								>
+									<path
+										d="M10.7394 17.875C10.7394 18.6344 10.1062 19.25 9.32511 19.25C8.54402 19.25 7.91083 18.6344 7.91083 17.875M16.3965 17.875C16.3965 18.6344 15.7633 19.25 14.9823 19.25C14.2012 19.25 13.568 18.6344 13.568 17.875M4.1394 5.5L5.46568 12.5908C5.73339 14.0221 5.86724 14.7377 6.37649 15.1605C6.88573 15.5833 7.61377 15.5833 9.06984 15.5833H15.2379C16.6941 15.5833 17.4222 15.5833 17.9314 15.1605C18.4407 14.7376 18.5745 14.0219 18.8421 12.5906L19.3564 9.84059C19.7324 7.82973 19.9203 6.8243 19.3705 6.16215C18.8207 5.5 17.7979 5.5 15.7522 5.5H4.1394ZM4.1394 5.5L3.66797 2.75"
+										stroke=""
+										stroke-width="1.6"
+										stroke-linecap="round"
+									/>
+								</svg>
+								You own this already
+							</button>
+						{/if}
 					</div>
 					<div class="flex items-center gap-3">
 						<button
diff --git a/src/routes/products/[productId]/+page.ts b/src/routes/products/[productId]/+page.ts
deleted file mode 100644
index fd0e3fa..0000000
--- a/src/routes/products/[productId]/+page.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-/** @type {import('./$types').PageLoad} */
-export function load({ params }) {
-	return params;
-}

From 616009ea05c0c7429ed16380c4724e1c6561f7ef Mon Sep 17 00:00:00 2001
From: OllyNicholass <OllyNicholass@users.noreply.github.com>
Date: Tue, 15 Oct 2024 19:36:17 +0100
Subject: [PATCH 2/3] feat(#34): display message in place of add to basket for
 prior purchase

---
 .../products/[productId]/+page.server.ts      | 36 +++++++++++
 src/routes/products/[productId]/+page.svelte  | 61 ++++++++++---------
 src/routes/products/[productId]/+page.ts      |  4 --
 3 files changed, 68 insertions(+), 33 deletions(-)
 create mode 100644 src/routes/products/[productId]/+page.server.ts
 delete mode 100644 src/routes/products/[productId]/+page.ts

diff --git a/src/routes/products/[productId]/+page.server.ts b/src/routes/products/[productId]/+page.server.ts
new file mode 100644
index 0000000..6a3fba3
--- /dev/null
+++ b/src/routes/products/[productId]/+page.server.ts
@@ -0,0 +1,36 @@
+import { redirect } from '@sveltejs/kit';
+import { hasProductAccess } from '$lib/utils/supabase/admin';
+
+export const load = async ({ params, locals: { safeGetSession }, fetch }) => {
+	const { session } = await safeGetSession();
+	if (!session) {
+		throw redirect(303, '/login'); // Redirect unauthenticated users to login
+	}
+	
+	const productResponse = await fetch(`/products/${params.productId}`);
+	const product = await productResponse.json();
+	
+	// Create the item object
+	const item = {
+		id: product.id,
+		name: product.name,
+		categoryDescription: product.description,
+		imgAlt: product.description,
+		imgSrc: product.images[0],
+		price: 0,
+		priceId: product.default_price,
+		quantity: 1,
+		isSubscription: product.isSubscription
+	}
+
+	// Fetch the price of the product
+	const priceResponse = await fetch(`/products/prices/${product.default_price}`);
+	const price = await priceResponse.json();
+	// Set the price of the product
+	item.price = price.unit_amount / 100;
+
+	// Check if the user has access to the 'EXAMPLE PRODUCT' product
+	const hasPurchasedProduct = await hasProductAccess(session.user.id, params.productId);
+
+	return { params, hasPurchasedProduct, item };
+};
diff --git a/src/routes/products/[productId]/+page.svelte b/src/routes/products/[productId]/+page.svelte
index 77f5fed..5c6593c 100644
--- a/src/routes/products/[productId]/+page.svelte
+++ b/src/routes/products/[productId]/+page.svelte
@@ -1,11 +1,15 @@
 <script lang="ts">
-	import { onDestroy, onMount } from 'svelte';
+	import { onDestroy } from 'svelte';
+	import { redirect } from '@sveltejs/kit';
 	import { basket, type Basket, type Item } from '$lib/stores/basket.js';
 	import { general } from '$lib/stores/generalStore.js';
 
 	/** @type {import('./$types').PageData} */
 	export let data;
 
+	let { supabase, session, hasPurchasedProduct, item } = data;
+	$: ({ supabase, session, hasPurchasedProduct, item } = data);
+
 	let localBasket: Basket;
 	const unsubscribeToBasket = basket.subscribe((value) => {
 		localBasket = value;
@@ -16,6 +20,9 @@
 	});
 
 	function addToBasket() {
+		if (!session) {
+			redirect(303, '/');
+		}
 		basket.update((value) => {
 			const existingItemIndex = value.items.findIndex((basketItem) => basketItem.id === item.id);
 
@@ -57,33 +64,6 @@
 				console.log(data);
 			});
 	}
-
-	let item = {};
-
-	onMount(() => {
-		fetch(`/products/${data.productId}`)
-			.then((response) => response.json())
-			.then((product) => {
-				item = {
-					id: product.id,
-					name: product.name,
-					categoryDescription: product.description,
-					imgAlt: product.description,
-					imgSrc: product.images[0],
-					price: 0,
-					priceId: product.default_price,
-					quantity: 1,
-					isSubscription: product.isSubscription
-				};
-
-				// Fetch the price of the product
-				fetch(`/products/prices/${product.default_price}`)
-					.then((response) => response.json())
-					.then((price) => {
-						item.price = price.unit_amount / 100;
-					});
-			});
-	});
 </script>
 
 <section class="relative">
@@ -386,6 +366,7 @@
 									</svg>
 								</button>
 							</div>
+							{#if !hasPurchasedProduct}
 							<button
 								class="group py-4 px-5 rounded-full bg-indigo-50 text-indigo-600 font-semibold text-lg w-full flex items-center justify-center gap-2 transition-all duration-500 hover:bg-indigo-100"
 								on:click={addToBasket}
@@ -405,8 +386,30 @@
 										stroke-linecap="round"
 									/>
 								</svg>
-								Add to basket</button
+								Add to basket
+							</button>
+						{:else}
+							<button
+								class="group py-4 px-5 rounded-full bg-indigo-50 text-indigo-600 font-semibold text-lg w-full flex items-center justify-center gap-2 transition-all duration-500 hover:bg-indigo-100"
 							>
+								<svg
+									class="stroke-indigo-600"
+									width="22"
+									height="22"
+									viewBox="0 0 22 22"
+									fill="none"
+									xmlns="http://www.w3.org/2000/svg"
+								>
+									<path
+										d="M10.7394 17.875C10.7394 18.6344 10.1062 19.25 9.32511 19.25C8.54402 19.25 7.91083 18.6344 7.91083 17.875M16.3965 17.875C16.3965 18.6344 15.7633 19.25 14.9823 19.25C14.2012 19.25 13.568 18.6344 13.568 17.875M4.1394 5.5L5.46568 12.5908C5.73339 14.0221 5.86724 14.7377 6.37649 15.1605C6.88573 15.5833 7.61377 15.5833 9.06984 15.5833H15.2379C16.6941 15.5833 17.4222 15.5833 17.9314 15.1605C18.4407 14.7376 18.5745 14.0219 18.8421 12.5906L19.3564 9.84059C19.7324 7.82973 19.9203 6.8243 19.3705 6.16215C18.8207 5.5 17.7979 5.5 15.7522 5.5H4.1394ZM4.1394 5.5L3.66797 2.75"
+										stroke=""
+										stroke-width="1.6"
+										stroke-linecap="round"
+									/>
+								</svg>
+								You already own this
+							</button>
+						{/if}
 						</div>
 					{:else}
 						<div class="flex items-center gap-3">
diff --git a/src/routes/products/[productId]/+page.ts b/src/routes/products/[productId]/+page.ts
deleted file mode 100644
index fd0e3fa..0000000
--- a/src/routes/products/[productId]/+page.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-/** @type {import('./$types').PageLoad} */
-export function load({ params }) {
-	return params;
-}

From 29f418cc91f688a763df27f1e4bd708dd45f3daa Mon Sep 17 00:00:00 2001
From: OllyNicholass <OllyNicholass@users.noreply.github.com>
Date: Tue, 15 Oct 2024 20:48:51 +0100
Subject: [PATCH 3/3] feat(#34): update already purchased button

---
 src/routes/products/[productId]/+page.svelte | 101 ++++---------------
 1 file changed, 21 insertions(+), 80 deletions(-)

diff --git a/src/routes/products/[productId]/+page.svelte b/src/routes/products/[productId]/+page.svelte
index 5c6593c..b7b1092 100644
--- a/src/routes/products/[productId]/+page.svelte
+++ b/src/routes/products/[productId]/+page.svelte
@@ -78,9 +78,6 @@
 				class="data w-full lg:pr-8 pr-0 xl:justify-start justify-center flex items-center max-lg:pb-10 xl:my-2 lg:my-5 my-0"
 			>
 				<div class="data w-full max-w-xl">
-					<!-- <p class="text-lg font-medium leading-8 text-indigo-600 mb-4">
-						Clothing&nbsp; /&nbsp; Menswear
-					</p> -->
 					<h2 class="font-manrope font-bold text-3xl leading-10 text-gray-900 mb-2 capitalize">
 						{item.name}
 					</h2>
@@ -270,33 +267,8 @@
 							<span class="font-normal text-base text-gray-900">all size is available</span>
 						</li>
 					</ul>
-					<!-- <p class="text-gray-900 text-lg leading-8 font-medium mb-4">Size</p>
-					<div class="w-full pb-8 border-b border-gray-100 flex-wrap">
-						<div class="grid grid-cols-3 min-[400px]:grid-cols-5 gap-3 max-w-md">
-							<button
-								class="bg-white text-center py-1.5 px-6 w-full font-semibold text-lg leading-8 text-gray-900 border border-gray-200 flex items-center rounded-full justify-center transition-all duration-300 hover:bg-gray-50 hover:shadow-sm hover:shadow-gray-100 hover:border-gray-300 visited:border-gray-300 visited:bg-gray-50"
-								>S</button
-							>
-							<button
-								class="bg-white text-center py-1.5 px-6 w-full font-semibold text-lg leading-8 text-gray-900 border border-gray-200 flex items-center rounded-full justify-center transition-all duration-300 hover:bg-gray-50 hover:shadow-sm hover:shadow-gray-100 hover:border-gray-300 visited:border-gray-300 visited:bg-gray-50"
-								>M</button
-							>
-							<button
-								class="bg-white text-center py-1.5 px-6 w-full font-semibold text-lg leading-8 text-gray-900 border border-gray-200 flex items-center rounded-full justify-center transition-all duration-300 hover:bg-gray-50 hover:shadow-sm hover:shadow-gray-100 hover:border-gray-300 visited:border-gray-300 visited:bg-gray-50"
-								>L</button
-							>
-							<button
-								class="bg-white text-center py-1.5 px-6 w-full font-semibold text-lg leading-8 text-gray-900 border border-gray-200 flex items-center rounded-full justify-center transition-all duration-300 hover:bg-gray-50 hover:shadow-sm hover:shadow-gray-100 hover:border-gray-300 visited:border-gray-300 visited:bg-gray-50"
-								>XL</button
-							>
-							<button
-								class="bg-white text-center py-1.5 px-6 w-full font-semibold text-lg leading-8 text-gray-900 border border-gray-200 flex items-center rounded-full justify-center transition-all duration-300 hover:bg-gray-50 hover:shadow-sm hover:shadow-gray-100 hover:border-gray-300 visited:border-gray-300 visited:bg-gray-50"
-								>XXL</button
-							>
-						</div>
-					</div> -->
 
-					{#if !item.isSubscription}
+					{#if !item.isSubscription && !hasPurchasedProduct}
 						<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 py-8">
 							<div class="flex sm:items-center sm:justify-center w-full">
 								<button
@@ -366,7 +338,6 @@
 									</svg>
 								</button>
 							</div>
-							{#if !hasPurchasedProduct}
 							<button
 								class="group py-4 px-5 rounded-full bg-indigo-50 text-indigo-600 font-semibold text-lg w-full flex items-center justify-center gap-2 transition-all duration-500 hover:bg-indigo-100"
 								on:click={addToBasket}
@@ -388,58 +359,28 @@
 								</svg>
 								Add to basket
 							</button>
-						{:else}
-							<button
-								class="group py-4 px-5 rounded-full bg-indigo-50 text-indigo-600 font-semibold text-lg w-full flex items-center justify-center gap-2 transition-all duration-500 hover:bg-indigo-100"
-							>
-								<svg
-									class="stroke-indigo-600"
-									width="22"
-									height="22"
-									viewBox="0 0 22 22"
-									fill="none"
-									xmlns="http://www.w3.org/2000/svg"
-								>
-									<path
-										d="M10.7394 17.875C10.7394 18.6344 10.1062 19.25 9.32511 19.25C8.54402 19.25 7.91083 18.6344 7.91083 17.875M16.3965 17.875C16.3965 18.6344 15.7633 19.25 14.9823 19.25C14.2012 19.25 13.568 18.6344 13.568 17.875M4.1394 5.5L5.46568 12.5908C5.73339 14.0221 5.86724 14.7377 6.37649 15.1605C6.88573 15.5833 7.61377 15.5833 9.06984 15.5833H15.2379C16.6941 15.5833 17.4222 15.5833 17.9314 15.1605C18.4407 14.7376 18.5745 14.0219 18.8421 12.5906L19.3564 9.84059C19.7324 7.82973 19.9203 6.8243 19.3705 6.16215C18.8207 5.5 17.7979 5.5 15.7522 5.5H4.1394ZM4.1394 5.5L3.66797 2.75"
-										stroke=""
-										stroke-width="1.6"
-										stroke-linecap="round"
-									/>
-								</svg>
-								You already own this
-							</button>
-						{/if}
 						</div>
 					{:else}
-						<div class="flex items-center gap-3">
-							<!-- <button
-							class="group transition-all duration-500 p-4 rounded-full bg-indigo-50 hover:bg-indigo-100 hover:shadow-sm hover:shadow-indigo-300"
-						>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								width="26"
-								height="26"
-								viewBox="0 0 26 26"
-								fill="none"
-							>
-								<path
-									d="M4.47084 14.3196L13.0281 22.7501L21.9599 13.9506M13.0034 5.07888C15.4786 2.64037 19.5008 2.64037 21.976 5.07888C24.4511 7.5254 24.4511 11.4799 21.9841 13.9265M12.9956 5.07888C10.5204 2.64037 6.49824 2.64037 4.02307 5.07888C1.54789 7.51738 1.54789 11.4799 4.02307 13.9184M4.02307 13.9184L4.04407 13.939M4.02307 13.9184L4.46274 14.3115"
-									stroke="#4F46E5"
-									stroke-width="1.6"
-									stroke-miterlimit="10"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-								/>
-							</svg>
-						</button> -->
-							<button
-								class="text-center w-full px-5 py-4 rounded-[100px] bg-indigo-600 flex items-center justify-center font-semibold text-lg text-white shadow-sm transition-all duration-500 hover:bg-indigo-700 hover:shadow-indigo-400"
-								on:click={startSubscription}
-							>
-								Subscribe
-							</button>
-						</div>
+						{#if hasPurchasedProduct}
+							<div class="flex items-center gap-3">
+								<button
+									class="group text-center w-full py-4 px-5 rounded-full bg-gray-100 text-gray-600 font-semibold text-lg w-full flex items-center justify-center gap-2 transition-all duration-500"
+									disabled
+								>
+									You already own this
+								</button>
+							</div>
+						{/if}
+						{#if item.isSubscription}
+							<div class="flex items-center gap-3">
+								<button
+									class="text-center w-full px-5 py-4 rounded-[100px] bg-indigo-600 flex items-center justify-center font-semibold text-lg text-white shadow-sm transition-all duration-500 hover:bg-indigo-700 hover:shadow-indigo-400"
+									on:click={startSubscription}
+								>
+									Subscribe
+								</button>
+							</div>
+						{/if}
 					{/if}
 				</div>
 			</div>