[Due for payment 2025-02-18] [$250] Sage Intacct - Connect button becomes unresponsive in Sage Intacct after exiting setup

[vincdargento]

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.0.89-2
Reproducible in staging?: Yes
Reproducible in production?: Yes
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: N/A
Email or phone of affected tester (no customers): htad26+ri@gmail.com
Issue reported by: Applause Internal Team
Device used: iPhone 13/iOS 18.2.1, Tecno Spark/Android 11
App Component: Other

Action Performed:

Prerequisite

• Have an account with one workspace connected to Sage Intacct

1. Log into the account on the iOS/Android app
2. Create a new workspace other than the one that is already connected to Sage Intacct
3. Enable Accounting
4. Accounting > Sage Intacct > Connect > Upgrade > Next
5. When you reach the credentials page, exit the setup with back button without entering credentials
6. Tap on "Connect" button next to Sage Intacct

Expected Result:

App proceeds to Sage Intacct connection setup

Actual Result:

"Connect" button becomes unresponsive and user is unable to procced to Sage Intacct connection setup

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

bug.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021883892443394659534
• Upwork Job ID: 1883892443394659534
• Last Price Increase: 2025-01-27
• Automatic offers:
• shubham1206agra | Contributor | 105925201

Issue Owner

Current Issue Owner: @trjExpensify

[melvin-bot]

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

[shubham1206agra]

Proposal

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

Sage Intacct - Connect button becomes unresponsive in Sage Intacct after exiting setup

What is the root cause of that problem?

In step 6, when we click on connect, we try to render the popover menu component defined here

App/src/components/ConnectToSageIntacctFlow/index.tsx

Line 76 in 264728f

<PopoverMenu

as hasPoliciesConnectedToSageIntacct is true due to existing connection present.

But in https://github.com/Expensify/App/blob/264728f1b086117b9cabfd4728ff30b8afdfc520/src/components/PopoverWithMeasuredContent.tsx, we have 2 setState conditions having race condition

App/src/components/PopoverWithMeasuredContent.tsx

Line 82 in 264728f

setIsContentMeasured(popoverDimensions.width > 0 && popoverDimensions.height > 0);

and

App/src/components/PopoverWithMeasuredContent.tsx

Line 94 in 264728f

setIsContentMeasured(true);

which caused

App/src/components/PopoverWithMeasuredContent.tsx

Line 147 in 264728f

return isContentMeasured ? (

to be false, which fails to render the component correctly

Which causes the bug

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

Let's solve the race condition entirely

Transform this block of code

App/src/components/PopoverWithMeasuredContent.tsx

Lines 77 to 86 in 264728f

	if (!isPopoverVisible && isVisible) {
	if (shouldEnableNewFocusManagement) {
	ComposerFocusManager.saveFocusState(modalId);
	}
	// When Popover is shown recalculate
	setIsContentMeasured(popoverDimensions.width > 0 && popoverDimensions.height > 0);
	setIsPopoverVisible(true);
	} else if (isPopoverVisible && !isVisible) {
	setIsPopoverVisible(false);
	}

to

if (!prevIsVisible && isVisible) {
        if (shouldEnableNewFocusManagement) {
            ComposerFocusManager.saveFocusState(modalId);
        }
    }

Here prevIsVisible comes from const prevIsVisible = usePrevious(isVisible);. And we get rid of isPopoverVisible state since it is no longer needed.

Note

Optional: We can change

App/src/components/PopoverWithMeasuredContent.tsx

Line 150 in 264728f

popoverDimensions={popoverDimensions}

to popoverDimensions={{height: popoverHeight, width: popoverWidth}}

Result

Screen.Recording.2025-01-24.at.10.36.52.PM.mov

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

NA since change is related to UI component

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

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