Merge pull request #955 from CruGlobal/MPDX-7935-add-mailing-address

MPDX-7935 Add Mailing Address
CruGlobal · Jun 17, 2024 · 96f17f7 · 96f17f7
2 parents a9d552f + 7893bf6
commit 96f17f7
Show file tree

Hide file tree

Showing 9 changed files with 741 additions and 181 deletions.
diff --git a/...nts/Contacts/ContactDetails/ContactDetailsTab/Mailing/AddAddressModal/AddAddressModal.tsx b/...nts/Contacts/ContactDetails/ContactDetailsTab/Mailing/AddAddressModal/AddAddressModal.tsx
@@ -1,4 +1,5 @@
 import React, { ReactElement } from 'react';
+import { ApolloCache } from '@apollo/client';
 import {
   Box,
   Checkbox,
@@ -58,12 +59,14 @@ interface EditContactAddressModalProps {
   accountListId: string;
   contactId: string;
   handleClose: () => void;
+  handleUpdateCache?: (cache: ApolloCache<unknown>, object) => void;
 }
 
 export const AddAddressModal: React.FC<EditContactAddressModalProps> = ({
   accountListId,
   contactId,
   handleClose,
+  handleUpdateCache,
 }): ReactElement<EditContactAddressModalProps> => {
   const { t } = useTranslation();
   const { enqueueSnackbar } = useSnackbar();
@@ -85,30 +88,39 @@ export const AddAddressModal: React.FC<EditContactAddressModalProps> = ({
         attributes,
       },
       update: (cache, { data: createdAddressData }) => {
-        const query = {
-          query: ContactDetailsTabDocument,
-          variables: {
-            accountListId,
-            contactId,
-          },
-        };
-        const dataFromCache = cache.readQuery<ContactDetailsTabQuery>(query);
-
-        if (dataFromCache) {
-          const data = {
-            ...dataFromCache,
-            contact: {
-              ...dataFromCache.contact,
-              addresses: {
-                ...dataFromCache.contact.addresses,
-                nodes: [
-                  ...dataFromCache.contact.addresses.nodes,
-                  { ...createdAddressData?.createAddress?.address },
-                ],
-              },
+        if (handleUpdateCache) {
+          handleUpdateCache(cache, {
+            createAddress: {
+              address: createdAddressData?.createAddress?.address,
+              contactId: attributes.contactId,
+            },
+          });
+        } else {
+          const query = {
+            query: ContactDetailsTabDocument,
+            variables: {
+              accountListId,
+              contactId,
             },
           };
-          cache.writeQuery({ ...query, data });
+          const dataFromCache = cache.readQuery<ContactDetailsTabQuery>(query);
+
+          if (dataFromCache) {
+            const data = {
+              ...dataFromCache,
+              contact: {
+                ...dataFromCache.contact,
+                addresses: {
+                  ...dataFromCache.contact.addresses,
+                  nodes: [
+                    ...dataFromCache.contact.addresses.nodes,
+                    { ...createdAddressData?.createAddress?.address },
+                  ],
+                },
+              },
+            };
+            cache.writeQuery({ ...query, data });
+          }
         }
       },
     });

diff --git a/...tacts/ContactDetails/ContactDetailsTab/Mailing/AddAddressModal/DynamicAddAddressModal.tsx b/...tacts/ContactDetails/ContactDetailsTab/Mailing/AddAddressModal/DynamicAddAddressModal.tsx
@@ -0,0 +1,10 @@
+import dynamic from 'next/dynamic';
+import { DynamicComponentPlaceholder } from 'src/components/DynamicPlaceholders/DynamicComponentPlaceholder';
+
+export const DynamicAddAddressModal = dynamic(
+  () =>
+    import(/* webpackChunkName: "AddAddressModal" */ './AddAddressModal').then(
+      ({ AddAddressModal }) => AddAddressModal,
+    ),
+  { loading: DynamicComponentPlaceholder },
+);
diff --git a/...ails/ContactDetailsTab/Mailing/EditContactAddressModal/DynamicEditContactAddressModal.tsx b/...ails/ContactDetailsTab/Mailing/EditContactAddressModal/DynamicEditContactAddressModal.tsx
@@ -0,0 +1,10 @@
+import dynamic from 'next/dynamic';
+import { DynamicComponentPlaceholder } from 'src/components/DynamicPlaceholders/DynamicComponentPlaceholder';
+
+export const DynamicEditContactAddressModal = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "EditContactAddressModal" */ './EditContactAddressModal'
+    ).then(({ EditContactAddressModal }) => EditContactAddressModal),
+  { loading: DynamicComponentPlaceholder },
+);
diff --git a/...etails/ContactDetailsTab/Mailing/EditContactAddressModal/EditContactAddressModal.test.tsx b/...etails/ContactDetailsTab/Mailing/EditContactAddressModal/EditContactAddressModal.test.tsx
@@ -43,6 +43,7 @@ const mockContact: ContactMailingFragment = {
         historic: true,
         street: '123 Cool Street',
         primaryMailingAddress: false,
+        source: 'MPDX',
       },
     ],
   },

