Add Gusto connected actions

ShridharGoel · ShridharGoel · commit ba5ad389580b · 2026-04-29T21:00:14.000+05:30
diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -6340,6 +6340,12 @@ const translations = {
             gusto: {
                 title: 'Gusto',
                 connect: 'Connect',
+                syncNow: 'Sync now',
+                disconnect: 'Disconnect',
+                lastSync: (relativeDate: string) => `Last synced ${relativeDate}`,
+                syncError: "Can't connect to Gusto",
+                disconnectTitle: 'Disconnect Gusto',
+                disconnectPrompt: 'Are you sure you want to disconnect Gusto?',
                 connectionDescription: 'Connect Gusto to keep employee approvals in sync with your workspace.',
                 approvalMode: 'Approval mode',
                 finalApprover: 'Final approver',
diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -6200,6 +6200,12 @@ ${amount} para ${merchant} - ${date}`,
             gusto: {
                 title: 'Gusto',
                 connect: 'Conectar',
+                syncNow: 'Sincronizar ahora',
+                disconnect: 'Desconectar',
+                lastSync: (relativeDate) => `Última sincronización ${relativeDate}`,
+                syncError: 'No se puede conectar con Gusto',
+                disconnectTitle: 'Desconectar Gusto',
+                disconnectPrompt: '¿Seguro que quieres desconectar Gusto?',
                 connectionDescription: 'Conecta Gusto para mantener sincronizadas las aprobaciones de empleados con tu espacio de trabajo.',
                 approvalMode: 'Modo de aprobación',
                 finalApprover: 'Aprobador final',
diff --git a/src/libs/actions/connections/index.ts b/src/libs/actions/connections/index.ts
@@ -98,10 +98,7 @@ function removePolicyConnection(policy: Policy, connectionName: PolicyConnection
 }
 
 /**
- * This method returns read command and stage in progress for a given accounting integration.
- *
- * @param policyID - ID of the policy for which the sync is needed
- * @param connectionName - Name of the connection, QBO/Xero
+ * This method returns read command and stage in progress for a given policy connection.
  */
 function getSyncConnectionParameters(connectionName: PolicyConnectionName) {
     switch (connectionName) {
@@ -120,16 +117,19 @@ function getSyncConnectionParameters(connectionName: PolicyConnectionName) {
         case CONST.POLICY.CONNECTIONS.NAME.QBD: {
             return {readCommand: READ_COMMANDS.SYNC_POLICY_TO_QUICKBOOKS_DESKTOP, stageInProgress: CONST.POLICY.CONNECTIONS.SYNC_STAGE_NAME.STARTING_IMPORT_QBD};
         }
+        case CONST.POLICY.CONNECTIONS.NAME.GUSTO: {
+            return {readCommand: READ_COMMANDS.SYNC_GUSTO, stageInProgress: CONST.POLICY.CONNECTIONS.SYNC_STAGE_NAME.STARTING_IMPORT_GUSTO};
+        }
         default:
             return undefined;
     }
 }
 
 /**
- * This method helps in syncing policy to the connected accounting integration.
+ * This method helps in syncing policy to the connected integration.
  *
  * @param policy - Policy for which the sync is needed
- * @param connectionName - Name of the connection, QBO/Xero
+ * @param connectionName - Name of the connection
  * @param forceDataRefresh - If true, it will trigger a full data refresh
  */
 function syncConnection(policy: Policy | undefined, connectionName: PolicyConnectionName | undefined, forceDataRefresh = false) {
diff --git a/src/pages/workspace/hr/WorkspaceHRPage.tsx b/src/pages/workspace/hr/WorkspaceHRPage.tsx
@@ -1,28 +1,35 @@
-import React, {useCallback, useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {View} from 'react-native';
+import ActivityIndicator from '@components/ActivityIndicator';
 import Button from '@components/Button';
+import ConfirmModal from '@components/ConfirmModal';
 import ConnectToGustoFlow from '@components/ConnectToGustoFlow';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import MenuItem from '@components/MenuItem';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import Section from '@components/Section';
 import Text from '@components/Text';
+import ThreeDotsMenu from '@components/ThreeDotsMenu';
+import type ThreeDotsMenuProps from '@components/ThreeDotsMenu/types';
 import {useMemoizedLazyExpensifyIcons, useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useOnyx from '@hooks/useOnyx';
 import usePermissions from '@hooks/usePermissions';
 import usePolicy from '@hooks/usePolicy';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWorkspaceDocumentTitle from '@hooks/useWorkspaceDocumentTitle';
+import {isConnectionInProgress, removePolicyConnection, syncConnection} from '@libs/actions/connections';
 import {openPolicyHRPage} from '@libs/actions/PolicyConnections';
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {WorkspaceSplitNavigatorParamList} from '@libs/Navigation/types';
-import {isGustoConnected} from '@libs/PolicyUtils';
+import {getIntegrationLastSuccessfulDate, isGustoConnected} from '@libs/PolicyUtils';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
 
 type WorkspaceHRPageProps = PlatformStackScreenProps<WorkspaceSplitNavigatorParamList, typeof SCREENS.WORKSPACE.HR>;
@@ -32,28 +39,68 @@ function WorkspaceHRPage({
         params: {policyID},
     },
 }: WorkspaceHRPageProps) {
-    const {translate} = useLocalize();
+    const {translate, datetimeToRelative, getLocalDateFromDatetime} = useLocalize();
     const {isBetaEnabled} = usePermissions();
     const styles = useThemeStyles();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const policy = usePolicy(policyID);
     const [activeGustoFlowKey, setActiveGustoFlowKey] = useState<number>();
-    const icons = useMemoizedLazyExpensifyIcons(['GustoSquare']);
+    const [isDisconnectModalOpen, setIsDisconnectModalOpen] = useState(false);
+    const [connectionSyncProgress] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${policyID}`);
+    const icons = useMemoizedLazyExpensifyIcons(['GustoSquare', 'Sync', 'Trashcan']);
     const illustrations = useMemoizedLazyIllustrations(['NewUser']);
+    const gustoConnection = policy?.connections?.gusto;
     const isConnected = isGustoConnected(policy);
+    const isGustoSyncInProgress = connectionSyncProgress?.connectionName === CONST.POLICY.CONNECTIONS.NAME.GUSTO && isConnectionInProgress(connectionSyncProgress, policy);
+    const successfulDate = getIntegrationLastSuccessfulDate(
+        getLocalDateFromDatetime,
+        gustoConnection,
+        connectionSyncProgress?.connectionName === CONST.POLICY.CONNECTIONS.NAME.GUSTO ? connectionSyncProgress : undefined,
+    );
+    const hasGustoSyncError = !isGustoSyncInProgress && gustoConnection?.lastSync?.isSuccessful === false && !!gustoConnection?.lastSync?.errorDate;
+    const lastSyncErrorMessage = hasGustoSyncError ? (gustoConnection?.lastSync?.errorMessage ?? translate('workspace.hr.gusto.syncError')) : undefined;
+    const connectionDescription = useMemo(() => {
+        if (isGustoSyncInProgress && connectionSyncProgress?.stageInProgress) {
+            return translate('workspace.hr.syncStageName', {stage: connectionSyncProgress.stageInProgress});
+        }
+
+        if (successfulDate && !lastSyncErrorMessage) {
+            return translate('workspace.hr.gusto.lastSync', datetimeToRelative(successfulDate));
+        }
+
+        return undefined;
+    }, [connectionSyncProgress?.stageInProgress, datetimeToRelative, isGustoSyncInProgress, lastSyncErrorMessage, successfulDate, translate]);
 
     useWorkspaceDocumentTitle(undefined, 'workspace.common.hr');
 
     const fetchPolicyHRPage = useCallback(() => {
         openPolicyHRPage(policyID);
     }, [policyID]);
 
-    useNetwork({onReconnect: fetchPolicyHRPage});
+    const {isOffline} = useNetwork({onReconnect: fetchPolicyHRPage});
 
     useEffect(() => {
         fetchPolicyHRPage();
     }, [fetchPolicyHRPage]);
 
+    const overflowMenu: ThreeDotsMenuProps['menuItems'] = useMemo(
+        () => [
+            {
+                icon: icons.Sync,
+                text: translate('workspace.hr.gusto.syncNow'),
+                onSelected: () => syncConnection(policy, CONST.POLICY.CONNECTIONS.NAME.GUSTO),
+                disabled: isOffline,
+            },
+            {
+                icon: icons.Trashcan,
+                text: translate('workspace.hr.gusto.disconnect'),
+                onSelected: () => setIsDisconnectModalOpen(true),
+                shouldCallAfterModalHide: true,
+            },
+        ],
+        [icons.Sync, icons.Trashcan, isOffline, policy, translate],
+    );
+
     return (
         <AccessOrNotFoundWrapper
             accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.CONTROL]}
