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

Add offline message to IOU and Split bill and allow currency selection while offline #4019

Merged
merged 14 commits into from
Jul 22, 2021
2 changes: 1 addition & 1 deletion src/CONST.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

46 changes: 30 additions & 16 deletions src/components/IOUConfirmationList.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,20 +19,12 @@ import SafeAreaInsetPropTypes from '../pages/SafeAreaInsetPropTypes';
import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
import compose from '../libs/compose';
import FixedFooter from './FixedFooter';
import CONST from '../CONST';

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

// User's currency preference
selectedCurrency: PropTypes.shape({
// Currency code for the selected currency
currencyCode: PropTypes.string,

// Currency symbol for the selected currency
currencySymbol: PropTypes.string,
}).isRequired,

// Callback to update comment from IOUModal
onUpdateComment: PropTypes.func,

Expand Down Expand Up @@ -80,20 +72,33 @@ const propTypes = {

/** Primary login of the user */
login: PropTypes.string,
}).isRequired,
}),

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

/** Whether or not the IOU step is loading (creating the IOU Report) */
loading: PropTypes.bool,

// Selected Currency Code of the current IOU
selectedCurrencyCode: PropTypes.string,
}),

/** Information about the network */
network: PropTypes.shape({
/** Is the network currently offline or not */
isOffline: PropTypes.bool,
}),
};

const defaultProps = {
iou: {},
iou: {
selectedCurrencyCode: CONST.CURRENCY.USD,
},
onUpdateComment: null,
comment: '',
network: {},
myPersonalDetails: {},
};

// Gives minimum height to offset the height of
Expand All @@ -115,14 +120,14 @@ class IOUConfirmationList extends Component {
this.props.myPersonalDetails,
this.props.numberFormat(this.calculateAmount() / 100, {
style: 'currency',
currency: this.props.selectedCurrency.currencyCode,
currency: this.props.iou.selectedCurrencyCode,
}),
);

const formattedParticipants = getIOUConfirmationOptionsFromParticipants(this.props.participants,
this.props.numberFormat(this.calculateAmount() / 100, {
style: 'currency',
currency: this.props.selectedCurrency.currencyCode,
currency: this.props.iou.selectedCurrencyCode,
}));

