[Due for payment 2025-09-04] [$250] Add accounting connection logo in "Categories" when connected to integration

[miljakljajic]

Previously in Classic, when a direct integration was connected and the Categories list was being imported from that integration, we updated the list with the logo of the accounting system to signal to customers that the connection was live and that category lists would be managed outside of Expensify:

We've agreed to update New Expensify with a single logo for the connected accounting system of the workspace, this time located at the top next to the message we display to let customers know the category list is managed in the accounting system:

The categories below are imported in from [accounting system name] settings

The logo should appear before the name of the accounting system, like so:

The categories below are imported in from [logo] [accounting system name] settings

Example mock up:

Expensify - Internal reference discussion

This will need to be updated for each of our direct connections:

• QBO
• QBD
• Sage Intacct
• NetSuite
• Certinia

cc @Expensify/design

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021952698393872136328
• Upwork Job ID: 1952698393872136328
• Last Price Increase: 2025-08-05

Issue Owner

Current Issue Owner: @allroundexperts

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[aadil42]

@miljakljajic, none of the links in the issue description are working.

[Krishna2323]

🚨 Edited by proposal-police: This proposal was edited at 2025-08-05 11:57:01 UTC.

Proposal

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

Add accounting connection logo in "Categories" when connected to integration

What is the root cause of that problem?

• New feat

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

• We should update all the places where we are using importedFromAccountingSoftware and add a icon before the category name.

• We can use getIntegrationIcon(currentConnectionName) to get the icon.

• Minor style changes can be don in the PR phase.
  

  App/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx

  Lines 123 to 137 in 9eb58b1

  	const getHeaderText = () =>
  	!hasSyncError && isConnectionVerified ? (
  	<Text style={[styles.mr5, styles.mt1]}>
  	<Text style={[styles.textNormal, styles.colorMuted]}>{`${translate('workspace.reportFields.importedFromAccountingSoftware')} `}</Text>
  	<TextLink
  	style={[styles.textNormal, styles.link]}
  	href={`${environmentURL}/${ROUTES.POLICY_ACCOUNTING.getRoute(policyID)}`}
  	>
  	{`${currentConnectionName} ${translate('workspace.accounting.settings')}`}
  	</TextLink>
  	<Text style={[styles.textNormal, styles.colorMuted]}>.</Text>
  	</Text>
  	) : (
  	<Text style={[styles.textNormal, styles.colorMuted, styles.mr5, styles.mt1]}>{translate('workspace.reportFields.subtitle')}</Text>
  	);

• Pseudocode

    const icon = getIntegrationIcon('intacct');
    const StyleUtils = useStyleUtils();
    const headerContent = (
        <>
            <View style={[styles.ph5, styles.pb5, styles.pt3, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>
                {true ? (
                    <Text style={[styles.alignItemsCenter, styles.dInlineFlex]}>
                        <Text style={[styles.textNormal, styles.colorMuted]}>{`${translate('workspace.categories.importedFromAccountingSoftware')} `}</Text>
                        <TextLink
                            style={[styles.textNormal, styles.link, styles.flexRow, styles.alignItemsCenter, styles.dInlineFlex, styles.gap1]}
                            href={`${environmentURL}/${ROUTES.POLICY_ACCOUNTING.getRoute(policyId)}`}
                        >
                            <Icon
                                src={icon!}
                                height={18}
                                width={18}
                                // fill={imageError ? (iconColors?.fill ?? theme.offline) : (iconColors?.fill ?? fill)}
                                additionalStyles={[StyleUtils.getAvatarBorderStyle('smaller', '')]}
                            />
                            {`${currentConnectionName} ${translate('workspace.accounting.settings')}`}
                        </TextLink>
                        <Text style={[styles.textNormal, styles.colorMuted]}>.</Text>
                    </Text>
                ) : (
                    <Text style={[styles.textNormal, styles.colorMuted]}>{translate('workspace.categories.subtitle')}</Text>
                )}
            </View>

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

N/A

What alternative solutions did you explore? (Optional)

Result

Monosnap.screencast.2025-08-05.17-48-00.mp4

[aadil42]

[mkzie2]

🚨 Edited by proposal-police: This proposal was edited at 2025-08-05 12:35:03 UTC.

Proposal

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

Add accounting connection logo in "Categories" when connected to integration

What is the root cause of that problem?

New feature

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

Based on the connectedIntegration, get the integration icon and add this before the accounting setting link here

• To get the icon, we can get this from getIntegrationIcon with connectedIntegration, using the currentConnectionName isn't correct

const connectedIntegrationIcon = getIntegrationIcon(connectedIntegration);
<Icon 
    src={connectedIntegrationIcon}
    small
    additionalStyles={[StyleUtils.getAvatarBorderStyle(CONST.AVATAR_SIZE.SMALL, ''), styles.mr1]}
/>

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

Line 421 in 9eb58b1

<TextLink

• Add the styles.alignItemsCenter and styles.dInlineFlex to the wrap text here to make the icon centered

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

Line 419 in 13463ec

<Text>

We should fix for other pages like report field, tag, taxes.

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)

Result

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.