Merge pull request #47 from jcreek/11-add-the-description-and-fetching-the-images-from-stripe-on-checkout-success-page

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

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

src/lib/utils/supabase/admin.ts

@@ -466,6 +466,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,
@@ -479,6 +493,7 @@ export {
 	deductCredits,
 	getUserCredits,
 	getActiveProductsWithPrices,
+	getProductById,
 	upsertCustomerToSupabase,
 	getStripeCustomerId
 };

src/routes/checkout/success/+page.server.ts

@@ -1,8 +1,8 @@
-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 }) => {
+export const load = async ({ fetch }) => {
 	const response = await fetch('/api/checkout/status');
 	if (!response.ok) {
 		console.error('Failed to fetch checkout status');
@@ -18,6 +18,12 @@ 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 ?? '';
+	}
+
 	// Save the stripe customer id in the customers table
 	const stripeCustomerId = checkoutSession.customer as string;
 	const createCustomerResponse = await fetch(
@@ -29,7 +35,11 @@ export const load: PageLoad = async ({ fetch }) => {
 
 	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}