From 0c9050cc8af95c2942f9f6477e7547e54e808752 Mon Sep 17 00:00:00 2001 From: Marco Date: Thu, 23 Jul 2026 19:45:15 +0000 Subject: [PATCH] Show unconfirmed USt-IdNr. in red, auto-select the field on blur MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Makes the "konnte nicht bestätigt werden" message read as an actual error instead of neutral status text, and re-focuses + selects the whole VAT ID on an unconfirmed result — the customer almost certainly needs to retype it, so the next keystroke should just replace it outright. Co-Authored-By: Claude Sonnet 5 --- app/checkout/components/CheckoutContent.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/app/checkout/components/CheckoutContent.tsx b/app/checkout/components/CheckoutContent.tsx index 4121cbf..8b94900 100644 --- a/app/checkout/components/CheckoutContent.tsx +++ b/app/checkout/components/CheckoutContent.tsx @@ -354,7 +354,8 @@ export function CheckoutContent({ // wherever vatExemptPreview/exemptTotalsPreview are computed below — a // validated German VAT ID never zero-rates a domestic sale). async function handleVatIdBlur(e: React.FocusEvent) { - const value = e.target.value; + const input = e.target; + const value = input.value; const formatError = validateVatIdFormat(value); setFieldError("vatId", formatError); if (!value.trim() || formatError) { @@ -374,6 +375,14 @@ export function CheckoutContent({ return; } setVatIdViesStatus(data.valid ? "valid" : "invalid"); + // Re-focus + select the whole value on an unconfirmed VAT ID — the + // customer almost certainly needs to retype it (a typo, or the + // wrong id entirely), so the next keystroke should just replace it + // outright rather than requiring a manual select-all first. + if (!data.valid) { + input.focus(); + input.select(); + } } catch { setVatIdViesStatus("unavailable"); } @@ -732,7 +741,9 @@ export function CheckoutContent({ {isExemptionEligibleCountry(buyerDestinationCountry) ? " — Lieferung wird steuerfrei berechnet." : "."} )} - {vatIdViesStatus === "invalid" && "USt-IdNr. konnte nicht bestätigt werden."} + {vatIdViesStatus === "invalid" && ( + USt-IdNr. konnte nicht bestätigt werden. + )} {vatIdViesStatus === "unavailable" && "USt-IdNr.-Prüfung derzeit nicht möglich."}