[MPDX-7800] Fix monthly activity graph

src/components/Coaching/CoachingDetail/CoachingDetail.tsx

@@ -10,13 +10,15 @@ import { MonthlyCommitment } from './MonthlyCommitment/MonthlyCommitment';
 import {
   useGetAccountListCoachUsersQuery,
   useGetAccountListUsersQuery,
+  useGetCoachingDonationGraphQuery,
   useLoadAccountListCoachingDetailQuery,
   useLoadCoachingDetailQuery,
 } from './LoadCoachingDetail.generated';
 import theme from 'src/theme';
-import { MonthlyActivitySection } from 'src/components/Reports/DonationsReport/MonthlyActivity/MonthlyActivitySection';
 import { currencyFormat } from 'src/lib/intlFormat';
 import { useLocale } from 'src/hooks/useLocale';
+import DonationHistories from 'src/components/Dashboard/DonationHistories';
+import { useGetDonationGraphQuery } from 'src/components/Reports/DonationsReport/GetDonationGraph.generated';
 
 interface CoachingDetailProps {
   coachingId: string;
@@ -86,11 +88,10 @@ export const CoachingDetail: React.FC<CoachingDetailProps> = ({
 }) => {
   const { t } = useTranslation();
   const locale = useLocale();
-  const { data: accountListData, loading } =
-    useLoadAccountListCoachingDetailQuery({
-      variables: { coachingId },
-      skip: !isAccountListId,
-    });
+  const { data: ownData, loading } = useLoadAccountListCoachingDetailQuery({
+    variables: { coachingId },
+    skip: !isAccountListId,
+  });
 
   const { data: coachingData, loading: coachingLoading } =
     useLoadCoachingDetailQuery({
@@ -108,10 +109,28 @@ export const CoachingDetail: React.FC<CoachingDetailProps> = ({
       variables: { accountListId: coachingId },
     });
 
-  const data = isAccountListId
-    ? accountListData?.accountList
+  const { data: ownDonationGraphData } = useGetDonationGraphQuery({
+    variables: {
+      accountListId: coachingId,
+    },
+    skip: !isAccountListId,
+  });
+
+  const { data: coachingDonationGraphData } = useGetCoachingDonationGraphQuery({
+    variables: {
+      coachingAccountListId: coachingId,
+    },
+    skip: isAccountListId,
+  });
+
+  const accountListData = isAccountListId
+    ? ownData?.accountList
     : coachingData?.coachingAccountList;
 
+  const donationGraphData = isAccountListId
+    ? ownDonationGraphData
+    : coachingDonationGraphData;
+
   const [isMonthly, setIsMonthly] = useState(true);
 
   return (
@@ -171,8 +190,8 @@ export const CoachingDetail: React.FC<CoachingDetailProps> = ({
           {t('Commitment Goal:') +
             ' ' +
             currencyFormat(
-              data?.monthlyGoal ? data?.monthlyGoal : 0,
-              data?.currency,
+              accountListData?.monthlyGoal ? accountListData?.monthlyGoal : 0,
+              accountListData?.currency,
               locale,
             )}
         </SideContainerText>
@@ -248,33 +267,35 @@ export const CoachingDetail: React.FC<CoachingDetailProps> = ({
                     margin: theme.spacing(1),
                   }}
                 >
-                  {data?.name}
+                  {accountListData?.name}
                 </Typography>
               </Box>
               <Box style={{ flexGrow: 1 }}>
                 <AppealProgress
                   loading={loading}
                   isPrimary={false}
-                  currency={data?.currency}
-                  goal={data?.monthlyGoal ?? 0}
-                  received={data?.receivedPledges}
-                  pledged={data?.totalPledges}
+                  currency={accountListData?.currency}
+                  goal={accountListData?.monthlyGoal ?? undefined}
+                  received={accountListData?.receivedPledges}
+                  pledged={accountListData?.totalPledges}
                 />
               </Box>
             </CoachingMainTitleContainer>
             <Divider />
             <CoachingItemContainer>
-              {/*
-                TODO: MonthlyActivitySection doesn't work if coaching is not one of the
-                Accountlists. reportDonationsHistories is required for this View and it doesn't
-                work with coaching.
-              */}
-              <MonthlyActivitySection accountListId={coachingId} />
+              <DonationHistories
+                goal={accountListData?.monthlyGoal ?? undefined}
+                pledged={accountListData?.totalPledges}
+                reportsDonationHistories={
+                  donationGraphData?.reportsDonationHistories
+                }
+                currencyCode={accountListData?.currency}
+              />
               <Box style={{ margin: theme.spacing(3, 0) }}>
                 <MonthlyCommitment
                   coachingId={coachingId}
-                  currencyCode={data?.currency}
-                  goal={data?.monthlyGoal ? data.monthlyGoal : 0}
+                  currencyCode={accountListData?.currency}
+                  goal={accountListData?.monthlyGoal ?? 0}
                 />
               </Box>
             </CoachingItemContainer>

src/components/Coaching/CoachingDetail/LoadCoachingDetail.graphql

@@ -71,3 +71,9 @@ query GetAccountListUsers($accountListId: ID!) {
     }
   }
 }
+
+query GetCoachingDonationGraph($coachingAccountListId: ID!) {
+  reportsDonationHistories(accountListId: $coachingAccountListId) {
+    ...DonationGraphHistories
+  }
+}

src/components/Reports/DonationsReport/DonationsReport.test.tsx

@@ -174,4 +174,65 @@ describe('DonationsReport', () => {
     ).not.toBeInTheDocument();
     expect(getByTestId('donationRow')).toBeInTheDocument();
   });
+
+  it('filters report by designation account', async () => {
+    const mutationSpy = jest.fn();
+    render(
+      <ThemeProvider theme={theme}>
+        <TestRouter router={router}>
+          <GqlMockedProvider<Mocks> mocks={mocks} onCall={mutationSpy}>
+            <DonationsReport
+              accountListId={'abc'}
+              designationAccounts={['account-1']}
+              isNavListOpen={true}
+              onNavListToggle={onNavListToggle}
+              onSelectContact={onSelectContact}
+              title={title}
+            />
+          </GqlMockedProvider>
+        </TestRouter>
+      </ThemeProvider>,
+    );
+
+    await waitFor(() =>
+      expect(mutationSpy.mock.calls[2][0]).toMatchObject({
+        operation: {
+          operationName: 'GetDonationGraph',
+          variables: {
+            designationAccountIds: ['account-1'],
+          },
+        },
+      }),
+    );
+  });
+
+  it('does not filter report by designation account', async () => {
+    const mutationSpy = jest.fn();
+    render(
+      <ThemeProvider theme={theme}>
+        <TestRouter router={router}>
+          <GqlMockedProvider<Mocks> mocks={mocks} onCall={mutationSpy}>
+            <DonationsReport
+              accountListId={'abc'}
+              isNavListOpen={true}
+              onNavListToggle={onNavListToggle}
+              onSelectContact={onSelectContact}
+              title={title}
+            />
+          </GqlMockedProvider>
+        </TestRouter>
+      </ThemeProvider>,
+    );
+
+    await waitFor(() =>
+      expect(mutationSpy.mock.calls[2][0]).toMatchObject({
+        operation: {
+          operationName: 'GetDonationGraph',
+          variables: {
+            designationAccountIds: null,
+          },
+        },
+      }),
+    );
+  });
 });

src/components/Reports/DonationsReport/DonationsReport.tsx

@@ -2,10 +2,10 @@
 import { Container, Box } from '@mui/material';
 import { DateTime } from 'luxon';
 import { useRouter } from 'next/router';
-import { ISODateString } from 'next-auth';
 import { AccountsListHeader as Header } from '../AccountsListLayout/Header/Header';
-import { MonthlyActivitySection } from './MonthlyActivity/MonthlyActivitySection';
 import { DonationsReportTable } from './Table/DonationsReportTable';
+import DonationHistories from 'src/components/Dashboard/DonationHistories';
+import { useGetDonationGraphQuery } from './GetDonationGraph.generated';
 
 interface DonationReportsProps {
   accountListId: string;
@@ -26,9 +26,19 @@
 }) => {
   const [time, setTime] = useState(DateTime.now().startOf('month'));
   const { query, replace } = useRouter();
+
+  const { data } = useGetDonationGraphQuery({
+    variables: {
+      accountListId,
+      designationAccountIds: designationAccounts?.length
+        ? designationAccounts
+        : null,
+    },
+  });
+
   useEffect(() => {
-    if (query.month) {
-      setTime(DateTime.fromISO(query.month as ISODateString));
+    if (typeof query.month === 'string') {
+      setTime(DateTime.fromISO(query.month));
     }
     replace(
       {
@@ -47,9 +57,11 @@
         title={title}
       />
       <Container>
-        <MonthlyActivitySection
-          accountListId={accountListId}
-          designationAccounts={designationAccounts}
+        <DonationHistories
+          goal={data?.accountList.monthlyGoal ?? undefined}
+          pledged={data?.accountList.totalPledges}
+          reportsDonationHistories={data?.reportsDonationHistories}
+          currencyCode={data?.accountList.currency}
           setTime={setTime}
         />
         <DonationsReportTable

src/components/Reports/DonationsReport/GetDonationGraph.graphql

@@ -9,14 +9,18 @@ query GetDonationGraph($accountListId: ID!, $designationAccountIds: [ID!]) {
     accountListId: $accountListId
     designationAccountId: $designationAccountIds
   ) {
-    averageIgnoreCurrent
-    periods {
-      startDate
-      convertedTotal
-      totals {
-        currency
-        convertedAmount
-      }
+    ...DonationGraphHistories
+  }
+}
+
+fragment DonationGraphHistories on DonationHistories {
+  averageIgnoreCurrent
+  periods {
+    startDate
+    convertedTotal
+    totals {
+      currency
+      convertedAmount
     }
   }
 }