popertots/Crussell
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix payment review round: till integrity, HTTP client tests, concurrency tests, card-selection consolidation

Browse Source 
Addresses the payment review (all 10 blocking + 2 minor findings):

Till money-integrity (CreateTillSale):
- Add pg_advisory_lock on the idempotency key (concurrent same-key double-funding race)
- Guard amount on pending-reuse retry (mirrors tip/gift-card guards)
- Explicitly complete the row for cash/on_the_house pending-reuse
- Reject method-switch on a live card-machine checkout (double-charge guard)
- 3 regression tests (amount-mismatch, cash-completes-row, method-switch)

BookingFlow:
- Fetch saved cards at the deposit step (was dead code)
- Charge the server-computed deposit_amount, not the client estimate

HTTP client tests (was untested): doJSON error parsing, refund sentinel
classification, payment/refund/card wire shapes, checkout polling states,
list-refunds pagination + 20-page guard, sha256 card idempotency key

Concurrency regression tests: real two-goroutine races for BuyGiftCard,
tip, and booking-payment locks asserting exactly-one record each

Frontend:
- Fix CRIT-1: zero-saved-card users blocked (all flows now handle it)
- Consolidate tip/deposit/Buy-Gift-Card card UI onto CardSelection
- Explicit save-card consent checkbox (was silent/inconsistent)
- Fix stale saved-card field names in BookingFlow (last4 -> last_4)
- Unique instance ids (crypto.randomUUID) in CardSelection/SquareCardInput
- UserPaymentModal: keep card form mounted on error + Try Again button

