diff --git a/src/pages/workspace/accounting/PolicyAccountingPage.tsx b/src/pages/workspace/accounting/PolicyAccountingPage.tsx index f2f2c9d82b7f..e067d0c20407 100644 --- a/src/pages/workspace/accounting/PolicyAccountingPage.tsx +++ b/src/pages/workspace/accounting/PolicyAccountingPage.tsx @@ -21,6 +21,7 @@ import Text from '@components/Text'; import TextLink from '@components/TextLink'; import ThreeDotsMenu from '@components/ThreeDotsMenu'; import type ThreeDotsMenuProps from '@components/ThreeDotsMenu/types'; +import useExpensifyCardFeeds from '@hooks/useExpensifyCardFeeds'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import usePermissions from '@hooks/usePermissions'; @@ -68,9 +69,7 @@ type RouteParams = { }; function PolicyAccountingPage({policy}: PolicyAccountingPageProps) { - const workspaceAccountID = policy?.workspaceAccountID ?? CONST.DEFAULT_NUMBER_ID; const [connectionSyncProgress] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${policy?.id}`, {canBeMissing: true}); - const [cardSettings] = useOnyx(`${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS}${workspaceAccountID}`, {canBeMissing: true}); const [conciergeChatReportID] = useOnyx(ONYXKEYS.DERIVED.CONCIERGE_CHAT_REPORT_ID, {canBeMissing: true}); const theme = useTheme(); const styles = useThemeStyles(); @@ -90,7 +89,8 @@ function PolicyAccountingPage({policy}: PolicyAccountingPageProps) { const newConnectionName = params?.newConnectionName; const integrationToDisconnect = params?.integrationToDisconnect; const shouldDisconnectIntegrationBeforeConnecting = params?.shouldDisconnectIntegrationBeforeConnecting; - + const policyID = policy?.id; + const allCardSettings = useExpensifyCardFeeds(policyID); const isSyncInProgress = isConnectionInProgress(connectionSyncProgress, policy); const connectionNames = CONST.POLICY.CONNECTIONS.NAME; @@ -100,7 +100,6 @@ function PolicyAccountingPage({policy}: PolicyAccountingPageProps) { const shouldShowEnterCredentials = connectedIntegration && !!synchronizationError && isAuthenticationError(policy, connectedIntegration); - const policyID = policy?.id; // Get the last successful date of the integration. Then, if `connectionSyncProgress` is the same integration displayed and the state is 'jobDone', get the more recent update time of the two. const successfulDate = getIntegrationLastSuccessfulDate( connectedIntegration ? policy?.connections?.[connectedIntegration] : undefined, @@ -114,8 +113,7 @@ function PolicyAccountingPage({policy}: PolicyAccountingPageProps) { const currentXeroOrganization = findCurrentXeroOrganization(tenants, policy?.connections?.xero?.config?.tenantID); const shouldShowSynchronizationError = !!synchronizationError; const shouldShowReinstallConnectorMenuItem = shouldShowSynchronizationError && connectedIntegration === CONST.POLICY.CONNECTIONS.NAME.QBD; - const shouldShowCardReconciliationOption = isExpensifyCardFullySetUp(policy, cardSettings); - + const shouldShowCardReconciliationOption = Object.values(allCardSettings ?? {})?.some((cardSetting) => isExpensifyCardFullySetUp(policy, cardSetting)); const overflowMenu: ThreeDotsMenuProps['menuItems'] = useMemo( () => [ ...(shouldShowReinstallConnectorMenuItem diff --git a/src/pages/workspace/accounting/reconciliation/CardReconciliationPage.tsx b/src/pages/workspace/accounting/reconciliation/CardReconciliationPage.tsx index d37dcb686e16..31edba99299a 100644 --- a/src/pages/workspace/accounting/reconciliation/CardReconciliationPage.tsx +++ b/src/pages/workspace/accounting/reconciliation/CardReconciliationPage.tsx @@ -1,4 +1,4 @@ -import React, {useCallback} from 'react'; +import React, {useCallback, useMemo} from 'react'; import {useOnyx} from 'react-native-onyx'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; @@ -6,6 +6,7 @@ import ScreenWrapper from '@components/ScreenWrapper'; import ScrollView from '@components/ScrollView'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; +import useExpensifyCardFeeds from '@hooks/useExpensifyCardFeeds'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import {getConnectionNameFromRouteParam} from '@libs/AccountingUtils'; @@ -22,32 +23,63 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; +import type ExpensifyCardSettings from '@src/types/onyx/ExpensifyCardSettings'; import type {ConnectionName} from '@src/types/onyx/Policy'; type CardReconciliationPageProps = WithPolicyConnectionsProps & PlatformStackScreenProps; +type FullySetUpCardSetting = { + key: string; + cardSetting: ExpensifyCardSettings; +}; + function CardReconciliationPage({policy, route}: CardReconciliationPageProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const workspaceAccountID = policy?.workspaceAccountID ?? CONST.DEFAULT_NUMBER_ID; + const policyID = policy?.id; + const allCardSettings = useExpensifyCardFeeds(policyID); + + const fullySetUpCardSetting = useMemo(() => { + const entries = Object.entries(allCardSettings ?? {}); + const initialValue: FullySetUpCardSetting = { + key: '', + cardSetting: { + monthlySettlementDate: new Date(), + isMonthlySettlementAllowed: false, + paymentBankAccountID: CONST.DEFAULT_NUMBER_ID, + }, + }; - const [isContinuousReconciliationOn] = useOnyx(`${ONYXKEYS.COLLECTION.EXPENSIFY_CARD_USE_CONTINUOUS_RECONCILIATION}${workspaceAccountID}`, {canBeMissing: true}); - const [cardSettings] = useOnyx(`${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS}${workspaceAccountID}`, {canBeMissing: true}); - const [currentConnectionName] = useOnyx(`${ONYXKEYS.COLLECTION.EXPENSIFY_CARD_CONTINUOUS_RECONCILIATION_CONNECTION}${workspaceAccountID}`, {canBeMissing: true}); + return entries.reduce((acc, [key, cardSetting]) => { + if (cardSetting && isExpensifyCardFullySetUp(policy, cardSetting)) { + return { + key, + cardSetting, + }; + } + return acc; + }, initialValue); + }, [allCardSettings, policy]); + + const domainID = fullySetUpCardSetting.key.split('_').at(-1); + const effectiveDomainID = Number(domainID ?? workspaceAccountID); + + const [isContinuousReconciliationOn] = useOnyx(`${ONYXKEYS.COLLECTION.EXPENSIFY_CARD_USE_CONTINUOUS_RECONCILIATION}${effectiveDomainID}`, {canBeMissing: true}); + const [currentConnectionName] = useOnyx(`${ONYXKEYS.COLLECTION.EXPENSIFY_CARD_CONTINUOUS_RECONCILIATION_CONNECTION}${effectiveDomainID}`, {canBeMissing: true}); const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST, {canBeMissing: true}); - const paymentBankAccountID = cardSettings?.paymentBankAccountID ?? CONST.DEFAULT_NUMBER_ID; + const paymentBankAccountID = fullySetUpCardSetting.cardSetting?.paymentBankAccountID ?? CONST.DEFAULT_NUMBER_ID; const bankAccountTitle = bankAccountList?.[paymentBankAccountID]?.title ?? ''; - const policyID = policy?.id; const {connection} = route.params; const connectionName = getConnectionNameFromRouteParam(connection) as ConnectionName; const autoSync = !!policy?.connections?.[connectionName]?.config?.autoSync?.enabled; - const shouldShow = isExpensifyCardFullySetUp(policy, cardSettings); + const shouldShow = !!fullySetUpCardSetting.cardSetting?.paymentBankAccountID; const handleToggleContinuousReconciliation = (value: boolean) => { - toggleContinuousReconciliation(workspaceAccountID, value, connectionName, currentConnectionName); + toggleContinuousReconciliation(effectiveDomainID, value, connectionName, currentConnectionName); if (value) { Navigation.navigate(ROUTES.WORKSPACE_ACCOUNTING_RECONCILIATION_ACCOUNT_SETTINGS.getRoute(policyID, connection)); }