[HOLD for payment 2024-06-11] [$250] [Xero] Xero appears under "Other integrations" when it is manually synced

[kbecciv]

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: 1.4.68-0
Reproducible in staging?: y
Reproducible in production?: n
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to Account settings.
3. Go to Workspaces > any workspace.
4. Go to Accounting.
5. Set up Xero.
6. Expand "Other integrations" section.
7. Click 3-dot menu next to Xer.
8. Click Sync now.

Expected Result:

Xero will not appear under "Other integrations" when it is manually synced

Actual Result:

Xero appears under "Other integrations" when it is manually synced

Workaround:

n/a

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

Bug6466198_1714451205481.20240430_122403.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0174cf9740ce3f5618
• Upwork Job ID: 1785320209758396416
• Last Price Increase: 2024-04-30
• Automatic offers:
• rayane-djouah | Reviewer | 0
• ShridharGoel | Contributor | 0

[melvin-bot]

Triggered auto assignment to @amyevans (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[kbecciv]

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

[mananjadhav]

I don't think this is a deploy blocker. @mountiny can chime in on this one.

[ShridharGoel]

Proposal

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

Sync functionality implementation is missing in Xero and quickbooks actually gets synced

What is the root cause of that problem?

syncConnection method is implemented only in QuickBooksOnline and the same is called via PolicyAccountingPage even if Xero is being synced.

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

Lines 16 to 39 in b62bbbb

	function syncConnection(policyID: string) {
	const optimisticData: OnyxUpdate[] = [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${policyID}`,
	value: {
	stageInProgress: CONST.POLICY.CONNECTIONS.SYNC_STAGE_NAME.STARTING_IMPORT,
	connectionName: CONST.POLICY.CONNECTIONS.NAME.QBO,
	},
	},
	];
	const failureData: OnyxUpdate[] = [
	{
	onyxMethod: Onyx.METHOD.SET,
	key: `${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${policyID}`,
	value: null,
	},
	];
	const parameters: SyncPolicyToQuickbooksOnlineParams = {
	policyID,
	idempotencyKey: policyID,
	};
	API.read(READ_COMMANDS.SYNC_POLICY_TO_QUICKBOOKS_ONLINE, parameters, {optimisticData, failureData});
	}

This enables the (isSyncInProgress && integration !== connectionSyncProgress?.connectionName) condition and otherIntegrations contain Xero also while syncing.

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

Lines 230 to 249 in b62bbbb

	const otherIntegrationsItems = useMemo(() => {
	if (isEmptyObject(policy?.connections) && !isSyncInProgress) {
	return;
	}
	const otherIntegrations = accountingIntegrations.filter(
	(integration) => (isSyncInProgress && integration !== connectionSyncProgress?.connectionName) || integration !== connectedIntegration,
	);
	return otherIntegrations.map((integration) => {
	const integrationData = accountingIntegrationData(integration, policyID, translate, true, connectedIntegration);
	const iconProps = integrationData?.icon ? {icon: integrationData.icon, iconType: CONST.ICON_TYPE_AVATAR} : {};
	return {
	...iconProps,
	title: integrationData?.title,
	rightComponent: integrationData?.setupConnectionButton,
	interactive: false,
	shouldShowRightComponent: true,
	wrapperStyle: styles.sectionMenuItemTopDescription,
	};
	});
	}, [connectedIntegration, connectionSyncProgress?.connectionName, isSyncInProgress, policy?.connections, policyID, styles.sectionMenuItemTopDescription, translate]);

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

Move syncConnection to a common place and pass valid connectionName (as of now it's using QBO always). Backend changes might also be needed if we want a different API for SyncPolicyToXero.

Update the overflow menu option:

{
    icon: Expensicons.Sync,
    text: translate('workspace.accounting.syncNow'),
    onSelected: () => syncConnection(policyID, connectedIntegration),
    disabled: isOffline,
}

Updated syncConnection:

function syncConnection(policyID: string, connectionName: string) {
    const optimisticData: OnyxUpdate[] = [
        {
            onyxMethod: Onyx.METHOD.MERGE,
            key: `${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${policyID}`,
            value: {
                stageInProgress: CONST.POLICY.CONNECTIONS.SYNC_STAGE_NAME.STARTING_IMPORT,
                connectionName: connectionName,
            },
        },
    ];
    const failureData: OnyxUpdate[] = [
        {
            onyxMethod: Onyx.METHOD.SET,
            key: `${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${policyID}`,
            value: null,
        },
    ];
    const parameters: SyncPolicyToQuickbooksOnlineParams = {
        policyID,
        idempotencyKey: policyID,
    };
    
    if (connectionName === CONST.POLICY.CONNECTIONS.NAME.QBO) {
        API.read(READ_COMMANDS.SYNC_POLICY_TO_QUICKBOOKS_ONLINE, parameters, {optimisticData, failureData});
    } else if (connectionName === CONST.POLICY.CONNECTIONS.NAME.XERO) {
        API.read(READ_COMMANDS.SYNC_POLICY_TO_XERO, parameters, {optimisticData, failureData});
    }
}

[mananjadhav]

@ShridharGoel's proposal looks good. @mountiny @amyevans Should we be making this external?

[amyevans]

Agreed it doesn't need to be a deploy blocker. I'm not sure what the plan is for Xero polish and @mountiny is OOO. @lakchote do you know? Should we make this external or do y'all have alternate plans for handling follow up issues?