fix(web): fix #1058 register importer form per-field error guidance

[Owolabenjade]

Close issue #1058

Context & Issue Summary

This PR addresses issue #1058 where the RegisterImporter component (apps/web/app/app/page.tsx) relied solely on native browser required validation attributes and a single top-level ErrorBanner rendered after submission failure.

Because the form provided no inline, per-field error feedback, importers submitting invalid or malformed data (such as incorrectly formatted EIN numbers or invalid annual duty estimates) had to guess which input field was causing the submission rejection.

Solution & Flow

• Modified apps/web/app/app/page.tsx to add a local fieldErrors state (useState<{ legalName?: string; ein?: string; annualDutyEstimate?: string }>({})) inside RegisterImporter.
• Added a validate() helper function that validates:
  • Legal name: Ensures non-empty required string.
  • EIN: Validates standard format regex (XX-XXXXXXX, e.g. 12-3456789) when an EIN is provided.
  • Annual Duty Estimate: Ensures a valid numeric estimate ($\ge 100$).
• Implemented an updateField() helper to update field state and dynamically clear fieldErrors[field] as the user edits the input.
• Updated the Field helper component to accept an error?: string prop, rendering inline red text (<span className="mt-1 block text-xs text-danger">{error}</span>) and applying border-danger input styling when an error exists.
• Retained the top-level <ErrorBanner error={error} /> for API response errors and preserved native required attributes for browser validation compatibility.

Value & Impact

This change improves importer onboarding form UX for issue #1058 by providing immediate, clear per-field validation guidance without breaking top-level server error handling.

Changed

• apps/web/app/app/page.tsx: Added per-field inline error messages (text-xs text-danger) and red border highlights (border-danger) to RegisterImporter form inputs with real-time error clearing on input edit, fixing Register importer form only shows one generic error banner instead of per-field guidance #1058.

Testing

The component changes were validated using the following static analysis tools:

# Verify TypeScript type safety
npm run typecheck --workspace=apps/web

# Verify zero ESLint warnings
npm run lint --workspace=apps/web

[vercel]

Deployment failed for project tariff-shield-web with the following error:

The `vercel.json` schema validation failed with the following message: should NOT have additional property `rootDirectory`

Learn More: https://vercel.com/docs/concepts/projects/project-configuration

[drips-wave]

@Owolabenjade Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
tariff-shield-web	Error		Aug 27, 2026 6:18pm