diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index f5e2703b1a4..d5570cb1887 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -41,7 +41,7 @@ import SettlementButton from './SettlementButton'; type MoneyReportHeaderProps = { /** The report currently being looked at */ - report: OnyxTypes.Report; + report: OnyxEntry; /** The policy tied to the expense report */ policy: OnyxEntry; @@ -61,8 +61,8 @@ type MoneyReportHeaderProps = { }; function MoneyReportHeader({policy, report: moneyRequestReport, transactionThreadReportID, reportActions, shouldUseNarrowLayout = false, onBackButtonPress}: MoneyReportHeaderProps) { - const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${moneyRequestReport.chatReportID}`); - const [nextStep] = useOnyx(`${ONYXKEYS.COLLECTION.NEXT_STEP}${moneyRequestReport.reportID}`); + const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${moneyRequestReport?.chatReportID ?? '-1'}`); + const [nextStep] = useOnyx(`${ONYXKEYS.COLLECTION.NEXT_STEP}${moneyRequestReport?.reportID ?? '-1'}`); const [transactionThreadReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${transactionThreadReportID}`); const [session] = useOnyx(ONYXKEYS.SESSION); const requestParentReportAction = useMemo(() => { @@ -109,10 +109,10 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea const hasOnlyPendingTransactions = allTransactions.length > 0 && allTransactions.every((t) => TransactionUtils.isExpensifyCardTransaction(t) && TransactionUtils.isPending(t)); const transactionIDs = allTransactions.map((t) => t.transactionID); const hasAllPendingRTERViolations = TransactionUtils.allHavePendingRTERViolation([transaction?.transactionID ?? '-1']); - const hasOnlyHeldExpenses = ReportUtils.hasOnlyHeldExpenses(moneyRequestReport.reportID); + const hasOnlyHeldExpenses = ReportUtils.hasOnlyHeldExpenses(moneyRequestReport?.reportID ?? ''); const isPayAtEndExpense = TransactionUtils.isPayAtEndExpense(transaction); const isArchivedReport = ReportUtils.isArchivedRoomWithID(moneyRequestReport?.reportID); - const [archiveReason] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${moneyRequestReport.reportID}`, {selector: ReportUtils.getArchiveReason}); + const [archiveReason] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${moneyRequestReport?.reportID ?? '-1'}`, {selector: ReportUtils.getArchiveReason}); const shouldShowPayButton = useMemo( () => IOU.canIOUBePaid(moneyRequestReport, chatReport, policy, transaction ? [transaction] : undefined), @@ -123,7 +123,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea const shouldDisableApproveButton = shouldShowApproveButton && !ReportUtils.isAllowedToApproveExpenseReport(moneyRequestReport); - const shouldShowSubmitButton = isDraft && reimbursableSpend !== 0 && !hasAllPendingRTERViolations; + const shouldShowSubmitButton = !!moneyRequestReport && isDraft && reimbursableSpend !== 0 && !hasAllPendingRTERViolations; const isAdmin = policy?.role === CONST.POLICY.ROLE.ADMIN; const shouldShowExportIntegrationButton = !shouldShowPayButton && !shouldShowSubmitButton && connectedIntegration && isAdmin && ReportUtils.canBeExported(moneyRequestReport); @@ -137,9 +137,9 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea const shouldShowAnyButton = shouldShowSettlementButton || shouldShowApproveButton || shouldShowSubmitButton || shouldShowNextStep || hasAllPendingRTERViolations || shouldShowExportIntegrationButton; const bankAccountRoute = ReportUtils.getBankAccountRoute(chatReport); - const formattedAmount = CurrencyUtils.convertToDisplayString(reimbursableSpend, moneyRequestReport.currency); + const formattedAmount = CurrencyUtils.convertToDisplayString(reimbursableSpend, moneyRequestReport?.currency); const [nonHeldAmount, fullAmount] = ReportUtils.getNonHeldAndFullAmount(moneyRequestReport, policy); - const isAnyTransactionOnHold = ReportUtils.hasHeldExpenses(moneyRequestReport.reportID); + const isAnyTransactionOnHold = ReportUtils.hasHeldExpenses(moneyRequestReport?.reportID); const displayedAmount = isAnyTransactionOnHold && canAllowSettlement ? nonHeldAmount : formattedAmount; const isMoreContentShown = shouldShowNextStep || shouldShowStatusBar || (shouldShowAnyButton && shouldUseNarrowLayout); const {isDelegateAccessRestricted, delegatorEmail} = useDelegateUserDetails(); @@ -293,9 +293,9 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea {shouldShowSettlementButton && !shouldUseNarrowLayout && ( {shouldShowSettlementButton && shouldUseNarrowLayout && ( ; /** The policy which the report is tied to */ policy: OnyxEntry; @@ -43,7 +43,7 @@ type MoneyRequestHeaderProps = { }; function MoneyRequestHeader({report, parentReportAction, policy, shouldUseNarrowLayout = false, onBackButtonPress}: MoneyRequestHeaderProps) { - const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`); + const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID ?? '-1'}`); const [transaction] = useOnyx( `${ONYXKEYS.COLLECTION.TRANSACTION}${ ReportActionsUtils.isMoneyRequestAction(parentReportAction) ? ReportActionsUtils.getOriginalMessage(parentReportAction)?.IOUTransactionID ?? -1 : -1 @@ -58,12 +58,13 @@ function MoneyRequestHeader({report, parentReportAction, policy, shouldUseNarrow const [shouldShowHoldMenu, setShouldShowHoldMenu] = useState(false); const isOnHold = TransactionUtils.isOnHold(transaction); const isDuplicate = TransactionUtils.isDuplicate(transaction?.transactionID ?? ''); + const reportID = report?.reportID; const hasAllPendingRTERViolations = TransactionUtils.allHavePendingRTERViolation([transaction?.transactionID ?? '-1']); const markAsCash = useCallback(() => { - TransactionActions.markAsCash(transaction?.transactionID ?? '-1', report.reportID); - }, [report.reportID, transaction?.transactionID]); + TransactionActions.markAsCash(transaction?.transactionID ?? '-1', reportID ?? ''); + }, [reportID, transaction?.transactionID]); const isScanning = TransactionUtils.hasReceipt(transaction) && TransactionUtils.isReceiptBeingScanned(transaction); @@ -129,6 +130,7 @@ function MoneyRequestHeader({report, parentReportAction, policy, shouldUseNarrow shouldShowPinButton={false} report={{ ...report, + reportID: reportID ?? '', ownerAccountID: parentReport?.ownerAccountID, }} policy={policy} @@ -150,7 +152,7 @@ function MoneyRequestHeader({report, parentReportAction, policy, shouldUseNarrow text={translate('iou.reviewDuplicates')} style={[styles.p0, styles.ml2]} onPress={() => { - Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_PAGE.getRoute(report.reportID)); + Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_PAGE.getRoute(reportID ?? '')); }} /> )} @@ -172,7 +174,7 @@ function MoneyRequestHeader({report, parentReportAction, policy, shouldUseNarrow text={translate('iou.reviewDuplicates')} style={[styles.w100, styles.pr0]} onPress={() => { - Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_PAGE.getRoute(report.reportID)); + Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_PAGE.getRoute(reportID ?? '')); }} /> diff --git a/src/components/ProcessMoneyReportHoldMenu.tsx b/src/components/ProcessMoneyReportHoldMenu.tsx index 4a63714b615..8cbbd1199b3 100644 --- a/src/components/ProcessMoneyReportHoldMenu.tsx +++ b/src/components/ProcessMoneyReportHoldMenu.tsx @@ -25,7 +25,7 @@ type ProcessMoneyReportHoldMenuProps = { isVisible: boolean; /** The report currently being looked at */ - moneyRequestReport: OnyxTypes.Report; + moneyRequestReport: OnyxEntry; /** Not held amount of expense report */ nonHeldAmount?: string; @@ -62,8 +62,8 @@ function ProcessMoneyReportHoldMenu({ const onSubmit = (full: boolean) => { if (isApprove) { IOU.approveMoneyRequest(moneyRequestReport, full); - if (!full && isLinkedTransactionHeld(Navigation.getTopmostReportActionId() ?? '-1', moneyRequestReport.reportID)) { - Navigation.goBack(ROUTES.REPORT_WITH_ID.getRoute(moneyRequestReport.reportID)); + if (!full && isLinkedTransactionHeld(Navigation.getTopmostReportActionId() ?? '-1', moneyRequestReport?.reportID ?? '')) { + Navigation.goBack(ROUTES.REPORT_WITH_ID.getRoute(moneyRequestReport?.reportID ?? '')); } } else if (chatReport && paymentType) { IOU.payMoneyRequest(paymentType, chatReport, moneyRequestReport, full); diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index d38d3f8b950..5c0451f2ea0 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -4097,12 +4097,12 @@ function getUploadingAttachmentHtml(file?: FileObject): string { return `${file.name}`; } -function getReportDescriptionText(report: Report): string { - if (!report.description) { +function getReportDescriptionText(report: OnyxEntry): string { + if (!report?.description) { return ''; } - return Parser.htmlToText(report.description); + return Parser.htmlToText(report?.description); } function getPolicyDescriptionText(policy: OnyxEntry): string { diff --git a/src/libs/actions/IOU.ts b/src/libs/actions/IOU.ts index daaa766145e..4221c9db289 100644 --- a/src/libs/actions/IOU.ts +++ b/src/libs/actions/IOU.ts @@ -6433,7 +6433,7 @@ function getHoldReportActionsAndTransactions(reportID: string) { function getReportFromHoldRequestsOnyxData( chatReport: OnyxTypes.Report, - iouReport: OnyxTypes.Report, + iouReport: OnyxEntry, recipient: Participant, ): { optimisticHoldReportID: string; @@ -6442,13 +6442,13 @@ function getReportFromHoldRequestsOnyxData( optimisticData: OnyxUpdate[]; failureData: OnyxUpdate[]; } { - const {holdReportActions, holdTransactions} = getHoldReportActionsAndTransactions(iouReport.reportID); + const {holdReportActions, holdTransactions} = getHoldReportActionsAndTransactions(iouReport?.reportID ?? ''); const firstHoldTransaction = holdTransactions[0]; const newParentReportActionID = rand64(); const optimisticExpenseReport = ReportUtils.buildOptimisticExpenseReport( chatReport.reportID, - chatReport.policyID ?? iouReport.policyID ?? '', + chatReport.policyID ?? iouReport?.policyID ?? '', recipient.accountID ?? 1, holdTransactions.reduce((acc, transaction) => acc + transaction.amount, 0) * (ReportUtils.isIOUReport(iouReport) ? 1 : -1), getCurrency(firstHoldTransaction), @@ -6537,7 +6537,7 @@ function getReportFromHoldRequestsOnyxData( // remove hold report actions from old iou report { onyxMethod: Onyx.METHOD.MERGE, - key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${iouReport.reportID}`, + key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${iouReport?.reportID ?? ''}`, value: deleteHoldReportActions, }, // add hold report actions to new iou report @@ -6588,7 +6588,7 @@ function getReportFromHoldRequestsOnyxData( // add hold report actions back to old iou report { onyxMethod: Onyx.METHOD.MERGE, - key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${iouReport.reportID}`, + key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${iouReport?.reportID ?? ''}`, value: bringReportActionsBack, }, // remove hold report actions from the new iou report @@ -6616,7 +6616,7 @@ function getReportFromHoldRequestsOnyxData( function getPayMoneyRequestParams( initialChatReport: OnyxTypes.Report, - iouReport: OnyxTypes.Report, + iouReport: OnyxEntry, recipient: Participant, paymentMethodType: PaymentMethodType, full: boolean, @@ -6679,34 +6679,34 @@ function getPayMoneyRequestParams( } } - let total = (iouReport.total ?? 0) - (iouReport.nonReimbursableTotal ?? 0); - if (ReportUtils.hasHeldExpenses(iouReport.reportID) && !full && !!iouReport.unheldTotal) { - total = iouReport.unheldTotal; + let total = (iouReport?.total ?? 0) - (iouReport?.nonReimbursableTotal ?? 0); + if (ReportUtils.hasHeldExpenses(iouReport?.reportID ?? '') && !full && !!iouReport?.unheldTotal) { + total = iouReport?.unheldTotal; } const optimisticIOUReportAction = ReportUtils.buildOptimisticIOUReportAction( CONST.IOU.REPORT_ACTION_TYPE.PAY, ReportUtils.isExpenseReport(iouReport) ? -total : total, - iouReport.currency ?? '', + iouReport?.currency ?? '', '', [recipient], '', paymentMethodType, - iouReport.reportID, + iouReport?.reportID, true, ); // In some instances, the report preview action might not be available to the payer (only whispered to the requestor) // hence we need to make the updates to the action safely. let optimisticReportPreviewAction = null; - const reportPreviewAction = getReportPreviewAction(chatReport.reportID, iouReport.reportID); + const reportPreviewAction = getReportPreviewAction(chatReport.reportID, iouReport?.reportID ?? ''); if (reportPreviewAction) { optimisticReportPreviewAction = ReportUtils.updateReportPreview(iouReport, reportPreviewAction, true); } let currentNextStep = null; let optimisticNextStep = null; if (!isInvoiceReport) { - currentNextStep = allNextSteps[`${ONYXKEYS.COLLECTION.NEXT_STEP}${iouReport.reportID}`] ?? null; + currentNextStep = allNextSteps[`${ONYXKEYS.COLLECTION.NEXT_STEP}${iouReport?.reportID ?? ''}`] ?? null; optimisticNextStep = NextStepUtils.buildNextStep(iouReport, CONST.REPORT.STATUS_NUM.REIMBURSED); } @@ -6734,7 +6734,7 @@ function getPayMoneyRequestParams( }, { onyxMethod: Onyx.METHOD.MERGE, - key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${iouReport.reportID}`, + key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${iouReport?.reportID ?? ''}`, value: { [optimisticIOUReportAction.reportActionID]: { ...(optimisticIOUReportAction as OnyxTypes.ReportAction), @@ -6744,7 +6744,7 @@ function getPayMoneyRequestParams( }, { onyxMethod: Onyx.METHOD.MERGE, - key: `${ONYXKEYS.COLLECTION.REPORT}${iouReport.reportID}`, + key: `${ONYXKEYS.COLLECTION.REPORT}${iouReport?.reportID ?? ''}`, value: { ...iouReport, lastMessageText: ReportActionsUtils.getReportActionText(optimisticIOUReportAction), @@ -6761,18 +6761,18 @@ function getPayMoneyRequestParams( { onyxMethod: Onyx.METHOD.MERGE, key: ONYXKEYS.NVP_LAST_PAYMENT_METHOD, - value: {[iouReport.policyID ?? '-1']: paymentMethodType}, + value: {[iouReport?.policyID ?? '-1']: paymentMethodType}, }, { onyxMethod: Onyx.METHOD.MERGE, - key: `${ONYXKEYS.COLLECTION.NEXT_STEP}${iouReport.reportID}`, + key: `${ONYXKEYS.COLLECTION.NEXT_STEP}${iouReport?.reportID ?? ''}`, value: optimisticNextStep, }, ); successData.push({ onyxMethod: Onyx.METHOD.MERGE, - key: `${ONYXKEYS.COLLECTION.REPORT}${iouReport.reportID}`, + key: `${ONYXKEYS.COLLECTION.REPORT}${iouReport?.reportID ?? ''}`, value: { pendingFields: { preview: null, @@ -6785,7 +6785,7 @@ function getPayMoneyRequestParams( failureData.push( { onyxMethod: Onyx.METHOD.MERGE, - key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${iouReport.reportID}`, + key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${iouReport?.reportID ?? ''}`, value: { [optimisticIOUReportAction.reportActionID]: { errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('iou.error.other'), @@ -6794,7 +6794,7 @@ function getPayMoneyRequestParams( }, { onyxMethod: Onyx.METHOD.MERGE, - key: `${ONYXKEYS.COLLECTION.REPORT}${iouReport.reportID}`, + key: `${ONYXKEYS.COLLECTION.REPORT}${iouReport?.reportID ?? ''}`, value: { ...iouReport, }, @@ -6806,7 +6806,7 @@ function getPayMoneyRequestParams( }, { onyxMethod: Onyx.METHOD.MERGE, - key: `${ONYXKEYS.COLLECTION.NEXT_STEP}${iouReport.reportID}`, + key: `${ONYXKEYS.COLLECTION.NEXT_STEP}${iouReport?.reportID ?? ''}`, value: currentNextStep, }, ); @@ -6833,7 +6833,7 @@ function getPayMoneyRequestParams( // Optimistically unhold all transactions if we pay all requests if (full) { - const reportTransactions = TransactionUtils.getAllReportTransactions(iouReport.reportID); + const reportTransactions = TransactionUtils.getAllReportTransactions(iouReport?.reportID); for (const transaction of reportTransactions) { optimisticData.push({ onyxMethod: Onyx.METHOD.MERGE, @@ -6871,7 +6871,7 @@ function getPayMoneyRequestParams( return { params: { - iouReportID: iouReport.reportID, + iouReportID: iouReport?.reportID ?? '', chatReportID: chatReport.reportID, reportActionID: optimisticIOUReportAction.reportActionID, paymentMethodType, @@ -7530,7 +7530,7 @@ function completePaymentOnboarding(paymentSelected: ValueOf, full = true) { if (chatReport.policyID && SubscriptionUtils.shouldRestrictUserBillableActions(chatReport.policyID)) { Navigation.navigate(ROUTES.RESTRICTED_ACTION.getRoute(chatReport.policyID)); return; @@ -7539,7 +7539,7 @@ function payMoneyRequest(paymentType: PaymentMethodType, chatReport: OnyxTypes.R const paymentSelected = paymentType === CONST.IOU.PAYMENT_TYPE.VBBA ? CONST.IOU.PAYMENT_SELECTED.BBA : CONST.IOU.PAYMENT_SELECTED.PBA; completePaymentOnboarding(paymentSelected); - const recipient = {accountID: iouReport.ownerAccountID}; + const recipient = {accountID: iouReport?.ownerAccountID ?? -1}; const {params, optimisticData, successData, failureData} = getPayMoneyRequestParams(chatReport, iouReport, recipient, paymentType, full); // For now, we need to call the PayMoneyRequestWithWallet API since PayMoneyRequest was not updated to work with @@ -7549,8 +7549,8 @@ function payMoneyRequest(paymentType: PaymentMethodType, chatReport: OnyxTypes.R API.write(apiCommand, params, {optimisticData, successData, failureData}); } -function payInvoice(paymentMethodType: PaymentMethodType, chatReport: OnyxTypes.Report, invoiceReport: OnyxTypes.Report, payAsBusiness = false) { - const recipient = {accountID: invoiceReport.ownerAccountID}; +function payInvoice(paymentMethodType: PaymentMethodType, chatReport: OnyxTypes.Report, invoiceReport: OnyxEntry, payAsBusiness = false) { + const recipient = {accountID: invoiceReport?.ownerAccountID ?? -1}; const { optimisticData, successData, @@ -7575,7 +7575,7 @@ function payInvoice(paymentMethodType: PaymentMethodType, chatReport: OnyxTypes. completePaymentOnboarding(paymentSelected); let params: PayInvoiceParams = { - reportID: invoiceReport.reportID, + reportID: invoiceReport?.reportID ?? '', reportActionID, paymentMethodType, payAsBusiness, diff --git a/src/libs/shouldFetchReport.ts b/src/libs/shouldFetchReport.ts index 5259e88ca6d..3d364d68dec 100644 --- a/src/libs/shouldFetchReport.ts +++ b/src/libs/shouldFetchReport.ts @@ -1,6 +1,7 @@ +import type {OnyxEntry} from 'react-native-onyx'; import type Report from '@src/types/onyx/Report'; -export default function shouldFetchReport(report: Report) { +export default function shouldFetchReport(report: OnyxEntry) { // If the report is optimistic, there's no need to fetch it. The original action should create it. // If there is an error for creating the chat, there's no need to fetch it since it doesn't exist return !report?.isOptimisticReport && !report?.errorFields?.createChat; diff --git a/src/pages/home/HeaderView.tsx b/src/pages/home/HeaderView.tsx index d7fdef7d11e..0f4da0a0e30 100644 --- a/src/pages/home/HeaderView.tsx +++ b/src/pages/home/HeaderView.tsx @@ -40,7 +40,7 @@ type HeaderViewProps = { onNavigationMenuButtonClicked: () => void; /** The report currently being looked at */ - report: OnyxTypes.Report; + report: OnyxEntry; /** The report action the transaction is tied to from the parent report */ parentReportAction: OnyxEntry | null; @@ -54,9 +54,9 @@ type HeaderViewProps = { function HeaderView({report, parentReportAction, 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 [invoiceReceiverPolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report?.invoiceReceiver && 'policyID' in report.invoiceReceiver ? report.invoiceReceiver.policyID : -1}`); // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing - const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID || report?.reportID || '-1'}`); + const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID || report?.reportID || '-1'}`); const policy = usePolicy(report?.policyID); const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); @@ -76,7 +76,7 @@ function HeaderView({report, parentReportAction, reportID, onNavigationMenuButto const isChatRoom = ReportUtils.isChatRoom(report); const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(report); const isTaskReport = ReportUtils.isTaskReport(report); - const reportHeaderData = !isTaskReport && !isChatThread && report.parentReportID ? parentReport : 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, personalDetails, invoiceReceiverPolicy); const subtitle = ReportUtils.getChatRoomSubtitle(reportHeaderData); @@ -84,7 +84,7 @@ function HeaderView({report, parentReportAction, reportID, onNavigationMenuButto const reportDescription = ReportUtils.getReportDescriptionText(report); const policyName = ReportUtils.getPolicyName(report, true); const policyDescription = ReportUtils.getPolicyDescriptionText(policy); - const isPersonalExpenseChat = isPolicyExpenseChat && ReportUtils.isCurrentUserSubmitter(report.reportID); + const isPersonalExpenseChat = isPolicyExpenseChat && ReportUtils.isCurrentUserSubmitter(report?.reportID ?? ''); const shouldShowSubtitle = () => { if (!subtitle) { return false; @@ -129,7 +129,7 @@ function HeaderView({report, parentReportAction, reportID, onNavigationMenuButto const shouldShowBorderBottom = !isTaskReport || !shouldUseNarrowLayout; const shouldDisableDetailPage = ReportUtils.shouldDisableDetailPage(report); const shouldUseGroupTitle = isGroupChat && (!!report?.reportName || !isMultipleParticipant); - const isLoading = !report.reportID || !title; + const isLoading = !report?.reportID || !title; return ( ) : ( - + )} diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index b8b551a345c..af4250bda48 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -282,7 +282,7 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro Navigation.goBack(undefined, false, true); }, [isInNarrowPaneModal]); - let headerView = report && ( + let headerView = ( ); - if (isSingleTransactionView && report) { + if (isSingleTransactionView) { headerView = ( - {shouldShowMostRecentReportAction && report && ( + {shouldShowMostRecentReportAction && ( ; - - emojiReactions: OnyxEntry; - - /** The user's wallet account */ - userWallet: OnyxEntry; - - /** The transaction (linked with the report action) route error */ - linkedTransactionRouteError: NonNullable> | null; -}; - type ReportActionItemProps = { /** Report for this action */ - report: OnyxTypes.Report; + report: OnyxEntry; /** The transaction thread report associated with the report for this action, if any */ transactionThreadReport?: OnyxEntry; @@ -150,7 +136,7 @@ type ReportActionItemProps = { /** Whether context menu should be displayed */ shouldDisplayContextMenu?: boolean; -} & ReportActionItemOnyxProps; +}; function ReportActionItem({ action, @@ -158,19 +144,15 @@ function ReportActionItem({ transactionThreadReport, linkedReportActionID, displayAsGroup, - emojiReactions, index, - iouReport, isMostRecentIOUReportAction, parentReportAction, shouldDisplayNewMarker, - userWallet, shouldHideThreadDividerLine = false, shouldShowSubscriptAvatar = false, onPress = undefined, isFirstVisibleReportAction = false, shouldUseThreadDividerLine = false, - linkedTransactionRouteError, hideThreadReplies = false, shouldDisplayContextMenu = true, parentReportActionForTransactionThread, @@ -178,17 +160,25 @@ function ReportActionItem({ const {translate} = useLocalize(); const {shouldUseNarrowLayout} = useResponsiveLayout(); const blockedFromConcierge = useBlockedFromConcierge(); + const reportID = report?.reportID ?? ''; // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing - const originalReportID = useMemo(() => ReportUtils.getOriginalReportID(report.reportID, action) || '-1', [report.reportID, action]); + const originalReportID = useMemo(() => ReportUtils.getOriginalReportID(reportID, action) || '-1', [reportID, action]); const [draftMessage] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${originalReportID}`, { selector: (draftMessagesForReport) => { const matchingDraftMessage = draftMessagesForReport?.[action.reportActionID]; return typeof matchingDraftMessage === 'string' ? matchingDraftMessage : matchingDraftMessage?.message; }, }); + const [iouReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${ReportActionsUtils.getIOUReportIDFromReportActionPreview(action) ?? -1}`); + const [emojiReactions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS}${action.reportActionID}`); + const [userWallet] = useOnyx(ONYXKEYS.USER_WALLET); + const [linkedTransactionRouteError] = useOnyx( + `${ONYXKEYS.COLLECTION.TRANSACTION}${ReportActionsUtils.isMoneyRequestAction(action) ? ReportActionsUtils.getOriginalMessage(action)?.IOUTransactionID ?? -1 : -1}`, + {selector: (transaction) => transaction?.errorFields?.route ?? null}, + ); const theme = useTheme(); const styles = useThemeStyles(); - const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report?.reportID || -1}`); + const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report?.reportID ?? -1}`); const StyleUtils = useStyleUtils(); const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT; const [isContextMenuActive, setIsContextMenuActive] = useState(() => ReportActionContextMenu.isActiveReportAction(action.reportActionID)); @@ -206,7 +196,7 @@ function ReportActionItem({ // The app would crash due to subscribing to the entire report collection if parentReportID is an empty string. So we should have a fallback ID here. // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing - const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID || -1}`); + const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID || -1}`); const isReportActionLinked = linkedReportActionID && action.reportActionID && linkedReportActionID === action.reportActionID; const reportScrollManager = useReportScrollManager(); const isActionableWhisper = @@ -288,15 +278,15 @@ function ReportActionItem({ } downloadedPreviews.current = urls; - Report.expandURLPreview(report.reportID, action.reportActionID); - }, [action, report.reportID]); + Report.expandURLPreview(reportID, action.reportActionID); + }, [action, reportID]); useEffect(() => { if (draftMessage === undefined || !ReportActionsUtils.isDeletedAction(action)) { return; } - Report.deleteReportActionDraft(report.reportID, action); - }, [draftMessage, action, report.reportID]); + Report.deleteReportActionDraft(reportID, action); + }, [draftMessage, action, reportID]); // Hide the message if it is being moderated for a higher offense, or is hidden by a moderator // Removed messages should not be shown anyway and should not need this flow @@ -350,7 +340,7 @@ function ReportActionItem({ event, selection, popoverAnchorRef.current, - report.reportID, + reportID, action.reportActionID, originalReportID, draftMessage ?? '', @@ -365,7 +355,7 @@ function ReportActionItem({ setIsEmojiPickerActive as () => void, ); }, - [draftMessage, action, report.reportID, toggleContextMenuFromActiveReportAction, originalReportID, shouldDisplayContextMenu, disabledActions, isArchivedRoom, isChronosReport], + [draftMessage, action, reportID, toggleContextMenuFromActiveReportAction, originalReportID, shouldDisplayContextMenu, disabledActions, isArchivedRoom, isChronosReport], ); // Handles manual scrolling to the bottom of the chat when the last message is an actionable whisper and it's resolved. @@ -382,15 +372,15 @@ function ReportActionItem({ const toggleReaction = useCallback( (emoji: Emoji, ignoreSkinToneOnCompare?: boolean) => { - Report.toggleEmojiReaction(report.reportID, action, emoji, emojiReactions, undefined, ignoreSkinToneOnCompare); + Report.toggleEmojiReaction(reportID, action, emoji, emojiReactions, undefined, ignoreSkinToneOnCompare); }, - [report, action, emojiReactions], + [reportID, action, emojiReactions], ); const contextValue = useMemo( () => ({ anchor: popoverAnchorRef.current, - report, + report: {...report, reportID: report?.reportID ?? ''}, reportNameValuePairs, action, transactionThreadReport, @@ -400,7 +390,7 @@ function ReportActionItem({ [report, action, toggleContextMenuFromActiveReportAction, transactionThreadReport, reportNameValuePairs], ); - const attachmentContextValue = useMemo(() => ({reportID: report.reportID, type: CONST.ATTACHMENT_TYPE.REPORT}), [report.reportID]); + const attachmentContextValue = useMemo(() => ({reportID, type: CONST.ATTACHMENT_TYPE.REPORT}), [reportID]); const actionableItemButtons: ActionableItem[] = useMemo(() => { if (ReportActionsUtils.isActionableAddPaymentCard(action) && shouldRenderAddPaymentCard()) { @@ -428,7 +418,7 @@ function ReportActionItem({ text: 'actionableMentionTrackExpense.submit', key: `${action.reportActionID}-actionableMentionTrackExpense-submit`, onPress: () => { - ReportUtils.createDraftTransactionAndNavigateToParticipantSelector(transactionID ?? '0', report.reportID, CONST.IOU.ACTION.SUBMIT, action.reportActionID); + ReportUtils.createDraftTransactionAndNavigateToParticipantSelector(transactionID ?? '0', reportID, CONST.IOU.ACTION.SUBMIT, action.reportActionID); }, isMediumSized: true, }, @@ -436,7 +426,7 @@ function ReportActionItem({ text: 'actionableMentionTrackExpense.categorize', key: `${action.reportActionID}-actionableMentionTrackExpense-categorize`, onPress: () => { - ReportUtils.createDraftTransactionAndNavigateToParticipantSelector(transactionID ?? '0', report.reportID, CONST.IOU.ACTION.CATEGORIZE, action.reportActionID); + ReportUtils.createDraftTransactionAndNavigateToParticipantSelector(transactionID ?? '0', reportID, CONST.IOU.ACTION.CATEGORIZE, action.reportActionID); }, isMediumSized: true, }, @@ -444,7 +434,7 @@ function ReportActionItem({ text: 'actionableMentionTrackExpense.share', key: `${action.reportActionID}-actionableMentionTrackExpense-share`, onPress: () => { - ReportUtils.createDraftTransactionAndNavigateToParticipantSelector(transactionID ?? '0', report.reportID, CONST.IOU.ACTION.SHARE, action.reportActionID); + ReportUtils.createDraftTransactionAndNavigateToParticipantSelector(transactionID ?? '0', reportID, CONST.IOU.ACTION.SHARE, action.reportActionID); }, isMediumSized: true, }, @@ -452,7 +442,7 @@ function ReportActionItem({ text: 'actionableMentionTrackExpense.nothing', key: `${action.reportActionID}-actionableMentionTrackExpense-nothing`, onPress: () => { - Report.dismissTrackExpenseActionableWhisper(report.reportID, action); + Report.dismissTrackExpenseActionableWhisper(reportID, action); }, isMediumSized: true, }, @@ -464,13 +454,13 @@ function ReportActionItem({ { text: 'actionableMentionJoinWorkspaceOptions.accept', key: `${action.reportActionID}-actionableMentionJoinWorkspace-${CONST.REPORT.ACTIONABLE_MENTION_JOIN_WORKSPACE_RESOLUTION.ACCEPT}`, - onPress: () => Member.acceptJoinRequest(report.reportID, action), + onPress: () => Member.acceptJoinRequest(reportID, action), isPrimary: true, }, { text: 'actionableMentionJoinWorkspaceOptions.decline', key: `${action.reportActionID}-actionableMentionJoinWorkspace-${CONST.REPORT.ACTIONABLE_MENTION_JOIN_WORKSPACE_RESOLUTION.DECLINE}`, - onPress: () => Member.declineJoinRequest(report.reportID, action), + onPress: () => Member.declineJoinRequest(reportID, action), }, ]; } @@ -480,13 +470,13 @@ function ReportActionItem({ { text: 'common.yes', key: `${action.reportActionID}-actionableReportMentionWhisper-${CONST.REPORT.ACTIONABLE_REPORT_MENTION_WHISPER_RESOLUTION.CREATE}`, - onPress: () => Report.resolveActionableReportMentionWhisper(report.reportID, action, CONST.REPORT.ACTIONABLE_REPORT_MENTION_WHISPER_RESOLUTION.CREATE), + onPress: () => Report.resolveActionableReportMentionWhisper(reportID, action, CONST.REPORT.ACTIONABLE_REPORT_MENTION_WHISPER_RESOLUTION.CREATE), isPrimary: true, }, { text: 'common.no', key: `${action.reportActionID}-actionableReportMentionWhisper-${CONST.REPORT.ACTIONABLE_REPORT_MENTION_WHISPER_RESOLUTION.NOTHING}`, - onPress: () => Report.resolveActionableReportMentionWhisper(report.reportID, action, CONST.REPORT.ACTIONABLE_REPORT_MENTION_WHISPER_RESOLUTION.NOTHING), + onPress: () => Report.resolveActionableReportMentionWhisper(reportID, action, CONST.REPORT.ACTIONABLE_REPORT_MENTION_WHISPER_RESOLUTION.NOTHING), }, ]; } @@ -495,16 +485,16 @@ function ReportActionItem({ { text: 'actionableMentionWhisperOptions.invite', key: `${action.reportActionID}-actionableMentionWhisper-${CONST.REPORT.ACTIONABLE_MENTION_WHISPER_RESOLUTION.INVITE}`, - onPress: () => Report.resolveActionableMentionWhisper(report.reportID, action, CONST.REPORT.ACTIONABLE_MENTION_WHISPER_RESOLUTION.INVITE), + onPress: () => Report.resolveActionableMentionWhisper(reportID, action, CONST.REPORT.ACTIONABLE_MENTION_WHISPER_RESOLUTION.INVITE), isPrimary: true, }, { text: 'actionableMentionWhisperOptions.nothing', key: `${action.reportActionID}-actionableMentionWhisper-${CONST.REPORT.ACTIONABLE_MENTION_WHISPER_RESOLUTION.NOTHING}`, - onPress: () => Report.resolveActionableMentionWhisper(report.reportID, action, CONST.REPORT.ACTIONABLE_MENTION_WHISPER_RESOLUTION.NOTHING), + onPress: () => Report.resolveActionableMentionWhisper(reportID, action, CONST.REPORT.ACTIONABLE_MENTION_WHISPER_RESOLUTION.NOTHING), }, ]; - }, [action, isActionableWhisper, report.reportID]); + }, [action, isActionableWhisper, reportID]); /** * Get the content of ReportActionItem @@ -530,9 +520,9 @@ function ReportActionItem({ children = ( ); @@ -636,7 +626,7 @@ function ReportActionItem({ } else if (ReportActionsUtils.isReimbursementDeQueuedAction(action)) { children = ; } else if (action.actionName === CONST.REPORT.ACTIONS.TYPE.MODIFIED_EXPENSE) { - children = ; + children = ; } else if (action.actionName === CONST.REPORT.ACTIONS.TYPE.SUBMITTED) { children = ; } else if (action.actionName === CONST.REPORT.ACTIONS.TYPE.APPROVED) { @@ -673,7 +663,7 @@ function ReportActionItem({ children = ( ); } else if (ReportActionsUtils.isActionOfType(action, CONST.REPORT.ACTIONS.TYPE.EXPORTED_TO_INTEGRATION)) { @@ -694,7 +684,7 @@ function ReportActionItem({ {draftMessage === undefined ? ( ); } @@ -923,7 +913,7 @@ function ReportActionItem({ {shouldDisplayNewMarker && (!shouldUseThreadDividerLine || !isFirstVisibleReportAction) && } {shouldDisplayContextMenu && ( ({ - iouReport: { - key: ({action}) => { - const iouReportID = ReportActionsUtils.getIOUReportIDFromReportActionPreview(action); - return `${ONYXKEYS.COLLECTION.REPORT}${iouReportID ?? -1}`; - }, - initialValue: {} as OnyxTypes.Report, - }, - emojiReactions: { - key: ({action}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS}${action.reportActionID}`, - initialValue: {}, - }, - userWallet: { - key: ONYXKEYS.USER_WALLET, - }, - linkedTransactionRouteError: { - key: ({action}) => - `${ONYXKEYS.COLLECTION.TRANSACTION}${ReportActionsUtils.isMoneyRequestAction(action) ? ReportActionsUtils.getOriginalMessage(action)?.IOUTransactionID ?? -1 : -1}`, - selector: (transaction: OnyxEntry) => transaction?.errorFields?.route ?? null, - }, -})( - memo(ReportActionItem, (prevProps, nextProps) => { - const prevParentReportAction = prevProps.parentReportAction; - const nextParentReportAction = nextProps.parentReportAction; - return ( - prevProps.displayAsGroup === nextProps.displayAsGroup && - prevProps.isMostRecentIOUReportAction === nextProps.isMostRecentIOUReportAction && - prevProps.shouldDisplayNewMarker === nextProps.shouldDisplayNewMarker && - lodashIsEqual(prevProps.emojiReactions, nextProps.emojiReactions) && - lodashIsEqual(prevProps.action, nextProps.action) && - lodashIsEqual(prevProps.iouReport, nextProps.iouReport) && - lodashIsEqual(prevProps.report.pendingFields, nextProps.report.pendingFields) && - lodashIsEqual(prevProps.report.isDeletedParentAction, nextProps.report.isDeletedParentAction) && - lodashIsEqual(prevProps.report.errorFields, nextProps.report.errorFields) && - prevProps.report?.statusNum === nextProps.report?.statusNum && - prevProps.report?.stateNum === nextProps.report?.stateNum && - prevProps.report?.parentReportID === nextProps.report?.parentReportID && - prevProps.report?.parentReportActionID === nextProps.report?.parentReportActionID && - // TaskReport's created actions render the TaskView, which updates depending on certain fields in the TaskReport - ReportUtils.isTaskReport(prevProps.report) === ReportUtils.isTaskReport(nextProps.report) && - prevProps.action.actionName === nextProps.action.actionName && - prevProps.report.reportName === nextProps.report.reportName && - prevProps.report.description === nextProps.report.description && - ReportUtils.isCompletedTaskReport(prevProps.report) === ReportUtils.isCompletedTaskReport(nextProps.report) && - prevProps.report.managerID === nextProps.report.managerID && - prevProps.shouldHideThreadDividerLine === nextProps.shouldHideThreadDividerLine && - prevProps.report?.total === nextProps.report?.total && - prevProps.report?.nonReimbursableTotal === nextProps.report?.nonReimbursableTotal && - prevProps.report?.policyAvatar === nextProps.report?.policyAvatar && - prevProps.linkedReportActionID === nextProps.linkedReportActionID && - lodashIsEqual(prevProps.report.fieldList, nextProps.report.fieldList) && - lodashIsEqual(prevProps.transactionThreadReport, nextProps.transactionThreadReport) && - lodashIsEqual(prevProps.reportActions, nextProps.reportActions) && - lodashIsEqual(prevProps.linkedTransactionRouteError, nextProps.linkedTransactionRouteError) && - lodashIsEqual(prevParentReportAction, nextParentReportAction) - ); - }), -); +export default memo(ReportActionItem, (prevProps, nextProps) => { + const prevParentReportAction = prevProps.parentReportAction; + const nextParentReportAction = nextProps.parentReportAction; + return ( + prevProps.displayAsGroup === nextProps.displayAsGroup && + prevProps.isMostRecentIOUReportAction === nextProps.isMostRecentIOUReportAction && + prevProps.shouldDisplayNewMarker === nextProps.shouldDisplayNewMarker && + lodashIsEqual(prevProps.action, nextProps.action) && + lodashIsEqual(prevProps.report?.pendingFields, nextProps.report?.pendingFields) && + lodashIsEqual(prevProps.report?.isDeletedParentAction, nextProps.report?.isDeletedParentAction) && + lodashIsEqual(prevProps.report?.errorFields, nextProps.report?.errorFields) && + prevProps.report?.statusNum === nextProps.report?.statusNum && + prevProps.report?.stateNum === nextProps.report?.stateNum && + prevProps.report?.parentReportID === nextProps.report?.parentReportID && + prevProps.report?.parentReportActionID === nextProps.report?.parentReportActionID && + // TaskReport's created actions render the TaskView, which updates depending on certain fields in the TaskReport + ReportUtils.isTaskReport(prevProps.report) === ReportUtils.isTaskReport(nextProps.report) && + prevProps.action.actionName === nextProps.action.actionName && + prevProps.report?.reportName === nextProps.report?.reportName && + prevProps.report?.description === nextProps.report?.description && + ReportUtils.isCompletedTaskReport(prevProps.report) === ReportUtils.isCompletedTaskReport(nextProps.report) && + prevProps.report?.managerID === nextProps.report?.managerID && + prevProps.shouldHideThreadDividerLine === nextProps.shouldHideThreadDividerLine && + prevProps.report?.total === nextProps.report?.total && + prevProps.report?.nonReimbursableTotal === nextProps.report?.nonReimbursableTotal && + prevProps.report?.policyAvatar === nextProps.report?.policyAvatar && + prevProps.linkedReportActionID === nextProps.linkedReportActionID && + lodashIsEqual(prevProps.report?.fieldList, nextProps.report?.fieldList) && + lodashIsEqual(prevProps.transactionThreadReport, nextProps.transactionThreadReport) && + lodashIsEqual(prevProps.reportActions, nextProps.reportActions) && + lodashIsEqual(prevParentReportAction, nextParentReportAction) + ); +}); diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx index 0e58296d39f..380355d0836 100644 --- a/src/pages/home/report/ReportActionItemSingle.tsx +++ b/src/pages/home/report/ReportActionItemSingle.tsx @@ -39,7 +39,7 @@ type ReportActionItemSingleProps = Partial & { wrapperStyle?: StyleProp; /** Report for this action */ - report: Report; + report: OnyxEntry; /** IOU Report for this action, if any */ iouReport?: OnyxEntry; @@ -82,7 +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}`); + 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] ?? {}; @@ -101,7 +101,7 @@ function ReportActionItemSingle({ displayName = ReportUtils.getPolicyName(report); actorHint = displayName; avatarSource = ReportUtils.getWorkspaceIcon(report).source; - avatarId = report.policyID; + avatarId = report?.policyID; } else if (action?.delegateAccountID && personalDetails[action?.delegateAccountID]) { // We replace the actor's email, name, and avatar with the Copilot manually for now. And only if we have their // details. This will be improved upon when the Copilot feature is implemented. @@ -143,7 +143,7 @@ function ReportActionItemSingle({ } } else if (!isWorkspaceActor) { // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing - const avatarIconIndex = report.isOwnPolicyExpenseChat || ReportUtils.isPolicyExpenseChat(report) ? 0 : 1; + const avatarIconIndex = report?.isOwnPolicyExpenseChat || ReportUtils.isPolicyExpenseChat(report) ? 0 : 1; const reportIcons = ReportUtils.getIcons(report, {}); secondaryAvatar = reportIcons[avatarIconIndex]; @@ -174,7 +174,7 @@ function ReportActionItemSingle({ const showActorDetails = useCallback(() => { if (isWorkspaceActor) { - showWorkspaceDetails(reportID); + showWorkspaceDetails(reportID ?? ''); } else { // Show participants page IOU report preview if (iouReportID && displayAllActors) { diff --git a/src/pages/home/report/ReportActionsListItemRenderer.tsx b/src/pages/home/report/ReportActionsListItemRenderer.tsx index 48c578fd743..ff1c2431ca8 100644 --- a/src/pages/home/report/ReportActionsListItemRenderer.tsx +++ b/src/pages/home/report/ReportActionsListItemRenderer.tsx @@ -24,7 +24,7 @@ type ReportActionsListItemRendererProps = { index: number; /** Report for this action */ - report: Report; + report: OnyxEntry; /** The transaction thread report associated with the report for this action, if any */ transactionThreadReport: OnyxEntry; @@ -76,6 +76,7 @@ function ReportActionsListItemRenderer({ ReportUtils.isChatThread(report) && (!ReportActionsUtils.isTransactionThread(parentReportAction) || ReportActionsUtils.isSentMoneyReportAction(parentReportAction)); + const originalMessage = useMemo(() => ReportActionsUtils.getOriginalMessage(reportAction), [reportAction]); /** * Create a lightweight ReportAction so as to keep the re-rendering as light as possible by * passing in only the required props. @@ -88,7 +89,7 @@ function ReportActionsListItemRenderer({ pendingAction: reportAction.pendingAction, actionName: reportAction.actionName, errors: reportAction.errors, - originalMessage: reportAction?.originalMessage, + originalMessage, childCommenterCount: reportAction.childCommenterCount, linkMetadata: reportAction.linkMetadata, childReportID: reportAction.childReportID, @@ -118,7 +119,6 @@ function ReportActionsListItemRenderer({ reportAction.pendingAction, reportAction.actionName, reportAction.errors, - reportAction?.originalMessage, reportAction.childCommenterCount, reportAction.linkMetadata, reportAction.childReportID, @@ -141,6 +141,7 @@ function ReportActionsListItemRenderer({ reportAction.childManagerAccountID, reportAction.childMoneyRequestCount, reportAction.childOwnerAccountID, + originalMessage, ], );