Offline and errors pattern in Quickbooks Online integration

src/CONST.ts

@@ -1319,21 +1319,25 @@ const CONST = {
     },
     QUICKBOOKS_ONLINE: 'quickbooksOnline',
 
-    QUICK_BOOKS_CONFIG: {
-        SYNC_CLASSES: 'syncClasses',
+    QUICKBOOKS_CONFIG: {
         ENABLE_NEW_CATEGORIES: 'enableNewCategories',
+        SYNC_CLASSES: 'syncClasses',
         SYNC_CUSTOMERS: 'syncCustomers',
         SYNC_LOCATIONS: 'syncLocations',
         SYNC_TAX: 'syncTax',
         EXPORT: 'export',
+        EXPORTER: 'exporter',
         EXPORT_DATE: 'exportDate',
         NON_REIMBURSABLE_EXPENSES_ACCOUNT: 'nonReimbursableExpensesAccount',
         NON_REIMBURSABLE_EXPENSES_EXPORT_DESTINATION: 'nonReimbursableExpensesExportDestination',
         REIMBURSABLE_EXPENSES_ACCOUNT: 'reimbursableExpensesAccount',
         REIMBURSABLE_EXPENSES_EXPORT_DESTINATION: 'reimbursableExpensesExportDestination',
         NON_REIMBURSABLE_BILL_DEFAULT_VENDOR: 'nonReimbursableBillDefaultVendor',
+        NON_REIMBURSABLE_EXPENSE_EXPORT_DESTINATION: 'nonReimbursableExpensesExportDestination',
+        NON_REIMBURSABLE_EXPENSE_ACCOUNT: 'nonReimbursableExpensesAccount',
         RECEIVABLE_ACCOUNT: 'receivableAccount',
         AUTO_SYNC: 'autoSync',
+        ENABLED: 'enabled',
         SYNC_PEOPLE: 'syncPeople',
         AUTO_CREATE_VENDOR: 'autoCreateVendor',
         REIMBURSEMENT_ACCOUNT_ID: 'reimbursementAccountID',

src/components/SelectionScreen.tsx

@@ -151,7 +151,7 @@ function SelectionScreen<T = string>({
                         initiallyFocusedOptionKey={initiallyFocusedOptionKey}
                         listEmptyContent={listEmptyContent}
                         listFooterContent={listFooterContent}
-                        sectionListStyle={[styles.flexGrow0]}
+                        sectionListStyle={!!sections.length && [styles.flexGrow0]}
                         shouldDebounceRowSelect={shouldDebounceRowSelect}
                     >
                         <ErrorMessageRow

src/languages/en.ts

@@ -2161,6 +2161,7 @@ export default {
             accountsPayable: 'Accounts payable',
             accountsPayableDescription: 'Choose where to create vendor bills.',
             bankAccount: 'Bank account',
+            notConfigured: 'Not configured',
             bankAccountDescription: 'Choose where to send checks from.',
             creditCardAccount: 'Credit card account',
             companyCardsLocationEnabledDescription:

src/languages/es.ts

@@ -2189,6 +2189,7 @@ export default {
             accountsPayable: 'Cuentas por pagar',
             accountsPayableDescription: 'Elige dónde crear las facturas de proveedores.',
             bankAccount: 'Cuenta bancaria',
+            notConfigured: 'No configurado',
             bankAccountDescription: 'Elige desde dónde enviar los cheques.',
             creditCardAccount: 'Cuenta de la tarjeta de crédito',
             companyCardsLocationEnabledDescription:

src/libs/actions/connections/index.ts

@@ -68,7 +68,7 @@ function createErrorFields<TConnectionName extends ConnectionNameExceptNetSuite,
     }, {});
 }
 
-function updatePolicyXeroConnectionConfig<TConnectionName extends ConnectionNameExceptNetSuite, TSettingName extends keyof Connections[TConnectionName]['config']>(
+function updatePolicyConnectionConfig<TConnectionName extends ConnectionNameExceptNetSuite, TSettingName extends keyof Connections[TConnectionName]['config']>(
     policyID: string,
     connectionName: TConnectionName,
     settingName: TSettingName,
@@ -137,89 +137,6 @@ function updatePolicyXeroConnectionConfig<TConnectionName extends ConnectionName
     };
     API.write(WRITE_COMMANDS.UPDATE_POLICY_CONNECTION_CONFIG, parameters, {optimisticData, failureData, successData});
 }
-
-function updatePolicyConnectionConfig<TConnectionName extends ConnectionNameExceptNetSuite, TSettingName extends keyof Connections[TConnectionName]['config']>(
-    policyID: string,
-    connectionName: TConnectionName,
-    settingName: TSettingName,
-    settingValue: Partial<Connections[TConnectionName]['config'][TSettingName]>,
-) {
-    const optimisticData: OnyxUpdate[] = [
-        {
-            onyxMethod: Onyx.METHOD.MERGE,
-            key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
-            value: {
-                connections: {
-                    [connectionName]: {
-                        config: {
-                            [settingName]: settingValue ?? null,
-                            pendingFields: {
-                                [settingName]: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
-                            },
-                            errorFields: {
-                                [settingName]: null,
-                            },
-                        },
-                    },
-                },
-            },
-        },
-    ];
-
-    const failureData: OnyxUpdate[] = [
-        {
-            onyxMethod: Onyx.METHOD.MERGE,
-            key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
-            value: {
-                connections: {
-                    [connectionName]: {
-                        config: {
-                            [settingName]: settingValue ?? null,
-                            pendingFields: {
-                                [settingName]: null,
-                            },
-                            errorFields: {
-                                [settingName]: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
-                            },
-                        },
-                    },
-                },
-            },
-        },
-    ];
-
-    const successData: OnyxUpdate[] = [
-        {
-            onyxMethod: Onyx.METHOD.MERGE,
-            key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
-            value: {
-                connections: {
-                    [connectionName]: {
-                        config: {
-                            [settingName]: settingValue ?? null,
-                            pendingFields: {
-                                [settingName]: null,
-                            },
-                            errorFields: {
-                                [settingName]: null,
-                            },
-                        },
-                    },
-                },
-            },
-        },
-    ];
-
-    const parameters: UpdatePolicyConnectionConfigParams = {
-        policyID,
-        connectionName,
-        settingName: String(settingName),
-        settingValue: JSON.stringify(settingValue),
-        idempotencyKey: String(settingName),
-    };
-    API.write(WRITE_COMMANDS.UPDATE_POLICY_CONNECTION_CONFIG, parameters, {optimisticData, failureData, successData});
-}
-
 /**
  * This method returns read command and stage in progres for a given accounting integration.
  *
@@ -419,7 +336,6 @@ function copyExistingPolicyConnection(connectedPolicyID: string, targetPolicyID:
 export {
     removePolicyConnection,
     updatePolicyConnectionConfig,
-    updatePolicyXeroConnectionConfig,
     updateManyPolicyConnectionConfigs,
     hasSynchronizationError,
     syncConnection,

src/pages/workspace/accounting/PolicyAccountingPage.tsx

@@ -102,9 +102,33 @@ function accountingIntegrationData(
                     />
                 ),
                 onImportPagePress: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_IMPORT.getRoute(policyID)),
+                subscribedImportSettings: [
+                    CONST.QUICKBOOKS_CONFIG.ENABLE_NEW_CATEGORIES,
+                    CONST.QUICKBOOKS_CONFIG.SYNC_CLASSES,
+                    CONST.QUICKBOOKS_CONFIG.SYNC_CUSTOMERS,
+                    CONST.QUICKBOOKS_CONFIG.SYNC_LOCATIONS,
+                    CONST.QUICKBOOKS_CONFIG.SYNC_TAX,
+                ],
                 onExportPagePress: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_EXPORT.getRoute(policyID)),
+                subscribedExportSettings: [
+                    CONST.QUICKBOOKS_CONFIG.EXPORTER,
+                    CONST.QUICKBOOKS_CONFIG.EXPORT_DATE,
+                    CONST.QUICKBOOKS_CONFIG.RECEIVABLE_ACCOUNT,
+                    CONST.QUICKBOOKS_CONFIG.NON_REIMBURSABLE_EXPENSES_EXPORT_DESTINATION,
+                    CONST.QUICKBOOKS_CONFIG.NON_REIMBURSABLE_EXPENSE_ACCOUNT,
+                ],
                 onCardReconciliationPagePress: () => Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_CARD_RECONCILIATION.getRoute(policyID, CONST.POLICY.CONNECTIONS.NAME.QBO)),
                 onAdvancedPagePress: () => Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_QUICKBOOKS_ONLINE_ADVANCED.getRoute(policyID)),
+                subscribedAdvancedSettings: [
+                    CONST.QUICKBOOKS_CONFIG.REIMBURSEMENT_ACCOUNT_ID,
+                    CONST.QUICKBOOKS_CONFIG.COLLECTION_ACCOUNT_ID,
+                    CONST.QUICKBOOKS_CONFIG.AUTO_SYNC,
+                    CONST.QUICKBOOKS_CONFIG.SYNC_PEOPLE,
+                    CONST.QUICKBOOKS_CONFIG.AUTO_CREATE_VENDOR,
+                    CONST.QUICKBOOKS_CONFIG.COLLECTION_ACCOUNT_ID,
+                ],
+                pendingFields: policy?.connections?.quickbooksOnline?.config?.pendingFields,
+                errorFields: policy?.connections?.quickbooksOnline?.config?.errorFields,
             };
         case CONST.POLICY.CONNECTIONS.NAME.XERO:
             return {

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

@@ -1,21 +1,21 @@
 import React, {useCallback, useMemo} from 'react';
 import {View} from 'react-native';
 import BlockingView from '@components/BlockingViews/BlockingView';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Illustrations from '@components/Icon/Illustrations';
-import ScreenWrapper from '@components/ScreenWrapper';
-import SelectionList from '@components/SelectionList';
 import RadioListItem from '@components/SelectionList/RadioListItem';
 import type {ListItem} from '@components/SelectionList/types';
+import SelectionScreen from '@components/SelectionScreen';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 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 {settingsPendingAction} from '@libs/PolicyUtils';
 import type {WithPolicyConnectionsProps} from '@pages/workspace/withPolicyConnections';
 import withPolicyConnections from '@pages/workspace/withPolicyConnections';
 import variables from '@styles/variables';
+import {clearQBOErrorField} from '@userActions/Policy/Policy';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 
@@ -29,7 +29,7 @@ function QuickbooksAccountSelectPage({policy}: WithPolicyConnectionsProps) {
 
     const policyID = policy?.id ?? '-1';
     const {bankAccounts, creditCards} = policy?.connections?.quickbooksOnline?.data ?? {};
-    const {reimbursementAccountID} = policy?.connections?.quickbooksOnline?.config ?? {};
+    const qboConfig = policy?.connections?.quickbooksOnline?.config;
     const accountOptions = useMemo(() => [...(bankAccounts ?? []), ...(creditCards ?? [])], [bankAccounts, creditCards]);
 
     const qboOnlineSelectorOptions = useMemo<SelectorType[]>(
@@ -38,9 +38,9 @@ function QuickbooksAccountSelectPage({policy}: WithPolicyConnectionsProps) {
                 value: id,
                 text: name,
                 keyForList: id,
-                isSelected: reimbursementAccountID === id,
+                isSelected: qboConfig?.reimbursementAccountID === id,
             })),
-        [reimbursementAccountID, accountOptions],
+        [qboConfig?.reimbursementAccountID, accountOptions],
     );
     const listHeaderComponent = useMemo(
         () => (
@@ -55,7 +55,7 @@ function QuickbooksAccountSelectPage({policy}: WithPolicyConnectionsProps) {
 
     const saveSelection = useCallback(
         ({value}: SelectorType) => {
-            Connections.updatePolicyConnectionConfig(policyID, CONST.POLICY.CONNECTIONS.NAME.QBO, CONST.QUICK_BOOKS_CONFIG.REIMBURSEMENT_ACCOUNT_ID, value);
+            Connections.updatePolicyConnectionConfig(policyID, CONST.POLICY.CONNECTIONS.NAME.QBO, CONST.QUICKBOOKS_CONFIG.REIMBURSEMENT_ACCOUNT_ID, value);
             Navigation.goBack(ROUTES.WORKSPACE_ACCOUNTING_QUICKBOOKS_ONLINE_ADVANCED.getRoute(policyID));
         },
         [policyID],
@@ -76,28 +76,26 @@ function QuickbooksAccountSelectPage({policy}: WithPolicyConnectionsProps) {
     );
 
     return (
-        <AccessOrNotFoundWrapper
-            accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
+        <SelectionScreen
             policyID={policyID}
+            accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
             featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED}
-        >
-            <ScreenWrapper
-                includeSafeAreaPaddingBottom={false}
-                testID={QuickbooksAccountSelectPage.displayName}
-            >
-                <HeaderWithBackButton title={translate('workspace.qbo.advancedConfig.qboBillPaymentAccount')} />
-
-                <SelectionList
-                    sections={qboOnlineSelectorOptions.length ? [{data: qboOnlineSelectorOptions}] : []}
-                    ListItem={RadioListItem}
-                    headerContent={listHeaderComponent}
-                    onSelectRow={saveSelection}
-                    shouldDebounceRowSelect
-                    initiallyFocusedOptionKey={initiallyFocusedOptionKey}
-                    listEmptyContent={listEmptyContent}
-                />
-            </ScreenWrapper>
-        </AccessOrNotFoundWrapper>
+            displayName={QuickbooksAccountSelectPage.displayName}
+            sections={qboOnlineSelectorOptions.length ? [{data: qboOnlineSelectorOptions}] : []}
+            listItem={RadioListItem}
+            headerContent={listHeaderComponent}
+            onSelectRow={saveSelection}
+            shouldDebounceRowSelect
+            initiallyFocusedOptionKey={initiallyFocusedOptionKey}
+            listEmptyContent={listEmptyContent}
+            title="workspace.qbo.advancedConfig.qboBillPaymentAccount"
+            connectionName={CONST.POLICY.CONNECTIONS.NAME.QBO}
+            onBackButtonPress={() => Navigation.goBack()}
+            pendingAction={settingsPendingAction([CONST.QUICKBOOKS_CONFIG.REIMBURSEMENT_ACCOUNT_ID], qboConfig?.pendingFields)}
+            errors={ErrorUtils.getLatestErrorField(qboConfig, CONST.QUICKBOOKS_CONFIG.REIMBURSEMENT_ACCOUNT_ID)}
+            errorRowStyles={[styles.ph5, styles.mv2]}
+            onClose={() => clearQBOErrorField(policyID, CONST.QUICKBOOKS_CONFIG.REIMBURSEMENT_ACCOUNT_ID)}
+        />
     );
 }