[HOLD for payment 2024-10-29] [$250] QBD - Category title link shows "undefined settings" when there is error with QBO connection

[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.37-0
Reproducible in staging?: Y
Reproducible in production?: Y
Issue was found when executing this PR: #48759
Email or phone of affected tester (no customers): applausetester+kh010901@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

Precondition:

• Workspace is connected to QBD on Old Dot and the set up is not completed to trigger the error.

1. Go to staging.new.expensify.com
2. Go to workspace settings.
3. Go to Categories.

Expected Result:

The link in the header will not show "undefined settings".

Actual Result:

The link in the header shows "undefined settings".
The same issue goes for Tags and Report fields.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6607411_1726643329782.20240918_150524.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021837252793117015940
• Upwork Job ID: 1837252793117015940
• Last Price Increase: 2024-09-20
• Automatic offers:
• brunovjk | Contributor | 104158165

Issue Owner

Current Issue Owner: @alexpensify

[melvin-bot]

Triggered auto assignment to @alexpensify (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]

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

[abzokhattab]

Edited by proposal-police: This proposal was edited at 2024-09-18 16:04:34 UTC.

Proposal

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

The category title link displays "undefined settings."

What is the root cause of that problem?

• The app displays undefined for the QBO when using desktop because the quickbooksDesktop option is not added to the CONNECTIONS names list or the routes list.
  

  App/src/CONST.ts

  Lines 2275 to 2287 in f2a4b87

  	// Here we will add other connections names when we add support for them
  	QBO: 'quickbooksOnline',
  	XERO: 'xero',
  	NETSUITE: 'netsuite',
  	SAGE_INTACCT: 'intacct',
  	},
  	ROUTE: {
  	QBO: 'quickbooks-online',
  	XERO: 'xero',
  	NETSUITE: 'netsuite',
  	SAGE_INTACCT: 'sage-intacct',
  	},
  	NAME_USER_FRIENDLY: {

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

• Add QuickBooks Desktop alongside other supported connections from this list:
  

  App/src/CONST.ts

  Lines 2287 to 2296 in f2a4b87

  	NAME_USER_FRIENDLY: {
  	netsuite: 'NetSuite',
  	quickbooksOnline: 'Quickbooks Online',
  	quickbooksDesktop: 'Quickbooks Desktop',
  	xero: 'Xero',
  	intacct: 'Sage Intacct',
  	financialForce: 'FinancialForce',
  	billCom: 'Bill.com',
  	zenefits: 'Zenefits',
  	},

• Update this condition to support QuickBooks Desktop

• updated other hardcoded connection objects across the project to include also the QuickBooks Desktop

What alternative solutions did you explore? (Optional)

Another solution would be to avoid displaying the categories below are imported from... message if the connection name is undefined. If the connection is undefined, it indicates that it's not a supported connection.This can be achieved by changing this condition:

App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

Line 283 in 4f695c6

{isConnectedToAccounting ? (

to check for currentConnectionName instead of checking the length of policy?.connections, as this list could contain unsupported connections.
This change should also be applied here, here and here

OR

Instead of displaying undefined for unsupported connections, we can still retrieve the connection name regardless of whether it is supported, as Tom mentioned here .
To achieve this, we have two options:

1. We can update the getCurrentConnectionName function so that it only checks CONST.POLICY.CONNECTIONS.NAME_USER_FRIENDLY, which contains both supported and unsupported connection names, and remove CONST.POLICY.CONNECTIONS.NAME:

function getCurrentConnectionName(policy?: Policy): string | undefined {
    if (!policy?.connections) {
        return undefined;
    }

    const connectionNames = CONST.POLICY.CONNECTIONS.NAME_USER_FRIENDLY;
 
    for (const key of Object.keys(connectionNames)) {
        if (policy.connections[key]) {
            return connectionNames[key];
        }
    }

    return undefined;
}

2. Or, we can create a new function that uses the same logic as above but with a different function name. This would help avoid potential issues elsewhere in the code. In this case, we need to update the function calls here , here , and here, here to use this new function.
   but i recommend to update the current function to keep everything consistent
3. finally in the accounting page we need to show a message in case any of the current connections are unsupported so that the user can check it, to do that we need to add the following component here

         {hasUnsupportedNDIntegration && !hasSyncError && (
                                <FormHelpMessage
                                    isError
                                    shouldShowRedDotIndicator
                                >
                                    <Text style={[{color: theme.textError}]}>
                                        {translate('workspace.accounting.unSupportedIntegration')}
                                        <TextLink
                                            onPress={() => {
                                                Link.openOldDotLink(CONST.OLDDOT_URLS.POLICY_CONNECTIONS_URL(policyID));
                                            }}
                                        >
                                            {translate('workspace.accounting.manageYourSettings')}
                                        </TextLink>
                                    </Text>
                                </FormHelpMessage>
                            )}

note: we might not need to warp it with FormHelpMessage as the user didn't make anything wrong ( the connection is not supported form our side), so it shouldn't be shown as error, we can just show the TextLink for without wrapping it.

[mkzie2]

Edited by proposal-police: This proposal was edited at 2024-09-24 09:51:46 UTC.

Proposal

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

• QBO - Category title link shows "undefined settings" when there is error with QBO connection

What is the root cause of that problem?

• We didn't handle the case there is a connection that is not supported in ND in:
  

  App/src/libs/PolicyUtils.ts

  Line 957 in 0c618ac

  return connectionKey ? CONST.POLICY.CONNECTIONS.NAME_USER_FRIENDLY[connectionKey] : undefined;

  
  hence the link is displayed as "undefined setting".

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

1. Display The categories below are imported from QuickBooks Desktop (or the name of the connected integration, even if it's not yet supported) to make the messaging consistent.

• First, change function:

App/src/libs/PolicyUtils.ts

Line 952 in 740484c

function getCurrentConnectionName(policy: Policy | undefined): string | undefined {

function getCurrentConnectionName(policy: Policy | undefined, includeUnsupportedConnection = false): string | undefined {
    const accountingIntegrations = Object.values(CONST.POLICY.CONNECTIONS.NAME);
    if (includeUnsupportedConnection) {
        accountingIntegrations.push(...Object.values(CONST.POLICY.UNSUPPORTED_CONNECTIONS.NAME));
    }
    const connectionKey = accountingIntegrations.find((integration) => !!policy?.connections?.[integration]);
    return connectionKey ? CONST.POLICY.CONNECTIONS.NAME_USER_FRIENDLY[connectionKey] : undefined;
}

By introducing a includeUnsupportedConnection param, we can make sure our change in this PR does not break other logics.

• Then, change logic:
  

  App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

  Line 73 in ace39e8

  const currentConnectionName = PolicyUtils.getCurrentConnectionName(policy);

    const currentConnectionName = PolicyUtils.getCurrentConnectionName(policy, true);

• Next, create hasSyncError in:
  

  App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

  Line 74 in ace39e8

    const [connectionSyncProgress] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${policy?.id}`);
    const isSyncInProgress = isConnectionInProgress(connectionSyncProgress, policy);
    const hasSyncError = PolicyUtils.hasSyncError(policy, isSyncInProgress);

The text "The categories below are imported from your Quickbooks Desktop settings" should not be displayed if the connection encountered an error. We will use hasSyncError to decide whether we should display that text or not.

• (Optional) Next, update:

App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

Line 283 in ace39e8

{isConnectedToAccounting ? (

            {!hasSyncError && isConnectedToAccounting ? (

• It will display something like:

If the connection is not supported and successful.

• And it will display something like:

if the connection is not supported and there is an error.

2. On the policy's accounting page, show the Go to Expensify Classic to manage your settings. text.

• We need to update the workspace accounting page to display the text "Go to Expensify Classic to manage your settings" in case "the connection is not supported and successful", since the case "the connection is not supported and there is an error" has already been implemented in another PR.

To do it, add another logic to handle that case to:

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

Line 495 in 1c39bd2

)}

                          {hasUnsupportedNDIntegration && !hasSyncError && (
                                <FormHelpMessage shouldShowRedDotIndicator={false}>
                                    <Text>
                                        <TextLink
                                            onPress={() => {
                                                // Go to Expensify Classic.
                                                Link.openOldDotLink(CONST.OLDDOT_URLS.POLICY_CONNECTIONS_URL(policyID));
                                            }}
                                        >
                                            {"Go to Expensify Classic to manage your settings"}
                                        </TextLink>
                                    </Text>
                                </FormHelpMessage>
                            )}

• Other minor changes can be implemented in PR stage, such as:

1. Remove hasSyncError conditions in:
   

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

   Line 462 in 1c39bd2

   {!(hasUnsupportedNDIntegration && hasSyncError) &&

2. Remove !(hasUnsupportedNDIntegration && hasSyncError) in:
   

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

   Line 380 in 1c39bd2

   if (isEmptyObject(policy?.connections) && !isSyncInProgress && !(hasUnsupportedNDIntegration && hasSyncError)) {

3. Update hasUnsupportedNDIntegration variable to:

    const hasUnsupportedNDIntegration = !isEmptyObject(policy?.connections) && PolicyUtils.hasUnsupportedIntegration(policy, accountingIntegrations);

• It will display something like:

in case "the connection is not supported and successful".

What alternative solutions did you explore? (Optional)

Details

• We should change logic:
  

  App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

  Line 283 in ace39e8

  {isConnectedToAccounting ? (

            {!hasSyncError && hasUnsupportedIntegration ? (
                <Text>
                    <Text style={[styles.textNormal, styles.colorMuted]}>{`The categories below have been imported from the connection configured in `}</Text>
                    <TextLink
                        style={[styles.textNormal, styles.link]}
                        onPress={() => {
                            // Go to Expensify Classic.
                            Link.openOldDotLink(CONST.OLDDOT_URLS.POLICY_CONNECTIONS_URL(policyId));
                        }}
                    >
                        {`Expensify Classic`}
                    </TextLink>
                    <Text style={[styles.textNormal, styles.colorMuted]}>.</Text>
                </Text>
            ) : !hasSyncError && isConnectedToAccounting ? (

in there hasUnsupportedIntegration is

const hasUnsupportedIntegration = isConnectedToAccounting && PolicyUtils.hasUnsupportedIntegration(policy, Object.values(CONST.POLICY.CONNECTIONS.NAME));

and hasSyncError is

    const [connectionSyncProgress] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${policy?.id}`);
    const isSyncInProgress = isConnectionInProgress(connectionSyncProgress, policy);
    const hasSyncError = PolicyUtils.hasSyncError(policy, isSyncInProgress);

• It will display something like:

if there is a successful connection which is not supported in ND and when user clicks on "Expensify Classic", it will open OD app like we did in:

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

Line 491 in f7a4aa1

Link.openOldDotLink(CONST.OLDDOT_URLS.POLICY_CONNECTIONS_URL(policyID));

• We should apply the same fix in tag, reportField, taxes page.

[melvin-bot]

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

[melvin-bot]

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