# Frontend Customer Experience

Last updated: 2026-06-26

This document records the current frontend readiness controls for step-up authentication UX, customer disclosures, critical admin states, browser e2e coverage, accessibility checks and localized content review.

## Step-Up UX

The React client listens for `banking:step-up-required`, emitted by the API client when an API response returns `error.code = step_up_required`.

The global step-up dialog:

- Shows the provider/API message.
- Accepts a six-digit authenticator code.
- Calls `/v1/auth/step-up`.
- Stores the refreshed access token.
- Refreshes the current app data after success.

This covers high-risk transfers, FX, card, crypto, savings and admin actions without each form needing custom modal logic.

## Customer Disclosures

The app now shows concise disclosures near the relevant customer workflows:

- Payments: screening, limits, routing checks, review states, settlement timing and production fee disclosure requirement.
- FX: customer rate, fee, spread, quote expiry and provider/market-data caveats.
- Cards: authorization lifecycle, issuer/processor availability and PAN/CVV/tokenization boundary.
- Savings goals: internal reservation model and market-specific legal confirmation.
- Crypto/stablecoins: custody, network, issuer, depeg, screening and real-movement disablement caveats.

Final customer-facing legal copy still needs legal/compliance approval before real-money production.

## Admin Empty, Error, And Loading States

Critical admin panels now surface loading or error state instead of failing silently:

- SEPA settlement loading state.
- Payment review loading state.
- Top-level admin async error banner.
- Existing empty states remain for compliance queue, activity, wallet approvals, user search, ledger, reconciliation, risk, security, routing contracts and FX rates.

## Browser Coverage

Playwright e2e coverage now includes:

- Login and primary navigation.
- MFA setup and TOTP enablement.
- Transfer submission with step-up-required response and modal completion.
- FX quote and conversion.
- Admin settlement dashboard.
- Admin wallet adjustment approval.

## Accessibility And Keyboard Review

The accessibility suite uses Axe checks for login and admin shell pages and includes keyboard activation of primary navigation. The current review blocks critical Axe violations and verifies that major app navigation can be operated without a mouse.

## Localized Content Review

Current locale target: `nl-NL`.

Implemented locale controls:

- Currency formatting uses `Intl.NumberFormat("nl-NL")`.
- Date/time formatting uses `Intl.DateTimeFormat("nl-NL")`.
- Primary customer and admin copy is Dutch where user-facing.
- Operational terms that remain English, such as SEPA, FX, crypto, stablecoin, routing, settlement and step-up, are treated as product/regulatory terms and should be reviewed in the target-market glossary.

Before launch in each market, review:

- Legal product wording around "bank", "savings", "deposit", cards, crypto and stablecoins.
- Fee, FX and payment execution time disclosures.
- Complaints, chargeback, refund and dispute language.
- Accessibility language for screen-reader labels and form errors.
- Localized empty, error and success states for all high-risk workflows.