fix: close HR OAuth WebView modal on connection complete

src/components/ConnectToHRFlow/index.native.tsx

@@ -1,5 +1,6 @@
 import React, {useRef, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
+import type {WebViewNavigation} from 'react-native-webview';
 import {WebView} from 'react-native-webview';
 import ActivityIndicator from '@components/ActivityIndicator';
 import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
@@ -10,6 +11,7 @@ import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
 import type ConnectToHRFlowProps from './types';
 
 function ConnectToHRFlow({setupLink}: ConnectToHRFlowProps) {
@@ -28,6 +30,13 @@ function ConnectToHRFlow({setupLink}: ConnectToHRFlowProps) {
         </View>
     );
 
+    const handleNavigationStateChange = (navState: WebViewNavigation) => {
+        if (!navState.url.includes(ROUTES.CONNECTION_COMPLETE)) {
+            return;
+        }
+        setIsWebViewOpen(false);
+    };
+
     const authToken = session?.authToken ?? null;
     return (
         <Modal
@@ -53,6 +62,7 @@ function ConnectToHRFlow({setupLink}: ConnectToHRFlowProps) {
                     incognito
                     startInLoadingState
                     renderLoading={renderLoading}
+                    onNavigationStateChange={handleNavigationStateChange}
                 />
             </FullPageOfflineBlockingView>
         </Modal>

src/libs/actions/connections/Gusto.ts

@@ -1,4 +1,4 @@
-import type {OnyxEntry, OnyxUpdate} from 'react-native-onyx';
+import type {OnyxUpdate} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import {write} from '@libs/API';
@@ -8,7 +8,6 @@ import {getCommandURL} from '@libs/ApiUtils';
 import {getMicroSecondOnyxErrorWithTranslationKey} from '@libs/ErrorUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {PolicyConnectionSyncProgress} from '@src/types/onyx/Policy';
 
 function getGustoSetupLink(policyID: string) {
     const params: ConnectPolicyToGustoParams = {policyID};
@@ -19,41 +18,17 @@ function getGustoSetupLink(policyID: string) {
     return commandURL + new URLSearchParams(params).toString();
 }
 
-function getGustoSyncProgressOptimisticData(policyID: string): OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS> {
-    return {
-        onyxMethod: Onyx.METHOD.MERGE,
-        key: `${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${policyID}`,
-        value: {
-            stageInProgress: CONST.POLICY.CONNECTIONS.SYNC_STAGE_NAME.GUSTO_SYNC_TITLE,
-            connectionName: CONST.POLICY.CONNECTIONS.NAME.GUSTO,
-            timestamp: new Date().toISOString(),
-        },
-    };
-}
-
-function getGustoSyncProgressFailureData(
-    policyID: string,
-    currentConnectionSyncProgress: OnyxEntry<PolicyConnectionSyncProgress>,
-): OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS> {
-    return {
-        onyxMethod: Onyx.METHOD.SET,
-        key: `${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${policyID}`,
-        value: currentConnectionSyncProgress ?? null,
-    };
-}
-
 function updateGustoApprovalMode(
     policyID: string | undefined,
     approvalMode: ValueOf<typeof CONST.GUSTO.APPROVAL_MODE>,
     currentApprovalMode?: ValueOf<typeof CONST.GUSTO.APPROVAL_MODE> | null,
-    currentConnectionSyncProgress?: OnyxEntry<PolicyConnectionSyncProgress>,
 ) {
     if (!policyID) {
         return;
     }
 
     const previousApprovalMode = currentApprovalMode ?? null;
-    const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY | typeof ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS>> = [
+    const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY>> = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
             key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
@@ -69,7 +44,6 @@ function updateGustoApprovalMode(
                 },
             },
         },
-        getGustoSyncProgressOptimisticData(policyID),
     ];
     const successData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY>> = [
         {
@@ -87,7 +61,7 @@ function updateGustoApprovalMode(
             },
         },
     ];
-    const failureData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY | typeof ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS>> = [
+    const failureData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY>> = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
             key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
@@ -103,24 +77,18 @@ function updateGustoApprovalMode(
                 },
             },
         },
-        getGustoSyncProgressFailureData(policyID, currentConnectionSyncProgress),
     ];
 
     write(WRITE_COMMANDS.UPDATE_GUSTO_APPROVAL_MODE, {policyID, approvalMode}, {optimisticData, successData, failureData});
 }
 
-function updateGustoFinalApprover(
-    policyID: string | undefined,
-    finalApprover: string | null,
-    currentFinalApprover?: string | null,
-    currentConnectionSyncProgress?: OnyxEntry<PolicyConnectionSyncProgress>,
-) {
+function updateGustoFinalApprover(policyID: string | undefined, finalApprover: string | null, currentFinalApprover?: string | null) {
     if (!policyID) {
         return;
     }
 
     const previousFinalApprover = currentFinalApprover ?? null;
-    const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY | typeof ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS>> = [
+    const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY>> = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
             key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
@@ -136,7 +104,6 @@ function updateGustoFinalApprover(
                 },
             },
         },
-        getGustoSyncProgressOptimisticData(policyID),
     ];
     const successData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY>> = [
         {
@@ -154,7 +121,7 @@ function updateGustoFinalApprover(
             },
         },
     ];
-    const failureData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY | typeof ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS>> = [
+    const failureData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY>> = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
             key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
@@ -170,7 +137,6 @@ function updateGustoFinalApprover(
                 },
             },
         },
