Fix displaying sender/receiver for split money request preview

Author: Kicu

src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx

@@ -44,6 +44,7 @@ function TransactionPreviewContent({
     report,
     transaction,
     violations,
+    transactionRawAmount,
     offlineWithFeedbackOnClose,
     containerStyles,
     transactionPreviewWidth,
@@ -148,16 +149,14 @@ function TransactionPreviewContent({
             };
         }
 
-        // For IOU, we want the unprocessed amount because it is important whether the amount was positive or negative
-        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-        const transactionRawAmount = (transaction?.modifiedAmount || transaction?.amount) ?? 0;
+        // For IOU or Split, we want the unprocessed amount because it is important whether the amount was positive or negative
         const payerAndReceiver = getIOUPayerAndReceiver(managerID, ownerAccountID, personalDetails, transactionRawAmount);
 
         return {
             from: payerAndReceiver.from,
             to: payerAndReceiver.to,
         };
-    }, [managerID, ownerAccountID, personalDetails, shouldShowPayerAndReceiver, transaction?.amount, transaction?.modifiedAmount]);
+    }, [managerID, ownerAccountID, personalDetails, shouldShowPayerAndReceiver, transactionRawAmount]);
 
     const shouldShowIOUHeader = !!from && !!to;
 

src/components/ReportActionItem/TransactionPreview/index.tsx

@@ -86,6 +86,10 @@ function TransactionPreview(props: TransactionPreviewProps) {
         transactionPreview = originalTransaction;
     }
 
+    // See description of `transactionRawAmount` prop for more context
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    const transactionRawAmount = (transaction?.modifiedAmount || transaction?.amount) ?? 0;
+
     const iouAction = isBillSplit && originalTransaction ? (getIOUActionForReportID(chatReportID, originalTransaction.transactionID) ?? action) : action;
 
     const shouldDisableOnPress = isBillSplit && isEmptyObject(transaction);
@@ -112,6 +116,7 @@ function TransactionPreview(props: TransactionPreviewProps) {
                     chatReport={chatReport}
                     personalDetails={personalDetails}
                     transaction={transactionPreview}
+                    transactionRawAmount={transactionRawAmount}
                     report={report}
                     violations={violations}
                     offlineWithFeedbackOnClose={offlineWithFeedbackOnClose}
@@ -135,6 +140,7 @@ function TransactionPreview(props: TransactionPreviewProps) {
             chatReport={chatReport}
             personalDetails={personalDetails}
             transaction={originalTransaction}
+            transactionRawAmount={transactionRawAmount}
             report={report}
             violations={violations}
             offlineWithFeedbackOnClose={offlineWithFeedbackOnClose}

src/components/ReportActionItem/TransactionPreview/types.ts

@@ -102,6 +102,10 @@ type TransactionPreviewContentProps = {
     /** Holds the transaction data entry from Onyx */
     transaction: OnyxEntry<Transaction>;
 
+    /** The original amount value on the transaction. This is used to deduce who is the sender and who is the receiver of the money request
+     * In case of Splits the property `transaction` is actually an original transaction (for the whole split) and it does not have the data required to deduce who is the sender */
+    transactionRawAmount: number;
+
     /** Represents the action entry from Onyx */
     action: OnyxEntry<ReportAction>;