Merge pull request #28004 from alitoshmatov/rate-unit-page

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';
@@ -19,13 +20,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,
 };
 
@@ -34,6 +41,33 @@ class WorkspaceRateAndUnitPage extends React.Component {
         super(props);
         this.submit = this.submit.bind(this);
         this.validate = this.validate.bind(this);
+
+        this.state = {
+            rate: 0,
+            unit: CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES,
+        };
+    }
+
+    componentDidMount() {
+        this.resetRateAndUnit();
+
+        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;
+        }
+
+        this.resetRateAndUnit();
     }
 
     getUnitItems() {
@@ -43,6 +77,32 @@ class WorkspaceRateAndUnitPage extends React.Component {
         ];
     }
 
+    getRateDisplayValue(value) {
+        const numValue = this.getNumericValue(value);
+        if (Number.isNaN(numValue)) {
+            return '';
+        }
+        return numValue.toString().replace('.', this.props.toLocaleDigit('.')).substring(0, value.length);
+    }
+
+    getNumericValue(value) {
+        const numValue = parseFloat(value.toString().replace(',', '.'));
+        if (Number.isNaN(numValue)) {
+            return NaN;
+        }
+        return numValue.toFixed(3);
+    }
+
+    resetRateAndUnit() {
+        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: PolicyUtils.getUnitRateValue(distanceCustomRate, this.props.toLocaleDigit),
+            unit: lodashGet(distanceCustomUnit, 'attributes.unit', CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES),
+        });
+    }
+
     saveUnitAndRate(unit, rate) {
         const distanceCustomUnit = _.find(lodashGet(this.props, 'policy.customUnits', {}), (u) => u.name === CONST.CUSTOM_UNITS.NAME_DISTANCE);
         if (!distanceCustomUnit) {
@@ -65,8 +125,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.WORKSPACE_REIMBURSE.getRoute(this.props.policy.id));
     }
@@ -126,13 +186,15 @@ class WorkspaceRateAndUnitPage extends React.Component {
                                 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>
@@ -146,4 +208,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);