Rate unit page accessed from url

src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js

@@ -2,6 +2,7 @@ import React from 'react';
 import {Keyboard, View} from 'react-native';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
+import {withOnyx} from 'react-native-onyx';
 import ONYXKEYS from '../../../ONYXKEYS';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import styles from '../../../styles/styles';
@@ -18,13 +19,19 @@ import Form from '../../../components/Form';
 import Navigation from '../../../libs/Navigation/Navigation';
 import ROUTES from '../../../ROUTES';
 import getPermittedDecimalSeparator from '../../../libs/getPermittedDecimalSeparator';
+import * as BankAccounts from '../../../libs/actions/BankAccounts';
+import * as ReimbursementAccountProps from '../../ReimbursementAccount/reimbursementAccountPropTypes';
 
 const propTypes = {
+    /** Bank account attached to free plan */
+    reimbursementAccount: ReimbursementAccountProps.reimbursementAccountPropTypes,
+
     ...policyPropTypes,
     ...withLocalizePropTypes,
 };
 
 const defaultProps = {
+    reimbursementAccount: {},
     ...policyDefaultProps,
 };
 
@@ -33,6 +40,45 @@ class WorkspaceRateAndUnitPage extends React.Component {
         super(props);
         this.submit = this.submit.bind(this);
         this.validate = this.validate.bind(this);
+
+        this.state = {
+            rate: 0,
+            unit: 'mi',
+        };
+    }
+
+    componentDidMount() {
+        const distanceCustomUnit = _.find(lodashGet(this.props, 'policy.customUnits', {}), (unit) => unit.name === CONST.CUSTOM_UNITS.NAME_DISTANCE);
+        const distanceCustomRate = _.find(lodashGet(distanceCustomUnit, 'rates', {}), (rate) => rate.name === CONST.CUSTOM_UNITS.DEFAULT_RATE);
+
+        this.setState({
+            rate: this.getUnitRateValue(distanceCustomRate),
+            unit: lodashGet(distanceCustomUnit, 'attributes.unit', 'mi'),
+        });
+
+        if (lodashGet(this.props, 'policy.customUnits', []).length !== 0) {
+            return;
+        }
+        // When this page is accessed directly from url, the policy.customUnits data won't be available,
+        // and we should trigger Policy.openWorkspaceReimburseView to get the data
+
+        BankAccounts.setReimbursementAccountLoading(true);
+        Policy.openWorkspaceReimburseView(this.props.policy.id);
+    }
+
+    componentDidUpdate(prevProps) {
+        // We should update rate input when rate data is fetched
+        if (prevProps.reimbursementAccount.isLoading === this.props.reimbursementAccount.isLoading) {
+            return;
+        }
+
+        const distanceCustomUnit = _.find(lodashGet(this.props, 'policy.customUnits', {}), (unit) => unit.name === CONST.CUSTOM_UNITS.NAME_DISTANCE);
+        const distanceCustomRate = _.find(lodashGet(distanceCustomUnit, 'rates', {}), (rate) => rate.name === CONST.CUSTOM_UNITS.DEFAULT_RATE);
+
+        this.setState({
+            rate: this.getUnitRateValue(distanceCustomRate),
+            unit: lodashGet(distanceCustomUnit, 'attributes.unit', 'mi'),
+        });
     }
 
     getUnitRateValue(customUnitRate) {
@@ -84,8 +130,8 @@ class WorkspaceRateAndUnitPage extends React.Component {
         Policy.updateWorkspaceCustomUnitAndRate(this.props.policy.id, distanceCustomUnit, newCustomUnit, this.props.policy.lastModified);
     }
 
-    submit(values) {
-        this.saveUnitAndRate(values.unit, values.rate);
+    submit() {
+        this.saveUnitAndRate(this.state.unit, this.state.rate);
         Keyboard.dismiss();
         Navigation.goBack(ROUTES.getWorkspaceReimburseRoute(this.props.policy.id));
     }
@@ -137,21 +183,22 @@ class WorkspaceRateAndUnitPage extends React.Component {
                                 accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                                 inputID="rate"
                                 containerStyles={[styles.mt4]}
-                                defaultValue={this.getUnitRateValue(distanceCustomRate)}
                                 label={this.props.translate('workspace.reimburse.trackDistanceRate')}
                                 accessibilityLabel={this.props.translate('workspace.reimburse.trackDistanceRate')}
                                 placeholder={lodashGet(this.props, 'policy.outputCurrency', CONST.CURRENCY.USD)}
                                 autoCompleteType="off"
                                 autoCorrect={false}
                                 keyboardType={CONST.KEYBOARD_TYPE.DECIMAL_PAD}
                                 maxLength={12}
+                                value={this.state.rate}
+                                onChangeText={(value) => this.setState({rate: value})}
                             />
                             <View style={[styles.mt4]}>
                                 <Picker
-                                    inputID="unit"
-                                    defaultValue={lodashGet(distanceCustomUnit, 'attributes.unit', 'mi')}
+                                    value={this.state.unit}
                                     label={this.props.translate('workspace.reimburse.trackDistanceUnit')}
                                     items={this.getUnitItems()}
+                                    onInputChange={(value) => this.setState({unit: value})}
                                 />
                             </View>
                         </OfflineWithFeedback>
@@ -165,4 +212,13 @@ class WorkspaceRateAndUnitPage extends React.Component {
 WorkspaceRateAndUnitPage.propTypes = propTypes;
 WorkspaceRateAndUnitPage.defaultProps = defaultProps;
 
-export default compose(withPolicy, withLocalize, withNetwork())(WorkspaceRateAndUnitPage);
+export default compose(
+    withPolicy,
+    withLocalize,
+    withNetwork(),
+    withOnyx({
+        reimbursementAccount: {
+            key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
+        },
+    }),
+)(WorkspaceRateAndUnitPage);