[HOLD for payment 2024-12-25] [Hold for #53360] [$250] Company cards toggle is disabled after upgrading workspace on mobile

[m-natarajan]

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:
Reproducible in staging?:
Reproducible in production?:
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
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: @joekaufmanexpensify
Slack conversation (hyperlinked to channel name): ts_external_expensify_expense

Action Performed:

Prerequisite: Workspace created and on collect policy

1. Enable Company cards in more feature
2. Click "upgrade" in the popup for Upgrade to control policy
3. Click Ok got it

Expected Result:

Company cards toggle button in enabled condition as user upgraded to control policy

Actual Result:

Company cards toggle button in disabled condition

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

2024-12-02_16-02-53.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021864369617192885056
• Upwork Job ID: 1864369617192885056
• Last Price Increase: 2024-12-04

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @sonialiap

[melvin-bot]

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

[dukenv0307]

I already worked on company card project so I would like to take it as C+

[melvin-bot]

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

[melvin-bot]

Current assignee @dukenv0307 is eligible for the External assigner, not assigning anyone new.

[ikevin127]

Not reproducible on iOS: Native, if this is reproducible only on iOS: HybridApp then it should be Internal because External contributors don't have access to the HybridApp repo.

[huult]

Proposal

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

Company cards toggle is disabled after upgrading workspace on mobile

What is the root cause of that problem?

This issue occurred in this pull request: #49937.

After migrating E/App to usePlatformStackNavigation, the navigation blur event stopped working when navigating back to the Workspace More feature.

App/src/pages/workspace/upgrade/WorkspaceUpgradePage.tsx

Line 159 in 6a9854f

const unsubscribeListener = navigation.addListener('blur', () => {

For this reason, confirmUpgrade is not called, which has caused the company card toggle state to remain disabled.

App/src/pages/workspace/upgrade/WorkspaceUpgradePage.tsx

Line 163 in 6a9854f

confirmUpgrade();

The screen is unmounted immediately when navigating away in case of native stack, so we won't get any events from react-navigation/react-navigation#11788 (comment)

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

To resolve this issue, we should use useFocusEffect to handle the confirmUpgrade logic instead of listening for the blur event. Some thing like that:

1. Remove this block
   

   App/src/pages/workspace/upgrade/WorkspaceUpgradePage.tsx

   Lines 158 to 167 in 6a9854f

   	useEffect(() => {
   	const unsubscribeListener = navigation.addListener('blur', () => {
   	if (!isUpgraded || !canPerformUpgrade) {
   	return;
   	}
   	confirmUpgrade();
   	});
   	return unsubscribeListener;
   	}, [isUpgraded, canPerformUpgrade, confirmUpgrade, navigation]);

2. Add useFocusEffect to handle the confirmUpgrade logic

//src/pages/workspace/upgrade/WorkspaceUpgradePage.tsx#L158
    useFocusEffect(
        useCallback(() => {
            return () => {
                if (!isUpgraded || !canPerformUpgrade) {
                    return;
                }
                confirmUpgrade();
            };
        }, [isUpgraded, canPerformUpgrade, confirmUpgrade]),
    );

POC

Screen.Recording.2024-12-06.at.01.32.51.mp4

### 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.

[dukenv0307]

Thank you @huult, but I don't think it's the best idea since we're using navigation.addListener in many places.

After migrating E/App to usePlatformStackNavigation, the navigation blur event stopped working when navigating back to the Workspace More feature.

It would be great if we can fix this issue