2. List Header - Bulk Add Excluded contacts

CruGlobal · Aug 28, 2024 · 4c5754e · 4c5754e
1 parent d97be2a
commit 4c5754e
Show file tree

Hide file tree

Showing 9 changed files with 463 additions and 19 deletions.
diff --git a/src/components/Shared/Header/ListHeader.tsx b/src/components/Shared/Header/ListHeader.tsx
@@ -106,6 +106,7 @@ interface ListHeaderProps {
   selectedIds: string[];
   massDeselectAll?: () => void;
   showShowingCount?: boolean;
+  isExcludedAppealPage?: boolean;
 }
 
 export const ListHeader: React.FC<ListHeaderProps> = ({
@@ -127,6 +128,7 @@ export const ListHeader: React.FC<ListHeaderProps> = ({
   selectedIds,
   massDeselectAll,
   showShowingCount = false,
+  isExcludedAppealPage = false,
 }) => {
   const { t } = useTranslation();
 
@@ -186,6 +188,7 @@ export const ListHeader: React.FC<ListHeaderProps> = ({
             contactsView={contactsView}
             selectedIds={selectedIds}
             page={page}
+            isExcludedAppealPage={isExcludedAppealPage}
           />
         )}
         {page === PageEnum.Report && (

diff --git a/src/components/Shared/MassActions/ContactsMassActionsDropdown.test.tsx b/src/components/Shared/MassActions/ContactsMassActionsDropdown.test.tsx
@@ -7,6 +7,7 @@ import userEvent from '@testing-library/user-event';
 import { SnackbarProvider } from 'notistack';
 import TestRouter from '__tests__/util/TestRouter';
 import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
+import { AppealsWrapper } from 'pages/accountLists/[accountListId]/tools/appeals/AppealsWrapper';
 import { ContactsProvider } from 'src/components/Contacts/ContactsContext/ContactsContext';
 import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal';
 import { AppSettingsProvider } from 'src/components/common/AppSettings/AppSettingsProvider';
@@ -46,6 +47,7 @@ const ContactComponents = () => (
               contactDetailsOpen={false}
               contactsView={TableViewModeEnum.List}
               selectedIds={selectedIds}
+              page={PageEnum.Contact}
             />
           </SnackbarProvider>
         </LocalizationProvider>
@@ -309,4 +311,51 @@ describe('ContactsMassActionsDropdown', () => {
     );
     expect(queryByTestId('MergeModal')).not.toBeInTheDocument();
   });
+
+  it('should not be able to view add excluded contacts when page is not appeal', async () => {
+    const { getByText, queryByText } = render(<ContactComponents />);
+
+    const actionsButton = getByText('Actions') as HTMLInputElement;
+    userEvent.click(actionsButton);
+
+    expect(
+      queryByText('Add Excluded Contacts To Appeal'),
+    ).not.toBeInTheDocument();
+    expect(getByText('Add to Appeal')).toBeInTheDocument();
+    expect(getByText('Add to New Appeal')).toBeInTheDocument();
+  });
+
+  it('opens add excluded contacts modal when page is appeal', async () => {
+    const selectedIdsMerge = ['abc', 'def'];
+    const { getByTestId, getByText, findByText, queryByText } = render(
+      <ThemeProvider theme={theme}>
+        <TestRouter>
+          <GqlMockedProvider>
+            <LocalizationProvider dateAdapter={AdapterLuxon}>
+              <SnackbarProvider>
+                <AppealsWrapper>
+                  <ContactsMassActionsDropdown
+                    filterPanelOpen={false}
+                    contactDetailsOpen={false}
+                    contactsView={TableViewModeEnum.List}
+                    selectedIds={selectedIdsMerge}
+                    page={PageEnum.Appeal}
+                    isExcludedAppealPage={true}
+                  />
+                </AppealsWrapper>
+              </SnackbarProvider>
+            </LocalizationProvider>
+          </GqlMockedProvider>
+        </TestRouter>
+      </ThemeProvider>,
+    );
+    const actionsButton = getByText('Actions');
+    userEvent.click(actionsButton);
+    expect(queryByText('Add to Appeal')).not.toBeInTheDocument();
+    expect(queryByText('Add to New Appeal')).not.toBeInTheDocument();
+    expect(getByText('Add Excluded Contacts To Appeal')).toBeInTheDocument();
+    userEvent.click(getByText('Add Excluded Contacts To Appeal'));
+    expect(await findByText('Add Contacts')).toBeInTheDocument();
+    userEvent.click(getByTestId('CloseIcon'));
+  });
 });
diff --git a/src/components/Shared/MassActions/ContactsMassActionsDropdown.tsx b/src/components/Shared/MassActions/ContactsMassActionsDropdown.tsx
@@ -39,6 +39,10 @@ import {
   preloadMassActionsRemoveTagsModal,
 } from 'src/components/Contacts/MassActions/RemoveTags/DynamicMassActionsRemoveTagsModal';
 import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal';
+import {
+  DynamicAddExcludedContactModal,
+  preloadAddExcludedContactModal,
+} from 'src/components/Tool/Appeal/Modals/AddExcludedContactModal/DynamicAddExcludedContactModal';
 import { StatusEnum } from 'src/graphql/types.generated';
 import useTaskModal from 'src/hooks/useTaskModal';
 import { useAccountListId } from '../../../hooks/useAccountListId';
@@ -56,6 +60,7 @@ interface ContactsMassActionsDropdownProps {
   buttonGroup?: ReactElement;
   selectedIds: string[];
   page: PageEnum;
+  isExcludedAppealPage?: boolean;
 }
 
 export const ContactsMassActionsDropdown: React.FC<
@@ -67,6 +72,7 @@ export const ContactsMassActionsDropdown: React.FC<
   buttonGroup,
   selectedIds,
   page,
+  isExcludedAppealPage = false,
 }) => {
   const { t } = useTranslation();
   const { enqueueSnackbar } = useSnackbar();
@@ -94,6 +100,8 @@ export const ContactsMassActionsDropdown: React.FC<
   const [labelModalOpen, setLabelModalOpen] = useState(false);
   const [exportEmailsModalOpen, setExportEmailsModalOpen] = useState(false);
   const [mergeModalOpen, setMergeModalOpen] = useState(false);
+  const [addExcludedToAppealModalOpen, setAddExcludedToAppealModalOpen] =
+    useState(false);
 
   const [updateContacts] = useMassActionsUpdateContactsMutation();
 
@@ -238,30 +246,43 @@ export const ContactsMassActionsDropdown: React.FC<
                   <ListItemText>{t('Hide Contacts')}</ListItemText>
                 </MenuItem>
 
+                {isExcludedAppealPage && (
+                  <MenuItem
+                    onClick={() => {
+                      setAddExcludedToAppealModalOpen(true);
+                      handleClose();
+                    }}
+                    onMouseEnter={preloadAddExcludedContactModal}
+                  >
+                    <ListItemText>
+                      {t('Add Excluded Contacts To Appeal')}
+                    </ListItemText>
+                  </MenuItem>
+                )}
 
                 {page !== PageEnum.Appeal && (
                   <>
                     {!isExcludedAppealPage && (
-                <MenuItem
-                  onClick={() => {
-                    setAddToAppealModalOpen(true);
-                    handleClose();
-                  }}
-                  onMouseEnter={preloadMassActionsAddToAppealModal}
-                >
-                  <ListItemText>{t('Add to Appeal')}</ListItemText>
-                </MenuItem>
+                      <MenuItem
+                        onClick={() => {
+                          setAddToAppealModalOpen(true);
+                          handleClose();
+                        }}
+                        onMouseEnter={preloadMassActionsAddToAppealModal}
+                      >
+                        <ListItemText>{t('Add to Appeal')}</ListItemText>
+                      </MenuItem>
                     )}
-                <MenuItem
-                  divider
-                  onClick={() => {
-                    setCreateAppealModalOpen(true);
-                    handleClose();
-                  }}
-                  onMouseEnter={preloadMassActionsCreateAppealModal}
-                >
-                  <ListItemText>{t('Add to New Appeal')}</ListItemText>
-                </MenuItem>
+                    <MenuItem
+                      divider
+                      onClick={() => {
+                        setCreateAppealModalOpen(true);
+                        handleClose();
+                      }}
+                      onMouseEnter={preloadMassActionsCreateAppealModal}
+                    >
+                      <ListItemText>{t('Add to New Appeal')}</ListItemText>
+                    </MenuItem>
                   </>
                 )}
 
@@ -354,6 +375,12 @@ export const ContactsMassActionsDropdown: React.FC<
           handleClose={() => setMergeModalOpen(false)}
         />
       )}
