MPDX-7987 Merge Contacts

src/components/GlobalStyles/GlobalStyles.tsx

@@ -14,10 +14,10 @@ const useStyles = makeStyles(() =>
         '-moz-osx-font-smoothing': 'grayscale',
         height: '100%',
         width: '100%',
-        overflow: 'hidden',
       },
       body: {
         height: '100%',
+        minHeight: '100vh',
         width: '100%',
       },
       '#__next': {

src/components/Layouts/Primary/Primary.tsx

@@ -15,13 +15,11 @@ const RootContainer = styled('div')(({ theme }) => ({
 
 const ContentContainer = styled('div')(() => ({
   display: 'flex',
-  overflow: 'hidden',
 }));
 
 const Content = styled('div')(() => ({
   flex: '1 1 auto',
   height: '100%',
-  overflow: 'auto',
 }));
 
 interface Props {

src/components/Tool/MergeContacts/Contact.tsx → src/components/Tool/MergeContacts/ContactPair.tsx

@@ -15,6 +15,7 @@
   CardHeader,
   Grid,
   IconButton,
+  Link,
   Tooltip,
   Typography,
   useMediaQuery,
@@ -88,6 +89,7 @@
   selected: boolean;
   loser: boolean;
   t: TFunction;
+  setContactFocus: SetContactFocus;
 }
 const ContactItem: React.FC<ContactItemProps> = ({
   contact,
@@ -96,6 +98,7 @@
   loser,
   t,
   side,
+  setContactFocus,
 }) => {
   const useStyles = makeStyles()(() => ({
     contactBasic: {
@@ -144,6 +147,9 @@
   }));
   const { classes } = useStyles();
   const locale = useLocale();
+  const handleContactNameClick = (contactId) => {
+    setContactFocus(contactId);
+  };
   return (
     <Card
       className={`
@@ -166,7 +172,12 @@
         }
         title={
           <>
-            <Typography variant="subtitle1">{contact.name}</Typography>{' '}
+            <Link
+              underline="hover"
+              onClick={() => handleContactNameClick(contact.id)}
+            >
+              <Typography variant="subtitle1">{contact.name}</Typography>
+            </Link>{' '}
             {selected && (
               <Typography variant="body2" className={classes.selected}>
                 {t('Use this one')}
@@ -182,13 +193,11 @@
         className={classes.minimalPadding}
       />
       <CardContent className={classes.minimalPadding}>
-        {contact.primaryAddress ? (
+        {contact.primaryAddress && (
           <Typography variant="body2">
             {`${contact?.primaryAddress?.street} 
             ${contact?.primaryAddress?.city}, ${contact?.primaryAddress?.state} ${contact?.primaryAddress?.postalCode}`}
           </Typography>
-        ) : (
-          ''
         )}
         <Typography variant="body2">
           <Trans
@@ -216,13 +225,15 @@
   contact1: RecordInfoFragment;
   contact2: RecordInfoFragment;
   update: (id1: string, id2: string, action: string) => void;
+  updating: boolean;
   setContactFocus: SetContactFocus;
 }
 
-const Contact: React.FC<Props> = ({
+const ContactPair: React.FC<Props> = ({
   contact1,
   contact2,
   update,
+  updating,
   setContactFocus,
 }) => {
   const [selected, setSelected] = useState('none');
@@ -233,29 +244,27 @@
   const rightSelected = selected === 'right';
 
   const updateState = (side: string): void => {
-    switch (side) {
-      case 'left':
-        setSelected('left');
-        update(contact1.id, contact2.id, 'merge');
-        break;
-      case 'right':
-        setSelected('right');
-        update(contact2.id, contact1.id, 'merge');
-        break;
-      case 'cancel':
-        setSelected('cancel');
-        update(contact1.id, contact2.id, 'cancel');
-        break;
-      default:
-        setSelected('');
-        update(contact1.id, contact2.id, 'cancel');
+    if (!updating) {
+      switch (side) {
+        case 'left':
+          setSelected('left');
+          update(contact1.id, contact2.id, 'merge');
+          break;
+        case 'right':
+          setSelected('right');
+          update(contact2.id, contact1.id, 'merge');
+          break;
+        case 'cancel':
+          setSelected('cancel');
+          update(contact1.id, contact2.id, 'cancel');
+          break;
+        default:
+          setSelected('');
+          update(contact1.id, contact2.id, 'cancel');
+      }
     }
   };
 
-  const handleContactNameClick = (contactId) => {
-    setContactFocus(contactId);
-  };
-
   return (
     <Grid
       container
@@ -278,6 +287,7 @@
                   updateState={updateState}
                   selected={leftSelected}
                   loser={rightSelected}
+                  setContactFocus={setContactFocus}
                 />
                 <IconWrapper>
                   <Tooltip
@@ -286,12 +296,13 @@
                     placement={matches ? undefined : 'top'}
                   >
                     <IconButton
                       onClick={() => updateState('left')}
                       className={leftSelected ? classes.green : classes.grey}
+                      data-testid="leftButton"
                     >
                       <Icon
                         path={matches ? mdiArrowUpBold : mdiArrowLeftBold}
-                        size={1.5}
+                        size={1}
                       />
                     </IconButton>
                   </Tooltip>
@@ -303,10 +314,11 @@
                     <IconButton
                       onClick={() => updateState('right')}
                       className={rightSelected ? classes.green : classes.grey}
+                      data-testid="rightButton"
                     >
                       <Icon
                         path={matches ? mdiArrowDownBold : mdiArrowRightBold}
-                        size={1.5}
+                        size={1}
                       />
                     </IconButton>
                   </Tooltip>
@@ -316,8 +328,9 @@
                       className={
                         selected === 'cancel' ? classes.red : classes.grey
                       }
+                      data-testid="ignoreButton"
                     >
-                      <Icon path={mdiCloseThick} size={1.5} />
+                      <Icon path={mdiCloseThick} size={1} />
                     </IconButton>
                   </Tooltip>
                 </IconWrapper>
@@ -328,6 +341,7 @@
                   updateState={updateState}
                   selected={rightSelected}
                   loser={leftSelected}
+                  setContactFocus={setContactFocus}
                 />
               </Box>
             </Grid>
@@ -338,4 +352,4 @@
   );
 };
 
-export default Contact;
+export default ContactPair;

src/components/Tool/MergeContacts/MergeContacts.test.tsx

@@ -13,6 +13,8 @@ import MergeContacts from './MergeContacts';
 
 const accountListId = '123';
 
+const setContactFocus = jest.fn();
+
 const mocks = {
   GetContactDuplicates: {
     contactDuplicates: {
@@ -128,7 +130,10 @@ const MergeContactsWrapper: React.FC<MergeContactsWrapperProps> = ({
             contactId={[]}
             searchTerm={''}
           >
-            <MergeContacts accountListId={accountListId} />
+            <MergeContacts
+              accountListId={accountListId}
+              setContactFocus={setContactFocus}
+            />
           </ContactsProvider>
         </GqlMockedProvider>
       </TestRouter>
@@ -186,8 +191,27 @@ describe('Tools - MergeContacts', () => {
         ],
       },
     });
-    // await waitFor(() =>
-    //   expect(queryByText('Doe, John and Nancy')).not.toBeInTheDocument(),
-    // );
+  });
+
+  it('should ignore contacts', async () => {
+    const mutationSpy = jest.fn();
+
+    const { queryByText, queryAllByTestId, findByText, getByRole } = render(
+      <SnackbarProvider>
+        <MergeContactsWrapper mutationSpy={mutationSpy} />
+      </SnackbarProvider>,
+    );
+
+    await waitFor(() =>
+      expect(queryAllByTestId('MergeContactPair')).toHaveLength(2),
+    );
+    const confirmButton = getByRole('button', { name: 'Confirm and Continue' });
+
+    expect(confirmButton).toBeDisabled();
+    userEvent.click(queryAllByTestId('rightButton')[0]);
+    expect(await findByText('Use this one')).toBeInTheDocument();
+    userEvent.click(queryAllByTestId('ignoreButton')[0]);
+    expect(queryByText('Use this one')).not.toBeInTheDocument();
+    expect(confirmButton).not.toBeDisabled();
   });
 });

src/components/Tool/MergeContacts/MergeContacts.tsx

@@ -11,19 +11,21 @@
 import { useSnackbar } from 'notistack';
 import { Trans, useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
+import { SetContactFocus } from 'pages/accountLists/[accountListId]/tools/useToolsHelper';
 import { useMassActionsMergeMutation } from 'src/components/Contacts/MassActions/Merge/MassActionsMerge.generated';
+import { LoadingSpinner } from 'src/components/Settings/Organization/LoadingSpinner';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
 import theme from '../../../theme';
 import NoData from '../NoData';
-import Contact from './Contact';
+import ContactPair from './ContactPair';
 import { useGetContactDuplicatesQuery } from './GetContactDuplicates.generated';
 
 const useStyles = makeStyles()(() => ({
   container: {
     padding: theme.spacing(3),
     width: '80%',
     display: 'flex',
-    height: '100dvh',
+    height: 'auto',
     [theme.breakpoints.down('lg')]: {
       width: '100%',
     },
@@ -57,13 +59,14 @@
   paddingBottom: theme.spacing(2),
   marginBottom: theme.spacing(2),
   position: 'sticky',
-  top: '0',
+  top: '64px',
   zIndex: '100',
   borderBottom: '1px solid',
   borderBottomColor: theme.palette.cruGrayLight.main,
   [theme.breakpoints.down('sm')]: {
     flexDirection: 'column',
     alignItems: 'start',
+    top: '56px',
   },
 }));
 
@@ -99,28 +102,31 @@
   const showing = data?.contactDuplicates.nodes.length || 0;
 
   const updateActions = (id1: string, id2: string, action: string): void => {
-    if (action === 'cancel') {
-      setActions((prevState) => ({
-        ...prevState,
-        [id1]: { action: '' },
-        [id2]: { action: '' },
-      }));
-    } else {
-      setActions((prevState) => ({
-        ...prevState,
-        [id1]: { action: 'merge', mergeId: id2 },
-        [id2]: { action: 'delete' },
-      }));
+    if (!updating) {
+      if (action === 'cancel') {
+        setActions((prevState) => ({
+          ...prevState,
+          [id1]: { action: '' },
+          [id2]: { action: '' },
+        }));
+      } else {
+        setActions((prevState) => ({
+          ...prevState,
+          [id1]: { action: 'merge', mergeId: id2 },
+          [id2]: { action: 'delete' },
+        }));
+      }
     }
   };
   const handleConfirmAndContinue = async () => {
     await mergeContacts();
+    setActions({});
   };
   const handleConfirmAndLeave = async () => {
-    await mergeContacts().then(
-      () =>
-        (window.location.href = `${process.env.SITE_URL}/accountLists/${accountListId}/tools`),
-    );
+    await mergeContacts().then(() => {
+      window.location.href = `${process.env.SITE_URL}/accountLists/${accountListId}/tools`;
+      setActions({});
+    });
   };
 
   const mergeContacts = async () => {
@@ -150,8 +156,8 @@
             variant: 'success',
           });
         },
         onError: (err) => {
           enqueueSnackbar(t('A server error occurred. {{err}}', { err }), {
             variant: 'error',
           });
         },
@@ -166,6 +172,9 @@
       flexDirection="column"
       data-testid="Home"
     >
+      {(loading || updating) && (
+        <LoadingSpinner firstLoad={true} data-testid="LoadingSpinner" />
+      )}
       {!loading && data ? (
         <Grid container className={classes.container}>
           <Grid item xs={12}>
@@ -221,7 +230,7 @@
                   <Button
                     variant="contained"
                     disabled={disabled}
                     onClick={() => handleConfirmAndLeave()}
                   >
                     {t('Confirm and Leave')}
                   </Button>
@@ -230,11 +239,13 @@
               <Grid item xs={12} sx={{ margin: '0px 2px 20px 2px' }}>
                 {data?.contactDuplicates.nodes
                   .map((duplicate) => (
-                    <Contact
+                    <ContactPair
                       key={duplicate.id}
                       contact1={duplicate.recordOne}
                       contact2={duplicate.recordTwo}
                       update={updateActions}
+                      updating={updating}
+                      setContactFocus={setContactFocus}
                     />
                   ))
                   .reverse()}