Merge pull request #4019 from Expensify/cmartins-offline-currency

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

(cherry picked from commit fd92e19)

src/components/IOUConfirmationList.js

@@ -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,
 
@@ -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
@@ -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({
@@ -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({
@@ -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},
                 ),
             },
         );
@@ -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')}
+                        </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
@@ -301,5 +312,8 @@ export default compose(
         myPersonalDetails: {
             key: ONYXKEYS.MY_PERSONAL_DETAILS,
         },
+        network: {
+            key: ONYXKEYS.NETWORK,
+        },
     }),
 )(IOUConfirmationList);

src/languages/en.js

@@ -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: {

src/languages/es.js

@@ -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: {

src/libs/Navigation/AppNavigator/AuthScreens.js

@@ -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();

src/libs/OptionsListUtils.js

@@ -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) {

src/libs/actions/IOU.js

@@ -152,6 +152,15 @@ function rejectTransaction({
         });
 }
 
+/**
+ * Sets IOU'S selected currency
+ *
+ * @param {String} selectedCurrencyCode
+ */
+function setIOUSelectedCurrency(selectedCurrencyCode) {
+    Onyx.merge(ONYXKEYS.IOU, {selectedCurrencyCode});
+}
+
 /**
  * @private
  *
@@ -239,4 +248,5 @@ export {
     createIOUSplit,
     rejectTransaction,
     payIOUReport,
+    setIOUSelectedCurrency,
 };

src/libs/actions/PersonalDetails.js

@@ -233,9 +233,9 @@ 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 = '';
 
@@ -247,14 +247,9 @@ function fetchCurrencyPreferences() {
         .then((data) => {
             currency = data.currency;
         })
-        .then(API.GetCurrencyList)
         .then(getCurrencyList)
-        .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(() => {
@@ -302,6 +297,6 @@ export {
     setPersonalDetails,
     setAvatar,
     deleteAvatar,
-    fetchCurrencyPreferences,
+    fetchLocalCurrency,
     getCurrencyList,
 };

src/libs/actions/Session.js

@@ -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});

src/pages/iou/IOUCurrencySelection.js

@@ -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';
@@ -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
@@ -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
@@ -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: {},
 };
 
@@ -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);
@@ -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});
     }
 
     /**
@@ -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();
     }
 
@@ -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
                                         />
@@ -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}
@@ -233,5 +234,6 @@ export default compose(
     withOnyx({
         currencyList: {key: ONYXKEYS.CURRENCY_LIST},
         myPersonalDetails: {key: ONYXKEYS.MY_PERSONAL_DETAILS},
+        iou: {key: ONYXKEYS.IOU},
     }),
 )(IOUCurrencySelection);