Merge pull request #41417 from Expensify/lucien/fix-xero-import-ux

src/libs/PolicyUtils.ts

@@ -6,7 +6,7 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type {Policy, PolicyCategories, PolicyEmployeeList, PolicyTagList, PolicyTags, TaxRate} from '@src/types/onyx';
-import type {PolicyFeatureName, Rate} from '@src/types/onyx/Policy';
+import type {PolicyFeatureName, Rate, Tenant} from '@src/types/onyx/Policy';
 import type PolicyEmployee from '@src/types/onyx/PolicyEmployee';
 import type {EmptyObject} from '@src/types/utils/EmptyObject';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
@@ -390,6 +390,20 @@ function canSendInvoice(policies: OnyxCollection<Policy>): boolean {
     return getActiveAdminWorkspaces(policies).length > 0;
 }
 
+/** Get the Xero organizations connected to the policy */
+function getXeroTenants(policy: Policy | undefined): Tenant[] {
+    // Due to the way optional chain is being handled in this useMemo we are forced to use this approach to properly handle undefined values
+    // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
+    if (!policy || !policy.connections || !policy.connections.xero || !policy.connections.xero.data) {
+        return [];
+    }
+    return policy.connections.xero.data.tenants ?? [];
+}
+
+function findCurrentXeroOrganization(tenants: Tenant[] | undefined, organizationID: string | undefined): Tenant | undefined {
+    return tenants?.find((tenant) => tenant.id === organizationID);
+}
+
 export {
     getActivePolicies,
     hasAccountingConnections,
@@ -435,6 +449,8 @@ export {
     getPolicy,
     getActiveAdminWorkspaces,
     canSendInvoice,
+    getXeroTenants,
+    findCurrentXeroOrganization,
 };
 
 export type {MemberEmailsToAccountIDs};

src/pages/workspace/accounting/PolicyAccountingPage.tsx

@@ -24,6 +24,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import {removePolicyConnection} from '@libs/actions/connections';
 import {syncConnection} from '@libs/actions/connections/QuickBooksOnline';
+import {findCurrentXeroOrganization, getXeroTenants} from '@libs/PolicyUtils';
 import Navigation from '@navigation/Navigation';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import type {WithPolicyProps} from '@pages/workspace/withPolicy';
@@ -33,7 +34,7 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type {Policy, PolicyConnectionSyncProgress} from '@src/types/onyx';
-import type {PolicyConnectionName, Tenant} from '@src/types/onyx/Policy';
+import type {PolicyConnectionName} from '@src/types/onyx/Policy';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import type IconAsset from '@src/types/utils/IconAsset';
 
@@ -116,15 +117,9 @@ function PolicyAccountingPage({policy, connectionSyncProgress}: PolicyAccounting
 
     const policyConnectedToXero = connectedIntegration === CONST.POLICY.CONNECTIONS.NAME.XERO;
 
-    const tenants = useMemo<Tenant[]>(() => {
-        // Due to the way optional chain is being handled in this useMemo we are forced to use this approach to properly handle undefined values
-        // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
-        if (!policy || !policy.connections || !policy.connections.xero || !policy.connections.xero.data) {
-            return [];
-        }
-        return policy?.connections?.xero?.data?.tenants ?? [];
-    }, [policy]);
-    const currentXeroOrganization = tenants.find((tenant) => tenant.id === policy?.connections?.xero.config.tenantID);
+    const tenants = useMemo(() => getXeroTenants(policy), [policy]);
+
+    const currentXeroOrganization = findCurrentXeroOrganization(tenants, policy?.connections?.xero?.config?.tenantID);
 
     const overflowMenu: ThreeDotsMenuProps['menuItems'] = useMemo(
         () => [

src/pages/workspace/accounting/xero/XeroImportPage.tsx

@@ -8,12 +8,12 @@ import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
+import {getXeroTenants} from '@libs/PolicyUtils';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import withPolicy from '@pages/workspace/withPolicy';
 import type {WithPolicyProps} from '@pages/workspace/withPolicy';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
-import type {Tenant} from '@src/types/onyx/Policy';
 
 function XeroImportPage({policy}: WithPolicyProps) {
     const {translate} = useLocalize();
@@ -22,7 +22,7 @@ function XeroImportPage({policy}: WithPolicyProps) {
     const policyID = policy?.id ?? '';
     const {importCustomers, importTaxRates, importTrackingCategories, pendingFields} = policy?.connections?.xero?.config ?? {};
 
-    const tenants = useMemo<Tenant[]>(() => policy?.connections?.xero?.data?.tenants ?? [], [policy?.connections?.xero.data.tenants]);
+    const tenants = useMemo(() => getXeroTenants(policy ?? undefined), [policy]);
     const currentXeroOrganization = tenants.find((tenant) => tenant.id === policy?.connections?.xero.config.tenantID);
 
     const sections = useMemo(

src/pages/workspace/accounting/xero/XeroOrganizationConfigurationPage.tsx

@@ -1,5 +1,5 @@
 import type {StackScreenProps} from '@react-navigation/stack';
-import React from 'react';
+import React, {useMemo} from 'react';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
@@ -10,11 +10,14 @@ import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {updatePolicyConnectionConfig} from '@libs/actions/connections';
+import Navigation from '@libs/Navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
+import {findCurrentXeroOrganization, getXeroTenants} from '@libs/PolicyUtils';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import withPolicy from '@pages/workspace/withPolicy';
 import type {WithPolicyProps} from '@pages/workspace/withPolicy';
 import CONST from '@src/CONST';
+import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 
 type XeroOrganizationConfigurationPageProps = WithPolicyProps & StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.ACCOUNTING.XERO_ORGANIZATION>;
@@ -26,6 +29,8 @@ function XeroOrganizationConfigurationPage({
 }: XeroOrganizationConfigurationPageProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
+    const tenants = useMemo(() => getXeroTenants(policy ?? undefined), [policy]);
+    const currentXeroOrganization = findCurrentXeroOrganization(tenants, policy?.connections?.xero?.config?.tenantID);
 
     const policyID = policy?.id ?? '';
 
@@ -42,6 +47,7 @@ function XeroOrganizationConfigurationPage({
         }
 
         updatePolicyConnectionConfig(policyID, CONST.POLICY.CONNECTIONS.NAME.XERO, 'tenantID', keyForList);
+        Navigation.goBack(ROUTES.WORKSPACE_ACCOUNTING.getRoute(policyID));
     };
 
     return (
@@ -62,7 +68,7 @@ function XeroOrganizationConfigurationPage({
                         ListItem={RadioListItem}
                         onSelectRow={saveSelection}
                         sections={[{data: sections}]}
-                        initiallyFocusedOptionKey={organizationID}
+                        initiallyFocusedOptionKey={currentXeroOrganization?.id}
                     />
                 </ScrollView>
             </ScreenWrapper>