Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rate unit page accessed from url #28004

Merged
merged 5 commits into from
Oct 2, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 76 additions & 5 deletions src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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,
};

Expand All @@ -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() {
Expand All @@ -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) {
Expand All @@ -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));
}
Expand Down Expand Up @@ -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>
Expand All @@ -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);
Loading