diff --git a/src/pages/workspace/accounting/PolicyAccountingPage.tsx b/src/pages/workspace/accounting/PolicyAccountingPage.tsx index fbd5b669fa62..1c3bc66a3f42 100644 --- a/src/pages/workspace/accounting/PolicyAccountingPage.tsx +++ b/src/pages/workspace/accounting/PolicyAccountingPage.tsx @@ -1,4 +1,5 @@ -import React, {useMemo, useRef, useState} from 'react'; +import {formatDistanceToNow} from 'date-fns'; +import React, {useEffect, useMemo, useRef, useState} from 'react'; import {ActivityIndicator, View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; @@ -109,6 +110,7 @@ function PolicyAccountingPage({policy, connectionSyncProgress}: PolicyAccounting const {isSmallScreenWidth, windowWidth} = useWindowDimensions(); const [threeDotsMenuPosition, setThreeDotsMenuPosition] = useState({horizontal: 0, vertical: 0}); const [isDisconnectModalOpen, setIsDisconnectModalOpen] = useState(false); + const [datetimeToRelative, setDateTimeToRelative] = useState(''); const threeDotsMenuContainerRef = useRef(null); const isSyncInProgress = !!connectionSyncProgress?.stageInProgress && connectionSyncProgress.stageInProgress !== CONST.POLICY.CONNECTIONS.SYNC_STAGE_NAME.JOB_DONE; @@ -116,6 +118,8 @@ function PolicyAccountingPage({policy, connectionSyncProgress}: PolicyAccounting const accountingIntegrations = Object.values(CONST.POLICY.CONNECTIONS.NAME).filter((name) => !(name === CONST.POLICY.CONNECTIONS.NAME.XERO && !canUseXeroIntegration)); const connectedIntegration = accountingIntegrations.find((integration) => !!policy?.connections?.[integration]) ?? connectionSyncProgress?.connectionName; const policyID = policy?.id ?? ''; + const successfulDate = policy?.connections?.quickbooksOnline?.lastSync?.successfulDate; + const formattedDate = useMemo(() => (successfulDate ? new Date(successfulDate) : new Date()), [successfulDate]); const policyConnectedToXero = connectedIntegration === CONST.POLICY.CONNECTIONS.NAME.XERO; @@ -140,6 +144,10 @@ function PolicyAccountingPage({policy, connectionSyncProgress}: PolicyAccounting [translate, policyID, isOffline], ); + useEffect(() => { + setDateTimeToRelative(formatDistanceToNow(formattedDate, {addSuffix: true})); + }, [formattedDate]); + const connectionsMenuItems: MenuItemProps[] = useMemo(() => { if (isEmptyObject(policy?.connections) && !isSyncInProgress) { return accountingIntegrations.map((integration) => { @@ -168,10 +176,7 @@ function PolicyAccountingPage({policy, connectionSyncProgress}: PolicyAccounting wrapperStyle: [styles.sectionMenuItemTopDescription], shouldShowRightComponent: true, title: integrationData?.title, - - description: isSyncInProgress - ? translate('workspace.accounting.connections.syncStageName', connectionSyncProgress.stageInProgress) - : translate('workspace.accounting.lastSync'), + description: isSyncInProgress ? translate('workspace.accounting.connections.syncStageName', connectionSyncProgress.stageInProgress) : datetimeToRelative, rightComponent: isSyncInProgress ? (