Fix distance preview mismatch with expense details header

src/components/ReportActionItem/MoneyRequestView.tsx

@@ -25,7 +25,7 @@ import useConfirmModal from '@hooks/useConfirmModal';
 import {useCurrencyListActions} from '@hooks/useCurrencyList';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useDelegateAccountID from '@hooks/useDelegateAccountID';
-import useDistanceRateOriginalPolicy from '@hooks/useDistanceRateOriginalPolicy';
+import useDisplayTransaction from '@hooks/useDisplayTransaction';
 import useEnvironment from '@hooks/useEnvironment';
 import useHasMultipleSplitChildren from '@hooks/useHasMultipleSplitChildren';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
@@ -66,7 +66,6 @@ import {
     canShowReimbursableToggleForPolicy,
     canSubmitPerDiemExpenseFromWorkspace,
     findVendorByID,
-    getDistanceRateCustomUnitRate,
     getLengthOfTag,
     getPerDiemCustomUnit,
     getPolicyByCustomUnitID,
@@ -106,7 +105,6 @@ import {
     getCurrency,
     getDescription,
     getDetailedExpenseTypeTranslationKey,
-    getDisplayTransactionWithoutInvalidCommuterExclusion,
     getDistanceInMeters,
     getFormattedCreated,
     getOriginalAmountForDisplay,
@@ -253,9 +251,9 @@ function MoneyRequestView({
     const isPerDiemRequest = isPerDiemRequestTransactionUtils(transaction);
     const perDiemOriginalPolicy = getPolicyByCustomUnitID(transaction, policiesWithPerDiem);
 
-    const customUnitRateID = isDistanceRequestTransactionUtils(transaction) ? transaction?.comment?.customUnit?.customUnitRateID : undefined;
-    const shouldLookupDistancePolicy = !!customUnitRateID && !getDistanceRateCustomUnitRate(expensePolicy, customUnitRateID);
-    const distanceOriginalPolicy = useDistanceRateOriginalPolicy(customUnitRateID, shouldLookupDistancePolicy);
+    const [reportPolicyType] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${parentReport?.policyID}`, {selector: policyTypeSelector});
+    // Collect/Control (group) policies are always tied to an expense chat, so a group policy type means this is a policy expense chat.
+    const isPolicyExpenseChat = isGroupPolicyByType(reportPolicyType);
 
     let policy;
     let policyID;
@@ -272,6 +270,8 @@ function MoneyRequestView({
         policyID = parentReport?.policyID;
     }
 
+    const {displayTransaction, distanceOriginalPolicy} = useDisplayTransaction(transaction, isPolicyExpenseChat, policy, expensePolicy);
+
     // Use the report's real policy, not `policy` above (swapped to an unrelated workspace for
     // unreported expenses), else self-DM split editing wrongly redirects to RESTRICTED_ACTION.
     const restrictedActionPolicyID = useRestrictedActionPolicyID(expensePolicy);
@@ -303,10 +303,6 @@ function MoneyRequestView({
     const isApproved = isReportApproved({report: moneyRequestReport});
     const isInvoice = isInvoiceReport(moneyRequestReport);
     const isTrackExpense = !mergeTransactionID && isTrackExpenseReportNew(transactionThreadReport, moneyRequestReport, parentReportAction);
-    const [reportPolicyType] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${moneyRequestReport?.policyID}`, {selector: policyTypeSelector});
-    // Collect/Control (group) policies are always tied to an expense chat, so a group policy type means this is a policy expense chat.
-    const isPolicyExpenseChat = isGroupPolicyByType(reportPolicyType);
-
     let iouType: ValueOf<typeof CONST.IOU.TYPE>;
     if (isTrackExpense) {
         iouType = CONST.IOU.TYPE.TRACK;
@@ -317,14 +313,6 @@ function MoneyRequestView({
     }
 
     const allowNegativeAmount = shouldEnableNegative(parentReport, policy, iouType);
-    const displayTransaction = getDisplayTransactionWithoutInvalidCommuterExclusion({
-        transaction,
-        isPolicyExpenseChat,
-        policy: distanceOriginalPolicy ?? policy,
-        translate,
-        getCurrencySymbol,
-    });
-
     const {
         created: transactionDate,
         amount: transactionAmount,

src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx

@@ -62,6 +62,7 @@ function TransactionPreviewContent({
     report,
     policy,
     transaction,
+    displayTransaction,
     violations,
     transactionRawAmount,
     offlineWithFeedbackOnClose,
@@ -86,8 +87,8 @@ function TransactionPreviewContent({
     const {environmentURL} = useEnvironment();
     const isParentPolicyExpenseChat = isPolicyExpenseChat(chatReport);
     const transactionDetails = useMemo<Partial<TransactionDetails>>(
-        () => getTransactionDetails(transaction, undefined, policy, isParentPolicyExpenseChat) ?? {},
-        [transaction, policy, isParentPolicyExpenseChat],
+        () => getTransactionDetails(displayTransaction, undefined, policy, isParentPolicyExpenseChat) ?? {},
+        [displayTransaction, policy, isParentPolicyExpenseChat],
     );
     const {amount, comment: requestComment, merchant, category, currency: requestCurrency} = transactionDetails;
     const [originalTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${getNonEmptyStringOnyxID(transaction?.comment?.originalTransactionID)}`);

src/components/ReportActionItem/TransactionPreview/index.tsx

@@ -3,6 +3,7 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed
 import {showContextMenuForReport, useShowContextMenuActions, useShowContextMenuState} from '@components/ShowContextMenuContext';
 
 import {useCurrencyListActions} from '@hooks/useCurrencyList';
+import useDisplayTransaction from '@hooks/useDisplayTransaction';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useTransactionViolations from '@hooks/useTransactionViolations';
@@ -11,6 +12,7 @@ import ControlSelection from '@libs/ControlSelection';
 import {canUseTouchScreen} from '@libs/DeviceCapabilities';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import Navigation from '@libs/Navigation/Navigation';
+import {isGroupPolicyByType} from '@libs/PolicyUtils';
 import {getOriginalMessage, isMoneyRequestAction as isMoneyRequestActionReportActionsUtils} from '@libs/ReportActionsUtils';
 import {getTransactionDetails} from '@libs/ReportUtils';
 import {getReviewNavigationRoute} from '@libs/TransactionPreviewUtils';
@@ -67,7 +69,10 @@ function TransactionPreview(props: TransactionPreviewProps) {
     const sessionAccountID = session?.accountID;
     const areThereDuplicates = allDuplicateIDs.length > 0 && duplicates.length > 0 && allDuplicateIDs.length === duplicates.length;
 
-    const transactionDetails = getTransactionDetails(transaction);
+    const transactionPreview = onPreviewPressed ? transaction : (originalTransaction ?? transaction);
+    const isParentPolicyExpenseChat = isGroupPolicyByType(policy?.type);
+    const {displayTransaction} = useDisplayTransaction(transactionPreview, isParentPolicyExpenseChat, policy);
+    const transactionDetails = getTransactionDetails(displayTransaction);
     const {amount: requestAmount, currency: requestCurrency} = transactionDetails ?? {};
 
     const contextMenuReportID = contextAction ? chatReportID : reportID;
@@ -88,8 +93,6 @@ function TransactionPreview(props: TransactionPreviewProps) {
     const navigateToReviewFields = () =>
         Navigation.navigate(getReviewNavigationRoute(Navigation.getActiveRoute(), route.params?.reportID, transaction, duplicates, policy, policyCategories, policyTags ?? {}, report));
 
-    const transactionPreview = transaction;
-
     const {isBillSplit} = getOriginalTransactionWithSplitInfo(transaction, originalTransaction);
 
     // See description of `transactionRawAmount` prop for more context
@@ -118,6 +121,7 @@ function TransactionPreview(props: TransactionPreviewProps) {
                     chatReport={chatReport}
                     personalDetails={personalDetails}
                     transaction={transactionPreview}
+                    displayTransaction={displayTransaction}
                     transactionRawAmount={transactionRawAmount}
                     report={report}
                     policy={policy}
@@ -142,7 +146,8 @@ function TransactionPreview(props: TransactionPreviewProps) {
             isBillSplit={isBillSplit}
             chatReport={chatReport}
             personalDetails={personalDetails}
-            transaction={originalTransaction ?? transaction}
+            transaction={transactionPreview}
+            displayTransaction={displayTransaction}
             transactionRawAmount={transactionRawAmount}
             report={report}
             policy={policy}

src/components/ReportActionItem/TransactionPreview/types.ts

@@ -82,6 +82,9 @@ type TransactionPreviewContentProps = {
 
     transaction: OnyxEntry<Transaction>;
 
+    /** Transaction normalized for display-only values. */
+    displayTransaction: OnyxEntry<Transaction>;
+
     /** The amount of the transaction saved in the database. 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;

src/hooks/useDisplayTransaction.ts

@@ -0,0 +1,46 @@
+import {getDistanceRateCustomUnitRate} from '@libs/PolicyUtils';
+import {getDisplayTransactionWithoutInvalidCommuterExclusion, isDistanceRequest} from '@libs/TransactionUtils';
+
+import type {Policy, Transaction} from '@src/types/onyx';
+
+import type {OnyxEntry} from 'react-native-onyx';
+
+import {useCurrencyListActions} from './useCurrencyList';
+import useDistanceRateOriginalPolicy from './useDistanceRateOriginalPolicy';
+import useLocalize from './useLocalize';
+
+type UseDisplayTransactionResult = {
+    displayTransaction: OnyxEntry<Transaction>;
+    distanceOriginalPolicy: OnyxEntry<Policy>;
+};
+
+/**
+ * Normalizes a transaction for display, keeping commuter-reduced values in policy
+ * expense chats and restoring full-route values elsewhere when possible.
+ *
+ * @param policy Fallback policy used for display normalization when no original policy is found.
+ * @param rateLookupPolicy Policy checked for the selected rate before searching other policies. Defaults to policy.
+ */
+function useDisplayTransaction(
+    transaction: OnyxEntry<Transaction>,
+    isPolicyExpenseChat: boolean,
+    policy?: OnyxEntry<Policy>,
+    rateLookupPolicy: OnyxEntry<Policy> = policy,
+): UseDisplayTransactionResult {
+    const {translate} = useLocalize();
+    const {getCurrencySymbol} = useCurrencyListActions();
+    const customUnitRateID = isDistanceRequest(transaction) ? transaction?.comment?.customUnit?.customUnitRateID : undefined;
+    const shouldLookupDistancePolicy = !!customUnitRateID && !getDistanceRateCustomUnitRate(rateLookupPolicy, customUnitRateID);
+    const distanceOriginalPolicy = useDistanceRateOriginalPolicy(customUnitRateID, shouldLookupDistancePolicy);
+    const displayTransaction = getDisplayTransactionWithoutInvalidCommuterExclusion({
+        transaction,
+        isPolicyExpenseChat,
+        policy: distanceOriginalPolicy ?? policy,
+        translate,
+        getCurrencySymbol,
+    });
+
+    return {displayTransaction, distanceOriginalPolicy};
+}
+
+export default useDisplayTransaction;

src/libs/TransactionUtils/getUpdatedTransaction.ts

@@ -135,6 +135,7 @@ function getUpdatedTransaction({
     policy = undefined,
     policies = undefined,
     isSplitTransaction = false,
+    shouldApplyCommuterExclusion = true,
     personalPolicyOutputCurrency,
     getCurrencyDecimals,
     getCurrencySymbol,
@@ -146,6 +147,7 @@ function getUpdatedTransaction({
     policy?: OnyxEntry<Policy>;
     policies?: OnyxCollection<Policy>;
     isSplitTransaction?: boolean;
+    shouldApplyCommuterExclusion?: boolean;
     personalPolicyOutputCurrency: string | undefined;
     getCurrencyDecimals: CurrencyListActionsContextType['getCurrencyDecimals'];
     getCurrencySymbol: CurrencyListActionsContextType['getCurrencySymbol'];
@@ -228,15 +230,16 @@ function getUpdatedTransaction({
                 lodashSet(updatedTransaction, 'comment.customUnit.routeDistanceMeters', distanceInMeters);
             }
 
-            const commuterExclusionTransactionData = hasAppliedCommuterExclusion(updatedTransaction)
-                ? DistanceRequestUtils.getTransactionCommuterExclusionData({
-                      transaction: updatedTransaction,
-                      policy,
-                      storedCustomUnit: transaction?.comment?.customUnit,
-                      personalPolicyOutputCurrency,
-                      hasTripChanged: waypointsActuallyChanged,
-                  })
-                : undefined;
+            const commuterExclusionTransactionData =
+                shouldApplyCommuterExclusion && hasAppliedCommuterExclusion(updatedTransaction)
+                    ? DistanceRequestUtils.getTransactionCommuterExclusionData({
+                          transaction: updatedTransaction,
+                          policy,
+                          storedCustomUnit: transaction?.comment?.customUnit,
+                          personalPolicyOutputCurrency,
+                          hasTripChanged: waypointsActuallyChanged,
+                      })
+                    : undefined;
 
             if (commuterExclusionTransactionData) {
                 lodashSet(updatedTransaction, 'comment.customUnit', commuterExclusionTransactionData.customUnit);
@@ -347,14 +350,15 @@ function getUpdatedTransaction({
             // The commuter exclusion is expressed in distance units, so it has to be re-derived against the new
             // rate's unit and the converted quantity. The amount and merchant then describe the reimbursable
             // distance, matching what the backend stores for modifiedAmount/modifiedMerchant.
-            const commuterExclusionTransactionData = hasAppliedCommuterExclusion(updatedTransaction)
-                ? DistanceRequestUtils.getTransactionCommuterExclusionData({
-                      transaction: updatedTransaction,
-                      policy,
-                      storedCustomUnit: transaction?.comment?.customUnit,
-                      personalPolicyOutputCurrency,
-                  })
-                : undefined;
+            const commuterExclusionTransactionData =
+                shouldApplyCommuterExclusion && hasAppliedCommuterExclusion(updatedTransaction)
+                    ? DistanceRequestUtils.getTransactionCommuterExclusionData({
+                          transaction: updatedTransaction,
+                          policy,
+                          storedCustomUnit: transaction?.comment?.customUnit,
+                          personalPolicyOutputCurrency,
+                      })
+                    : undefined;
 
             if (commuterExclusionTransactionData) {
                 lodashSet(updatedTransaction, 'comment.customUnit', commuterExclusionTransactionData.customUnit);
@@ -373,7 +377,9 @@ function getUpdatedTransaction({
                 DistanceRequestUtils.getCommuterExclusionDisplayData(commuterExclusionTransactionData?.customUnit, unit),
             );
 
-            updatedTransaction.amount = updatedAmount;
+            if (!commuterExclusionTransactionData) {
+                updatedTransaction.amount = updatedAmount;
+            }
             updatedTransaction.modifiedAmount = updatedAmount;
             updatedTransaction.modifiedMerchant = updatedMerchant;
             updatedTransaction.modifiedCurrency = updatedCurrency;