[$250] Add upgrade flow for enabling Report Fields via QBO or Xero on Collect workspaces

[garrettmknight]

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: N/A Reproducible in staging?: Y Reproducible in production?: Y 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: @JmillsExpensify Slack conversation (hyperlinked to channel name): https://expensify.slack.com/archives/C07NMDKEFMH/p1731347549992369

Action Performed:

1. Create new workspace in ND
2. Enable Accounting > Connect QBO
3. Navigate to Import > Classes > Select ‘Report Fields’

Note that this applies to all QBO + Xero flows that enable Report Fields:

QBO:

• Import > Classes > Report Fields
• Import > Customers > Report Fields
• Import > Locations > Report Fields

Xero:

• Import > Tracking Categories > Map Xero Cost Centres to > Report Fields
• Import > Tracking Categories > Map Xero Region to > Report Fields

Expected Result:

Since Report Fields are a Control feature, we should be showing the Report Fields upgrade RHN:

Actual Result:

User can select report fields and use a Control feature on the Collect plan.

Workaround:

Not really - we're just giving Control functionality away!

Platforms:

All

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021856775926322056954
• Upwork Job ID: 1856775926322056954
• Last Price Increase: 2024-11-13
• Automatic offers:
• mkzie2 | Contributor | 104902523

Issue Owner

Current Issue Owner: @eh2077

[melvin-bot[bot]]

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

[lschurr]

Should this be External so that we can have contributors work on this @garrettmknight?

[NJ-2020]

Proposal

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

Add upgrade flow for enabling Report Fields via QBO or Xero on Collect workspaces

What is the root cause of that problem?

We're not redirecting to upgrade page here if the user select report fields https://github.com/Expensify/App/blob/7256ad6eef046be3345e0b260252f6ec47fc4203/src/pages/workspace/accounting/qbo/import/QuickbooksCustomersDisplayedAsPage.tsx#L45-L53 And also we're not restrict the user when selecting report fields when the workspace is not in control plan

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

We should restrict the user when the user select report fields for QBO and Xero if the workspace plan is not control plan

if (row.value === CONST.INTEGRATION_ENTITY_MAP_TYPES.REPORT_FIELD && PolicyUtils.isControlPolicy(policy)) {
    Navigation.navigate(
        ROUTES.WORKSPACE_UPGRADE.getRoute(policyID, CONST.UPGRADE_FEATURE_INTRO_MAPPING.reportFields.alias, Navigation.getActiveRoute()),
    );
    return;
}

https://github.com/Expensify/App/blob/7256ad6eef046be3345e0b260252f6ec47fc4203/src/pages/workspace/accounting/qbo/import/QuickbooksImportPage.tsx#L31-L35

