From 594b6a25368d44781bf0fa6226ec4a4601722d82 Mon Sep 17 00:00:00 2001 From: Ali Toshmatov Date: Fri, 22 Sep 2023 15:39:36 +0500 Subject: [PATCH 1/3] Added fetching rate data from rate and unit page --- .../reimburse/WorkspaceRateAndUnitPage.js | 68 +++++++++++++++++-- 1 file changed, 62 insertions(+), 6 deletions(-) diff --git a/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js b/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js index e551e0d6d1b9..c2fe5dacf901 100644 --- a/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js +++ b/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,7 +183,6 @@ 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)} @@ -145,13 +190,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})} /> this.setState({unit: value})} /> @@ -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); From 86448b69f7f18f0c3710e99bfafe081a50fca464 Mon Sep 17 00:00:00 2001 From: Ali Toshmatov Date: Sat, 23 Sep 2023 06:51:58 +0500 Subject: [PATCH 2/3] Introduced resetRateAndUnit function --- .../reimburse/WorkspaceRateAndUnitPage.js | 26 +++++++++---------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js b/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js index c2fe5dacf901..b314f5436aa0 100644 --- a/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js +++ b/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js @@ -48,13 +48,7 @@ class WorkspaceRateAndUnitPage extends React.Component { } 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'), - }); + this.resetRateAndUnit(); if (lodashGet(this.props, 'policy.customUnits', []).length !== 0) { return; @@ -72,13 +66,7 @@ class WorkspaceRateAndUnitPage extends React.Component { 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'), - }); + this.resetRateAndUnit(); } getUnitRateValue(customUnitRate) { @@ -108,6 +96,16 @@ class WorkspaceRateAndUnitPage extends React.Component { 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: this.getUnitRateValue(distanceCustomRate), + unit: lodashGet(distanceCustomUnit, 'attributes.unit', 'mi'), + }); + } + saveUnitAndRate(unit, rate) { const distanceCustomUnit = _.find(lodashGet(this.props, 'policy.customUnits', {}), (u) => u.name === CONST.CUSTOM_UNITS.NAME_DISTANCE); if (!distanceCustomUnit) { From bddd367fb0856c975ebee92d9bd54fe5f08a3d85 Mon Sep 17 00:00:00 2001 From: Ali Toshmatov Date: Wed, 27 Sep 2023 13:58:36 +0500 Subject: [PATCH 3/3] Used const in default rate unit --- src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js b/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js index 676f7169a265..bdbcd1919257 100644 --- a/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js +++ b/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js @@ -44,7 +44,7 @@ class WorkspaceRateAndUnitPage extends React.Component { this.state = { rate: 0, - unit: 'mi', + unit: CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES, }; } @@ -99,7 +99,7 @@ class WorkspaceRateAndUnitPage extends React.Component { this.setState({ rate: PolicyUtils.getUnitRateValue(distanceCustomRate, this.props.toLocaleDigit), - unit: lodashGet(distanceCustomUnit, 'attributes.unit', 'mi'), + unit: lodashGet(distanceCustomUnit, 'attributes.unit', CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES), }); }