From 1b87c0f995400d6545207be3ddc54a2fd2d8811e Mon Sep 17 00:00:00 2001
From: wjames111 <william.james@cru.org>
Date: Wed, 31 Jul 2024 11:15:16 -0400
Subject: [PATCH 1/6] Add confirm individual mutation.

---
 .../Tool/FixPhoneNumbers/Contact.tsx          | 12 +++++-
 .../Tool/FixPhoneNumbers/FixPhoneNumbers.tsx  | 38 ++++++++++++++++++-
 .../UpdateInvalidPhoneNumbers.graphql         | 15 ++++++++
 3 files changed, 61 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Tool/FixPhoneNumbers/UpdateInvalidPhoneNumbers.graphql

diff --git a/src/components/Tool/FixPhoneNumbers/Contact.tsx b/src/components/Tool/FixPhoneNumbers/Contact.tsx
index 425f0ba55..39f801135 100644
--- a/src/components/Tool/FixPhoneNumbers/Contact.tsx
+++ b/src/components/Tool/FixPhoneNumbers/Contact.tsx
@@ -23,7 +23,7 @@ import { PersonPhoneNumberInput } from 'src/graphql/types.generated';
 import { useLocale } from 'src/hooks/useLocale';
 import { dateFormatShort } from 'src/lib/intlFormat';
 import theme from '../../../theme';
