fix: Payer section goes missing from payed money request preview

src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx

@@ -34,13 +34,15 @@ function MoneyRequestReportPreview({
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
-    const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`);
+    const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`, {canBeMissing: true});
     const [invoiceReceiverPolicy] = useOnyx(
-        `${ONYXKEYS.COLLECTION.POLICY}${chatReport?.invoiceReceiver && 'policyID' in chatReport.invoiceReceiver ? chatReport.invoiceReceiver.policyID : CONST.DEFAULT_NUMBER_ID}`,
+        `${ONYXKEYS.COLLECTION.POLICY}${chatReport?.invoiceReceiver && 'policyID' in chatReport.invoiceReceiver ? chatReport.invoiceReceiver.policyID : undefined}`,
+        {canBeMissing: true},
     );
     const [invoiceReceiverPersonalDetail] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {
         selector: (personalDetails) =>
             personalDetails?.[chatReport?.invoiceReceiver && 'accountID' in chatReport.invoiceReceiver ? chatReport.invoiceReceiver.accountID : CONST.DEFAULT_NUMBER_ID],
+        canBeMissing: true,
     });
     const [iouReport, transactions, violations] = useReportWithTransactionsAndViolations(iouReportID);
     const policy = usePolicy(policyID);
@@ -70,6 +72,7 @@ function MoneyRequestReportPreview({
             wrapperStyle={reportPreviewStyles.transactionPreviewStyle}
             containerStyles={[styles.h100, containerStyles]}
             transactionID={item.transactionID}
+            reportPreviewAction={action}
         />
     );
 

src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx

@@ -55,6 +55,7 @@ function TransactionPreviewContent({
     sessionAccountID,
     walletTermsErrors,
     routeName,
+    reportPreviewAction,
     shouldHideOnDelete = true,
 }: TransactionPreviewContentProps) {
     const theme = useTheme();
@@ -66,8 +67,8 @@ function TransactionPreviewContent({
     };
 
     const transactionDetails = useMemo<Partial<TransactionDetails>>(() => getTransactionDetails(transaction) ?? {}, [transaction]);
-    const managerID = iouReport?.managerID ?? CONST.DEFAULT_NUMBER_ID;
-    const ownerAccountID = iouReport?.ownerAccountID ?? CONST.DEFAULT_NUMBER_ID;
+    const managerID = iouReport?.managerID ?? reportPreviewAction?.childManagerAccountID ?? CONST.DEFAULT_NUMBER_ID;
+    const ownerAccountID = iouReport?.ownerAccountID ?? reportPreviewAction?.childOwnerAccountID ?? CONST.DEFAULT_NUMBER_ID;
     const isReportAPolicyExpenseChat = isPolicyExpenseChat(chatReport);
     const {amount: requestAmount, comment: requestComment, merchant, tag, category, currency: requestCurrency} = transactionDetails;
 
@@ -131,7 +132,7 @@ function TransactionPreviewContent({
     const showCashOrCard = getTranslatedText(previewText.showCashOrCard);
     const displayDeleteAmountText = getTranslatedText(previewText.displayDeleteAmountText);
 
-    const iouData = getIOUData(managerID, ownerAccountID, iouReport, personalDetails);
+    const iouData = getIOUData(managerID, ownerAccountID, personalDetails);
     const {from, to} = iouData ?? {from: null, to: null};
     const isDeleted = action?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
     const shouldShowCategoryOrTag = shouldShowCategory || shouldShowTag;
@@ -215,9 +216,9 @@ function TransactionPreviewContent({
                                         <UserInfoCellsWithArrow
                                             shouldDisplayArrowIcon
                                             participantFrom={from}
-                                            participantFromDisplayName={from.displayName ?? from.login ?? ''}
+                                            participantFromDisplayName={from.displayName ?? from.login ?? translate('common.hidden')}
+                                            participantToDisplayName={to.displayName ?? to.login ?? translate('common.hidden')}
                                             participantTo={to}
-                                            participantToDisplayName={to.displayName ?? to.login ?? ''}
                                             avatarSize="mid-subscript"
                                             infoCellsTextStyle={{...styles.textMicroBold, lineHeight: 14}}
                                             infoCellsAvatarStyle={styles.pr1}

src/components/ReportActionItem/TransactionPreview/index.tsx

@@ -35,17 +35,17 @@ const getOriginalTransactionIfBillIsSplit = (transaction: OnyxEntry<Transaction>
 function TransactionPreview(props: TransactionPreviewProps) {
     const {action, chatReportID, reportID, contextMenuAnchor, checkIfContextMenuActive = () => {}, shouldDisplayContextMenu, iouReportID, transactionID: transactionIDFromProps} = props;
 
-    const [iouReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${iouReportID}`);
+    const [iouReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${iouReportID}`, {canBeMissing: true});
     const route = useRoute<PlatformStackRouteProp<TransactionDuplicateNavigatorParamList, typeof SCREENS.TRANSACTION_DUPLICATE.REVIEW>>();
-    const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${route.params?.threadReportID}`);
+    const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${route.params?.threadReportID}`, {canBeMissing: true});
     const isMoneyRequestAction = isMoneyRequestActionReportActionsUtils(action);
     const transactionID = transactionIDFromProps ?? (isMoneyRequestAction ? getOriginalMessage(action)?.IOUTransactionID : null);
-    const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`);
+    const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, {canBeMissing: true});
     const violations = useTransactionViolations(transaction?.transactionID);
-    const [walletTerms] = useOnyx(ONYXKEYS.WALLET_TERMS);
-    const [session] = useOnyx(ONYXKEYS.SESSION);
-    const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`);
-    const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
+    const [walletTerms] = useOnyx(ONYXKEYS.WALLET_TERMS, {canBeMissing: true});
+    const [session] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: true});
+    const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`, {canBeMissing: true});
+    const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {canBeMissing: true});
 
     // Get transaction violations for given transaction id from onyx, find duplicated transactions violations and get duplicates
     const allDuplicates = useMemo(() => violations?.find((violation) => violation.name === CONST.VIOLATIONS.DUPLICATED_TRANSACTION)?.data?.duplicates ?? [], [violations]);
@@ -88,6 +88,7 @@ function TransactionPreview(props: TransactionPreviewProps) {
             sessionAccountID={sessionAccountID}
             walletTermsErrors={walletTerms?.errors}
             routeName={route.name}
+            reportPreviewAction={props.reportPreviewAction}
         />
     );
 }

src/components/ReportActionItem/TransactionPreview/types.ts

@@ -60,6 +60,9 @@ type TransactionPreviewProps = {
 
     /** In the case where we have access to the transactionID in the parent */
     transactionID?: string;
+
+    /** The action to be displayed in the preview */
+    reportPreviewAction?: ReportAction;
 };
 
 type TransactionPreviewContentProps = {
@@ -122,6 +125,9 @@ type TransactionPreviewContentProps = {
 
     /** Determine whether to hide the component's children if deletion is pending */
     shouldHideOnDelete?: boolean;
+
+    /** The action to be displayed in the preview */
+    reportPreviewAction?: ReportAction;
 };
 
 export type {TransactionPreviewProps, TransactionPreviewContentProps, TransactionPreviewStyleType};

src/libs/TransactionPreviewUtils.ts

@@ -11,7 +11,7 @@ import DateUtils from './DateUtils';
 import type {PlatformStackRouteProp} from './Navigation/PlatformStackNavigation/types';
 import type {TransactionDuplicateNavigatorParamList} from './Navigation/types';
 import {getOriginalMessage, getReportAction, isMessageDeleted, isMoneyRequestAction} from './ReportActionsUtils';
-import {isIOUReport, isPaidGroupPolicy, isPaidGroupPolicyExpenseReport, isReportApproved, isSettled} from './ReportUtils';
+import {isPaidGroupPolicy, isPaidGroupPolicyExpenseReport, isReportApproved, isSettled} from './ReportUtils';
 import type {TransactionDetails} from './ReportUtils';
 import StringUtils from './StringUtils';
 import {
@@ -42,16 +42,11 @@ const emptyPersonalDetails: OnyxTypes.PersonalDetails = {
     login: undefined,
 };
 
-function getIOUData(
-    managerID: number,
-    ownerAccountID: number,
-    reportOrID: OnyxTypes.OnyxInputOrEntry<OnyxTypes.Report> | string | undefined,
-    personalDetails: OnyxTypes.PersonalDetailsList | undefined,
-) {
+function getIOUData(managerID: number, ownerAccountID: number, personalDetails: OnyxTypes.PersonalDetailsList | undefined) {
     const fromID = managerID;
     const toID = ownerAccountID;
 
-    return reportOrID && isIOUReport(reportOrID)
+    return fromID && toID
         ? {
               from: personalDetails ? personalDetails[fromID] : emptyPersonalDetails,
               to: personalDetails ? personalDetails[toID] : emptyPersonalDetails,