MPDX-7933 Tools Fix Mailing Address - Primary Contact Star

src/components/Contacts/ContactDetails/ContactDetailsTab/Mailing/AddAddressModal/AddAddressModal.tsx

@@ -23,6 +23,7 @@ import {
   SubmitButton,
 } from 'src/components/common/Modal/ActionButtons/ActionButtons';
 import { AddressCreateInput } from 'src/graphql/types.generated';
+import { useUpdateCache } from 'src/hooks/useUpdateCache';
 import Modal from '../../../../../common/Modal/Modal';
 import {
   ContactDetailsTabDocument,
@@ -34,7 +35,6 @@ import {
 } from '../AddressLocation';
 import { useSetContactPrimaryAddressMutation } from '../SetPrimaryAddress.generated';
 import { StreetAutocomplete } from '../StreetAutocomplete/StreetAutocomplete';
-import { useUpdateCache } from '../useUpdateCache';
 import { useCreateContactAddressMutation } from './CreateContactAddress.generated';
 import { createAddressSchema } from './createAddressSchema';
 

src/components/Contacts/ContactDetails/ContactDetailsTab/Mailing/EditContactAddressModal/EditContactAddressModal.tsx

@@ -27,6 +27,7 @@ import {
   SubmitButton,
 } from 'src/components/common/Modal/ActionButtons/ActionButtons';
 import { AddressUpdateInput } from 'src/graphql/types.generated';
+import { useUpdateCache } from 'src/hooks/useUpdateCache';
 import Modal from '../../../../../common/Modal/Modal';
 import {
   ContactDetailsTabDocument,
@@ -39,7 +40,6 @@ import {
 import { ContactMailingFragment } from '../ContactMailing.generated';
 import { useSetContactPrimaryAddressMutation } from '../SetPrimaryAddress.generated';
 import { StreetAutocomplete } from '../StreetAutocomplete/StreetAutocomplete';
-import { useUpdateCache } from '../useUpdateCache';
 import {
   useDeleteContactAddressMutation,
   useDonationServicesEmailQuery,

src/components/Tool/FixMailingAddresses/Contact.tsx

@@ -11,16 +11,19 @@
   Card,
   CardContent,
   CardHeader,
+  CircularProgress,
   Grid,
   Hidden,
   IconButton,
   Typography,
 } from '@mui/material';
 import clsx from 'clsx';
 import { DateTime } from 'luxon';
+import { useSnackbar } from 'notistack';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 import { editableSources } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/Mailing/EditContactAddressModal/EditContactAddressModal';
+import { useSetContactPrimaryAddressMutation } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/Mailing/SetPrimaryAddress.generated';
 import {
   AddButton,
   AddIcon,
@@ -29,6 +32,7 @@
   LockIcon,
 } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/StyledComponents';
 import { useLocale } from 'src/hooks/useLocale';
+import { useUpdateCache } from 'src/hooks/useUpdateCache';
 import { dateFormatShort } from 'src/lib/intlFormat';
 import { contactPartnershipStatus } from 'src/utils/contacts/contactPartnershipStatus';
 import theme from '../../../theme';
@@ -122,10 +126,35 @@
 }) => {
   const { t } = useTranslation();
   const locale = useLocale();
+  const { enqueueSnackbar } = useSnackbar();
   const { classes } = useStyles();
   const newAddress = { ...emptyAddress, newAddress: true };
-  //TODO: Add button functionality
-  //TODO: Make contact name a link to contact page
+  const [setContactPrimaryAddress, { loading: settingPrimaryAddress }] =
+    useSetContactPrimaryAddressMutation();
+  const { update } = useUpdateCache(id);
+
+  const handleSetPrimaryContact = async (address: ContactAddressFragment) => {
+    await setContactPrimaryAddress({
+      variables: {
+        contactId: id,
+        primaryAddressId: address.primaryMailingAddress ? null : address.id,
+      },
+      update,
+      onCompleted: () => {
+        enqueueSnackbar(t('Mailing information edited successfully'), {
+          variant: 'success',
+        });
+      },
+      onError: () => {
+        enqueueSnackbar(
+          t('Error occurred while updating mailing information'),
+          {
+            variant: 'error',
+          },
+        );
+      },
+    });
+  };
 
   return (
     <Card className={classes.contactCard}>
@@ -191,13 +220,30 @@
                       </Typography>
                     </Grid>
                     <Grid item md={4} className={classes.alignCenter}>
-                      <ContactIconContainer aria-label={t('Edit Icon')}>
-                        {address.primaryMailingAddress ? (
-                          <StarIcon className={classes.hoverHighlight} />
-                        ) : (
-                          <StarOutlineIcon className={classes.hoverHighlight} />
-                        )}
-                      </ContactIconContainer>
+                      {!settingPrimaryAddress && (
+                        <ContactIconContainer
+                          aria-label={t('Edit Icon')}
+                          onClick={() => handleSetPrimaryContact(address)}
+                        >
+                          {address.primaryMailingAddress ? (
+                            <StarIcon
+                              className={classes.hoverHighlight}
+                              data-testid="primaryContactStarIcon"
+                            />
+                          ) : (
+                            <StarOutlineIcon
+                              className={classes.hoverHighlight}
+                              data-testid="contactStarIcon"
+                            />
+                          )}
+                        </ContactIconContainer>
+                      )}
+                      {settingPrimaryAddress && (
+                        <CircularProgress
+                          size={'20px'}
+                          data-testid="settingPrimaryAddress"
+                        />
+                      )}
                     </Grid>
                   </Box>
                 </Grid>

src/components/Tool/FixMailingAddresses/FixMailingAddresses.test.tsx

@@ -358,4 +358,42 @@ describe('FixSendNewsletter', () => {
       );
     }, 10000);
   });
+  describe('Set primary mailing address', () => {
+    it('should set the address as primary', async () => {
+      const { getByTestId, getAllByTestId, queryByTestId, queryAllByTestId } =
+        render(
+          <Components
+            mocks={{
+              InvalidAddresses: {
+                ...mockInvalidAddressesResponse.InvalidAddresses,
+              },
+            }}
+          />,
+        );
+      await waitFor(() =>
+        expect(queryByTestId('loading')).not.toBeInTheDocument(),
+      );
+
+      const primaryAddress = getByTestId('primaryContactStarIcon');
+      const secondaryAddresses = getAllByTestId('contactStarIcon');
+
+      expect(primaryAddress).toBeInTheDocument();
+      expect(secondaryAddresses.length).toBe(2);
+
+      expect(queryAllByTestId('settingPrimaryAddress').length).toBe(0);
+
+      userEvent.click(secondaryAddresses[0]);
+
+      expect(getAllByTestId('settingPrimaryAddress').length).toBe(3);
+
+      await waitFor(() =>
+        expect(mockEnqueue).toHaveBeenCalledWith(
+          'Mailing information edited successfully',
+          {
+            variant: 'success',
+          },
+        ),
+      );
+    });
+  });
 });

src/components/Contacts/ContactDetails/ContactDetailsTab/Mailing/useUpdateCache.ts → src/hooks/useUpdateCache.ts

@@ -3,7 +3,7 @@ import {
   ContactPrimaryAddressRelationFragmentDoc,
   PrimaryMailingAddressFragmentDoc,
   SetContactPrimaryAddressMutation,
-} from './SetPrimaryAddress.generated';
+} from 'src/components/Contacts/ContactDetails/ContactDetailsTab/Mailing/SetPrimaryAddress.generated';
 
 // This hook provides an Apollo cache update function for the setContactPrimaryAddress mutation
 // used by the add address and edit address modals