Skip to content

migrate workspaceReimburseView.js from class to function component #22243

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

Merged
MonilBhavsar merged 17 commits into from
Jul 18, 2023
Merged

migrate workspaceReimburseView.js from class to function component #22243

Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
ba14310
migrate class to function component
KrAbhas Jul 5, 2023
9ffa66a
Merge branch 'Expensify:main' into migrting-workspaceReimburseView-2
KrAbhas Jul 9, 2023
ab6f3e2
fix double fetch while mounting
KrAbhas Jul 9, 2023
e9683e0
replace reconnecting check with just state change to online check
KrAbhas Jul 9, 2023
282cf93
cleanup due to previous removal
KrAbhas Jul 9, 2023
5f4f295
Merge branch 'Expensify:main' into migrting-workspaceReimburseView-2
KrAbhas Jul 10, 2023
c2b6708
destruct outside hooks
KrAbhas Jul 10, 2023
5cf809f
Merge branch 'Expensify:main' into migrting-workspaceReimburseView-2
KrAbhas Jul 11, 2023
0e41b38
make getRateLabel more readable
KrAbhas Jul 12, 2023
9799ab8
Merge branch 'Expensify:main' into migrting-workspaceReimburseView-2
KrAbhas Jul 13, 2023
5b127a6
fix fetch on translate and unit change
KrAbhas Jul 13, 2023
723e7fa
return translate in getUnitLabel directly
KrAbhas Jul 13, 2023
e7779aa
use lodash to find customUnitRate
KrAbhas Jul 13, 2023
20b87dc
cleanup providing better indentation
KrAbhas Jul 13, 2023
250aa22
Merge branch 'Expensify:main' into migrting-workspaceReimburseView-2
KrAbhas Jul 17, 2023
e05d34c
take distanceCustomUnit from variable and resolve merge conflict
KrAbhas Jul 17, 2023
36cf4bf
run prettier
KrAbhas Jul 17, 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
232 changes: 111 additions & 121 deletions src/pages/workspace/reimburse/WorkspaceReimburseView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, {useState, useEffect, useCallback} from 'react';
import {View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import PropTypes from 'prop-types';
Expand Down Expand Up @@ -64,140 +64,130 @@ const defaultProps = {
reimbursementAccount: ReimbursementAccountProps.reimbursementAccountDefaultProps,
};

class WorkspaceReimburseView extends React.Component {
constructor(props) {
super(props);
this.state = {
currentRatePerUnit: this.getCurrentRatePerUnitLabel(),
};
}

componentDidMount() {
this.fetchData();
}

componentDidUpdate(prevProps) {
if (prevProps.policy.customUnits !== this.props.policy.customUnits || prevProps.preferredLocale !== this.props.preferredLocale) {
this.setState({currentRatePerUnit: this.getCurrentRatePerUnitLabel()});
}
function WorkspaceReimburseView(props) {
const [currentRatePerUnit, setCurrentRatePerUnit] = useState('');
Comment thread
MonilBhavsar marked this conversation as resolved.
const viewAllReceiptsUrl = `expenses?policyIDList=${props.policy.id}&billableReimbursable=reimbursable&submitterEmail=%2B%2B`;
const distanceCustomUnit = _.find(lodashGet(props.policy, 'customUnits', {}), (unit) => unit.name === 'Distance');
const distanceCustomRate = _.find(lodashGet(distanceCustomUnit, 'rates', {}), (rate) => rate.name === 'Default Rate');
const {translate, toLocaleDigit} = props;

const getNumericValue = useCallback(
(value) => {
const numValue = parseFloat(value.toString().replace(toLocaleDigit('.'), '.'));
if (Number.isNaN(numValue)) {
return NaN;
}
return numValue.toFixed(3);
},
[toLocaleDigit],
);

const getRateDisplayValue = useCallback(
(value) => {
const numValue = getNumericValue(value);
if (Number.isNaN(numValue)) {
return '';
}
return numValue.toString().replace('.', toLocaleDigit('.')).substring(0, value.length);
},
[getNumericValue, toLocaleDigit],
);

const reconnecting = prevProps.network.isOffline && !this.props.network.isOffline;
if (!reconnecting) {
return;
}
const getRateLabel = useCallback((customUnitRate) => getRateDisplayValue(lodashGet(customUnitRate, 'rate', 0) / CONST.POLICY.CUSTOM_UNIT_RATE_BASE_OFFSET), [getRateDisplayValue]);
Comment thread
KrAbhas marked this conversation as resolved.

this.fetchData();
}
const getUnitLabel = useCallback((value) => translate(`common.${value}`), [translate]);

getCurrentRatePerUnitLabel() {
const distanceCustomUnit = _.find(lodashGet(this.props, 'policy.customUnits', {}), (unit) => unit.name === 'Distance');
const customUnitRate = _.find(lodashGet(distanceCustomUnit, 'rates', {}), (rate) => rate.name === 'Default Rate');
const currentUnit = this.getUnitLabel(lodashGet(distanceCustomUnit, 'attributes.unit', 'mi'));
const currentRate = this.getRateLabel(customUnitRate);
const perWord = this.props.translate('common.per');
const getCurrentRatePerUnitLabel = useCallback(() => {
const customUnitRate = _.find(lodashGet(distanceCustomUnit, 'rates', '{}'), (rate) => rate && rate.name === 'Default Rate');
const currentUnit = getUnitLabel(lodashGet(distanceCustomUnit, 'attributes.unit', 'mi'));
const currentRate = getRateLabel(customUnitRate);
const perWord = translate('common.per');
return `${currentRate} ${perWord} ${currentUnit}`;
}

getRateLabel(customUnitRate) {
return this.getRateDisplayValue(lodashGet(customUnitRate, 'rate', 0) / CONST.POLICY.CUSTOM_UNIT_RATE_BASE_OFFSET);
}

getUnitLabel(value) {
return this.props.translate(`common.${value}`);
}

getRateDisplayValue(value) {
const numValue = this.getNumericValue(value);
if (Number.isNaN(numValue)) {
return '';
}
return numValue.toString().replace('.', this.props.toLocaleDigit('.')).substring(0, value.length);
}
}, [translate, distanceCustomUnit, getUnitLabel, getRateLabel]);

getNumericValue(value) {
const numValue = parseFloat(value.toString().replace(this.props.toLocaleDigit('.'), '.'));
if (Number.isNaN(numValue)) {
return NaN;
}
return numValue.toFixed(3);
}

fetchData() {
const fetchData = useCallback(() => {
// Instead of setting the reimbursement account loading within the optimistic data of the API command, use a separate action so that the Onyx value is updated right away.
// openWorkspaceReimburseView uses API.read which will not make the request until all WRITE requests in the sequential queue have finished responding, so there would be a delay in
// updating Onyx with the optimistic data.
BankAccounts.setReimbursementAccountLoading(true);
Policy.openWorkspaceReimburseView(this.props.policy.id);
}

render() {
const viewAllReceiptsUrl = `expenses?policyIDList=${this.props.policy.id}&billableReimbursable=reimbursable&submitterEmail=%2B%2B`;
const distanceCustomUnit = _.find(lodashGet(this.props, 'policy.customUnits', {}), (unit) => unit.name === 'Distance');
const distanceCustomRate = _.find(lodashGet(distanceCustomUnit, 'rates', {}), (rate) => rate.name === 'Default Rate');
return (
<>
<Section
title={this.props.translate('workspace.reimburse.captureReceipts')}
icon={Illustrations.MoneyReceipts}
menuItems={[
{
title: this.props.translate('workspace.reimburse.viewAllReceipts'),
onPress: () => Link.openOldDotLink(viewAllReceiptsUrl),
icon: Expensicons.Receipt,
shouldShowRightIcon: true,
iconRight: Expensicons.NewWindow,
wrapperStyle: [styles.cardMenuItem],
link: () => Link.buildOldDotURL(viewAllReceiptsUrl),
},
]}
>
<View style={[styles.mv3, styles.flexRow, styles.flexWrap]}>
<Text numberOfLines={100}>
{this.props.translate('workspace.reimburse.captureNoVBACopyBeforeEmail')}
<CopyTextToClipboard
text="receipts@expensify.com"
textStyles={[styles.textBlue]}
/>
<Text>{this.props.translate('workspace.reimburse.captureNoVBACopyAfterEmail')}</Text>
</Text>
</View>
</Section>

<Section
title={this.props.translate('workspace.reimburse.trackDistance')}
icon={Illustrations.TrackShoe}
>
<View style={[styles.mv3]}>
<Text>{this.props.translate('workspace.reimburse.trackDistanceCopy')}</Text>
</View>
<OfflineWithFeedback
pendingAction={lodashGet(distanceCustomUnit, 'pendingAction') || lodashGet(distanceCustomRate, 'pendingAction')}
shouldShowErrorMessages={false}
>
<MenuItemWithTopDescription
title={this.state.currentRatePerUnit}
description={this.props.translate('workspace.reimburse.trackDistanceRate')}
shouldShowRightIcon
onPress={() => Navigation.navigate(ROUTES.getWorkspaceRateAndUnitRoute(this.props.policy.id))}
wrapperStyle={[styles.mhn5, styles.wAuto]}
brickRoadIndicator={(lodashGet(distanceCustomUnit, 'errors') || lodashGet(distanceCustomRate, 'errors')) && CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR}
Policy.openWorkspaceReimburseView(props.policy.id);
}, [props.policy.id]);

useEffect(() => {
if (props.network.isOffline) {
return;
}
fetchData();
}, [props.network.isOffline, fetchData]);

useEffect(() => {
setCurrentRatePerUnit(getCurrentRatePerUnitLabel());
}, [props.policy.customUnits, getCurrentRatePerUnitLabel]);

return (
<>
<Section
title={translate('workspace.reimburse.captureReceipts')}
icon={Illustrations.MoneyReceipts}
menuItems={[
{
title: translate('workspace.reimburse.viewAllReceipts'),
onPress: () => Link.openOldDotLink(viewAllReceiptsUrl),
icon: Expensicons.Receipt,
shouldShowRightIcon: true,
iconRight: Expensicons.NewWindow,
wrapperStyle: [styles.cardMenuItem],
link: () => Link.buildOldDotURL(viewAllReceiptsUrl),
},
]}
>
<View style={[styles.mv3, styles.flexRow, styles.flexWrap]}>
<Text numberOfLines={100}>
{translate('workspace.reimburse.captureNoVBACopyBeforeEmail')}
<CopyTextToClipboard
text="receipts@expensify.com"
textStyles={[styles.textBlue]}
/>
</OfflineWithFeedback>
</Section>

<WorkspaceReimburseSection
policy={this.props.policy}
reimbursementAccount={this.props.reimbursementAccount}
network={this.props.network}
translate={this.props.translate}
/>
</>
);
}
<Text>{translate('workspace.reimburse.captureNoVBACopyAfterEmail')}</Text>
</Text>
</View>
</Section>

<Section
title={translate('workspace.reimburse.trackDistance')}
icon={Illustrations.TrackShoe}
>
<View style={[styles.mv3]}>
<Text>{translate('workspace.reimburse.trackDistanceCopy')}</Text>
</View>
<OfflineWithFeedback
pendingAction={lodashGet(distanceCustomUnit, 'pendingAction') || lodashGet(distanceCustomRate, 'pendingAction')}
shouldShowErrorMessages={false}
>
<MenuItemWithTopDescription
title={currentRatePerUnit}
description={translate('workspace.reimburse.trackDistanceRate')}
shouldShowRightIcon
onPress={() => Navigation.navigate(ROUTES.getWorkspaceRateAndUnitRoute(props.policy.id))}
wrapperStyle={[styles.mhn5, styles.wAuto]}
brickRoadIndicator={(lodashGet(distanceCustomUnit, 'errors') || lodashGet(distanceCustomRate, 'errors')) && CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR}
/>
</OfflineWithFeedback>
</Section>

<WorkspaceReimburseSection
policy={props.policy}
reimbursementAccount={props.reimbursementAccount}
network={props.network}
translate={translate}
/>
</>
);
}

WorkspaceReimburseView.defaultProps = defaultProps;
WorkspaceReimburseView.propTypes = propTypes;
WorkspaceReimburseView.displayName = 'WorkspaceReimburseView';

export default compose(
withLocalize,
Expand Down