diff --git a/...tactDetails/ContactDetailsTab/Mailing/EditContactAddressModal/EditContactAddressModal.tsx b/...tactDetails/ContactDetailsTab/Mailing/EditContactAddressModal/EditContactAddressModal.tsx
@@ -1,4 +1,5 @@
 import React, { ReactElement } from 'react';
+import { ApolloCache } from '@apollo/client';
 import {
   Alert,
   AlertTitle,
@@ -64,11 +65,14 @@ const LoadingIndicator = styled(CircularProgress)(({ theme }) => ({
   margin: theme.spacing(0, 1, 0, 0),
 }));
 
+export const editableSources = ['MPDX', 'manual', 'TntImport'];
+
 interface EditContactAddressModalProps {
   accountListId: string;
   address: ContactMailingFragment['addresses']['nodes'][0];
   contactId: string;
-  handleClose: (deletedAddress: boolean) => void;
+  handleClose: () => void;
+  handleUpdateCacheOnDelete?: (cache: ApolloCache<unknown>, object) => void;
 }
 
 export const EditContactAddressModal: React.FC<
@@ -78,6 +82,7 @@ export const EditContactAddressModal: React.FC<
   address,
   contactId,
   handleClose,
+  handleUpdateCacheOnDelete,
 }): ReactElement<EditContactAddressModalProps> => {
   const { t } = useTranslation();
   const { enqueueSnackbar } = useSnackbar();
@@ -115,7 +120,7 @@ export const EditContactAddressModal: React.FC<
     enqueueSnackbar(t('Address updated successfully'), {
       variant: 'success',
     });
-    handleClose(false);
+    handleClose();
   };
 
   const deleteContactAddress = async (): Promise<void> => {
@@ -125,44 +130,48 @@ export const EditContactAddressModal: React.FC<
           id: address.id,
           accountListId,
         },
-        update: (cache, { data: deletedContactAddress }) => {
-          const deletedAddressId = deletedContactAddress?.deleteAddress?.id;
-          const query = {
-            query: ContactDetailsTabDocument,
-            variables: {
-              accountListId,
-              contactId,
-            },
-          };
+        update: (cache) => {
+          const deletedAddressId = address.id;
+          if (handleUpdateCacheOnDelete) {
+            handleUpdateCacheOnDelete(cache, { deletedAddressId });
+          } else {
+            const query = {
+              query: ContactDetailsTabDocument,
+              variables: {
+                accountListId,
+                contactId,
+              },
+            };
 
-          const dataFromCache = cache.readQuery<ContactDetailsTabQuery>(query);
+            const dataFromCache =
+              cache.readQuery<ContactDetailsTabQuery>(query);
 
-          if (dataFromCache) {
-            const data = {
-              ...dataFromCache,
-              contact: {
-                ...dataFromCache.contact,
-                addresses: {
-                  ...dataFromCache.contact.addresses,
-                  nodes: dataFromCache.contact.addresses.nodes.filter(
-                    (address) => address.id !== deletedAddressId,
-                  ),
+            if (dataFromCache) {
+              const data = {
+                ...dataFromCache,
+                contact: {
+                  ...dataFromCache.contact,
+                  addresses: {
+                    ...dataFromCache.contact.addresses,
+                    nodes: dataFromCache.contact.addresses.nodes.filter(
+                      (address) => address.id !== deletedAddressId,
+                    ),
+                  },
                 },
-              },
-            };
-            cache.writeQuery({ ...query, data });
+              };
+              cache.writeQuery({ ...query, data });
+            }
           }
           enqueueSnackbar(t('Address deleted successfully'), {
             variant: 'success',
           });
         },
       });
     }
-    handleClose(true);
+    handleClose();
   };
 
