diff --git a/src/components/Tool/FixCommitmentInfo/Contact.tsx b/src/components/Tool/FixCommitmentInfo/Contact.tsx index 5108b81ad..8fbaf58b0 100644 --- a/src/components/Tool/FixCommitmentInfo/Contact.tsx +++ b/src/components/Tool/FixCommitmentInfo/Contact.tsx @@ -166,7 +166,7 @@ interface Props { id: string; name: string; donations: DonationsType[]; - statusTitle: string; + statusTitle: string | null | undefined; statusValue: string; amount: number; amountCurrency: string; @@ -304,7 +304,7 @@ const Contact: React.FC = ({ {name} - {`Current: ${statusTitle} ${ + {`Current: ${statusTitle || ''} ${ amount && amountCurrency ? currencyFormat(amount, amountCurrency, locale) : '' diff --git a/src/components/Tool/FixCommitmentInfo/FixCommitmentInfo.test.tsx b/src/components/Tool/FixCommitmentInfo/FixCommitmentInfo.test.tsx index 79e8ae516..410fa7d63 100644 --- a/src/components/Tool/FixCommitmentInfo/FixCommitmentInfo.test.tsx +++ b/src/components/Tool/FixCommitmentInfo/FixCommitmentInfo.test.tsx @@ -3,6 +3,7 @@ import { ThemeProvider } from '@mui/material/styles'; import userEvent from '@testing-library/user-event'; import { ErgonoMockShape } from 'graphql-ergonomock'; import { SnackbarProvider } from 'notistack'; +import { VirtuosoMockContext } from 'react-virtuoso'; import TestRouter from '__tests__/util/TestRouter'; import TestWrapper from '__tests__/util/TestWrapper'; import { GqlMockedProvider } from '__tests__/util/graphqlMocking'; @@ -42,23 +43,27 @@ const Components = ({ - - mocks={{ - InvalidStatuses: { - contacts: { - nodes: mockNodes, - totalCount: 2, - }, - }, - }} + - - + + mocks={{ + InvalidStatuses: { + contacts: { + nodes: mockNodes, + totalCount: 2, + }, + }, + }} + > + + + @@ -71,13 +76,16 @@ describe('FixCommitmentContact', () => { }); it('default with test data', async () => { - const { getByText, findByText } = render(); + const { getByText, getAllByText, findByText } = render(); await findByText('Fix Commitment Info'); expect(getByText('Fix Commitment Info')).toBeInTheDocument(); expect( getByText('You have 2 partner statuses to confirm.'), ).toBeInTheDocument(); + expect(getAllByText('Current: Partner - Financial $1 Weekly')).toHaveLength( + 2, + ); }); it('has correct styles', async () => { @@ -174,4 +182,24 @@ describe('FixCommitmentContact', () => { expect(setContactFocus).toHaveBeenCalled(); }); + + it('updates contact info with dontChange enum', async () => { + const { findAllByTestId, findByText, getAllByTestId, queryByText } = render( + , + ); + + userEvent.click((await findAllByTestId('doNotChangeButton'))[0]); + + expect( + await findByText( + "Are you sure you wish to leave Tester 1's commitment information unchanged?", + ), + ).toBeInTheDocument(); + + userEvent.click(getAllByTestId('action-button')[1]); + + await waitFor(() => + expect(queryByText('Tester 1')).not.toBeInTheDocument(), + ); + }); }); diff --git a/src/components/Tool/FixCommitmentInfo/FixCommitmentInfo.tsx b/src/components/Tool/FixCommitmentInfo/FixCommitmentInfo.tsx index 9186d45bb..d4743f103 100644 --- a/src/components/Tool/FixCommitmentInfo/FixCommitmentInfo.tsx +++ b/src/components/Tool/FixCommitmentInfo/FixCommitmentInfo.tsx @@ -9,8 +9,14 @@ import { } from '@mui/material'; import { useSnackbar } from 'notistack'; import { Trans, useTranslation } from 'react-i18next'; +import { ItemProps } from 'react-virtuoso'; import { makeStyles } from 'tss-react/mui'; import { SetContactFocus } from 'pages/accountLists/[accountListId]/tools/useToolsHelper'; +import { + InfiniteList, + ItemWithBorders, +} from 'src/components/InfiniteList/InfiniteList'; +import { navBarHeight } from 'src/components/Layouts/Primary/Primary'; import { Confirmation } from 'src/components/common/Modal/Confirmation/Confirmation'; import { PledgeFrequencyEnum, StatusEnum } from 'src/graphql/types.generated'; import useGetAppSettings from 'src/hooks/useGetAppSettings'; @@ -107,6 +113,10 @@ export enum UpdateTypeEnum { Hide = 'HIDE', } +const ItemOverride: React.ComponentType = (props) => ( + +); + const FixCommitmentInfo: React.FC = ({ accountListId, setContactFocus, @@ -117,7 +127,7 @@ const FixCommitmentInfo: React.FC = ({ const { t } = useTranslation(); const { enqueueSnackbar } = useSnackbar(); const { appName } = useGetAppSettings(); - const { data } = useInvalidStatusesQuery({ + const { data, loading, fetchMore } = useInvalidStatusesQuery({ variables: { accountListId }, }); @@ -251,36 +261,55 @@ const FixCommitmentInfo: React.FC = ({ - - - {data.contacts.nodes.map((contact) => ( - - ))} - - + ( + + + + + + )} + endReached={() => + data.contacts.pageInfo.hasNextPage && + fetchMore({ + variables: { after: data.contacts.pageInfo.endCursor }, + }) + } + EmptyPlaceholder={} + style={{ + height: `calc(100vh - ${navBarHeight} - ${theme.spacing( + 33, + )})`, + width: '100%', + scrollbarWidth: 'none', + }} + ItemOverride={ItemOverride} + increaseViewportBy={{ top: 2000, bottom: 2000 }} + > ) : (