[CP Staging] Feat/36985 create new rate field followups

src/components/MoneyRequestConfirmationList.tsx

@@ -749,7 +749,6 @@ function MoneyRequestConfirmationList({
                     style={[styles.moneyRequestMenuItem]}
                     titleStyle={styles.flex1}
                     onPress={() => Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_DISTANCE.getRoute(action, iouType, transactionID, reportID, Navigation.getActiveRouteWithoutParams()))}
-                    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
                     disabled={didConfirm}
                     // todo: handle edit for transaction while moving from track expense
                     interactive={!isReadOnly && !isMovingTransactionFromTrackExpense}
@@ -767,9 +766,7 @@ function MoneyRequestConfirmationList({
                     description={translate('common.distance')}
                     style={[styles.moneyRequestMenuItem]}
                     titleStyle={styles.flex1}
-                    onPress={() =>
-                        Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_DISTANCE.getRoute(CONST.IOU.ACTION.CREATE, iouType, transactionID, reportID, Navigation.getActiveRouteWithoutParams()))
-                    }
+                    onPress={() => Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_DISTANCE.getRoute(action, iouType, transactionID, reportID, Navigation.getActiveRouteWithoutParams()))}
                     disabled={didConfirm}
                     interactive={!isReadOnly}
                 />

src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

@@ -196,7 +196,7 @@ function MoneyRequestPreviewContent({
         }
 
         if (isFetchingWaypointsFromServer && !requestAmount) {
-            return translate('iou.routePending');
+            return translate('iou.fieldPending');
         }
 
         return CurrencyUtils.convertToDisplayString(requestAmount, requestCurrency);

src/components/ReportActionItem/MoneyRequestView.tsx

@@ -40,6 +40,7 @@ import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type * as OnyxTypes from '@src/types/onyx';
+import type {IOUMessage} from '@src/types/onyx/OriginalMessage';
 import type {TransactionPendingFieldsKey} from '@src/types/onyx/Transaction';
 import ReportActionItemImage from './ReportActionItemImage';
 
@@ -67,8 +68,8 @@ type MoneyRequestViewOnyxPropsWithoutTransaction = {
     /** The actions from the parent report */
     parentReportActions: OnyxEntry<OnyxTypes.ReportActions>;
 
-    /** The rates for the policy */
-    rates: Record<string, MileageRate>;
+    /** The distance rates from the policy */
+    distanceRates: Record<string, MileageRate>;
 };
 
 type MoneyRequestViewPropsWithoutTransaction = MoneyRequestViewOnyxPropsWithoutTransaction & {
@@ -95,16 +96,17 @@ function MoneyRequestView({
     policy,
     transactionViolations,
     shouldShowAnimatedBackground,
-    rates,
+    distanceRates,
 }: MoneyRequestViewProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {isOffline} = useNetwork();
     const {isSmallScreenWidth} = useWindowDimensions();
     const {translate, toLocaleDigit} = useLocalize();
-    const {canUseViolations, canUseP2PDistanceRequests} = usePermissions();
     const parentReportAction = parentReportActions?.[report.parentReportActionID ?? ''] ?? null;
+    const isExpenseTracking = (parentReportAction?.originalMessage as IOUMessage)?.type === CONST.IOU.REPORT_ACTION_TYPE.TRACK;
+    const {canUseViolations, canUseP2PDistanceRequests} = usePermissions(isExpenseTracking ? CONST.IOU.TYPE.TRACK : undefined);
     const moneyRequestReport = parentReport;
     const {
         created: transactionDate,
@@ -186,8 +188,9 @@ function MoneyRequestView({
 
     const currency = policy ? policy.outputCurrency : PolicyUtils.getPersonalPolicy()?.outputCurrency ?? CONST.CURRENCY.USD;
 
-    const mileageRate = TransactionUtils.isCustomUnitRateIDForP2P(transaction) ? DistanceRequestUtils.getRateForP2P(currency) : rates[rateID as string] ?? {};
-    const {unit, rate} = mileageRate;
+    const mileageRate = TransactionUtils.isCustomUnitRateIDForP2P(transaction) ? DistanceRequestUtils.getRateForP2P(currency) : distanceRates[rateID as string] ?? {};
+    const {unit} = mileageRate;
+    const rate = (transaction?.comment?.customUnit?.defaultP2PRate as number) ?? mileageRate.rate;
 
     const distance = DistanceRequestUtils.getDistanceFromMerchant(transactionMerchant, unit);
     const rateToDisplay = DistanceRequestUtils.getRateForDisplay(unit, rate, currency, translate, toLocaleDigit, isOffline);
@@ -290,6 +293,7 @@ function MoneyRequestView({
                     onPress={() => Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_DISTANCE.getRoute(CONST.IOU.ACTION.EDIT, iouType, transaction?.transactionID ?? '', report.reportID))}
                 />
             </OfflineWithFeedback>
+            {/* TODO: correct the pending field action https://github.com/Expensify/App/issues/36988 (?) */}
             <OfflineWithFeedback pendingAction={getPendingFieldAction('waypoints')}>
                 <MenuItemWithTopDescription
                     description={translate('common.rate')}
@@ -561,7 +565,7 @@ export default withOnyx<MoneyRequestViewPropsWithoutTransaction, MoneyRequestVie
         key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report ? report.parentReportID : '0'}`,
         canEvict: false,
     },
-    rates: {
+    distanceRates: {
         key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`,
         selector: DistanceRequestUtils.getMileageRates,
     },

src/components/ReportActionItem/ReportPreview.tsx

@@ -165,7 +165,7 @@ function ReportPreview({
             return translate('iou.receiptScanning');
         }
         if (hasOnlyTransactionsWithPendingRoutes) {
-            return translate('iou.routePending');
+            return translate('iou.fieldPending');
         }
 
         // If iouReport is not available, get amount from the action message (Ex: "Domain20821's Workspace owes $33.00" or "paid ₫60" or "paid -₫60 elsewhere")

src/languages/en.ts

@@ -630,7 +630,7 @@ export default {
         canceled: 'Canceled',
         posted: 'Posted',
         deleteReceipt: 'Delete receipt',
-        routePending: 'Pending...',
+        fieldPending: 'Pending...',
         defaultRate: 'Default rate',
         receiptScanning: 'Scan in progress…',
         receiptMissingDetails: 'Receipt missing details',

src/languages/es.ts

@@ -623,7 +623,7 @@ export default {
         canceled: 'Canceló',
         posted: 'Contabilizado',
         deleteReceipt: 'Eliminar recibo',
-        routePending: 'Pendiente...',
+        fieldPending: 'Pendiente...',
         defaultRate: 'Tasa predeterminada',
         receiptScanning: 'Escaneo en curso…',
         receiptMissingDetails: 'Recibo con campos vacíos',

src/libs/DistanceRequestUtils.ts

@@ -20,18 +20,6 @@ type MileageRate = {
     name?: string;
 };
 
-const policies: OnyxCollection<Policy> = {};
-Onyx.connect({
-    key: ONYXKEYS.COLLECTION.POLICY,
-    callback: (policy, key) => {
-        if (!policy || !key || !policy.name) {
-            return;
-        }
-
-        policies[key] = policy;
-    },
-});
-
 let lastSelectedDistanceRates: OnyxEntry<LastSelectedDistanceRates> = {};
 Onyx.connect({
     key: ONYXKEYS.NVP_LAST_SELECTED_DISTANCE_RATES,
@@ -50,6 +38,12 @@ Onyx.connect({
 const METERS_TO_KM = 0.001; // 1 kilometer is 1000 meters
 const METERS_TO_MILES = 0.000621371; // There are approximately 0.000621371 miles in a meter
 
+/** Validates that the merchant for a distance request transaction is in the expected format.
+ * <distance> <unit> @ <formatted rate with currency> / <unit>
+ * Example: 1.45 miles @ $0.67 / mi
+ */
+const distanceMerchantRegex = /^[0-9.]+ \w+ @ (-|-\()?(\p{Sc}|\p{L}|\w){1,3} ?[0-9.]+\)? \/ \w+$/u;
+
 /**
  * Retrieves the default mileage rate based on a given policy.
  *
@@ -116,7 +110,7 @@ function getRoundedDistanceInUnits(distanceInMeters: number, unit: Unit): string
  * @param currency The currency associated with the rate
  * @param translate Translate function
  * @param toLocaleDigit Function to convert to localized digit
- * @returns A string that describes the distance traveled and the rate used for expense calculation
+ * @returns A string that displays the rate used for expense calculation
  */
 function getRateForDisplay(
     unit: Unit | undefined,
@@ -130,15 +124,15 @@ function getRateForDisplay(
         return translate('iou.defaultRate');
     }
     if (!rate || !currency || !unit) {
-        return translate('iou.routePending');
+        return translate('iou.fieldPending');
     }
 
     const singularDistanceUnit = unit === CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES ? translate('common.mile') : translate('common.kilometer');
-    const ratePerUnit = PolicyUtils.getUnitRateValue(toLocaleDigit, {rate});
+    const formattedRate = PolicyUtils.getUnitRateValue(toLocaleDigit, {rate});
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     const currencySymbol = CurrencyUtils.getCurrencySymbol(currency) || `${currency} `;
 
-    return `${currencySymbol}${ratePerUnit} / ${singularDistanceUnit}`;
+    return `${currencySymbol}${formattedRate} / ${singularDistanceUnit}`;
 }
 
 /**
@@ -150,8 +144,8 @@ function getRateForDisplay(
  * @returns A string that describes the distance traveled
  */
 function getDistanceForDisplay(hasRoute: boolean, distanceInMeters: number, unit: Unit | undefined, rate: number | undefined, translate: LocaleContextProps['translate']): string {
-    if (!hasRoute || !rate || !unit) {
-        return translate('iou.routePending');
+    if (!hasRoute || !rate || !unit || !distanceInMeters) {
+        return translate('iou.fieldPending');
     }
 
     const distanceInUnits = getRoundedDistanceInUnits(distanceInMeters, unit);
@@ -182,7 +176,7 @@ function getDistanceMerchant(
     toLocaleDigit: LocaleContextProps['toLocaleDigit'],
 ): string {
     if (!hasRoute || !rate) {
-        return translate('iou.routePending');
+        return translate('iou.fieldPending');
     }
 
     const distanceInUnits = getDistanceForDisplay(hasRoute, distanceInMeters, unit, rate, translate);
@@ -201,11 +195,7 @@ function getDistanceMerchant(
 function getMileageRates(policy: OnyxEntry<Policy>): Record<string, MileageRate> {
     const mileageRates: Record<string, MileageRate> = {};
 
-    if (!policy) {
-        return mileageRates;
-    }
-
-    if (!policy?.customUnits) {
+    if (!policy || !policy?.customUnits) {
         return mileageRates;
     }
 
@@ -227,6 +217,13 @@ function getMileageRates(policy: OnyxEntry<Policy>): Record<string, MileageRate>
     return mileageRates;
 }
 
+/**
+ * Retrieves the rate and unit for a P2P distance expense for a given currency.
+ *
+ * @param currency
+ * @returns The rate and unit in RateAndUnit object.
+ */
+
 function getRateForP2P(currency: string): RateAndUnit {
     return CONST.CURRENCY_TO_DEFAULT_MILEAGE_RATE[currency] ?? CONST.CURRENCY_TO_DEFAULT_MILEAGE_RATE.USD;
 }
@@ -252,7 +249,7 @@ function getDistanceRequestAmount(distance: number, unit: Unit, rate: number): n
  * @returns The distance extracted from the merchant string.
  */
 function getDistanceFromMerchant(merchant: string | undefined, unit: Unit): number {
-    if (!merchant) {
+    if (!merchant || !distanceMerchantRegex.test(merchant ?? '')) {
         return 0;
     }
 

src/libs/ReportUtils.ts

@@ -2633,7 +2633,7 @@ function getTransactionReportName(reportAction: OnyxEntry<ReportAction | Optimis
     }
 
     if (TransactionUtils.isFetchingWaypointsFromServer(transaction)) {
-        return Localize.translateLocal('iou.routePending');
+        return Localize.translateLocal('iou.fieldPending');
     }
 
     if (TransactionUtils.hasReceipt(transaction) && TransactionUtils.isReceiptBeingScanned(transaction)) {
@@ -2746,7 +2746,7 @@ function getReportPreviewMessage(
     }
 
     if (!isEmptyObject(linkedTransaction) && TransactionUtils.isFetchingWaypointsFromServer(linkedTransaction) && !TransactionUtils.getAmount(linkedTransaction)) {
-        return Localize.translateLocal('iou.routePending');
+        return Localize.translateLocal('iou.fieldPending');
     }
 
     const originalMessage = iouReportAction?.originalMessage as IOUMessage | undefined;

src/libs/actions/IOU.ts

@@ -1857,7 +1857,7 @@ function getUpdateMoneyRequestParams(
             ...updatedTransaction,
             amount: CONST.IOU.DEFAULT_AMOUNT,
             modifiedAmount: CONST.IOU.DEFAULT_AMOUNT,
-            modifiedMerchant: Localize.translateLocal('iou.routePending'),
+            modifiedMerchant: Localize.translateLocal('iou.fieldPending'),
         };
 
         // Delete the draft transaction when editing waypoints when the server responds successfully and there are no errors
@@ -2139,7 +2139,7 @@ function getUpdateTrackExpenseParams(
             ...updatedTransaction,
             amount: CONST.IOU.DEFAULT_AMOUNT,
             modifiedAmount: CONST.IOU.DEFAULT_AMOUNT,
-            modifiedMerchant: Localize.translateLocal('iou.routePending'),
+            modifiedMerchant: Localize.translateLocal('iou.fieldPending'),
         };
 
         // Delete the draft transaction when editing waypoints when the server responds successfully and there are no errors

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

@@ -232,7 +232,7 @@ function IOURequestStepDistance({
                         amount: 0,
                         comment: '',
                         currency: transaction?.currency ?? 'USD',
-                        merchant: translate('iou.routePending'),
+                        merchant: translate('iou.fieldPending'),
                         created: transaction?.created ?? '',
                         category: '',
                         tag: '',
@@ -242,7 +242,7 @@ function IOURequestStepDistance({
                     return;
                 }
                 IOU.setMoneyRequestPendingFields(transactionID, {waypoints: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD});
-                IOU.setMoneyRequestMerchant(transactionID, translate('iou.routePending'), false);
+                IOU.setMoneyRequestMerchant(transactionID, translate('iou.fieldPending'), false);
                 IOU.createDistanceRequest(
                     report,
                     participants[0],
@@ -252,7 +252,7 @@ function IOURequestStepDistance({
                     '',
                     0,
                     transaction?.currency ?? 'USD',
-                    translate('iou.routePending'),
+                    translate('iou.fieldPending'),
                     false,
                     TransactionUtils.getValidWaypoints(waypoints, true),
                 );