[$250] New Feature: "When to export" selector for auto-sync for NetSuite

[yuwenmemon]

Hello! We need to build the following selector in the NetSuite configuration options:

The "When to export" selector in the above mock-up is what we're adding.

The two options should have the following values (copied from the same feature in OldDot)

const accountingMethodOptions = [
    {
        value: 'ACCRUAL',
        text: 'Accrual',
        description: 'Out of pocket expenses will export when final approved',
    },
    {
        value: 'CASH',
        text: 'Cash',
        description: 'Out of pocket expenses will export when paid',
    },
];

Please use the constants defined in Expensify Common though: Expensify/expensify-common#817

The selection should be saved under the property accountingMethod in the NetSuite options.config object.

If there is no accountingMethod property set in the NetSuite config, the selector should default to CASH

Linked Expensify Issue: https://github.com/Expensify/Expensify/issues/422402

Issue Owner

Current Issue Owner: @

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021852432563378960977
• Upwork Job ID: 1852432563378960977
• Last Price Increase: 2024-11-01

Issue Owner

Current Issue Owner: @rojiphil

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @mallenexpensify (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[melvin-bot]

⚠️ It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time ⚠️

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @dubielzyk-expensify (NewFeature)

[yuwenmemon]

Removing NewFeature label since this does not fall under a project, and design has already reviewed.

[twilight2294]

Proposal

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

"When to export" selector for auto-sync for NetSuite

What is the root cause of that problem?

Feature request

What changes do you think we should make in order to solve the problem?

We need to update NetSuiteAdvancedPage :

1. Update the toggle with a menuitem and navigate to new Auto-sync page:

    const menuItems: Array<MenuItemWithSubscribedSettings | ToggleItem | DividerLineItem> = [
        {
            type: 'menuitem',
            title: autoSyncConfig?.autoSync.enabled ? "Enabled" : "Disabled",
            description: translate('workspace.accounting.autoSync'),
            onPress: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_NETSUITE_AUTO_SYNC.getRoute(policyID)),
            hintText: (() => {
                if (!autoSyncConfig?.autoSync.enabled) return undefined;
                return accountingMehtod === CONST.NETSUITE_ACCOUNTING_METHODS.CASH
                    ? 'Out of pocket expenses will export when paid'
                    : 'Out of pocket expenses will export when final approved';
            })(),  
        },

The above text will be converted to spanish as well and will be displayed using translate.

We would need to create a new route and a new screen for the AutoSync page:
Routes:

    POLICY_ACCOUNTING_NETSUITE_AUTO_SYNC: {
        route: 'settings/workspaces/:policyID/connections/netsuite/advanced/autosync',
        getRoute: (policyID: string) => `settings/workspaces/${policyID}/connections/netsuite/advanced/autosync` as const,
    },
    POLICY_ACCOUNTING_NETSUITE_ACCOUNTING_METHOD: {
        route: 'settings/workspaces/:policyID/connections/netsuite/advanced/autosync/accounting-method',
        getRoute: (policyID: string) => `settings/workspaces/${policyID}/connections/netsuite/advanced/autosync/accounting-method` as const,
    },

SCREENS:

            NETSUITE_AUTO_SYNC: 'Policy_Accounting_NetSuite_Auto_Sync',
            NETSUITE_ACCOUNTING_METHOD: 'Policy_Accounting_NetSuite_Accounting_Methog',

We also need to update linking config and modal stack navigator to attach the new pages to the routes.
2. Create a new Page to display the Auto-Sync options:

function NetSuiteAutoSyncPage({policy, route}: NetSuiteAutoSyncPage) {
    const styles = useThemeStyles();
    const {translate} = useLocalize();
    const autoSyncConfig = policy?.connections?.netsuite?.config;
    const policyID = route.params.policyID ?? '-1';
    const backTo = route.params.backTo;
    const isQuickSettingsFlow = backTo;
    return (
        <AccessOrNotFoundWrapper
            policyID={policyID}
            accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
            featureName={CONST.POLICY.MORE_FEATURES.ARE_CATEGORIES_ENABLED}
        >
            <ScreenWrapper
                includeSafeAreaPaddingBottom={false}
                style={[styles.defaultModalContainer]}
                testID={NetSuiteAutoSyncPage.displayName}
            >
                <HeaderWithBackButton
                    title={translate('common.settings')}
                    onBackButtonPress={() => Navigation.goBack(isQuickSettingsFlow ? ROUTES.SETTINGS_CATEGORIES_ROOT.getRoute(policyID, backTo) : undefined)}
                />
                <ToggleSettingOptionRow
                    title={translate('workspace.accounting.autoSync')}
                    // wil be converted to translate and spanish translation too
                    subtitle={'Sync NetSuite and Expensify automatically, every day. Export finalized report in realtime'}
                    isActive={!!autoSyncConfig?.autoSync.enabled}
                    wrapperStyle={[styles.pv2, styles.mh5]}
                    switchAccessibilityLabel={translate('workspace.netsuite.advancedConfig.autoSyncDescription')}
                    shouldPlaceSubtitleBelowSwitch
                    onCloseError={() => Policy.clearNetSuiteAutoSyncErrorField(policyID)}
                    onToggle={(isEnabled) => Connections.updateNetSuiteAutoSync(policyID, isEnabled)}
                    pendingAction={settingsPendingAction([CONST.NETSUITE_CONFIG.AUTO_SYNC], autoSyncConfig?.pendingFields)}
                    errors={ErrorUtils.getLatestErrorField(autoSyncConfig, CONST.NETSUITE_CONFIG.AUTO_SYNC)}
                />
                {!!autoSyncConfig?.autoSync.enabled && (
                    <MenuItemWithTopDescription
                    title={autoSyncConfig.accountingMethod === CONST.NETSUITE_ACCOUNTING_METHODS.ACCRUAL ? 'Accural' : 'Cash'}
                    description='When to export'
                    shouldShowRightIcon
                    onPress={() => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_NETSUITE_ACCOUNTING_METHOD.getRoute(policyID))}
                                        />
                )}

            </ScreenWrapper>
        </AccessOrNotFoundWrapper>
    );
}

