From e4ef3760646f13e3ff76fd603a0680ea80a135ec Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Tue, 29 Oct 2024 19:30:06 +0000
Subject: [PATCH 1/9] feat(#53): Add cookie and privacy policies

---
 src/routes/(policies)/cookies/+page.svelte |  85 ++++++++++++++
 src/routes/(policies)/privacy/+page.svelte | 125 +++++++++++++++++++++
 2 files changed, 210 insertions(+)
 create mode 100644 src/routes/(policies)/cookies/+page.svelte
 create mode 100644 src/routes/(policies)/privacy/+page.svelte

diff --git a/src/routes/(policies)/cookies/+page.svelte b/src/routes/(policies)/cookies/+page.svelte
new file mode 100644
index 0000000..511b4e0
--- /dev/null
+++ b/src/routes/(policies)/cookies/+page.svelte
@@ -0,0 +1,85 @@
+<div class="container mx-auto p-6">
+	<h1 class="text-3xl font-bold text-primary mb-4">Cookie Policy</h1>
+	<p class="text-gray-700 mb-6">Effective Date: <span class="font-semibold">[Insert Date]</span></p>
+
+	<section class="mb-6">
+		<h2 class="text-2xl font-semibold mb-2">1. Introduction</h2>
+		<p class="text-gray-600">
+			This Cookie Policy explains how [Your Company/Website Name] ("we", "us", or "our") uses
+			cookies and similar technologies to collect and store information when you visit our website.
+		</p>
+	</section>
+
+	<section class="mb-6">
+		<h2 class="text-2xl font-semibold mb-2">2. What Are Cookies?</h2>
+		<p class="text-gray-600">
+			Cookies are small text files stored on your device (computer, tablet, smartphone) by your web
+			browser when you visit a website. They help us remember your preferences and improve your
+			experience on our website.
+		</p>
+	</section>
+
+	<section class="mb-6">
+		<h2 class="text-2xl font-semibold mb-2">3. Types of Cookies We Use</h2>
+		<ul class="list-disc pl-6 text-gray-600">
+			<li>
+				<span class="font-semibold">Essential Cookies</span>: These cookies are necessary for the
+				website to function properly and cannot be disabled in our systems. They include login
+				authentication and session management cookies.
+			</li>
+			<li>
+				<span class="font-semibold">Performance Cookies</span>: These cookies help us understand how
+				visitors interact with our website by collecting information on usage patterns, such as
+				pages visited and links clicked.
+			</li>
+			<li>
+				<span class="font-semibold">Functional Cookies</span>: These cookies allow us to remember
+				choices you make (such as your language preference) to provide a more personalised
+				experience.
+			</li>
+			<li>
+				<span class="font-semibold">Targeting/Advertising Cookies</span>: These cookies are used to
+				deliver relevant advertisements and track the effectiveness of our marketing campaigns.
+			</li>
+		</ul>
+	</section>
+
+	<section class="mb-6">
+		<h2 class="text-2xl font-semibold mb-2">4. How We Use Cookies</h2>
+		<p class="text-gray-600">
+			We use cookies to improve the functionality and performance of our website, analyse visitor
+			usage, and provide personalised content and advertisements. This helps us improve our website
+			and better understand our audience.
+		</p>
+	</section>
+
+	<section class="mb-6">
+		<h2 class="text-2xl font-semibold mb-2">5. Managing Your Cookie Preferences</h2>
+		<p class="text-gray-600">
+			You have the right to accept or reject cookies. You can manage your cookie preferences by
+			adjusting your browser settings. However, disabling certain cookies may affect your experience
+			on our website. For specific instructions on managing cookies, please consult your browser's
+			help documentation.
+		</p>
+	</section>
+
+	<section class="mb-6">
+		<h2 class="text-2xl font-semibold mb-2">6. Changes to Our Cookie Policy</h2>
+		<p class="text-gray-600">
+			We may update this Cookie Policy from time to time. Significant changes will be posted on this
+			page. We encourage you to review this policy periodically to stay informed about our use of
+			cookies.
+		</p>
+	</section>
+
+	<section class="mb-6">
+		<h2 class="text-2xl font-semibold mb-2">Contact Us</h2>
+		<p class="text-gray-600">
+			For questions about our Cookie Policy, please contact us at <a
+				href="mailto:your-email@example.com"
+				class="text-primary font-semibold">[Your Contact Email]</a
+			>
+			or visit our <a href="/contact" class="text-primary font-semibold">Contact Page</a>.
+		</p>
+	</section>
+</div>
diff --git a/src/routes/(policies)/privacy/+page.svelte b/src/routes/(policies)/privacy/+page.svelte
new file mode 100644
index 0000000..6901837
--- /dev/null
+++ b/src/routes/(policies)/privacy/+page.svelte
@@ -0,0 +1,125 @@
+<div class="container mx-auto p-6">
+	<h1 class="text-3xl font-bold text-primary mb-4">Privacy Policy</h1>
+	<p class="text-gray-700 mb-6">Effective Date: <span class="font-semibold">[Insert Date]</span></p>
+
+	<section class="mb-6">
+		<h2 class="text-2xl font-semibold mb-2">1. Introduction</h2>
+		<p class="text-gray-600">
+			This Privacy Policy explains how we at [Your Company/Website Name] collect, use, and protect
+			your personal information when you visit our website. We are committed to safeguarding your
+			data and complying with relevant data protection laws, including the General Data Protection
+			Regulation (GDPR).
+		</p>
+	</section>
+
+	<section class="mb-6">
+		<h2 class="text-2xl font-semibold mb-2">2. Information We Collect</h2>
+		<p class="text-gray-600">
+			We collect personal and non-personal information to provide our services and enhance your
+			experience.
+		</p>
+		<ul class="list-disc pl-6 text-gray-600">
+			<li>
+				<span class="font-semibold">Personal Information</span>: Details like your name, email
+				address, and payment information collected when you make a purchase or create an account.
+			</li>
+			<li>
+				<span class="font-semibold">Usage Data</span>: Information such as IP address, browser type,
+				and browsing history for analytics and functionality.
+			</li>
+		</ul>
+	</section>
+
+	<section class="mb-6">
+		<h2 class="text-2xl font-semibold mb-2">3. How We Use Your Information</h2>
+		<ul class="list-disc pl-6 text-gray-600">
+			<li>To process orders and manage customer support.</li>
+			<li>To improve website functionality and provide a better user experience.</li>
+			<li>To send marketing emails, if you opt in (you may unsubscribe at any time).</li>
+		</ul>
+	</section>
+
+	<section class="mb-6">
+		<h2 class="text-2xl font-semibold mb-2">4. Sharing Information with Third Parties</h2>
+		<p class="text-gray-600">
+			We work with trusted third-party providers to offer secure services, such as payment
+			processing and authentication.
+		</p>
+		<div class="mt-4">
+			<h3 class="text-xl font-semibold">Stripe</h3>
+			<p class="text-gray-600">
+				For payment processing, we use <a
+					href="https://stripe.com"
+					target="_blank"
+					class="text-primary font-semibold">Stripe</a
+				>. Please refer to their
+				<a href="https://stripe.com/privacy" target="_blank" class="text-primary font-semibold"
+					>Privacy Policy</a
+				> for details.
+			</p>
+		</div>
+		<div class="mt-4">
+			<h3 class="text-xl font-semibold">Supabase</h3>
+			<p class="text-gray-600">
+				For database and authentication, we use <a
+					href="https://supabase.com"
+					target="_blank"
+					class="text-primary font-semibold">Supabase</a
+				>. See their
+				<a href="https://supabase.com/privacy" target="_blank" class="text-primary font-semibold"
+					>Privacy Policy</a
+				> for more information.
+			</p>
+		</div>
+	</section>
+
+	<section class="mb-6">
+		<h2 class="text-2xl font-semibold mb-2">5. Cookies and Tracking</h2>
+		<p class="text-gray-600">
+			We use cookies to provide essential site functionality, analytics, and improved user
+			experience. By continuing to use our site, you consent to our use of cookies. You can manage
+			your cookie preferences in your browser settings. For more details, please refer to our <a
+				href="/cookies"
+				class="text-primary font-semibold">Cookie Policy</a
+			>.
+		</p>
+	</section>
+
+	<section class="mb-6">
+		<h2 class="text-2xl font-semibold mb-2">6. Your Data Rights</h2>
+		<p class="text-gray-600">
+			Under GDPR, you have the right to access, correct, delete, and restrict the processing of your
+			personal data. To make a request, please contact us at <a
+				href="mailto:your-email@example.com"
+				class="text-primary font-semibold">[Your Contact Email]</a
+			>.
+		</p>
+	</section>
+
+	<section class="mb-6">
+		<h2 class="text-2xl font-semibold mb-2">7. Data Security</h2>
+		<p class="text-gray-600">
+			We take reasonable steps to protect your information through encryption and secure access
+			protocols. However, no online service can be 100% secure.
+		</p>
+	</section>
+
+	<section class="mb-6">
+		<h2 class="text-2xl font-semibold mb-2">8. Policy Updates</h2>
+		<p class="text-gray-600">
+			We may update this policy periodically. Significant changes will be posted on this page, so
+			please review it regularly.
+		</p>
+	</section>
+
+	<section class="mb-6">
+		<h2 class="text-2xl font-semibold mb-2">Contact Us</h2>
+		<p class="text-gray-600">
+			If you have questions about this Privacy Policy, please contact us at <a
+				href="mailto:your-email@example.com"
+				class="text-primary font-semibold">[Your Contact Email]</a
+			>
+			or visit our <a href="/contact" class="text-primary font-semibold">Contact Page</a>.
+		</p>
+	</section>
+</div>

From cb1321825d1eb4e1a538031dee923d03ba3dc693 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Wed, 30 Oct 2024 18:32:45 +0000
Subject: [PATCH 2/9] feat(#53): Add policy links to footer

---
 src/routes/+layout.svelte | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 9e50d24..7dfb5cd 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -195,8 +195,12 @@
 				d="M22.672 15.226l-2.432.811.841 2.515c.33 1.019-.209 2.127-1.23 2.456-1.15.325-2.148-.321-2.463-1.226l-.84-2.518-5.013 1.677.84 2.517c.391 1.203-.434 2.542-1.831 2.542-.88 0-1.601-.564-1.86-1.314l-.842-2.516-2.431.809c-1.135.328-2.145-.317-2.463-1.229-.329-1.018.211-2.127 1.231-2.456l2.432-.809-1.621-4.823-2.432.808c-1.355.384-2.558-.59-2.558-1.839 0-.817.509-1.582 1.327-1.846l2.433-.809-.842-2.515c-.33-1.02.211-2.129 1.232-2.458 1.02-.329 2.13.209 2.461 1.229l.842 2.515 5.011-1.677-.839-2.517c-.403-1.238.484-2.553 1.843-2.553.819 0 1.585.509 1.85 1.326l.841 2.517 2.431-.81c1.02-.33 2.131.211 2.461 1.229.332 1.018-.21 2.126-1.23 2.456l-2.433.809 1.622 4.823 2.433-.809c1.242-.401 2.557.484 2.557 1.838 0 .819-.51 1.583-1.328 1.847m-8.992-6.428l-5.01 1.675 1.619 4.828 5.011-1.674-1.62-4.829z"
 			></path>
 		</svg>
-		<p>Copyright © 2024 - All right reserved</p>
+		<p>Copyright © 2024 - All rights reserved</p>
 	</aside>
+	<div class="grid-flow-col gap-4">
+		<a href="/privacy">Privacy Policy</a>
+		<a href="/cookies">Cookie Policy</a>
+	</div>
 	<nav class="grid-flow-col gap-4 md:place-self-center md:justify-self-end">
 		<a href="/">
 			<svg

From 478ff600d30ad132f2575d2d3f29e6e327421ed4 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Wed, 30 Oct 2024 18:33:03 +0000
Subject: [PATCH 3/9] feat(#53): Add policy link to cookie consent banner

---
 src/lib/components/CookieConsent.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/CookieConsent.svelte b/src/lib/components/CookieConsent.svelte
index 09984b7..760cc72 100644
--- a/src/lib/components/CookieConsent.svelte
+++ b/src/lib/components/CookieConsent.svelte
@@ -21,7 +21,9 @@
 	<div class="fixed bottom-0 left-0 w-full bg-gray-800 text-white p-4">
 		<p class="text-sm">
 			We use cookies to ensure you get the best experience on our website. By continuing, you agree
-			to our use of cookies.
+			to our use of cookies. For details, please see our <a href="/privacy" class="underline"
+				>Privacy Policy</a
+			>.
 		</p>
 		<button class="bg-blue-500 hover:bg-blue-600 px-4 py-2 rounded" on:click={acceptCookies}
 			>Accept</button

From 3189d8932b7235f49f86d8ffefd1188d72409f10 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Fri, 1 Nov 2024 19:12:34 +0000
Subject: [PATCH 4/9] feat(#59): Add styling to account page

---
 src/routes/account/+page.svelte | 159 +++++++++++++++++++++++++-------
 1 file changed, 128 insertions(+), 31 deletions(-)

diff --git a/src/routes/account/+page.svelte b/src/routes/account/+page.svelte
index d133724..5435c0d 100644
--- a/src/routes/account/+page.svelte
+++ b/src/routes/account/+page.svelte
@@ -19,41 +19,138 @@
 		};
 	};
 
-	const handleSignOut: SubmitFunction = () => {
-		loading = true;
-		return async ({ update }) => {
-			loading = false;
-			update();
-		};
-	};
+	const subscriptions = [
+		{ name: 'Premium Plan', nextBillingDate: '12th August 2021' },
+		{ name: 'Basic Plan', nextBillingDate: '12th August 2021' }
+	];
+
+	const billingHistory = [
+		{ id: 123, date: '12th August 2021', amount: 9.99, downloadLink: '#' },
+		{ id: 122, date: '12th July 2021', amount: 9.99, downloadLink: '#' }
+	];
 </script>
 
-<div class="form-widget">
-	<form
-		class="form-widget"
-		method="post"
-		action="?/update"
-		use:enhance={handleSubmit}
-		bind:this={profileForm}
-	>
-		<div>
-			<label for="name">Name</label>
-			<input id="name" name="name" type="text" value={form?.name ?? name} />
+<div
+	class="account-page max-w-4xl mx-auto p-6 bg-base-100 rounded-lg shadow-md space-y-6 overflow-y-auto"
+>
+	<!-- Flex container for two columns -->
+	<div class="flex flex-col lg:flex-row gap-6">
+		<!-- Left Column: Account Overview, Active Subscriptions, and Billing History -->
+		<div class="flex-1 space-y-6">
+			<!-- Account Overview -->
+			<section class="space-y-4">
+				<h2 class="text-xl font-semibold">Account Overview</h2>
+				<div class="form-control">
+					<label for="email" class="label font-medium">Email</label>
+					<input
+						id="email"
+						type="email"
+						class="input input-bordered"
+						value={session.user.email}
+						disabled
+					/>
+				</div>
+				<div class="text-sm text-gray-500">Signed in with magic link.</div>
+				<form
+					class="form-widget space-y-4"
+					method="post"
+					action="?/update"
+					use:enhance={handleSubmit}
+					bind:this={profileForm}
+				>
+					<div class="form-control">
+						<label for="name" class="label font-medium">Name</label>
+						<input
+							id="name"
+							name="name"
+							type="text"
+							value={form?.name ?? name}
+							class="input input-bordered w-full"
+							placeholder="Enter your name"
+						/>
+					</div>
+
+					<div>
+						<input
+							type="submit"
+							class="btn btn-primary w-full"
+							value={loading ? 'Loading...' : 'Update Name'}
+							disabled={loading}
+						/>
+					</div>
+				</form>
+			</section>
+
+			<!-- Active Subscriptions -->
+			<section class="space-y-4">
+				<h2 class="text-xl font-semibold">Active Subscriptions</h2>
+				<ul class="space-y-3">
+					{#each subscriptions as subscription}
+						<li class="p-4 border border-gray-200 rounded-md">
+							<div class="flex items-center justify-between">
+								<div>
+									<p class="font-semibold">{subscription.name}</p>
+									<p class="text-sm text-gray-500">Renewal Date: {subscription.nextBillingDate}</p>
+								</div>
+								<button class="btn btn-secondary btn-sm">Manage</button>
+							</div>
+						</li>
+					{/each}
+				</ul>
+			</section>
+
+			<!-- Billing History -->
+			<section class="space-y-4">
+				<h2 class="text-xl font-semibold">Billing History</h2>
+				<ul class="space-y-3">
+					{#each billingHistory as invoice}
+						<li class="flex justify-between p-4 border border-gray-200 rounded-md">
+							<div>
+								<p class="font-semibold">Invoice #{invoice.id}</p>
+								<p class="text-sm text-gray-500">Date: {invoice.date}</p>
+								<p class="text-sm text-gray-500">Amount: £{invoice.amount}</p>
+							</div>
+							<a href={invoice.downloadLink} class="btn btn-outline btn-sm" target="_blank"
+								>Download</a
+							>
+						</li>
+					{/each}
+				</ul>
+			</section>
 		</div>
 
-		<div>
-			<input
-				type="submit"
-				class="button block primary"
-				value={loading ? 'Loading...' : 'Update'}
-				disabled={loading}
-			/>
-		</div>
-	</form>
+		<!-- Right Column: Notification Preferences and Feedback -->
+		<div class="flex-none w-full lg:w-64 space-y-6">
+			<!-- Notification Preferences -->
+			<section class="space-y-4">
+				<h2 class="text-xl font-semibold">Notification Preferences</h2>
+				<form method="post" action="?/update_notifications" class="space-y-2">
+					<label class="flex items-center space-x-3">
+						<input type="checkbox" class="checkbox checkbox-primary" />
+						<!-- checked={user.notifications.productUpdates} -->
+						<span>Product Updates</span>
+					</label>
+					<label class="flex items-center space-x-3">
+						<input type="checkbox" class="checkbox checkbox-primary" />
+						<!-- checked={user.notifications.billingReminders} -->
+						<span>Billing Reminders</span>
+					</label>
+					<label class="flex items-center space-x-3">
+						<input type="checkbox" class="checkbox checkbox-primary" />
+						<!-- checked={user.notifications.promotions} -->
+						<span>Promotional Emails</span>
+					</label>
+				</form>
+			</section>
 
-	<form method="post" action="?/signout" use:enhance={handleSignOut}>
-		<div>
-			<button class="button block" disabled={loading}>Sign Out</button>
+			<!-- Feedback Section -->
+			<section class="space-y-4">
+				<h2 class="text-xl font-semibold">Feedback</h2>
+				<p class="text-gray-600">
+					We'd love to hear your thoughts! Please feel free to provide any feedback.
+				</p>
+				<a href="/contact" class="btn btn-outline w-full">Provide Feedback</a>
+			</section>
 		</div>
-	</form>
+	</div>
 </div>

From f1f2fe99d755f562f8be27120d83257da4251c73 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Fri, 1 Nov 2024 20:12:08 +0000
Subject: [PATCH 5/9] feat(#59): Enable showing subscriptions and transactions

---
 src/lib/utils/supabase/admin.ts    | 94 +++++++++++++++++++++++++++++-
 src/routes/account/+page.server.ts | 20 +++++--
 src/routes/account/+page.svelte    | 67 +++++++++++----------
 3 files changed, 143 insertions(+), 38 deletions(-)

diff --git a/src/lib/utils/supabase/admin.ts b/src/lib/utils/supabase/admin.ts
index 4052695..4ae82d2 100644
--- a/src/lib/utils/supabase/admin.ts
+++ b/src/lib/utils/supabase/admin.ts
@@ -480,6 +480,96 @@ const getProductById = async (productId: string) => {
 	return product as Product;
 };
 
+const getUserSubscriptions = async (userId: string) => {
+	try {
+		// Step 1: Retrieve subscription data
+		const { data: subscriptions, error } = await supabaseAdmin
+			.from('subscriptions')
+			.select('*')
+			.eq('user_id', userId);
+
+		if (error) {
+			console.error('Error retrieving subscriptions:', error.message);
+			throw new Error('Failed to fetch subscriptions');
+		}
+
+		// Step 2: Map through each subscription and fetch product and price details
+		const subscriptionDetails = await Promise.all(
+			subscriptions.map(async (sub) => {
+				// Fetch product and price details from Stripe
+				const product = await stripeClient.products.retrieve(sub.product_id);
+				const price = await stripeClient.prices.retrieve(sub.price_id);
+
+				console.log(sub);
+
+				const expiryDate = new Date(sub.current_period_end);
+
+				// Format output data
+				return {
+					productName: product.name,
+					amount: (price.unit_amount / 100).toFixed(2),
+					currency: price.currency.toUpperCase(),
+					interval: price.recurring?.interval || 'one-time',
+					expiryDate: expiryDate.toLocaleDateString('en-GB', {
+						day: '2-digit',
+						month: '2-digit',
+						year: 'numeric'
+					}),
+					status: sub.status
+				};
+			})
+		);
+
+		return subscriptionDetails;
+	} catch (error) {
+		console.error('An error occurred while retrieving subscription details:', error);
+		throw new Error('Could not retrieve subscription details');
+	}
+};
+
+const getUserTransactions = async (userId: string) => {
+	try {
+		// Step 1: Retrieve the customer ID associated with the user
+		const { data, error } = await supabaseAdmin
+			.from('customers')
+			.select('stripe_customer_id')
+			.eq('id', userId)
+			.single();
+
+		if (error) {
+			console.error('Error retrieving user data:', error.message);
+			throw new Error('Failed to fetch user data');
+		}
+
+		const customerId = data?.stripe_customer_id;
+		if (!customerId) {
+			throw new Error('No Stripe customer ID found for this user');
+		}
+
+		// Step 2: Fetch charge transactions from Stripe
+		const charges = await stripeClient.charges.list({ customer: customerId });
+
+		// Step 3: Format transaction data
+		const transactions = charges.data.map((charge) => ({
+			amount: (charge.amount / 100).toFixed(2),
+			currency: charge.currency.toUpperCase(),
+			description: charge.description ?? 'No description provided',
+			status: charge.status,
+			created: new Date(charge.created * 1000).toLocaleDateString('en-GB', {
+				day: '2-digit',
+				month: '2-digit',
+				year: 'numeric'
+			}),
+			receipt_url: charge.receipt_url
+		}));
+
+		return transactions;
+	} catch (error) {
+		console.error('An error occurred while retrieving transactions:', error);
+		throw new Error('Could not retrieve transactions');
+	}
+};
+
 export {
 	upsertProductRecord,
 	upsertPriceRecord,
@@ -495,5 +585,7 @@ export {
 	getActiveProductsWithPrices,
 	getProductById,
 	upsertCustomerToSupabase,
-	getStripeCustomerId
+	getStripeCustomerId,
+	getUserSubscriptions,
+	getUserTransactions
 };
diff --git a/src/routes/account/+page.server.ts b/src/routes/account/+page.server.ts
index d839775..ba26c6a 100644
--- a/src/routes/account/+page.server.ts
+++ b/src/routes/account/+page.server.ts
@@ -1,5 +1,6 @@
 import { fail, redirect } from '@sveltejs/kit';
 import type { Actions, PageServerLoad } from './$types';
+import { getUserSubscriptions, getUserTransactions } from '$lib/utils/supabase/admin';
 
 export const load: PageServerLoad = async ({ locals: { supabase, safeGetSession } }) => {
 	const { session } = await safeGetSession();
@@ -14,7 +15,11 @@ export const load: PageServerLoad = async ({ locals: { supabase, safeGetSession
 		.eq('id', session.user.id)
 		.single();
 
-	return { session, user };
+	const subscriptions = await getUserSubscriptions(session.user.id);
+
+	const transactions = await getUserTransactions(session.user.id);
+
+	return { session, user, subscriptions, transactions };
 };
 
 export const actions: Actions = {
@@ -27,20 +32,23 @@ export const actions: Actions = {
 		if (!session) {
 			return fail(401, { name });
 		}
-		const { error } = await supabase.from('users').update({
-			name: name,
-		}).eq('id', session?.user.id);
+		const { error } = await supabase
+			.from('users')
+			.update({
+				name: name
+			})
+			.eq('id', session?.user.id);
 
 		console.error(error);
 
 		if (error) {
 			return fail(500, {
-				name,
+				name
 			});
 		}
 
 		return {
-			name,
+			name
 		};
 	},
 	signout: async ({ locals: { supabase, safeGetSession } }) => {
diff --git a/src/routes/account/+page.svelte b/src/routes/account/+page.svelte
index 5435c0d..a97b25e 100644
--- a/src/routes/account/+page.svelte
+++ b/src/routes/account/+page.svelte
@@ -5,7 +5,7 @@
 	export let data;
 	export let form;
 
-	let { session, supabase, user } = data;
+	let { session, user, subscriptions, transactions } = data;
 	$: ({ session, supabase, user } = data);
 
 	let profileForm: HTMLFormElement;
@@ -18,16 +18,6 @@
 			loading = false;
 		};
 	};
-
-	const subscriptions = [
-		{ name: 'Premium Plan', nextBillingDate: '12th August 2021' },
-		{ name: 'Basic Plan', nextBillingDate: '12th August 2021' }
-	];
-
-	const billingHistory = [
-		{ id: 123, date: '12th August 2021', amount: 9.99, downloadLink: '#' },
-		{ id: 122, date: '12th July 2021', amount: 9.99, downloadLink: '#' }
-	];
 </script>
 
 <div
@@ -35,7 +25,7 @@
 >
 	<!-- Flex container for two columns -->
 	<div class="flex flex-col lg:flex-row gap-6">
-		<!-- Left Column: Account Overview, Active Subscriptions, and Billing History -->
+		<!-- Left Column: Account Overview, Subscriptions, and Billing History -->
 		<div class="flex-1 space-y-6">
 			<!-- Account Overview -->
 			<section class="space-y-4">
@@ -83,35 +73,50 @@
 
 			<!-- Active Subscriptions -->
 			<section class="space-y-4">
-				<h2 class="text-xl font-semibold">Active Subscriptions</h2>
-				<ul class="space-y-3">
-					{#each subscriptions as subscription}
-						<li class="p-4 border border-gray-200 rounded-md">
-							<div class="flex items-center justify-between">
-								<div>
-									<p class="font-semibold">{subscription.name}</p>
-									<p class="text-sm text-gray-500">Renewal Date: {subscription.nextBillingDate}</p>
+				<h2 class="text-xl font-semibold">Subscriptions</h2>
+				{#if subscriptions.length === 0}
+					<p class="text-gray-600">You do not have any subscriptions.</p>
+				{:else}
+					<ul class="space-y-3">
+						{#each subscriptions as subscription}
+							<li class="p-4 border border-gray-200 rounded-md">
+								<div class="flex items-center justify-between">
+									<div>
+										<p class="font-semibold">{subscription.productName}</p>
+										<p class="text-sm text-gray-500">
+											Price: {subscription.amount}
+											{subscription.currency} / {subscription.interval}
+										</p>
+										<p class="text-sm text-gray-500">
+											Expiry Date: {subscription.expiryDate}
+										</p>
+										<p class="text-sm text-gray-500">
+											Status: {subscription.status}
+										</p>
+									</div>
+									<!-- <button class="btn btn-secondary btn-sm">Manage</button> -->
 								</div>
-								<button class="btn btn-secondary btn-sm">Manage</button>
-							</div>
-						</li>
-					{/each}
-				</ul>
+							</li>
+						{/each}
+					</ul>
+				{/if}
 			</section>
 
 			<!-- Billing History -->
 			<section class="space-y-4">
 				<h2 class="text-xl font-semibold">Billing History</h2>
 				<ul class="space-y-3">
-					{#each billingHistory as invoice}
+					{#each transactions as transaction}
 						<li class="flex justify-between p-4 border border-gray-200 rounded-md">
 							<div>
-								<p class="font-semibold">Invoice #{invoice.id}</p>
-								<p class="text-sm text-gray-500">Date: {invoice.date}</p>
-								<p class="text-sm text-gray-500">Amount: £{invoice.amount}</p>
+								<p class="text-sm text-gray-500">Date: {transaction.created}</p>
+								<p class="text-sm text-gray-500">
+									Amount: {transaction.amount}
+									{transaction.currency}
+								</p>
 							</div>
-							<a href={invoice.downloadLink} class="btn btn-outline btn-sm" target="_blank"
-								>Download</a
+							<a href={transaction.receipt_url} class="btn btn-outline btn-sm" target="_blank"
+								>Download Receipt</a
 							>
 						</li>
 					{/each}

From 3bbbd340c5f179db69e489779f6dd11c17e34bb9 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Mon, 4 Nov 2024 18:50:19 +0000
Subject: [PATCH 6/9] chore(#59): Improve clarity of error logs

---
 src/routes/account/+page.server.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/routes/account/+page.server.ts b/src/routes/account/+page.server.ts
index ba26c6a..1bb24b5 100644
--- a/src/routes/account/+page.server.ts
+++ b/src/routes/account/+page.server.ts
@@ -39,11 +39,13 @@ export const actions: Actions = {
 			})
 			.eq('id', session?.user.id);
 
-		console.error(error);
+		console.error('Failed to update user:', error);
 
 		if (error) {
 			return fail(500, {
-				name
+				name,
+				message: 'Failed to update profile',
+				error: error.message
 			});
 		}
 

From de565bb965b2cdcba35a03e590ab4af02ec931a1 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Mon, 4 Nov 2024 18:51:57 +0000
Subject: [PATCH 7/9] chore(#59): Remove debugging log

---
 src/lib/utils/supabase/admin.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/lib/utils/supabase/admin.ts b/src/lib/utils/supabase/admin.ts
index 4ae82d2..9709c98 100644
--- a/src/lib/utils/supabase/admin.ts
+++ b/src/lib/utils/supabase/admin.ts
@@ -500,8 +500,6 @@ const getUserSubscriptions = async (userId: string) => {
 				const product = await stripeClient.products.retrieve(sub.product_id);
 				const price = await stripeClient.prices.retrieve(sub.price_id);
 
-				console.log(sub);
-
 				const expiryDate = new Date(sub.current_period_end);
 
 				// Format output data

From 506ceefe26fc4d38292c70d8bc3bbd9943de5ef7 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Mon, 4 Nov 2024 18:56:56 +0000
Subject: [PATCH 8/9] refactor(#59): Validate receipt links before showing the
 buttons

---
 src/routes/account/+page.svelte | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/routes/account/+page.svelte b/src/routes/account/+page.svelte
index a97b25e..df1c19e 100644
--- a/src/routes/account/+page.svelte
+++ b/src/routes/account/+page.svelte
@@ -115,9 +115,13 @@
 									{transaction.currency}
 								</p>
 							</div>
-							<a href={transaction.receipt_url} class="btn btn-outline btn-sm" target="_blank"
-								>Download Receipt</a
-							>
+							{#if transaction.receipt_url}
+								<a href={transaction.receipt_url} class="btn btn-outline btn-sm" target="_blank">
+									Download Receipt
+								</a>
+							{:else}
+								<span class="text-gray-500">Receipt unavailable</span>
+							{/if}
 						</li>
 					{/each}
 				</ul>

From ad30f040789d520fbb97a4243ec2fb39ad3523c9 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Mon, 4 Nov 2024 19:00:23 +0000
Subject: [PATCH 9/9] refactor(#59): Verify that 'transactions' is always
 defined before iteration

---
 src/routes/account/+page.svelte | 38 +++++++++++++++++----------------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/routes/account/+page.svelte b/src/routes/account/+page.svelte
index df1c19e..b5f8524 100644
--- a/src/routes/account/+page.svelte
+++ b/src/routes/account/+page.svelte
@@ -106,24 +106,26 @@
 			<section class="space-y-4">
 				<h2 class="text-xl font-semibold">Billing History</h2>
 				<ul class="space-y-3">
-					{#each transactions as transaction}
-						<li class="flex justify-between p-4 border border-gray-200 rounded-md">
-							<div>
-								<p class="text-sm text-gray-500">Date: {transaction.created}</p>
-								<p class="text-sm text-gray-500">
-									Amount: {transaction.amount}
-									{transaction.currency}
-								</p>
-							</div>
-							{#if transaction.receipt_url}
-								<a href={transaction.receipt_url} class="btn btn-outline btn-sm" target="_blank">
-									Download Receipt
-								</a>
-							{:else}
-								<span class="text-gray-500">Receipt unavailable</span>
-							{/if}
-						</li>
-					{/each}
+					{#if transactions}
+						{#each transactions as transaction}
+							<li class="flex justify-between p-4 border border-gray-200 rounded-md">
+								<div>
+									<p class="text-sm text-gray-500">Date: {transaction.created}</p>
+									<p class="text-sm text-gray-500">
+										Amount: {transaction.amount}
+										{transaction.currency}
+									</p>
+								</div>
+								{#if transaction.receipt_url}
+									<a href={transaction.receipt_url} class="btn btn-outline btn-sm" target="_blank">
+										Download Receipt
+									</a>
+								{:else}
+									<span class="text-gray-500">Receipt unavailable</span>
+								{/if}
+							</li>
+						{/each}
+					{/if}
 				</ul>
 			</section>
 		</div>