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
This commit is contained in:
2026-06-05 21:07:13 +01:00
parent 0d4a74bd4a
commit 883fd3076a
+21 -1
View File
@@ -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)}`}