From c7bee90d4b2b6964c212fcfe7281c5f1bfa5f0a2 Mon Sep 17 00:00:00 2001
From: Carlos Martins <cmartins@expensify.com>
Date: Mon, 29 May 2023 12:07:14 -0600
Subject: [PATCH] Merge pull request #19748 from
 Expensify/cmartins-fixUnitRates

Fix unit rates

(cherry picked from commit 6bebb33357a9e39d5d91ed73ca013c1222b96d68)
---
 src/libs/actions/Policy.js                    |  2 +-
 .../reimburse/WorkspaceRateAndUnitPage.js     |  5 ++--
 .../reimburse/WorkspaceReimburseView.js       | 23 +++++++++++++------
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/libs/actions/Policy.js b/src/libs/actions/Policy.js
index 8fd37a7e30f8..66bcf0ba1392 100644
--- a/src/libs/actions/Policy.js
+++ b/src/libs/actions/Policy.js
@@ -670,7 +670,7 @@ function updateWorkspaceCustomUnitAndRate(policyID, currentCustomUnit, newCustom
             value: {
                 customUnits: {
                     [currentCustomUnit.customUnitID]: {
-                        ...currentCustomUnit.customUnitID,
+                        customUnitID: currentCustomUnit.customUnitID,
                         rates: {
                             [currentCustomUnit.rates.customUnitRateID]: {
                                 ...currentCustomUnit.rates,
diff --git a/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js b/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js
index 31d218f49a4f..2140adefae7f 100644
--- a/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js
+++ b/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js
@@ -105,7 +105,6 @@ class WorkspaceRateAndUnitPage extends React.Component {
         const distanceCustomRate = _.find(lodashGet(distanceCustomUnit, 'rates', {}), (rate) => rate.name === 'Default Rate');
         return (
             <WorkspacePageWithSections
-                shouldUseScrollView
                 headerText={this.props.translate('workspace.reimburse.trackDistance')}
                 route={this.props.route}
                 guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_REIMBURSE}
@@ -125,9 +124,9 @@ class WorkspaceRateAndUnitPage extends React.Component {
                         <OfflineWithFeedback
                             errors={{
                                 ...lodashGet(distanceCustomUnit, 'errors', {}),
-                                ...lodashGet(distanceCustomRate.errors, 'errors', {}),
+                                ...lodashGet(distanceCustomRate, 'errors', {}),
                             }}
-                            pendingAction={distanceCustomUnit.pendingAction || distanceCustomRate.pendingAction}
+                            pendingAction={lodashGet(distanceCustomUnit, 'pendingAction') || lodashGet(distanceCustomRate, 'pendingAction')}
                             onClose={() =>
                                 Policy.clearCustomUnitErrors(this.props.policy.id, lodashGet(distanceCustomUnit, 'customUnitID', ''), lodashGet(distanceCustomRate, 'customUnitRateID', ''))
                             }
diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseView.js b/src/pages/workspace/reimburse/WorkspaceReimburseView.js
index a065c6c918b9..b1b802a65208 100644
--- a/src/pages/workspace/reimburse/WorkspaceReimburseView.js
+++ b/src/pages/workspace/reimburse/WorkspaceReimburseView.js
@@ -24,6 +24,7 @@ import {withNetwork} from '../../../components/OnyxProvider';
 import networkPropTypes from '../../../components/networkPropTypes';
 import WorkspaceReimburseSection from './WorkspaceReimburseSection';
 import * as BankAccounts from '../../../libs/actions/BankAccounts';
+import OfflineWithFeedback from '../../../components/OfflineWithFeedback';
 
 const propTypes = {
     /** Policy values needed in the component */
@@ -131,6 +132,8 @@ class WorkspaceReimburseView extends React.Component {
 
     render() {
         const viewAllReceiptsUrl = `expenses?policyIDList=${this.props.policy.id}&billableReimbursable=reimbursable&submitterEmail=%2B%2B`;
+        const distanceCustomUnit = _.find(lodashGet(this.props, 'policy.customUnits', {}), (unit) => unit.name === 'Distance');
+        const distanceCustomRate = _.find(lodashGet(distanceCustomUnit, 'rates', {}), (rate) => rate.name === 'Default Rate');
         return (
             <>
                 <Section
@@ -167,13 +170,19 @@ class WorkspaceReimburseView extends React.Component {
                     <View style={[styles.mv3]}>
                         <Text>{this.props.translate('workspace.reimburse.trackDistanceCopy')}</Text>
                     </View>
-                    <MenuItemWithTopDescription
-                        title={this.state.currentRatePerUnit}
-                        description={this.props.translate('workspace.reimburse.trackDistanceRate')}
-                        shouldShowRightIcon
-                        onPress={() => Navigation.navigate(ROUTES.getWorkspaceRateAndUnitRoute(this.props.policy.id))}
-                        wrapperStyle={[styles.mhn5, styles.wAuto]}
-                    />
+                    <OfflineWithFeedback
+                        pendingAction={lodashGet(distanceCustomUnit, 'pendingAction') || lodashGet(distanceCustomRate, 'pendingAction')}
+                        shouldShowErrorMessages={false}
+                    >
+                        <MenuItemWithTopDescription
+                            title={this.state.currentRatePerUnit}
+                            description={this.props.translate('workspace.reimburse.trackDistanceRate')}
+                            shouldShowRightIcon
+                            onPress={() => Navigation.navigate(ROUTES.getWorkspaceRateAndUnitRoute(this.props.policy.id))}
+                            wrapperStyle={[styles.mhn5, styles.wAuto]}
+                            brickRoadIndicator={(lodashGet(distanceCustomUnit, 'errors') || lodashGet(distanceCustomRate, 'errors')) && CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR}
+                        />
+                    </OfflineWithFeedback>
                 </Section>
 
                 <WorkspaceReimburseSection