From 7df50665936160cc6f709339b8aa947454ac536a Mon Sep 17 00:00:00 2001 From: Caleb Alldrin Date: Thu, 31 Oct 2024 12:26:15 -0700 Subject: [PATCH 1/2] Add late circle --- .../Layout/Table/Table.test.tsx | 27 +++++++++++++++++-- .../Layout/Table/Table.tsx | 26 ++++++++++++++++++ 2 files changed, 51 insertions(+), 2 deletions(-) diff --git a/src/components/Reports/FourteenMonthReports/Layout/Table/Table.test.tsx b/src/components/Reports/FourteenMonthReports/Layout/Table/Table.test.tsx index ab1107cf6..de078b5d7 100644 --- 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(); + + 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(); diff --git a/src/components/Reports/FourteenMonthReports/Layout/Table/Table.tsx b/src/components/Reports/FourteenMonthReports/Layout/Table/Table.tsx index b2aa47fd8..b40633a59 100644 --- 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< {contact.name} + {(contact.lateBy30Days || contact.lateBy60Days) && ( + + + + )} {isExpanded && ( From d42bf4c9c89346e1695c05a07dc5d030d4909eea Mon Sep 17 00:00:00 2001 From: Caleb Alldrin Date: Thu, 31 Oct 2024 13:55:03 -0700 Subject: [PATCH 2/2] Move circle to styled component --- .../Layout/Table/Table.test.tsx | 20 ++++++------- .../Layout/Table/Table.tsx | 28 +++++++++++-------- 2 files changed, 25 insertions(+), 23 deletions(-) diff --git a/src/components/Reports/FourteenMonthReports/Layout/Table/Table.test.tsx b/src/components/Reports/FourteenMonthReports/Layout/Table/Table.test.tsx index de078b5d7..73e2b93d0 100644 --- a/src/components/Reports/FourteenMonthReports/Layout/Table/Table.test.tsx +++ b/src/components/Reports/FourteenMonthReports/Layout/Table/Table.test.tsx @@ -252,12 +252,12 @@ describe('FourteenMonthReportTable', () => { ).not.toBeInTheDocument(); }); - const fourteenMonthReportRow = getAllByTestId( + const fourteenMonthReportRows = getAllByTestId( 'FourteenMonthReportTableRow', ); - expect(fourteenMonthReportRow).toHaveLength(2); - expect(fourteenMonthReportRow[0]).toHaveTextContent('test name'); - expect(fourteenMonthReportRow[1]).toHaveTextContent('name again'); + expect(fourteenMonthReportRows).toHaveLength(2); + expect(fourteenMonthReportRows[0]).toHaveTextContent('test name'); + expect(fourteenMonthReportRows[1]).toHaveTextContent('name again'); expect(queryByTestId('FourteenMonthReport')).toBeInTheDocument(); }); @@ -270,18 +270,16 @@ describe('FourteenMonthReportTable', () => { ).not.toBeInTheDocument(); }); - const fourteenMonthReportRow = getAllByTestId( + const fourteenMonthReportRows = getAllByTestId( 'FourteenMonthReportTableRow', ); expect( - within(fourteenMonthReportRow[0]).getByTestId('lateCircle60'), + within(fourteenMonthReportRows[0]).getByTestId('lateCircle60'), ).toBeInTheDocument(); - await waitFor(() => { - expect( - within(fourteenMonthReportRow[1]).queryByTestId('lateCircle30'), - ).not.toBeInTheDocument(); - }); + expect( + within(fourteenMonthReportRows[1]).queryByTestId('lateCircle30'), + ).not.toBeInTheDocument(); }); it('can make contact click event happen and pledge amount is correct', async () => { diff --git a/src/components/Reports/FourteenMonthReports/Layout/Table/Table.tsx b/src/components/Reports/FourteenMonthReports/Layout/Table/Table.tsx index b40633a59..c75af6dfb 100644 --- a/src/components/Reports/FourteenMonthReports/Layout/Table/Table.tsx +++ b/src/components/Reports/FourteenMonthReports/Layout/Table/Table.tsx @@ -60,6 +60,20 @@ const StyledInfoIcon = styled(InfoIcon)({ }, }); +const CircleBox = styled(Box, { + shouldForwardProp: (prop) => prop !== 'lateBy60Days', +})(({ lateBy60Days = false }: { lateBy60Days?: boolean }) => ({ + backgroundColor: lateBy60Days ? 'red' : 'orange', + width: 15, + height: 15, + borderRadius: '50%', + flex: 'none', + marginLeft: 'auto', + '@media print': { + display: 'none', + }, +})); + const StyledTotalsRow = styled(TableRow)({ '.MuiTableCell-root': { fontWeight: 'bold', @@ -148,18 +162,8 @@ export const FourteenMonthReportTable: React.FC< })} arrow > -