-import { PhoneNumberData } from './FixPhoneNumbers';
+import { PersonPhoneNumbers, PhoneNumberData } from './FixPhoneNumbers';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   left: {
@@ -105,6 +105,7 @@ interface Props {
   numbers: PhoneNumberData[];
   toDelete: PersonPhoneNumberInput[];
   personId: string;
+  contact: PersonPhoneNumbers;
   handleChange: (
     personId: string,
     numberIndex: number,
@@ -114,12 +115,14 @@ interface Props {
   handleAdd: (personId: string, number: string) => void;
   handleChangePrimary: (personId: string, numberIndex: number) => void;
   setContactFocus: SetContactFocus;
+  handleUpdate: (personId: string, contact: PersonPhoneNumbers) => void;
 }
 
 const Contact: React.FC<Props> = ({
   name,
   numbers,
   personId,
+  contact,
   handleChange,
   handleDelete,
   handleAdd,
@@ -127,6 +130,7 @@ const Contact: React.FC<Props> = ({
   // Remove below line when function is being used.
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   setContactFocus,
+  handleUpdate,
 }) => {
   const { t } = useTranslation();
   const locale = useLocale();
@@ -349,7 +353,11 @@ const Contact: React.FC<Props> = ({
             style={{ paddingLeft: theme.spacing(1) }}
           >
             <Box className={classes.buttonTop}>
-              <Button variant="contained" style={{ width: '100%' }}>
+              <Button
+                onClick={() => handleUpdate(personId, contact)}
+                variant="contained"
+                style={{ width: '100%' }}
+              >
                 <Icon
                   path={mdiCheckboxMarkedCircle}
                   size={0.8}
diff --git a/src/components/Tool/FixPhoneNumbers/FixPhoneNumbers.tsx b/src/components/Tool/FixPhoneNumbers/FixPhoneNumbers.tsx
index 2b08cbca3..25d781529 100644
--- a/src/components/Tool/FixPhoneNumbers/FixPhoneNumbers.tsx
+++ b/src/components/Tool/FixPhoneNumbers/FixPhoneNumbers.tsx
@@ -10,6 +10,7 @@ import {
   NativeSelect,
   Typography,
 } from '@mui/material';
+import { useSnackbar } from 'notistack';
 import { Trans, useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 import { SetContactFocus } from 'pages/accountLists/[accountListId]/tools/useToolsHelper';
@@ -20,6 +21,7 @@ import { StyledInput } from '../StyledInput';
 import Contact from './Contact';
 import DeleteModal from './DeleteModal';
 import { useGetInvalidPhoneNumbersQuery } from './GetInvalidPhoneNumbers.generated';
+import { useUpdateInvalidPhoneNumbersMutation } from './UpdateInvalidPhoneNumbers.generated';
 
 const useStyles = makeStyles()(() => ({
   container: {
@@ -108,7 +110,7 @@ export interface PhoneNumberData {
   destroy?: boolean;
 }
 
-interface PersonPhoneNumbers {
+export interface PersonPhoneNumbers {
   phoneNumbers: PhoneNumberData[];
   toDelete: PersonPhoneNumberInput[];
 }
@@ -123,11 +125,13 @@ const FixPhoneNumbers: React.FC<Props> = ({
   setContactFocus,
 }: Props) => {
   const { classes } = useStyles();
-
+  const { enqueueSnackbar } = useSnackbar();
   const [defaultSource, setDefaultSource] = useState('MPDX');
   const [deleteModalState, setDeleteModalState] = useState<ModalState>(
     defaultDeleteModalState,
   );
+  const [updateInvalidPhoneNumbers] = useUpdateInvalidPhoneNumbersMutation();
+
   const { data, loading } = useGetInvalidPhoneNumbersQuery({
     variables: { accountListId },
   });
@@ -235,6 +239,34 @@ const FixPhoneNumbers: React.FC<Props> = ({
     setDefaultSource(event.target.value);
   };
 
+  const updatePhoneNumber = async (
+    personId: string,
+    contact: PersonPhoneNumbers,
+  ): Promise<void> => {
+    const attributes = [
+      {
+        phoneNumbers: contact.phoneNumbers.map((phoneNumber) => ({
+          id: phoneNumber.id,
+          primary: phoneNumber.primary,
+          number: phoneNumber.number,
+          validValues: true,
+        })),
+        id: personId,
+      },
+    ];
+    await updateInvalidPhoneNumbers({
+      variables: {
+        input: {
+          accountListId,
+          attributes,
+        },
+      },
+    });
+    enqueueSnackbar(t('Phone Number updated!'), {
+      variant: 'success',
+    });
+  };
+
   return (
     <Box className={classes.container}>
       {!loading && data ? (
@@ -310,6 +342,7 @@ const FixPhoneNumbers: React.FC<Props> = ({
                     name={`${person.firstName} ${person.lastName}`}
                     key={person.id}
                     personId={person.id}
+                    contact={dataState[person.id]}
                     numbers={dataState[person.id]?.phoneNumbers || []}
                     toDelete={dataState[person.id]?.toDelete}
                     handleChange={handleChange}
@@ -317,6 +350,7 @@ const FixPhoneNumbers: React.FC<Props> = ({
                     handleAdd={handleAdd}
                     handleChangePrimary={handleChangePrimary}
                     setContactFocus={setContactFocus}
+                    handleUpdate={updatePhoneNumber}
                   />
                 ))}
               </Grid>
diff --git a/src/components/Tool/FixPhoneNumbers/UpdateInvalidPhoneNumbers.graphql b/src/components/Tool/FixPhoneNumbers/UpdateInvalidPhoneNumbers.graphql
new file mode 100644
index 000000000..fd1deb853
--- /dev/null
+++ b/src/components/Tool/FixPhoneNumbers/UpdateInvalidPhoneNumbers.graphql
@@ -0,0 +1,15 @@
+mutation UpdateInvalidPhoneNumbers($input: PeopleUpdateMutationInput!) {
+  updatePeople(input: $input) {
+    people {
+      phoneNumbers {
+        nodes {
+          source
+          number
+          validValues
+          id
+          primary
+        }
+      }
+    }
+  }
+}

From 40821f2bc8c2b51ea8ada58689a2e7f19ab20fb6 Mon Sep 17 00:00:00 2001
From: wjames111 <william.james@cru.org>
Date: Wed, 31 Jul 2024 11:34:25 -0400
Subject: [PATCH 2/6] Add handleUpdate to Contact in Contact.test.tsx; Update
 updatePhoneNumber arguments to use numbers instead of contact.

---
 src/components/Tool/FixPhoneNumbers/Contact.test.tsx    | 6 ++++++
 src/components/Tool/FixPhoneNumbers/Contact.tsx         | 8 +++-----
 src/components/Tool/FixPhoneNumbers/FixPhoneNumbers.tsx | 7 +++----
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/Tool/FixPhoneNumbers/Contact.test.tsx b/src/components/Tool/FixPhoneNumbers/Contact.test.tsx
index f63fef861..b38af145b 100644
--- a/src/components/Tool/FixPhoneNumbers/Contact.test.tsx
+++ b/src/components/Tool/FixPhoneNumbers/Contact.test.tsx
@@ -35,6 +35,7 @@ describe('FixPhoneNumbers-Contact', () => {
     const handleDeleteModalOpenMock = jest.fn();
     const handleAddMock = jest.fn();
     const handleChangePrimaryMock = jest.fn();
+    const updatePhoneNumber = jest.fn();
 
     const { getByText, getByTestId, getByDisplayValue } = render(
       <ThemeProvider theme={theme}>
@@ -50,6 +51,7 @@ describe('FixPhoneNumbers-Contact', () => {
             handleAdd={handleAddMock}
             handleChangePrimary={handleChangePrimaryMock}
             setContactFocus={setContactFocus}
+            handleUpdate={updatePhoneNumber}
           />
         </TestWrapper>
       </ThemeProvider>,
@@ -67,6 +69,7 @@ describe('FixPhoneNumbers-Contact', () => {
     const handleDeleteModalOpenMock = jest.fn();
     const handleAddMock = jest.fn();
     const handleChangePrimaryMock = jest.fn();
+    const updatePhoneNumber = jest.fn();
 
     const { getByTestId } = render(
       <ThemeProvider theme={theme}>
@@ -82,6 +85,7 @@ describe('FixPhoneNumbers-Contact', () => {
             handleAdd={handleAddMock}
             handleChangePrimary={handleChangePrimaryMock}
             setContactFocus={setContactFocus}
+            handleUpdate={updatePhoneNumber}
           />
         </TestWrapper>
       </ThemeProvider>,
@@ -103,6 +107,7 @@ describe('FixPhoneNumbers-Contact', () => {
     const handleDeleteModalOpenMock = jest.fn();
     const handleAddMock = jest.fn();
     const handleChangePrimaryMock = jest.fn();
+    const updatePhoneNumber = jest.fn();
 
     const { getByTestId } = render(
       <ThemeProvider theme={theme}>
@@ -118,6 +123,7 @@ describe('FixPhoneNumbers-Contact', () => {
             handleAdd={handleAddMock}
             handleChangePrimary={handleChangePrimaryMock}
             setContactFocus={setContactFocus}
+            handleUpdate={updatePhoneNumber}
           />
         </TestWrapper>
       </ThemeProvider>,
diff --git a/src/components/Tool/FixPhoneNumbers/Contact.tsx b/src/components/Tool/FixPhoneNumbers/Contact.tsx
index 39f801135..3aa3638f6 100644
--- a/src/components/Tool/FixPhoneNumbers/Contact.tsx
+++ b/src/components/Tool/FixPhoneNumbers/Contact.tsx
@@ -23,7 +23,7 @@ import { PersonPhoneNumberInput } from 'src/graphql/types.generated';
 import { useLocale } from 'src/hooks/useLocale';
 import { dateFormatShort } from 'src/lib/intlFormat';
 import theme from '../../../theme';
-import { PersonPhoneNumbers, PhoneNumberData } from './FixPhoneNumbers';
+import { PhoneNumberData } from './FixPhoneNumbers';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   left: {
@@ -105,7 +105,6 @@ interface Props {
   numbers: PhoneNumberData[];
   toDelete: PersonPhoneNumberInput[];
   personId: string;
-  contact: PersonPhoneNumbers;
   handleChange: (
     personId: string,
     numberIndex: number,
@@ -115,14 +114,13 @@ interface Props {
   handleAdd: (personId: string, number: string) => void;
   handleChangePrimary: (personId: string, numberIndex: number) => void;
   setContactFocus: SetContactFocus;
-  handleUpdate: (personId: string, contact: PersonPhoneNumbers) => void;
+  handleUpdate: (personId: string, numbers: PhoneNumberData[]) => void;
 }
 
 const Contact: React.FC<Props> = ({
   name,
   numbers,
   personId,
-  contact,
   handleChange,
   handleDelete,
   handleAdd,
@@ -354,7 +352,7 @@ const Contact: React.FC<Props> = ({
           >
             <Box className={classes.buttonTop}>
               <Button
-                onClick={() => handleUpdate(personId, contact)}
+                onClick={() => handleUpdate(personId, numbers)}
                 variant="contained"
                 style={{ width: '100%' }}
               >
diff --git a/src/components/Tool/FixPhoneNumbers/FixPhoneNumbers.tsx b/src/components/Tool/FixPhoneNumbers/FixPhoneNumbers.tsx
index 25d781529..a3733f1cb 100644
--- a/src/components/Tool/FixPhoneNumbers/FixPhoneNumbers.tsx
+++ b/src/components/Tool/FixPhoneNumbers/FixPhoneNumbers.tsx
@@ -241,15 +241,15 @@ const FixPhoneNumbers: React.FC<Props> = ({
 
   const updatePhoneNumber = async (
     personId: string,
-    contact: PersonPhoneNumbers,
+    numbers: PhoneNumberData[],
   ): Promise<void> => {
     const attributes = [
       {
-        phoneNumbers: contact.phoneNumbers.map((phoneNumber) => ({
+        phoneNumbers: numbers.map((phoneNumber) => ({
           id: phoneNumber.id,
           primary: phoneNumber.primary,
           number: phoneNumber.number,
-          validValues: true,
+          validValues: false,
         })),
         id: personId,
       },
@@ -342,7 +342,6 @@ const FixPhoneNumbers: React.FC<Props> = ({
                     name={`${person.firstName} ${person.lastName}`}
                     key={person.id}
                     personId={person.id}
-                    contact={dataState[person.id]}
                     numbers={dataState[person.id]?.phoneNumbers || []}
                     toDelete={dataState[person.id]?.toDelete}
                     handleChange={handleChange}

From aed48c2081a1573a924c4d1c43b9e740bf092dee Mon Sep 17 00:00:00 2001
From: wjames111 <william.james@cru.org>
Date: Fri, 2 Aug 2024 11:56:10 -0400
Subject: [PATCH 3/6] Add hideContactFromView function.

---
 .../Tool/FixPhoneNumbers/Contact.tsx          |  8 ++-
 .../Tool/FixPhoneNumbers/FixPhoneNumbers.tsx  | 49 +++++++++++++++++--
 2 files changed, 51 insertions(+), 6 deletions(-)

diff --git a/src/components/Tool/FixPhoneNumbers/Contact.tsx b/src/components/Tool/FixPhoneNumbers/Contact.tsx
index 3aa3638f6..b315eb64e 100644
--- a/src/components/Tool/FixPhoneNumbers/Contact.tsx
+++ b/src/components/Tool/FixPhoneNumbers/Contact.tsx
@@ -114,7 +114,11 @@ interface Props {
   handleAdd: (personId: string, number: string) => void;
   handleChangePrimary: (personId: string, numberIndex: number) => void;
   setContactFocus: SetContactFocus;
-  handleUpdate: (personId: string, numbers: PhoneNumberData[]) => void;
+  handleUpdate: (
+    personId: string,
+    name: string,
+    numbers: PhoneNumberData[],
+  ) => void;
 }
 
 const Contact: React.FC<Props> = ({
@@ -352,7 +356,7 @@ const Contact: React.FC<Props> = ({
           >
             <Box className={classes.buttonTop}>
               <Button
-                onClick={() => handleUpdate(personId, numbers)}
+                onClick={() => handleUpdate(personId, name, numbers)}
                 variant="contained"
                 style={{ width: '100%' }}
               >
diff --git a/src/components/Tool/FixPhoneNumbers/FixPhoneNumbers.tsx b/src/components/Tool/FixPhoneNumbers/FixPhoneNumbers.tsx
index a3733f1cb..b3e2d7413 100644
--- a/src/components/Tool/FixPhoneNumbers/FixPhoneNumbers.tsx
+++ b/src/components/Tool/FixPhoneNumbers/FixPhoneNumbers.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { useApolloClient } from '@apollo/client';
 import { mdiCheckboxMarkedCircle } from '@mdi/js';
 import Icon from '@mdi/react';
 import {
@@ -20,7 +21,11 @@ import NoData from '../NoData';
 import { StyledInput } from '../StyledInput';
 import Contact from './Contact';
 import DeleteModal from './DeleteModal';
-import { useGetInvalidPhoneNumbersQuery } from './GetInvalidPhoneNumbers.generated';
+import {
+  GetInvalidPhoneNumbersDocument,
+  GetInvalidPhoneNumbersQuery,
+  useGetInvalidPhoneNumbersQuery,
+} from './GetInvalidPhoneNumbers.generated';
 import { useUpdateInvalidPhoneNumbersMutation } from './UpdateInvalidPhoneNumbers.generated';
 
 const useStyles = makeStyles()(() => ({
@@ -126,6 +131,7 @@ const FixPhoneNumbers: React.FC<Props> = ({
 }: Props) => {
   const { classes } = useStyles();
   const { enqueueSnackbar } = useSnackbar();
+  const client = useApolloClient();
   const [defaultSource, setDefaultSource] = useState('MPDX');
   const [deleteModalState, setDeleteModalState] = useState<ModalState>(
     defaultDeleteModalState,
@@ -241,6 +247,7 @@ const FixPhoneNumbers: React.FC<Props> = ({
 
   const updatePhoneNumber = async (
     personId: string,
+    name: string,
     numbers: PhoneNumberData[],
   ): Promise<void> => {
     const attributes = [
@@ -261,10 +268,44 @@ const FixPhoneNumbers: React.FC<Props> = ({
           attributes,
         },
       },
+      onError() {
+        enqueueSnackbar(t(`Error updating ${name}'s phone numbers`), {
+          variant: 'error',
+          autoHideDuration: 7000,
+        });
+      },
+      onCompleted() {
+        enqueueSnackbar(t(`${name}'s phone numbers updated!`), {
+          variant: 'success',
+          autoHideDuration: 7000,
+        });
+        hideContactFromView(personId);
+      },
     });
-    enqueueSnackbar(t('Phone Number updated!'), {
-      variant: 'success',
-    });
+  };
+
+  const hideContactFromView = (hideId: string): void => {
+    const query = {
+      query: GetInvalidPhoneNumbersDocument,
+      variables: {
+        accountListId,
+      },
+    };
+
+    const dataFromCache = client.readQuery<GetInvalidPhoneNumbersQuery>(query);
+
+    if (dataFromCache) {
+      const data = {
+        ...dataFromCache,
+        people: {
+          ...dataFromCache.people,
+          nodes: dataFromCache.people.nodes.filter(
+            (person) => person.id !== hideId,
+          ),
+        },
+      };
+      client.writeQuery({ ...query, data });
+    }
   };
 
   return (

From 3363cddd4d8b558c78bf51a5f12afd38c42b18b8 Mon Sep 17 00:00:00 2001
From: wjames111 <william.james@cru.org>
Date: Fri, 2 Aug 2024 12:25:33 -0400
Subject: [PATCH 4/6] Add test for hideContactFromView; refactors test
 components.

---
 .../Tool/FixPhoneNumbers/Contact.tsx          |   1 +
 .../FixPhoneNumbers/FixPhoneNumbers.test.tsx  | 219 ++++--------------
 .../Tool/FixPhoneNumbers/FixPhoneNumbers.tsx  |   2 +-
 3 files changed, 53 insertions(+), 169 deletions(-)

diff --git a/src/components/Tool/FixPhoneNumbers/Contact.tsx b/src/components/Tool/FixPhoneNumbers/Contact.tsx
index b315eb64e..f2b6f7582 100644
--- a/src/components/Tool/FixPhoneNumbers/Contact.tsx
+++ b/src/components/Tool/FixPhoneNumbers/Contact.tsx
@@ -356,6 +356,7 @@ const Contact: React.FC<Props> = ({
           >
             <Box className={classes.buttonTop}>
               <Button
+                data-testid={`confirmButton-${personId}`}
                 onClick={() => handleUpdate(personId, name, numbers)}
                 variant="contained"
                 style={{ width: '100%' }}
diff --git a/src/components/Tool/FixPhoneNumbers/FixPhoneNumbers.test.tsx b/src/components/Tool/FixPhoneNumbers/FixPhoneNumbers.test.tsx
index 9ad81f0e6..ff004eb63 100644
--- a/src/components/Tool/FixPhoneNumbers/FixPhoneNumbers.test.tsx
+++ b/src/components/Tool/FixPhoneNumbers/FixPhoneNumbers.test.tsx
@@ -73,32 +73,36 @@ const testData: ErgonoMockShape[] = [
   },
 ];
 
+const Components: React.FC<{ data?: ErgonoMockShape[] }> = ({
+  data = testData,
+}) => (
+  <ThemeProvider theme={theme}>
+    <TestRouter router={router}>
+      <TestWrapper>
+        <GqlMockedProvider<{
+          GetInvalidPhoneNumbers: GetInvalidPhoneNumbersQuery;
+        }>
+          mocks={{
+            GetInvalidPhoneNumbers: {
+              people: {
+                nodes: data,
+              },
+            },
+          }}
+        >
+          <FixPhoneNumbers
+            accountListId={accountListId}
+            setContactFocus={setContactFocus}
+          />
+        </GqlMockedProvider>
+      </TestWrapper>
+    </TestRouter>
+  </ThemeProvider>
+);
+
 describe('FixPhoneNumbers-Home', () => {
   it('default with test data', async () => {
-    const { getByText, queryByTestId } = render(
-      <ThemeProvider theme={theme}>
-        <TestRouter router={router}>
-          <TestWrapper>
-            <GqlMockedProvider<{
-              GetInvalidPhoneNumbers: GetInvalidPhoneNumbersQuery;
-            }>
-              mocks={{
-                GetInvalidPhoneNumbers: {
-                  people: {
-                    nodes: testData,
-                  },
-                },
-              }}
-            >
-              <FixPhoneNumbers
-                accountListId={accountListId}
-                setContactFocus={setContactFocus}
-              />
-            </GqlMockedProvider>
-          </TestWrapper>
-        </TestRouter>
-      </ThemeProvider>,
-    );
+    const { getByText, queryByTestId } = render(<Components />);
 
     await waitFor(() =>
       expect(getByText('Fix Phone Numbers')).toBeInTheDocument(),
@@ -113,30 +117,7 @@ describe('FixPhoneNumbers-Home', () => {
   });
 
   it('change primary of first number', async () => {
-    const { getByTestId, queryByTestId } = render(
-      <ThemeProvider theme={theme}>
-        <TestRouter router={router}>
-          <TestWrapper>
-            <GqlMockedProvider<{
-              GetInvalidPhoneNumbers: GetInvalidPhoneNumbersQuery;
-            }>
-              mocks={{
-                GetInvalidPhoneNumbers: {
-                  people: {
-                    nodes: testData,
-                  },
-                },
-              }}
-            >
-              <FixPhoneNumbers
-                accountListId={accountListId}
-                setContactFocus={setContactFocus}
-              />
-            </GqlMockedProvider>
-          </TestWrapper>
-        </TestRouter>
-      </ThemeProvider>,
-    );
+    const { getByTestId, queryByTestId } = render(<Components />);
 
     const star1 = await waitFor(() => getByTestId('starOutlineIcon-testid-1'));
     userEvent.click(star1);
@@ -147,30 +128,7 @@ describe('FixPhoneNumbers-Home', () => {
   });
 
   it('delete third number from first person', async () => {
-    const { getByTestId, queryByTestId } = render(
-      <ThemeProvider theme={theme}>
-        <TestRouter router={router}>
-          <TestWrapper>
-            <GqlMockedProvider<{
-              GetInvalidPhoneNumbers: GetInvalidPhoneNumbersQuery;
-            }>
-              mocks={{
-                GetInvalidPhoneNumbers: {
-                  people: {
-                    nodes: testData,
-                  },
-                },
-              }}
-            >
-              <FixPhoneNumbers
-                accountListId={accountListId}
-                setContactFocus={setContactFocus}
-              />
-            </GqlMockedProvider>
-          </TestWrapper>
-        </TestRouter>
-      </ThemeProvider>,
-    );
+    const { getByTestId, queryByTestId } = render(<Components />);
 
     const delete02 = await waitFor(() => getByTestId('delete-testid-2'));
     userEvent.click(delete02);
@@ -182,30 +140,7 @@ describe('FixPhoneNumbers-Home', () => {
   });
 
   it('change second number for second person to primary then delete it', async () => {
-    const { getByTestId, queryByTestId } = render(
-      <ThemeProvider theme={theme}>
-        <TestRouter router={router}>
-          <TestWrapper>
-            <GqlMockedProvider<{
-              GetInvalidPhoneNumbers: GetInvalidPhoneNumbersQuery;
-            }>
-              mocks={{
-                GetInvalidPhoneNumbers: {
-                  people: {
-                    nodes: testData,
-                  },
-                },
-              }}
-            >
-              <FixPhoneNumbers
-                accountListId={accountListId}
-                setContactFocus={setContactFocus}
-              />
-            </GqlMockedProvider>
-          </TestWrapper>
-        </TestRouter>
-      </ThemeProvider>,
-    );
+    const { getByTestId, queryByTestId } = render(<Components />);
 
     const star11 = await waitFor(() =>
       getByTestId('starOutlineIcon-testid2-1'),
@@ -223,30 +158,7 @@ describe('FixPhoneNumbers-Home', () => {
   });
 
   it('add a phone number to first person', async () => {
-    const { getByTestId, getByDisplayValue } = render(
-      <ThemeProvider theme={theme}>
-        <TestRouter router={router}>
-          <TestWrapper>
-            <GqlMockedProvider<{
-              GetInvalidPhoneNumbers: GetInvalidPhoneNumbersQuery;
-            }>
-              mocks={{
-                GetInvalidPhoneNumbers: {
-                  people: {
-                    nodes: testData,
-                  },
-                },
-              }}
-            >
-              <FixPhoneNumbers
-                accountListId={accountListId}
-                setContactFocus={setContactFocus}
-              />
-            </GqlMockedProvider>
-          </TestWrapper>
-        </TestRouter>
-      </ThemeProvider>,
-    );
+    const { getByTestId, getByDisplayValue } = render(<Components />);
     await waitFor(() =>
       expect(getByTestId('starIcon-testid2-0')).toBeInTheDocument(),
     );
@@ -265,30 +177,7 @@ describe('FixPhoneNumbers-Home', () => {
   });
 
   it('should render no contacts with no data', async () => {
-    const { getByText, getByTestId } = render(
-      <ThemeProvider theme={theme}>
-        <TestRouter router={router}>
-          <TestWrapper>
-            <GqlMockedProvider<{
-              GetInvalidPhoneNumbers: GetInvalidPhoneNumbersQuery;
-            }>
-              mocks={{
-                GetInvalidPhoneNumbers: {
-                  people: {
-                    nodes: [],
-                  },
-                },
-              }}
-            >
-              <FixPhoneNumbers
-                accountListId={accountListId}
-                setContactFocus={setContactFocus}
-              />
-            </GqlMockedProvider>
-          </TestWrapper>
-        </TestRouter>
-      </ThemeProvider>,
-    );
+    const { getByText, getByTestId } = render(<Components data={[]} />);
     await waitFor(() =>
       expect(getByTestId('fixPhoneNumbers-null-state')).toBeInTheDocument(),
     );
@@ -298,30 +187,7 @@ describe('FixPhoneNumbers-Home', () => {
   });
 
   it('should modify first number of first contact', async () => {
-    const { getByTestId } = render(
-      <ThemeProvider theme={theme}>
-        <TestRouter router={router}>
-          <TestWrapper>
-            <GqlMockedProvider<{
-              GetInvalidPhoneNumbers: GetInvalidPhoneNumbersQuery;
-            }>
-              mocks={{
-                GetInvalidPhoneNumbers: {
-                  people: {
-                    nodes: testData,
-                  },
-                },
-              }}
-            >
-              <FixPhoneNumbers
-                accountListId={accountListId}
-                setContactFocus={setContactFocus}
-              />
-            </GqlMockedProvider>
-          </TestWrapper>
-        </TestRouter>
-      </ThemeProvider>,
-    );
+    const { getByTestId } = render(<Components />);
     await waitFor(() => {
       expect(getByTestId('textfield-testid-0')).toBeInTheDocument();
     });
@@ -331,4 +197,21 @@ describe('FixPhoneNumbers-Home', () => {
     userEvent.type(firstInput, '123');
     expect(firstInput.value).toBe('+3533895895123');
   });
+
+  it('should hide contact from view', async () => {
+    const { getByTestId, getByText, queryByText } = render(<Components />);
+    await waitFor(() => {
+      expect(
+        getByText(`${testData[0].firstName} ${testData[0].lastName}`),
+      ).toBeInTheDocument();
+    });
+
+    userEvent.click(getByTestId('confirmButton-testid'));
+
+    await waitFor(() => {
+      expect(
+        queryByText(`${testData[0].firstName} ${testData[0].lastName}`),
+      ).not.toBeInTheDocument();
+    });
+  });
 });
diff --git a/src/components/Tool/FixPhoneNumbers/FixPhoneNumbers.tsx b/src/components/Tool/FixPhoneNumbers/FixPhoneNumbers.tsx
index b3e2d7413..05c02f253 100644
--- a/src/components/Tool/FixPhoneNumbers/FixPhoneNumbers.tsx
+++ b/src/components/Tool/FixPhoneNumbers/FixPhoneNumbers.tsx
@@ -256,7 +256,7 @@ const FixPhoneNumbers: React.FC<Props> = ({
           id: phoneNumber.id,
           primary: phoneNumber.primary,
           number: phoneNumber.number,
-          validValues: false,
+          validValues: true,
         })),
         id: personId,
       },

From 088da11dd16913beb54e378e9c59c95af5067842 Mon Sep 17 00:00:00 2001
From: wjames111 <william.james@cru.org>
Date: Fri, 2 Aug 2024 12:33:16 -0400
Subject: [PATCH 5/6] Remove update sourceValid property on mutation.

---
 src/components/Tool/FixPhoneNumbers/FixPhoneNumbers.tsx          | 1 -
 .../Tool/FixPhoneNumbers/UpdateInvalidPhoneNumbers.graphql       | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/components/Tool/FixPhoneNumbers/FixPhoneNumbers.tsx b/src/components/Tool/FixPhoneNumbers/FixPhoneNumbers.tsx
index 05c02f253..61e27f84f 100644
--- a/src/components/Tool/FixPhoneNumbers/FixPhoneNumbers.tsx
+++ b/src/components/Tool/FixPhoneNumbers/FixPhoneNumbers.tsx
@@ -256,7 +256,6 @@ const FixPhoneNumbers: React.FC<Props> = ({
           id: phoneNumber.id,
           primary: phoneNumber.primary,
           number: phoneNumber.number,
-          validValues: true,
         })),
         id: personId,
       },
diff --git a/src/components/Tool/FixPhoneNumbers/UpdateInvalidPhoneNumbers.graphql b/src/components/Tool/FixPhoneNumbers/UpdateInvalidPhoneNumbers.graphql
index fd1deb853..e8c2d157b 100644
--- a/src/components/Tool/FixPhoneNumbers/UpdateInvalidPhoneNumbers.graphql
+++ b/src/components/Tool/FixPhoneNumbers/UpdateInvalidPhoneNumbers.graphql
@@ -5,7 +5,6 @@ mutation UpdateInvalidPhoneNumbers($input: PeopleUpdateMutationInput!) {
         nodes {
           source
           number
-          validValues
           id
           primary
         }

From 62fdb7ffa4af5e9654255ad12875d14d020fb557 Mon Sep 17 00:00:00 2001
From: wjames111 <william.james@cru.org>
Date: Mon, 5 Aug 2024 14:15:48 -0400
Subject: [PATCH 6/6] Update FixPhoneNumbers/Contact.test.tsx test to include
 confirm button click and updatePhoneNumber call.

---
 src/components/Tool/FixPhoneNumbers/Contact.test.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/Tool/FixPhoneNumbers/Contact.test.tsx b/src/components/Tool/FixPhoneNumbers/Contact.test.tsx
index b38af145b..a5e1c2896 100644
--- a/src/components/Tool/FixPhoneNumbers/Contact.test.tsx
+++ b/src/components/Tool/FixPhoneNumbers/Contact.test.tsx
@@ -137,5 +137,7 @@ describe('FixPhoneNumbers-Contact', () => {
     expect(handleChangePrimaryMock).toHaveBeenCalled();
     userEvent.click(getByTestId('delete-testid-1'));
     expect(handleDeleteModalOpenMock).toHaveBeenCalled();
+    userEvent.click(getByTestId(`confirmButton-${testData.id}`));
+    expect(updatePhoneNumber).toHaveBeenCalled();
   });
 });