diff --git a/src/components/HrTools/SalaryCalculator/SalaryCalculation/RequestedSalaryCard/RequestedSalaryCard.test.tsx b/src/components/HrTools/SalaryCalculator/SalaryCalculation/RequestedSalaryCard/RequestedSalaryCard.test.tsx index 8ccb9526b7..948590cb46 100644 --- a/src/components/HrTools/SalaryCalculator/SalaryCalculation/RequestedSalaryCard/RequestedSalaryCard.test.tsx +++ b/src/components/HrTools/SalaryCalculator/SalaryCalculation/RequestedSalaryCard/RequestedSalaryCard.test.tsx @@ -8,8 +8,11 @@ import { } from 'src/graphql/types.generated'; import { SalaryCalculationQuery } from '../../SalaryCalculatorContext/SalaryCalculation.generated'; import { + EffectiveSalaryRequestMock, SalaryCalculatorTestWrapper, SalaryCalculatorTestWrapperProps, + hcmSpouseMock, + hcmUserMock, } from '../../SalaryCalculatorTestWrapper'; import { RequestedSalaryCard } from './RequestedSalaryCard'; @@ -27,9 +30,19 @@ const defaultSalaryMock: DeepPartial = }, }; -const TestComponent: React.FC = (props) => ( +const approvedSalaryMock: EffectiveSalaryRequestMock = { + personNumber: hcmUserMock.staffInfo.personNumber, + salary: 11111, + spouseSalary: 22222, +}; + +const TestComponent: React.FC = ({ + effectiveSalaryRequestMock = approvedSalaryMock, + ...props +}) => ( cell.textContent), ).toEqual([ - 'Current Salary', + 'Current Requested Salary', 'Minimum Salary', 'Maximum Allowable Salary (CAP)', 'Requested Salary', @@ -86,7 +99,27 @@ As you set your salary level, the amount you receive should reflect the amount o const { getAllByRole } = render(); const expectedCells = [ - ['$10,001.00', '$20,001.00'], + ['$11,111.00', '$22,222.00'], + ['$10,003.00', '$20,003.00'], + ['$10,004.00', '$20,004.00'], + ].flat(); + + await waitFor(() => + expect( + getAllByRole('cell') + .slice(0, -2) + .map((cell) => cell.textContent), + ).toEqual(expectedCells), + ); + }); + + it('should render a dash when there is no approved salary request', async () => { + const { getAllByRole } = render( + , + ); + + const expectedCells = [ + ['–', '–'], ['$10,003.00', '$20,003.00'], ['$10,004.00', '$20,004.00'], ].flat(); @@ -101,6 +134,31 @@ As you set your salary level, the amount you receive should reflect the amount o ); }); + it('swaps the requested salary when the spouse created the request', async () => { + const { getAllByRole } = render( + , + ); + + await waitFor(() => + expect( + getAllByRole('cell') + .slice(0, -2) + .map((cell) => cell.textContent), + ).toEqual( + [ + ['$22,222.00', '$11,111.00'], + ['$10,003.00', '$20,003.00'], + ['$10,004.00', '$20,004.00'], + ].flat(), + ), + ); + }); + it('should render the effective paycheck note when payroll dates match', async () => { const { findByRole } = render( cell.textContent), ).toEqual([ - 'Current Salary', + 'Current Requested Salary', 'Minimum Salary', 'Maximum Allowable Salary (CAP)', 'Requested Salary', @@ -159,7 +217,23 @@ As you set your salary level, the amount you receive should reflect the amount o it('should render table cells with formatted currency', async () => { const { getAllByRole } = render(); - const expectedCells = ['$10,001.00', '$10,003.00', '$10,004.00']; + const expectedCells = ['$11,111.00', '$10,003.00', '$10,004.00']; + + await waitFor(() => + expect( + getAllByRole('cell') + .slice(0, -1) + .map((cell) => cell.textContent), + ).toEqual(expectedCells), + ); + }); + + it('should render a dash when there is no approved salary request', async () => { + const { getAllByRole } = render( + , + ); + + const expectedCells = ['–', '$10,003.00', '$10,004.00']; await waitFor(() => expect( diff --git a/src/components/HrTools/SalaryCalculator/SalaryCalculation/RequestedSalaryCard/RequestedSalaryCard.tsx b/src/components/HrTools/SalaryCalculator/SalaryCalculation/RequestedSalaryCard/RequestedSalaryCard.tsx index 13e1f3828c..cd6c7893cf 100644 --- a/src/components/HrTools/SalaryCalculator/SalaryCalculation/RequestedSalaryCard/RequestedSalaryCard.tsx +++ b/src/components/HrTools/SalaryCalculator/SalaryCalculation/RequestedSalaryCard/RequestedSalaryCard.tsx @@ -15,10 +15,14 @@ import * as yup from 'yup'; import { useAutosaveForm } from 'src/components/Shared/Autosave/AutosaveForm'; import { amount } from 'src/lib/yupHelpers'; import { AutosaveTextField } from '../../Autosave/AutosaveTextField'; -import { CalculationFieldsFragment } from '../../SalaryCalculatorContext/SalaryCalculation.generated'; +import { + CalculationFieldsFragment, + useEffectiveSalaryCalculationQuery, +} from '../../SalaryCalculatorContext/SalaryCalculation.generated'; import { useSalaryCalculator } from '../../SalaryCalculatorContext/SalaryCalculatorContext'; import { EffectiveDateNote } from '../../Shared/EffectiveDateNote'; import { StepCard, StepTableHead } from '../../Shared/StepCard'; +import { orientSalaryRequest } from '../../Shared/orientSalaryRequest'; import { useFormatters } from '../../Shared/useFormatters'; import { useCaps } from '../useCaps'; import { useSosaBlockOverCap } from '../useSosaBlockOverCap'; @@ -35,6 +39,13 @@ export const RequestedSalaryCard: React.FC = () => { const { isUserSosa, blockOnCap } = useSosaBlockOverCap(); const { markValid, markInvalid } = useAutosaveForm(); + const { data: effectiveData } = useEffectiveSalaryCalculationQuery(); + const { salary, spouseSalary } = + orientSalaryRequest( + effectiveData?.salaryRequest, + hcmUser?.staffInfo.personNumber, + ) ?? {}; + // Disable the Continue button while the saved gross exceeds the SOSA cap. useEffect(() => { if (blockOnCap) { @@ -128,14 +139,12 @@ export const RequestedSalaryCard: React.FC = () => { - {t('Current Salary')} - - - {formatCurrency(hcmUser?.currentSalary.grossSalaryAmount)} + {t('Current Requested Salary')} + {salary ? formatCurrency(salary) : '–'} {hcmSpouse && ( - {formatCurrency(hcmSpouse.currentSalary.grossSalaryAmount)} + {spouseSalary ? formatCurrency(spouseSalary) : '–'} )} diff --git a/src/components/HrTools/SalaryCalculator/SalaryCalculatorTestWrapper.tsx b/src/components/HrTools/SalaryCalculator/SalaryCalculatorTestWrapper.tsx index 7ca4c0ce0b..80cebbb6b4 100644 --- a/src/components/HrTools/SalaryCalculator/SalaryCalculatorTestWrapper.tsx +++ b/src/components/HrTools/SalaryCalculator/SalaryCalculatorTestWrapper.tsx @@ -18,7 +18,10 @@ import { HcmQueryVariables, } from '../Shared/HcmData/Hcm.generated'; import { PayrollDatesQuery } from './EffectiveDateStep/PayrollDates.generated'; -import { SalaryCalculationQuery } from './SalaryCalculatorContext/SalaryCalculation.generated'; +import { + EffectiveSalaryCalculationQuery, + SalaryCalculationQuery, +} from './SalaryCalculatorContext/SalaryCalculation.generated'; import { SalaryCalculatorProvider } from './SalaryCalculatorContext/SalaryCalculatorContext'; const hcmMock = gqlMock(HcmDocument, { @@ -91,8 +94,13 @@ export type SalaryRequestMock = DeepPartial< SalaryCalculationQuery['salaryRequest'] >; +export type EffectiveSalaryRequestMock = DeepPartial< + EffectiveSalaryCalculationQuery['salaryRequest'] +>; + export interface SalaryCalculatorTestWrapperProps { salaryRequestMock?: SalaryRequestMock; + effectiveSalaryRequestMock?: EffectiveSalaryRequestMock; hcmUser?: DeepPartial; hcmSpouse?: DeepPartial; onCall?: MockLinkCallHandler; @@ -107,6 +115,7 @@ export const SalaryCalculatorTestWrapper: React.FC< SalaryCalculatorTestWrapperProps > = ({ salaryRequestMock, + effectiveSalaryRequestMock = null, hcmUser, hcmSpouse, onCall, @@ -133,6 +142,7 @@ export const SalaryCalculatorTestWrapper: React.FC< Hcm: HcmQuery; PayrollDates: PayrollDatesQuery; SalaryCalculation: SalaryCalculationQuery; + EffectiveSalaryCalculation: EffectiveSalaryCalculationQuery; GoalCalculatorConstants: GoalCalculatorConstantsQuery; StaffAccount: StaffAccountQuery; GetUser: GetUserQuery; @@ -152,6 +162,9 @@ export const SalaryCalculatorTestWrapper: React.FC< PayrollDates: { payrollDates, }, + EffectiveSalaryCalculation: { + salaryRequest: effectiveSalaryRequestMock, + }, GoalCalculatorConstants: { constant: { mpdGoalGeographicConstants: [