diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx index 8f0cb0feddf7..1c821fc8965a 100644 --- a/src/components/ReportActionItem/MoneyRequestView.tsx +++ b/src/components/ReportActionItem/MoneyRequestView.tsx @@ -134,6 +134,7 @@ function MoneyRequestView({ const isCardTransaction = TransactionUtils.isCardTransaction(transaction); const cardProgramName = isCardTransaction && transactionCardID !== undefined ? CardUtils.getCardDescription(transactionCardID) : ''; const isApproved = ReportUtils.isReportApproved(moneyRequestReport); + const isInvoice = ReportUtils.isInvoiceReport(moneyRequestReport); const taxRates = policy?.taxRates; const formattedTaxAmount = CurrencyUtils.convertToDisplayString(transactionTaxAmount, transactionCurrency); @@ -332,7 +333,7 @@ function MoneyRequestView({ ); const shouldShowMapOrReceipt = showMapAsImage || hasReceipt; - const shouldShowReceiptEmptyState = !hasReceipt && (canEditReceipt || isAdmin || isApprover); + const shouldShowReceiptEmptyState = !hasReceipt && !isInvoice && (canEditReceipt || isAdmin || isApprover); const noticeTypeViolations = transactionViolations?.filter((violation) => violation.type === 'notice').map((v) => ViolationsUtils.getViolationTranslation(v, translate)) ?? []; const shouldShowNotesViolations = !isReceiptBeingScanned && canUseViolations && ReportUtils.isPaidGroupPolicy(report); @@ -340,10 +341,12 @@ function MoneyRequestView({ {shouldShowAnimatedBackground && } - + {!isInvoice && ( + + )} {shouldShowMapOrReceipt && ( ): boolean { return getChatType(report) === CONST.REPORT.CHAT_TYPE.INVOICE; } +function isCurrentUserInvoiceReceiver(report: OnyxEntry): boolean { + if (report?.invoiceReceiver?.type === CONST.REPORT.INVOICE_RECEIVER_TYPE.INDIVIDUAL) { + return currentUserAccountID === report.invoiceReceiver.accountID; + } + + return false; +} + /** * Whether the provided report belongs to a Control policy and is an expense chat */ @@ -1941,8 +1949,20 @@ function getIcons( return [domainIcon]; } if (isAdminRoom(report) || isAnnounceRoom(report) || isChatRoom(report) || isArchivedRoom(report)) { - const workspaceIcon = getWorkspaceIcon(report, policy); - return [workspaceIcon]; + const icons = [getWorkspaceIcon(report, policy)]; + + if (isInvoiceRoom(report)) { + if (report?.invoiceReceiver?.type === CONST.REPORT.INVOICE_RECEIVER_TYPE.INDIVIDUAL) { + icons.push(...getIconsForParticipants([report?.invoiceReceiver.accountID], personalDetails)); + } else { + const receiverPolicy = getPolicy(report?.invoiceReceiver?.policyID); + if (!isEmptyObject(receiverPolicy)) { + icons.push(getWorkspaceIcon(report, receiverPolicy)); + } + } + } + + return icons; } if (isPolicyExpenseChat(report) || isExpenseReport(report)) { const workspaceIcon = getWorkspaceIcon(report, policy); @@ -3173,15 +3193,15 @@ function getPayeeName(report: OnyxEntry): string | undefined { * Get either the policyName or domainName the chat is tied to */ function getChatRoomSubtitle(report: OnyxEntry): string | undefined { - if (isInvoiceRoom(report)) { - return Localize.translateLocal('workspace.common.invoices'); - } if (isChatThread(report)) { return ''; } if (isSelfDM(report)) { return Localize.translateLocal('reportActionsView.yourSpace'); } + if (isInvoiceRoom(report)) { + return Localize.translateLocal('workspace.common.invoices'); + } if (!isDefaultRoom(report) && !isUserCreatedPolicyRoom(report) && !isPolicyExpenseChat(report)) { return ''; } @@ -3195,9 +3215,6 @@ function getChatRoomSubtitle(report: OnyxEntry): string | undefined { if (isArchivedRoom(report)) { return report?.oldPolicyName ?? ''; } - if (isInvoiceRoom(report)) { - return Localize.translateLocal('workspace.common.invoices'); - } return getPolicyName(report); } @@ -3218,7 +3235,7 @@ function getParentNavigationSubtitle(report: OnyxEntry): ParentNavigatio return {}; } - if (isInvoiceReport(report)) { + if (isInvoiceReport(report) || isInvoiceRoom(parentReport)) { return {reportName: `${getPolicyName(parentReport)} & ${getInvoicePayerName(parentReport)}`}; } @@ -6705,6 +6722,7 @@ export { buildOptimisticInviteReportAction, getInvoiceChatByParticipants, shouldShowMerchantColumn, + isCurrentUserInvoiceReceiver, }; export type { diff --git a/src/pages/home/report/ReportActionItemCreated.tsx b/src/pages/home/report/ReportActionItemCreated.tsx index 5446cd35e835..2af71cb40e4c 100644 --- a/src/pages/home/report/ReportActionItemCreated.tsx +++ b/src/pages/home/report/ReportActionItemCreated.tsx @@ -47,9 +47,13 @@ function ReportActionItemCreated(props: ReportActionItemCreatedProps) { return null; } - const icons = ReportUtils.getIcons(props.report, props.personalDetails); + let icons = ReportUtils.getIcons(props.report, props.personalDetails); const shouldDisableDetailPage = ReportUtils.shouldDisableDetailPage(props.report); + if (ReportUtils.isInvoiceRoom(props.report) && ReportUtils.isCurrentUserInvoiceReceiver(props.report)) { + icons = [...icons].reverse(); + } + return ( action?.actionName === CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW && iouReport && !ReportUtils.isInvoiceReport(iouReport), - [action?.actionName, iouReport], - ); - const isWorkspaceActor = ReportUtils.isInvoiceReport(iouReport ?? {}) || (ReportUtils.isPolicyExpenseChat(report) && (!actorAccountID || displayAllActors)); + const displayAllActors = useMemo(() => action?.actionName === CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW && iouReport, [action?.actionName, iouReport]); + const isInvoiceReport = ReportUtils.isInvoiceReport(iouReport ?? {}); + const isWorkspaceActor = isInvoiceReport || (ReportUtils.isPolicyExpenseChat(report) && (!actorAccountID || displayAllActors)); let avatarSource = UserUtils.getAvatar(avatar ?? '', actorAccountID); if (isWorkspaceActor) { @@ -110,10 +108,14 @@ function ReportActionItemSingle({ const primaryDisplayName = displayName; if (displayAllActors) { // The ownerAccountID and actorAccountID can be the same if the 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 - const secondaryAccountId = iouReport?.ownerAccountID === actorAccountID ? iouReport?.managerID : iouReport?.ownerAccountID; + const secondaryAccountId = iouReport?.ownerAccountID === actorAccountID || isInvoiceReport ? iouReport?.managerID : iouReport?.ownerAccountID; const secondaryUserAvatar = personalDetails?.[secondaryAccountId ?? -1]?.avatar ?? ''; const secondaryDisplayName = ReportUtils.getDisplayNameForParticipant(secondaryAccountId); - displayName = `${primaryDisplayName} & ${secondaryDisplayName}`; + + if (!isInvoiceReport) { + displayName = `${primaryDisplayName} & ${secondaryDisplayName}`; + } + secondaryAvatar = { source: UserUtils.getAvatar(secondaryUserAvatar, secondaryAccountId), type: CONST.ICON_TYPE_AVATAR,