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

src/components/IOUConfirmationList.js

@@ -88,12 +88,19 @@ const propTypes = {
         /** 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: {},
 };
 
 // Gives minimum height to offset the height of
@@ -274,8 +281,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 +314,8 @@ export default compose(
         myPersonalDetails: {
             key: ONYXKEYS.MY_PERSONAL_DETAILS,
         },
+        network: {
+            key: ONYXKEYS.NETWORK,
+        },
     }),
 )(IOUConfirmationList);

src/pages/iou/IOUCurrencySelection.js

@@ -34,6 +34,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 +57,12 @@ const propTypes = {
 };
 
 const defaultProps = {
-    myPersonalDetails: {preferredCurrencyCode: CONST.CURRENCY.USD, preferredCurrencySymbol: '$'},
+    myPersonalDetails: {
+        preferredCurrencyCode: CONST.CURRENCY.USD,
+        preferredCurrencySymbol: '$',
+        selectedCurrencyCode: CONST.CURRENCY.USD,
+        selectedCurrencySymbol: '$',
+    },
     currencyList: {},
 };
 
@@ -151,8 +162,8 @@ class IOUCurrencySelection extends Component {
      */
     confirmCurrencySelection() {
         Onyx.merge(ONYXKEYS.MY_PERSONAL_DETAILS, {
-            preferredCurrencyCode: this.state.selectedCurrency.currencyCode,
-            preferredCurrencySymbol: this.state.selectedCurrency.currencySymbol,
+            selectedCurrencyCode: this.state.selectedCurrency.currencyCode,
+            selectedCurrencySymbol: this.state.selectedCurrency.currencySymbol,
         });
         Navigation.goBack();
     }

src/pages/iou/IOUModal.js

@@ -2,14 +2,13 @@ import React, {Component} from 'react';
 import {View, TouchableOpacity} from 'react-native';
 import PropTypes from 'prop-types';
 import lodashGet from 'lodash/get';
-import {withOnyx} from 'react-native-onyx';
+import Onyx, {withOnyx} from 'react-native-onyx';
 import IOUAmountPage from './steps/IOUAmountPage';
 import IOUParticipantsPage from './steps/IOUParticipantsPage';
 import IOUConfirmPage from './steps/IOUConfirmPage';
 import Header from '../../components/Header';
 import styles from '../../styles/styles';
 import Icon from '../../components/Icon';
-import * as PersonalDetails from '../../libs/actions/PersonalDetails';
 import {createIOUSplit, createIOUTransaction} from '../../libs/actions/IOU';
 import {Close, BackArrow} from '../../components/Icon/Expensicons';
 import Navigation from '../../libs/Navigation/Navigation';
@@ -46,6 +45,12 @@ const propTypes = {
 
         // Currency Symbol of the Preferred Currency
         preferredCurrencySymbol: PropTypes.string,
+
+        // 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.
@@ -83,6 +88,8 @@ const defaultProps = {
     myPersonalDetails: {
         preferredCurrencyCode: CONST.CURRENCY.USD,
         preferredCurrencySymbol: '$',
+        selectedCurrencyCode: CONST.CURRENCY.USD,
+        selectedCurrencySymbol: '$',
     },
     iouType: '',
 };
@@ -103,7 +110,6 @@ class IOUModal extends Component {
         this.addParticipants = this.addParticipants.bind(this);
         this.createTransaction = this.createTransaction.bind(this);
         this.updateComment = this.updateComment.bind(this);
-        this.getReady = this.getReady.bind(this);
         const participants = lodashGet(props, 'report.participants', []);
         const participantsWithDetails = getPersonalDetailsForLogins(participants, props.personalDetails)
             .map(personalDetails => ({
@@ -142,17 +148,20 @@ class IOUModal extends Component {
             Navigation.dismissModal();
         }
 
-        if (prevProps.myPersonalDetails.preferredCurrencyCode
-            !== this.props.myPersonalDetails.preferredCurrencyCode) {
+        if (prevProps.myPersonalDetails.selectedCurrencyCode
+            !== this.props.myPersonalDetails.selectedCurrencyCode) {
             this.updateSelectedCurrency({
-                currencyCode: this.props.myPersonalDetails.preferredCurrencyCode,
-                currencySymbol: this.props.myPersonalDetails.preferredCurrencySymbol,
+                currencyCode: this.props.myPersonalDetails.selectedCurrencyCode,
+                currencySymbol: this.props.myPersonalDetails.selectedCurrencySymbol,
             });
         }
     }
 
-    getReady() {
-        PersonalDetails.fetchCurrencyPreferences();
+    componentWillUnmount() {
+        Onyx.merge(ONYXKEYS.MY_PERSONAL_DETAILS, {
+            selectedCurrencyCode: this.props.myPersonalDetails.preferredCurrencyCode,
+            selectedCurrencySymbol: this.props.myPersonalDetails.preferredCurrencySymbol,
+        });
     }
 
     /**
@@ -280,7 +289,7 @@ class IOUModal extends Component {
         const currentStep = this.steps[this.state.currentStepIndex];
         const reportID = lodashGet(this.props, 'route.params.reportID', '');
         return (
-            <ScreenWrapper onTransitionEnd={this.getReady}>
+            <ScreenWrapper>
                 {({didScreenTransitionEnd}) => (
                     <KeyboardAvoidingView>
                         <View style={[styles.headerBar]}>
@@ -317,9 +326,9 @@ class IOUModal extends Component {
                         </View>
                         <View style={[styles.pRelative, styles.flex1]}>
                             <FullScreenLoadingIndicator
-                                visible={!didScreenTransitionEnd || this.props.iou.isRetrievingCurrency}
+                                visible={!didScreenTransitionEnd}
                             />
-                            {didScreenTransitionEnd && !this.props.iou.isRetrievingCurrency && (
+                            {didScreenTransitionEnd && (
                                 <>
                                     {currentStep === Steps.IOUAmount && (
                                         <IOUAmountPage