Skip to content

fix(invoice-schedule): validate the form before previewing an invoice - #1818

Open
gabrielseco wants to merge 1 commit into
mainfrom
fix/invoice-preview-validation
Open

gabrielseco wants to merge 1 commit into
mainfrom
fix/invoice-preview-validation

Conversation

@gabrielseco

@gabrielseco gabrielseco commented Oct 31, 2026 •

Copy link
Copy Markdown
Collaborator

Summary

The Preview invoice button now validates the form first: missing required fields show their error messages, and no preview is requested until the form is valid.

Why

Preview built the invoice straight from the current values and skipped validation, so an empty form showed no field errors (only Continue did). Integrators reading fieldState.error to render errors saw nothing after clicking Preview.

What changed

Toggle details
  • PreviewInvoiceButton (Contractor Onboarding) and InvoiceSchedulePreviewButton (Invoice Schedule) now submit the surrounding form, the same way Save Draft does. The form runs its normal validation and, only when valid, runs the preview with the validated values.
  • Both forms recognise the preview submission and run the preview instead of the usual submit handler.
  • Preview now validates the whole form, including the recurrence fields (e.g. the end-date choice in Invoice Schedule) that the preview payload ignores.
  • No public API or prop changes.

Screenshots

Toggle screenshots

Create invoice schedule step, empty form, after clicking Preview invoice (Contractor Management, PRT, sandbox).

Before After

Filled form still opens the preview drawer:

Related Resources

  • Reported by an integrator in a Slack thread.

Testing

  • Added a test per flow: with required fields empty, clicking Preview shows "Required field" and makes no preview request. Both fail with the fix removed (the request fires and no errors show) and pass with it.

  • Updated the existing Invoice Schedule preview tests to fill the form first, since Preview now validates.

  • Verified in the example app against sandbox: empty form shows 5 required-field errors and 0 preview requests (before: 1 request, 0 errors); a filled form opens the drawer.

  • Tested against the example/ app in a browser

  • Feature flag: N/A


Note

Low Risk
Behavior change is localized to preview buttons and form submit handlers; no public API changes, and invalid previews are blocked rather than broadened.

Overview
Preview invoice now runs through the same form submit path as Continue/Save Draft, so react-hook-form validation runs first. Empty or invalid forms show Required field (and other) errors and do not call the preview API.

In Contractor Onboarding (PreviewInvoiceButton) and Invoice Schedule (InvoiceSchedulePreviewButton), the click handler dispatches a synthetic submit on the flow form with isPreviewSubmission and a previewCallback. ContractorOnboardingForm and InvoiceScheduleForm detect that flag, invoke the callback with validated values, and skip create/submit logic. Preview therefore uses current form values after full validation, including fields omitted from the preview payload (e.g. recurrence/end date).

Tests assert missing required fields block the preview request; Invoice Schedule tests fill the form before exercising happy paths.

Reviewed by Cursor Bugbot for commit 30159f4. Bugbot is set up for automated code reviews on this repo. Configure here.

@github-actions

Copy link
Copy Markdown
Contributor

📦 Bundle Size Report

Metric Current Previous Change Status
Total (gzip) 240.77 kB 240.49 kB +272 B (+0.1%) 🔴
Total (raw) 665.92 kB 665.44 kB +477 B (+0.1%) 🔴
CSS (gzip) 22.01 kB 22.01 kB 0 B (0%) 🟢
CSS (raw) 114.74 kB 114.74 kB 0 B (0%) 🟢

Size Limits

  • ✅ Total gzipped: 240.77 kB / 350 kB (68.8%)
  • ✅ Total raw: 665.92 kB / 850 kB (78.3%)
  • ✅ CSS gzipped: 22.01 kB / 25 kB (88.1%)

Largest Files (Top 5)

  1. index.esm-wIkXrqU6.js - 11.4 kB (0 B (0%))
  2. styles.css - 11.01 kB (0 B (0%))
  3. index.css - 11.01 kB (0 B (0%))
  4. internals-vBPqpOAQ.js - 6.14 kB (0 B (0%))
  5. hooks-tRFcXUMh.js - 5.77 kB (0 B (0%))
View All Files (307 total)
File Size (gzip) Change
index.esm-wIkXrqU6.js 11.4 kB 0 B (0%)
styles.css 11.01 kB 0 B (0%)
index.css 11.01 kB 0 B (0%)
internals-vBPqpOAQ.js 6.14 kB 0 B (0%)
hooks-tRFcXUMh.js 5.77 kB 0 B (0%)
sdk.gen-D_5dqKZ5.js 5.63 kB 0 B (0%)
index.js 5.6 kB 0 B (0%)
flows/Onboarding/hooks.js 4.67 kB 0 B (0%)
utils-CHvFwoQn.js 4.43 kB 0 B (0%)
FieldSetField-DL8fBWct.js 4.43 kB 0 B (0%)

✅ Bundle size check passed

@github-actions

Copy link
Copy Markdown
Contributor

Deploy preview for remote-flows ready!

Project:remote-flows
Status: ✅  Deploy successful!
Preview URL:https://remote-flows-ilsz9orwf-remotecom.vercel.app
Latest Commit:30159f4

Deployed with vercel-action

@github-actions

Copy link
Copy Markdown
Contributor

Deploy preview for adp-cost-calculator ready!

Project:adp-cost-calculator
Status: ✅  Deploy successful!
Preview URL:https://adp-cost-calculator-abvav1459-remotecom.vercel.app
Latest Commit:30159f4

Deployed with vercel-action

@github-actions

Copy link
Copy Markdown
Contributor

📊 Coverage Report

⚠️ Coverage decreased

Metric Current Previous Change Status
Lines 90.17% 90.15% +0.02% 🟢
Statements 90.05% 90.03% +0.02% 🟢
Functions 89.04% 89.03% +0.01% 🟢
Branches 81.61% 81.66% -0.05% 🔴

Detailed Breakdown

Lines Coverage
  • Covered: 5722 / 6346
  • Coverage: 90.17%
  • Change: +0.02% (20 lines)
Statements Coverage
  • Covered: 5791 / 6431
  • Coverage: 90.05%
  • Change: +0.02% (20 statements)
Functions Coverage
  • Covered: 1511 / 1697
  • Coverage: 89.04%
  • Change: +0.01% (2 functions)
Branches Coverage
  • Covered: 3520 / 4313
  • Coverage: 81.61%
  • Change: -0.05% (6 branches)

✅ Coverage check passed

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant