🍒 Cherry pick PR #19748 to staging 🍒

android/app/build.gradle

@@ -106,8 +106,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001031904
-        versionName "1.3.19-4"
+        versionCode 1001031905
+        versionName "1.3.19-5"
     }
 
     splits {

ios/NewExpensify/Info.plist

@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.3.19.4</string>
+	<string>1.3.19.5</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.3.19.4</string>
+	<string>1.3.19.5</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.3.19-4",
+  "version": "1.3.19-5",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

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,

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', ''))
                             }

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