NetSuiteAutoSyncPage.displayName = 'NetSuiteAutoSyncPage';

export default withPolicyConnections(NetSuiteAutoSyncPage);

We will always default to CASH. Also whenever we enable the toggle either initial value should be blank or should be set to cash that can be decided during PR phase.

We will add translate and spanish traslations too.

3. Create a accounting method Selecting page:

function NetSuiteAccountingMethodPage({policy}: NetSuiteAccountingMethodPage) {
    const {translate} = useLocalize();
    const styles = useThemeStyles();

    const autoSyncConfig = policy?.connections?.netsuite?.config;
    const [typeSelected, setTypeSelected] = useState(autoSyncConfig?.accountingMethod ?? CONST.NETSUITE_ACCOUNTING_METHODS.ACCRUAL);
    const policyID = policy?.id ?? '0';


    const data = useMemo(() => {
        const accountingMethodOptions = [
            {
                value: 'ACCRUAL',
                text: 'Accrual',
                alternateText: 'Out of pocket expenses will export when final approved',
                keyForList: CONST.NETSUITE_ACCOUNTING_METHODS.ACCRUAL,
                isSelected: typeSelected === CONST.NETSUITE_ACCOUNTING_METHODS.ACCRUAL,

            },
            {
                value: 'CASH',
                text: 'Cash',
                alternateText: 'Out of pocket expenses will export when paid',
                keyForList: CONST.NETSUITE_ACCOUNTING_METHODS.CASH,
                isSelected: typeSelected === CONST.NETSUITE_ACCOUNTING_METHODS.CASH,
            },

        ];

        return accountingMethodOptions;
    }, [translate]);

    const updateAccountingMethod = useCallback(
        (value) => {
          
                Connections.updateNetSuiteReimbursementAccountID(policyID, value, autoSyncConfig?.accountingMethod);
 
            Navigation.goBack(ROUTES.POLICY_ACCOUNTING_NETSUITE_ADVANCED.getRoute(policyID));
        },
        [policyID, autoSyncConfig?.reimbursementAccountID],
    );

    return (
        <ScreenWrapper
            testID={NetSuiteAccountingMethodPage.displayName}
            includeSafeAreaPaddingBottom={false}
            shouldEnablePickerAvoiding={false}
            shouldEnableMaxHeight
        >
            <HeaderWithBackButton
                title={translate('workspace.card.issueCard')}
            />
            <Text style={[ styles.ph5, styles.mv3]}>{'Choose when to export the expenses:'}</Text>
            <SelectionList
                ListItem={RadioListItem}
                onSelectRow={({value}) => {
                    setTypeSelected(value)
    
                        Connections.updateNetSuiteReimbursementAccountID(policyID, value, config?.reimbursementAccountID);

                    Navigation.goBack(ROUTES.POLICY_ACCOUNTING_NETSUITE_AUTO_SYNC.getRoute(policyID));


                }}
                sections={[{data}]}
                shouldSingleExecuteRowSelect
                initiallyFocusedOptionKey={typeSelected}
                shouldUpdateFocusedIndex
                isAlternateTextMultilineSupported
            />
        </ScreenWrapper>
    );
}