sections.push({
Expand All @@ -141,7 +146,7 @@ class IOUConfirmationList extends Component {
const formattedParticipants = getIOUConfirmationOptionsFromParticipants(this.props.participants,
this.props.numberFormat(this.props.iouAmount, {
style: 'currency',
currency: this.props.selectedCurrency.currencyCode,
currency: this.props.iou.selectedCurrencyCode,
}));

sections.push({
Expand Down Expand Up @@ -237,7 +242,7 @@ class IOUConfirmationList extends Component {
this.props.hasMultipleParticipants ? 'iou.split' : 'iou.request', {
amount: this.props.numberFormat(
this.props.iouAmount,
{style: 'currency', currency: this.props.selectedCurrency.currencyCode},
{style: 'currency', currency: this.props.iou.selectedCurrencyCode},
),
},
);
Expand Down Expand Up @@ -274,10 +279,16 @@ class IOUConfirmationList extends Component {
</View>
</ScrollView>
<FixedFooter>
{this.props.network.isOffline && (
<Text style={[styles.formError, styles.pb2]}>
{this.props.translate('session.offlineMessage')}
luacmartins marked this conversation as resolved.
Show resolved Hide resolved
</Text>
)}
<Button
success
isDisabled={this.props.network.isOffline}
style={[styles.w100]}
isLoading={this.props.iou.loading}
isLoading={this.props.iou.loading && !this.props.network.isOffline}
text={buttonText}
onPress={() => this.props.onConfirm(this.getSplits())}
pressOnEnter
Expand All @@ -301,5 +312,8 @@ export default compose(
myPersonalDetails: {
key: ONYXKEYS.MY_PERSONAL_DETAILS,
},
network: {
key: ONYXKEYS.NETWORK,
},
}),
)(IOUConfirmationList);
3 changes: 2 additions & 1 deletion src/languages/en.js
Original file line number Diff line number Diff line change
Expand Up @@ -456,7 +456,8 @@ export default {
},
},
session: {
offlineMessage: 'Looks like you\'re offline. Please check your connection and try again.',
offlineMessageRetry: 'Looks like you\'re offline. Please check your connection and try again.',
offlineMessage: 'Looks like you\'re offline.',
},
workspace: {
common: {
Expand Down
3 changes: 2 additions & 1 deletion src/languages/es.js
Original file line number Diff line number Diff line change
Expand Up @@ -373,7 +373,8 @@ export default {
},
},
session: {
offlineMessage: 'Parece que estás desconectado. Por favor chequea tu conexión e inténtalo otra vez',
offlineMessageRetry: 'Parece que estás desconectado. Por favor chequea tu conexión e inténtalo otra vez',
offlineMessage: 'Parece que estás desconectado.',
},
workspace: {
common: {
Expand Down
6 changes: 3 additions & 3 deletions src/libs/API.js
Original file line number Diff line number Diff line change
Expand Up @@ -961,8 +961,8 @@ function Mobile_GetConstants(parameters) {
* @param {Number} [parameters.longitude]
* @returns {Promise}
*/
function GetPreferredCurrency(parameters) {
const commandName = 'GetPreferredCurrency';
function GetLocalCurrency(parameters) {
const commandName = 'GetLocalCurrency';
return Network.post(commandName, parameters);
}

Expand Down Expand Up @@ -1095,7 +1095,7 @@ export {
ValidateEmail,
Wallet_Activate,
Wallet_GetOnfidoSDKToken,
GetPreferredCurrency,
GetLocalCurrency,
GetCurrencyList,
Policy_Create,
Policy_Employees_Remove,
Expand Down
2 changes: 1 addition & 1 deletion src/libs/Navigation/AppNavigator/AuthScreens.js
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ class AuthScreens extends React.Component {
User.getUserDetails();
User.getBetas();
User.getDomainInfo();
PersonalDetails.fetchCurrencyPreferences();
PersonalDetails.fetchLocalCurrency();
fetchAllReports(true, true);
fetchCountryCodeByRequestIP();
UnreadIndicatorUpdater.listenForReportChanges();
Expand Down
1 change: 0 additions & 1 deletion src/libs/OptionsListUtils.js
Original file line number Diff line number Diff line change
Expand Up @@ -679,7 +679,6 @@ function getHeaderMessage(hasSelectableOptions, hasUserToInvite, searchValue, ma
*
* @param {Object} currencyOptions
* @param {String} searchValue
* @param {Object} selectedCurrency
* @returns {Array}
*/
function getCurrencyListForSections(currencyOptions, searchValue) {
Expand Down
10 changes: 10 additions & 0 deletions src/libs/actions/IOU.js
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,15 @@ function rejectTransaction({
});
}

/**
* Sets IOU'S selected currency
luacmartins marked this conversation as resolved.
Show resolved Hide resolved
*
* @param {String} selectedCurrencyCode
*/
function setIOUSelectedCurrency(selectedCurrencyCode) {
Onyx.merge(ONYXKEYS.IOU, {selectedCurrencyCode});
}

/**
* @private
*
Expand Down Expand Up @@ -239,4 +248,5 @@ export {
createIOUSplit,
rejectTransaction,
payIOUReport,
setIOUSelectedCurrency,
};
17 changes: 6 additions & 11 deletions src/libs/actions/PersonalDetails.js
Original file line number Diff line number Diff line change
Expand Up @@ -233,28 +233,23 @@ function getCurrencyList() {
}

/**
* Fetches the Currency preferences based on location and sets currency code/symbol to local storage
* Fetches the local currency based on location and sets currency code/symbol to local storage
*/
function fetchCurrencyPreferences() {
function fetchLocalCurrency() {
const coords = {};
let currency = '';

Onyx.merge(ONYXKEYS.IOU, {
isRetrievingCurrency: true,
});

API.GetPreferredCurrency({...coords})
API.GetLocalCurrency({...coords})
.then((data) => {
currency = data.currency;
})
.then(API.GetCurrencyList)
.then(getCurrencyList)
luacmartins marked this conversation as resolved.
Show resolved Hide resolved
.then((currencyList) => {
Onyx.merge(ONYXKEYS.MY_PERSONAL_DETAILS,
{
preferredCurrencyCode: currency,
preferredCurrencySymbol: currencyList[currency].symbol,
});
.then(() => {
Onyx.merge(ONYXKEYS.MY_PERSONAL_DETAILS, {localCurrencyCode: currency});
})
.catch(error => console.debug(`Error fetching currency preference: , ${error}`))
.finally(() => {
Expand Down Expand Up @@ -302,6 +297,6 @@ export {
setPersonalDetails,
setAvatar,
deleteAvatar,
fetchCurrencyPreferences,
fetchLocalCurrency,
getCurrencyList,
};
2 changes: 1 addition & 1 deletion src/libs/actions/Session.js
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ function fetchAccountDetails(login) {
Onyx.merge(ONYXKEYS.ACCOUNT, {error: response.message});
})
.catch(() => {
Onyx.merge(ONYXKEYS.ACCOUNT, {error: translateLocal('session.offlineMessage')});
Onyx.merge(ONYXKEYS.ACCOUNT, {error: translateLocal('session.offlineMessageRetry')});
})
.finally(() => {
Onyx.merge(ONYXKEYS.ACCOUNT, {loading: false});
Expand Down
52 changes: 27 additions & 25 deletions src/pages/iou/IOUCurrencySelection.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, {Component} from 'react';
import {SectionList, View} from 'react-native';
import PropTypes from 'prop-types';
import Onyx, {withOnyx} from 'react-native-onyx';
import {withOnyx} from 'react-native-onyx';
import _ from 'underscore';
import styles from '../../styles/styles';
import {getCurrencyList} from '../../libs/actions/PersonalDetails';
Expand All @@ -20,6 +20,7 @@ import CONST from '../../CONST';
import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
import Button from '../../components/Button';
import FixedFooter from '../../components/FixedFooter';
import {setIOUSelectedCurrency} from '../../libs/actions/IOU';

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

// Preferred Currency Code of the current user
preferredCurrencyCode: PropTypes.string,
// Local Currency Code of the current user
localCurrencyCode: PropTypes.string,
}),

/** Holds data related to IOU */
iou: PropTypes.shape({

// Currency Symbol of the Preferred Currency
preferredCurrencySymbol: PropTypes.string,
// Selected Currency Code of the current IOU
selectedCurrencyCode: PropTypes.string,
}),

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

const defaultProps = {
myPersonalDetails: {preferredCurrencyCode: CONST.CURRENCY.USD, preferredCurrencySymbol: '$'},
myPersonalDetails: {
localCurrencyCode: CONST.CURRENCY.USD,
},
iou: {
selectedCurrencyCode: CONST.CURRENCY.USD,
},
currencyList: {},
};

Expand All @@ -65,10 +75,7 @@ class IOUCurrencySelection extends Component {
this.state = {
searchValue: '',
currencyData: currencyOptions,
selectedCurrency: {
currencyCode: this.props.myPersonalDetails.preferredCurrencyCode,
currencySymbol: this.props.myPersonalDetails.preferredCurrencySymbol,
},
toggledCurrencyCode: '',
};
this.getCurrencyOptions = this.getCurrencyOptions.bind(this);
this.toggleOption = this.toggleOption.bind(this);
Expand Down Expand Up @@ -115,18 +122,13 @@ class IOUCurrencySelection extends Component {
}

/**
* Function which renders a row in the list
* Function which toggles a currency in the list
*
* @param {String} currencyCode
* @param {String} toggledCurrencyCode
*
*/
toggleOption(currencyCode) {
this.setState({
selectedCurrency: {
currencyCode,
currencySymbol: this.props.currencyList[currencyCode].symbol,
},
});
toggleOption(toggledCurrencyCode) {
this.setState({toggledCurrencyCode});
}

/**
Expand All @@ -150,10 +152,7 @@ class IOUCurrencySelection extends Component {
* @return {void}
*/
confirmCurrencySelection() {
Onyx.merge(ONYXKEYS.MY_PERSONAL_DETAILS, {
preferredCurrencyCode: this.state.selectedCurrency.currencyCode,
preferredCurrencySymbol: this.state.selectedCurrency.currencySymbol,
});
setIOUSelectedCurrency(this.state.toggledCurrencyCode);
Navigation.goBack();
}

Expand Down Expand Up @@ -193,7 +192,9 @@ class IOUCurrencySelection extends Component {
mode="compact"
option={item}
onSelectRow={() => this.toggleOption(item.currencyCode)}
isSelected={item.currencyCode === this.state.selectedCurrency.currencyCode}
isSelected={
item.currencyCode === this.state.toggledCurrencyCode
}
showSelectedState
hideAdditionalOptionStates
/>
Expand All @@ -212,7 +213,7 @@ class IOUCurrencySelection extends Component {
<FixedFooter>
<Button
success
isDisabled={!this.state.selectedCurrency?.currencyCode}
isDisabled={!this.props.iou.selectedCurrencyCode}
style={[styles.w100]}
text={this.props.translate('iou.confirm')}
onPress={this.confirmCurrencySelection}
Expand All @@ -233,5 +234,6 @@ export default compose(
withOnyx({
currencyList: {key: ONYXKEYS.CURRENCY_LIST},
myPersonalDetails: {key: ONYXKEYS.MY_PERSONAL_DETAILS},
iou: {key: ONYXKEYS.IOU},
}),
)(IOUCurrencySelection);
Loading