[Due for payment 2025-03-27] [$250] Profile - RBR appears in Profile settings after removing second contact method

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.1.9-2
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/cases/view/2654630
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Device used: iPhone 15 iOS 18.1.1 Safari, MacBook Air Sonoma 14.1
App Component: User Settings

Action Performed:

Preconditions: gmail account added a second contact method (email)

1. Navigate to Settings tab - Profile - Contact method
2. Select a secondary contact method
3. Click Remove

Expected Result:

Secondary contact method is removed from the list without any error

Actual Result:

Red dot appears in Profile after removing second contact method. The RBR is removed after clearing cache.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6740286_1739339201560.ScreenRecording_02-11-2025_21-33-18_1.mp4

Bug6740286_1739339201560.Recording__421.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021897762842116763600
• Upwork Job ID: 1897762842116763600
• Last Price Increase: 2025-03-06
• Automatic offers:
• linhvovan29546 | Contributor | 106463713

Issue Owner

Current Issue Owner: @fedirjh

[melvin-bot]

Triggered auto assignment to @NicMendonca (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021897762842116763600

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @fedirjh (External)

[linhvovan29546]

🚨 Edited by proposal-police: This proposal was edited at 2025-03-08 12:09:33 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Profile - RBR appears in Profile settings after removing second contact method

What is the root cause of that problem?

We remove contactMethod here

App/src/libs/actions/User.ts

Lines 269 to 270 in add7b6e

	API.write(WRITE_COMMANDS.DELETE_CONTACT_METHOD, parameters, {optimisticData, successData, failureData});
	Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.getRoute(backTo));

After remove contactMethod, we back to the SETTINGS_CONTACT_METHODS page. However, since Onyx updates and navigation asynchronously, As a result, we remain in ContactMethodDetailsPage for a short time, then a useEffect triggers resetContactMethodValidateCodeSentState.

App/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx

Lines 169 to 174 in add7b6e

	useEffect(() => {
	if (loginData?.validatedDate) {
	return;
	}
	resetContactMethodValidateCodeSentState(contactMethod);
	}, [contactMethod, loginData?.validatedDate]);

This causes the ValidateCodeActionForm to be displayed abit.

App/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx

Lines 165 to 167 in add7b6e

	useEffect(() => {
	setIsValidateCodeFormVisible(!loginData?.validatedDate);
	}, [loginData?.validatedDate, loginData?.errorFields?.addedLogin]);

which then requests the REQUEST_CONTACT_METHOD_VALIDATE_CODE command. Since we just deleted that second contact method, this request fails, leading to an RBR appearing.

App/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx

Line 337 in add7b6e

sendValidateCode={() => requestContactMethodValidateCode(contactMethod)}

What changes do you think we should make in order to solve the problem?

We should not reset the contact method if there is a previously pending delete action

App/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx

Lines 169 to 174 in add7b6e

	useEffect(() => {
	if (loginData?.validatedDate) {
	return;
	}
	resetContactMethodValidateCodeSentState(contactMethod);
	}, [contactMethod, loginData?.validatedDate]);

    const prevLoginData = usePrevious(loginData);
....
    useEffect(() => {
        if (loginData?.validatedDate) {
            return;
        }
        if(prevLoginData?.pendingFields?.deletedLogin){ // new
            return;
        }
        resetContactMethodValidateCodeSentState(contactMethod);
    }, [contactMethod, loginData?.validatedDate, prevLoginData?.pendingFields?.deletedLogin]);

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A, this is a navigation issue. However, we could simulate Onyx data and assert that the resetContactMethodValidateCodeSentState is not called after deleting a contact.

What alternative solutions did you explore? (Optional)

1. We can return early if prevValidatedDate has a value instead of prevDeletedLogin.
2. We can return early if this is not the default contact method.

[linhvovan29546]

Proposal updated

• Add alternative solutions