Merge pull request #58161 from linhvovan29546/fix/57870-rbr-appears-after-remove-second-contact

fix: RBR appears in profile after remove second contact

Author: francoisl

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(() => {

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 = '[email protected]';
+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 (
+            <ContactMethodDetailsPage
+                // @ts-expect-error - Ignoring type errors for testing purposes
+                route={mockRoute}
+            />
+        );
+    }
+
+    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(<ContactMethodDetailsPageRenderer />);
+
+        // 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();
+    });
+});