+      {addExcludedToAppealModalOpen && (
+        <DynamicAddExcludedContactModal
+          contactIds={selectedIds}
+          handleClose={() => setAddExcludedToAppealModalOpen(false)}
+        />
+      )}
     </>
   );
 };
diff --git a/src/components/Tool/Appeal/AppealDetails/AppealsMainPanel/AppealsMainPanelHeader.test.tsx b/src/components/Tool/Appeal/AppealDetails/AppealsMainPanel/AppealsMainPanelHeader.test.tsx
@@ -70,6 +70,7 @@ const Components = ({
                     contactDetailsOpen: false,
                     selectedIds: [],
                     contactsQueryResult,
+                    activeFilters: {},
                   } as unknown as AppealsType
                 }
               >

diff --git a/src/components/Tool/Appeal/AppealDetails/AppealsMainPanel/AppealsMainPanelHeader.tsx b/src/components/Tool/Appeal/AppealDetails/AppealsMainPanel/AppealsMainPanelHeader.tsx
@@ -18,6 +18,7 @@ import {
   TableViewModeEnum,
 } from 'src/components/Shared/Header/ListHeader';
 import {
+  AppealStatusEnum,
   AppealsContext,
   AppealsType,
 } from '../../AppealsContext/AppealsContext';
@@ -63,8 +64,12 @@ export const AppealsMainPanelHeader: React.FC = () => {
     viewMode,
     handleViewModeChange,
     selectedIds,
+    activeFilters,
   } = React.useContext(AppealsContext) as AppealsType;
 
+  const isExcludedPage =
+    activeFilters.appealStatus === AppealStatusEnum.Excluded;
+
   return (
     <ListHeader
       page={PageEnum.Appeal}
@@ -82,6 +87,7 @@ export const AppealsMainPanelHeader: React.FC = () => {
       headerCheckboxState={selectionType}
       selectedIds={selectedIds}
       showShowingCount={viewMode === TableViewModeEnum.List}
+      isExcludedAppealPage={isExcludedPage}
       leftButtonGroup={
         <Hidden xsDown>
           <Box display="flex" alignItems="center">

diff --git a/src/components/Tool/Appeal/Modals/AddExcludedContactModal/AddExcludedContactModal.graphql b/src/components/Tool/Appeal/Modals/AddExcludedContactModal/AddExcludedContactModal.graphql
@@ -0,0 +1,8 @@
+mutation AssignContactsToAppeal($input: AssignContactsToAppealMutationInput!) {
+  assignContactsToAppeal(input: $input) {
+    appeal {
+      id
+      name
+    }
+  }
+}