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:
@@ -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)}`}
|
||||
|
||||
Reference in New Issue
Block a user