diff --git a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx
index 2a578f9515c4..7ab0fd56e97d 100644
--- a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx
+++ b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx
@@ -92,6 +92,7 @@ function ContactMethodDetailsPage({route}: ContactMethodDetailsPageProps) {
const loginData = useMemo(() => loginList?.[contactMethod], [loginList, contactMethod]);
const isDefaultContactMethod = useMemo(() => session?.email === loginData?.partnerUserID, [session?.email, loginData?.partnerUserID]);
const validateLoginError = getEarliestErrorField(loginData, 'validateLogin');
+ const prevPendingDeletedLogin = usePrevious(loginData?.pendingFields?.deletedLogin);
/**
* Attempt to set this contact method as user's "Default contact method"
@@ -167,10 +168,12 @@ function ContactMethodDetailsPage({route}: ContactMethodDetailsPageProps) {
}, [loginData?.validatedDate, loginData?.errorFields?.addedLogin]);
useEffect(() => {
- if (loginData?.validatedDate) {
+ // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+ if (loginData?.validatedDate || prevPendingDeletedLogin) {
return;
}
resetContactMethodValidateCodeSentState(contactMethod);
+ // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- The prevPendingDeletedLogin is a ref, so no need to add it to dependencies.
}, [contactMethod, loginData?.validatedDate]);
const getThreeDotsMenuItems = useCallback(() => {
diff --git a/tests/unit/ContactMethodDetailsPageTest.tsx b/tests/unit/ContactMethodDetailsPageTest.tsx
new file mode 100644
index 000000000000..b71cb7e5e74b
--- /dev/null
+++ b/tests/unit/ContactMethodDetailsPageTest.tsx
@@ -0,0 +1,84 @@
+import {render} from '@testing-library/react-native';
+import Onyx from 'react-native-onyx';
+// eslint-disable-next-line no-restricted-syntax
+import * as UserActions from '@libs/actions/User';
+import ContactMethodDetailsPage from '@pages/settings/Profile/Contacts/ContactMethodDetailsPage';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {MockFetch} from '../utils/TestHelper';
+import {getGlobalFetchMock} from '../utils/TestHelper';
+import waitForBatchedUpdates from '../utils/waitForBatchedUpdates';
+import waitForBatchedUpdatesWithAct from '../utils/waitForBatchedUpdatesWithAct';
+
+jest.mock('@libs/Navigation/Navigation', () => ({
+ goBack: jest.fn(),
+}));
+
+jest.mock('@libs/actions/User', () => {
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+ const originalModule = jest.requireActual('@libs/actions/User');
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+ return {
+ ...originalModule,
+ resetContactMethodValidateCodeSentState: jest.fn(),
+ };
+});
+
+const fakeEmail = 'fake@gmail.com';
+const mockRoute = {
+ params: {
+ backTo: '',
+ contactMethod: fakeEmail,
+ },
+};
+const mockLoginList = {
+ [fakeEmail]: {
+ partnerName: 'expensify.com',
+ partnerUserID: fakeEmail,
+ validatedDate: 'fake-validatedDate',
+ },
+};
+
+describe('ContactMethodDetailsPage', () => {
+ let mockFetch: MockFetch;
+ beforeAll(() => {
+ Onyx.init({
+ keys: ONYXKEYS,
+ });
+ });
+ beforeEach(() => {
+ global.fetch = getGlobalFetchMock();
+ mockFetch = fetch as MockFetch;
+ return Onyx.clear().then(waitForBatchedUpdates);
+ });
+
+ function ContactMethodDetailsPageRenderer() {
+ return (
+
+ );
+ }
+
+ it('should not call resetContactMethodValidateCodeSentState when we got a delete pending field', async () => {
+ // Given a login list with a validated contact method
+ Onyx.merge(ONYXKEYS.LOGIN_LIST, mockLoginList);
+ await waitForBatchedUpdates();
+
+ // Given the page is rendered
+ render();
+
+ // When a deleteContactMethod called
+ UserActions.deleteContactMethod(fakeEmail, mockLoginList);
+ await waitForBatchedUpdatesWithAct();
+
+ // When the deletion is successful
+ mockFetch?.succeed();
+ await waitForBatchedUpdates();
+ mockFetch?.resume();
+ await waitForBatchedUpdates();
+
+ // Then resetContactMethodValidateCodeSentState should not be called
+ expect(UserActions.resetContactMethodValidateCodeSentState).not.toHaveBeenCalled();
+ });
+});