useEffect(() => {
    if (!shouldSwitchLocationsToReportFields(qboConfig)) {
        return;
    }
    if (!PolicyUtils.isControlPolicy(policy)) {
        Navigation.navigate(ROUTES.WORKSPACE_UPGRADE.getRoute(policyID, CONST.UPGRADE_FEATURE_INTRO_MAPPING.reportFields.alias, Navigation.getActiveRoute()));
        return;
    }

And also for the QBO import location page the toggle is active by default and the value is selected report field by default if shouldShowLineItemsRestriction is true https://github.com/Expensify/App/blob/7256ad6eef046be3345e0b260252f6ec47fc4203/src/pages/workspace/accounting/qbo/import/QuickbooksLocationsPage.tsx#L28 https://github.com/Expensify/App/blob/7256ad6eef046be3345e0b260252f6ec47fc4203/src/pages/workspace/accounting/qbo/import/QuickbooksLocationsPage.tsx#L28 I think to handle that we can disable the location toggle by default if shouldShowLineItemsRestriction is true and when the user enable the location toggle and the shouldShowLineItemsRestriction is true meaning the option is only report field then we will redirect the user to upgrade page

We can do the same approach for other pages And also I think this also require BE changes i think because after we connect to QBO the report fields are enabled automatically

Test branch

Result

https://github.com/user-attachments/assets/f6b72215-7d87-4974-88a3-5c6e52fa40e9

What alternative solutions did you explore? (Optional)

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[mkzie2]

Edited by proposal-police: This proposal was edited at 2024-11-14 06:24:49 UTC.

Proposal

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

User can select report fields and use a Control feature on the Collect plan.

What is the root cause of that problem?

We allow users to select the report field row without checking whether the policy is controlled.

https://github.com/Expensify/App/blob/04402e9f47a77f10b3c2c47fefe0931fbf62e4d4/src/pages/workspace/accounting/qbo/import/QuickbooksCustomersDisplayedAsPage.tsx#L47-L54

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

• Test branch: https://github.com/mkzie2/App/tree/mkzie2-issue/52397

The idea is to select the report field, navigate to the upgrade page if the workspace is the collect plan, and call the update quick/xero API after upgrading and go back to the previous page.

• For example for QuickbooksCustomersDisplayedAsPage, if the selected row is Report Fields and the workspace is collect --> navigate to the upgrade page --> after clicking on Upgrade --> Click on Got it button --> Call updateQuickbooksOnlineSyncCustomers --> Go back to QuickbooksCustomersPage

https://github.com/Expensify/App/blob/04402e9f47a77f10b3c2c47fefe0931fbf62e4d4/src/pages/workspace/accounting/qbo/import/QuickbooksCustomersDisplayedAsPage.tsx#L47-L54

Here is the detailed steps for this idea:

1. We need to define some new feature names that we use when navigating to the upgrade page

Import > Customers > Report Fields

• For example, for this, we can have report-fields-qbo-customers

QBO: Import > Classes > Report Fields Import > Customers > Report Fields Import > Locations > Report Fields Xero: Import > Tracking Categories > Map Xero Cost Centres to > Report Fields Import > Tracking Categories > Map Xero Region to > Report Fields

2. For each place noted here, if we select Report Field row and the workspace is the collect plan, we need to navigate to the upgrade page with the feature name defined above and backTo param is the previous page.

• Example for QuickbooksCustomersDisplayedAsPage

if (row.value === CONST.INTEGRATION_ENTITY_MAP_TYPES.REPORT_FIELD && !isControlPolicy(policy)) {
    Navigation.navigate(
        ROUTES.WORKSPACE_UPGRADE.getRoute(
            policyID,
            featureName, // featureName is the feature name that we defined above
            ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_CLASSES.getRoute(policyID),
        ),
    );
    return;
}

https://github.com/Expensify/App/blob/04402e9f47a77f10b3c2c47fefe0931fbf62e4d4/src/pages/workspace/accounting/qbo/import/QuickbooksCustomersDisplayedAsPage.tsx#L47-L54

3. In WorkspaceUpgradePage

• Firstly we need to get the feature based on the featureName param, we need to get the feature name alias first. If the featureName is one of the feature name that we defined in the step 1 the feature name alias will be report-fields otherwise it's the featureName param

https://github.com/Expensify/App/blob/04402e9f47a77f10b3c2c47fefe0931fbf62e4d4/src/pages/workspace/upgrade/WorkspaceUpgradePage.tsx#L28

• In the confirmed upgrade function, if the feature.id is Report Fields and the featureName param is one if the defined name above, we need to call the update API instead of enabling the feature API. For example, for report-fields-qbo-customers, we will call updateQuickbooksOnlineSyncCustomers function.

https://github.com/Expensify/App/blob/04402e9f47a77f10b3c2c47fefe0931fbf62e4d4/src/pages/workspace/upgrade/WorkspaceUpgradePage.tsx#L69

• In the goBack function here, we need to add a special case for Report Fields, if the featureName param is the defined name at point 1 we need to go back and navigate to backTo param

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

https://github.com/Expensify/App/blob/04402e9f47a77f10b3c2c47fefe0931fbf62e4d4/src/pages/workspace/upgrade/WorkspaceUpgradePage.tsx#L38

What alternative solutions did you explore? (Optional)

[eh2077]

Thank you for your proposals!

I think we should go with @mkzie2 's proposal because their solution is more thoughtful - Considering complete user flow, from Report Fields to Upgrade RHP and back to the new feature page.

🎀👀🎀 C+ reviewed

[melvin-bot[bot]]

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

[melvin-bot[bot]]

📣 @mkzie2 🎉 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 📖

[mkzie2]

@eh2077 The PR is ready.

[twisterdotcom]

Relabelling as Lauren is OOO now.

[melvin-bot[bot]]

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