Skip to content

MPDX- 9971: Update the ASR completed status screen #2018

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tamvu-cru wants to merge 2 commits into
base: main
Choose a base branch
from
Open

MPDX- 9971: Update the ASR completed status screen #2018

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
726999b
Update the ASR completed status screen
tamvu-cru Sep 3, 2026
66d62b3
Fixed tests
tamvu-cru Sep 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions src/components/HrTools/AdditionalSalaryRequest/AdditionalSalaryRequest.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,8 @@ describe('AdditionalSalaryRequest', () => {
/>,
);

expect(await findByText(/Request processed on:/i)).toBeInTheDocument();
expect(await findByText('Request processed')).toBeInTheDocument();
expect(await findByText('Payroll processing')).toBeInTheDocument();
expect(
await findByText(/Pending Additional Salary Request/i),
).toBeInTheDocument();
Expand All @@ -217,7 +218,8 @@ describe('AdditionalSalaryRequest', () => {
/>,
);

expect(await findByText(/Request processed on:/i)).toBeInTheDocument();
expect(await findByText('Request processed')).toBeInTheDocument();
expect(await findByText('Request approved')).toBeInTheDocument();
expect(
await findByText(/Pending Additional Salary Request/i),
).toBeInTheDocument();
Expand All @@ -241,7 +243,7 @@ describe('AdditionalSalaryRequest', () => {
/>,
);

expect(await findByText('Action Required:')).toBeInTheDocument();
expect(await findByText('Action required:')).toBeInTheDocument();
expect(
await findByText('Please provide additional documentation'),
).toBeInTheDocument();
Expand Down
11 changes: 7 additions & 4 deletions src/components/HrTools/AdditionalSalaryRequest/Shared/Helper/getDotColor.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,15 +43,18 @@ describe('getDotColor', () => {
});

describe('complete step', () => {
it('returns success.main when status is ApprovedNotPaid or ApprovedAndPaid', () => {
expect(
getDotColor(AsrStatusEnum.ApprovedNotPaid, 'complete', false, true),
).toBe('success.main');
it('returns success.main when status is ApprovedAndPaid', () => {
expect(
getDotColor(AsrStatusEnum.ApprovedAndPaid, 'complete', false, true),
).toBe('success.main');
});

it('returns warning.main when status is ApprovedNotPaid', () => {
expect(
getDotColor(AsrStatusEnum.ApprovedNotPaid, 'complete', false, true),
).toBe('warning.main');
});

it('returns warning.main when status is ActionRequired', () => {
expect(
getDotColor(AsrStatusEnum.ActionRequired, 'complete', false, false),
Expand Down
8 changes: 6 additions & 2 deletions src/components/HrTools/AdditionalSalaryRequest/Shared/Helper/getDotColor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,14 @@ export const getDotColor = (
}
// fallthrough
case 'complete':
if (isApproved) {
if (status === AsrStatusEnum.ApprovedAndPaid) {
return 'success.main';
}
if (status === AsrStatusEnum.ActionRequired) {
// Approved but payroll has not paid it yet, so the step is not done
if (
status === AsrStatusEnum.ApprovedNotPaid ||
status === AsrStatusEnum.ActionRequired
) {
return 'warning.main';
}
// fallthrough
Expand Down
29 changes: 16 additions & 13 deletions src/components/HrTools/AdditionalSalaryRequest/SharedComponents/CurrentRequest.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ describe('CurrentRequest', () => {

const { getByText } = render(<TestComponent request={pendingRequest} />);

expect(getByText('Request In Process')).toBeInTheDocument();
expect(getByText('Request in process')).toBeInTheDocument();
});
});

Expand All @@ -193,7 +193,7 @@ describe('CurrentRequest', () => {
});
});

it('displays "Request processed on:" for approved requests - approved not paid', () => {
it('displays "Request processed" for approved requests - approved not paid', () => {
const approvedRequest: RequestType = {
...mockRequest,
status: AsrStatusEnum.ApprovedNotPaid,
Expand All @@ -202,10 +202,10 @@ describe('CurrentRequest', () => {

const { getByText } = render(<TestComponent request={approvedRequest} />);

expect(getByText('Request processed on:')).toBeInTheDocument();
expect(getByText('Request processed')).toBeInTheDocument();
});

it('displays "Request processed on:" for approved requests - approved and paid', () => {
it('displays "Request complete" for approved requests - approved and paid', () => {
const approvedRequest: RequestType = {
...mockRequest,
status: AsrStatusEnum.ApprovedAndPaid,
Expand All @@ -214,34 +214,37 @@ describe('CurrentRequest', () => {

const { getByText } = render(<TestComponent request={approvedRequest} />);

expect(getByText('Request processed on:')).toBeInTheDocument();
expect(getByText('Request complete')).toBeInTheDocument();
});

it('displays "Request Complete" for approved not paid status', () => {
it('displays "Payroll processing" for approved not paid status', () => {
const approvedRequest: RequestType = {
...mockRequest,
status: AsrStatusEnum.ApprovedNotPaid,
};

const { getByText } = render(<TestComponent request={approvedRequest} />);
const { getByText, queryByText } = render(
<TestComponent request={approvedRequest} />,
);

expect(getByText('Request Complete')).toBeInTheDocument();
expect(getByText('Payroll processing')).toBeInTheDocument();
expect(queryByText('Request complete')).not.toBeInTheDocument();
});

it('displays "Request Complete" for approved and paid status', () => {
it('displays "Request complete" for approved and paid status', () => {
const approvedRequest: RequestType = {
...mockRequest,
status: AsrStatusEnum.ApprovedAndPaid,
};

const { getByText } = render(<TestComponent request={approvedRequest} />);

expect(getByText('Request Complete')).toBeInTheDocument();
expect(getByText('Request complete')).toBeInTheDocument();
});
});

describe('timeline status - ActionRequired', () => {
it('displays "Action Required:" with feedback', () => {
it('displays "Changes requested on:" with feedback', () => {
const actionRequiredRequest: RequestType = {
...mockRequest,
status: AsrStatusEnum.ActionRequired,
Expand All @@ -252,7 +255,7 @@ describe('CurrentRequest', () => {
<TestComponent request={actionRequiredRequest} />,
);

expect(getByText('Action Required:')).toBeInTheDocument();
expect(getByText('Changes requested on:')).toBeInTheDocument();
expect(
getByText('Please provide additional documentation'),
).toBeInTheDocument();
Expand All @@ -269,7 +272,7 @@ describe('CurrentRequest', () => {
<TestComponent request={actionRequiredRequest} />,
);

expect(getByText('Request processed on:')).toBeInTheDocument();
expect(getByText('Action required:')).toBeInTheDocument();
});
});

Expand Down
18 changes: 13 additions & 5 deletions src/components/HrTools/AdditionalSalaryRequest/SharedComponents/CurrentRequest.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,51 +152,59 @@
<TimelineConnector />
</TimelineSeparator>
<TimelineContent>
{isApproved || status === AsrStatusEnum.ActionRequired ? (
{isApproved ? (
<Typography sx={{ fontWeight: 'bold' }}>
{t('Request processed')}
</Typography>
) : status === AsrStatusEnum.ActionRequired ? (
<Typography>
<Box component="span" sx={{ fontWeight: 'bold' }}>
{t('Request processed on:')}
{t('Changes requested on:')}
</Box>
{changesRequestedAt &&
` ${dateFormat(DateTime.fromISO(changesRequestedAt), locale)}`}
</Typography>
) : (
<Typography sx={{ fontWeight: 'bold' }}>
{t('Request In Process')}
{t('Request in process')}
</Typography>
)}
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineSeparator>
<TimelineDot
sx={{
bgcolor: getDotColor(
status,
'complete',
isPending,
isApproved,
),
}}
variant={getDotVariant(
status,
'complete',
isPending,
isApproved,
)}
/>
</TimelineSeparator>
<TimelineContent>
{status === AsrStatusEnum.ActionRequired ? (
<>
<Typography sx={{ fontWeight: 'bold' }}>
{t('Action Required:')}{' '}
{t('Action required:')}{' '}
</Typography>
<Typography paragraph>{request?.feedback}</Typography>
</>
) : status === AsrStatusEnum.ApprovedNotPaid ? (
<Typography sx={{ fontWeight: 'bold' }}>
{t('Payroll processing')}
</Typography>
) : (
<Typography sx={{ fontWeight: 'bold' }}>
{t('Request Complete')}
{t('Request complete')}

Check warning on line 207 in src/components/HrTools/AdditionalSalaryRequest/SharedComponents/CurrentRequest.tsx

View check run for this annotation

CodeScene Delta Analysis / CodeScene Code Health Review (main)

❌ Getting worse: Large Method 

CurrentRequest:React.FC<CurrentRequestProps> increases from 177 to 185 lines of code, threshold = 120

Large functions with many lines of code are generally harder to understand and lower the code health.
Avoid adding more lines to this function.
</Typography>
)}
</TimelineContent>
Expand Down
Loading