[LOW] [Splits] [$1000] Mweb-IOU-Previously selected currency is shown for an second in send money confirmation page.

[kavimuru]

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: 1.4.31-1
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause internal team
Slack conversation:

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Tab fab---- send money
3. Enter an amount
4. Tap next
5. Select a contact
6. Tap on amount section
7. Change the currency
8. Tap save
9. Perform step 7 and step 8 repeatedly and note currency display in send money confirmation page

This issue also happens in the request flow:

1. Open the app
2. Go to FAB > Request money
3. Change currency to UAH
4. Close the app and re-open
5. Go to FAB > Request money
6. BUG: UAH is briefly shown before showing user's local currency

Expected Result:

Previously selected currency must not be shown for an second in send money confirmation page.

Actual Result:

Previously selected currency is shown for an second in send money confirmation page.

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6354245_1706160961488.previous.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a75f53fa7369a183
• Upwork Job ID: 1750501967791529984
• Last Price Increase: 2024-03-07

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @MitchExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

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

[JordanLevy19]

Proposal

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

When clicking on the currency icon to change the currency, and after selecting the new currency, there's a flickering or delay with the currency symbol switching between the old currency and the newly selected currency within a 2-second interval. This seems to suggest that there is an issue with the state management of the currency selection.

What is the root cause of that problem?

The issue may stem from a combination of asynchronous state updates and the React rendering cycle, which can momentarily display outdated content

Delayed Currency Update:

In NewRequestAmountPage.js, the currency is determined and then passed to MoneyRequestAmountForm. If there is any delay or asynchronous operation in updating this prop, the child component could render with outdated currency information initially and then update once the new currency prop is received.

const currency = CurrencyUtils.isValidCurrencyCode(currentCurrency) ? currentCurrency : iou.currency;

State Management in Form:

The MoneyRequestAmountForm component has a complex state management mechanism that includes multiple useState and useEffect hooks, which could lead to a lag when updating the currency symbol.

useEffect(() => {
    if (!currency || !_.isNumber(amount)) {
        return;
    }
    initializeAmount(amount);
}, [selectedTab, amount]);

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

Optimize State Updates in MoneyRequestAmountForm:

Ensure that the state updates dependent on the currency prop are synchronized. Use the useReducer hook to manage the state more predictably, which could help prevent the flickering caused by multiple useState and useEffect updates.

Stabilize Currency Symbol Updates:

Modify the TextInputWithCurrencySymbol component to handle currency changes more gracefully. This could involve implementing a loading state that shows a spinner or a placeholder until the currency symbol is confirmed to be updated to prevent showing the wrong symbol even momentarily.

Review Navigation Flow:

In NewRequestAmountPage, ensure that navigation and state updates related to currency selection are completed before rendering the MoneyRequestAmountForm.

[MitchExpensify]

I don't think this fits into any wave or VIP right now

[situchan]

@MitchExpensify I think this should be fixed as bad user experience. This also happens at the start of money request flow.
Please check this video: (clearly noticeable on android)

Screen.Recording.2024-01-28.at.7.06.10.PM.mov