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.

Sign up for GitHub

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

[Form Provider Refactor] WorkspaceRateAndUnitPage #32156

Merged
merged 11 commits into from
Dec 18, 2023
Merged

[Form Provider Refactor] WorkspaceRateAndUnitPage #32156

Changes from 5 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
aa4d70a
add FormProvider in WorkspaceRateAndUnitPage
cdOut Nov 24, 2023
a842462
fix prettier
cdOut Nov 24, 2023
a340bd9
remove unused imports
cdOut Nov 24, 2023
2aeda01
Merge branch 'main' into form-migration/workspace-rate-and-unit-page
cdOut Nov 28, 2023
7129342
fix lint
cdOut Nov 28, 2023
3c4b56c
refactor into functional component
cdOut Nov 30, 2023
35253b0
Merge branch 'main' into form-migration/workspace-rate-and-unit-page
cdOut Dec 7, 2023
ec3976c
merge main into form-migration/workspace-rate-and-unit-page
cdOut Dec 13, 2023
c6208fe
Revert "merge main into form-migration/workspace-rate-and-unit-page"
cdOut Dec 13, 2023
5bd899f
Merge branch 'main' into form-migration/workspace-rate-and-unit-page
cdOut Dec 13, 2023
b68dae0
add review suggested changes
cdOut Dec 13, 2023
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
53 changes: 12 additions & 41 deletions src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import React from 'react';
import {Keyboard, View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import _ from 'underscore';
import Form from '@components/Form';
import FormProvider from '@components/Form/FormProvider';
import InputWrapper from '@components/Form/InputWrapper';
import OfflineWithFeedback from '@components/OfflineWithFeedback';
import {withNetwork} from '@components/OnyxProvider';
import Picker from '@components/Picker';
Expand All @@ -16,7 +17,6 @@ import getPermittedDecimalSeparator from '@libs/getPermittedDecimalSeparator';
import Navigation from '@libs/Navigation/Navigation';
import * as NumberUtils from '@libs/NumberUtils';
import * as PolicyUtils from '@libs/PolicyUtils';
import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes';
import withPolicy, {policyDefaultProps, policyPropTypes} from '@pages/workspace/withPolicy';
import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections';
import * as BankAccounts from '@userActions/BankAccounts';
Expand All @@ -26,9 +26,6 @@ import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';

const propTypes = {
/** Bank account attached to free plan */
reimbursementAccount: ReimbursementAccountProps.reimbursementAccountPropTypes,

...policyPropTypes,
...withLocalizePropTypes,
...withThemeStylesPropTypes,
Expand All @@ -44,16 +41,9 @@ class WorkspaceRateAndUnitPage extends React.Component {
super(props);
this.submit = this.submit.bind(this);
this.validate = this.validate.bind(this);
cdOut marked this conversation as resolved.
Show resolved Hide resolved

this.state = {
rate: 0,
unit: CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES,
};
}

componentDidMount() {
this.resetRateAndUnit();

if (lodashGet(this.props, 'policy.customUnits', []).length !== 0) {
return;
}
Expand All @@ -64,15 +54,6 @@ class WorkspaceRateAndUnitPage extends React.Component {
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() {
return [
{label: this.props.translate('common.kilometers'), value: CONST.CUSTOM_UNITS.DISTANCE_UNIT_KILOMETERS},
Expand All @@ -96,16 +77,6 @@ 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: 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 @@ -128,8 +99,8 @@ class WorkspaceRateAndUnitPage extends React.Component {
Policy.updateWorkspaceCustomUnitAndRate(this.props.policy.id, distanceCustomUnit, newCustomUnit, this.props.policy.lastModified);
}

submit() {
this.saveUnitAndRate(this.state.unit, this.state.rate);
submit(values) {
this.saveUnitAndRate(values.unit, values.rate);
Keyboard.dismiss();
Navigation.goBack(ROUTES.WORKSPACE_REIMBURSE.getRoute(this.props.policy.id));
}
Expand Down Expand Up @@ -160,7 +131,7 @@ class WorkspaceRateAndUnitPage extends React.Component {
backButtonRoute={ROUTES.WORKSPACE_REIMBURSE.getRoute(this.props.policy.id)}
>
{() => (
<Form
<FormProvider
formID={ONYXKEYS.FORMS.WORKSPACE_RATE_AND_UNIT_FORM}
submitButtonText={this.props.translate('common.save')}
style={[this.props.themeStyles.mh5, this.props.themeStyles.flexGrow1]}
Expand All @@ -179,7 +150,8 @@ class WorkspaceRateAndUnitPage extends React.Component {
Policy.clearCustomUnitErrors(this.props.policy.id, lodashGet(distanceCustomUnit, 'customUnitID', ''), lodashGet(distanceCustomRate, 'customUnitRateID', ''))
}
>
<TextInput
<InputWrapper
InputComponent={TextInput}
role={CONST.ACCESSIBILITY_ROLE.TEXT}
inputID="rate"
containerStyles={[this.props.themeStyles.mt4]}
Expand All @@ -191,20 +163,19 @@ class WorkspaceRateAndUnitPage extends React.Component {
autoCorrect={false}
inputMode={CONST.INPUT_MODE.DECIMAL}
maxLength={12}
value={this.state.rate}
onChangeText={(value) => this.setState({rate: value})}
/>

<View style={[this.props.themeStyles.mt4]}>
<Picker
value={this.state.unit}
<InputWrapper
InputComponent={Picker}
inputID="unit"
label={this.props.translate('workspace.reimburse.trackDistanceUnit')}
items={this.getUnitItems()}
onInputChange={(value) => this.setState({unit: value})}
defaultValue={lodashGet(distanceCustomUnit, 'attributes.unit', CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES)}
/>
</View>
</OfflineWithFeedback>
</Form>
</FormProvider>
)}
</WorkspacePageWithSections>
);
Expand Down
Loading