[$250] QBO UK - Menu in "Export out-of-pocket expenses as" is blank before the connection syncs

[lanitochka17]

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.6-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4706870
Issue reported by: Applause - Internal Team

Action Performed:

Precondition
QBO UK connection is established in the workspace
The connection is not synced yet

1. Navigate to workspace settings > Accounting
2. Click on Export >Export out-of-pocket expenses as
3. Observe the second menu in the setting

Expected Result:

The item field in the setting is not empty and has the title of "Accounts payable"

Actual Result:

The second item which is "Accounts payable" only appears when syncing is complete and is blank before syncing

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6538186_1720633386267.2024-07-10_20_07_43.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~010b2c93b291a15c58
• Upwork Job ID: 1811856308645344493
• Last Price Increase: 2024-08-08

Issue Owner

Current Issue Owner: @abekkala

[melvin-bot]

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

[lanitochka17]

@abekkala 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

[lanitochka17]

We think that this bug might be related to #wave-collect - Release 1

[Krishna2323]

Proposal

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

QBO UK - Menu in "Export out-of-pocket expenses as" is blank before the connection syncs

What is the root cause of that problem?

No fallback value is provided to title prop.

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

Line 76 in 98932a2

title={reimbursableExpensesAccount?.name}

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

Add a fallback value or hide the MenuItem with OfflineWithFeedback when reimbursableExpensesAccount?.name is not present.

What alternative solutions did you explore? (Optional)

[cretadn22]

Proposal

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

Menu in "Export out-of-pocket expenses as" is blank before the connection syncs

What is the root cause of that problem?

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

Lines 76 to 77 in 3e164ed

	title={reimbursableExpensesAccount?.name}
	description={accountDescription}

Normally, when the title field is blank, the description field is shown instead (similar to "export as" in the menuItem above).

However, in this scenario, both the title and description fields are empty.

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

Even if the title field is empty, the description field should not be left blank

we should include a default description like "account" or "bank account" if reimbursableExpensesExportDestination is undefined

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

Lines 43 to 45 in 3e164ed

	default:
	break;
	}

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

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

[tienifr]

Proposal

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

• The second item which is "Accounts payable" only appears when syncing is complete and is blank before syncing

What is the root cause of that problem?

• This MenuItemWithTopDescription:
  

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

  Lines 74 to 83 in 3e164ed

  	<OfflineWithFeedback pendingAction={pendingFields?.reimbursableExpensesAccount}>
  	<MenuItemWithTopDescription
  	title={reimbursableExpensesAccount?.name}
  	description={accountDescription}
  	onPress={() => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_EXPORT_OUT_OF_POCKET_EXPENSES_ACCOUNT_SELECT.getRoute(policyID))}
  	brickRoadIndicator={errorFields?.exportAccount ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
  	shouldShowRightIcon
  	errorText={errorFields?.exportAccount ? translate('common.genericErrorMessage') : undefined}
  	/>
  	</OfflineWithFeedback>

  
  depend on the reimbursableExpensesExportDestination data:
  

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

  Line 30 in 3e164ed

  switch (reimbursableExpensesExportDestination) {

• By default, the reimbursableExpensesExportDestination is CONST.QUICKBOOKS_REIMBURSABLE_ACCOUNT_TYPE.VENDOR_BILL. But maybe BE does not set it when connecting QBO. This issue is reported in here.

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

• We should hide this if reimbursableExpensesExportDestination is undefined.

• Then we should display the not found page in settings/workspaces/${policyID}/accounting/quickbooks-online/export/out-of-pocket-expense/account-select if reimbursableExpensesExportDestination is undefined:

<FullPageNotFoundView shouldShow={!reimbursableExpensesExportDestination}><AccountSelectPage /></FullPageNotFoundView>

What alternative solutions did you explore? (Optional)

[tienifr]

Proposal updated

[melvin-bot]

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

[sobitneupane]

I could not reproduce the issue. Is there any specific steps to reproduce the issue?

[tienifr]

@sobitneupane Can you share a video from your side?

[sobitneupane]

I just added QBO account and tested the issue.

The connection is not synced yet

How can I achieve the connection is not synced yet state?

[tienifr]

• @sobitneupane Can you try with new Expensify account? Here is from my side:

Screen.Recording.2024-07-17.at.16.58.13.mov

[abekkala]

@sobitneupane can you address the above from @tienifr

[trjExpensify]

Issue is reproducible during KI retests, when you go to "Export >Export out-of-pocket expenses as" before QBO sync

Ah, so yeah.. it hasn't finished the sync yet to display the data. I think we have a solution with that for other integrations to not show the import, export, card rec, advanced rows until the connection has been established or something? CC: @Expensify/design

[dannymcclain]

Yeah I'm pretty sure we decided to wait to show all that stuff until the connection has finished syncing for the first time.

Example from NetSuite design doc:

[trjExpensify]

Okay cool, so I think we could use this issue to implement that? I suspect that's frontend, but maybe @aldo-expensify can confirm.

[aldo-expensify]

I'm not sure of what type of solution was implemented to have that, do we know who worked on that?

[trjExpensify]

@hungvu193 @rushatgabhane @mananjadhav might know!

[hungvu193]

I didn't implement that logic but I think we're using the same logic for all 4 connections so far:

App/src/pages/workspace/accounting/PolicyAccountingPage.tsx

Line 439 in 334c270

...(isEmptyObject(policy?.connections) || shouldHideConfigurationOptions ? [] : configurationOptions),

[trjExpensify]

Ah, that's helpful. Following the blame it was @mananjadhav, I believe.

[trjExpensify]

So @aldo-expensify @hungvu193 @mananjadhav can this be external then?

[aldo-expensify]

I'm a bit confused because the code @hungvu193 pointed out is supposed to apply to all types of connections, so that can't be what fixed the problem for other connections, or can it be?

[trjExpensify]

Good question, I don't know. @mananjadhav would be great for you to chime in here, please. Thanks!

[abekkala]

@mananjadhav can you review this please and provide your input?

[mananjadhav]

Sorry this didn't show up in K2. I'll check this in a while.

[mananjadhav]

Just went through the whole conversation. So when we did start the development we weren't hiding any menu options. With this PR, I implemented hiding the extra menu items (ie Netsuite Subsidiary and Xero Organization names). But IIRC when the initial sync isn't finished we don't show up and it worked as expected here.

Now there are two questions I have here:

1. When we say before sync here, did we check isEmptyObject(policy?.connections) is true?
2. @tienifr's video here, the QBO connection shows successful with the last sync timestamp. So it does seem to be BE sync issue?

[trjExpensify]

Did @yuwenmemon's PR fix this, or is there more to do? (A.K.A - why is this still open? 😄).

[yuwenmemon]

Yeah I think we can close

[sobitneupane]

@trjExpensify Payment is due for C+ reivew.

[trjExpensify]

Oh, sorry @sobitneupane. I missed that was an /App PR.

Payment summary as follows:

• $250 to @sobitneupane for the PR review

Go ahead and request on NewDot!

[garrettmknight]

$250 approved for @sobitneupane