-        getGustoSyncProgressFailureData(policyID, currentConnectionSyncProgress),
     ];
 
     write(WRITE_COMMANDS.UPDATE_GUSTO_FINAL_APPROVER, {policyID, finalApprover}, {optimisticData, successData, failureData});

src/libs/actions/connections/Zenefits.ts

@@ -1,4 +1,4 @@
-import type {OnyxEntry, OnyxUpdate} from 'react-native-onyx';
+import type {OnyxUpdate} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import {write} from '@libs/API';
@@ -8,7 +8,6 @@ import {getCommandURL} from '@libs/ApiUtils';
 import {getMicroSecondOnyxErrorWithTranslationKey} from '@libs/ErrorUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {PolicyConnectionSyncProgress} from '@src/types/onyx/Policy';
 
 function getZenefitsSetupLink(policyID: string) {
     const params: ConnectPolicyToZenefitsParams = {policyID};
@@ -19,41 +18,17 @@ function getZenefitsSetupLink(policyID: string) {
     return commandURL + new URLSearchParams(params).toString();
 }
 
-function getZenefitsSyncProgressOptimisticData(policyID: string): OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS> {
-    return {
-        onyxMethod: Onyx.METHOD.MERGE,
-        key: `${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${policyID}`,
-        value: {
-            stageInProgress: CONST.POLICY.CONNECTIONS.SYNC_STAGE_NAME.ZENEFITS_SYNC_TITLE,
-            connectionName: CONST.POLICY.CONNECTIONS.NAME.ZENEFITS,
-            timestamp: new Date().toISOString(),
-        },
-    };
-}
-
-function getZenefitsSyncProgressFailureData(
-    policyID: string,
-    currentConnectionSyncProgress: OnyxEntry<PolicyConnectionSyncProgress>,
-): OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS> {
-    return {
-        onyxMethod: Onyx.METHOD.SET,
-        key: `${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${policyID}`,
-        value: currentConnectionSyncProgress ?? null,
-    };
-}
-
 function updateZenefitsApprovalMode(
     policyID: string | undefined,
     approvalMode: ValueOf<typeof CONST.ZENEFITS.APPROVAL_MODE>,
     currentApprovalMode?: ValueOf<typeof CONST.ZENEFITS.APPROVAL_MODE> | null,
-    currentConnectionSyncProgress?: OnyxEntry<PolicyConnectionSyncProgress>,
 ) {
     if (!policyID) {
         return;
     }
 
     const previousApprovalMode = currentApprovalMode ?? null;
-    const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY | typeof ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS>> = [
+    const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY>> = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
             key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
@@ -69,7 +44,6 @@ function updateZenefitsApprovalMode(
                 },
             },
         },
-        getZenefitsSyncProgressOptimisticData(policyID),
     ];
     const successData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY>> = [
         {
@@ -87,7 +61,7 @@ function updateZenefitsApprovalMode(
             },
         },
     ];
-    const failureData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY | typeof ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS>> = [
+    const failureData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY>> = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
             key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
@@ -103,24 +77,18 @@ function updateZenefitsApprovalMode(
                 },
             },
         },
-        getZenefitsSyncProgressFailureData(policyID, currentConnectionSyncProgress),
     ];
 
     write(WRITE_COMMANDS.UPDATE_ZENEFITS_APPROVAL_MODE, {policyID, approvalMode}, {optimisticData, successData, failureData});
 }
 
