Fix regression: UserPaymentModal 'Use a new card' overridden by auto-select effect
Move the saved-card auto-select effect INTO CardSelection, where it owns both
cards and showNewCardForm. The effect is guarded by !showNewCardForm so the
'Use a new card' click (selectedCardId = '') is not immediately re-set to the
default card — previously the parent's unguarded effect (moved from the OLD
showNewCardForm guard during the CardSelection refactor) silently charged the
saved default card instead of the newly entered card.
CardSelection mounts fresh each time the modal opens (conditional {#if}
mounting in UserBookingModal and BookingFlow), so the auto-select fires once
on load, exactly like the tip flows' one-shot load-time selection.
This commit is contained in:
@@ -36,6 +36,17 @@
|
||||
// When no saved cards exist the form shows by default.
|
||||
let showNewCardForm = $state(false);
|
||||
|
||||
// Auto-select the default saved card when cards first load. Guarded by
|
||||
// !showNewCardForm so the "Use a new card" click (selectedCardId = '') is
|
||||
// NOT immediately overridden back to the default card — which would
|
||||
// silently charge the wrong card on submit.
|
||||
$effect(() => {
|
||||
if (cards.length > 0 && !selectedCardId && !showNewCardForm) {
|
||||
const defaultCard = cards.find((c) => c.is_default) ?? cards[0];
|
||||
selectedCardId = defaultCard.id;
|
||||
}
|
||||
});
|
||||
|
||||
// Blur-based validation state (matches the pattern used across all card flows)
|
||||
let cardNumberTouched = $state(false);
|
||||
let cardExpiryTouched = $state(false);
|
||||
|
||||
@@ -46,14 +46,6 @@
|
||||
let stamps = $state(0);
|
||||
let useLoyalty = $state(false);
|
||||
|
||||
// Auto-select first saved card when methods load
|
||||
$effect(() => {
|
||||
if (paymentMethods.length > 0 && !selectedCardId) {
|
||||
const defaultCard = paymentMethods.find((m) => m.is_default) ?? paymentMethods[0];
|
||||
selectedCardId = defaultCard.id;
|
||||
}
|
||||
});
|
||||
|
||||
// New card form fields (bound into CardSelection)
|
||||
let newCardNumber = $state('');
|
||||
let newCardExpiry = $state('');
|
||||
|
||||
Reference in New Issue
Block a user