Sage intacct export: offline and error

src/components/SelectionScreen.tsx

@@ -1,12 +1,18 @@
 import {isEmpty} from 'lodash';
 import React from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import type {AccessVariant} from '@pages/workspace/AccessOrNotFoundWrapper';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import type {TranslationPaths} from '@src/languages/types';
+import type * as OnyxCommon from '@src/types/onyx/OnyxCommon';
 import type {ConnectionName, PolicyFeatureName} from '@src/types/onyx/Policy';
+import type {ReceiptErrors} from '@src/types/onyx/Transaction';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import HeaderWithBackButton from './HeaderWithBackButton';
+import OfflineWithFeedback from './OfflineWithFeedback';
 import ScreenWrapper from './ScreenWrapper';
 import SelectionList from './SelectionList';
 import type RadioListItem from './SelectionList/RadioListItem';
@@ -63,6 +69,18 @@ type SelectionScreenProps = {
 
     /** Name of the current connection */
     connectionName: ConnectionName;
+
+    /** The type of action that's pending  */
+    pendingAction?: OnyxCommon.PendingAction | null;
+
+    /** The errors to display  */
+    errors?: OnyxCommon.Errors | ReceiptErrors | null;
+
+    /** Additional style object for the error row */
+    errorRowStyles?: StyleProp<ViewStyle>;
+
+    /** A function to run when the X button next to the error is clicked */
+    onClose?: () => void;
 };
 
 function SelectionScreen({
@@ -81,8 +99,13 @@ function SelectionScreen({
     featureName,
     shouldBeBlocked,
     connectionName,
+    pendingAction,
+    errors,
+    errorRowStyles,
+    onClose,
 }: SelectionScreenProps) {
     const {translate} = useLocalize();
+    const styles = useThemeStyles();
 
     const policy = PolicyUtils.getPolicy(policyID);
     const isConnectionEmpty = isEmpty(policy?.connections?.[connectionName]);
@@ -95,24 +118,33 @@ function SelectionScreen({
             shouldBeBlocked={isConnectionEmpty || shouldBeBlocked}
         >
             <ScreenWrapper
-                includeSafeAreaPaddingBottom={false}
+                includeSafeAreaPaddingBottom={!!errors && !isEmptyObject(errors)}
                 testID={displayName}
             >
                 <HeaderWithBackButton
                     title={translate(title)}
                     onBackButtonPress={onBackButtonPress}
                 />
-                <SelectionList
-                    onSelectRow={onSelectRow}
-                    headerContent={headerContent}
-                    sections={sections}
-                    ListItem={listItem}
-                    showScrollIndicator
-                    shouldShowTooltips={false}
-                    initiallyFocusedOptionKey={initiallyFocusedOptionKey}
-                    listEmptyContent={listEmptyContent}
-                    listFooterContent={listFooterContent}
-                />
+                {headerContent}
+                <OfflineWithFeedback
+                    pendingAction={pendingAction}
+                    errors={errors}
+                    errorRowStyles={[errorRowStyles]}
+                    onClose={onClose}
+                    style={[styles.flex1]}
+                    contentContainerStyle={[styles.flex1]}
+                >
+                    <SelectionList
+                        onSelectRow={onSelectRow}
+                        sections={sections}
+                        ListItem={listItem}
+                        showScrollIndicator
+                        shouldShowTooltips={false}
+                        initiallyFocusedOptionKey={initiallyFocusedOptionKey}
+                        listEmptyContent={listEmptyContent}
+                        listFooterContent={listFooterContent}
+                    />
+                </OfflineWithFeedback>
             </ScreenWrapper>
         </AccessOrNotFoundWrapper>
     );

src/libs/actions/Policy/Policy.ts

@@ -526,6 +526,10 @@ function clearXeroErrorField(policyID: string, fieldName: string) {
     Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {connections: {xero: {config: {errorFields: {[fieldName]: null}}}}});
 }
 
+function clearSageIntacctErrorField(policyID: string, fieldName: string) {
+    Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {connections: {intacct: {config: {errorFields: {[fieldName]: null}}}}});
+}
+
 function clearNetSuiteErrorField(policyID: string, fieldName: string) {
     Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {connections: {netsuite: {options: {config: {errorFields: {[fieldName]: null}}}}}});
 }
@@ -3123,6 +3127,7 @@ export {
     generateCustomUnitID,
     clearQBOErrorField,
     clearXeroErrorField,
+    clearSageIntacctErrorField,
     clearNetSuiteErrorField,
     clearNetSuiteAutoSyncErrorField,
     clearWorkspaceReimbursementErrors,

src/libs/actions/connections/SageIntacct.ts

@@ -7,7 +7,7 @@ import {WRITE_COMMANDS} from '@libs/API/types';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {Connections} from '@src/types/onyx/Policy';
+import type {SageIntacctExportConfig} from '@src/types/onyx/Policy';
 
 type SageIntacctCredentials = {companyID: string; userID: string; password: string};
 
@@ -21,7 +21,7 @@ function connectToSageIntacct(policyID: string, credentials: SageIntacctCredenti
     API.write(WRITE_COMMANDS.CONNECT_POLICY_TO_SAGE_INTACCT, parameters, {});
 }
 
-function prepareOnyxDataForExportUpdate(policyID: string, settingName: keyof Connections['intacct']['config']['export'], settingValue: string | null) {
+function prepareOnyxDataForExportUpdate(policyID: string, settingName: keyof SageIntacctExportConfig, settingValue: string | null) {
     const optimisticData: OnyxUpdate[] = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
@@ -32,12 +32,12 @@ function prepareOnyxDataForExportUpdate(policyID: string, settingName: keyof Con
                         config: {
                             export: {
                                 [settingName]: settingValue,
-                                pendingFields: {
-                                    [settingName]: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
-                                },
-                                errorFields: {
-                                    [settingName]: null,
-                                },
+                            },
+                            pendingFields: {
+                                [settingName]: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
+                            },
+                            errorFields: {
+                                [settingName]: null,
                             },
                         },
                     },
@@ -54,14 +54,11 @@ function prepareOnyxDataForExportUpdate(policyID: string, settingName: keyof Con
                 connections: {
                     intacct: {
                         config: {
-                            export: {
-                                [settingName]: settingValue,
-                                pendingFields: {
-                                    [settingName]: null,
-                                },
-                                errorFields: {
-                                    [settingName]: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
-                                },
+                            pendingFields: {
+                                [settingName]: null,
+                            },
+                            errorFields: {
+                                [settingName]: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
                             },
                         },
                     },
@@ -78,14 +75,11 @@ function prepareOnyxDataForExportUpdate(policyID: string, settingName: keyof Con
                 connections: {
                     intacct: {
                         config: {
-                            export: {
-                                [settingName]: settingValue,
-                                pendingFields: {
-                                    [settingName]: null,
-                                },
-                                errorFields: {
-                                    [settingName]: null,
-                                },
+                            pendingFields: {
+                                [settingName]: null,
+                            },
+                            errorFields: {
+                                [settingName]: null,
                             },
                         },
                     },
@@ -177,7 +171,7 @@ function updateSageIntacctNonreimbursableExpensesExportVendor(policyID: string,
     API.write(WRITE_COMMANDS.UPDATE_SAGE_INTACCT_NON_REIMBURSABLE_EXPENSES_EXPORT_VENDOR, parameters, {optimisticData, failureData, successData});
 }
 
-function updateSageIntacctDefaultVendor(policyID: string, settingName: keyof Connections['intacct']['config']['export'], vendor: string) {
+function updateSageIntacctDefaultVendor(policyID: string, settingName: keyof SageIntacctExportConfig, vendor: string) {
     if (settingName === CONST.SAGE_INTACCT_CONFIG.REIMBURSABLE_VENDOR) {
         updateSageIntacctReimbursableExpensesReportExportDefaultVendor(policyID, vendor);
     } else if (settingName === CONST.SAGE_INTACCT_CONFIG.NON_REIMBURSABLE_CREDIT_CARD_VENDOR) {

src/pages/workspace/accounting/intacct/export/SageIntacctDatePage.tsx

@@ -8,10 +8,12 @@ import type {SelectorType} from '@components/SelectionScreen';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@navigation/Navigation';
 import type {WithPolicyProps} from '@pages/workspace/withPolicy';
 import withPolicyConnections from '@pages/workspace/withPolicyConnections';
 import {updateSageIntacctExportDate} from '@userActions/connections/SageIntacct';
+import * as Policy from '@userActions/Policy/Policy';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 
@@ -23,6 +25,7 @@ function SageIntacctDatePage({policy}: WithPolicyProps) {
     const {translate} = useLocalize();
     const policyID = policy?.id ?? '-1';
     const styles = useThemeStyles();
+    const {config} = policy?.connections?.intacct ?? {};
     const {export: exportConfig} = policy?.connections?.intacct?.config ?? {};
     const data: MenuListItem[] = Object.values(CONST.SAGE_INTACCT_EXPORT_DATE).map((dateType) => ({
         value: dateType,
@@ -65,6 +68,10 @@ function SageIntacctDatePage({policy}: WithPolicyProps) {
             featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED}
             onBackButtonPress={() => Navigation.goBack(ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_EXPORT.getRoute(policyID))}
             connectionName={CONST.POLICY.CONNECTIONS.NAME.SAGE_INTACCT}
+            pendingAction={config?.pendingFields?.exportDate}
+            errors={ErrorUtils.getLatestErrorField(config ?? {}, CONST.SAGE_INTACCT_CONFIG.EXPORT_DATE)}
+            errorRowStyles={[styles.ph5, styles.mv2]}
+            onClose={() => Policy.clearSageIntacctErrorField(policyID, CONST.SAGE_INTACCT_CONFIG.EXPORT_DATE)}
         />
     );
 }

src/pages/workspace/accounting/intacct/export/SageIntacctDefaultVendorPage.tsx

@@ -10,11 +10,13 @@ import SelectionScreen from '@components/SelectionScreen';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import {getSageIntacctNonReimbursableActiveDefaultVendor, getSageIntacctVendors} from '@libs/PolicyUtils';
 import type {SettingsNavigatorParamList} from '@navigation/types';
 import variables from '@styles/variables';
 import {updateSageIntacctDefaultVendor} from '@userActions/connections/SageIntacct';
+import * as Policy from '@userActions/Policy/Policy';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -29,20 +31,22 @@ function SageIntacctDefaultVendorPage({route}: SageIntacctDefaultVendorPageProps
 
     const policyID = route.params.policyID ?? '-1';
     const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
+    const {config} = policy?.connections?.intacct ?? {};
+    const {export: exportConfig} = policy?.connections?.intacct?.config ?? {};
 
     const isReimbursable = route.params.reimbursable === CONST.SAGE_INTACCT_CONFIG.REIMBURSABLE;
 
     let defaultVendor;
     let settingName: keyof Connections['intacct']['config']['export'];
     if (!isReimbursable) {
-        const {nonReimbursable} = policy?.connections?.intacct?.config.export ?? {};
+        const {nonReimbursable} = exportConfig ?? {};
         defaultVendor = getSageIntacctNonReimbursableActiveDefaultVendor(policy);
         settingName =
             nonReimbursable === CONST.SAGE_INTACCT_NON_REIMBURSABLE_EXPENSE_TYPE.CREDIT_CARD_CHARGE
                 ? CONST.SAGE_INTACCT_CONFIG.NON_REIMBURSABLE_CREDIT_CARD_VENDOR
                 : CONST.SAGE_INTACCT_CONFIG.NON_REIMBURSABLE_VENDOR;
     } else {
-        const {reimbursableExpenseReportDefaultVendor} = policy?.connections?.intacct?.config.export ?? {};
+        const {reimbursableExpenseReportDefaultVendor} = exportConfig ?? {};
         defaultVendor = reimbursableExpenseReportDefaultVendor;
         settingName = CONST.SAGE_INTACCT_CONFIG.REIMBURSABLE_VENDOR;
     }
@@ -103,6 +107,10 @@ function SageIntacctDefaultVendorPage({route}: SageIntacctDefaultVendorPageProps
             listEmptyContent={listEmptyContent}
             accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
             connectionName={CONST.POLICY.CONNECTIONS.NAME.SAGE_INTACCT}
+            pendingAction={config?.pendingFields?.[settingName]}
+            errors={ErrorUtils.getLatestErrorField(config, settingName)}
+            errorRowStyles={[styles.ph5, styles.mv2]}
+            onClose={() => Policy.clearSageIntacctErrorField(policyID, settingName)}
         />
     );
 }

src/pages/workspace/accounting/intacct/export/SageIntacctExportPage.tsx

@@ -15,6 +15,7 @@ function SageIntacctExportPage({policy}: WithPolicyProps) {
     const styles = useThemeStyles();
     const policyID = policy?.id ?? '-1';
 
+    const {config} = policy?.connections?.intacct ?? {};
     const {export: exportConfig, credentials} = policy?.connections?.intacct?.config ?? {};
 
     const sections = useMemo(
@@ -23,36 +24,46 @@ function SageIntacctExportPage({policy}: WithPolicyProps) {
                 description: translate('workspace.sageIntacct.preferredExporter'),
                 action: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_PREFERRED_EXPORTER.getRoute(policyID)),
                 title: exportConfig?.exporter ?? translate('workspace.sageIntacct.notConfigured'),
-                hasError: !!exportConfig?.errorFields?.exporter,
-                pendingAction: exportConfig?.pendingFields?.exporter,
+                hasError: !!config?.errorFields?.exporter,
+                pendingAction: config?.pendingFields?.exporter,
             },
             {
                 description: translate('workspace.sageIntacct.exportDate.label'),
                 action: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_EXPORT_DATE.getRoute(policyID)),
                 title: exportConfig?.exportDate ? translate(`workspace.sageIntacct.exportDate.values.${exportConfig.exportDate}.label`) : translate(`workspace.sageIntacct.notConfigured`),
-                hasError: !!exportConfig?.errorFields?.exportDate,
-                pendingAction: exportConfig?.pendingFields?.exportDate,
+                hasError: !!config?.errorFields?.exportDate,
+                pendingAction: config?.pendingFields?.exportDate,
             },
             {
                 description: translate('workspace.sageIntacct.reimbursableExpenses.label'),
                 action: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_REIMBURSABLE_EXPENSES.getRoute(policyID)),
                 title: exportConfig?.reimbursable
                     ? translate(`workspace.sageIntacct.reimbursableExpenses.values.${exportConfig.reimbursable}`)
                     : translate('workspace.sageIntacct.notConfigured'),
-                hasError: !!exportConfig?.errorFields?.reimbursable,
-                pendingAction: exportConfig?.pendingFields?.reimbursable,
+                hasError: !!config?.errorFields?.reimbursable || !!config?.errorFields?.reimbursableExpenseReportDefaultVendor,
+                pendingAction: config?.pendingFields?.reimbursable ?? config?.pendingFields?.reimbursableExpenseReportDefaultVendor,
             },
             {
                 description: translate('workspace.sageIntacct.nonReimbursableExpenses.label'),
                 action: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_NON_REIMBURSABLE_EXPENSES.getRoute(policyID)),
                 title: exportConfig?.nonReimbursable
                     ? translate(`workspace.sageIntacct.nonReimbursableExpenses.values.${exportConfig.nonReimbursable}`)
                     : translate('workspace.sageIntacct.notConfigured'),
-                hasError: !!exportConfig?.errorFields?.nonReimbursable,
-                pendingAction: exportConfig?.pendingFields?.nonReimbursable,
+                hasError:
+                    !!config?.errorFields?.nonReimbursable ??
+                    !!config?.errorFields?.nonReimbursableAccount ??
+                    config?.export.nonReimbursable === CONST.SAGE_INTACCT_NON_REIMBURSABLE_EXPENSE_TYPE.VENDOR_BILL
+                        ? !!config?.errorFields?.nonReimbursableVendor
+                        : !!config?.errorFields?.nonReimbursableCreditCardChargeDefaultVendor,
+                pendingAction:
+                    config?.pendingFields?.nonReimbursable ??
+                    config?.errorFields?.nonReimbursableAccount ??
+                    config?.export.nonReimbursable === CONST.SAGE_INTACCT_NON_REIMBURSABLE_EXPENSE_TYPE.VENDOR_BILL
+                        ? config?.pendingFields?.nonReimbursableVendor
+                        : config?.pendingFields?.nonReimbursableCreditCardChargeDefaultVendor,
             },
         ],
-        [exportConfig, policyID, translate],
+        [config, exportConfig, policyID, translate],
     );
 
     return (