[#Wave-Control - Add Sage Intacct] Add the Connection option and Connection button in NewDot

yuwenmemon commented 3 weeks ago

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

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

Before diving into it, let’s add it to the list of the available connections options.

// src/CONST.ts       

const CONNECTIONS = {
    NAME: {
        // Here we will add other connections names when we add support for them
        QBO: 'quickbooksOnline',
        XERO: 'xero',
        // …
        SAGE_INTACCT: 'intacct',
    },
};

Next, we’re going to show it in the Accounting page. To do this, modify PolicyAccountingPage.tsx:

// src/pages/workspace/accounting/PolicyAccountingPage.tsx

switch (connectionName) {
// ...
case CONST.POLICY.CONNECTIONS.NAME.SAGE_INTACCT:
                return {
                    title: translate('workspace.accounting.sageIntacct'),
                    icon: Expensicons.SageIntacctSquare,
                    setupConnectionButton: (
                        <ConnectToSageIntacctButton
                            policyID={policyID}
                            shouldDisconnectIntegrationBeforeConnecting={isConnectedToIntegration}
                            integrationToDisconnect={integrationToDisconnect}
                        />
                    ),
                    onImportPagePress: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_IMPORT.getRoute(policyID)),
                    onExportPagePress: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_EXPORT.getRoute(policyID)),
                    onAdvancedPagePress: () => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_ADVANCED.getRoute(policyID)),
                };

Creating the connection button

The code for the ConnectToSageIntacctButton.tsx component would look like something like this:

// src/components/ConnectToSageIntacctButton/index.tsx

function ConnectToSageIntacctButton({policyID, shouldDisconnectIntegrationBeforeConnecting, integrationToDisconnect}: ConnectToSageIntacctButtonProps) {
    return (
        <>
            <Button
                onPress={() => {
                    if (shouldDisconnectIntegrationBeforeConnecting && integrationToDisconnect) {
                        setIsDisconnectModalOpen(true);
                        return;
                    }
            // 3 conditions need to be done here (screenshots in the "Connection Process" section)
            // These are:
                    // 1. show prerequisites modal if necessary i.e credentials not present in policy's intacct connection data
            // 2. if secondary workspace with Intacct sync, show a menu with options "Create new connection" and "Reuse existing connection" 
            // 3. otherwise sync by calling the SyncPolicyToSageIntacct command
                }}
                text={translate('workspace.accounting.setup')}
                style={styles.justifyContentCenter}
                small
                isDisabled={isOffline}
            />
            {shouldDisconnectIntegrationBeforeConnecting && isDisconnectModalOpen && integrationToDisconnect && (
                <ConfirmModal
                    title={translate('workspace.accounting.disconnectTitle', CONST.POLICY.CONNECTIONS.NAME.SAGE_INTACCT)}
                    isVisible
                    onConfirm={() => {
                        removePolicyConnection(policyID, integrationToDisconnect);
                        Link.openLink(getSageIntacctSetupLink(policyID), environmentURL);
                        setIsDisconnectModalOpen(false);
                    }}
                    onCancel={() => setIsDisconnectModalOpen(false)}
                    prompt={translate('workspace.accounting.disconnectPrompt', CONST.POLICY.CONNECTIONS.NAME.SAGE_INTACCT)}
                    confirmText={translate('workspace.accounting.disconnect')}
                    cancelText={translate('common.cancel')}
                    danger
                />
            )}
        </>
    );
}

export default React.memo(ConnectToSageIntacctButton);

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~017a8c2faf283b52e8
Upwork Job ID: 1800756578326323366
Last Price Increase: 2024-06-12
Automatic offers:

ishpaul777 | Reviewer | 102709182
hungvu193 | Contributor | 102767547

Issue Owner

Current Issue Owner: @ishpaul777