Add late circle

CruGlobal · Oct 31, 2024 · 7df5066 · 7df5066
1 parent 212186c
commit 7df5066
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 2 deletions.
diff --git a/src/components/Reports/FourteenMonthReports/Layout/Table/Table.test.tsx b/src/components/Reports/FourteenMonthReports/Layout/Table/Table.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ThemeProvider } from '@mui/material/styles';
-import { render, waitFor } from '@testing-library/react';
+import { render, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import TestRouter from '__tests__/util/TestRouter';
 import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
@@ -29,7 +29,7 @@ const defaultFourteenMonthReport = {
             average: 258,
             id: 'contact-1',
             lateBy30Days: false,
-            lateBy60Days: false,
+            lateBy60Days: true,
             months: [
               {
                 donations: [
@@ -261,6 +261,29 @@ describe('FourteenMonthReportTable', () => {
     expect(queryByTestId('FourteenMonthReport')).toBeInTheDocument();
   });
 
+  it('should should show the dot if a donation is late', async () => {
+    const { getAllByTestId, queryByTestId } = render(<Components />);
+
+    await waitFor(() => {
+      expect(
+        queryByTestId('LoadingFourteenMonthReport'),
+      ).not.toBeInTheDocument();
+    });
+
+    const fourteenMonthReportRow = getAllByTestId(
+      'FourteenMonthReportTableRow',
+    );
+    expect(
+      within(fourteenMonthReportRow[0]).getByTestId('lateCircle60'),
+    ).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(
+        within(fourteenMonthReportRow[1]).queryByTestId('lateCircle30'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
   it('can make contact click event happen and pledge amount is correct', async () => {
     const { getByRole, queryByTestId, getAllByTestId } = render(<Components />);
 

diff --git a/src/components/Reports/FourteenMonthReports/Layout/Table/Table.tsx b/src/components/Reports/FourteenMonthReports/Layout/Table/Table.tsx
@@ -8,6 +8,7 @@ import {
   TableBody,
   TableContainer,
   TableRow,
+  Tooltip,
   Typography,
 } from '@mui/material';
 import { styled } from '@mui/material/styles';
@@ -140,6 +141,31 @@ export const FourteenMonthReportTable: React.FC<
                           <Link>{contact.name}</Link>
                         </NextLink>
                       </NameTypography>
+                      {(contact.lateBy30Days || contact.lateBy60Days) && (
+                        <Tooltip
+                          title={t('{{daysLate}}+ days late', {
+                            daysLate: contact.lateBy60Days ? '60' : '30',
+                          })}
+                          arrow
+                        >
+                          <Box
+                            sx={{
+                              bgcolor: contact.lateBy60Days ? 'red' : 'orange',
+                              width: 15,
+                              height: 15,
+                              borderRadius: '50%',
+                              flex: 'none',
+                              marginLeft: 'auto',
+                              '@media print': {
+                                display: 'none',
+                              },
+                            }}
+                            data-testid={`lateCircle${
+                              contact.lateBy60Days ? '60' : '30'
+                            }`}
+                          />
+                        </Tooltip>
+                      )}
                     </Box>
                     {isExpanded && (
                       <Typography variant="body2" color="textSecondary">