Merge pull request #1125 from CruGlobal/8349-coaching-monthly-commitment

[MPDX-8349] Add monthly commitment average and goal

pages/api/Schema/reports/pledgeHistories/dataHandler.ts

@@ -33,7 +33,7 @@ const getReportsPledgeHistories = (
         id: id,
         endDate: end_date,
         pledged: pledged,
-        recieved: received,
+        received: received,
         startDate: start_date,
         updatedAt: updated_at,
         updatedInDbAt: updated_in_db_at,

pages/api/Schema/reports/pledgeHistories/pledgeHistories.graphql

@@ -1,11 +1,15 @@
 extend type Query {
-  reportPledgeHistories(accountListId: ID!): [ReportsPledgeHistories]
+  reportPledgeHistories(
+    accountListId: ID!
+    range: String
+    endDate: String
+  ): [ReportsPledgeHistories]
 }
 
 type ReportsPledgeHistories {
   id: ID!
   pledged: Float
-  recieved: Float
+  received: Float
   endDate: ISO8601DateTime
   startDate: ISO8601DateTime
   createdAt: ISO8601DateTime

pages/api/Schema/reports/pledgeHistories/resolvers.ts

@@ -6,10 +6,14 @@ const ReportsPledgeHistoriesResolvers: Resolvers = {
   Query: {
     reportPledgeHistories: async (
       _source,
-      { accountListId },
+      { accountListId, range, endDate },
       { dataSources },
     ) => {
-      return dataSources.mpdxRestApi.getReportPldegeHistories(accountListId);
+      return dataSources.mpdxRestApi.getReportPledgeHistories(
+        accountListId,
+        range,
+        endDate,
+      );
     },
   },
 };

pages/api/graphql-rest.page.ts

@@ -278,9 +278,15 @@ class MpdxRestApi extends RESTDataSource {
     return getAppointmentResults(data);
   }
 
-  async getReportPldegeHistories(accountListId: string) {
+  async getReportPledgeHistories(
+    accountListId: string,
+    range: string | null | undefined,
+    endDate: string | null | undefined,
+  ) {
+    const rangeFilter = range ? `&filter[range]=${range}` : '';
+    const endDateFilter = endDate ? `&filter[end_date]=${endDate}` : '';
     const { data } = await this.get(
-      `reports/pledge_histories?filter%5Baccount_list_id%5D=${accountListId}`,
+      `reports/pledge_histories?filter[account_list_id]=${accountListId}${rangeFilter}${endDateFilter}`,
     );
     return getReportsPledgeHistories(data);
   }
@@ -449,7 +455,7 @@ class MpdxRestApi extends RESTDataSource {
   ) {
     const designationAccountFilter =
       designationAccountId && designationAccountId.length > 0
-        ? `&filter[designation_account_id=${designationAccountId.join(',')}`
+        ? `&filter[designation_account_id]=${designationAccountId.join(',')}`
         : '';
     const { data }: { data: FourteenMonthReportResponse } = await this.get(
       `reports/${
@@ -469,7 +475,7 @@ class MpdxRestApi extends RESTDataSource {
   ) {
     const designationAccountFilter =
       designationAccountId && designationAccountId.length > 0
-        ? `&filter[designation_account_id=${designationAccountId.join(',')}`
+        ? `&filter[designation_account_id]=${designationAccountId.join(',')}`
         : '';
     const { data }: { data: ExpectedMonthlyTotalResponse } = await this.get(
       `reports/expected_monthly_totals?filter[account_list_id]=${accountListId}${designationAccountFilter}`,

src/components/Coaching/CoachingDetail/Activity/Activity.test.tsx

@@ -296,29 +296,4 @@ describe('Activity', () => {
       );
     });
   });
-
-  describe('links', () => {
-    const connectionsRemainingLinkText =
-      mocks.CoachingDetailActivity.accountListAnalytics.contactsByStatus.connectionsRemaining.toString();
-
-    it('are hidden when viewing coaching account list', async () => {
-      const { findByTestId, queryByRole } = render(<TestComponent />);
-
-      expect(
-        await findByTestId('CurrentRealityConnections'),
-      ).toBeInTheDocument();
-      expect(
-        queryByRole('link', { name: connectionsRemainingLinkText }),
-      ).not.toBeInTheDocument();
-    });
-
-    it('are shown when viewing own account list', async () => {
-      const { findByRole } = render(
-        <TestComponent accountListType={AccountListTypeEnum.Own} />,
-      );
-      expect(
-        await findByRole('link', { name: connectionsRemainingLinkText }),
-      ).toBeInTheDocument();
-    });
-  });
 });

src/components/Coaching/CoachingDetail/Activity/Activity.tsx

@@ -32,6 +32,7 @@ import {
 import { getLocalizedContactStatus } from 'src/utils/functions/getLocalizedContactStatus';
 import { MultilineSkeleton } from '../../../Shared/MultilineSkeleton';
 import { AccountListTypeEnum, CoachingPeriodEnum } from '../CoachingDetail';
+import { CoachingLink } from '../CoachingLink';
 import { HelpButton } from '../HelpButton';
 import { useCoachingDetailActivityQuery } from './Activity.generated';
 import { AppealProgress } from './AppealProgress';
@@ -152,22 +153,6 @@ const StatsText = styled(Typography)({
   fontSize: '0.9em',
 });
 
-interface LinkProps {
-  accountListType: AccountListTypeEnum;
-  children: React.ReactNode;
-  href: string;
-}
-
-const Link: React.FC<LinkProps> = ({ accountListType, children, href }) =>
-  // Only show links when the account list belongs to the user
-  accountListType === AccountListTypeEnum.Own ? (
-    <NextLink href={href} passHref>
-      <MuiLink underline="none">{children}</MuiLink>
-    </NextLink>
-  ) : (
-    <span>{children}</span>
-  );
-
 interface ActivityProps {
   accountListId: string;
   accountListType: AccountListTypeEnum;
@@ -267,7 +252,7 @@ export const Activity: React.FC<ActivityProps> = ({
           <PeopleOutline sx={{ fontSize: '6rem' }} />
           <SectionTitle>{t('Connections Remaining')}</SectionTitle>
           <SectionTitleNumber>
-            <Link
+            <CoachingLink
               href={contactsLink({
                 status: [
                   ContactFilterStatusEnum.NeverContacted,
@@ -283,14 +268,14 @@ export const Activity: React.FC<ActivityProps> = ({
                     .connectionsRemaining
                 }
               </StatsText>
-            </Link>
+            </CoachingLink>
           </SectionTitleNumber>
           {loading ? (
             <MultilineSkeleton lines={2} width="90%" />
           ) : (
             <StatsRow>
               <StatsColumn>
-                <Link
+                <CoachingLink
                   href={contactsLink({
                     status: [
                       ContactFilterStatusEnum.Null,
@@ -305,10 +290,10 @@ export const Activity: React.FC<ActivityProps> = ({
                   <StatsColumnTitle>
                     {getLocalizedContactStatus(t, StatusEnum.NeverContacted)}
                   </StatsColumnTitle>
-                </Link>
+                </CoachingLink>
               </StatsColumn>
               <StatsColumn>
-                <Link
+                <CoachingLink
                   href={contactsLink({
                     status: [ContactFilterStatusEnum.AskInFuture],
                   })}
@@ -320,10 +305,10 @@ export const Activity: React.FC<ActivityProps> = ({
                   <StatsColumnTitle>
                     {getLocalizedContactStatus(t, StatusEnum.AskInFuture)}
                   </StatsColumnTitle>
-                </Link>
+                </CoachingLink>
               </StatsColumn>
               <StatsColumn>
-                <Link
+                <CoachingLink
                   href={contactsLink({
                     status: [ContactFilterStatusEnum.CultivateRelationship],
                   })}
@@ -338,7 +323,7 @@ export const Activity: React.FC<ActivityProps> = ({
                       StatusEnum.CultivateRelationship,
                     )}
                   </StatsColumnTitle>
-                </Link>
+                </CoachingLink>
               </StatsColumn>
             </StatsRow>
           )}
@@ -347,7 +332,7 @@ export const Activity: React.FC<ActivityProps> = ({
           <CalendarMonthOutlined sx={{ fontSize: '6rem' }} />
           <SectionTitle>{t('Partners Currently Initiating With')}</SectionTitle>
           <SectionTitleNumber>
-            <Link
+            <CoachingLink
               href={contactsLink({
                 status: [
                   ContactFilterStatusEnum.ContactForAppointment,
@@ -360,14 +345,14 @@ export const Activity: React.FC<ActivityProps> = ({
               <StatsText sx={{ fontWeight: 'bold' }}>
                 {data?.accountListAnalytics.contactsByStatus.initiations}
               </StatsText>
-            </Link>
+            </CoachingLink>
           </SectionTitleNumber>
           {loading ? (
             <MultilineSkeleton lines={2} width="90%" />
           ) : (
             <StatsRow>
               <StatsColumn>
-                <Link
+                <CoachingLink
                   href={contactsLink({
                     status: [ContactFilterStatusEnum.ContactForAppointment],
                   })}
@@ -385,10 +370,10 @@ export const Activity: React.FC<ActivityProps> = ({
                       StatusEnum.ContactForAppointment,
                     )}
                   </StatsColumnTitle>
-                </Link>
+                </CoachingLink>
               </StatsColumn>
               <StatsColumn>
-                <Link
+                <CoachingLink
                   href={contactsLink({
                     status: [ContactFilterStatusEnum.AppointmentScheduled],
                   })}
@@ -406,10 +391,10 @@ export const Activity: React.FC<ActivityProps> = ({
                       StatusEnum.AppointmentScheduled,
                     )}
                   </StatsColumnTitle>
-                </Link>
+                </CoachingLink>
               </StatsColumn>
               <StatsColumn>
-                <Link
+                <CoachingLink
                   href={contactsLink({
                     status: [ContactFilterStatusEnum.CallForDecision],
                   })}
@@ -424,7 +409,7 @@ export const Activity: React.FC<ActivityProps> = ({
                   <StatsColumnTitle>
                     {getLocalizedContactStatus(t, StatusEnum.CallForDecision)}
                   </StatsColumnTitle>
-                </Link>
+                </CoachingLink>
               </StatsColumn>
             </StatsRow>
           )}
@@ -500,14 +485,14 @@ export const Activity: React.FC<ActivityProps> = ({
               {data?.accountListAnalytics.contactsByStatus.financial}
             </StatsLargeNumber>
           )}
-          <Link
+          <CoachingLink
             href={contactsLink({
               status: [ContactFilterStatusEnum.PartnerFinancial],
             })}
             accountListType={accountListType}
           >
             <SectionTitle>{t('Financial Partners')}</SectionTitle>
-          </Link>
+          </CoachingLink>
         </ActivitySection>
         <ActivitySection data-testid="CurrentRealityPartnerSpecial">
           {loading ? (
@@ -517,14 +502,14 @@ export const Activity: React.FC<ActivityProps> = ({
               {data?.accountListAnalytics.contactsByStatus.special}
             </StatsLargeNumber>
           )}
-          <Link
+          <CoachingLink
             href={contactsLink({
               status: [ContactFilterStatusEnum.PartnerSpecial],
             })}
             accountListType={accountListType}
           >
             <SectionTitle>{t('Special Gift Partners')}</SectionTitle>
-          </Link>
+          </CoachingLink>
         </ActivitySection>
         <ActivitySection data-testid="CurrentRealityPartnerPrayer">
           {loading ? (
@@ -534,14 +519,14 @@ export const Activity: React.FC<ActivityProps> = ({
               {data?.accountListAnalytics.contactsByStatus.prayer}
             </StatsLargeNumber>
           )}
-          <Link
+          <CoachingLink
             href={contactsLink({
               status: [ContactFilterStatusEnum.PartnerPray],
             })}
             accountListType={accountListType}
           >
             <SectionTitle>{t('Prayer Partners')}</SectionTitle>
-          </Link>
+          </CoachingLink>
         </ActivitySection>
       </SectionsContainer>
     </AnimatedCard>

src/components/Coaching/CoachingDetail/CoachingDetail.tsx

@@ -215,8 +215,9 @@ export const CoachingDetail: React.FC<CoachingDetailProps> = ({
               />
               <MonthlyCommitment
                 coachingId={accountListId}
+                accountListType={accountListType}
                 currencyCode={accountListData?.currency}
-                goal={accountListData?.monthlyGoal ?? 0}
+                mpdInfo={accountListData ?? null}
               />
               <PartnersProgress
                 accountListId={accountListId}

src/components/Coaching/CoachingDetail/CoachingLink.test.tsx

@@ -0,0 +1,25 @@
+import { render } from '@testing-library/react';
+import { AccountListTypeEnum } from './CoachingDetail';
+import { CoachingLink } from './CoachingLink';
+
+describe('CoachingLink', () => {
+  it('are hidden when viewing coaching account list', () => {
+    const { queryByRole } = render(
+      <CoachingLink accountListType={AccountListTypeEnum.Coaching} href="/page">
+        Page
+      </CoachingLink>,
+    );
+
+    expect(queryByRole('link', { name: 'Page' })).not.toBeInTheDocument();
+  });
+
+  it('are shown when viewing own account list', async () => {
+    const { getByRole } = render(
+      <CoachingLink accountListType={AccountListTypeEnum.Own} href="/page">
+        Page
+      </CoachingLink>,
+    );
+
+    expect(getByRole('link', { name: 'Page' })).toBeInTheDocument();
+  });
+});

src/components/Coaching/CoachingDetail/CoachingLink.tsx

@@ -0,0 +1,26 @@
+import NextLink from 'next/link';
+import { Link, LinkProps as MuiLinkProps } from '@mui/material';
+import { AccountListTypeEnum } from './CoachingDetail';
+
+interface LinkProps extends MuiLinkProps {
+  accountListType: AccountListTypeEnum;
+  href: string;
+}
+
+/*
+ * Component to show links when the account list belongs to the user and hide links when viewing a
+ * coached account list.
+ */
+export const CoachingLink: React.FC<LinkProps> = ({
+  accountListType,
+  href,
+  children,
+  ...props
+}) =>
+  accountListType === AccountListTypeEnum.Own ? (
+    <NextLink href={href} passHref>
+      <Link {...props}>{children}</Link>
+    </NextLink>
+  ) : (
+    <span>{children}</span>
+  );

src/components/Coaching/CoachingDetail/MonthlyCommitment/MonthlyCommitment.graphql

@@ -4,6 +4,18 @@ query GetReportsPledgeHistories($coachingId: ID!) {
     startDate
     endDate
     pledged
-    recieved
+    received
+  }
+}
+
+query MonthlyCommitmentSingleMonth($accountListId: ID!, $month: String!) {
+  reportPledgeHistories(
+    accountListId: $accountListId
+    range: "1m"
+    endDate: $month
+  ) {
+    id
+    pledged
+    received
   }
 }