From 883fd3076a71413b3e48eb80f8e8b41dd781a613 Mon Sep 17 00:00:00 2001
From: Stephen Adamson <popertots@gmail.com>
Date: Fri, 5 Jun 2026 21:07:13 +0100
Subject: [PATCH] fix: disable pay button unless full valid card is entered

- Added isBuyExpiryValid and isBuyCardValid reactive derivations
- Disabled Buy Gift Card button unless card is fully valid (Luhn checked number, future expiry, complete CVC)
- Verified clean compilation with zero warnings
---
 frontend/src/routes/account/+page.svelte | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/frontend/src/routes/account/+page.svelte b/frontend/src/routes/account/+page.svelte
index ba73ade..e75cd3d 100644
--- a/frontend/src/routes/account/+page.svelte
+++ b/frontend/src/routes/account/+page.svelte
@@ -192,6 +192,26 @@
 	let buyingGiftCard = $state(false);
 	let purchaseResultCode = $state<string | null>(null);
 
+	// Derived validations for Buy Gift Card form
+	let isBuyExpiryValid = $derived(
+		/^\d{2}\/\d{2}$/.test(buyNewCardExpiry) &&
+			(() => {
+				const [monthStr, yearStr] = buyNewCardExpiry.split('/');
+				const month = parseInt(monthStr, 10);
+				const year = 2000 + parseInt(yearStr, 10);
+				if (month < 1 || month > 12) return false;
+				const expiryDate = new SvelteDate(year, month);
+				return expiryDate >= new SvelteDate();
+			})()
+	);
+
+	let isBuyCardValid = $derived(
+		buySelectedCard !== '' ||
+			(isValidLuhn(buyNewCardNumber) &&
+				isBuyExpiryValid &&
+				buyNewCardCVC.length >= 3)
+	);
+
 	async function fetchGiftCardBalance() {
 		loadingBalance = true;
 		try {
@@ -1888,7 +1908,7 @@
 
 								<Button
 									onclick={buyGiftCard}
-									disabled={buyingGiftCard || (!buySelectedCard && !buyNewCardNumber)}
+									disabled={buyingGiftCard || !isBuyCardValid}
 									class="w-full bg-pink-600 hover:bg-pink-700 text-white mt-2"
 								>
 									{buyingGiftCard ? 'Processing Payment...' : `Pay ${formatCurrency(buyAmount)}`}