[$250] Company cards - QBO: user stays on Export tab when click back arrow

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.1.0-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/cases/view/3809602
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause - Internal Team

Action Performed:

Precondition: workspace with added Company cards and QBO connected. Some card is assigned to the user

1. Go to ws > Company cards
2. Click on assigned card
3. Click on 'QuickBooks Online credit card export' row
4. Click the hyperlinked 'export option' in the subheader of the list
5. Click 'Export company card expenses as' row
6. Select Credit card or Debit card
7. Click < twice to land back on the card-level export page

Expected Result:

The title of the page is now 'QuickBooks Online debit (or credit) card export'

Actual Result:

User is on the Export tab. He need to click < again to navigate to 'QuickBooks Online debit (or credit) card export' tab

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

Bug6746761_1739887424002.bandicam_2025-02-18_15-52-57-449.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021892050947866480756
• Upwork Job ID: 1892050947866480756
• Last Price Increase: 2025-02-19
• Automatic offers:
• FitseTLT | Contributor | 106191606

Issue Owner

Current Issue Owner: @

[melvin-bot]

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

[FitseTLT]

🚨 Edited by proposal-police: This proposal was edited at 2025-02-18 15:55:08 UTC.

Proposal

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

Company cards - QBO: user stays on Export tab when click back arrow

What is the root cause of that problem?

This is because we are navigating back to POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_EXPORT here

App/src/pages/workspace/accounting/qbo/export/QuickbooksCompanyCardExpenseAccountPage.tsx

Line 58 in 84885ab

onBackButtonPress={() => Navigation.goBack(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_EXPORT.getRoute(policyID))}

but the QBO route below it has a backTo param so it identifies it as a new route so this will add two duplicate qbo export screens in the stack.

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

We have two options
Option A: instead of navigating back to POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_EXPORT we can use the normal goBack without fallbackRoute. So remove this to fallback to the default goBack

Option B: Use export page route as a backTo
To handle this case we need to do a couple of things.
First add backTo param for POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_COMPANY_CARD_EXPENSE_ACCOUNT

App/src/ROUTES.ts

Lines 835 to 838 in 84885ab

	POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_COMPANY_CARD_EXPENSE_ACCOUNT: {
	route: 'settings/workspaces/:policyID/accounting/quickbooks-online/export/company-card-expense-account',
	getRoute: (policyID: string) => `settings/workspaces/${policyID}/accounting/quickbooks-online/export/company-card-expense-account` as const,
	},

getRoute: (policyID: string, backTo?: string) =>
            getUrlWithBackToParam(`settings/workspaces/${policyID}/accounting/quickbooks-online/export/company-card-expense-account` as const, backTo),
    },

Navigate with the active route with as backTo param here

App/src/pages/workspace/accounting/qbo/export/QuickbooksExportConfigurationPage.tsx

Line 64 in 84885ab

onPress: !policyID ? undefined : () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_COMPANY_CARD_EXPENSE_ACCOUNT.getRoute(policyID)),

            onPress: !policyID
                ? undefined
                : () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_COMPANY_CARD_EXPENSE_ACCOUNT.getRoute(policyID, Navigation.getActiveRoute())),

Then we will need to goBack to the backTo param here

App/src/pages/workspace/accounting/qbo/export/QuickbooksCompanyCardExpenseAccountPage.tsx

Line 58 in 84885ab

onBackButtonPress={() => Navigation.goBack(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_EXPORT.getRoute(policyID))}

onBackButtonPress={() => {
                Navigation.goBack(route.params.backTo);
            }}

Note
Whichever way we choose this problem BTW occurs for the other menu items in the page here we will need to apply similar fixes for all those cases I only added example for 'Export company card expenses as' row above. And additionally similar fixes should be applied for other accounting integration export pages too.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N / A navigation bug

What alternative solutions did you explore? (Optional)

[mallenexpensify]

Gonna take me a day or so to get to so adding Needs Reproduction

[MelvinBot]

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

[hungvu193]

I can reproduce based on the OP steps

Screen.Recording.2025-02-19.at.09.07.06.mov

1. Go to ws > Company cards
2. Click on assigned card
3. Click on 'QuickBooks Online credit card export' row
4. Click the hyperlinked 'export option' in the subheader of the list
5. Click 'Export company card expenses as' row
6. Select Credit card or Debit card
7. Click < twice to land back on the card-level export page

[hungvu193]

Please assign me, per: https://expensify.slack.com/archives/C02NK2DQWUX/p1739929083385659

[melvin-bot]

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

[melvin-bot]

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

[mallenexpensify]

Thanks @hungvu193 , please review @FitseTLT 's proposal above. thx

[hungvu193]

@FitseTLT 's proposal here looks good to me!

🎀 👀 🎀 C+ reviewed

[hungvu193]

🎀 👀 🎀

[melvin-bot]

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

[arosiclair]

Proposal LGTM. Let's use the simpler option 🅰 to fix this @FitseTLT

[melvin-bot]

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

[FitseTLT]

Proposal LGTM. Let's use the simpler option 🅰 to fix this @FitseTLT

But if we use Option A @arosiclair it will not navigate back to export page after page refresh. It could also be considered as a regression compared to the current behavior. Are we ok with that?

[hungvu193]

I agree with @FitseTLT. I remember we also had kind of bug after refreshing. I think we probably still need the backTo param

[arosiclair]

Alright fair enough - let's go with option B 👍