feat(#76): Add pagination for stripe orders on account page

src/lib/utils/supabase/admin.ts

@@ -590,7 +590,12 @@ const getUserSubscriptions = async (userId: string) => {
 	}
 };
 
-const getUserTransactions = async (userId: string) => {
+const getUserTransactions = async (
+	userId: string,
+	perPage: number,
+	startingAfter: string | undefined = undefined,
+	endingBefore: string | undefined = undefined
+) => {
 	try {
 		// Step 1: Retrieve the customer ID associated with the user
 		const { data, error } = await supabaseAdmin
@@ -610,10 +615,19 @@ const getUserTransactions = async (userId: string) => {
 		}
 
 		// Step 2: Fetch charge transactions from Stripe
-		const charges = await stripeClient.charges.list({ customer: customerId });
+		const params: stripe.ChargeListParams = {
+			customer: customerId,
+			limit: perPage
+		};
+
+		if (startingAfter) params.starting_after = startingAfter;
+		if (endingBefore) params.ending_before = endingBefore;
+
+		const charges = await stripeClient.charges.list(params);
 
 		// Step 3: Format transaction data
 		const transactions = charges.data.map((charge) => ({
+			id: charge.id,
 			amount: (charge.amount / 100).toFixed(2),
 			currency: charge.currency.toUpperCase(),
 			description: charge.description ?? 'No description provided',

src/routes/account/+page.server.ts

@@ -4,6 +4,8 @@ import logger from '$lib/utils/logger/logger';
 import { getUserSubscriptions, getUserTransactions } from '$lib/utils/supabase/admin';
 import { requestAccountDeletion } from '$lib/utils/supabase/admin';
 
+const transactionsPerPage = 5;
+
 export const load: PageServerLoad = async ({ locals: { supabase, safeGetSession } }) => {
 	const { session } = await safeGetSession();
 
@@ -19,9 +21,9 @@ export const load: PageServerLoad = async ({ locals: { supabase, safeGetSession
 
 	const subscriptions = await getUserSubscriptions(session.user.id);
 
-	const transactions = await getUserTransactions(session.user.id);
+	const transactions = await getUserTransactions(session.user.id, transactionsPerPage);
 
-	return { session, user, subscriptions, transactions };
+	return { session, user, subscriptions, transactions, pageSize: transactionsPerPage };
 };
 
 export const actions: Actions = {
@@ -78,5 +80,32 @@ export const actions: Actions = {
 		return {
 			name
 		};
+	},
+	paginate: async ({ request, locals: { safeGetSession } }) => {
+		const formData = await request.formData();
+		const pageSize = transactionsPerPage;
+		const startingAfter = formData.get('startingAfter')?.toString() || undefined;
+		const endingBefore = formData.get('endingBefore')?.toString() || undefined;
+
+		const { session } = await safeGetSession();
+		if (!session) return fail(401, { error: 'Not authenticated' });
+
+		try {
+			const transactions = await getUserTransactions(
+				session.user.id,
+				pageSize,
+				startingAfter,
+				endingBefore
+			);
+
+			const serializableTransactions = transactions.map((transaction) => ({ ...transaction }));
+
+			const stringifiedTransactions: string = JSON.stringify(serializableTransactions);
+
+			return { stringifiedTransactions };
+		} catch (error) {
+			logger.error('Failed to fetch transactions', { userId: session.user.id, error });
+			return fail(500, { error: 'Failed to load transactions' });
+		}
 	}
 };

src/routes/account/+page.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import { enhance } from '$app/forms';
 	import type { SubmitFunction } from '@sveltejs/kit';
 
 	export let data;
 	export let form;
 
-	let { session, user, subscriptions, transactions } = data;
-	$: ({ session, supabase, user } = data);
+	let { session, user, subscriptions, transactions, pageSize } = data;
+	$: ({ session, supabase, user, transactions } = data);
 
 	let profileForm: HTMLFormElement;
 	let loading = false;
@@ -39,6 +40,40 @@
 			loading = false;
 		};
 	};
+
+	// Track pagination IDs for Stripe-based pagination
+	let startingAfter: string | undefined = undefined;
+	let endingBefore: string | undefined = undefined;
+
+	// Function to trigger pagination
+	async function goToPage(direction: 'next' | 'previous') {
+		loading = true;
+
+		// Set up formData with appropriate IDs for pagination
+		const formData = new FormData();
+		if (direction === 'next' && transactions.length) {
+			startingAfter = transactions[transactions.length - 1].id;
+			formData.append('startingAfter', startingAfter);
+			endingBefore = undefined; // Reset `endingBefore` for forward navigation
+		} else if (direction === 'previous' && transactions.length) {
+			endingBefore = transactions[0].id;
+			formData.append('endingBefore', endingBefore);
+			startingAfter = undefined; // Reset `startingAfter` for backward navigation
+		}
+
+		// Fetch paginated transactions
+		const response = await fetch('/account?/paginate', {
+			method: 'POST',
+			body: formData
+		});
+
+		const result = await response.json();
+
+		// TODO - work out why the data comes back in such a weird format here
+		transactions = JSON.parse(JSON.parse(result.data)[1]);
+
+		loading = false;
+	}
 </script>
 
 <div
@@ -126,8 +161,9 @@
 			<!-- Billing History -->
 			<section class="space-y-4">
 				<h2 class="text-xl font-semibold">Billing History</h2>
-				<ul class="space-y-3">
-					{#if transactions}
+
+				{#if transactions && transactions.length > 0}
+					<ul class="space-y-3">
 						{#each transactions as transaction}
 							<li class="flex justify-between p-4 border border-gray-200 rounded-md">
 								<div>
@@ -146,8 +182,29 @@
 								{/if}
 							</li>
 						{/each}
-					{/if}
-				</ul>
+					</ul>
+				{:else}
+					<p class="text-gray-600">No transactions found.</p>
+				{/if}
+
+				<!-- Pagination Controls -->
+				<div class="flex justify-center items-center space-x-2 mt-4">
+					<button
+						class="btn btn-outline"
+						disabled={!transactions.length || loading}
+						on:click={() => goToPage('previous')}
+					>
+						Previous
+					</button>
+
+					<button
+						class="btn btn-outline"
+						disabled={!transactions.length || loading}
+						on:click={() => goToPage('next')}
+					>
+						Next
+					</button>
+				</div>
 			</section>
 		</div>