[$250] Chat - Re-selection is required to change payment method from Pay elsewhere to Expensify

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.1.5-2
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5646450
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team
Device used: MacOS 14.7.4 / Safari, Chrome, Desktop. iPhone 15 Pro / 18.3.1. Google Pixel 5 / Android 14
App Component: Money Requests

Action Performed:

1. Open Expensify App or go to staging.new.expensify.com
2. Login with any account
3. Go to any chat or start new one
4. Open "+" > Pay 'Username'
5. Enter any amount and click "Next"
6. Change payment method from "Pay Elsewhere" to "Pay with Expensify" and vice versa

Expected Result:

User need to select another method once to change the payment method

Actual Result:

User must repeat the selection to change the payment method

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

https://github.com/user-attachments/assets/3eb1de9f-9d16-4abf-87e5-0a263b713283
https://github.com/user-attachments/assets/6728379d-78bc-4b3f-9538-71ebb93965de

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021894380561474132011
• Upwork Job ID: 1894380561474132011
• Last Price Increase: 2025-02-25

Issue Owner

Current Issue Owner: @suneox

[melvin-bot]

Triggered auto assignment to @Gonals (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

Triggered auto assignment to @lschurr (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]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[IuliiaHerets]

Issue is not repro on production

bandicam.2025-02-25.08-28-59-151.mp4

[nkdengineer]

Proposal

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

User must repeat the selection to change the payment method

What is the root cause of that problem?

When users select the different payment method, we will update the lastPaymentMethod, but we don't want to change the order so we don't include it in the dependencies, and

We need to be sure that onPress should be wrapped in an useCallback to prevent unnecessary updates.

App/src/components/SettlementButton/index.tsx

Lines 182 to 185 in d97f1b4

	return buttonOptions;
	// We don't want to reorder the options when the preferred payment method changes while the button is still visible except for component initialization when the last payment method is not initialized yet.
	// We need to be sure that onPress should be wrapped in an useCallback to prevent unnecessary updates.
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps

That means onPress should not be changed. We can see in the dependencies, we include setFormError, we get it from useDebouncedState

App/src/components/MoneyRequestConfirmationList.tsx

Line 320 in d97f1b4

const [formError, debouncedFormError, setFormError] = useDebouncedState<TranslationPaths | ''>('');

but it's not wrapped inside useCallback

App/src/hooks/useDebouncedState.ts

Line 28 in d97f1b4

const handleSetValue = (newValue: T) => {

That makes onPress is updated, so the payment method order changes

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

Wrap handleSetValue inside useCallback

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

N/A

What alternative solutions did you explore? (Optional)

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.

[melvin-bot]

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

[melvin-bot]

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

[Gonals]

@suneox, this is a blocker, so let's prioritize accordingly 👍

[suneox]

@suneox, this is a blocker, so let's prioritize accordingly 👍

Sure, I'll check this one within a few hours.

[suneox]

@nkdengineer Although your solution can resolve this issue, could you please provide more explanation about savePreferredPaymentMethod updating lastPaymentMethod in relation to the setFormError dependency? Since this issue doesn’t occur on the latest production.

Screen.Recording.2025-02-25.at.22.37.47.mp4

[nkdengineer]

@suneox setFormError is not wrapped into useCallback so it’s updated whenever the parent re-renders or the props/state inside the component change. That means there’re many factors that cause the setFormError update.

I think the offending PR can be #56759, since the issue is not reproducible when I revert this PR

[suneox]

I think the offending PR can be #56759, since the issue is not reproducible when I revert this PR

@nkdengineer I agree that #56759 is the offending PR. It looks like the useProductTrainingContext hook causes a re-render for the MoneyRequestConfirmationList page.
The proposal from @nkdengineer to prevent updates to the onPress func by adjusting dependencies LGTM.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Current assignee @Gonals is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.