MPDX-9609 - PDS Calc: Add conditional rendering for Pay Rate field based on pay type

[zweatshirt]

Description

The pay rate accepts a value before pay type is set. But setting pay type clears the pay rate.
We want to hide or disable the pay rate field until pay type is set.

https://jira.cru.org/browse/MPDX-9609

Testing

• Go to hrTools/pdsGoalCalculator
• Test an account where the pay type cannot be determined
• Check that pay rate isn't rendered unless payType is set

Checklist:

• I have given my PR a title with the format "MPDX-(JIRA#) (summary sentence max 80 chars)"
• I have applied the appropriate labels (Add the label "Preview" to automatically create a preview environment)
• I have run the Claude Code /pr-review command locally and fixed any relevant suggestions
• I have requested a review from another person on the project
• I have tested my changes in preview or in staging
• I have cleaned up my commit history

[github-actions]

Bundle sizes [mpdx-react]

Compared against 628636e

No significant changes found

[zweatshirt]

AI Multi-Agent Code Review

Verdict: ✅ CLEAN
Risk Score: 1/10 (LOW)
Agents: Architecture · Testing · Standards · UX

---

Risk Assessment

Factor	Points
src/components/**/*.tsx (medium-risk component)	+1
Change volume <50 non-test lines	+0
Single-domain scope ×1.0	—
Total	1/10

---

Architecture — ✅ APPROVED

Strengths:

• {payType && (...)} gate is fully consistent with the existing sibling conditionals ({!isSalaried && ...}, {!isPartTime && ...}, {!isSimpleForm && ...}) in the same file
• Extracting const payType = calculation?.salaryOrHourly is a readability improvement — the conditional now reads against the same vocabulary as the Pay Type selector
• Correctly leverages useAutoSave's unmount cleanup to clear validation-blocking when the field disappears, with no imperative state management needed
• Atomic write contract preserved — Pay Type selector still clears payRate: null in the same saveField call

No issues found.

---

Testing — ✅ APPROVED_WITH_SUGGESTIONS

Strengths:

• Correct async anchor pattern: await findByRole('textbox', { name: 'Goal Name' }) before queryByRole absence assertion
• Role-based selectors (spinbutton / textbox) rather than brittle text selectors
• Mock well-targeted — spreads fullTimeSalariedMock and overrides only the two relevant fields

Optional suggestions (no action required):

Suggestion: A complementary "Pay Rate appears for both Salaried and Hourly" explicit assertion could tighten the contract, though it's already transitively covered by the existing helper-text tests which call findByRole('spinbutton', { name: 'Pay Rate' }).

Suggestion: Could additionally assert the helper text is absent when pay type is unset, as a defense-in-depth check against someone accidentally narrowing the conditional to only wrap the <AutosaveTextField> while leaving stray text behind.

---

Standards — ✅ APPROVED

All checklist items pass: named exports, file naming, i18n (t('Pay Rate') retained, no new hard-coded strings), no TypeScript any, truthy check {payType && ...} handles both null and undefined correctly, findBy* / queryBy* async pattern correct, no debug output, no unused imports.

---

UX — ✅ APPROVED

Strengths:

• Progressive disclosure is the correct UX pattern here — hiding Pay Rate until Pay Type is selected prevents the field from appearing with ambiguous context ("Enter yearly salary" vs "Enter hourly rate" when neither applies)
• No accessibility regressions: label={t('Pay Rate')} retained, keyboard tab order adjusts naturally on conditional mount/unmount
• Translation coverage unaffected — no new strings introduced

No issues found.

---

Summary

Narrow, focused bug fix that applies the established conditional-rendering pattern ({!isSalaried && ...}) consistently to the Pay Rate field. The payType variable extraction is a minor readability improvement. Test coverage is correct. All four agents approved with no blocking issues.

🤖 Generated by multi-agent AI review (Architecture · Testing · Standards · UX)

[github-actions]

AI Review Auto-Approval

Risk Level: LOW (1/10)
Verdict: CLEAN (no issues found)

This PR was auto-approved because:

• The multi-agent AI review determined it is low risk
• No blocking issues were found

If you believe this PR needs human review, dismiss this approval and request a review manually.

[github-actions]

Preview branch generated at https://MPDX-9609.d3dytjb8adxkk5.amplifyapp.com