feat(#11): Add the description and fetching the images from Stripe on checkout success page

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

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}