[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

[saifelance]

@dukenv0307
You're absolutely right that if you're already using navigation.addListener in multiple places, switching to useFocusEffect might not be the best solution. Given that, it would be more appropriate to fix the root cause of why the navigation blur event doesn't work properly after migrating to usePlatformStackNavigation.

Issue:

The navigation.addListener('blur') event isn't being triggered correctly after the migration to usePlatformStackNavigation. The root cause is likely due to screen unmounting immediately with native stack navigation, preventing the blur event from being captured.

Solution:

Instead of replacing navigation.addListener with useFocusEffect, we can ensure that the navigation events are properly captured by correctly managing the screen lifecycle with the native stack. Specifically, we can use the navigation.addListener('beforeRemove') event which gets triggered before the screen is removed from the navigation stack.

Key to Fix:

1. Keep navigation.addListener('blur'): We’ll fix the issue by keeping navigation.addListener but ensuring that the event is triggered at the correct time.
2. Switch to beforeRemove event: Use beforeRemove to capture navigation changes before the screen is unmounted.

Here's an updated version of the useEffect with beforeRemove:

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

    return unsubscribeListener;
}, [isUpgraded, canPerformUpgrade, confirmUpgrade, navigation]);

[huult]

@dukenv0307 Firstly, I would like to say thank you for reviewing my proposal

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

Since this issue only happens on the Native Stack, it means it will occur on both native Android and iOS. I believe the issue might also happen elsewhere. Therefore, I suggest creating a custom hook,ex: useOnBlur, with two files: index.ts and index.native.ts, to handle native and web platforms. This approach will make it easier to apply the solution elsewhere.

It would be great if we can fix this issue

As mentioned in this comment react-navigation/react-navigation#11788 (comment), they confirmed that addListener with blur does not work on the Native Stack, so we can't fix it. They suggested using useFocusEffect to handle this issue. Therefore, I think we should use useFocusEffect for native platforms and blur for the web.

[CyberAndrii]

Dupe of #53360...

[sonialiap]

Putting this on hold for #53360

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.76-12 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Replace navigation blur listeners with useFocusEffect #53735

If no regressions arise, payment will be issued on 2024-12-25. 🎊

For reference, here are some details about the assignees on this issue:

• @dukenv0307 requires payment through NewDot Manual Requests

[melvin-bot]

@dukenv0307 @sonialiap @dukenv0307 The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]