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

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,37 @@ const propTypes = {
 
         /** Primary login of the user */
         login: PropTypes.string,
-    }).isRequired,
+
+        // Selected Currency Code of the current IOU
+        selectedCurrencyCode: PropTypes.string,
+
+        // Currency Symbol of the Selected Currency
+        selectedCurrencySymbol: PropTypes.string,
+    }),
 
     /** 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,
     }),
+
+    /** Information about the network */
+    network: PropTypes.shape({
+        /** Is the network currently offline or not */
+        isOffline: PropTypes.bool,
+    }),
 };
 
 const defaultProps = {
     iou: {},
     onUpdateComment: null,
     comment: '',
+    network: {},
+    myPersonalDetails: {
+        selectedCurrencyCode: CONST.CURRENCY.USD,
+        selectedCurrencySymbol: '$',
+    },
 };
 
 // Gives minimum height to offset the height of
@@ -115,14 +124,14 @@ class IOUConfirmationList extends Component {
                 this.props.myPersonalDetails,
                 this.props.numberFormat(this.calculateAmount() / 100, {
                     style: 'currency',
-                    currency: this.props.selectedCurrency.currencyCode,
+                    currency: this.props.myPersonalDetails.selectedCurrencyCode,
                 }),
             );
 
             const formattedParticipants = getIOUConfirmationOptionsFromParticipants(this.props.participants,
                 this.props.numberFormat(this.calculateAmount() / 100, {
                     style: 'currency',
-                    currency: this.props.selectedCurrency.currencyCode,
+                    currency: this.props.myPersonalDetails.selectedCurrencyCode,
                 }));
 
             sections.push({
@@ -141,7 +150,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.myPersonalDetails.selectedCurrencyCode,
                 }));
 
             sections.push({
@@ -237,7 +246,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.myPersonalDetails.selectedCurrencyCode},
                 ),
             },
         );
@@ -274,8 +283,14 @@ 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}
                         text={buttonText}
@@ -301,5 +316,8 @@ export default compose(
         myPersonalDetails: {
             key: ONYXKEYS.MY_PERSONAL_DETAILS,
         },
+        network: {
+            key: ONYXKEYS.NETWORK,
+        },
     }),
 )(IOUConfirmationList);

src/libs/actions/IOU.js

@@ -152,6 +152,32 @@ function rejectTransaction({
         });
 }
 
+/**
+ * Resets IOU currency to preferredCurrency
+ *
+ * @param {Object} params.selectedCurrencyCode
+ * @param {Object} params.selectedCurrencySymbol
+ */
+function setSelectedCurrency({selectedCurrencyCode, selectedCurrencySymbol}) {
+    Onyx.merge(ONYXKEYS.MY_PERSONAL_DETAILS, {
+        selectedCurrencyCode,
+        selectedCurrencySymbol,
+    });
+}
+
+/**
+ * Resets IOU currency to preferredCurrency
+ *
+ * @param {Object} params.selectedCurrencyCode
+ * @param {Object} params.selectedCurrencySymbol
+ */
+function resetSelectedCurrency({selectedCurrencyCode, selectedCurrencySymbol}) {
+    Onyx.merge(ONYXKEYS.MY_PERSONAL_DETAILS, {
+        selectedCurrencyCode,
+        selectedCurrencySymbol,
+    });
+}
+
 /**
  * @private
  *
@@ -239,4 +265,6 @@ export {
     createIOUSplit,
     rejectTransaction,
     payIOUReport,
+    resetSelectedCurrency,
+    setSelectedCurrency,
 };

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 {setSelectedCurrency} from '../../libs/actions/IOU';
 
 /**
  * IOU Currency selection for selecting currency
@@ -34,6 +35,12 @@ const propTypes = {
 
         // Currency Symbol of the Preferred Currency
         preferredCurrencySymbol: PropTypes.string,
+
+        // Preferred Currency Code of the current user
+        selectedCurrencyCode: PropTypes.string,
+
+        // Currency Symbol of the Preferred Currency
+        selectedCurrencySymbol: PropTypes.string,
     }),
 
     // The currency list constant object from Onyx
@@ -51,7 +58,12 @@ const propTypes = {
 };
 
 const defaultProps = {
-    myPersonalDetails: {preferredCurrencyCode: CONST.CURRENCY.USD, preferredCurrencySymbol: '$'},
+    myPersonalDetails: {
+        preferredCurrencyCode: CONST.CURRENCY.USD,
+        preferredCurrencySymbol: '$',
+        selectedCurrencyCode: CONST.CURRENCY.USD,
+        selectedCurrencySymbol: '$',
+    },
     currencyList: {},
 };
 
@@ -65,10 +77,6 @@ class IOUCurrencySelection extends Component {
         this.state = {
             searchValue: '',
             currencyData: currencyOptions,
-            selectedCurrency: {
-                currencyCode: this.props.myPersonalDetails.preferredCurrencyCode,
-                currencySymbol: this.props.myPersonalDetails.preferredCurrencySymbol,
-            },
         };
         this.getCurrencyOptions = this.getCurrencyOptions.bind(this);
         this.toggleOption = this.toggleOption.bind(this);
@@ -117,15 +125,13 @@ class IOUCurrencySelection extends Component {
     /**
      * Function which renders a row in the list
      *
-     * @param {String} currencyCode
+     * @param {String} selectedCurrencyCode
      *
      */
-    toggleOption(currencyCode) {
-        this.setState({
-            selectedCurrency: {
-                currencyCode,
-                currencySymbol: this.props.currencyList[currencyCode].symbol,
-            },
+    toggleOption(selectedCurrencyCode) {
+        setSelectedCurrency({
+            selectedCurrencyCode,
+            selectedCurrencySymbol: this.props.currencyList[selectedCurrencyCode].symbol,
         });
     }
 
@@ -150,9 +156,9 @@ class IOUCurrencySelection extends Component {
      * @return {void}
      */
     confirmCurrencySelection() {
-        Onyx.merge(ONYXKEYS.MY_PERSONAL_DETAILS, {
-            preferredCurrencyCode: this.state.selectedCurrency.currencyCode,
-            preferredCurrencySymbol: this.state.selectedCurrency.currencySymbol,
+        setSelectedCurrency({
+            selectedCurrencyCode: this.props.myPersonalDetails.selectedCurrencyCode,
+            selectedCurrencySymbol: this.props.myPersonalDetails.selectedCurrencySymbol,
         });
         Navigation.goBack();
     }
@@ -193,7 +199,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.props.myPersonalDetails.selectedCurrencyCode
+                                            }
                                             showSelectedState
                                             hideAdditionalOptionStates
                                         />
@@ -212,7 +220,7 @@ class IOUCurrencySelection extends Component {
                     <FixedFooter>
                         <Button
                             success
-                            isDisabled={!this.state.selectedCurrency?.currencyCode}
+                            isDisabled={!this.props.myPersonalDetails.selectedCurrencyCode}
                             style={[styles.w100]}
                             text={this.props.translate('iou.confirm')}
                             onPress={this.confirmCurrencySelection}