[HOLD for payment 2023-07-12] [$1000] Update to USD popup is not dismissed dynamically if currency is updated (connect bank account page is updated dynamically on change in currency)

[kbecciv]

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

---

Action Performed:

1. Open the app and login with user A (device 1)
2. Open the app in another device or incognito and login with user A (device 2)
3. Open settings-> workspaces->any specific workspace (select same on both) on both the devices
4. If in settings, currency is USD, change to any other currency using either of the device
5. Click on bank account in device 1 to trigger 'Update to USD' popup
6. From device 2, change currency to USD and observe that popup is not dismissed in device 1
7. Open bank account in device 1, click connect manually, fill in step 1 details (eg details: routing: 210021002, acc no: 1234) and click continue
8. From device 2, again change currency to any other except USD and observe in device 1 that it dynamically updates the screen to display the message

Expected Result:

App should dynamically dismiss popup 'Update to USD' if currency is updated to USD like it updates connect bank account pages dynamically

Actual Result:

App does not dynamically dismiss 'Update to USD' if currency is updated to USD

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.30-5
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
Notes/Photos/Videos: Any additional supporting documentation

Does.not.dynamically.dismiss.popup.1.mp4

Recording.890.mp4

Expensify/Expensify Issue URL:
Issue reported by: @dhanashree-sawant
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1687426441178099

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a8436d652229e8bc
• Upwork Job ID: 1673425700658876416
• Last Price Increase: 2023-06-26

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[Pujan92]

Proposal

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

Update to USD popup is not dismissed dynamically if currency is updated (connect bank account page is updated dynamically on change in currency)

What is the root cause of that problem?

Currently, we don't watch the change for the policy.outputCurrency and not closing the CurrencyModal if the currency gets updated to USD in some other tab.

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

We can create a useEffect hook where we can add policy.outputCurrency in the dependency and inside that we can validate if the CurrencyModal is opened and the new currenct is the USD then just close the opened CurrencyModal.

useEffect(() => {
        if(!isCurrencyModalOpen || policy.outputCurrency !== CONST.CURRENCY.USD) {
            return;
        }
        setIsCurrencyModalOpen(false);
    }, [policy.outputCurrency, isCurrencyModalOpen])

[hungvu193]

Proposal

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

Update to USD popup is not dismissed dynamically if currency is updated (connect bank account page is updated dynamically on change in currency)

What is the root cause of that problem?

We didn't hide the Update Currency popup when the currency was already USD which caused the issue.

App/src/pages/workspace/WorkspaceInitialPage.js

Lines 258 to 266 in 1e308ca

	title={props.translate('workspace.bankAccount.workspaceCurrency')}
	isVisible={isCurrencyModalOpen}
	onConfirm={confirmCurrencyChangeAndHideModal}
	onCancel={() => setIsCurrencyModalOpen(false)}
	prompt={props.translate('workspace.bankAccount.updateCurrencyPrompt')}
	confirmText={props.translate('workspace.bankAccount.updateToUSD')}
	cancelText={props.translate('common.cancel')}
	danger
	/>

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

We can add more condition here in order to show or hide ConfirmCurrencyModal:

                    <ConfirmModal
                        title={props.translate('workspace.bankAccount.workspaceCurrency')}
                       // if currency is USD then modal is hide
                        isVisible={isCurrencyModalOpen && policy.outputCurrency !== CONST.CURRENCY.USD}
                        onConfirm={confirmCurrencyChangeAndHideModal}
                        onCancel={() => setIsCurrencyModalOpen(false)}
                        prompt={props.translate('workspace.bankAccount.updateCurrencyPrompt')}
                        confirmText={props.translate('workspace.bankAccount.updateToUSD')}
                        cancelText={props.translate('common.cancel')}
                        danger
                    />

What alternative solutions did you explore? (Optional)

Create an useEffect to hide the modal if it was already USD:

useEffect(() => {
        if(policy.outputCurrency !== CONST.CURRENCY.USD) {
            return;
        }
        setIsCurrencyModalOpen(false);
    }, [policy.outputCurrency])

[BhuvaneshPatil]

Proposal

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

Update to USD popup is not dismissed dynamically if currency is updated (connect bank account page is updated dynamically on change in currency)

What is the root cause of that problem?

We are not handling the case when props.policy.outputCurrency is updated in the WorkspaceInitialPage.

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

We shall add the useEffect hook, that will be triggered when props.policy changes.

• If the currency is USD and modal is open -> close the modal
• If the currency is not USD and modal is not open -> open the modal

What alternative solutions did you explore? (Optional)

none

[Christinadobrzyn]

I can reproduce - adding External label

[melvin-bot]

Triggered auto assignment to @amyevans (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[melvin-bot]

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