Adding Add contact to appeal to asked column.

Also fixed height issue with columns. (line 183)

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

@@ -33,7 +33,13 @@ const router = {
   isReady: true,
 };
 
-const Components = () => (
+interface ComponentsProps {
+  appealStatus?: AppealStatusEnum;
+}
+
+const Components = ({
+  appealStatus = AppealStatusEnum.Processed,
+}: ComponentsProps) => (
   <SnackbarProvider>
     <DndProvider backend={HTML5Backend}>
       <ThemeProvider theme={theme}>
@@ -59,7 +65,7 @@ const Components = () => (
                   title={title}
                   onContactSelected={onContactSelected}
                   changeContactStatus={changeContactStatus}
-                  appealStatus={AppealStatusEnum.Processed}
+                  appealStatus={appealStatus}
                 />
               </VirtuosoMockContext.Provider>
             </AppealsWrapper>
@@ -95,4 +101,24 @@ describe('ContactFlowColumn', () => {
       getByRole('menuitem', { name: 'Select 1 contact' });
     });
   });
+
+  it('"asked" column should has the "Add Contact to Appeal" button', async () => {
+    const { findByText } = render(
+      <Components appealStatus={AppealStatusEnum.Asked} />,
+    );
+
+    expect(await findByText('Add Contact to Appeal')).toBeInTheDocument();
+
+    userEvent.click(await findByText('Add Contact to Appeal'));
+
+    expect(await findByText('Add Contact(s) to Appeal')).toBeInTheDocument();
+  });
+
+  it('other columns should not have the "Add Contact to Appeal" button', async () => {
+    const { findByText, queryByText } = render(<Components />);
+
+    expect(await findByText(title)).toBeInTheDocument();
+
+    expect(queryByText('Add Contact to Appeal')).not.toBeInTheDocument();
+  });
 });

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

@@ -2,13 +2,15 @@ import React, { useRef, useState } from 'react';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import {
   Box,
+  Button,
   Card,
   CircularProgress,
   IconButton,
   Menu,
   MenuItem,
   Typography,
 } from '@mui/material';
+import { styled } from '@mui/material/styles';
 import { useDrop } from 'react-dnd';
 import { useTranslation } from 'react-i18next';
 import {
@@ -28,13 +30,23 @@ import {
 } from 'src/components/Tool/Appeal/AppealsContext/AppealsContext';
 import { appealHeaderInfoHeight } from '../../AppealDetails/AppealHeaderInfo/AppealHeaderInfo';
 import { useContactsQuery } from '../../AppealsContext/contacts.generated';
+import {
+  DynamicAddContactToAppealModal,
+  preloadAddContactToAppealModal,
+} from '../../Modals/AddContactToAppealModal/DynamicAddContactToAppealModal';
 import { useExcludedAppealContactsQuery } from '../../Shared/AppealExcludedContacts.generated';
 import { ContactFlowDropZone } from '../ContactFlowDropZone/ContactFlowDropZone';
 import {
   ContactFlowRow,
   DraggedContact,
 } from '../ContactFlowRow/ContactFlowRow';
 
+const AddContactToAppealBox = styled(Box)(({ theme }) => ({
+  padding: theme.spacing(1),
+  height: '52px',
+  background: '#fff',
+}));
+
 interface Props
   extends Omit<
     ContactFlowColumnProps,
@@ -62,6 +74,7 @@ export const ContactFlowColumn: React.FC<Props> = ({
   const { t } = useTranslation();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [addContactsModalOpen, setAddContactsModalOpen] = useState(false);
   const open = Boolean(anchorEl);
 
   const { data, loading, fetchMore } = useContactsQuery({
@@ -112,6 +125,10 @@ export const ContactFlowColumn: React.FC<Props> = ({
     // TODO implement deselect all
   };
 
+  const handleAddContactToAppeal = () => {
+    setAddContactsModalOpen(true);
+  };
+
   const totalContacts = data?.contacts.totalCount || 0;
 
   return loading && !data ? (
@@ -163,6 +180,7 @@ export const ContactFlowColumn: React.FC<Props> = ({
       <StyledCardContent
         style={{
           height: `calc(100vh - ${navBarHeight} - ${headerHeight} - ${appealHeaderInfoHeight} - 87px)`,
+          padding: 0,
         }}
       >
         <CardContentInner
@@ -175,7 +193,15 @@ export const ContactFlowColumn: React.FC<Props> = ({
             changeContactStatus={changeContactStatus}
           />
         </CardContentInner>
-        <Box ref={cardContentRef} width="100%" height="100%">
+        <Box
+          ref={cardContentRef}
+          width="100%"
+          height={
+            appealStatus === AppealStatusEnum.Asked
+              ? 'calc(100% - 52px)'
+              : '100%'
+          }
+        >
           <InfiniteList
             loading={loading}
             data={data?.contacts.nodes}
@@ -200,7 +226,25 @@ export const ContactFlowColumn: React.FC<Props> = ({
             EmptyPlaceholder={undefined}
           />
         </Box>
+        {appealStatus === AppealStatusEnum.Asked && (
+          <AddContactToAppealBox>
+            <Button
+              fullWidth
+              variant="outlined"
+              onClick={handleAddContactToAppeal}
+              onMouseEnter={preloadAddContactToAppealModal}
+            >
+              {t('Add Contact to Appeal')}
+            </Button>
+          </AddContactToAppealBox>
+        )}
       </StyledCardContent>
+
+      {addContactsModalOpen && (
+        <DynamicAddContactToAppealModal
+          handleClose={() => setAddContactsModalOpen(false)}
+        />
+      )}
     </Card>
   );
 };