[$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:

• [x] Android: Native
• [x] Android: mWeb Chrome
• [x] iOS: Native
• [x] iOS: mWeb Safari
• [x] MacOS: Chrome / Safari
• [x] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/85aaf8ff-875c-4ab6-bd33-5e44f2bf8590

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[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. https://github.com/Expensify/App/blob/0e4f02e116b03dcab3cb7a69e1c3a6e95b1d8443/src/pages/workspace/upgrade/WorkspaceUpgradePage.tsx#L42-L64

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

https://github.com/Expensify/App/blob/0e4f02e116b03dcab3cb7a69e1c3a6e95b1d8443/src/pages/workspace/upgrade/UpgradeConfirmation.tsx#L26

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.

https://github.com/Expensify/App/blob/0e4f02e116b03dcab3cb7a69e1c3a6e95b1d8443/src/pages/workspace/upgrade/WorkspaceUpgradePage.tsx#L56-L60

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

https://github.com/Expensify/App/blob/0e4f02e116b03dcab3cb7a69e1c3a6e95b1d8443/src/pages/workspace/upgrade/WorkspaceUpgradePage.tsx#L49

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[bot]]

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

[melvin-bot[bot]]

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

[melvin-bot[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[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[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. :ribbon::eyes::ribbon: C+ reviewed

[melvin-bot[bot]]

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

[melvin-bot[bot]]

📣 @rayane-djouah 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job

[melvin-bot[bot]]

📣 @dominictb 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot[bot]]

@bondydaa @kevinksullivan @rayane-djouah @dominictb this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot[bot]]

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

[bondydaa]

i'll be OOO next week so if/when the pr is up and i'm not back we can always re-assign

[dominictb]

@kevinksullivan Bondy was OOO and the PR needs reassignment to proceed.

[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[bot]]

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

[melvin-bot[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.