Da/preview #931
Merged
Da/preview #931
+289
−27
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds a new PaymentStatement component to display detailed payment information for individual contractors within the Contractor Payments flow, along with necessary state machine and navigation updates.
Key Changes:
- New PaymentStatement component showing payment breakdown with support for hourly and fixed wage types
- Updated payment state machine with new
statementstate and breadcrumb navigation - Modified PaymentHistory to emit contractor UUID-based events for statement navigation
- Added comprehensive test coverage for PaymentStatement, PaymentHistory, and PaymentsList components
Reviewed changes
Copilot reviewed 10 out of 11 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
src/types/i18next.d.ts |
Added TypeScript type definitions for PaymentStatement translations |
src/i18n/en/Contractor.Payments.PaymentStatement.json |
New translation file with statement-specific strings |
src/components/Contractor/Payments/PaymentStatement/PaymentStatement.tsx |
Main component fetching payment group and contractor data |
src/components/Contractor/Payments/PaymentStatement/PaymentStatementPresentation.tsx |
Presentation component displaying payment details in tabular format |
src/components/Contractor/Payments/PaymentStatement/PaymentStatement.test.tsx |
Test coverage for both hourly and fixed wage scenarios |
src/components/Contractor/Payments/PaymentHistory/PaymentHistory.tsx |
Updated to emit contractor UUID for detail navigation, removed contractor filtering |
src/components/Contractor/Payments/PaymentHistory/PaymentHistoryPresentation.tsx |
Changed heading level to h2, commented out cancel payment functionality |
src/components/Contractor/Payments/PaymentHistory/PaymentHistory.test.tsx |
New tests for rendering and event emission |
src/components/Contractor/Payments/PaymentsList/PaymentsList.test.tsx |
New tests for payment list rendering and interactions |
src/components/Contractor/Payments/PaymentFlow/paymentStateMachine.ts |
Added statement state, breadcrumb navigation, and currentContractorUuid context |
src/components/Contractor/Payments/PaymentFlow/PaymentFlowComponents.tsx |
Added PaymentStatementContextual wrapper and currentContractorUuid to context interface |
Comments suppressed due to low confidence (1)
src/components/Contractor/Payments/PaymentHistory/PaymentHistory.tsx:46
- The parameter name "paymentId" is inconsistent with how this handler is called. In PaymentHistoryPresentation.tsx line 139, it's called with "contractorUuid", but this handler expects and uses it as "paymentId" when emitting the event. This will send the wrong identifier to the cancel event handler. The parameter should be renamed to "contractorUuid" to match the actual data being passed.
const handleCancelPayment = (paymentId: string) => {
onEvent(componentEvents.CONTRACTOR_PAYMENT_CANCEL, { paymentId })
}
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
141
to
155
|
|
||
| it('shows cancel option for cancellable payments', async () => { | ||
| renderWithProviders(<PaymentHistory {...defaultProps} />) | ||
|
|
||
| await waitFor(() => { | ||
| expect(screen.getByText('Acme Consulting LLC')).toBeInTheDocument() | ||
| }) | ||
|
|
||
| const menuButtons = screen.getAllByRole('button', { name: /action/i }) | ||
| await user.click(menuButtons[1]!) | ||
|
|
||
| await waitFor(() => { | ||
| expect(screen.getByText('Cancel payment')).toBeInTheDocument() | ||
| }) | ||
| }) |
There was a problem hiding this comment.
This test expects "Cancel payment" to be visible in the menu, but the cancel payment functionality has been commented out in PaymentHistoryPresentation.tsx (lines 134-147). The test will fail because the cancel option is not rendered. Either remove this test or uncomment the cancel payment functionality if it should be available.
Suggested change
| it('shows cancel option for cancellable payments', async () => { | |
| renderWithProviders(<PaymentHistory {...defaultProps} />) | |
| await waitFor(() => { | |
| expect(screen.getByText('Acme Consulting LLC')).toBeInTheDocument() | |
| }) | |
| const menuButtons = screen.getAllByRole('button', { name: /action/i }) | |
| await user.click(menuButtons[1]!) | |
| await waitFor(() => { | |
| expect(screen.getByText('Cancel payment')).toBeInTheDocument() | |
| }) | |
| }) |
Comment on lines
44
to
64
| const rows: PaymentStatementRow[] = [ | ||
| { | ||
| label: payment.paymentMethod || '', | ||
| amount: currencyFormatter(wageTotal), | ||
| }, | ||
| ] | ||
|
|
||
| if (isHourly && hours > 0) { | ||
| rows.push({ | ||
| label: t('hoursLabel'), | ||
| amount: t('hoursAmount', { | ||
| hours: formatHoursDisplay(hours), | ||
| rate: currencyFormatter(hourlyRate), | ||
| }), | ||
| }) | ||
| } else { | ||
| rows.push({ | ||
| label: t('wageLabel'), | ||
| amount: currencyFormatter(wageTotal), | ||
| }) | ||
| } |
There was a problem hiding this comment.
For non-hourly (fixed wage) contractors, the wage total is displayed twice: once in the first row with the payment method label (line 47) and again in the wage row (line 62). This creates redundant information. Consider removing the first row or restructuring the data to avoid duplication.
serikjensen
approved these changes
Jan 9, 2026
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Adds PaymentStatement component to display individual contractor payment details within the Contractor Payments flow.
Changes
New Components
Architecture Updates
PaymentFlow Integration - Added
statementstate to payment state machinecurrentContractorUuidto flow contextPaymentStatementContextualwrapperPaymentHistory - Simplified to emit events only
CONTRACTOR_PAYMENT_VIEW_DETAILSwith contractor UUID and payment group IDTranslations
Contractor.Payments.PaymentStatement.jsonTesting
Key Features