diff --git a/src/components/AvatarWithDisplayName.tsx b/src/components/AvatarWithDisplayName.tsx index 38bf3912ae4b..187acf2536c5 100644 --- a/src/components/AvatarWithDisplayName.tsx +++ b/src/components/AvatarWithDisplayName.tsx @@ -1,7 +1,7 @@ import React, {useCallback, useEffect, useRef} from 'react'; import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx, withOnyx} from 'react-native-onyx'; import type {ValueOf} from 'type-fest'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; @@ -58,12 +58,16 @@ function AvatarWithDisplayName({ const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); - const title = ReportUtils.getReportName(report); + const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID}`); + const [invoiceReceiverPolicy] = useOnyx( + `${ONYXKEYS.COLLECTION.POLICY}${parentReport?.invoiceReceiver && 'policyID' in parentReport.invoiceReceiver ? parentReport.invoiceReceiver.policyID : -1}`, + ); + const title = ReportUtils.getReportName(report, undefined, undefined, invoiceReceiverPolicy); const subtitle = ReportUtils.getChatRoomSubtitle(report); const parentNavigationSubtitleData = ReportUtils.getParentNavigationSubtitle(report); const isMoneyRequestOrReport = ReportUtils.isMoneyRequestReport(report) || ReportUtils.isMoneyRequest(report) || ReportUtils.isTrackExpenseReport(report) || ReportUtils.isInvoiceReport(report); - const icons = ReportUtils.getIcons(report, personalDetails, null, '', -1, policy); + const icons = ReportUtils.getIcons(report, personalDetails, null, '', -1, policy, invoiceReceiverPolicy); const ownerPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs(report?.ownerAccountID ? [report.ownerAccountID] : [], personalDetails); const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(Object.values(ownerPersonalDetails) as PersonalDetails[], false); const shouldShowSubscriptAvatar = ReportUtils.shouldReportShowSubscript(report); diff --git a/src/components/LHNOptionsList/LHNOptionsList.tsx b/src/components/LHNOptionsList/LHNOptionsList.tsx index 5f06fb78049a..4c5625ec72a2 100644 --- a/src/components/LHNOptionsList/LHNOptionsList.tsx +++ b/src/components/LHNOptionsList/LHNOptionsList.tsx @@ -116,10 +116,20 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio const renderItem = useCallback( ({item: reportID}: RenderItemProps): ReactElement => { const itemFullReport = reports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`]; + const itemParentReport = reports?.[`${ONYXKEYS.COLLECTION.REPORT}${itemFullReport?.parentReportID ?? '-1'}`]; const itemReportActions = reportActions?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`]; const itemParentReportActions = reportActions?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${itemFullReport?.parentReportID}`]; const itemParentReportAction = itemParentReportActions?.[itemFullReport?.parentReportActionID ?? '-1']; + let invoiceReceiverPolicyID = '-1'; + if (itemFullReport?.invoiceReceiver && 'policyID' in itemFullReport.invoiceReceiver) { + invoiceReceiverPolicyID = itemFullReport.invoiceReceiver.policyID; + } + if (itemParentReport?.invoiceReceiver && 'policyID' in itemParentReport.invoiceReceiver) { + invoiceReceiverPolicyID = itemParentReport.invoiceReceiver.policyID; + } + const itemInvoiceReceiverPolicy = policy?.[`${ONYXKEYS.COLLECTION.POLICY}${invoiceReceiverPolicyID}`]; + const iouReportIDOfLastAction = OptionsListUtils.getIOUReportIDOfLastAction(itemFullReport); const itemIouReportReportActions = iouReportIDOfLastAction ? reportActions?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${iouReportIDOfLastAction}`] : undefined; @@ -148,6 +158,7 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio parentReportAction={itemParentReportAction} iouReportReportActions={itemIouReportReportActions} policy={itemPolicy} + invoiceReceiverPolicy={itemInvoiceReceiverPolicy} personalDetails={personalDetails ?? {}} transaction={itemTransaction} lastReportActionTransaction={lastReportActionTransaction} diff --git a/src/components/LHNOptionsList/OptionRowLHNData.tsx b/src/components/LHNOptionsList/OptionRowLHNData.tsx index 30ea32642190..dd2848e1ef62 100644 --- a/src/components/LHNOptionsList/OptionRowLHNData.tsx +++ b/src/components/LHNOptionsList/OptionRowLHNData.tsx @@ -21,6 +21,7 @@ function OptionRowLHNData({ personalDetails = {}, preferredLocale = CONST.LOCALES.DEFAULT, policy, + invoiceReceiverPolicy, receiptTransactions, parentReportAction, iouReportReportActions, @@ -50,6 +51,7 @@ function OptionRowLHNData({ parentReportAction, hasViolations: !!shouldDisplayViolations || shouldDisplayReportViolations, transactionViolations, + invoiceReceiverPolicy, }); if (deepEqual(item, optionItemRef.current)) { return optionItemRef.current; @@ -74,6 +76,7 @@ function OptionRowLHNData({ transactionViolations, canUseViolations, receiptTransactions, + invoiceReceiverPolicy, shouldDisplayReportViolations, ]); diff --git a/src/components/LHNOptionsList/types.ts b/src/components/LHNOptionsList/types.ts index 2c3637fa5c8e..6e37b6a54646 100644 --- a/src/components/LHNOptionsList/types.ts +++ b/src/components/LHNOptionsList/types.ts @@ -50,6 +50,9 @@ type OptionRowLHNDataProps = { /** The policy which the user has access to and which the report could be tied to */ policy?: OnyxEntry; + /** Invoice receiver policy */ + invoiceReceiverPolicy?: OnyxEntry; + /** The action from the parent report */ parentReportAction?: OnyxEntry; diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index 8e97eb0d6157..7a2e9155d1c7 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -3,7 +3,7 @@ import React, {useMemo, useState} from 'react'; import type {StyleProp, ViewStyle} from 'react-native'; import {View} from 'react-native'; import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx, withOnyx} from 'react-native-onyx'; import Button from '@components/Button'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; @@ -140,6 +140,9 @@ function ReportPreview({ const [nonHeldAmount, fullAmount] = ReportUtils.getNonHeldAndFullAmount(iouReport, policy); const hasOnlyHeldExpenses = ReportUtils.hasOnlyHeldExpenses(iouReport?.reportID ?? ''); const [paymentType, setPaymentType] = useState(); + const [invoiceReceiverPolicy] = useOnyx( + `${ONYXKEYS.COLLECTION.POLICY}${chatReport?.invoiceReceiver && 'policyID' in chatReport.invoiceReceiver ? chatReport.invoiceReceiver.policyID : -1}`, + ); const managerID = iouReport?.managerID ?? action.childManagerAccountID ?? 0; const {totalDisplaySpend, reimbursableSpend} = ReportUtils.getMoneyRequestSpendBreakdown(iouReport); @@ -275,7 +278,7 @@ function ReportPreview({ if (isPolicyExpenseChat) { payerOrApproverName = ReportUtils.getPolicyName(chatReport); } else if (isInvoiceRoom) { - payerOrApproverName = ReportUtils.getInvoicePayerName(chatReport); + payerOrApproverName = ReportUtils.getInvoicePayerName(chatReport, invoiceReceiverPolicy); } else { payerOrApproverName = ReportUtils.getDisplayNameForParticipant(managerID, true); } diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 6cb833bb4a39..d0211306f23f 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -2052,6 +2052,7 @@ function getIcons( defaultName = '', defaultAccountID = -1, policy?: OnyxInputOrEntry, + invoiceReceiverPolicy?: OnyxInputOrEntry, ): Icon[] { if (isEmptyObject(report)) { const fallbackIcon: Icon = { @@ -2130,7 +2131,7 @@ function getIcons( icons.push(...getIconsForParticipants([report?.invoiceReceiver.accountID], personalDetails)); } else { const receiverPolicyID = report?.invoiceReceiver?.policyID; - const receiverPolicy = getPolicy(receiverPolicyID); + const receiverPolicy = invoiceReceiverPolicy ?? getPolicy(receiverPolicyID); if (!isEmptyObject(receiverPolicy)) { icons.push({ source: receiverPolicy?.avatarURL ?? getDefaultWorkspaceAvatar(receiverPolicy.name), @@ -2210,7 +2211,7 @@ function getIcons( } const receiverPolicyID = invoiceRoomReport?.invoiceReceiver?.policyID; - const receiverPolicy = getPolicy(receiverPolicyID); + const receiverPolicy = invoiceReceiverPolicy ?? getPolicy(receiverPolicyID); if (!isEmptyObject(receiverPolicy)) { icons.push({ @@ -2664,7 +2665,7 @@ function getAvailableReportFields(report: Report, policyReportFields: PolicyRepo /** * Get the title for an IOU or expense chat which will be showing the payer and the amount */ -function getMoneyRequestReportName(report: OnyxEntry, policy?: OnyxEntry): string { +function getMoneyRequestReportName(report: OnyxEntry, policy?: OnyxEntry, invoiceReceiverPolicy?: OnyxEntry): string { const isReportSettled = isSettled(report?.reportID ?? '-1'); const reportFields = isReportSettled ? report?.fieldList : getReportFieldsByPolicyID(report?.policyID ?? '-1'); const titleReportField = getFormulaTypeReportField(reportFields ?? {}); @@ -2681,7 +2682,7 @@ function getMoneyRequestReportName(report: OnyxEntry, policy?: OnyxEntry payerOrApproverName = getPolicyName(report, false, policy); } else if (isInvoiceReport(report)) { const chatReport = getReportOrDraftReport(report?.chatReportID); - payerOrApproverName = getInvoicePayerName(chatReport); + payerOrApproverName = getInvoicePayerName(chatReport, invoiceReceiverPolicy); } else { payerOrApproverName = getDisplayNameForParticipant(report?.managerID) ?? ''; } @@ -3359,7 +3360,7 @@ function getAdminRoomInvitedParticipants(parentReportAction: OnyxEntry): string { +function getInvoicePayerName(report: OnyxEntry, invoiceReceiverPolicy?: OnyxEntry): string { const invoiceReceiver = report?.invoiceReceiver; const isIndividual = invoiceReceiver?.type === CONST.REPORT.INVOICE_RECEIVER_TYPE.INDIVIDUAL; @@ -3367,7 +3368,7 @@ function getInvoicePayerName(report: OnyxEntry): string { return PersonalDetailsUtils.getDisplayNameOrDefault(allPersonalDetails?.[invoiceReceiver.accountID]); } - return getPolicyName(report, false, allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${invoiceReceiver?.policyID}`]); + return getPolicyName(report, false, invoiceReceiverPolicy ?? allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${invoiceReceiver?.policyID}`]); } /** @@ -3443,13 +3444,13 @@ function getReportActionMessage(reportAction: OnyxEntry, reportID? /** * Get the title for an invoice room. */ -function getInvoicesChatName(report: OnyxEntry): string { +function getInvoicesChatName(report: OnyxEntry, receiverPolicy: OnyxEntry): string { const invoiceReceiver = report?.invoiceReceiver; const isIndividual = invoiceReceiver?.type === CONST.REPORT.INVOICE_RECEIVER_TYPE.INDIVIDUAL; const invoiceReceiverAccountID = isIndividual ? invoiceReceiver.accountID : -1; const invoiceReceiverPolicyID = isIndividual ? '' : invoiceReceiver?.policyID ?? '-1'; - const isCurrentUserReceiver = - (isIndividual && invoiceReceiverAccountID === currentUserAccountID) || (!isIndividual && PolicyUtils.isPolicyEmployee(invoiceReceiverPolicyID, allPolicies)); + const invoiceReceiverPolicy = receiverPolicy ?? getPolicy(invoiceReceiverPolicyID); + const isCurrentUserReceiver = (isIndividual && invoiceReceiverAccountID === currentUserAccountID) || (!isIndividual && PolicyUtils.isPolicyAdmin(invoiceReceiverPolicy)); if (isCurrentUserReceiver) { return getPolicyName(report); @@ -3459,14 +3460,13 @@ function getInvoicesChatName(report: OnyxEntry): string { return PersonalDetailsUtils.getDisplayNameOrDefault(allPersonalDetails?.[invoiceReceiverAccountID]); } - // TODO: Check this flow in a scope of the Invoice V0.3 - return getPolicyName(report, false, allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${invoiceReceiverPolicyID}`]); + return getPolicyName(report, false, invoiceReceiverPolicy); } /** * Get the title for a report. */ -function getReportName(report: OnyxEntry, policy?: OnyxEntry, parentReportActionParam?: OnyxInputOrEntry): string { +function getReportName(report: OnyxEntry, policy?: OnyxEntry, parentReportActionParam?: OnyxInputOrEntry, invoiceReceiverPolicy?: OnyxEntry): string { let formattedName: string | undefined; const parentReportAction = parentReportActionParam ?? ReportActionsUtils.getParentReportAction(report); const parentReportActionMessage = ReportActionsUtils.getReportActionMessage(parentReportAction); @@ -3537,12 +3537,16 @@ function getReportName(report: OnyxEntry, policy?: OnyxEntry, pa formattedName = getPolicyExpenseChatName(report, policy); } - if (isMoneyRequestReport(report) || isInvoiceReport(report)) { + if (isMoneyRequestReport(report)) { formattedName = getMoneyRequestReportName(report, policy); } + if (isInvoiceReport(report)) { + formattedName = getMoneyRequestReportName(report, policy, invoiceReceiverPolicy); + } + if (isInvoiceRoom(report)) { - formattedName = getInvoicesChatName(report); + formattedName = getInvoicesChatName(report, invoiceReceiverPolicy); } if (isArchivedRoom(report, getReportNameValuePairs(report?.reportID))) { @@ -3553,10 +3557,6 @@ function getReportName(report: OnyxEntry, policy?: OnyxEntry, pa formattedName = getDisplayNameForParticipant(currentUserAccountID, undefined, undefined, true); } - if (isInvoiceRoom(report)) { - formattedName = getInvoicesChatName(report); - } - if (formattedName) { return formatReportLastMessageText(formattedName); } @@ -3631,14 +3631,14 @@ function getPendingChatMembers(accountIDs: number[], previousPendingChatMembers: /** * Gets the parent navigation subtitle for the report */ -function getParentNavigationSubtitle(report: OnyxEntry): ParentNavigationSummaryParams { +function getParentNavigationSubtitle(report: OnyxEntry, invoiceReceiverPolicy?: OnyxEntry): ParentNavigationSummaryParams { const parentReport = getParentReport(report); if (isEmptyObject(parentReport)) { return {}; } if (isInvoiceReport(report) || isInvoiceRoom(parentReport)) { - let reportName = `${getPolicyName(parentReport)} & ${getInvoicePayerName(parentReport)}`; + let reportName = `${getPolicyName(parentReport)} & ${getInvoicePayerName(parentReport, invoiceReceiverPolicy)}`; if (isArchivedRoom(parentReport, getReportNameValuePairs(parentReport?.reportID))) { reportName += ` (${Localize.translateLocal('common.archived')})`; diff --git a/src/libs/SidebarUtils.ts b/src/libs/SidebarUtils.ts index eb13915c6f47..cd581da141d2 100644 --- a/src/libs/SidebarUtils.ts +++ b/src/libs/SidebarUtils.ts @@ -244,6 +244,7 @@ function getOptionData({ parentReportAction, hasViolations, transactionViolations, + invoiceReceiverPolicy, }: { report: OnyxEntry; reportActions: OnyxEntry; @@ -252,6 +253,7 @@ function getOptionData({ policy: OnyxEntry | undefined; parentReportAction: OnyxEntry | undefined; hasViolations: boolean; + invoiceReceiverPolicy?: OnyxEntry; transactionViolations?: OnyxCollection; }): ReportUtils.OptionData | undefined { // When a user signs out, Onyx is cleared. Due to the lazy rendering with a virtual list, it's possible for @@ -462,13 +464,13 @@ function getOptionData({ result.phoneNumber = personalDetail?.phoneNumber; } - const reportName = ReportUtils.getReportName(report, policy); + const reportName = ReportUtils.getReportName(report, policy, undefined, invoiceReceiverPolicy); result.text = reportName; result.subtitle = subtitle; result.participantsList = participantPersonalDetailList; - result.icons = ReportUtils.getIcons(report, personalDetails, personalDetail?.avatar, personalDetail?.login, personalDetail?.accountID, policy); + result.icons = ReportUtils.getIcons(report, personalDetails, personalDetail?.avatar, personalDetail?.login, personalDetail?.accountID, policy, invoiceReceiverPolicy); result.searchText = OptionsListUtils.getSearchText(report, reportName, participantPersonalDetailList, result.isChatRoom || result.isPolicyExpenseChat, result.isThread); result.displayNamesWithTooltips = displayNamesWithTooltips; diff --git a/src/pages/home/HeaderView.tsx b/src/pages/home/HeaderView.tsx index 481a497fe2a7..120b5d8f5f9f 100644 --- a/src/pages/home/HeaderView.tsx +++ b/src/pages/home/HeaderView.tsx @@ -1,7 +1,7 @@ import React, {memo} from 'react'; import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx, withOnyx} from 'react-native-onyx'; import Badge from '@components/Badge'; import Button from '@components/Button'; import CaretWrapper from '@components/CaretWrapper'; @@ -64,6 +64,8 @@ type HeaderViewProps = HeaderViewOnyxProps & { function HeaderView({report, personalDetails, parentReport, parentReportAction, policy, reportID, onNavigationMenuButtonClicked, shouldUseNarrowLayout = false}: HeaderViewProps) { const [isDeleteTaskConfirmModalVisible, setIsDeleteTaskConfirmModalVisible] = React.useState(false); + const [invoiceReceiverPolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report.invoiceReceiver && 'policyID' in report.invoiceReceiver ? report.invoiceReceiver.policyID : -1}`); + const {translate} = useLocalize(); const theme = useTheme(); const styles = useThemeStyles(); @@ -82,7 +84,7 @@ function HeaderView({report, personalDetails, parentReport, parentReportAction, const isTaskReport = ReportUtils.isTaskReport(report); const reportHeaderData = !isTaskReport && !isChatThread && report.parentReportID ? parentReport : report; // Use sorted display names for the title for group chats on native small screen widths - const title = ReportUtils.getReportName(reportHeaderData, undefined, parentReportAction); + const title = ReportUtils.getReportName(reportHeaderData, undefined, parentReportAction, invoiceReceiverPolicy); const subtitle = ReportUtils.getChatRoomSubtitle(reportHeaderData); const parentNavigationSubtitleData = ReportUtils.getParentNavigationSubtitle(reportHeaderData); const reportDescription = ReportUtils.getReportDescriptionText(report); @@ -129,7 +131,7 @@ function HeaderView({report, personalDetails, parentReport, parentReportAction, const shouldShowSubscript = ReportUtils.shouldReportShowSubscript(report); const defaultSubscriptSize = ReportUtils.isExpenseRequest(report) ? CONST.AVATAR_SIZE.SMALL_NORMAL : CONST.AVATAR_SIZE.DEFAULT; - const icons = ReportUtils.getIcons(reportHeaderData, personalDetails); + const icons = ReportUtils.getIcons(reportHeaderData, personalDetails, null, '', -1, undefined, invoiceReceiverPolicy); const brickRoadIndicator = ReportUtils.hasReportNameError(report) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''; const shouldShowBorderBottom = !isTaskReport || !shouldUseNarrowLayout; const shouldDisableDetailPage = ReportUtils.shouldDisableDetailPage(report); diff --git a/src/pages/home/report/ReportActionItemCreated.tsx b/src/pages/home/report/ReportActionItemCreated.tsx index 1d7c0d5c27e8..ec9f5ea9915f 100644 --- a/src/pages/home/report/ReportActionItemCreated.tsx +++ b/src/pages/home/report/ReportActionItemCreated.tsx @@ -2,7 +2,7 @@ import lodashIsEqual from 'lodash/isEqual'; import React, {memo} from 'react'; import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx, withOnyx} from 'react-native-onyx'; import MultipleAvatars from '@components/MultipleAvatars'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; @@ -36,29 +36,30 @@ type ReportActionItemCreatedProps = ReportActionItemCreatedOnyxProps & { // eslint-disable-next-line react/no-unused-prop-types policyID: string | undefined; }; -function ReportActionItemCreated(props: ReportActionItemCreatedProps) { +function ReportActionItemCreated({report, personalDetails, policy, reportID}: ReportActionItemCreatedProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const {shouldUseNarrowLayout, isLargeScreenWidth} = useResponsiveLayout(); + const [invoiceReceiverPolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report?.invoiceReceiver && 'policyID' in report.invoiceReceiver ? report.invoiceReceiver.policyID : -1}`); - if (!ReportUtils.isChatReport(props.report)) { + if (!ReportUtils.isChatReport(report)) { return null; } - let icons = ReportUtils.getIcons(props.report, props.personalDetails); - const shouldDisableDetailPage = ReportUtils.shouldDisableDetailPage(props.report); + let icons = ReportUtils.getIcons(report, personalDetails, null, '', -1, undefined, invoiceReceiverPolicy); + const shouldDisableDetailPage = ReportUtils.shouldDisableDetailPage(report); - if (ReportUtils.isInvoiceRoom(props.report) && ReportUtils.isCurrentUserInvoiceReceiver(props.report)) { + if (ReportUtils.isInvoiceRoom(report) && ReportUtils.isCurrentUserInvoiceReceiver(report)) { icons = [...icons].reverse(); } return ( navigateToConciergeChatAndDeleteReport(props.report?.reportID ?? props.reportID, undefined, true)} + onClose={() => navigateToConciergeChatAndDeleteReport(report?.reportID ?? reportID, undefined, true)} > @@ -66,9 +67,9 @@ function ReportActionItemCreated(props: ReportActionItemCreatedProps) { accessibilityLabel={translate('accessibilityHints.chatWelcomeMessage')} style={[styles.p5]} > - + ReportUtils.navigateToDetailsPage(props.report)} + onPress={() => ReportUtils.navigateToDetailsPage(report)} style={[styles.mh5, styles.mb3, styles.alignSelfStart, shouldDisableDetailPage && styles.cursorDefault]} accessibilityLabel={translate('common.details')} role={CONST.ROLE.BUTTON} @@ -85,8 +86,8 @@ function ReportActionItemCreated(props: ReportActionItemCreatedProps) { diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx index 4d7041e7d3c3..95a7332f0606 100644 --- a/src/pages/home/report/ReportActionItemSingle.tsx +++ b/src/pages/home/report/ReportActionItemSingle.tsx @@ -2,6 +2,7 @@ import React, {useCallback, useMemo} from 'react'; import type {StyleProp, ViewStyle} from 'react-native'; import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import Avatar from '@components/Avatar'; import {FallbackAvatar} from '@components/Icon/Expensicons'; import MultipleAvatars from '@components/MultipleAvatars'; @@ -19,10 +20,10 @@ import useThemeStyles from '@hooks/useThemeStyles'; import ControlSelection from '@libs/ControlSelection'; import DateUtils from '@libs/DateUtils'; import Navigation from '@libs/Navigation/Navigation'; -import * as PolicyUtils from '@libs/PolicyUtils'; import {getReportActionMessage} from '@libs/ReportActionsUtils'; import * as ReportUtils from '@libs/ReportUtils'; import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type {Report, ReportAction} from '@src/types/onyx'; import type {Icon} from '@src/types/onyx/OnyxCommon'; @@ -81,6 +82,7 @@ function ReportActionItemSingle({ const {translate} = useLocalize(); const personalDetails = usePersonalDetails() ?? CONST.EMPTY_OBJECT; const actorAccountID = ReportUtils.getReportActionActorAccountID(action, iouReport); + const [invoiceReceiverPolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report.invoiceReceiver && 'policyID' in report.invoiceReceiver ? report.invoiceReceiver.policyID : -1}`); let displayName = ReportUtils.getDisplayNameForParticipant(actorAccountID); const {avatar, login, pendingFields, status, fallbackIcon} = personalDetails[actorAccountID ?? -1] ?? {}; @@ -118,15 +120,13 @@ function ReportActionItemSingle({ const primaryDisplayName = displayName; if (displayAllActors) { if (ReportUtils.isInvoiceRoom(report) && !ReportUtils.isIndividualInvoiceRoom(report)) { - const secondaryPolicyID = report?.invoiceReceiver && 'policyID' in report.invoiceReceiver ? report.invoiceReceiver.policyID : '-1'; - const secondaryPolicy = PolicyUtils.getPolicy(secondaryPolicyID); - const secondaryPolicyAvatar = secondaryPolicy?.avatarURL ?? ReportUtils.getDefaultWorkspaceAvatar(secondaryPolicy?.name); + const secondaryPolicyAvatar = invoiceReceiverPolicy?.avatarURL ?? ReportUtils.getDefaultWorkspaceAvatar(invoiceReceiverPolicy?.name); secondaryAvatar = { source: secondaryPolicyAvatar, type: CONST.ICON_TYPE_WORKSPACE, - name: secondaryPolicy?.name, - id: secondaryPolicyID, + name: invoiceReceiverPolicy?.name, + id: invoiceReceiverPolicy?.id, }; } else { // The ownerAccountID and actorAccountID can be the same if a user submits an expense back from the IOU's original creator, in that case we need to use managerID to avoid displaying the same user twice