Skip to content

Commit fd92e19

Browse files
marcaaronmarcaaron
authored
Merge pull request #4019 from Expensify/cmartins-offline-currency
Add offline message to IOU and Split bill and allow currency selection while offline
2 parents 1f12c30 + 9144f80 commit fd92e19

File tree

13 files changed

+119
-133
lines changed

13 files changed

+119
-133
lines changed

‎src/CONST.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/IOUConfirmationList.js

Lines changed: 30 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -19,20 +19,12 @@ import SafeAreaInsetPropTypes from '../pages/SafeAreaInsetPropTypes';
1919
import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
2020
import compose from '../libs/compose';
2121
import FixedFooter from './FixedFooter';
22+
import CONST from '../CONST';
2223

2324
const propTypes = {
2425
/** Callback to inform parent modal of success */
2526
onConfirm: PropTypes.func.isRequired,
2627

27-
// User's currency preference
28-
selectedCurrency: PropTypes.shape({
29-
// Currency code for the selected currency
30-
currencyCode: PropTypes.string,
31-
32-
// Currency symbol for the selected currency
33-
currencySymbol: PropTypes.string,
34-
}).isRequired,
35-
3628
// Callback to update comment from IOUModal
3729
onUpdateComment: PropTypes.func,
3830

@@ -80,20 +72,33 @@ const propTypes = {
8072

8173
/** Primary login of the user */
8274
login: PropTypes.string,
83-
}).isRequired,
75+
}),
8476

8577
/** Holds data related to IOU view state, rather than the underlying IOU data. */
8678
iou: PropTypes.shape({
8779

8880
/** Whether or not the IOU step is loading (creating the IOU Report) */
8981
loading: PropTypes.bool,
82+
83+
// Selected Currency Code of the current IOU
84+
selectedCurrencyCode: PropTypes.string,
85+
}),
86+
87+
/** Information about the network */
88+
network: PropTypes.shape({
89+
/** Is the network currently offline or not */
90+
isOffline: PropTypes.bool,
9091
}),
9192
};
9293

9394
const defaultProps = {
94-
iou: {},
95+
iou: {
96+
selectedCurrencyCode: CONST.CURRENCY.USD,
97+
},
9598
onUpdateComment: null,
9699
comment: '',
100+
network: {},
101+
myPersonalDetails: {},
97102
};
98103

99104
// Gives minimum height to offset the height of
@@ -115,14 +120,14 @@ class IOUConfirmationList extends Component {
115120
this.props.myPersonalDetails,
116121
this.props.numberFormat(this.calculateAmount() / 100, {
117122
style: 'currency',
118-
currency: this.props.selectedCurrency.currencyCode,
123+
currency: this.props.iou.selectedCurrencyCode,
119124
}),
120125
);
121126

122127
const formattedParticipants = getIOUConfirmationOptionsFromParticipants(this.props.participants,
123128
this.props.numberFormat(this.calculateAmount() / 100, {
124129
style: 'currency',
125-
currency: this.props.selectedCurrency.currencyCode,
130+
currency: this.props.iou.selectedCurrencyCode,
126131
}));
127132

