MPDX-8123 & MPDX-8125 Add Pledges, Commitments and donations flows view

src/components/Tool/Appeal/AppealsContext/contacts.graphql

@@ -29,6 +29,8 @@ fragment AppealContactInfo on Contact {
   pledgeFrequency
   pledgeReceived
   pledgeStartDate
+  starred
+  status
   pledges {
     id
     amount

src/components/Tool/Appeal/Flow/ContactFlowColumn/ContactFlowColumn.tsx

@@ -11,7 +11,6 @@ import {
 } from '@mui/material';
 import { useDrop } from 'react-dnd';
 import { useTranslation } from 'react-i18next';
-import { useContactsQuery } from 'pages/accountLists/[accountListId]/contacts/Contacts.generated';
 import {
   CardContentInner,
   ColumnTitle,
@@ -28,6 +27,7 @@ import {
   AppealsType,
 } from 'src/components/Tool/Appeal/AppealsContext/AppealsContext';
 import { appealHeaderInfoHeight } from '../../AppealDetails/AppealHeaderInfo/AppealHeaderInfo';
+import { useContactsQuery } from '../../AppealsContext/contacts.generated';
 import { ContactFlowDropZone } from '../ContactFlowDropZone/ContactFlowDropZone';
 import { ContactFlowRow } from '../ContactFlowRow/ContactFlowRow';
 

src/components/Tool/Appeal/Flow/ContactFlowRow/ContactFlowRow.test.tsx

@@ -1,78 +1,179 @@
 import React from 'react';
 import { ThemeProvider } from '@mui/material/styles';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
 import { render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
+import { I18nextProvider } from 'react-i18next';
 import TestWrapper from '__tests__/util/TestWrapper';
-import { ContactRowFragment } from 'src/components/Contacts/ContactRow/ContactRow.generated';
+import i18n from 'src/lib/i18n';
 import theme from 'src/theme';
 import {
   AppealStatusEnum,
   AppealsContext,
   AppealsType,
 } from '../../AppealsContext/AppealsContext';
+import { AppealContactInfoFragment } from '../../AppealsContext/contacts.generated';
+import { defaultContact } from '../../List/ContactRow/ContactRowMock';
 import { ContactFlowRow } from './ContactFlowRow';
 
-const accountListId = 'abc';
-const contact = {
-  id: '123',
-  name: 'Test Name',
-  starred: true,
-  avatar: 'avatar.jpg',
-  pledgeAmount: 100,
-  pledgeCurrency: 'USD',
-  pledgeReceived: false,
-  uncompletedTasksCount: 0,
-} as ContactRowFragment;
+const accountListId = 'account-list-1';
+const appealId = 'appealId';
 const onContactSelected = jest.fn();
 const toggleSelectionById = jest.fn();
 const isChecked = jest.fn().mockImplementation(() => false);
 
-const Components = () => (
-  <DndProvider backend={HTML5Backend}>
-    <ThemeProvider theme={theme}>
-      <TestWrapper>
-        <AppealsContext.Provider
-          value={
-            {
-              isRowChecked: isChecked,
-              toggleSelectionById,
-            } as unknown as AppealsType
-          }
-        >
-          <ContactFlowRow
-            accountListId={accountListId}
-            contact={contact}
-            appealStatus={AppealStatusEnum.Processed}
-            onContactSelected={onContactSelected}
-          />
-        </AppealsContext.Provider>
-      </TestWrapper>
-    </ThemeProvider>
-  </DndProvider>
+type ComponentsProps = {
+  contact?: AppealContactInfoFragment;
+  appealStatus?: AppealStatusEnum;
+};
+const Components = ({
+  contact = defaultContact,
+  appealStatus = AppealStatusEnum.Asked,
+}: ComponentsProps) => (
+  <I18nextProvider i18n={i18n}>
+    <LocalizationProvider dateAdapter={AdapterLuxon}>
+      <DndProvider backend={HTML5Backend}>
+        <ThemeProvider theme={theme}>
+          <TestWrapper>
+            <AppealsContext.Provider
+              value={
+                {
+                  appealId,
+                  isRowChecked: isChecked,
+                  toggleSelectionById,
+                } as unknown as AppealsType
+              }
+            >
+              <ContactFlowRow
+                accountListId={accountListId}
+                contact={contact}
+                appealStatus={appealStatus}
+                onContactSelected={onContactSelected}
+              />
+            </AppealsContext.Provider>
+          </TestWrapper>
+        </ThemeProvider>
+      </DndProvider>
+    </LocalizationProvider>
+  </I18nextProvider>
 );
 
 describe('ContactFlowRow', () => {
   it('should display contact name and status', () => {
     const { getByText, getByTitle } = render(<Components />);
-    expect(getByText('Test Name')).toBeInTheDocument();
+    expect(getByText(defaultContact.name)).toBeInTheDocument();
+    expect(getByTitle('Outline Star Icon')).toBeInTheDocument();
+  });
+
+  it('should display contact as starred', () => {
+    const { getByText, getByTitle } = render(
+      <Components
+        contact={{
+          ...defaultContact,
+          starred: true,
+        }}
+      />,
+    );
+    expect(getByText(defaultContact.name)).toBeInTheDocument();
     expect(getByTitle('Filled Star Icon')).toBeInTheDocument();
   });
 
   it('should call contact selected function', () => {
     const { getByText } = render(<Components />);
-    userEvent.click(getByText('Test Name'));
-    expect(getByText('Test Name')).toBeInTheDocument();
-    expect(onContactSelected).toHaveBeenCalledWith('123', true, true);
+    userEvent.click(getByText(defaultContact.name));
+    expect(getByText(defaultContact.name)).toBeInTheDocument();
+    expect(onContactSelected).toHaveBeenCalledWith(
+      defaultContact.id,
+      true,
+      true,
+    );
   });
 
   it('should call check contact', async () => {
     const { getByRole } = render(<Components />);
 
     userEvent.click(getByRole('checkbox'));
     await waitFor(() => {
-      expect(toggleSelectionById).toHaveBeenLastCalledWith(contact.id);
+      expect(toggleSelectionById).toHaveBeenLastCalledWith(defaultContact.id);
+    });
+  });
+
+  describe('Contact Row by status type', () => {
+    it('Excluded', () => {
+      const { getByText } = render(
+        <Components appealStatus={AppealStatusEnum.Excluded} />,
+      );
+      expect(getByText('CA$500')).toBeInTheDocument();
+      expect(getByText('Monthly')).toBeInTheDocument();
+    });
+
+    it('Asked', () => {
+      const { getByText } = render(
+        <Components appealStatus={AppealStatusEnum.Asked} />,
+      );
+      expect(getByText('CA$500')).toBeInTheDocument();
+      expect(getByText('Monthly')).toBeInTheDocument();
+    });
+
+    it('Committed', () => {
+      const { getByText } = render(
+        <Components appealStatus={AppealStatusEnum.NotReceived} />,
+      );
+      expect(getByText('$3,000')).toBeInTheDocument();
+      expect(getByText('(Aug 8, 2024)')).toBeInTheDocument();
+    });
+
+    it('Committed - with no pledges', () => {
+      const { getByText } = render(
+        <Components
+          appealStatus={AppealStatusEnum.NotReceived}
+          contact={{
+            ...defaultContact,
+            pledges: [],
+          }}
+        />,
+      );
+      expect(getByText('$0')).toBeInTheDocument();
+    });
+
+    it('Received', () => {
+      const { getByText } = render(
+        <Components appealStatus={AppealStatusEnum.ReceivedNotProcessed} />,
+      );
+      expect(getByText('$3,000')).toBeInTheDocument();
+      expect(getByText('(Aug 8, 2024)')).toBeInTheDocument();
+    });
+
+    it('Given', () => {
+      const { getByText } = render(
+        <Components appealStatus={AppealStatusEnum.Processed} />,
+      );
+      expect(getByText('$3,000 ($50) (Jun 25, 2019)')).toBeInTheDocument();
+    });
+  });
+
+  describe('Edit/Add Pledge', () => {
+    it('Open up Edit pledge modal', async () => {
+      const { getByTestId, findByText } = render(
+        <Components appealStatus={AppealStatusEnum.NotReceived} />,
+      );
+
+      userEvent.click(getByTestId('editPledgeButton'));
+
+      expect(await findByText('Edit Commitment')).toBeInTheDocument();
+    });
+
+    it('Open up delete pledge modal', async () => {
+      const { getByTestId, findByText } = render(
+        <Components appealStatus={AppealStatusEnum.NotReceived} />,
+      );
+
+      userEvent.click(getByTestId('deletePledgeButton'));
+
+      expect(await findByText('Remove Commitment')).toBeInTheDocument();
     });
   });
 });