-function updateZenefitsFinalApprover(
-    policyID: string | undefined,
-    finalApprover: string | null,
-    currentFinalApprover?: string | null,
-    currentConnectionSyncProgress?: OnyxEntry<PolicyConnectionSyncProgress>,
-) {
+function updateZenefitsFinalApprover(policyID: string | undefined, finalApprover: string | null, currentFinalApprover?: string | null) {
     if (!policyID) {
         return;
     }
 
     const previousFinalApprover = currentFinalApprover ?? null;
-    const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY | typeof ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS>> = [
+    const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY>> = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
             key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
@@ -136,7 +104,6 @@ function updateZenefitsFinalApprover(
                 },
             },
         },
-        getZenefitsSyncProgressOptimisticData(policyID),
     ];
     const successData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY>> = [
         {
@@ -154,7 +121,7 @@ function updateZenefitsFinalApprover(
             },
         },
     ];
-    const failureData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY | typeof ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS>> = [
+    const failureData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY>> = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
             key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
@@ -170,7 +137,6 @@ function updateZenefitsFinalApprover(
                 },
             },
         },
-        getZenefitsSyncProgressFailureData(policyID, currentConnectionSyncProgress),
     ];
 
     write(WRITE_COMMANDS.UPDATE_ZENEFITS_FINAL_APPROVER, {policyID, finalApprover}, {optimisticData, successData, failureData});

src/pages/workspace/hr/gusto/GustoApprovalModePage.tsx

@@ -26,7 +26,7 @@ function GustoApprovalModePage({
         getCurrentApprovalMode: (policy) => policy?.connections?.gusto?.config?.approvalMode ?? null,
         getProviderName: () => translate('workspace.hr.gusto.title'),
         getHeaderTitle: () => translate('workspace.hr.approvalMode'),
-        handleSave: ({draftApprovalMode, currentApprovalMode, connectionSyncProgress}) => updateGustoApprovalMode(policyID, draftApprovalMode, currentApprovalMode, connectionSyncProgress),
+        handleSave: ({draftApprovalMode, currentApprovalMode}) => updateGustoApprovalMode(policyID, draftApprovalMode, currentApprovalMode),
     };
 
     return (

src/pages/workspace/hr/gusto/GustoFinalApproverPage.tsx

@@ -23,7 +23,7 @@ function GustoFinalApproverPage({
         getCurrentFinalApprover: (policy) => policy?.connections?.gusto?.config?.finalApprover ?? null,
         getProviderName: () => translate('workspace.hr.gusto.title'),
         getHeaderTitle: () => translate('workspace.hr.finalApprover'),
-        handleSave: ({policyID: id, email, currentFinalApprover, connectionSyncProgress}) => updateGustoFinalApprover(id, email, currentFinalApprover, connectionSyncProgress),
+        handleSave: ({policyID: id, email, currentFinalApprover}) => updateGustoFinalApprover(id, email, currentFinalApprover),
     };
 
     return (

src/pages/workspace/hr/zenefits/ZenefitsApprovalModePage.tsx

@@ -27,8 +27,7 @@ function ZenefitsApprovalModePage({
         getCurrentApprovalMode: (policy) => policy?.connections?.zenefits?.config?.approvalMode ?? null,
         getProviderName: () => translate('workspace.hr.zenefits.title'),
         getHeaderTitle: () => translate('workspace.hr.approvalMode'),
-        handleSave: ({draftApprovalMode, currentApprovalMode, connectionSyncProgress}) =>
-            updateZenefitsApprovalMode(policyID, draftApprovalMode, currentApprovalMode, connectionSyncProgress),
+        handleSave: ({draftApprovalMode, currentApprovalMode}) => updateZenefitsApprovalMode(policyID, draftApprovalMode, currentApprovalMode),
     };
 
     return (

src/pages/workspace/hr/zenefits/ZenefitsFinalApproverPage.tsx

@@ -25,7 +25,7 @@ function ZenefitsFinalApproverPage({
         getCurrentFinalApprover: (policy) => policy?.connections?.zenefits?.config?.finalApprover ?? null,
         getProviderName: () => translate('workspace.hr.zenefits.title'),
         getHeaderTitle: () => translate('workspace.hr.finalApprover'),
-        handleSave: ({policyID: id, email, currentFinalApprover, connectionSyncProgress}) => updateZenefitsFinalApprover(id, email, currentFinalApprover, connectionSyncProgress),
+        handleSave: ({policyID: id, email, currentFinalApprover}) => updateZenefitsFinalApprover(id, email, currentFinalApprover),
     };
 
     return (