[AWAITING PAYMENT] [$250] Sage Intacct - Taxes are not imported for sage intacct integration

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: v9.0.74-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): applausetester+acc1te2@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

Prerequisite
Have a workspace connected to Sage Intacct

1. Navigate to the workspace connected to Sage Intacct
2. Navigate to Accounting > Import > Tax > Enable Tax
3. Wait for the sync to finish

Expected Result:

Taxes are imported and displayed on the menu

Actual Result:

Taxes are not imported to the workspace after the sync is finished

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6690907_1733918354519.2024-12-11_14_49_06.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021866956095465608907
• Upwork Job ID: 1866956095465608907
• Last Price Increase: 2025-02-20
• Automatic offers:
• allgandalf | Reviewer | 106226434
• twilight2294 | Contributor | 106226436

Issue Owner

Current Issue Owner: @

[melvin-bot]

Triggered auto assignment to @garrettmknight (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021866956095465608907

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @allgandalf (External)

[twilight2294]

Edited by proposal-police: This proposal was edited at 2024-12-12 13:36:14 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Feature Request

What is the root cause of that problem?

1. We need to check if the connection's data.taxSolutionIDs property is filled. If it's not, we should not show the tax selector at all:

            {(sageIntacctData?.taxSolutionIDs && sageIntacctData?.taxSolutionIDs.length > 0) 
                 && (
                    <MenuItemWithTopDescription
                        title={sageIntacctConfig?.tax?.syncTax ? sageIntacctConfig?.tax?.taxSolutionID : translate('workspace.accounting.notImported')}
                        description={translate('common.tax')}
                        shouldShowRightIcon
                        onPress={() => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_TAX.getRoute(policyID))}
                        brickRoadIndicator={areSettingsInErrorFields([CONST.SAGE_INTACCT_CONFIG.TAX], sageIntacctConfig?.errorFields) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
                    />
                )}

2. If data.taxSolutionIDs is filled, , we should show the Tax selector but it should look more like the other dimension selectors in the import tab

Details

import {Str} from 'expensify-common';
import React, {useEffect, useState} from 'react';
import {useSharedValue} from 'react-native-reanimated';
import Accordion from '@components/Accordion';
import ConnectionLayout from '@components/ConnectionLayout';
import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
import {clearSageIntacctErrorField, updateSageIntacctSyncTaxConfiguration} from '@libs/actions/connections/SageIntacct';
import OfflineWithFeedback from '@components/OfflineWithFeedback';
import Text from '@components/Text';
import useLocalize from '@hooks/useLocalize';
import usePolicy from '@hooks/usePolicy';
import useThemeStyles from '@hooks/useThemeStyles';
import * as ErrorUtils from '@libs/ErrorUtils';
import Navigation from '@libs/Navigation/Navigation';
import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
import {areSettingsInErrorFields, settingsPendingAction} from '@libs/PolicyUtils';
import ToggleSettingOptionRow from '@pages/workspace/workflows/ToggleSettingsOptionRow';
import CONST from '@src/CONST';
import type {TranslationPaths} from '@src/languages/types';
import ROUTES from '@src/ROUTES';
import type SCREENS from '@src/SCREENS';
import type {SageIntacctMappingName, SageIntacctMappingValue} from '@src/types/onyx/Policy';

type SageIntacctImportTaxPageProps = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.ACCOUNTING.SAGE_INTACCT_MAPPING_TYPE>;

function SageIntacctImportTaxPage({route}: SageIntacctImportTaxPageProps) {
    const {translate} = useLocalize();
    const styles = useThemeStyles();

    const policy = usePolicy(route.params.policyID);
    const mappingName: SageIntacctMappingName = route.params.mapping;
    const policyID: string = policy?.id ?? '-1';
    const sageIntacctConfig = policy?.connections?.intacct?.config;
    const isImportMappingEnable = sageIntacctConfig?.mappings?.[mappingName] !== CONST.SAGE_INTACCT_MAPPING_VALUE.NONE;
    const isAccordionExpanded = useSharedValue(sageIntacctConfig?.tax?.syncTax ?? false);
    const shouldAnimateAccordionSection = useSharedValue(false);


    // We are storing translation keys in the local state for animation purposes.
    // Otherwise, the values change to undefined immediately after clicking, before the closing animation finishes,
    // resulting in a janky animation effect.
    const [translationKeys, setTranslationKey] = useState<DisplayTypeTranslationKeys | undefined>(undefined);

    useEffect(() => {
        if (!isAccordionExpanded) {
            return;
        }
        setTranslationKey(getDisplayTypeTranslationKeys(sageIntacctConfig?.mappings?.[mappingName]));
    }, [isImportMappingEnable, sageIntacctConfig?.mappings, mappingName]);

    return (
        <ConnectionLayout
            displayName={SageIntacctImportTaxPage.displayName}
            headerTitle={'common.tax'}
            accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
            policyID={policyID}
            featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED}
            contentContainerStyle={styles.pb2}
            titleStyle={styles.ph5}
            connectionName={CONST.POLICY.CONNECTIONS.NAME.SAGE_INTACCT}
            onBackButtonPress={() => Navigation.goBack(ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_IMPORT.getRoute(policyID))}
        >
            <Text style={[styles.flexRow, styles.alignItemsCenter, styles.w100, styles.mb5, styles.ph5]}>
                <Text style={[styles.textNormal]}>{translate('workspace.intacct.importTaxDescription')}</Text>
            </Text>
            <ToggleSettingOptionRow
                title={translate('common.tax')}
                switchAccessibilityLabel={translate('workspace.intacct.importTaxDescription')}
                shouldPlaceSubtitleBelowSwitch
                wrapperStyle={[styles.mv3, styles.mh5]}
                isActive={sageIntacctConfig?.tax?.syncTax ?? false}
                onToggle={() => updateSageIntacctSyncTaxConfiguration(policyID, !sageIntacctConfig?.tax?.syncTax)}
                pendingAction={settingsPendingAction([CONST.SAGE_INTACCT_CONFIG.TAX], sageIntacctConfig?.pendingFields)}
                errors={ErrorUtils.getLatestErrorField(sageIntacctConfig ?? {}, CONST.SAGE_INTACCT_CONFIG.TAX)}
                onCloseError={() => clearSageIntacctErrorField(policyID, CONST.SAGE_INTACCT_CONFIG.TAX)}
            />
            <Accordion
                isExpanded={isAccordionExpanded}
                isToggleTriggered={shouldAnimateAccordionSection}
            >
                <OfflineWithFeedback pendingAction={settingsPendingAction([mappingName], sageIntacctConfig?.pendingFields)}>
                    <MenuItemWithTopDescription
                        title={'United Kingdom - VAT'}
                        description={'Tax Solutions'}
                        shouldShowRightIcon
                        onPress={() => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_MAPPINGS_TYPE.getRoute(policyID, mappingName))}
                        brickRoadIndicator={areSettingsInErrorFields([mappingName], sageIntacctConfig?.errorFields) ? 'error' : undefined}
                        hintText={translationKeys?.descriptionKey ? translate(translationKeys?.descriptionKey) : undefined}
                    />
                </OfflineWithFeedback>
            </Accordion>
        </ConnectionLayout>
    );
}

SageIntacctImportTaxPage.displayName = 'SageIntacctImportTaxPage';

export default SageIntacctImportTaxPage;

Note that this is not the complete code, I have not implemented the selector page here, but that is easy to implement and would be done during the PR phase, this way we completely implement the given mocks, note that any minor changes can be done during PR phase.

Note that i have not provided the complete code as it is easy to mock up pages but the flow is clear to me
Final Details :

• When first turned on the selected Tax Solution should be the first one in the list. Afterward, it should be the one that was previously selected
• The tax solution ID should be saved in the config under tax.taxSolutionID

Screen.Recording.2025-02-21.at.9.28.18.AM.mov

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A, we can write UI tests though to see if the option gets enabled or not , but not necessary

What alternative solutions did you explore? (Optional)

[allgandalf]

yeah the option doesn't get enabled when we toggle taxes in import settings, also agree that BE changes are also needed here.

@twilight2294 's proposal LGTM!

🎀👀🎀 C+ reviewed