[$250] Show the connected QBO file a workspace is connected to

[MitchExpensify]

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

---

Expensify/Expensify Issue URL: NA
Issue reported by: @MitchExpensify
Slack conversation (hyperlinked to channel name): https://expensify.slack.com/archives/C03U7DCU4/p1738102051348139

Action Performed:

1. Connect to QBO via the Accounting tab in a workspace

Expected Result:

See which QBO file the workspace is connected to in the Accounting tab

Actual Result:

The QBO file the workspace is connected to does not show

Workaround:

Verify via familiarity of the categories import or perhaps via the export options (e.g. Recognizing the credit card account listed as an export option

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

NewDot example:

OldDot example:

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021884537133550887822
• Upwork Job ID: 1884537133550887822
• Last Price Increase: 2025-01-29
• Automatic offers:
• truph01 | Contributor | 105913513

Issue Owner

Current Issue Owner: @parasharrajat

[melvin-bot]

Triggered auto assignment to @twisterdotcom (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[melvin-bot]

Triggered auto assignment to @dubielzyk-expensify (Design), see these Stack Overflow questions for more details.

[melvin-bot]

⚠️ It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time ⚠️

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @dubielzyk-expensify (NewFeature)

[MitchExpensify]

We'll need to decide how this looks before labelling external 😎

[twisterdotcom]

Let's mirror the Xero look as @shawnborton noted:

So:

[melvin-bot]

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

[melvin-bot]

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

[truph01]

Proposal

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

• The QBO file the workspace is connected to does not show

What is the root cause of that problem?

• New feature.

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

• In here:
  

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

  Line 252 in f7f5df4

  default:

we can add:

            case CONST.POLICY.CONNECTIONS.NAME.QBO:
                return !policy?.connections?.quickbooksOnline?.config?.companyName
                    ? {}
                    : {
                          description: 'Connected to',
                          iconRight: Expensicons.ArrowRight,
                          title: policy?.connections?.quickbooksOnline?.config?.companyName,
                          wrapperStyle: [styles.sectionMenuItemTopDescription],
                          titleStyle: styles.fontWeightNormal,
                          shouldShowRightIcon: tenants.length > 1,
                          shouldShowDescriptionOnTop: true,
  
                      };

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

• NA

What alternative solutions did you explore? (Optional)

[neonbhai]

Proposal

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

Show the connected QBO file a workspace is connected to

What is the root cause of that problem?

New Feature

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

We will add qbo connection for the array here
We will use policy?.connections?.quickbooksOnline?.config?.credentials?.companyName for the qbo organization name

We will use code similar to this:

case CONST.POLICY.CONNECTIONS.NAME.QBO:
    return !policy?.connections?.quickbooksOnline?.config?.credentials?.companyName
        ? {}
        : {
              description: translate('workspace.qbo.connectedTo'),
              iconRight: Expensicons.ArrowRight,
              title: policy?.connections?.quickbooksOnline?.config?.credentials?.companyName,
              wrapperStyle: [styles.sectionMenuItemTopDescription],
              titleStyle: styles.fontWeightNormal,
              shouldShowRightIcon: false,
              shouldShowDescriptionOnTop: true,
              pendingAction: policy?.connections?.quickbooksOnline?.config?.pendingFields?.companyName,
              brickRoadIndicator: policy?.connections?.quickbooksOnline?.config?.errorFields?.companyName ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined,
          };

No right icon always, no onPress. Since QBO only supports a single tenant organization, we will not need a qbo tenant selection page.

[github-actions]

⚠️ @neonbhai Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[parasharrajat]

@truph01's proposal looks good to me

I believe we can look at the data during implementation to determine which key to use.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[parasharrajat]

@neonbhai Did you check whether we set that errorfields. companyName pendingAction for QBO connection? Can you please link me that code?

[neonbhai]

@parasharrajat hi, frontend code does not set errorField for the companyName, so we don't have code for it. The errorFields?.companyName key might potentially be set by the backend.

looking at the code again, The companyName is part of the credentials object, which is a key on the config object here.

App/src/types/onyx/Policy.ts

Lines 222 to 237 in 2260557

	type QBOCredentials = {
	/**
	* The company ID that's connected from QBO.
	*/
	companyID: string;
	/**
	* The company name that's connected from QBO.
	*/
	companyName: string;
	/**
	* The current scope of QBO connection.
	*/
	scope: string;
	};

App/src/types/onyx/Policy.ts

Lines 477 to 478 in 2260557

	/** Credentials of the current QBO connection */
	credentials: QBOCredentials;

Since we do set errorFields on the qbo config object keys here. I'll suggest using errorFields?.credentials makes more sense, as this is key that might be set by the backend.

App/src/libs/actions/connections/QuickbooksOnline.ts

Lines 107 to 109 in 2260557

	errorFields: {
	[settingName]: null,
	},

[truph01]

@parasharrajat I don't think we need to include pendingAction and brickRoadIndicator in the new component we added. The 'Connected to ...' text is just additional information about the current connection, and we're already displaying the error here:

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

Line 353 in f7f5df4

errorText: synchronizationError,

There are two other reasons why showing the pending field and error for it is unnecessary:

1. CompanyName is an uneditable prop.
2. integrationSpecificMenuItem will be hidden if there is an error:

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

Line 383 in f7f5df4

...(isEmptyObject(integrationSpecificMenuItems) || shouldShowSynchronizationError || isEmptyObject(policy?.connections) ? [] : [integrationSpecificMenuItems]),

that means if there is an error, the "Connected to ..." text is also hidden.
cc @marcochavezf @dubielzyk-expensify

[neonbhai]

errorField for integrationSpecificMenuItem will be set by the BE, incase the error is not synchronization related. This is why the other items in the array have the props.

[parasharrajat]

Let me take a look at this. Thanks both.

[parasharrajat]

I see. Good catch @truph01.

[parasharrajat]

Updated my decision. Thanks for the clarification. I was thinking that we show offline pattern on on all menu items when connection is deleted while offline but it seems that is not the case.

[marcochavezf]

Thanks for the review @parasharrajat! Assigning @truph01 🚀

[melvin-bot]

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

[truph01]

@parasharrajat PR is ready.

[parasharrajat]

PR is waiting on Lint warnings...