fix: [P2P Distance] Split - Participants amount displayed 0.00 briefly on confirmation screen.

src/pages/iou/request/step/IOURequestStepParticipants.tsx

@@ -8,9 +8,11 @@ import usePermissions from '@hooks/usePermissions';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {READ_COMMANDS} from '@libs/API/types';
 import DistanceRequestUtils from '@libs/DistanceRequestUtils';
+import type {MileageRate} from '@libs/DistanceRequestUtils';
 import HttpUtils from '@libs/HttpUtils';
 import * as IOUUtils from '@libs/IOUUtils';
 import Navigation from '@libs/Navigation/Navigation';
+import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import MoneyRequestParticipantsSelector from '@pages/iou/request/MoneyRequestParticipantsSelector';
@@ -41,6 +43,7 @@ function IOURequestStepParticipants({
     },
     transaction,
     skipConfirmation,
+    report,
 }: IOURequestStepParticipantsProps) {
     const participants = transaction?.participants;
     const {translate} = useLocalize();
@@ -53,6 +56,7 @@ function IOURequestStepParticipants({
     const numberOfParticipants = useRef(participants?.length ?? 0);
     const iouRequestType = TransactionUtils.getRequestType(transaction);
     const isSplitRequest = iouType === CONST.IOU.TYPE.SPLIT;
+    const isDistanceRequest = iouRequestType === CONST.IOU.REQUEST_TYPE.DISTANCE;
     const headerTitle = useMemo(() => {
         if (action === CONST.IOU.ACTION.CATEGORIZE) {
             return translate('iou.categorize');
@@ -115,6 +119,37 @@ function IOURequestStepParticipants({
         [iouType, reportID, transactionID, canUseP2PDistanceRequests],
     );
 
+    // Sets `amount` and `split` share data before moving to the next step to avoid briefly showing `0.00` as the split share for participants
+    const setDistanceRequestData = useCallback(
+        (isPolicyExpenseChat: boolean) => {
+            // Get policy report based on transaction participants
+            const policyReport = transaction?.participants?.[0] ? ReportUtils.getReport(selectedReportID.current) : report;
+
+            const policyID = IOU.getIOURequestPolicyID(transaction, policyReport);
+            const policy = PolicyUtils.getPolicy(report?.policyID ?? policyID);
+            const policyCurrency = policy?.outputCurrency ?? PolicyUtils.getPersonalPolicy()?.outputCurrency ?? CONST.CURRENCY.USD;
+
+            const customUnitRateID = TransactionUtils.getRateID(transaction) ?? '-1';
+            const mileageRates = DistanceRequestUtils.getMileageRates(policy);
+            const defaultMileageRate = DistanceRequestUtils.getDefaultMileageRate(policy);
+            const mileageRate: MileageRate = TransactionUtils.isCustomUnitRateIDForP2P(transaction)
+                ? DistanceRequestUtils.getRateForP2P(policyCurrency)
+                : mileageRates?.[customUnitRateID] ?? defaultMileageRate;
+
+            const {unit, rate} = mileageRate ?? {};
+            const distance = TransactionUtils.getDistanceInMeters(transaction, unit);
+            const currency = mileageRate?.currency ?? policyCurrency;
+            const amount = DistanceRequestUtils.getDistanceRequestAmount(distance, unit ?? CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES, rate ?? 0);
+            IOU.setMoneyRequestAmount(transactionID, amount, currency);
+
+            const participantAccountIDs: number[] | undefined = transaction?.participants?.map((participant) => participant.accountID ?? -1);
+            if (isSplitRequest && amount && currency && !isPolicyExpenseChat) {
+                IOU.setSplitShares(transaction, amount, currency ?? '', participantAccountIDs ?? []);
+            }
+        },
+        [report, transaction, transactionID, isSplitRequest],
+    );
+
     const goToNextStep = useCallback(() => {
         const isCategorizing = action === CONST.IOU.ACTION.CATEGORIZE;
         const isShareAction = action === CONST.IOU.ACTION.SHARE;
@@ -125,6 +160,10 @@ function IOURequestStepParticipants({
             IOU.setSplitShares(transaction, transaction.amount, transaction.currency, participantAccountIDs);
         }
 
+        if (isDistanceRequest) {
+            setDistanceRequestData(!!isPolicyExpenseChat);
+        }
+
         IOU.setMoneyRequestTag(transactionID, '');
         IOU.setMoneyRequestCategory(transactionID, '');
         if ((isCategorizing || isShareAction) && numberOfParticipants.current === 0) {
@@ -138,7 +177,7 @@ function IOURequestStepParticipants({
         } else {
             Navigation.navigate(iouConfirmationPageRoute);
         }
-    }, [iouType, transactionID, transaction, reportID, action, participants]);
+    }, [iouType, transactionID, transaction, reportID, action, participants, setDistanceRequestData, isDistanceRequest]);
 
     const navigateBack = useCallback(() => {
         IOUUtils.navigateToStartMoneyRequestStep(iouRequestType, iouType, transactionID, reportID, action);