diff --git a/src/components/Reports/AdditionalSalaryRequest/Shared/AdditionalSalaryRequestContext.tsx b/src/components/Reports/AdditionalSalaryRequest/Shared/AdditionalSalaryRequestContext.tsx index 0a1cbebaef..be51bf4eaf 100644 --- a/src/components/Reports/AdditionalSalaryRequest/Shared/AdditionalSalaryRequestContext.tsx +++ b/src/components/Reports/AdditionalSalaryRequest/Shared/AdditionalSalaryRequestContext.tsx @@ -54,6 +54,7 @@ export const AdditionalSalaryRequestProvider: React.FC = ({ FormEnum.AdditionalSalary, ); const locale = useLocale(); + const totalSteps = steps.length; const createCurrencyValidation = useCallback( (fieldName: string, max?: number) => { @@ -176,8 +177,9 @@ export const AdditionalSalaryRequestProvider: React.FC = ({ }); const percentComplete = useMemo( - () => calculateCompletionPercentage(formik.values), - [formik.values], + () => + calculateCompletionPercentage(formik.values, currentIndex, totalSteps), + [formik.values, currentIndex, totalSteps], ); const contextValue = useMemo( diff --git a/src/components/Reports/AdditionalSalaryRequest/Shared/calculateCompletionPercentage.test.ts b/src/components/Reports/AdditionalSalaryRequest/Shared/calculateCompletionPercentage.test.ts index 621c2e85b3..b38b5af0c5 100644 --- a/src/components/Reports/AdditionalSalaryRequest/Shared/calculateCompletionPercentage.test.ts +++ b/src/components/Reports/AdditionalSalaryRequest/Shared/calculateCompletionPercentage.test.ts @@ -2,6 +2,8 @@ import { CompleteFormValues } from '../AdditionalSalaryRequest'; import { defaultCompleteFormValues } from '../CompleteForm/CompleteForm.mock'; import { calculateCompletionPercentage } from './calculateCompletionPercentage'; +const totalSteps = 3; + describe('calculateCompletionPercentage', () => { const createFormValues = ( overrides: Partial = {}, @@ -25,12 +27,14 @@ describe('calculateCompletionPercentage', () => { ...overrides, }); - it('should return 0 when all fields are empty', () => { + it('should return start percentage when all fields are empty', () => { const values = createFormValues(); - expect(calculateCompletionPercentage(values)).toBe(0); + + // Step 1 complete + 0 filled fields --> 1/18 = 5.55% + expect(calculateCompletionPercentage(values, 0, totalSteps)).toBe(5); }); - it('should return 100 when all fields are filled', () => { + it('should return 95 when all fields are filled', () => { const values = createFormValues({ currentYearSalary: '50000', previousYearSalary: '48000', @@ -49,7 +53,33 @@ describe('calculateCompletionPercentage', () => { reimbursableExpenses: '750', telephoneNumber: '555-1234', }); - expect(calculateCompletionPercentage(values)).toBe(100); + + // Steps 1 & 2 complete + all fields filled --> 17/18 = 94.44% + expect(calculateCompletionPercentage(values, 1, totalSteps)).toBe(95); + }); + + it('should return 100 when all fields are filled and all steps completed', () => { + const values = createFormValues({ + currentYearSalary: '50000', + previousYearSalary: '48000', + additionalSalary: '5000', + adoption: '1000', + contribution403b: '2000', + counseling: '500', + healthcareExpenses: '1500', + babysitting: '800', + childrenMinistryTrip: '1200', + childrenCollege: '3000', + movingExpense: '2500', + seminary: '1000', + housingDownPayment: '10000', + autoPurchase: '5000', + reimbursableExpenses: '750', + telephoneNumber: '555-1234', + }); + + // Steps 1, 2, & 3 complete + all fields filled --> 18/18 = 100% + expect(calculateCompletionPercentage(values, 2, totalSteps)).toBe(100); }); it('should exclude defaultPercentage from calculation', () => { @@ -57,7 +87,9 @@ describe('calculateCompletionPercentage', () => { currentYearSalary: '50000', defaultPercentage: true, }); - expect(calculateCompletionPercentage(values)).toBe(6); + + // Step 1 & 2 complete + 1 filled field --> 3/18 = 16.66% + expect(calculateCompletionPercentage(values, 1, totalSteps)).toBe(16); }); it('should treat zero values as unfilled', () => { @@ -66,7 +98,9 @@ describe('calculateCompletionPercentage', () => { previousYearSalary: '0', additionalSalary: '50000', }); - expect(calculateCompletionPercentage(values)).toBe(6); + + // Steps 1 & 2 complete + 1 filled field --> 3/18 = 16.66% + expect(calculateCompletionPercentage(values, 1, totalSteps)).toBe(16); }); it('should handle decimal values correctly', () => { @@ -74,6 +108,8 @@ describe('calculateCompletionPercentage', () => { currentYearSalary: '50000.50', previousYearSalary: '48000.75', }); - expect(calculateCompletionPercentage(values)).toBe(13); + + // Step 1 & 2 complete + 2 filled fields --> 4/18 = 22.22% + expect(calculateCompletionPercentage(values, 1, totalSteps)).toBe(21); }); }); diff --git a/src/components/Reports/AdditionalSalaryRequest/Shared/calculateCompletionPercentage.ts b/src/components/Reports/AdditionalSalaryRequest/Shared/calculateCompletionPercentage.ts index a1da8ae98b..2036ffcb2e 100644 --- a/src/components/Reports/AdditionalSalaryRequest/Shared/calculateCompletionPercentage.ts +++ b/src/components/Reports/AdditionalSalaryRequest/Shared/calculateCompletionPercentage.ts @@ -2,11 +2,13 @@ import { CompleteFormValues } from '../AdditionalSalaryRequest'; export const calculateCompletionPercentage = ( values: CompleteFormValues, + currentIndex: number, + totalSteps: number, ): number => { const fields = Object.values(values).filter( (value) => typeof value === 'string' || typeof value === 'number', ); - + const stepsCompleted = currentIndex + 1; const totalFields = fields.length; const filledFields = fields.filter((value) => { @@ -28,5 +30,9 @@ export const calculateCompletionPercentage = ( return value > 0; }).length; - return totalFields > 0 ? Math.round((filledFields / totalFields) * 100) : 0; + return totalFields > 0 + ? Math.round( + ((stepsCompleted + filledFields) / (totalSteps + totalFields)) * 100, + ) + : 0; };