diff --git a/src/pages/workspace/accounting/xero/advanced/XeroAdvancedPage.tsx b/src/pages/workspace/accounting/xero/advanced/XeroAdvancedPage.tsx
new file mode 100644
index 000000000000..03a37b708b7e
--- /dev/null
+++ b/src/pages/workspace/accounting/xero/advanced/XeroAdvancedPage.tsx
@@ -0,0 +1,142 @@
+import React, {useMemo} from 'react';
+import {View} from 'react-native';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import ScreenWrapper from '@components/ScreenWrapper';
+import ScrollView from '@components/ScrollView';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import useWaitForNavigation from '@hooks/useWaitForNavigation';
+import * as Connections from '@libs/actions/connections';
+import * as ErrorUtils from '@libs/ErrorUtils';
+import Navigation from '@libs/Navigation/Navigation';
+import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
+import type {WithPolicyConnectionsProps} from '@pages/workspace/withPolicyConnections';
+import withPolicyConnections from '@pages/workspace/withPolicyConnections';
+import ToggleSettingOptionRow from '@pages/workspace/workflows/ToggleSettingsOptionRow';
+import type {ToggleSettingOptionRowProps} from '@pages/workspace/workflows/ToggleSettingsOptionRow';
+import * as Policy from '@userActions/Policy';
+import CONST from '@src/CONST';
+import ROUTES from '@src/ROUTES';
+
+function XeroAdvancedPage({policy}: WithPolicyConnectionsProps) {
+ const styles = useThemeStyles();
+ const waitForNavigate = useWaitForNavigation();
+ const {translate} = useLocalize();
+
+ const policyID = policy?.id ?? '';
+ const qboConfig = policy?.connections?.quickbooksOnline?.config;
+ const {autoSync, syncPeople, autoCreateVendor, pendingFields, collectionAccountID, reimbursementAccountID, errorFields} = qboConfig ?? {};
+ const {bankAccounts, creditCards, otherCurrentAssetAccounts} = policy?.connections?.quickbooksOnline?.data ?? {};
+
+ const qboAccountOptions = useMemo(() => [...(bankAccounts ?? []), ...(creditCards ?? [])], [bankAccounts, creditCards]);
+ const invoiceAccountCollectionOptions = useMemo(() => [...(bankAccounts ?? []), ...(otherCurrentAssetAccounts ?? [])], [bankAccounts, otherCurrentAssetAccounts]);
+
+ const isSyncReimbursedSwitchOn = !!collectionAccountID;
+
+ const selectedQboAccountName = useMemo(() => qboAccountOptions?.find(({id}) => id === reimbursementAccountID)?.name, [qboAccountOptions, reimbursementAccountID]);
+ const selectedInvoiceCollectionAccountName = useMemo(
+ () => invoiceAccountCollectionOptions?.find(({id}) => id === collectionAccountID)?.name,
+ [invoiceAccountCollectionOptions, collectionAccountID],
+ );
+
+ const syncReimbursedSubMenuItems = () => (
+
+
+ Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_QUICKBOOKS_ONLINE_ACCOUNT_SELECTOR.getRoute(policyID)))}
+ error={errorFields?.reimbursementAccountID ? translate('common.genericErrorMessage') : undefined}
+ brickRoadIndicator={errorFields?.reimbursementAccountID ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
+ />
+
+
+
+ Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_QUICKBOOKS_ONLINE_INVOICE_ACCOUNT_SELECTOR.getRoute(policyID)))}
+ error={errorFields?.collectionAccountID ? translate('common.genericErrorMessage') : undefined}
+ brickRoadIndicator={errorFields?.collectionAccountID ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
+ />
+
+
+ );
+
+ const qboToggleSettingItems: ToggleSettingOptionRowProps[] = [
+ {
+ title: translate('workspace.qbo.advancedConfig.autoSync'),
+ subtitle: translate('workspace.qbo.advancedConfig.autoSyncDescription'),
+ isActive: Boolean(autoSync?.enabled),
+ onToggle: () =>
+ Connections.updatePolicyConnectionConfig(policyID, CONST.POLICY.CONNECTIONS.NAME.QBO, CONST.QUICK_BOOKS_CONFIG.AUTO_SYNC, {
+ enabled: !autoSync?.enabled,
+ }),
+ pendingAction: pendingFields?.autoSync,
+ errors: ErrorUtils.getLatestErrorField(qboConfig ?? {}, CONST.QUICK_BOOKS_CONFIG.AUTO_SYNC),
+ onCloseError: () => Policy.clearQBOErrorField(policyID, CONST.QUICK_BOOKS_CONFIG.AUTO_SYNC),
+ wrapperStyle: styles.mv3,
+ },
+ {
+ title: translate('workspace.qbo.advancedConfig.reimbursedReports'),
+ subtitle: translate('workspace.qbo.advancedConfig.reimbursedReportsDescription'),
+ isActive: isSyncReimbursedSwitchOn,
+ onToggle: () =>
+ Connections.updatePolicyConnectionConfig(
+ policyID,
+ CONST.POLICY.CONNECTIONS.NAME.QBO,
+ CONST.QUICK_BOOKS_CONFIG.COLLECTION_ACCOUNT_ID,
+ isSyncReimbursedSwitchOn ? '' : [...qboAccountOptions, ...invoiceAccountCollectionOptions][0].id,
+ ),
+ pendingAction: pendingFields?.collectionAccountID,
+ errors: ErrorUtils.getLatestErrorField(qboConfig ?? {}, CONST.QUICK_BOOKS_CONFIG.COLLECTION_ACCOUNT_ID),
+ onCloseError: () => Policy.clearQBOErrorField(policyID, CONST.QUICK_BOOKS_CONFIG.COLLECTION_ACCOUNT_ID),
+ subMenuItems: syncReimbursedSubMenuItems(),
+ wrapperStyle: styles.mv3,
+ },
+ ];
+
+ return (
+
+
+
+
+
+ {qboToggleSettingItems.map((item) => (
+
+ ))}
+
+
+
+ );
+}
+
+XeroAdvancedPage.displayName = 'XeroAdvancedPage';
+
+export default withPolicyConnections(XeroAdvancedPage);