Health/docs: /api/health reports square state (mock/ok, was not_implemented),
close P1 backlog, correct stale webhook and env-var claims
This commit is contained in:
popertots
2026-08-22 00:34:49 +01:00
parent 64d4b65083
commit 53ca89603d
18 changed files with 1330 additions and 480 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/account/UserBookingModal.svelte
+20 -89
View File
@@ -15,10 +15,7 @@
import { computeBalanceDue } from '$lib/utils/booking';
import { parseWallClockDate } from '$lib/utils/timeSlots';
import type { Booking, BookingDiscount, Payment } from '$lib/types/booking';
import CardBrandIcon from '$lib/components/payments/CardBrandIcon.svelte';
import CardEntryUnavailable from '$lib/components/payments/CardEntryUnavailable.svelte';
import SquareCardInput from '$lib/components/payments/SquareCardInput.svelte';
import { isSquareConfigured } from '$lib/square/square';
import CardSelection from '$lib/components/payments/CardSelection.svelte';
import { savedCardsStore, type SavedCard } from '$lib/stores/savedCards.svelte';
interface Props {
open: boolean;
@@ -147,13 +144,13 @@
let tipIdempotencyKey = $state('');
let tipKeyedAmount = $state(0);
// Card selection state for tips
// Card selection for tips — delegated to CardSelection.svelte.
let tipSavedCards = $state<SavedCard[]>([]);
let tipLoadingCards = $state(false);
let tipSelectedCardId = $state<string | null>(null);
let tipShowNewCardForm = $state(false);
let tipSquareCardReady = $state(false);
let tipSquareCardInput = $state<SquareCardInput | null>(null);
let tipCardSelection = $state<CardSelection | null>(null);
let tipSelectedCardId = $state('');
let tipCardSelectionValid = $state(false);
let tipSaveCard = $state(false);
// Cached nonce: tokenization is one-shot — a retry reuses this token instead
// of re-tokenizing (the backend idempotency key dedups).
let tipNonce = $state('');
@@ -162,9 +159,7 @@
authStore.currentUser?.role === 'verified_email' || authStore.currentUser?.role === 'affiliate'
);
const isTipCardValid = $derived(
tipSelectedCardId !== null || (tipShowNewCardForm && tipSquareCardReady)
);
const isTipCardValid = $derived(tipCardSelectionValid);
const tipPresets = $derived(
selectedBooking
@@ -233,11 +228,11 @@
let newCardToken: string | undefined;
if (tipSelectedCardId) {
// saved card — nothing to tokenize
} else if (tipShowNewCardForm && tipSquareCardInput) {
} else if (tipCardSelection) {
// New-card mode: tokenize once per attempt, reuse the nonce on retry.
if (!tipNonce) {
try {
tipNonce = await tipSquareCardInput.tokenize();
tipNonce = await tipCardSelection.tokenize();
} catch (err) {
toast.error(err instanceof Error ? err.message : 'Card entry failed');
return;
@@ -260,7 +255,7 @@
amount: Math.round(tipAmount * 100),
idempotency_key: tipIdempotencyKey,
...(tipSelectedCardId ? { card_id: tipSelectedCardId } : {}),
...(newCardToken ? { new_card_token: newCardToken, save_card: false } : {})
...(newCardToken ? { new_card_token: newCardToken, save_card: tipSaveCard } : {})
};
const response = await apiFetch(`/api/bookings/${selectedBooking.id}/tip`, {
@@ -1112,8 +1107,8 @@ ${hasVAT ? `<p class="warning">VAT is included at ${biz?.default_vat_rate ?? 20}
customTipInput = '';
tipIdempotencyKey = '';
tipKeyedAmount = 0;
tipSelectedCardId = null;
tipShowNewCardForm = false;
tipSelectedCardId = '';
tipSaveCard = false;
tipNonce = '';
}
}}
@@ -1169,79 +1164,15 @@ ${hasVAT ? `<p class="warning">VAT is included at ${biz?.default_vat_rate ?? 20}
{#if tipLoadingCards}
<div class="py-2 text-center text-sm text-gray-500">Loading payment methods...</div>
{:else if tipSavedCards.length > 0}
<div class="space-y-2">
{#each tipSavedCards as card (card.id)}
<button
type="button"
class="flex w-full items-center justify-between rounded-lg border p-3 text-left {tipSelectedCardId ===
card.id && !tipShowNewCardForm
? 'border-input bg-accent'
: 'border-gray-200 hover:bg-gray-50'}"
onclick={() => {
tipSelectedCardId = card.id;
tipShowNewCardForm = false;
tipNonce = '';
}}
>
<div class="flex items-center gap-3">
<CardBrandIcon brand={card.brand} />
<div class="text-sm">
<span class="font-mono">**** {card.last_4}</span>
<span class="ml-2 text-xs text-gray-400"
>Exp {String(card.exp_month).padStart(2, '0')}/{card.exp_year}</span
>
</div>
</div>
{#if tipSelectedCardId === card.id && !tipShowNewCardForm}
<span class="text-xs font-semibold text-primary">Selected</span>
{/if}
</button>
{/each}
<button
type="button"
class="flex w-full items-center justify-between rounded-lg border p-3 text-left {tipShowNewCardForm
? 'border-input bg-accent'
: 'border-gray-200 hover:bg-gray-50'}"
onclick={() => {
tipSelectedCardId = null;
tipNonce = '';
tipShowNewCardForm = !tipShowNewCardForm;
}}
>
<div class="flex items-center gap-3">
<div
class="flex h-8 min-w-12 items-center justify-center rounded border border-dashed border-gray-300 text-xs font-medium text-gray-400"
>
NEW
</div>
<span class="animate-pulse text-sm font-medium text-gray-700">Use a new card</span>
</div>
{#if tipShowNewCardForm}
<span class="text-xs font-semibold text-primary">Selected</span>
{/if}
</button>
</div>
{:else}
{#if isSquareConfigured()}
<SquareCardInput
bind:this={tipSquareCardInput}
onReady={(r) => (tipSquareCardReady = r)}
/>
{:else}
<CardEntryUnavailable />
{/if}
{/if}
{#if tipSavedCards.length > 0 && tipShowNewCardForm}
{#if isSquareConfigured()}
<SquareCardInput
bind:this={tipSquareCardInput}
onReady={(r) => (tipSquareCardReady = r)}
/>
{:else}
<CardEntryUnavailable />
{/if}
<CardSelection
bind:this={tipCardSelection}
cards={tipSavedCards}
{canSaveCards}
bind:selectedCardId={tipSelectedCardId}
bind:saveCard={tipSaveCard}
onValidityChange={(v) => (tipCardSelectionValid = v)}
/>
{/if}
</div>
</div>
frontend/src/lib/components/booking/BookingFlow.svelte
+74 -103
View File
@@ -36,9 +36,7 @@
import DatePicker from '$lib/components/booking/DatePicker.svelte';
import TimeSlotPicker from '$lib/components/booking/TimeSlotPicker.svelte';
import ServiceSelector from '$lib/components/booking/ServiceSelector.svelte';
import CardEntryUnavailable from '$lib/components/payments/CardEntryUnavailable.svelte';
import SquareCardInput from '$lib/components/payments/SquareCardInput.svelte';
import { isSquareConfigured } from '$lib/square/square';
import CardSelection from '$lib/components/payments/CardSelection.svelte';
import PolicyPopover from '$lib/components/ui/policyPopover.svelte';
import { POLICY } from '$lib/constants/policy';
import UserPaymentModal from '$lib/components/payments/UserPaymentModal.svelte';
@@ -84,16 +82,24 @@
// =============== Payment State ===============
let userDepositsRequired = $state<number>(0);
let hasActiveBooking = $state<boolean>(false);
// Saved cards, in the API shape (last_4/exp_month/exp_year) — consumed by
// CardSelection.svelte which renders the list, new-card toggle, and consent.
let paymentMethods = $state<
Array<{ id: string; brand: string; last4: string; expiry_month: number; expiry_year: number }>
Array<{
id: string;
brand: string;
last_4: string;
exp_month: number;
exp_year: number;
is_default?: boolean;
}>
>([]);
let paymentMethodsLoading = $state(false);
let selectedPaymentMethod = $state<string | null>(null);
let selectedPaymentMethod = $state('');
let paymentCardSelection = $state<CardSelection | null>(null);
let paymentCardSelectionValid = $state(false);
let depositSaveCard = $state(false);
let isProcessingPayment = $state(false);
// New-card mode (Square Web Payments tokenization)
let showNewCardForm = $state(false);
let squareCardReady = $state(false);
let squareCardInput = $state<SquareCardInput | null>(null);
// Cached nonce: tokenization is one-shot — a retry reuses this token instead
// of re-tokenizing (the backend idempotency key dedups).
let depositNonce = $state('');
@@ -106,15 +112,11 @@
// Payment flow state
let depositPaid = $state(false);
// New-card form is active when toggled, or implicitly when there is no saved
// card to pick (guest flow / no saved cards yet).
const newCardMode = $derived(
showNewCardForm || !authStore.isAuthenticated || paymentMethods.length === 0
const canSaveCards = $derived(
authStore.currentUser?.role === 'verified_email' || authStore.currentUser?.role === 'affiliate'
);
const depositCardFormValid = $derived(
selectedPaymentMethod !== null || (newCardMode && squareCardReady)
);
const depositCardFormValid = $derived(paymentCardSelectionValid);
// VAT registration status from public business info (via shared store)
const vatRegistered = $derived(getBusinessInfo()?.is_vat_registered ?? false);
@@ -275,7 +277,7 @@
}
}
async function processPayment(amount: number) {
async function processPayment(_amount: number) {
// Synchronous double-click guard — set BEFORE any await so a rapid second
// click is rejected immediately, even before the reactive `disabled` has
// propagated to the button.
@@ -287,11 +289,11 @@
let newCardToken: string | undefined;
if (selectedPaymentMethod) {
// saved card — nothing to tokenize
} else if (newCardMode && squareCardInput) {
} else if (paymentCardSelection) {
// New-card mode: tokenize once per attempt, reuse the nonce on retry.
if (!depositNonce) {
try {
depositNonce = await squareCardInput.tokenize();
depositNonce = await paymentCardSelection.tokenize();
} catch (err) {
toast.error(err instanceof Error ? err.message : 'Card entry failed');
return;
@@ -308,11 +310,19 @@
return;
}
const bookingId = confirmedBooking.id;
const amountCents = Math.round(amount * 100);
// Charge the SERVER-computed deposit: the booking response carries the
// authoritative deposit_amount (20% of the server-side total, which
// accounts for discounts / admin adjustments). The client-side
// getTotalPrice()*0.2 estimate can diverge and under-charge.
const depositAmount =
confirmedBooking.deposit_amount && confirmedBooking.deposit_amount > 0
? confirmedBooking.deposit_amount
: _amount;
const amountCents = Math.round(depositAmount * 100);
// Cache the idempotency key per amount+card so a lost-response retry
// reuses it (backend dedups) instead of double-charging.
const cardKey = selectedPaymentMethod ?? `new:${newCardToken ?? ''}`;
const cardKey = selectedPaymentMethod || `new:${newCardToken ?? ''}`;
if (
!depositIdempotencyKey ||
depositKeyedAmount !== amountCents ||
@@ -328,7 +338,7 @@
amount: amountCents,
idempotency_key: depositIdempotencyKey,
...(selectedPaymentMethod ? { card_id: selectedPaymentMethod } : {}),
...(newCardToken ? { new_card_token: newCardToken, save_card: false } : {})
...(newCardToken ? { new_card_token: newCardToken, save_card: depositSaveCard } : {})
};
paymentAttempted = true;
@@ -348,6 +358,7 @@
depositKeyedAmount = 0;
depositKeyedCard = '';
depositNonce = '';
depositSaveCard = false;
// Immutable update — avoid mutating the existing object so
// concurrent renders (e.g. a stale fetch) can't observe partial
// state. (See audit: HIGH issue #3 — confirmedBooking mutated
@@ -355,8 +366,8 @@
confirmedBooking = {
...confirmedBooking,
deposit_paid: true,
amount_paid: (confirmedBooking.amount_paid || 0) + amount,
amount_due: Math.max(0, (confirmedBooking.amount_due || 0) - amount)
amount_paid: (confirmedBooking.amount_paid || 0) + depositAmount,
amount_due: Math.max(0, (confirmedBooking.amount_due || 0) - depositAmount)
};
toast.success('Payment successful!');
} else {
@@ -382,8 +393,21 @@
let depositKeyedAmount = $state(0);
let depositKeyedCard = $state('');
function formatCardExpiry(month: number, year: number): string {
return `${String(month).padStart(2, '0')}/${year.toString().slice(-2)}`;
async function fetchPaymentMethods() {
if (paymentMethodsLoading || paymentMethods.length > 0) return;
if (!authStore.isAuthenticated) return;
paymentMethodsLoading = true;
try {
const response = await apiFetch('/api/user/payment-methods');
if (response.ok) {
// CardSelection auto-selects the default card once cards load.
paymentMethods = await response.json();
}
} catch {
// non-fatal — the new-card form remains available
} finally {
paymentMethodsLoading = false;
}
}
// Fetch user deposit and active booking status when step 1 is reached
@@ -394,6 +418,13 @@
}
});
// Fetch saved cards when the deposit payment step is shown.
$effect(() => {
if (currentStep === finalStep && depositRequired && authStore.isAuthenticated) {
fetchPaymentMethods();
}
});
// =============== Slot Reservation System ===============
let _reservationId = $state<string | null>(null);
let reservationExpiresAt = $state<Date | null>(null);
@@ -2296,88 +2327,28 @@
{#if authStore.isAuthenticated}
{#if paymentMethodsLoading}
<div class="mb-6 py-4 text-center text-gray-500">Loading payment methods...</div>
{:else if paymentMethods.length > 0}
{:else}
<div class="mb-6">
<h4 class="mb-3 text-sm font-medium text-gray-700">Saved Cards</h4>
<div class="space-y-3">
{#each paymentMethods as method (method.id)}
<div
class="flex items-center justify-between rounded-lg border border-gray-200 p-3 {selectedPaymentMethod ===
method.id && !showNewCardForm
? 'border-primary bg-primary/5'
: ''}"
>
<div class="flex items-center gap-3">
<div
class="flex h-10 w-14 items-center justify-center rounded bg-gray-100 text-xs font-medium"
>
{method.brand}
</div>
<div class="text-sm">
<span class="font-mono">**** {method.last4}</span>
<span class="ml-2 text-gray-500">
{formatCardExpiry(method.expiry_month, method.expiry_year)}
</span>
</div>
</div>
<Button
size="sm"
variant={selectedPaymentMethod === method.id && !showNewCardForm
? 'default'
: 'outline'}
onclick={() => {
selectedPaymentMethod = method.id;
showNewCardForm = false;
depositNonce = '';
}}
>
{selectedPaymentMethod === method.id && !showNewCardForm
? 'Selected'
: 'Use this card'}
</Button>
</div>
{/each}
<Button
size="sm"
variant={showNewCardForm ? 'default' : 'outline'}
onclick={() => {
selectedPaymentMethod = null;
depositNonce = '';
showNewCardForm = !showNewCardForm;
}}
>
Use a new card
</Button>
</div>
</div>
{/if}
{#if newCardMode}
<div class="mb-6">
{#if isSquareConfigured()}
<SquareCardInput
bind:this={squareCardInput}
onReady={(r) => (squareCardReady = r)}
/>
{:else}
<CardEntryUnavailable
message="Online card entry is temporarily unavailable. Please use a saved card, or contact the salon to pay by another method."
/>
{/if}
<CardSelection
bind:this={paymentCardSelection}
cards={paymentMethods}
{canSaveCards}
bind:selectedCardId={selectedPaymentMethod}
bind:saveCard={depositSaveCard}
onValidityChange={(v) => (paymentCardSelectionValid = v)}
/>
</div>
{/if}
{:else}
<div class="mb-6">
{#if isSquareConfigured()}
<SquareCardInput
bind:this={squareCardInput}
onReady={(r) => (squareCardReady = r)}
/>
{:else}
<CardEntryUnavailable
message="Online card entry is temporarily unavailable. Please contact the salon to pay by another method."
/>
{/if}
<CardSelection
bind:this={paymentCardSelection}
cards={[]}
{canSaveCards}
bind:selectedCardId={selectedPaymentMethod}
bind:saveCard={depositSaveCard}
onValidityChange={(v) => (paymentCardSelectionValid = v)}
/>
</div>
{/if}
frontend/src/lib/components/payments/CardSelection.svelte
+22 -1
View File
@@ -15,13 +15,15 @@
let {
cards = [],
canSaveCards: _canSaveCards = false,
canSaveCards = false,
selectedCardId = $bindable(''),
saveCard = $bindable(false),
onValidityChange = (_valid: boolean) => {}
}: {
cards?: SelectableCard[];
canSaveCards?: boolean;
selectedCardId?: string;
saveCard?: boolean;
onValidityChange?: (valid: boolean) => void;
} = $props();
@@ -30,6 +32,10 @@
let showNewCardForm = $state(false);
let squareCardReady = $state(false);
let squareCardInput = $state<SquareCardInput | null>(null);
// Unique per instance: a plain counter would be instance-scoped in Svelte 5
// (every instance restarting at 0), so two mounted CardSelection instances
// would collide on the same checkbox id. Pure SPA, so no SSR concern.
const consentId = `save-card-consent-${crypto.randomUUID()}`;
// Auto-select the default saved card when cards first load. Guarded by
// !showNewCardForm so the "Use a new card" click (selectedCardId = '') is
@@ -125,5 +131,20 @@
{:else}
<CardEntryUnavailable />
{/if}
{#if canSaveCards && squareCardReady}
<label
class="mt-3 flex cursor-pointer items-start gap-2 text-sm text-gray-600"
for={consentId}
>
<input
id={consentId}
type="checkbox"
class="mt-0.5 h-4 w-4 rounded border-gray-300 text-primary accent-primary"
bind:checked={saveCard}
/>
<span>Save this card for next time</span>
</label>
{/if}
</div>
{/if}
frontend/src/lib/components/payments/SquareCardInput.svelte
+4 -5
View File
@@ -3,10 +3,6 @@
import CardEntryUnavailable from './CardEntryUnavailable.svelte';
import { getSquarePayments, isSquareConfigured } from '$lib/square/square';
// Module-level counter keeps the element id stable across server/client render
// (a Math.random() id would mismatch during hydration).
let squareCardIdCounter = 0;
interface Props {
/** Disable the form while a payment is processing. */
disabled?: boolean;
@@ -21,7 +17,10 @@
let ready = $state(false);
let initError = $state<string | null>(null);
let uniqueId = $state(`square-card-${squareCardIdCounter++}`);
// Unique per instance so two mounted card forms never share an element id
// (e.g. the deposit step + the pay-early modal on the same page). This app
// is a pure SPA (no SSR/hydration), so a random id cannot mismatch.
let uniqueId = $state(`square-card-${crypto.randomUUID()}`);
async function init() {
if (!isSquareConfigured()) {
frontend/src/lib/components/payments/UserPaymentModal.svelte
+27 -4
View File
@@ -23,7 +23,17 @@
defaultPaymentType?: 'full' | 'partial' | 'deposit';
}
const { booking, onClose, onComplete, canSaveCards = true, defaultPaymentType }: Props = $props();
const {
booking,
onClose,
onComplete,
canSaveCards = false,
defaultPaymentType
}: Props = $props();
// Explicit consent: whether the new card is saved for next time. Toggled by
// the checkbox inside CardSelection; defaults to false (opt-in).
let saveCard = $state(false);
type PaymentStatus = 'idle' | 'processing' | 'polling' | 'success' | 'error';
@@ -394,7 +404,7 @@
amount: amountCents,
payment_type: paymentType,
...(cardId ? { card_id: cardId } : {}),
...(newCardToken ? { new_card_token: newCardToken, save_card: canSaveCards } : {}),
...(newCardToken ? { new_card_token: newCardToken, save_card: saveCard } : {}),
idempotency_key: payIdempotencyKey
})
});
@@ -687,8 +697,9 @@
</div>
</div>
<!-- Card Selection (only when idle) -->
{#if status === 'idle' && authStore.isAuthenticated}
<!-- Card Selection (mounted while idle OR error so a declined card
can be retried/swapped without closing the modal) -->
{#if (status === 'idle' || status === 'error') && authStore.isAuthenticated}
{#if paymentMethodsLoading}
<div class="py-2 text-center text-sm text-gray-500">Loading payment methods...</div>
{:else}
@@ -697,6 +708,7 @@
cards={paymentMethods}
{canSaveCards}
bind:selectedCardId
bind:saveCard
onValidityChange={(v) => (cardSelectionValid = v)}
/>
{/if}
@@ -849,6 +861,17 @@
{#if status === 'error' && error}
<div class="rounded-md border border-red-200 bg-red-50 p-3">
<p class="text-sm text-red-800">{error}</p>
<Button
variant="outline"
size="sm"
class="mt-3 w-full"
onclick={() => {
status = 'idle';
error = null;
}}
>
Try Again
</Button>
</div>
{/if}