[Paid] [$250] Contact methods - The Back and error dismiss buttons do not respond when adding existing account

[jponikarchuk]

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: v9.2.32-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/test-runs/TR-1309/folder/13176687/41236707/955761858?sort=-identifier
Email or phone of affected tester (no customers): n/a
Issue reported by: Applause Internal Team
Device used: Mac 15.4.1 Safari, Desktop, iPhone 13 iOS 18.6.2 Safari, Hybrid
App Component: User Settings

Action Performed:

1. Navigate to https://staging.new.expensify.com
2. Navigate to Account Settings > Profile > Contact Methods
3. Select "New Contact Method."
4. Enter an already registered email
5. Enter the correct magic code
6. Try to dismiss the error or click the back button

Expected Result:

The error can be dismissed by clicking the X button.
Clicking the back button closes the RHN.

Actual Result:

The Back and error dismiss buttons do not respond when adding existing account

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021980420509630047828
• Upwork Job ID: 1980420509630047828
• Last Price Increase: 2025-10-20
• Automatic offers:
• etCoderDysto | Contributor | 109195287

Issue Owner

Current Issue Owner: @RachCHopkins

[melvin-bot]

Triggered auto assignment to @RachCHopkins (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.

[etCoderDysto]

Proposal

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

Contact methods - The Back and error dismiss buttons do not respond when adding existing account

What is the root cause of that problem?

We call clearError when validating magic code, and clearUnvalidatedNewContactMethodAction will be called and it will clear pendingContactAction data

App/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx

Lines 225 to 229 in 825fb54

	const validateAndSubmitForm = useCallback(() => {
	// Clear flow specific error
	clearError();
	// Clear "incorrect magic" code error

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

Lines 58 to 63 in 825fb54

	clearError={() => {
	if (!pendingContactAction?.contactMethod) {
	return;
	}
	clearContactMethod(newContactMethod);
	clearUnvalidatedNewContactMethodAction();

Then we return early when we call onClose and clearError that makes back button and error clear button un responsive

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

Lines 58 to 71 in 825fb54

	clearError={() => {
	if (!pendingContactAction?.contactMethod) {
	return;
	}
	clearContactMethod(newContactMethod);
	clearUnvalidatedNewContactMethodAction();
	}}
	onClose={() => {
	if (!pendingContactAction?.contactMethod) {
	return;
	}
	clearContactMethod(newContactMethod);
	clearUnvalidatedNewContactMethodAction();
	Navigation.goBack(ROUTES.SETTINGS_NEW_CONTACT_METHOD.getRoute(navigateBackTo));

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

Inside clearError, we shouldn't call clearUnvalidatedNewContactMethodAction. Rather we should call clearPendingContactActionErrors since we only want to clear the error.

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

Lines 58 to 60 in 825fb54

	clearError={() => {
	if (!pendingContactAction?.contactMethod) {
	return;

clearError={() => {
                if (!pendingContactAction?.contactMethod) {
                    return;
                }
                clearContactMethod(newContactMethod);
                clearPendingContactActionErrors();
            }}

What alternative solutions did you explore? (Optional)

Optionally we can move clearContactMethod call and Navigation.goBack(ROUTES.SETTINGS_NEW_CONTACT_METHOD.getRoute(navigateBackTo)) above !pendingContactAction?.contactMethod check

clearError={() => {
                clearContactMethod(newContactMethod);
                if (!pendingContactAction?.contactMethod) {
                    return;
                }

                clearUnvalidatedNewContactMethodAction();
            }}
            onClose={() => {
                clearContactMethod(newContactMethod);
                Navigation.goBack(ROUTES.SETTINGS_NEW_CONTACT_METHOD.getRoute(navigateBackTo));

                if (!pendingContactAction?.contactMethod) {
                    return;
                }
                clearUnvalidatedNewContactMethodAction();
            }}

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[nyomanjyotisa]

Proposal

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

Contact methods - The Back and error dismiss buttons do not respond when adding existing account

What is the root cause of that problem?

The successData from addNewContactMethod sets PENDING_CONTACT_ACTION.contactMethod to null

App/src/libs/actions/User.ts

Lines 386 to 404 in 5c27729

	const successData: OnyxUpdate[] = [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: ONYXKEYS.PENDING_CONTACT_ACTION,
	value: {
	contactMethod: null,
	validateCodeSent: null,
	actionVerified: true,
	errorFields: {
	actionVerified: null,
	},
	},
	},
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: ONYXKEYS.ACCOUNT,
	value: {isLoading: false},
	},
	];

When the user tries to dismiss the error or click back, both callbacks check if pendingContactAction?.contactMethod exists and return early if it doesn't

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

Lines 58 to 72 in 5c27729

	clearError={() => {
	if (!pendingContactAction?.contactMethod) {
	return;
	}
	clearContactMethod(newContactMethod);
	clearUnvalidatedNewContactMethodAction();
	}}
	onClose={() => {
	if (!pendingContactAction?.contactMethod) {
	return;
	}
	clearContactMethod(newContactMethod);
	clearUnvalidatedNewContactMethodAction();
	Navigation.goBack(ROUTES.SETTINGS_NEW_CONTACT_METHOD.getRoute(navigateBackTo));
	}}

Since contactMethod is null, both callbacks return early without clearing the error or navigating back, making the buttons appear unresponsive

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

Remove the pendingContactAction?.contactMethod checks from both callbacks. We should always allow the user to dismiss errors and navigate back

            clearError={() => {
                clearContactMethod(newContactMethod);
                if (pendingContactAction?.contactMethod) {
                    clearUnvalidatedNewContactMethodAction();
                }
            }}
            onClose={() => {
                clearContactMethod(newContactMethod);
                if (pendingContactAction?.contactMethod) {
                    clearUnvalidatedNewContactMethodAction();
                }
                Navigation.goBack(ROUTES.SETTINGS_NEW_CONTACT_METHOD.getRoute(navigateBackTo));
            }}

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

Lines 58 to 72 in 5c27729

	clearError={() => {
	if (!pendingContactAction?.contactMethod) {
	return;
	}
	clearContactMethod(newContactMethod);
	clearUnvalidatedNewContactMethodAction();
	}}
	onClose={() => {
	if (!pendingContactAction?.contactMethod) {
	return;
	}
	clearContactMethod(newContactMethod);
	clearUnvalidatedNewContactMethodAction();
	Navigation.goBack(ROUTES.SETTINGS_NEW_CONTACT_METHOD.getRoute(navigateBackTo));
	}}

What alternative solutions did you explore? (Optional)

None

[ShridharGoel]

Proposal

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

Users who try to add a contact method that already exists see the red error banner but cannot dismiss it or leave the flow. The X button and the back button do nothing, leaving the right-hand pane stuck open.

What is the root cause of that problem?

The clearError and onClose handlers inside NewContactMethodConfirmMagicCodePage short-circuit when pendingContactAction?.contactMethod is empty, which happens after the server tells us the contact already exists. Because the rest of the handler never runs, neither the pending action nor the navigation gets cleared, so the UI stays frozen.

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

Lines 52 to 71 in f8e2af1

	title={translate('delegate.makeSureItIsYou')}
	sendValidateCode={() => requestValidateCodeAction()}
	descriptionPrimary={translate('contacts.enterMagicCode', {contactMethod})}
	validateCodeActionErrorField="addedLogin"
	validateError={validateLoginError}
	handleSubmitForm={addNewContactMethod}
	clearError={() => {
	if (!pendingContactAction?.contactMethod) {
	return;
	}
	clearContactMethod(newContactMethod);
	clearUnvalidatedNewContactMethodAction();
	}}
	onClose={() => {
	if (!pendingContactAction?.contactMethod) {
	return;
	}
	clearContactMethod(newContactMethod);
	clearUnvalidatedNewContactMethodAction();
	Navigation.goBack(ROUTES.SETTINGS_NEW_CONTACT_METHOD.getRoute(navigateBackTo));

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

Update NewContactMethodConfirmMagicCodePage so we always clear the pending action and navigate away, while only removing the optimistic login record when it actually belongs to this flow.

const shouldClearContactMethod = pendingContactAction?.contactMethod === newContactMethod;

return (
    <ValidateCodeActionContent
        title={translate('delegate.makeSureItIsYou')}
        sendValidateCode={() => requestValidateCodeAction()}
        descriptionPrimary={translate('contacts.enterMagicCode', {contactMethod})}
        validateCodeActionErrorField="addedLogin"
        validateError={validateLoginError}
        handleSubmitForm={addNewContactMethod}
        clearError={() => {
            if (shouldClearContactMethod) {
                clearContactMethod(newContactMethod);
            }
            clearUnvalidatedNewContactMethodAction();
        }}
        onClose={() => {
            if (shouldClearContactMethod) {
                clearContactMethod(newContactMethod);
            }
            clearUnvalidatedNewContactMethodAction();
            Navigation.goBack(ROUTES.SETTINGS_NEW_CONTACT_METHOD.getRoute(navigateBackTo));
        }}
    />
);

This keeps existing contact methods in place while letting the user close the modal, restoring both the dismiss button and the back button.

[melvin-bot]

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

[melvin-bot]

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