Fix Late Commitments (#1121)

* Remove front end filtering of late contacts. Use API filter instead * Remove test checking front end filtering that has been removed
CruGlobal · Oct 8, 2024 · b8a8d5a · b8a8d5a
1 parent a897bcc
commit b8a8d5a
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 157 deletions.
diff --git a/src/components/Dashboard/ThisWeek/GetThisWeek.graphql b/src/components/Dashboard/ThisWeek/GetThisWeek.graphql
@@ -1,7 +1,7 @@
 query GetThisWeek(
   $accountListId: ID!
   $endOfDay: ISO8601DateTime!
-  $today: ISO8601Date!
+  $thirtyDaysAgo: ISO8601Date!
   $threeWeeksFromNow: ISO8601Date!
   $twoWeeksAgo: ISO8601Date!
 ) {
@@ -60,7 +60,7 @@ query GetThisWeek(
     accountListId: $accountListId
     first: 3
     contactsFilter: {
-      lateAt: { max: $today }
+      lateAt: { max: $thirtyDaysAgo }
       status: PARTNER_FINANCIAL
       pledgeReceived: RECEIVED
     }

diff --git a/src/components/Dashboard/ThisWeek/LateCommitments/LateCommitments.test.tsx b/src/components/Dashboard/ThisWeek/LateCommitments/LateCommitments.test.tsx
@@ -38,29 +38,6 @@ describe('LateCommitments', () => {
       nodes: [],
       totalCount: 0,
     };
-    emptyCheck(latePledgeContacts);
-  });
-
-  it('should show empty if all of the late pledges are under 7 days late', () => {
-    const latePledgeContacts = {
-      nodes: [
-        {
-          id: 'contact1',
-          name: 'Smith, Sarah',
-          lateAt: '2019-12-31',
-        },
-        {
-          id: 'contact2',
-          name: 'Smith, John',
-          lateAt: '2019-12-30',
-        },
-      ],
-      totalCount: 2,
-    };
-    emptyCheck(latePledgeContacts);
-  });
-
-  const emptyCheck = (latePledgeContacts: any) => {
     const { getByTestId, queryByTestId } = render(
       <LateCommitments latePledgeContacts={latePledgeContacts} />,
     );
@@ -69,7 +46,7 @@ describe('LateCommitments', () => {
     expect(
       queryByTestId('LateCommitmentsListContacts'),
     ).not.toBeInTheDocument();
-  };
+  });
 
   it('props', () => {
     const latePledgeContacts = {
@@ -112,40 +89,6 @@ describe('LateCommitments', () => {
     );
   });
 
-  it('should not show a late commitment that is less than 7 days late', () => {
-    const latePledgeContacts = {
-      nodes: [
-        {
-          id: 'contact1',
-          name: 'Smith, Sarah',
-          lateAt: '2019-12-31',
-        },
-        {
-          id: 'contact2',
-          name: 'Smith, John',
-          lateAt: '2015-12-01',
-        },
-      ],
-      totalCount: 2,
-    };
-    const { getByTestId, queryByTestId } = render(
-      <GqlMockedProvider>
-        <LateCommitments latePledgeContacts={latePledgeContacts} />
-      </GqlMockedProvider>,
-    );
-    const contact1Element = queryByTestId(
-      'LateCommitmentsListItemContact-contact1',
-    );
-    expect(contact1Element).not.toBeInTheDocument();
-
-    const contact2Element = getByTestId(
-      'LateCommitmentsListItemContact-contact2',
-    );
-    expect(contact2Element.textContent).toEqual(
-      'Smith, JohnTheir gift is 1,492 days late.',
-    );
-  });
-
   it('should not show a late commitment if it has no lateAt property', () => {
     const latePledgeContacts = {
       nodes: [

diff --git a/src/components/Dashboard/ThisWeek/LateCommitments/LateCommitments.tsx b/src/components/Dashboard/ThisWeek/LateCommitments/LateCommitments.tsx
@@ -15,8 +15,6 @@ import { motion } from 'framer-motion';
 import { DateTime } from 'luxon';
 import { useTranslation } from 'react-i18next';
 import {
-  Contact,
-  ContactConnection,
   ContactFilterPledgeReceivedEnum,
   StatusEnum,
 } from 'src/graphql/types.generated';
@@ -76,27 +74,6 @@ const LateCommitments = ({
   const accountListId = useAccountListId();
   const { push } = useRouter();
 
-  const showLateCommitments = (latePledgeContacts?: ContactConnection) => {
-    if (!latePledgeContacts || latePledgeContacts.nodes.length === 0) {
-      return false;
-    }
-    const filteredLatePledges = latePledgeContacts.nodes.filter(
-      (contact: Contact) => {
-        if (contact.lateAt) {
-          return determineDaysLate(contact.lateAt) >= 7;
-        }
-        return false;
-      },
-    );
-    return filteredLatePledges.length > 0;
-  };
-
-  const determineDaysLate = (lateAt: string) => {
-    return Math.round(
-      DateTime.local().diff(DateTime.fromISO(lateAt), 'days').days,
-    );
-  };
-
   return (
     <LateCommitmentsContainer>
       <CardHeader title={t('Late Commitments')} />
@@ -130,84 +107,82 @@ const LateCommitments = ({
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
         >
-          {!showLateCommitments(latePledgeContacts as ContactConnection) && (
+          {!latePledgeContacts?.nodes.length && (
             <LateCommitmentsCardContent data-testid="LateCommitmentsCardContentEmpty">
               <img src={illustration14} alt="empty" />
               {t('No late commitments to show.')}
             </LateCommitmentsCardContent>
           )}
-          {latePledgeContacts &&
-            showLateCommitments(latePledgeContacts as ContactConnection) && (
-              <>
-                <CardList data-testid="LateCommitmentsListContacts">
-                  {latePledgeContacts.nodes.map((contact) => {
-                    if (!contact.lateAt) {
-                      return null;
-                    }
-                    const daysLate = Math.round(
-                      DateTime.local().diff(
-                        DateTime.fromISO(contact.lateAt),
-                        'days',
-                      ).days,
-                    );
+          {!!latePledgeContacts?.nodes.length && (
+            <>
+              <CardList data-testid="LateCommitmentsListContacts">
+                {latePledgeContacts.nodes.map((contact) => {
+                  if (!contact.lateAt) {
+                    return null;
+                  }
+                  const daysLate = Math.round(
+                    DateTime.local().diff(
+                      DateTime.fromISO(contact.lateAt),
+                      'days',
+                    ).days,
+                  );
 
-                    return (
-                      daysLate >= 7 && (
-                        <ListItem
-                          component="a"
-                          button
-                          data-testid={`LateCommitmentsListItemContact-${contact.id}`}
-                          onClick={() =>
-                            push(
-                              `/accountLists/${accountListId}/contacts/list/${contact.id}`,
-                            )
-                          }
-                          key={contact.id}
-                        >
-                          <ListItemText
-                            primary={contact.name}
-                            secondary={t(
-                              'Their gift is {{daysLate}} day late._plural',
-                              {
-                                daysLate: numberFormat(daysLate, locale),
-                              },
-                            )}
-                          />
-                        </ListItem>
-                      )
-                    );
+                  return (
+                    daysLate && (
+                      <ListItem
+                        component="a"
+                        button
+                        data-testid={`LateCommitmentsListItemContact-${contact.id}`}
+                        onClick={() =>
+                          push(
+                            `/accountLists/${accountListId}/contacts/list/${contact.id}`,
+                          )
+                        }
+                        key={contact.id}
+                      >
+                        <ListItemText
+                          primary={contact.name}
+                          secondary={t(
+                            'Their gift is {{daysLate}} day late._plural',
+                            {
+                              daysLate: numberFormat(daysLate, locale),
+                            },
+                          )}
+                        />
+                      </ListItem>
+                    )
+                  );
+                })}
+              </CardList>
+              <CardActions>
+                <Button
+                  size="small"
+                  color="primary"
+                  data-testid="LateCommitmentsButtonViewAll"
+                  href={`/accountLists/${accountListId}/contacts/list?filters=${encodeURIComponent(
+                    JSON.stringify({
+                      lateAt: {
+                        min: DateTime.fromISO('1970-01-01'),
+                        max: DateTime.local()
+                          .endOf('day')
+                          .minus({ days: 30 })
+                          .toISODate(),
+                      },
+                      pledgeReceived: ContactFilterPledgeReceivedEnum.Received,
+                      status: [StatusEnum.PartnerFinancial],
+                    }),
+                  )}`}
+                >
+                  {t('View All ({{totalCount}})', {
+                    totalCount: numberFormat(
+                      latePledgeContacts?.totalCount ?? 0,
+                      locale,
+                    ),
                   })}
-                </CardList>
-                <CardActions>
-                  <Button
-                    size="small"
-                    color="primary"
-                    data-testid="LateCommitmentsButtonViewAll"
-                    href={`/accountLists/${accountListId}/contacts/list?filters=${encodeURIComponent(
-                      JSON.stringify({
-                        lateAt: {
-                          min: DateTime.fromISO('1970-01-01'),
-                          max: DateTime.local()
-                            .endOf('day')
-                            .minus({ days: 30 })
-                            .toISODate(),
-                        },
-                        pledgeReceived:
-                          ContactFilterPledgeReceivedEnum.Received,
-                        status: [StatusEnum.PartnerFinancial],
-                      }),
-                    )}`}
-                  >
-                    {t('View All ({{totalCount}})', {
-                      totalCount: numberFormat(
-                        latePledgeContacts?.totalCount ?? 0,
-                        locale,
-                      ),
-                    })}
-                  </Button>
-                </CardActions>
-              </>
-            )}
+                </Button>
+              </CardActions>
+            </>
+          )}
         </MotionDiv>
       )}
     </LateCommitmentsContainer>

diff --git a/src/components/Dashboard/ThisWeek/ThisWeek.mock.ts b/src/components/Dashboard/ThisWeek/ThisWeek.mock.ts
@@ -146,7 +146,7 @@ export const GetThisWeekDefaultMocks = (): MockedResponse[] => {
         variables: {
           accountListId: 'abc',
           endOfDay: endOfDay.toISO(),
-          today: endOfDay.toISODate(),
+          thirtyDaysAgo: endOfDay.minus({ days: 30 }).toISODate(),
           threeWeeksFromNow: endOfDay.plus({ weeks: 3 }).toISODate(),
           twoWeeksAgo: endOfDay.minus({ weeks: 2 }).toISODate(),
         },
@@ -181,7 +181,7 @@ export const GetThisWeekEmptyMocks = (): MockedResponse[] => {
         variables: {
           accountListId: 'abc',
           endOfDay: endOfDay.toISO(),
-          today: endOfDay.toISODate(),
+          thirtyDaysAgo: endOfDay.minus({ days: 30 }).toISODate(),
           threeWeeksFromNow: endOfDay.plus({ weeks: 3 }).toISODate(),
           twoWeeksAgo: endOfDay.minus({ weeks: 2 }).toISODate(),
         },

diff --git a/src/components/Dashboard/ThisWeek/ThisWeek.tsx b/src/components/Dashboard/ThisWeek/ThisWeek.tsx
@@ -25,7 +25,7 @@ const ThisWeek = ({ accountListId }: Props): ReactElement => {
     variables: {
       accountListId,
       endOfDay: endOfDay.toISO(),
-      today: endOfDay.toISODate(),
+      thirtyDaysAgo: endOfDay.minus({ days: 30 }).toISODate(),
       threeWeeksFromNow: endOfDay.plus({ weeks: 3 }).toISODate(),
       twoWeeksAgo: endOfDay.minus({ weeks: 2 }).toISODate(),
     },