Display error messages for Xero Import page

src/pages/workspace/WorkspaceMoreFeaturesPage.tsx

@@ -159,7 +159,9 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
                 <ToggleSettingOptionRow
                     icon={item.icon}
                     title={translate(item.titleTranslationKey)}
+                    titleStyle={styles.textStrong}
                     subtitle={translate(item.subtitleTranslationKey)}
+                    switchAccessibilityLabel={translate(item.subtitleTranslationKey)}
                     isActive={item.isActive}
                     pendingAction={item.pendingAction}
                     onToggle={item.action}

src/pages/workspace/accounting/qbo/advanced/QuickbooksAdvancedPage.tsx

@@ -72,6 +72,7 @@ function QuickbooksAdvancedPage({policy}: WithPolicyConnectionsProps) {
         {
             title: translate('workspace.qbo.advancedConfig.autoSync'),
             subtitle: translate('workspace.qbo.advancedConfig.autoSyncDescription'),
+            switchAccessibilityLabel: translate('workspace.qbo.advancedConfig.autoSyncDescription'),
             isActive: Boolean(autoSync?.enabled),
             onToggle: () =>
                 Connections.updatePolicyConnectionConfig(policyID, CONST.POLICY.CONNECTIONS.NAME.QBO, CONST.QUICK_BOOKS_CONFIG.AUTO_SYNC, {
@@ -85,6 +86,7 @@ function QuickbooksAdvancedPage({policy}: WithPolicyConnectionsProps) {
         {
             title: translate('workspace.qbo.advancedConfig.inviteEmployees'),
             subtitle: translate('workspace.qbo.advancedConfig.inviteEmployeesDescription'),
+            switchAccessibilityLabel: translate('workspace.qbo.advancedConfig.inviteEmployeesDescription'),
             isActive: Boolean(syncPeople),
             onToggle: () => Connections.updatePolicyConnectionConfig(policyID, CONST.POLICY.CONNECTIONS.NAME.QBO, CONST.QUICK_BOOKS_CONFIG.SYNC_PEOPLE, !syncPeople),
             pendingAction: pendingFields?.syncPeople,
@@ -95,6 +97,7 @@ function QuickbooksAdvancedPage({policy}: WithPolicyConnectionsProps) {
         {
             title: translate('workspace.qbo.advancedConfig.createEntities'),
             subtitle: translate('workspace.qbo.advancedConfig.createEntitiesDescription'),
+            switchAccessibilityLabel: translate('workspace.qbo.advancedConfig.createEntitiesDescription'),
             isActive: Boolean(autoCreateVendor),
             onToggle: () => Connections.updatePolicyConnectionConfig(policyID, CONST.POLICY.CONNECTIONS.NAME.QBO, CONST.QUICK_BOOKS_CONFIG.AUTO_CREATE_VENDOR, !autoCreateVendor),
             pendingAction: pendingFields?.autoCreateVendor,
@@ -105,6 +108,7 @@ function QuickbooksAdvancedPage({policy}: WithPolicyConnectionsProps) {
         {
             title: translate('workspace.qbo.advancedConfig.reimbursedReports'),
             subtitle: translate('workspace.qbo.advancedConfig.reimbursedReportsDescription'),
+            switchAccessibilityLabel: translate('workspace.qbo.advancedConfig.reimbursedReportsDescription'),
             isActive: isSyncReimbursedSwitchOn,
             onToggle: () =>
                 Connections.updatePolicyConnectionConfig(
@@ -142,6 +146,7 @@ function QuickbooksAdvancedPage({policy}: WithPolicyConnectionsProps) {
                             onCloseError={item.onCloseError}
                             title={item.title}
                             subtitle={item.subtitle}
+                            switchAccessibilityLabel={item.switchAccessibilityLabel}
                             shouldPlaceSubtitleBelowSwitch
                             wrapperStyle={item.wrapperStyle}
                             isActive={item.isActive}

src/pages/workspace/accounting/qbo/export/QuickbooksCompanyCardExpenseAccountPage.tsx

@@ -63,8 +63,10 @@ function QuickbooksCompanyCardExpenseAccountPage({policy}: WithPolicyConnections
                             </OfflineWithFeedback>
                             <ToggleSettingOptionRow
                                 subtitle={translate('workspace.qbo.defaultVendorDescription')}
+                                switchAccessibilityLabel={translate('workspace.qbo.defaultVendorDescription')}
                                 errors={errorFields?.autoCreateVendor ?? undefined}
                                 title={translate('workspace.qbo.defaultVendor')}
+                                titleStyle={styles.textStrong}
                                 wrapperStyle={[styles.ph5, styles.mb3, styles.mt1]}
                                 isActive={Boolean(autoCreateVendor)}
                                 onToggle={(isOn) => Connections.updatePolicyConnectionConfig(policyID, CONST.POLICY.CONNECTIONS.NAME.QBO, CONST.QUICK_BOOKS_CONFIG.AUTO_CREATE_VENDOR, isOn)}

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

@@ -20,7 +20,7 @@ function XeroImportPage({policy}: WithPolicyProps) {
     const styles = useThemeStyles();
 
     const policyID = policy?.id ?? '';
-    const {importCustomers, importTaxRates, importTrackingCategories, pendingFields} = policy?.connections?.xero?.config ?? {};
+    const {importCustomers, importTaxRates, importTrackingCategories, pendingFields, errorFields} = policy?.connections?.xero?.config ?? {};
 
     const currentXeroOrganizationName = useMemo(() => getCurrentXeroOrganizationName(policy ?? undefined), [policy]);
 
@@ -29,14 +29,14 @@ function XeroImportPage({policy}: WithPolicyProps) {
             {
                 description: translate('workspace.accounting.accounts'),
                 action: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_XERO_CHART_OF_ACCOUNTS.getRoute(policyID)),
-                hasError: !!policy?.errors?.enableNewCategories,
                 title: translate('workspace.accounting.importAsCategory'),
+                hasError: !!errorFields?.enableNewCategories,
                 pendingAction: pendingFields?.enableNewCategories,
             },
             {
                 description: translate('workspace.xero.trackingCategories'),
                 action: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_XERO_TRACKING_CATEGORIES.getRoute(policyID)),
-                hasError: !!policy?.errors?.importTrackingCategories,
+                hasError: !!errorFields?.importTrackingCategories,
                 title: importTrackingCategories ? translate('workspace.accounting.importTypes.TAG') : translate('workspace.xero.notImported'),
                 pendingAction: pendingFields?.importTrackingCategories,
             },
@@ -45,31 +45,31 @@ function XeroImportPage({policy}: WithPolicyProps) {
                 action: () => {
                     Navigation.navigate(ROUTES.POLICY_ACCOUNTING_XERO_CUSTOMER.getRoute(policyID));
                 },
-                hasError: !!policy?.errors?.importCustomers,
+                hasError: !!errorFields?.importCustomers,
                 title: importCustomers ? translate('workspace.accounting.importTypes.TAG') : translate('workspace.xero.notImported'),
                 pendingAction: pendingFields?.importCustomers,
             },
             {
                 description: translate('workspace.accounting.taxes'),
                 action: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_XERO_TAXES.getRoute(policyID)),
-                hasError: !!policy?.errors?.importTaxes,
+                hasError: !!errorFields?.importTaxRates,
                 title: importTaxRates ? translate('workspace.accounting.imported') : translate('workspace.xero.notImported'),
                 pendingAction: pendingFields?.importTaxRates,
             },
         ],
         [
-            importCustomers,
-            importTaxRates,
-            importTrackingCategories,
+            translate,
+            errorFields?.enableNewCategories,
+            errorFields?.importTrackingCategories,
+            errorFields?.importCustomers,
+            errorFields?.importTaxRates,
             pendingFields?.enableNewCategories,
-            pendingFields?.importTaxRates,
-            pendingFields?.importCustomers,
             pendingFields?.importTrackingCategories,
-            policy?.errors?.importTrackingCategories,
-            policy?.errors?.enableNewCategories,
-            policy?.errors?.importCustomers,
-            policy?.errors?.importTaxes,
-            translate,
+            pendingFields?.importCustomers,
+            pendingFields?.importTaxRates,
+            importTrackingCategories,
+            importCustomers,
+            importTaxRates,
             policyID,
         ],
     );

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

@@ -1,59 +1,41 @@
 import React from 'react';
-import {View} from 'react-native';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import OfflineWithFeedback from '@components/OfflineWithFeedback';
-import ScreenWrapper from '@components/ScreenWrapper';
-import ScrollView from '@components/ScrollView';
-import Switch from '@components/Switch';
-import Text from '@components/Text';
+import ConnectionLayout from '@components/ConnectionLayout';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Connections from '@libs/actions/connections';
-import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
+import * as ErrorUtils from '@libs/ErrorUtils';
 import type {WithPolicyProps} from '@pages/workspace/withPolicy';
 import withPolicyConnections from '@pages/workspace/withPolicyConnections';
-import variables from '@styles/variables';
+import ToggleSettingOptionRow from '@pages/workspace/workflows/ToggleSettingsOptionRow';
+import * as Policy from '@userActions/Policy';
 import CONST from '@src/CONST';
 
 function XeroTaxesConfigurationPage({policy}: WithPolicyProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const policyID = policy?.id ?? '';
-    const {importTaxRates, pendingFields} = policy?.connections?.xero?.config ?? {};
-    const isSwitchOn = Boolean(importTaxRates);
+    const xeroConfig = policy?.connections?.xero?.config;
+    const isSwitchOn = !!xeroConfig?.importTaxRates;
+
     return (
-        <AccessOrNotFoundWrapper
+        <ConnectionLayout
+            displayName={XeroTaxesConfigurationPage.displayName}
+            headerTitle="workspace.accounting.taxes"
+            title="workspace.xero.taxesDescription"
             accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN]}
             policyID={policyID}
             featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED}
+            contentContainerStyle={[styles.pb2, styles.ph5]}
         >
-            <ScreenWrapper
-                includeSafeAreaPaddingBottom={false}
-                shouldEnableMaxHeight
-                testID={XeroTaxesConfigurationPage.displayName}
-            >
-                <HeaderWithBackButton title={translate('workspace.accounting.taxes')} />
-                <ScrollView contentContainerStyle={[styles.pb2, styles.ph5]}>
-                    <Text style={styles.pb5}>{translate('workspace.xero.taxesDescription')}</Text>
-                    <View style={[styles.flexRow, styles.mb4, styles.alignItemsCenter, styles.justifyContentBetween]}>
-                        <View style={styles.flex1}>
-                            <Text fontSize={variables.fontSizeNormal}>{translate('workspace.accounting.import')}</Text>
-                        </View>
-                        <OfflineWithFeedback pendingAction={pendingFields?.importTaxRates}>
-                            <View style={[styles.flex1, styles.alignItemsEnd, styles.pl3]}>
-                                <Switch
-                                    accessibilityLabel={translate('workspace.accounting.taxes')}
-                                    isOn={isSwitchOn}
-                                    onToggle={() =>
-                                        Connections.updatePolicyConnectionConfig(policyID, CONST.POLICY.CONNECTIONS.NAME.XERO, CONST.XERO_CONFIG.IMPORT_TAX_RATES, !importTaxRates)
-                                    }
-                                />
-                            </View>
-                        </OfflineWithFeedback>
-                    </View>
-                </ScrollView>
-            </ScreenWrapper>
-        </AccessOrNotFoundWrapper>
+            <ToggleSettingOptionRow
+                title={translate('workspace.accounting.import')}
+                switchAccessibilityLabel={translate('workspace.xero.customers')}
+                isActive={isSwitchOn}
+                onToggle={() => Connections.updatePolicyConnectionConfig(policyID, CONST.POLICY.CONNECTIONS.NAME.XERO, CONST.XERO_CONFIG.IMPORT_TAX_RATES, !xeroConfig?.importTaxRates)}
+                errors={ErrorUtils.getLatestErrorField(xeroConfig ?? {}, CONST.XERO_CONFIG.IMPORT_TAX_RATES)}
+                onCloseError={() => Policy.clearXeroErrorField(policyID, CONST.XERO_CONFIG.IMPORT_TAX_RATES)}
+            />
+        </ConnectionLayout>
     );
 }
 

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

@@ -3,17 +3,16 @@ import {View} from 'react-native';
 import ConnectionLayout from '@components/ConnectionLayout';
 import type {MenuItemProps} from '@components/MenuItem';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
-import OfflineWithFeedback from '@components/OfflineWithFeedback';
-import Switch from '@components/Switch';
-import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Connections from '@libs/actions/connections';
 import {getTrackingCategory} from '@libs/actions/connections/ConnectToXero';
+import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import type {WithPolicyProps} from '@pages/workspace/withPolicy';
 import withPolicyConnections from '@pages/workspace/withPolicyConnections';
-import variables from '@styles/variables';
+import ToggleSettingOptionRow from '@pages/workspace/workflows/ToggleSettingsOptionRow';
+import * as Policy from '@userActions/Policy';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import ROUTES from '@src/ROUTES';
@@ -22,7 +21,8 @@ function XeroTrackingCategoryConfigurationPage({policy}: WithPolicyProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const policyID = policy?.id ?? '';
-    const {importTrackingCategories, pendingFields} = policy?.connections?.xero?.config ?? {};
+    const xeroConfig = policy?.connections?.xero?.config;
+    const isSwitchOn = !!xeroConfig?.importTrackingCategories;
 
     const menuItems: MenuItemProps[] = useMemo(() => {
         const availableCategories = [];
@@ -59,30 +59,22 @@ function XeroTrackingCategoryConfigurationPage({policy}: WithPolicyProps) {
             featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED}
             contentContainerStyle={[styles.pb2, styles.ph5]}
         >
-            <View>
-                <View style={[styles.flexRow, styles.mb4, styles.alignItemsCenter, styles.justifyContentBetween]}>
-                    <View style={styles.flex1}>
-                        <Text fontSize={variables.fontSizeNormal}>{translate('workspace.accounting.import')}</Text>
-                    </View>
-                    <OfflineWithFeedback pendingAction={pendingFields?.importTrackingCategories}>
-                        <View style={[styles.flex1, styles.alignItemsEnd, styles.pl3]}>
-                            <Switch
-                                accessibilityLabel={translate('workspace.xero.trackingCategories')}
-                                isOn={Boolean(importTrackingCategories)}
-                                onToggle={() =>
-                                    Connections.updatePolicyConnectionConfig(
-                                        policyID,
-                                        CONST.POLICY.CONNECTIONS.NAME.XERO,
-                                        CONST.XERO_CONFIG.IMPORT_TRACKING_CATEGORIES,
-                                        !importTrackingCategories,
-                                    )
-                                }
-                            />
-                        </View>
-                    </OfflineWithFeedback>
-                </View>
-            </View>
-            {importTrackingCategories && (
+            <ToggleSettingOptionRow
+                title={translate('workspace.accounting.import')}
+                switchAccessibilityLabel={translate('workspace.xero.trackingCategories')}
+                isActive={isSwitchOn}
+                onToggle={() =>
+                    Connections.updatePolicyConnectionConfig(
+                        policyID,
+                        CONST.POLICY.CONNECTIONS.NAME.XERO,
+                        CONST.XERO_CONFIG.IMPORT_TRACKING_CATEGORIES,
+                        !xeroConfig?.importTrackingCategories,
+                    )
+                }
+                errors={ErrorUtils.getLatestErrorField(xeroConfig ?? {}, CONST.XERO_CONFIG.IMPORT_TRACKING_CATEGORIES)}
+                onCloseError={() => Policy.clearXeroErrorField(policyID, CONST.XERO_CONFIG.IMPORT_TRACKING_CATEGORIES)}
+            />
+            {xeroConfig?.importTrackingCategories && (
                 <View>
                     {menuItems.map((menuItem: MenuItemProps) => (
                         <MenuItemWithTopDescription

src/pages/workspace/accounting/xero/advanced/XeroAdvancedPage.tsx

@@ -52,6 +52,7 @@ function XeroAdvancedPage({policy}: WithPolicyConnectionsProps) {
                 key={translate('workspace.xero.advancedConfig.autoSync')}
                 title={translate('workspace.xero.advancedConfig.autoSync')}
                 subtitle={translate('workspace.xero.advancedConfig.autoSyncDescription')}
+                switchAccessibilityLabel={translate('workspace.xero.advancedConfig.autoSyncDescription')}
                 shouldPlaceSubtitleBelowSwitch
                 wrapperStyle={styles.mv3}
                 isActive={Boolean(autoSync?.enabled)}
@@ -68,6 +69,7 @@ function XeroAdvancedPage({policy}: WithPolicyConnectionsProps) {
                 key={translate('workspace.xero.advancedConfig.reimbursedReports')}
                 title={translate('workspace.xero.advancedConfig.reimbursedReports')}
                 subtitle={translate('workspace.xero.advancedConfig.reimbursedReportsDescription')}
+                switchAccessibilityLabel={translate('workspace.xero.advancedConfig.reimbursedReportsDescription')}
                 shouldPlaceSubtitleBelowSwitch
                 wrapperStyle={styles.mv3}
                 isActive={Boolean(sync?.syncReimbursedReports)}

src/pages/workspace/accounting/xero/import/XeroChartOfAccountsPage.tsx

@@ -20,7 +20,6 @@ function XeroChartOfAccountsPage({policy}: WithPolicyProps) {
     const styles = useThemeStyles();
     const policyID = policy?.id ?? '';
     const xeroConfig = policy?.connections?.xero?.config;
-    const {enableNewCategories, pendingFields} = xeroConfig ?? {};
 
     return (
         <ConnectionLayout
@@ -55,10 +54,12 @@ function XeroChartOfAccountsPage({policy}: WithPolicyProps) {
             <ToggleSettingOptionRow
                 title={translate('workspace.common.enabled')}
                 subtitle={translate('workspace.xero.accountsSwitchDescription')}
+                switchAccessibilityLabel={translate('workspace.xero.accountsSwitchDescription')}
                 shouldPlaceSubtitleBelowSwitch
-                isActive={!!enableNewCategories}
-                onToggle={() => Connections.updatePolicyConnectionConfig(policyID, CONST.POLICY.CONNECTIONS.NAME.XERO, CONST.XERO_CONFIG.ENABLE_NEW_CATEGORIES, !enableNewCategories)}
-                pendingAction={pendingFields?.enableNewCategories}
+                isActive={!!xeroConfig?.enableNewCategories}
+                onToggle={() =>
+                    Connections.updatePolicyConnectionConfig(policyID, CONST.POLICY.CONNECTIONS.NAME.XERO, CONST.XERO_CONFIG.ENABLE_NEW_CATEGORIES, !xeroConfig?.enableNewCategories)
+                }
                 errors={ErrorUtils.getLatestErrorField(xeroConfig ?? {}, CONST.XERO_CONFIG.ENABLE_NEW_CATEGORIES)}
                 onCloseError={() => Policy.clearXeroErrorField(policyID, CONST.XERO_CONFIG.ENABLE_NEW_CATEGORIES)}
             />