128133
sections.push({
@@ -141,7 +146,7 @@ class IOUConfirmationList extends Component {
141146
const formattedParticipants = getIOUConfirmationOptionsFromParticipants(this.props.participants,
142147
this.props.numberFormat(this.props.iouAmount, {
143148
style: 'currency',
144-
currency: this.props.selectedCurrency.currencyCode,
149+
currency: this.props.iou.selectedCurrencyCode,
145150
}));
146151

147152
sections.push({
@@ -237,7 +242,7 @@ class IOUConfirmationList extends Component {
237242
this.props.hasMultipleParticipants ? 'iou.split' : 'iou.request', {
238243
amount: this.props.numberFormat(
239244
this.props.iouAmount,
240-
{style: 'currency', currency: this.props.selectedCurrency.currencyCode},
245+
{style: 'currency', currency: this.props.iou.selectedCurrencyCode},
241246
),
242247
},
243248
);
@@ -274,10 +279,16 @@ class IOUConfirmationList extends Component {
274279
</View>
275280
</ScrollView>
276281
<FixedFooter>
282+
{this.props.network.isOffline && (
283+
<Text style={[styles.formError, styles.pb2]}>
284+
{this.props.translate('session.offlineMessage')}
285+
</Text>
286+
)}
277287
<Button
278288
success
289+
isDisabled={this.props.network.isOffline}
279290
style={[styles.w100]}
280-
isLoading={this.props.iou.loading}
291+
isLoading={this.props.iou.loading && !this.props.network.isOffline}
281292
text={buttonText}
282293
onPress={() => this.props.onConfirm(this.getSplits())}
283294
pressOnEnter
@@ -301,5 +312,8 @@ export default compose(
301312
myPersonalDetails: {
302313
key: ONYXKEYS.MY_PERSONAL_DETAILS,
303314
},
315+
network: {
316+
key: ONYXKEYS.NETWORK,
317+
},
304318
}),
305319
)(IOUConfirmationList);

‎src/languages/en.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -471,7 +471,8 @@ export default {
471471
},
472472
},
473473
session: {
474-
offlineMessage: 'Looks like you\'re offline. Please check your connection and try again.',
474+
offlineMessageRetry: 'Looks like you\'re offline. Please check your connection and try again.',
475+
offlineMessage: 'Looks like you\'re offline.',
475476
},
476477
workspace: {
477478
common: {

‎src/languages/es.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -387,7 +387,8 @@ export default {
387387
},
388388
},
389389
session: {
390-
offlineMessage: 'Parece que estás desconectado. Por favor chequea tu conexión e inténtalo otra vez',
390+
offlineMessageRetry: 'Parece que estás desconectado. Por favor chequea tu conexión e inténtalo otra vez',
391+
offlineMessage: 'Parece que estás desconectado.',
391392
},
392393
workspace: {
393394
common: {

‎src/libs/Navigation/AppNavigator/AuthScreens.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ class AuthScreens extends React.Component {
157157
User.getUserDetails();
158158
User.getBetas();
159159
User.getDomainInfo();
160-
PersonalDetails.fetchCurrencyPreferences();
160+
PersonalDetails.fetchLocalCurrency();
161161
fetchAllReports(true, true);
162162
fetchCountryCodeByRequestIP();
163163
UnreadIndicatorUpdater.listenForReportChanges();

‎src/libs/OptionsListUtils.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -683,7 +683,6 @@ function getHeaderMessage(hasSelectableOptions, hasUserToInvite, searchValue, ma
683683
*
684684
* @param {Object} currencyOptions
685685
* @param {String} searchValue
686-
* @param {Object} selectedCurrency
687686
* @returns {Array}
688687
*/
689688
function getCurrencyListForSections(currencyOptions, searchValue) {

‎src/libs/actions/IOU.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,15 @@ function rejectTransaction({
152152
});
153153
}
154154

155+
/**
156+
* Sets IOU'S selected currency
157+
*
158+
* @param {String} selectedCurrencyCode
159+
*/
160+
function setIOUSelectedCurrency(selectedCurrencyCode) {
161+
Onyx.merge(ONYXKEYS.IOU, {selectedCurrencyCode});
162+
}
163+
155164
/**
156165
* @private
157166
*
@@ -239,4 +248,5 @@ export {
239248
createIOUSplit,
240249
rejectTransaction,
241250
payIOUReport,
251+
setIOUSelectedCurrency,
242252
};

‎src/libs/actions/PersonalDetails.js

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -233,9 +233,9 @@ function getCurrencyList() {
233233
}
234234

235235
/**
236-
* Fetches the Currency preferences based on location and sets currency code/symbol to local storage
236+
* Fetches the local currency based on location and sets currency code/symbol to local storage
237237
*/
238-
function fetchCurrencyPreferences() {
238+
function fetchLocalCurrency() {
239239
const coords = {};
240240
let currency = '';
241241

@@ -247,14 +247,9 @@ function fetchCurrencyPreferences() {
247247
.then((data) => {
248248
currency = data.currency;
249249
})
250-
.then(API.GetCurrencyList)
251250
.then(getCurrencyList)
252-
.then((currencyList) => {
253-
Onyx.merge(ONYXKEYS.MY_PERSONAL_DETAILS,
254-
{
255-
preferredCurrencyCode: currency,
256-
preferredCurrencySymbol: currencyList[currency].symbol,
257-
});
251+
.then(() => {
252+
Onyx.merge(ONYXKEYS.MY_PERSONAL_DETAILS, {localCurrencyCode: currency});
258253
})
259254
.catch(error => console.debug(`Error fetching currency preference: , ${error}`))
260255
.finally(() => {
@@ -302,6 +297,6 @@ export {
302297
setPersonalDetails,
303298
setAvatar,
304299
deleteAvatar,
305-
fetchCurrencyPreferences,
300+
fetchLocalCurrency,
306301
getCurrencyList,
307302
};

‎src/libs/actions/Session.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ function fetchAccountDetails(login) {
135135
Onyx.merge(ONYXKEYS.ACCOUNT, {error: response.message});
136136
})
137137
.catch(() => {
138-
Onyx.merge(ONYXKEYS.ACCOUNT, {error: translateLocal('session.offlineMessage')});
138+
Onyx.merge(ONYXKEYS.ACCOUNT, {error: translateLocal('session.offlineMessageRetry')});
139139
})
140140
.finally(() => {
141141
Onyx.merge(ONYXKEYS.ACCOUNT, {loading: false});

‎src/pages/iou/IOUCurrencySelection.js

Lines changed: 27 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, {Component} from 'react';
22
import {SectionList, View} from 'react-native';
33
import PropTypes from 'prop-types';
4-
import Onyx, {withOnyx} from 'react-native-onyx';
4+
import {withOnyx} from 'react-native-onyx';
55
import _ from 'underscore';
66
import styles from '../../styles/styles';
77
import {getCurrencyList} from '../../libs/actions/PersonalDetails';
@@ -20,6 +20,7 @@ import CONST from '../../CONST';
2020
import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
2121
import Button from '../../components/Button';
2222
import FixedFooter from '../../components/FixedFooter';
23+
import {setIOUSelectedCurrency} from '../../libs/actions/IOU';
2324

2425
/**
2526
* IOU Currency selection for selecting currency
@@ -29,11 +30,15 @@ const propTypes = {
2930
// The personal details of the person who is logged in
3031
myPersonalDetails: PropTypes.shape({
3132

32-
// Preferred Currency Code of the current user
33-
preferredCurrencyCode: PropTypes.string,
33+
// Local Currency Code of the current user
34+
localCurrencyCode: PropTypes.string,
35+
}),
36+
37+
/** Holds data related to IOU */
38+
iou: PropTypes.shape({
3439

35-
// Currency Symbol of the Preferred Currency
36-
preferredCurrencySymbol: PropTypes.string,
40+
// Selected Currency Code of the current IOU
41+
selectedCurrencyCode: PropTypes.string,
3742
}),
3843

3944
// The currency list constant object from Onyx
@@ -51,7 +56,12 @@ const propTypes = {
5156
};
5257

5358
const defaultProps = {
54-
myPersonalDetails: {preferredCurrencyCode: CONST.CURRENCY.USD, preferredCurrencySymbol: '$'},
59+
myPersonalDetails: {
60+
localCurrencyCode: CONST.CURRENCY.USD,
61+
},
62+
iou: {
63+
selectedCurrencyCode: CONST.CURRENCY.USD,
64+
},
5565
currencyList: {},
5666
};
5767

@@ -65,10 +75,7 @@ class IOUCurrencySelection extends Component {
6575
this.state = {
6676
searchValue: '',
6777
currencyData: currencyOptions,
68-
selectedCurrency: {
69-
currencyCode: this.props.myPersonalDetails.preferredCurrencyCode,
70-
currencySymbol: this.props.myPersonalDetails.preferredCurrencySymbol,
71-
},
78+
toggledCurrencyCode: '',
7279
};
7380
this.getCurrencyOptions = this.getCurrencyOptions.bind(this);
7481
this.toggleOption = this.toggleOption.bind(this);
@@ -115,18 +122,13 @@ class IOUCurrencySelection extends Component {
115122
}
116123

117124
/**
118-
* Function which renders a row in the list
125+
* Function which toggles a currency in the list
119126
*
120-
* @param {String} currencyCode
127+
* @param {String} toggledCurrencyCode
121128
*
122129
*/
123-
toggleOption(currencyCode) {
124-
this.setState({
125-
selectedCurrency: {
126-
currencyCode,
127-
currencySymbol: this.props.currencyList[currencyCode].symbol,
128-
},
129-
});
130+
toggleOption(toggledCurrencyCode) {
131+
this.setState({toggledCurrencyCode});
130132
}
131133

132134
/**
@@ -150,10 +152,7 @@ class IOUCurrencySelection extends Component {
150152
* @return {void}
151153
*/
152154
confirmCurrencySelection() {
153-
Onyx.merge(ONYXKEYS.MY_PERSONAL_DETAILS, {
154-
preferredCurrencyCode: this.state.selectedCurrency.currencyCode,
155-
preferredCurrencySymbol: this.state.selectedCurrency.currencySymbol,
156-
});
155+
setIOUSelectedCurrency(this.state.toggledCurrencyCode);
157156
Navigation.goBack();
158157
}
159158

@@ -193,7 +192,9 @@ class IOUCurrencySelection extends Component {
193192
mode="compact"
194193
option={item}
195194
onSelectRow={() => this.toggleOption(item.currencyCode)}
196-
isSelected={item.currencyCode === this.state.selectedCurrency.currencyCode}
195+
isSelected={
196+
item.currencyCode === this.state.toggledCurrencyCode
197+
}
197198
showSelectedState
198199
hideAdditionalOptionStates
199200
/>
@@ -212,7 +213,7 @@ class IOUCurrencySelection extends Component {
212213
<FixedFooter>
213214
<Button
214215
success
215-
isDisabled={!this.state.selectedCurrency?.currencyCode}
216+
isDisabled={!this.props.iou.selectedCurrencyCode}
216217
style={[styles.w100]}
217218
text={this.props.translate('iou.confirm')}
218219
onPress={this.confirmCurrencySelection}
@@ -233,5 +234,6 @@ export default compose(
233234
withOnyx({
234235
currencyList: {key: ONYXKEYS.CURRENCY_LIST},
235236
myPersonalDetails: {key: ONYXKEYS.MY_PERSONAL_DETAILS},
237+
iou: {key: ONYXKEYS.IOU},
236238
}),
237239
)(IOUCurrencySelection);

0 commit comments

Comments
 (0)