Skip to content

Invoice form UX enhancements (#494-#497) - #539

Merged
Kingsman-99 merged 5 commits into
Stellar-split:mainfrom
Jambox11:feature/invoice-form-enhancements
Jul 29, 2026
Merged

Invoice form UX enhancements (#494-#497)#539
Kingsman-99 merged 5 commits into
Stellar-split:mainfrom
Jambox11:feature/invoice-form-enhancements

Conversation

@Jambox11

Copy link
Copy Markdown
Contributor

Summary

Implements four critical invoice creation form improvements:

  • One-click equal split distribution with undo support
  • Inline field-level error messages with accessibility markup
  • Discard confirmation dialog for unsaved drafts
  • Network fee breakdown tooltip on amount fields

Changes

#494 — Equal-Distribution One-Click Button for Split Builder

  • Add 'Split equally' button to distribute amounts evenly among recipients
  • Implement undo functionality to restore previous distribution
  • Button disabled when fewer than 2 recipients
  • Undo button appears after split action

#495 — Inline Field-Level Error Messages with Accessible Markup

  • Create FormField component for consistent error display
  • Show errors on field blur and during typing after first blur
  • Use aria-describedby and aria-invalid for screen reader support
  • Display red border and error icon for invalid fields
  • Add field validation for token address and deadline

#496 — Invoice Draft Discard Confirmation Dialog

  • Create useUnsavedChanges hook to track form dirty state
  • Create UnsavedChangesModal with accessible dialog markup
  • Intercept navigation attempts and show confirmation
  • Trigger native beforeunload dialog on browser tab close
  • Only show modal after user interacts with form

#497 — Network Fee Breakdown Tooltip on Amount Fields

  • Create FeeTooltip component with fee breakdown table
  • Implement useNetworkFeeBreakdown hook to fetch current fees
  • Add API route /api/fees to query Horizon fee_stats endpoint
  • Display tooltip on hover/focus with refresh capability
  • Show fees in both stroops and XLM denominations

Notes

  • All features are fully accessible with ARIA labels and keyboard support
  • No dependencies were added; custom components use existing Tailwind CSS
  • All form validation displays immediately and clears when corrected
  • Undo stack uses React useState for simplicity

Closes #494, Closes #495, Closes #496, Closes #497

Jambox11 added 4 commits July 28, 2026 18:55
…lar-split#494)

- Add 'Split equally' button to distribute amounts evenly among recipients
- Implement undo functionality to restore previous distribution
- Button disabled when fewer than 2 recipients
- Undo button appears after split and clears previous state
- Add calculateEqualSplit utility to split calculator
- Accessible via aria-label with WCAG compliance
…tellar-split#495)

- Create FormField component for consistent error display
- Show errors on field blur and during typing after first blur
- Use aria-describedby and aria-invalid for accessibility
- Display red border and error icon for invalid fields
- Add field validation for token address and deadline
- Errors clear immediately when field becomes valid
- Improve UX by showing specific validation feedback inline
- Create useUnsavedChanges hook to track form dirty state
- Create UnsavedChangesModal with accessible dialog markup
- Intercept navigation attempts and show confirmation
- Trigger native beforeunload dialog on browser tab close
- Only show modal after user interacts with form
- 'Discard' proceeds with navigation and clears draft
- 'Keep editing' returns focus to form without navigation
- Add back button to header with protection
…it#497)

- Create FeeTooltip component with fee breakdown table
- Implement useNetworkFeeBreakdown hook to fetch current fees
- Add API route /api/fees to query Horizon fee_stats endpoint
- Display tooltip on hover/focus for amount fields in review step
- Show base fee and resource fee with stroops and XLM conversion
- Include refresh button to re-fetch fee stats
- Keyboard accessible via Tab and Escape
- Show 'Fee breakdown unavailable' on fetch errors
- Tooltip displays fees in both stroops and XLM denominations
@vercel

vercel Bot commented Jul 28, 2026

Copy link
Copy Markdown

@Jambox11 is attempting to deploy a commit to the kingsman-99's projects Team on Vercel.

A member of the Team first needs to authorize it.

@drips-wave

drips-wave Bot commented Jul 28, 2026

Copy link
Copy Markdown

@Jambox11 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

@Kingsman-99
Kingsman-99 merged commit c953187 into Stellar-split:main Jul 29, 2026
1 of 5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

2 participants