Merge pull request Expensify#91070 from software-mansion-labs/merge-hr/connect-flow

[NoQA] [HR Import] ConnectToMergeHRFlow component

Author: grgia

src/components/ConnectToGustoFlow/index.tsx

@@ -8,12 +8,11 @@ import Modal from '@components/Modal';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
-import getGustoSetupLink from '@libs/actions/connections/Gusto';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type ConnectToGustoFlowProps from './types';
+import type ConnectToHRFlowProps from './types';
 
-function ConnectToGustoFlow({policyID}: ConnectToGustoFlowProps) {
+function ConnectToHRFlow({setupLink}: ConnectToHRFlowProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const webViewRef = useRef<WebView>(null);
@@ -24,7 +23,7 @@ function ConnectToGustoFlow({policyID}: ConnectToGustoFlowProps) {
         <View style={[StyleSheet.absoluteFill, styles.fullScreenLoading]}>
             <ActivityIndicator
                 size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
-                reasonAttributes={{context: 'ConnectToGustoFlow'}}
+                reasonAttributes={{context: 'ConnectToHRFlow'}}
             />
         </View>
     );
@@ -46,7 +45,7 @@ function ConnectToGustoFlow({policyID}: ConnectToGustoFlowProps) {
                 <WebView
                     ref={webViewRef}
                     source={{
-                        uri: getGustoSetupLink(policyID),
+                        uri: setupLink,
                         headers: {
                             Cookie: `authToken=${authToken}`,
                         },
@@ -60,4 +59,4 @@ function ConnectToGustoFlow({policyID}: ConnectToGustoFlowProps) {
     );
 }
 
-export default ConnectToGustoFlow;
+export default ConnectToHRFlow;

src/components/ConnectToGustoFlow/types.ts

@@ -0,0 +1,16 @@
+import {useEffect} from 'react';
+import useEnvironment from '@hooks/useEnvironment';
+import {openLink} from '@userActions/Link';
+import type ConnectToHRFlowProps from './types';
+
+function ConnectToHRFlow({setupLink}: ConnectToHRFlowProps) {
+    const {environmentURL} = useEnvironment();
+
+    useEffect(() => {
+        openLink(setupLink, environmentURL);
+    }, [environmentURL, setupLink]);
+
+    return null;
+}
+
+export default ConnectToHRFlow;

…ents/ConnectToGustoFlow/index.native.tsx …ponents/ConnectToHRFlow/index.native.tsxsrc/components/ConnectToGustoFlow/index.native.tsx renamed to src/components/ConnectToHRFlow/index.native.tsx src/components/ConnectToGustoFlow/index.native.tsx renamed to src/components/ConnectToHRFlow/index.native.tsx

@@ -0,0 +1,6 @@
+type ConnectToHRFlowProps = {
+    /** The URL to open for the HR provider's connection flow */
+    setupLink: string;
+};
+
+export default ConnectToHRFlowProps;

src/components/ConnectToHRFlow/index.tsx

@@ -2,84 +2,21 @@ import type {OnyxUpdate} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import {read, write} from '@libs/API';
+import type {ConnectPolicyToMergeParams} from '@libs/API/parameters';
 import {READ_COMMANDS, WRITE_COMMANDS} from '@libs/API/types';
+import {getCommandURL} from '@libs/ApiUtils';
 import {getMicroSecondOnyxErrorWithTranslationKey} from '@libs/ErrorUtils';
 import CONST from '@src/CONST';
 import type {MergeHRProviderSlug} from '@src/CONST/MERGE_HR_PROVIDERS';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {Connections} from '@src/types/onyx/Policy';
 
-/**
- * Fetches a Merge link_token. The token is returned by the server and stored in a RAM-only Onyx key
- * so it is never persisted to disk. The UI reads it to initialize the Merge Link SDK.
- * The actual connection is only established after the user completes the Merge
- * Link flow and the public_token callback is processed by the backend.
- */
-function connectPolicyToMergeHR(policyID: string, integration: MergeHRProviderSlug) {
-    const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY | typeof ONYXKEYS.RAM_ONLY_MERGE_HR_LINK_TOKEN>> = [
-        {
-            onyxMethod: Onyx.METHOD.MERGE,
-            key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
-            value: {
-                connections: {
-                    [CONST.POLICY.CONNECTIONS.NAME.MERGE_HR]: {
-                        config: {
-                            pendingFields: {integration: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD},
-                            errorFields: {integration: null},
-                        },
-                    },
-                },
-            },
-        },
-        {
-            onyxMethod: Onyx.METHOD.SET,
-            key: ONYXKEYS.RAM_ONLY_MERGE_HR_LINK_TOKEN,
-            value: null,
-        },
-    ];
-
-    const successData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY>> = [
-        {
-            onyxMethod: Onyx.METHOD.MERGE,
-            key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
-            value: {
-                connections: {
-                    [CONST.POLICY.CONNECTIONS.NAME.MERGE_HR]: {
-                        config: {
-                            pendingFields: {integration: null},
-                            errorFields: {integration: null},
-                        },
-                    },
-                },
-            },
-        },
-    ];
-
-    const failureData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY>> = [
-        {
-            onyxMethod: Onyx.METHOD.MERGE,
-            key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
-            value: {
-                connections: {
-                    [CONST.POLICY.CONNECTIONS.NAME.MERGE_HR]: {
-                        config: {
-                            pendingFields: {integration: null},
-                            errorFields: {integration: getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage')},
-                        },
-                    },
-                },
-            },
-        },
-    ];
-
-    read(
-        READ_COMMANDS.CONNECT_POLICY_TO_MERGE,
-        {
-            policyID,
-            integration,
-        },
-        {optimisticData, successData, failureData},
-    );
+function getMergeHRSetupLink(policyID: string, integration: MergeHRProviderSlug) {
+    const params: ConnectPolicyToMergeParams = {policyID, integration};
+    const commandURL = getCommandURL({
+        command: READ_COMMANDS.CONNECT_POLICY_TO_MERGE,
+        shouldSkipWebProxy: true,
+    });
+    return commandURL + new URLSearchParams(params).toString();
 }
 
 /**
@@ -247,40 +184,6 @@ function updateMergeHRFinalApprover(policyID: string, finalApprover: string | nu
     );
 }
 
-/**
- * Removes the Merge HR connection from a policy.
- */
-function disconnectMergeHR(policyID: string, currentConnection: Connections[typeof CONST.POLICY.CONNECTIONS.NAME.MERGE_HR]) {
-    const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY | typeof ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS>> = [
-        {
-            onyxMethod: Onyx.METHOD.MERGE,
-            key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
-            value: {
-                connections: {
-                    [CONST.POLICY.CONNECTIONS.NAME.MERGE_HR]: null,
-                },
-            },
-        },
-        {
-            onyxMethod: Onyx.METHOD.SET,
-            key: `${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${policyID}`,
-            value: null,
-        },
-    ];
-
-    const failureData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY | typeof ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS>> = [
-        {
-            onyxMethod: Onyx.METHOD.MERGE,
-            key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
-            value: {
-                connections: {
-                    [CONST.POLICY.CONNECTIONS.NAME.MERGE_HR]: currentConnection,
-                },
-            },
-        },
-    ];
-
-    write(WRITE_COMMANDS.REMOVE_POLICY_CONNECTION, {policyID, connectionName: CONST.POLICY.CONNECTIONS.NAME.MERGE_HR}, {optimisticData, failureData});
-}
+export {syncMergeHR, updateMergeHRApprovalMode, updateMergeHRFinalApprover};
 
-export {connectPolicyToMergeHR, syncMergeHR, updateMergeHRApprovalMode, updateMergeHRFinalApprover, disconnectMergeHR};
+export default getMergeHRSetupLink;

src/components/ConnectToHRFlow/types.ts

@@ -2,7 +2,7 @@ import {useIsFocused} from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
 import {View} from 'react-native';
 import CollapsibleSection from '@components/CollapsibleSection';
-import ConnectToGustoFlow from '@components/ConnectToGustoFlow';
+import ConnectToHRFlow from '@components/ConnectToHRFlow';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
@@ -48,7 +48,7 @@ function WorkspaceHRPage({
     const [connectionSyncProgress] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${policyID}`);
     const icons = useMemoizedLazyExpensifyIcons(['GustoSquare', 'ZenefitsSquare']);
     const illustrations = useMemoizedLazyIllustrations(['NewUser']);
-    const [activeGustoFlowKey, setActiveGustoFlowKey] = useState<number>();
+    const [activeHRFlow, setActiveHRFlow] = useState<{setupLink: string; key: number} | undefined>();
 
     useWorkspaceDocumentTitle(undefined, 'workspace.common.hr');
 
@@ -82,12 +82,12 @@ function WorkspaceHRPage({
 
     const shouldBeBlocked = !HR_BETAS.some(isBetaEnabled);
 
-    const handleConnect = (connectionName: string) => {
-        if (connectionName !== CONST.POLICY.CONNECTIONS.NAME.GUSTO) {
+    const handleConnect = (setupLink: string | undefined) => {
+        if (!setupLink) {
             return;
         }
-        // eslint-disable-next-line react-hooks/purity
-        setActiveGustoFlowKey(Math.random());
+        // eslint-disable-next-line react-hooks/purity -- random key forces remount on every press, even for the same provider
+        setActiveHRFlow({setupLink, key: Math.random()});
     };
 
     return (
@@ -104,10 +104,10 @@ function WorkspaceHRPage({
                 shouldShowOfflineIndicatorInWideScreen
                 offlineIndicatorStyle={styles.mtAuto}
             >
-                {!!activeGustoFlowKey && (
-                    <ConnectToGustoFlow
-                        key={activeGustoFlowKey}
-                        policyID={policyID}
+                {!!activeHRFlow && (
+                    <ConnectToHRFlow
+                        key={activeHRFlow.key}
+                        setupLink={activeHRFlow.setupLink}
                     />
                 )}
                 <HeaderWithBackButton
@@ -130,7 +130,7 @@ function WorkspaceHRPage({
                                         key={card.key}
                                         card={card}
                                         policy={policy}
-                                        handleConnect={() => handleConnect(card.connectionName)}
+                                        handleConnect={() => handleConnect(card.setupLink)}
                                     />
                                 ))}
                                 {connectedCards.length === 0 &&
@@ -139,7 +139,7 @@ function WorkspaceHRPage({
                                             key={card.key}
                                             card={card}
                                             policy={policy}
-                                            handleConnect={() => handleConnect(card.connectionName)}
+                                            handleConnect={() => handleConnect(card.setupLink)}
                                         />
                                     ))}
                             </View>
@@ -156,7 +156,7 @@ function WorkspaceHRPage({
                                             key={card.key}
                                             card={card}
                                             policy={policy}
-                                            handleConnect={() => handleConnect(card.connectionName)}
+                                            handleConnect={() => handleConnect(card.setupLink)}
                                         />
                                     ))}
                                 </CollapsibleSection>