[HOLD for Payment 2024-09-19][$250] Workspace upgrade - View your subscription links in upgrade success RHP opens Workspaces page

[IuliiaHerets]

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: 9.0.22-5
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): applausetester+kh05081@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Create a Collect workspace.
3. Go to workspace settings > More features.
4. Enable Report fields.
5. Click Upgrade.
6. Click View your subscription on upgrade success RHP.

Expected Result:

App will open subscription page.

Actual Result:

App opens subcription page, then quickly opens Workspaces.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6576765_1724132976353.bandicam_2024-08-20_13-47-37-976.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01dbc6c489313735ea
• Upwork Job ID: 1827399589078827430
• Last Price Increase: 2024-08-31
• Automatic offers:
• rayane-djouah | Reviewer | 103783411
• dominictb | Contributor | 103783412

Issue Owner

Current Issue Owner: @dominictb

[melvin-bot]

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

[IuliiaHerets]

We think that this bug might be related to #wave-control

[IuliiaHerets]

@kevinksullivan FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[Krishna2323]

Proposal

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

Workspace upgrade - View your subscription links in upgrade success RHP opens Workspaces page

What is the root cause of that problem?

When the page is being removed the useEffect below is called and the app is navigate to a different route according to the logic below.

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

Lines 42 to 64 in 0e4f02e

	const confirmUpgrade = useCallback(() => {
	if (!feature) {
	return;
	}
	switch (feature.id) {
	case CONST.UPGRADE_FEATURE_INTRO_MAPPING.reportFields.id:
	Policy.enablePolicyReportFields(policyID, true, true);
	return Navigation.navigate(ROUTES.WORKSPACE_MORE_FEATURES.getRoute(policyID));
	default:
	return route.params.backTo ? Navigation.navigate(route.params.backTo) : Navigation.goBack();
	}
	}, [feature, policyID, route.params.backTo]);
	useEffect(() => {
	const unsubscribeListener = navigation.addListener('blur', () => {
	if (!isUpgraded) {
	return;
	}
	confirmUpgrade();
	});
	return unsubscribeListener;
	}, [isUpgraded, confirmUpgrade, navigation]);

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

I believe we should only call confirmUpgrade when user confirms it, so we should remove the useEffect and pass the confirmUpgrade to UpgradeConfirmation using the onConfirmUpgrade prop.

onConfirmUpgrade={() => {
    Navigation.dismissModal();
    confirmUpgrade();
}}

What alternative solutions did you explore? (Optional)



Instead of Navigation.navigate, we can use Navigation.closeAndNavigate(ROUTES.SETTINGS_SUBSCRIPTION).

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

Line 26 in 0e4f02e

onPress={() => Navigation.navigate(ROUTES.SETTINGS_SUBSCRIPTION)}

Result

[wildan-m]

Proposal

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

Access your subscription links after successful upgrade by opening the Workspaces page in RHP.

What is the root cause of that problem?

When blur, the confirm process executed with navigate.

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

Lines 56 to 60 in 0e4f02e

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

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

Add shouldNavigate param to confirmUpgrade function, and only navigate when clicked the button.
otherwise default to false

    const confirmUpgrade = useCallback((shouldNavigate : boolean = false) => {
        console.log('[wildebug] confirmUpgrade called with shouldNavigate:', shouldNavigate);
        
        if (!feature) {
            console.log('[wildebug] feature is not defined');
            return;
        }
    
        switch (feature.id) {
            case CONST.UPGRADE_FEATURE_INTRO_MAPPING.reportFields.id:
                Policy.enablePolicyReportFields(policyID, true, true);
                if (shouldNavigate) {
                    console.log('[wildebug] Navigating to:', ROUTES.WORKSPACE_MORE_FEATURES.getRoute(policyID));
                    return Navigation.navigate(ROUTES.WORKSPACE_MORE_FEATURES.getRoute(policyID));
                }
                break;
            default:
                if (shouldNavigate) {
                    if (route.params.backTo) {
                        console.log('[wildebug] Navigating to backTo route:', route.params.backTo);
                        return Navigation.navigate(route.params.backTo);
                    } else {
                        console.log('[wildebug] Navigating back');
                        return Navigation.goBack();
                    }
                }
                break;
        }
    }, [feature, policyID, route.params.backTo]);

...
            {isUpgraded && (
                <UpgradeConfirmation
                    onConfirmUpgrade={() => {
                        confirmUpgrade(true);
                        Navigation.dismissModal()}}
                    policyName={policy.name}
                />
            )}

What alternative solutions did you explore? (Optional)

N/A

[Krishna2323]

Proposal Updated

• Added alternative

[dominictb]

Proposal

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

App opens subcription page, then quickly opens Workspaces.

What is the root cause of that problem?

