Add dev-only frontend Square mock mode for as-if-live walkthroughs

VITE_SQUARE_ENVIRONMENT=mock renders a plain HTML card form (MockCardForm)
instead of the Square Web Payments SDK iframe, minting the same cnon: tokens
the backend dev mock accepts — all 8 payment flows run end-to-end locally with
zero credentials.

- isSquareMock() gated on import.meta.env.DEV: structurally impossible in a
  production build even if the env var is mis-set
- MockCardForm: Luhn/brand/expiry/CVC validation, Amex 15-digit + 4-digit CVC,
  error states, disabled propagation — mirrors the real form's onReady contract
  so CardSelection.isCardValid and submit guards behave identically
- tokenize() maps typed card -> deterministic cnon: token matching backend
  detectCardInfo (4242->test-card, 4111->visa, 5555->mastercard, 3782->amex)
- lazy-loaded via dynamic import: mock code ships in its own chunk, referenced
  only from the mock branch, never statically imported into the main bundle
- docs: .env.example (mock pairing with SQUARE_ENVIRONMENT=mock), P11 plan
  (mock opt-in + canonical-last4 caveat), Feature Catalog (2.1, 2.5)
- prettier formatting fixes in 10 unrelated files (line wrapping only)
This commit is contained in:
2026-08-22 00:34:49 +01:00
parent 7439fa86c1
commit 52e2bfff55
15 changed files with 378 additions and 71 deletions
@@ -279,7 +279,9 @@
toast.error(`Validation error: ${extractErrorMessage(errorText)}`, { id: loadingToast });
} else {
const errorText = await response.text();
toast.error(`Failed to create service: ${extractErrorMessage(errorText)}`, { id: loadingToast });
toast.error(`Failed to create service: ${extractErrorMessage(errorText)}`, {
id: loadingToast
});
}
} catch (err) {
console.error('Error creating service:', err);