Fix Gusto sync results review issues

Author: ShridharGoel

src/components/GustoSyncResultsModal.tsx

@@ -1,20 +1,20 @@
 import React, {useState} from 'react';
 import {View} from 'react-native';
-import Button from '@components/Button';
-import FixedFooter from '@components/FixedFooter';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import Icon from '@components/Icon';
-import Modal from '@components/Modal';
-import type {ModalProps} from '@components/Modal/Global/ModalContext';
-import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
-import ScrollView from '@components/ScrollView';
-import Text from '@components/Text';
 import {useMemoizedLazyExpensifyIcons, useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {GustoSyncResult} from '@libs/API/GustoSyncResult';
 import CONST from '@src/CONST';
+import Button from './Button';
+import FixedFooter from './FixedFooter';
+import HeaderWithBackButton from './HeaderWithBackButton';
+import Icon from './Icon';
+import Modal from './Modal';
+import type {ModalProps} from './Modal/Global/ModalContext';
+import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
+import ScrollView from './ScrollView';
+import Text from './Text';
 
 type GustoSyncResultsModalProps = ModalProps & {
     /** Sync result returned by the completed Gusto sync job */
@@ -57,19 +57,20 @@ function GustoSyncResultsModal({result, closeModal}: GustoSyncResultsModalProps)
                     title={translate('workspace.hr.gusto.syncResults.title')}
                     onBackButtonPress={closeResultsModal}
                 />
-                <ScrollView contentContainerStyle={[styles.flexGrow1, styles.ph5]}>
-                    <View style={[styles.alignItemsCenter, styles.mt8, styles.mb8, styles.pRelative]}>
+                <ScrollView contentContainerStyle={[styles.flexGrow1, styles.ph5, styles.pb8]}>
+                    <View style={[styles.alignItemsCenter, styles.mt4, styles.mb4, styles.pRelative]}>
                         <Icon
                             src={illustrations.SyncUsers}
-                            width={88}
-                            height={88}
+                            width={68}
+                            height={68}
                         />
                     </View>
                     <Text style={[styles.textHeadlineH1, styles.mb8]}>{translate('workspace.hr.gusto.syncResults.successTitle')}</Text>
                     {renderResultSummary(translate('workspace.hr.gusto.syncResults.added'), addedCount)}
                     {renderResultSummary(translate('workspace.hr.gusto.syncResults.removed'), removedCount)}
                     <PressableWithoutFeedback
                         accessibilityLabel={translate('workspace.hr.gusto.syncResults.skipped')}
+                        sentryLabel="GustoSyncResultsModal-SkippedEmployees"
                         role={CONST.ROLE.BUTTON}
                         onPress={() => setIsSkippedSectionExpanded((isExpanded) => !isExpanded)}
                         style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}

src/hooks/useGustoSyncResultsModal.ts

@@ -11,10 +11,11 @@ function useGustoSyncResultsModal(policyID: string, connectionSyncProgress: Onyx
     const previousSyncProgress = usePrevious(connectionSyncProgress);
 
     useEffect(() => {
+        const syncResult = connectionSyncProgress?.result;
         const isGustoSyncDoneWithResult =
             connectionSyncProgress?.connectionName === CONST.POLICY.CONNECTIONS.NAME.GUSTO &&
             connectionSyncProgress?.stageInProgress === CONST.POLICY.CONNECTIONS.SYNC_STAGE_NAME.JOB_DONE &&
-            !!connectionSyncProgress?.result;
+            !!syncResult;
         const wasSameGustoResultAlreadyHandled =
             previousSyncProgress?.connectionName === CONST.POLICY.CONNECTIONS.NAME.GUSTO &&
             previousSyncProgress?.stageInProgress === CONST.POLICY.CONNECTIONS.SYNC_STAGE_NAME.JOB_DONE &&
@@ -23,13 +24,13 @@ function useGustoSyncResultsModal(policyID: string, connectionSyncProgress: Onyx
         const didGustoSyncComplete =
             isFocused && isGustoSyncDoneWithResult && !wasSameGustoResultAlreadyHandled;
 
-        if (!didGustoSyncComplete) {
+        if (!didGustoSyncComplete || !syncResult) {
             return;
         }
 
         showModal({
             component: GustoSyncResultsModal,
-            props: {result: connectionSyncProgress.result},
+            props: {result: syncResult},
             id: `gusto-sync-results-${policyID}`,
         });
     }, [

src/languages/en.ts

@@ -6434,8 +6434,8 @@ const translations = {
                 syncResults: {
                     title: 'Gusto sync results',
                     successTitle: 'Successfully synced your Gusto connection!',
-                    added: 'Added to Expensify',
-                    removed: 'Removed from Expensify',
+                    added: 'Added',
+                    removed: 'Removed',
                     skipped: 'Skipped',
                     employeeCount: ({count}: {count: number}) => `${count} ${count === 1 ? 'employee' : 'employees'}`,
                 },

src/languages/es.ts

@@ -6271,8 +6271,8 @@ ${amount} para ${merchant} - ${date}`,
                 syncResults: {
                     title: 'Resultados de sincronización de Gusto',
                     successTitle: '¡Tu conexión de Gusto se sincronizó correctamente!',
-                    added: 'Añadidos a Expensify',
-                    removed: 'Eliminados de Expensify',
+                    added: 'Añadidos',
+                    removed: 'Eliminados',
                     skipped: 'Omitidos',
                     employeeCount: ({count}) => `${count} ${count === 1 ? 'empleado' : 'empleados'}`,
                 },