-  const editingDisabled =
-    address.source === 'Siebel' || address.source === 'DataServer';
+  const editingDisabled = editableSources.indexOf(address.source) === -1;
   const { data: emailData } = useDonationServicesEmailQuery({
     variables: {
       accountListId,
@@ -172,11 +181,7 @@ export const EditContactAddressModal: React.FC<
   });
 
   return (
-    <Modal
-      isOpen={true}
-      title={t('Edit Address')}
-      handleClose={() => handleClose(false)}
-    >
+    <Modal isOpen={true} title={t('Edit Address')} handleClose={handleClose}>
       <Formik
         initialValues={{
           id: address.id,
@@ -413,10 +418,7 @@ export const EditContactAddressModal: React.FC<
               {address && !editingDisabled && (
                 <DeleteButton onClick={deleteContactAddress} />
               )}
-              <CancelButton
-                onClick={() => handleClose(false)}
-                disabled={isSubmitting}
-              />
+              <CancelButton onClick={handleClose} disabled={isSubmitting} />
               <SubmitButton disabled={!isValid || isSubmitting}>
                 {(updating || deleting || settingPrimaryAddress) && (
                   <LoadingIndicator color="primary" size={20} />

diff --git a/src/components/Tool/FixMailingAddresses/Contact.tsx b/src/components/Tool/FixMailingAddresses/Contact.tsx
@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import styled from '@emotion/styled';
-import { mdiCheckboxMarkedCircle, mdiPlus } from '@mdi/js';
+import { mdiCheckboxMarkedCircle } from '@mdi/js';
 import { Icon } from '@mdi/react';
 import StarIcon from '@mui/icons-material/Star';
 import StarOutlineIcon from '@mui/icons-material/StarOutline';
@@ -20,7 +20,11 @@ import clsx from 'clsx';
 import { DateTime } from 'luxon';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
+import { editableSources } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/Mailing/EditContactAddressModal/EditContactAddressModal';
 import {
+  AddButton,
+  AddIcon,
+  AddText,
   EditIcon,
   LockIcon,
 } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/StyledComponents';
@@ -52,6 +56,9 @@ const useStyles = makeStyles()(() => ({
   confirmButon: {
     marginRight: theme.spacing(1),
   },
+  AddButton: {
+    width: '100%',
+  },
   contactCard: {
     marginBottom: theme.spacing(2),
   },
@@ -99,6 +106,7 @@ interface Props {
   name: string;
   status: string;
   addresses: ContactAddressFragment[];
+  appName: string;
   openEditAddressModal: (address: ContactAddressFragment, id: string) => void;
   openNewAddressModal: (address: ContactAddressFragment, id: string) => void;
 }
@@ -108,6 +116,7 @@ const Contact: React.FC<Props> = ({
   name,
   status,
   addresses,
+  appName,
   openEditAddressModal,
   openNewAddressModal,
 }) => {
@@ -162,7 +171,7 @@ const Contact: React.FC<Props> = ({
               </Grid>
             </Hidden>
             {addresses.map((address) => (
-              <Fragment key={address.street}>
+              <Fragment key={address.id}>
                 <Grid item xs={12} md={5} className={classes.paddingB2}>
                   <Box display="flex" justifyContent="space-between">
                     <Grid item md={8}>
@@ -201,6 +210,7 @@ const Contact: React.FC<Props> = ({
                       classes.paddingL2,
                       classes.hoverHighlight,
                     )}
+                    data-testid={`address-${address.id}`}
                     onClick={() => openEditAddressModal(address, id)}
                   >
                     <Box className={classes.address}>
@@ -212,7 +222,11 @@ const Contact: React.FC<Props> = ({
                     </Box>
 
                     <ContactIconContainer aria-label={t('Edit Icon')}>
-                      {address.source === 'MPDX' ? <EditIcon /> : <LockIcon />}
+                      {editableSources.indexOf(address.source) > -1 ? (
+                        <EditIcon />
+                      ) : (
+                        <LockIcon />
+                      )}
                     </ContactIconContainer>
                   </Box>
                 </Grid>
@@ -226,7 +240,9 @@ const Contact: React.FC<Props> = ({
                       <strong>{t('Source')}: </strong>
                     </Typography>
                   </Hidden>
-                  <Typography display="inline">MPDX</Typography>
+                  <Typography display="inline">
+                    {t('{{appName}}', { appName })}
+                  </Typography>
                 </Box>
               </Box>
             </Grid>
@@ -236,15 +252,17 @@ const Contact: React.FC<Props> = ({
                 justifyContent="flex-start"
                 className={clsx(
                   classes.responsiveBorder,
-                  classes.paddingX,
                   classes.hoverHighlight,
                 )}
               >
-                <Box
+                <AddButton
+                  className={classes.AddButton}
+                  data-testid={`addAddress-${id}`}
                   onClick={() => openNewAddressModal(newAddress, id)}
-                  className={classes.address}
-                />
-                <Icon path={mdiPlus} size={1} />
+                >
+                  <AddIcon />
+                  <AddText variant="subtitle1">{t('Add Address')}</AddText>
+                </AddButton>
               </Box>
             </Grid>
           </Grid>