From 7825d29081278d42eb19efcd6c91feb9e4b779fe Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Tue, 22 Oct 2024 18:40:32 +0100
Subject: [PATCH 1/2] feat(#11): Add the description and fetching the images
 from Stripe on checkout success page

---
 .../checkout/OrderConfirmationItem.svelte     |  6 +++---
 src/lib/utils/supabase/admin.ts               | 17 ++++++++++++++++-
 .../success/{+page.ts => +page.server.ts}     | 19 ++++++++++++++-----
 src/routes/checkout/success/+page.svelte      |  8 +++++---
 4 files changed, 38 insertions(+), 12 deletions(-)
 rename src/routes/checkout/success/{+page.ts => +page.server.ts} (51%)

diff --git a/src/lib/components/checkout/OrderConfirmationItem.svelte b/src/lib/components/checkout/OrderConfirmationItem.svelte
index 67381a4..633d591 100644
--- a/src/lib/components/checkout/OrderConfirmationItem.svelte
+++ b/src/lib/components/checkout/OrderConfirmationItem.svelte
@@ -2,7 +2,7 @@
 	import { formatCurrency } from '$lib/utils/currency';
 	export let imgAlt = '';
 	export let imgSrc = '';
-	// export let itemCategoryDescription = '';
+	export let itemCategoryDescription = '';
 	export let itemName = '';
 	export let price = 0;
 	export let quantity = 0;
@@ -20,11 +20,11 @@
 			<h5 class="font-semibold text-xl leading-8 text-black max-[550px]:text-center">
 				{itemName}
 			</h5>
-			<!-- <p
+			<p
 				class="font-normal text-lg leading-8 text-gray-500 my-2 min-[550px]:my-3 max-[550px]:text-center"
 			>
 				{itemCategoryDescription}
-			</p> -->
+			</p>
 
 			<div class="flex items-center">
 				<h6
diff --git a/src/lib/utils/supabase/admin.ts b/src/lib/utils/supabase/admin.ts
index 63f5c0b..dff5cc0 100644
--- a/src/lib/utils/supabase/admin.ts
+++ b/src/lib/utils/supabase/admin.ts
@@ -441,6 +441,20 @@ const getActiveProductsWithPrices = async (limit = 10, offset = 0) => {
 	return { products: products as ProductWithPrices[], count };
 };
 
+const getProductById = async (productId: string) => {
+	const { data: product, error } = await supabaseAdmin
+		.from('products')
+		.select('*')
+		.eq('id', productId)
+		.single();
+
+	if (error) {
+		throw new Error(`Error fetching product: ${error.message}`);
+	}
+
+	return product as Product;
+};
+
 export {
 	upsertProductRecord,
 	upsertPriceRecord,
@@ -453,5 +467,6 @@ export {
 	addCredits,
 	deductCredits,
 	getUserCredits,
-	getActiveProductsWithPrices
+	getActiveProductsWithPrices,
+	getProductById
 };
diff --git a/src/routes/checkout/success/+page.ts b/src/routes/checkout/success/+page.server.ts
similarity index 51%
rename from src/routes/checkout/success/+page.ts
rename to src/routes/checkout/success/+page.server.ts
index 82c4ce4..54a41c5 100644
--- a/src/routes/checkout/success/+page.ts
+++ b/src/routes/checkout/success/+page.server.ts
@@ -1,9 +1,9 @@
-import type { PageLoad } from './$types';
 import { redirect } from '@sveltejs/kit';
 import Stripe from 'stripe';
+import { getProductById } from '$lib/utils/supabase/admin';
 
-export const load: PageLoad = async ({fetch}) => {
-  const response = await fetch('/api/checkout/status');
+export const load = async ({ fetch }) => {
+	const response = await fetch('/api/checkout/status');
 	if (!response.ok) {
 		console.error('Failed to fetch checkout status');
 		return;
@@ -18,10 +18,19 @@ export const load: PageLoad = async ({fetch}) => {
 		throw redirect(303, '/checkout/cancelled');
 	}
 
+	for (const lineItem of lineItems as LineItemForCheckout[]) {
+		const product = await getProductById(lineItem.price?.product.toString() ?? '');
+		lineItem.imgSrc = product.images ? product.images[0] : '';
+		lineItem.productDescription = product.description ?? '';
+	}
+
 	return {
 		checkoutSession,
-		lineItems,
-		paymentStatus
+		lineItems
 	};
 };
 
+type LineItemForCheckout = Stripe.LineItem & {
+	imgSrc: string;
+	productDescription: string;
+};
diff --git a/src/routes/checkout/success/+page.svelte b/src/routes/checkout/success/+page.svelte
index b4ff15f..40cd632 100644
--- a/src/routes/checkout/success/+page.svelte
+++ b/src/routes/checkout/success/+page.svelte
@@ -11,7 +11,7 @@
 		localBasket = value;
 	});
 
-	let { checkoutSession, lineItems, paymentStatus } = data;
+	let { checkoutSession, lineItems } = data;
 
 	onDestroy(unsubscribe);
 
@@ -64,13 +64,15 @@
 				>
 			</div> -->
 			<div class="w-full px-3 min-[400px]:px-6">
-				{#if lineItems.length == 0}
+				{#if lineItems !== undefined && lineItems.length == 0}
 					<p class="font-semibold text-lg leading-7 text-black text-center">
 						No items in the basket
 					</p>
-				{:else}
+				{:else if lineItems !== undefined}
 					{#each lineItems as item (item.id)}
 						<OrderConfirmationItem
+							imgSrc={item.imgSrc}
+							itemCategoryDescription={item.productDescription}
 							itemName={item.description}
 							price={item.price.unit_amount / 100}
 							quantity={item.quantity}

From 5744ad4db8983165ce549b7372cc8f3de8744aa9 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Tue, 22 Oct 2024 19:39:57 +0100
Subject: [PATCH 2/2] fix(*): Fix merge

---
 src/routes/checkout/success/+page.server.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/checkout/success/+page.server.ts b/src/routes/checkout/success/+page.server.ts
index fd0a112..8d1ee5e 100644
--- a/src/routes/checkout/success/+page.server.ts
+++ b/src/routes/checkout/success/+page.server.ts
@@ -2,7 +2,7 @@ import { redirect } from '@sveltejs/kit';
 import Stripe from 'stripe';
 import { getProductById } from '$lib/utils/supabase/admin';
 
-export const load: PageLoad = async ({ fetch }) => {
+export const load = async ({ fetch }) => {
 	const response = await fetch('/api/checkout/status');
 	if (!response.ok) {
 		console.error('Failed to fetch checkout status');