When users click view your subscription, the current page will be dismiss then we have the logic to navigate to WS

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

Line 49 in 0e4f02e

return Navigation.navigate(ROUTES.WORKSPACE_MORE_FEATURES.getRoute(policyID));

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

We should not trigger navigation in confirmUpgrade

    const confirmUpgrade = useCallback(() => {
        if (!feature) {
            return;
        }
        if(feature.id === CONST.UPGRADE_FEATURE_INTRO_MAPPING.reportFields.id){
            Policy.enablePolicyReportFields(policyID, true, true);
        }
    }, [feature, policyID]);

For backTo, we should handle it in onBackButtonPress and onConfirmUpgrade like we did in other places.

What alternative solutions did you explore? (Optional)

NA

[melvin-bot]

@kevinksullivan Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

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

[melvin-bot]

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

[dominictb]

@rayane-djouah What do you think about my proposal

[rayane-djouah]

Will review the proposals today

[melvin-bot]

@kevinksullivan, @rayane-djouah Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[rayane-djouah]

Sorry for the delay! Reviewing 👀

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[rayane-djouah]

Thank you, everyone, for your proposals.

I agree that the root cause is that when the "upgrade" page is closed, we navigate to the ROUTES.WORKSPACE_MORE_FEATURES route in the confirmUpgrade function, even if the user has clicked on the "view subscription" link.

---

Regarding the proposed solutions:

---

@Krishna2323,

I believe we should only call confirmUpgrade when user confirms it, so we should remove the useEffect and pass the confirmUpgrade to UpgradeConfirmation using the onConfirmUpgrade prop.

We need to call the confirmUpgrade function if the user does not click on the "Got it, thanks!" button and simply closes the RHP by clicking elsewhere on the screen.

Instead of Navigation.navigate, we can use Navigation.closeAndNavigate(ROUTES.SETTINGS_SUBSCRIPTION).

This will navigate to subscription page without calling confirmUpgrade function (report fields will not be enabled)

---

@wildan-m,

Add shouldNavigate param to confirmUpgrade function, and only navigate when clicked the button.
otherwise default to false

This approach will navigate to the subscription page without calling the confirmUpgrade function (and the report fields will not be enabled).

---

I agree with @dominictb that we should not trigger navigation within the confirmUpgrade function. Instead, we should only handle the backTo logic in the onBackButtonPress and onConfirmUpgrade functions.

---

@dominictb's proposal looks good to me.
🎀👀🎀 C+ reviewed

[mallenexpensify]

@rayane-djouah can you add 🎀 👀 🎀 C+ reviewed to assign another engineer, then ping them in a comment to ask for 👀 on the PR? Thx. (also.. we need to reassign Bondy too after the new engineer's been added)

[rayane-djouah]

🎀 👀 🎀

[melvin-bot]

Triggered auto assignment to @thienlnam, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[rayane-djouah]

We've fixed this ^ in a follow-up PR. Slack thread link, PR: #49076

[kevinksullivan]

Waiting on the regression PR to be deployed for 7 days. Looping in another BZ for payment as I'm going OOO

[melvin-bot]

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

[rayane-djouah]

Note

The production deploy automation failed: This should be on [HOLD for Payment 2024-09-19] according to #49025 production deploy checklist, confirmed in #48673 (comment)

[johncschuster]

I'll issue payment as soon as the regression window has passed 👍

[johncschuster]

Payment has been issued! 🎉

@rayane-djouah / @dominictb can you please provide a regression test step list if one is required?

[mallenexpensify]

@johncschuster can you plz post payment summaries in the format in this SO? For auditing purposes we need to know who was paid, how much, and via Upwork/NewDot. @rayane-djouah is the C+ who needs to provide the regression test steps. Thx

[johncschuster]

Sure thing!

[johncschuster]

Payment Summary:

Contributor: @dominictb paid $250 via Upwork
Contributor+: @rayane-djouah paid $250 via Upwork

Upwork job here! Please apply This has been paid

[melvin-bot]

@bondydaa, @johncschuster, @kevinksullivan, @thienlnam, @rayane-djouah, @dominictb Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[rayane-djouah]

Checklist

• The PR that introduced the bug has been identified. Link to the PR: fix: redirect to proper place after upgrade #46617
• The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: https://github.com/Expensify/App/pull/46617/files#r1769010005
• A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: N/A
• Determine if we should create a regression test for this bug. Yes
• If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

Regression Test Proposal

1. Create a Collect workspace
2. Go to workspace settings > More features
3. Enable Report fields
4. Click Upgrade
5. Click View your subscription on upgrade success RHP
6. Verify that the app navigates to the Subscription page

Do we agree 👍 or 👎

[johncschuster]

Thanks, @rayane-djouah! I've created a QA issue and have paid this one out. Closing!