[#Wave-Control - Add Sage Intacct] Settings Configuration in NewDot: Advanced

[yuwenmemon]

Tracking GH: https://github.com/Expensify/Expensify/issues/388780

Design doc section: https://docs.google.com/document/d/1k3ZFw8KB55yPUSCG6KYZlwpwEtmRt3eUshwxs7bZq5I/edit#heading=h.gw4gdhn06u76

---

You will find in the following issue the pseudocode for the different flows. Use them as a guide in your implementation.

Import flow

Main page

function SageIntacctAdvancedPage({policy}: WithPolicyProps) {
    const {syncReimbursedReports, reimbursementAccountID} = policy?.connections?.intacct?.config?.sync ?? {};
    const {autoSync, pendingFields, errorFields} = policy?.connections?.intacct?.config ?? {};

    const currentSageIntacctOrganizationName = useMemo(() => getCurrentSageIntacctOrganizationName(policy ?? undefined), [policy]);

    const toggleSections = useMemo(() => [
        {
            label: translate('workspace.sageIntacct.autoSync'),
            value: !!autoSync,
            onToggle: (enabled) => Connections.updateSageIntacctAutoSync(policyID, enabled),
            pendingAction: pendingFields?.autoSync,
            error: errorFields?.autoSync,
            description: translate('workspace.sageIntacct.autoSyncDescription'),
        },
        {
            label: translate('workspace.sageIntacct.inviteEmployees'),
            value: !!pendingFields?.importEmployees,
            onToggle: (enabled) => {
                Connections.updateSageIntacctInviteEmployees(policyID, enabled);
                Connections.updateSageIntacctApprovalMode(policyID, enabled ? CONST.SAGE_INTACCT.APPROVAL_MODE.MANUAL : null);
            },
            pendingAction: pendingFields?.importEmployees,
            error: errorFields?.importEmployees,
            description: translate('workspace.sageIntacct.inviteEmployeesDescription'),
        },
        {
            label: translate('workspace.sageIntacct.syncReimbursedReports'),
            value: !!syncReimbursedReports,
            onToggle: (enabled) => Connections.updateSageIntacctSyncReimbursedReports(policyID, enabled),
            pendingAction: pendingFields?.sync?.syncReimbursedReports,
            error: errorFields?.sync?.syncReimbursedReports,
            description: translate('workspace.sageIntacct.syncReimbursedReportsDescription'),
        },
    	 ], 
        [
		//... useMemo() dependencies
        ],
    );


    return (
        <ConnectionLayout
            displayName={SageIntacctAdvancedPage.displayName}
            headerTitle="workspace.accounting.advanced"
            headerSubtitle={currentSageIntacctOrganizationName}
            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}
        >
            {toggleSections.map((section) => (
                <OfflineWithFeedback key={section.label} pendingAction={section.pendingAction}>
                    <View style={[styles.flexRow, styles.mb4, styles.alignItemsCenter, styles.justifyContentBetween]}>
                        <View style={styles.flex1}>
                            <Text fontSize={variables.fontSizeNormal}>{section.label}</Text>
                            <Text style={styles.textSupporting}>{section.description}</Text>
                        </View>
                        <View style={[styles.flex1, styles.alignItemsEnd, styles.pl3]}>
                            <Switch
                                accessibilityLabel={section.label}
                                isOn={section.value}
                                onToggle={section.onToggle}
                            />
                        </View>
                    </View>
                </OfflineWithFeedback>
            ))}

            <OfflineWithFeedback key={translate('workspace.sageIntacct.paymentAccount')} pendingAction={pendingFields?.sync?.reimbursementAccountID}>
                <MenuItem
                    title={reimbursementAccountID || translate('workspace.sageIntacct.notConfigured')}
                    shouldShowRightIcon
                    onPress={() => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_PAYMENT_ACCOUNT.getRoute(policyID))}
                    brickRoadIndicator={errorFields?.reimbursementAccountID ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
                />
            </OfflineWithFeedback>
        </ConnectionLayout>
    );
}

SageIntacctAdvancedPage.displayName = 'PolicySageIntacctAdvancedPage';

export default withPolicy(SageIntacctAdvancedPage);

Issue Owner

Current Issue Owner: @hungvu193

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @johncschuster (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 - @shawnborton (NewFeature)