@@ -92,22 +139,55 @@ function WorkspaceHRPage({
                                 title={translate('workspace.hr.gusto.title')}
                                 icon={icons.GustoSquare}
                                 iconType={CONST.ICON_TYPE_AVATAR}
-                                wrapperStyle={[styles.ph0, styles.pv2, styles.mt4]}
+                                wrapperStyle={[styles.ph0, styles.pv2, styles.mt4, !!lastSyncErrorMessage && styles.pb0]}
                                 interactive={false}
-                                shouldShowRightComponent={!isConnected}
+                                description={connectionDescription}
+                                errorText={lastSyncErrorMessage}
+                                errorTextStyle={[styles.mt5]}
+                                shouldShowRedDotIndicator
+                                shouldShowRightComponent
                                 rightComponent={
                                     !isConnected ? (
                                         <Button
                                             small
                                             text={translate('workspace.hr.gusto.connect')}
                                             onPress={() => setActiveGustoFlowKey(Math.random())}
                                         />
-                                    ) : undefined
+                                    ) : isGustoSyncInProgress ? (
+                                        <ActivityIndicator
+                                            style={[styles.popoverMenuIcon]}
+                                            reasonAttributes={{context: 'WorkspaceHRPage.gustoSync'}}
+                                        />
+                                    ) : (
+                                        <ThreeDotsMenu
+                                            shouldSelfPosition
+                                            menuItems={overflowMenu}
+                                            anchorAlignment={{
+                                                horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
+                                                vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
+                                            }}
+                                        />
+                                    )
                                 }
                             />
                         </Section>
                     </View>
                 </ScrollView>
+                <ConfirmModal
+                    title={translate('workspace.hr.gusto.disconnectTitle')}
+                    isVisible={isDisconnectModalOpen}
+                    onConfirm={() => {
+                        if (policy) {
+                            removePolicyConnection(policy, CONST.POLICY.CONNECTIONS.NAME.GUSTO);
+                        }
+                        setIsDisconnectModalOpen(false);
+                    }}
+                    onCancel={() => setIsDisconnectModalOpen(false)}
+                    prompt={translate('workspace.hr.gusto.disconnectPrompt')}
+                    confirmText={translate('workspace.hr.gusto.disconnect')}
+                    cancelText={translate('common.cancel')}
+                    danger
+                />
             </ScreenWrapper>
         </AccessOrNotFoundWrapper>
     );
