Skip to content

Commit

Permalink
Merge pull request #18995 from bernhardoj/fix/18667-return-selected-c…
Browse files Browse the repository at this point in the history 
…urrency

Fix currency selection is saved even though we don't press Save yet
  • Loading branch information
@arosiclair
arosiclair authored May 19, 2023
2 parents 123a86f + af78a3e commit 84ef813
Show file tree
Hide file tree
Showing 4 changed files with 40 additions and 16 deletions.
6 changes: 3 additions & 3 deletions src/ROUTES.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,9 +91,9 @@ export default {
IOU_SEND_ADD_BANK_ACCOUNT: `${IOU_SEND}/add-bank-account`,
IOU_SEND_ADD_DEBIT_CARD: `${IOU_SEND}/add-debit-card`,
IOU_SEND_ENABLE_PAYMENTS: `${IOU_SEND}/enable-payments`,
getIouRequestCurrencyRoute: (reportID) => `${IOU_REQUEST_CURRENCY}/${reportID}`,
getIouBillCurrencyRoute: (reportID) => `${IOU_BILL_CURRENCY}/${reportID}`,
getIouSendCurrencyRoute: (reportID) => `${IOU_SEND_CURRENCY}/${reportID}`,
getIouRequestCurrencyRoute: (reportID, currency, backTo) => `${IOU_REQUEST_CURRENCY}/${reportID}?currency=${currency}&backTo=${backTo}`,
getIouBillCurrencyRoute: (reportID, currency, backTo) => `${IOU_BILL_CURRENCY}/${reportID}?currency=${currency}&backTo=${backTo}`,
getIouSendCurrencyRoute: (reportID, currency, backTo) => `${IOU_SEND_CURRENCY}/${reportID}?currency=${currency}&backTo=${backTo}`,
IOU_DETAILS,
IOU_DETAILS_ADD_BANK_ACCOUNT: `${IOU_DETAILS}/add-bank-account`,
IOU_DETAILS_ADD_DEBIT_CARD: `${IOU_DETAILS}/add-debit-card`,
Expand Down
23 changes: 17 additions & 6 deletions src/pages/iou/IOUCurrencySelection.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {withOnyx} from 'react-native-onyx';
import _ from 'underscore';
import lodashGet from 'lodash/get';
import Str from 'expensify-common/lib/str';
import ONYXKEYS from '../../ONYXKEYS';
import OptionsSelector from '../../components/OptionsSelector';
Expand All @@ -10,7 +11,6 @@ import ScreenWrapper from '../../components/ScreenWrapper';
import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
import compose from '../../libs/compose';
import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
import * as IOU from '../../libs/actions/IOU';
import * as CurrencyUtils from '../../libs/CurrencyUtils';
import {withNetwork} from '../../components/OnyxProvider';
import CONST from '../../CONST';
Expand Down Expand Up @@ -89,12 +89,16 @@ class IOUCurrencySelection extends Component {
return sections;
}

getSelectedCurrencyCode() {
return lodashGet(this.props.route, 'params.currency', this.props.iou.selectedCurrencyCode);
}

/**
* @returns {Object}
*/
getCurrencyOptions() {
return _.map(this.props.currencyList, (currencyInfo, currencyCode) => {
const isSelectedCurrency = currencyCode === this.props.iou.selectedCurrencyCode;
const isSelectedCurrency = currencyCode === this.getSelectedCurrencyCode();
return {
text: `${currencyCode} - ${CurrencyUtils.getLocalizedCurrencySymbol(currencyCode)}`,
currencyCode,
Expand Down Expand Up @@ -122,14 +126,21 @@ class IOUCurrencySelection extends Component {
}

/**
* Confirms the selection of currency and sets values in Onyx
* Confirms the selection of currency
*
* @param {Object} option
* @param {String} option.currencyCode
*/
confirmCurrencySelection(option) {
IOU.setIOUSelectedCurrency(option.currencyCode);
Navigation.goBack();
const backTo = lodashGet(this.props.route, 'params.backTo', '');
// When we refresh the web, the money request route gets cleared from the navigation stack.
// Navigating to "backTo" will result in forward navigation instead, causing disruption to the currency selection.
// To prevent any negative experience, we have made the decision to simply close the currency selection page.
if (_.isEmpty(backTo) || this.props.navigation.getState().routes.length === 1) {
Navigation.goBack();
} else {
Navigation.navigate(`${this.props.route.params.backTo}?currency=${option.currencyCode}`);
}
}

render() {
Expand All @@ -151,7 +162,7 @@ class IOUCurrencySelection extends Component {
headerMessage={headerMessage}
safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
initiallyFocusedOptionKey={_.get(
_.find(this.state.currencyData, (currency) => currency.currencyCode === this.props.iou.selectedCurrencyCode),
_.find(this.state.currencyData, (currency) => currency.currencyCode === this.getSelectedCurrencyCode()),
'keyForList',
)}
shouldHaveOptionSeparator
Expand Down
6 changes: 4 additions & 2 deletions src/pages/iou/MoneyRequestModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -311,15 +311,17 @@ const MoneyRequestModal = (props) => {
>
{modalHeader}
<MoneyRequestAmountPage
onStepComplete={(value) => {
const amountInSmallestCurrencyUnits = CurrencyUtils.convertToSmallestUnit(props.iou.selectedCurrencyCode, Number.parseFloat(value));
onStepComplete={(value, selectedCurrencyCode) => {
const amountInSmallestCurrencyUnits = CurrencyUtils.convertToSmallestUnit(selectedCurrencyCode, Number.parseFloat(value));
IOU.setIOUSelectedCurrency(selectedCurrencyCode);
setAmount(amountInSmallestCurrencyUnits);
navigateToNextStep();
}}
reportID={reportID}
hasMultipleParticipants={props.hasMultipleParticipants}
selectedAmount={CurrencyUtils.convertToWholeUnit(props.iou.selectedCurrencyCode, amount)}
navigation={props.navigation}
route={props.route}
iouType={props.iouType}
buttonText={amountButtonText}
/>
Expand Down
21 changes: 16 additions & 5 deletions src/pages/iou/steps/MoneyRequestAmountPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ class MoneyRequestAmountPage extends React.Component {
const selectedAmountAsString = props.selectedAmount ? props.selectedAmount.toString() : '';
this.state = {
amount: selectedAmountAsString,
selectedCurrencyCode: props.iou.selectedCurrencyCode,
shouldUpdateSelection: true,
selection: {
start: selectedAmountAsString.length,
Expand All @@ -80,6 +81,7 @@ class MoneyRequestAmountPage extends React.Component {
// Focus automatically after navigating back from currency selector
this.unsubscribeNavFocus = this.props.navigation.addListener('focus', () => {
this.focusTextInput();
this.getCurrencyFromRouteParams();
});
}

Expand All @@ -104,6 +106,13 @@ class MoneyRequestAmountPage extends React.Component {
}
}

getCurrencyFromRouteParams() {
const selectedCurrencyCode = lodashGet(this.props.route.params, 'currency', '');
if (selectedCurrencyCode !== '') {
this.setState({selectedCurrencyCode});
}
}

/**
* Returns the new selection object based on the updated amount's length
*
Expand Down Expand Up @@ -289,13 +298,15 @@ class MoneyRequestAmountPage extends React.Component {
}

navigateToCurrencySelectionPage() {
// Remove query from the route and encode it.
const activeRoute = encodeURIComponent(Navigation.getActiveRoute().replace(/\?.*/, ''));
if (this.props.hasMultipleParticipants) {
return Navigation.navigate(ROUTES.getIouBillCurrencyRoute(this.props.reportID));
return Navigation.navigate(ROUTES.getIouBillCurrencyRoute(this.props.reportID, this.state.selectedCurrencyCode, activeRoute));
}
if (this.props.iouType === CONST.IOU.MONEY_REQUEST_TYPE.SEND) {
return Navigation.navigate(ROUTES.getIouSendCurrencyRoute(this.props.reportID));
return Navigation.navigate(ROUTES.getIouSendCurrencyRoute(this.props.reportID, this.state.selectedCurrencyCode, activeRoute));
}
return Navigation.navigate(ROUTES.getIouRequestCurrencyRoute(this.props.reportID));
return Navigation.navigate(ROUTES.getIouRequestCurrencyRoute(this.props.reportID, this.state.selectedCurrencyCode, activeRoute));
}

render() {
Expand All @@ -314,7 +325,7 @@ class MoneyRequestAmountPage extends React.Component {
onCurrencyButtonPress={this.navigateToCurrencySelectionPage}
placeholder={this.props.numberFormat(0)}
ref={(el) => (this.textInput = el)}
selectedCurrencyCode={this.props.iou.selectedCurrencyCode}
selectedCurrencyCode={this.state.selectedCurrencyCode}
selection={this.state.selection}
onSelectionChange={(e) => {
if (!this.state.shouldUpdateSelection) {
Expand Down Expand Up @@ -342,7 +353,7 @@ class MoneyRequestAmountPage extends React.Component {
<Button
success
style={[styles.w100, styles.mt5]}
onPress={() => this.props.onStepComplete(this.state.amount)}
onPress={() => this.props.onStepComplete(this.state.amount, this.state.selectedCurrencyCode)}
pressOnEnter
isDisabled={!this.state.amount.length || parseFloat(this.state.amount) < 0.01}
text={this.props.buttonText}
Expand Down

0 comments on commit 84ef813

Please sign in to comment.