Here too, we would need spanish translations which will be done in the PR phase, we also need BE changes to make a new API endpoint which will update the value of AccountingMethod. updateNetSuiteReimbursementAccountID will be implemented on the frontend to set the data optimistically and also call the API

What alternative solutions did you explore? (Optional)

[aimane-chnaif]

@twilight2294 thanks for the proposal. Can you please share demo video?

[twilight2294]

@aimane-chnaif here's the demo video:

Screen.Recording.2024-10-29.at.12.19.07.PM.mov

[aimane-chnaif]

@twilight2294's proposal looks good.
Please make sure to follow instructions in OP.
🎀👀🎀 C+ reviewed

[melvin-bot]

Current assignee @yuwenmemon is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot]

⚠️ Could not update price automatically because there is no linked Upwork Job ID. The BZ team member will need to update the price manually in Upwork.

[twilight2294]

@aimane-chnaif draft above ^, waiting for the API endpoint then i will open up for review,

[yuwenmemon]

Yeah the API will be named UpdateNetSuiteAccountingMethod and the accounting method should be supplied in the accountingMethod param

[twilight2294]

Thanks, updating the PR accordingly

[twilight2294]

@yuwenmemon can you update the auto-sync toggle BE to set accountingMethod to CASH please, also when someone disabled the auto-sync toggle, we should clear the value of accountingMethod too right? if yes then i will update the frontend for this, can you also do it in the BE?

[yuwenmemon]

can you update the auto-sync toggle BE to set accountingMethod to CASH please?

I'm sorry what do you mean by this? The toggle should default to CASH if a value is not explicitly set. Otherwise the client is sending ACCRUAL/CASH in the accountingMethod param when calling the API.

[yuwenmemon]

also when someone disabled the auto-sync toggle, we should clear the value of accountingMethod too right?

No, let's actually just keep the accountingMethod whatever it was. That way if they turn it back on the setting is not reset.

[twilight2294]

I'm sorry what do you mean by this? The toggle should default to CASH if a value is not explicitly set.

that I can do on the frontend, but consider this scene:

1. User opens advance page
2. User clicks on auto-sync > then enables the toggle

In this case for the first time, we should update the accountingMethod in options.config to CASH right, I can do that in the FE but for the Backend we need to set a default value for the first time toggle right ?

[aimane-chnaif]

I am out sick. Please reassign C+ for PR review
Status: PR is in draft

[melvin-bot]

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

[mallenexpensify]

@rojiphil can you help here while @aimane-chnaif is out sick? If not, can you post in #contributor-plus to find a volunteer? Thx

[rojiphil]

@rojiphil can you help here

I am happy to contribute here @mallenexpensify.

[twilight2294]

bump @yuwenmemon on this comment

[twilight2294]

PR ready for review @rojiphil

[yuwenmemon]

In this case for the first time, we should update the accountingMethod in options.config to CASH right, I can do that in the FE but for the Backend we need to set a default value for the first time toggle right ?

All new connections will be created with the accountingMethod already set to ACCRUAL so the default value should just follow what is set in the connection object. if there is no accountingMethod, then go with CASH as the default.

[rojiphil]

All new connections will be created with the accountingMethod already set to ACCRUAL so the default value should just follow what is set in the connection object. if there is no accountingMethod, then go with CASH as the default.

Ah ok. Thanks @yuwenmemon for clarifying.
Also, is the understanding correct that enabling or disabling the auto sync should not impact the configured accounting method i.e the method would remain the same?

[yuwenmemon]

Yes correct.