From 91f797b1c51d7421ce7c740688c8865534a28372 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Thu, 22 Jul 2021 07:31:27 -1000
Subject: [PATCH] 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 fd92e19ef4288480c08ee6c5503688a6ad7e54d5)
---
 src/CONST.js                                  |  2 +-
 src/components/IOUConfirmationList.js         | 46 ++++++++-----
 src/languages/en.js                           |  3 +-
 src/languages/es.js                           |  3 +-
 .../Navigation/AppNavigator/AuthScreens.js    |  2 +-
 src/libs/OptionsListUtils.js                  |  1 -
 src/libs/actions/IOU.js                       | 10 +++
 src/libs/actions/PersonalDetails.js           | 15 ++--
 src/libs/actions/Session.js                   |  2 +-
 src/pages/iou/IOUCurrencySelection.js         | 52 +++++++-------
 src/pages/iou/IOUModal.js                     | 69 +++++--------------
 src/pages/iou/steps/IOUAmountPage.js          | 37 ++++++----
 src/pages/iou/steps/IOUConfirmPage.js         | 10 ---
 13 files changed, 119 insertions(+), 133 deletions(-)

diff --git a/src/CONST.js b/src/CONST.js
index 511ba361a309..430fe9979a65 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -197,7 +197,7 @@ const CONST = {
         DEFAULT: 'default',
     },
     ERROR: {
-        API_OFFLINE: 'session.offlineMessage',
+        API_OFFLINE: 'session.offlineMessageRetry',
     },
     NETWORK: {
         METHOD: {
diff --git a/src/components/IOUConfirmationList.js b/src/components/IOUConfirmationList.js
index 3c4bcefc44e4..8b46974f39ad 100755
--- a/src/components/IOUConfirmationList.js
+++ b/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);
diff --git a/src/languages/en.js b/src/languages/en.js
index 2c13b708c404..5e1535f8c007 100755
--- a/src/languages/en.js
+++ b/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: {
diff --git a/src/languages/es.js b/src/languages/es.js
index de5b415a1fdf..5f6d58a08173 100644
--- a/src/languages/es.js
+++ b/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: {
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js
index ff370c7ef42e..6bc8a5b22c77 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.js
+++ b/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();
diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js
index 56a2eaa54e9d..904e2b4e7195 100644
--- a/src/libs/OptionsListUtils.js
+++ b/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) {
diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index 792dd3baddff..566559233548 100644
--- a/src/libs/actions/IOU.js
+++ b/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,
 };
diff --git a/src/libs/actions/PersonalDetails.js b/src/libs/actions/PersonalDetails.js
index c57b81e95c04..44b9276d37aa 100644
--- a/src/libs/actions/PersonalDetails.js
+++ b/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,
 };
diff --git a/src/libs/actions/Session.js b/src/libs/actions/Session.js
index ebd314644b07..3540939041fd 100644
--- a/src/libs/actions/Session.js
+++ b/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});
diff --git a/src/pages/iou/IOUCurrencySelection.js b/src/pages/iou/IOUCurrencySelection.js
index 8efb9fbdbfa7..df3d418076b2 100644
--- a/src/pages/iou/IOUCurrencySelection.js
+++ b/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);
diff --git a/src/pages/iou/IOUModal.js b/src/pages/iou/IOUModal.js
index 63d15d2e966e..284148db3ea3 100755
--- a/src/pages/iou/IOUModal.js
+++ b/src/pages/iou/IOUModal.js
@@ -9,8 +9,7 @@ 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 {createIOUSplit, createIOUTransaction, setIOUSelectedCurrency} from '../../libs/actions/IOU';
 import {Close, BackArrow} from '../../components/Icon/Expensicons';
 import Navigation from '../../libs/Navigation/Navigation';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -41,11 +40,8 @@ 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,
-
-        // Currency Symbol of the Preferred Currency
-        preferredCurrencySymbol: PropTypes.string,
+        // Local Currency Code of the current user
+        localCurrencyCode: PropTypes.string,
     }),
 
     // Holds data related to IOU view state, rather than the underlying IOU data.
@@ -58,6 +54,9 @@ const propTypes = {
 
         /** Flag to show a loading indicator and avoid showing a previously selected currency */
         isRetrievingCurrency: PropTypes.bool,
+
+        // Selected Currency Code of the current IOU
+        selectedCurrencyCode: PropTypes.string,
     }).isRequired,
 
     /** Personal details of all the users */
@@ -81,8 +80,7 @@ const defaultProps = {
         participants: [],
     },
     myPersonalDetails: {
-        preferredCurrencyCode: CONST.CURRENCY.USD,
-        preferredCurrencySymbol: '$',
+        localCurrencyCode: CONST.CURRENCY.USD,
     },
     iouType: '',
 };
@@ -99,11 +97,9 @@ class IOUModal extends Component {
         super(props);
         this.navigateToPreviousStep = this.navigateToPreviousStep.bind(this);
         this.navigateToNextStep = this.navigateToNextStep.bind(this);
-        this.currencySelected = this.currencySelected.bind(this);
         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 => ({
@@ -120,10 +116,6 @@ class IOUModal extends Component {
 
             // amount is currency in decimal format
             amount: '',
-            selectedCurrency: {
-                currencyCode: props.myPersonalDetails.preferredCurrencyCode,
-                currencySymbol: props.myPersonalDetails.preferredCurrencySymbol,
-            },
             comment: '',
         };
 
@@ -136,25 +128,22 @@ class IOUModal extends Component {
         }
     }
 
+    componentDidMount() {
+        setIOUSelectedCurrency(this.props.myPersonalDetails.localCurrencyCode);
+    }
+
     componentDidUpdate(prevProps) {
         // Successfully close the modal if transaction creation has ended and there is no error
         if (prevProps.iou.creatingIOUTransaction && !this.props.iou.creatingIOUTransaction && !this.props.iou.error) {
             Navigation.dismissModal();
         }
 
-        if (prevProps.myPersonalDetails.preferredCurrencyCode
-            !== this.props.myPersonalDetails.preferredCurrencyCode) {
-            this.updateSelectedCurrency({
-                currencyCode: this.props.myPersonalDetails.preferredCurrencyCode,
-                currencySymbol: this.props.myPersonalDetails.preferredCurrencySymbol,
-            });
+        if (prevProps.iou.selectedCurrencyCode
+            !== this.props.iou.selectedCurrencyCode) {
+            setIOUSelectedCurrency(this.props.iou.selectedCurrencyCode);
         }
     }
 
-    getReady() {
-        PersonalDetails.fetchCurrencyPreferences();
-    }
-
     /**
      * Retrieve title for current step, based upon current step and type of IOU
      *
@@ -166,7 +155,7 @@ class IOUModal extends Component {
             const formattedAmount = this.props.numberFormat(
                 this.state.amount, {
                     style: 'currency',
-                    currency: this.state.selectedCurrency.currencyCode,
+                    currency: this.props.iou.selectedCurrencyCode,
                 },
             );
             if (this.props.iouType === 'send') {
@@ -196,16 +185,6 @@ class IOUModal extends Component {
         });
     }
 
-    /**
-     * Update the selected currency
-     * @param {Object} selectedCurrency
-     */
-    updateSelectedCurrency(selectedCurrency) {
-        this.setState({
-            selectedCurrency,
-        });
-    }
-
     /**
      * Navigate to the next IOU step if possible
      */
@@ -241,15 +220,6 @@ class IOUModal extends Component {
         });
     }
 
-    /**
-     * Update the currency state
-     *
-     * @param {String} selectedCurrency
-     */
-    currencySelected(selectedCurrency) {
-        this.setState({selectedCurrency});
-    }
-
     /**
      * @param {Array} [splits]
      */
@@ -260,7 +230,7 @@ class IOUModal extends Component {
 
                 // should send in cents to API
                 amount: Math.round(this.state.amount * 100),
-                currency: this.state.selectedCurrency.currencyCode,
+                currency: this.props.iou.selectedCurrencyCode,
                 splits,
             });
             return;
@@ -271,7 +241,7 @@ class IOUModal extends Component {
 
             // should send in cents to API
             amount: Math.round(this.state.amount * 100),
-            currency: this.state.selectedCurrency.currencyCode,
+            currency: this.props.iou.selectedCurrencyCode,
             debtorEmail: this.state.participants[0].login,
         });
     }
@@ -280,7 +250,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]}>
@@ -327,9 +297,7 @@ class IOUModal extends Component {
                                                 this.setState({amount});
                                                 this.navigateToNextStep();
                                             }}
-                                            currencySelected={this.currencySelected}
                                             reportID={reportID}
-                                            selectedCurrency={this.state.selectedCurrency}
                                             hasMultipleParticipants={this.props.hasMultipleParticipants}
                                             selectedAmount={this.state.amount}
                                             navigation={this.props.navigation}
@@ -350,7 +318,6 @@ class IOUModal extends Component {
                                             participants={this.state.participants}
                                             iouAmount={this.state.amount}
                                             comment={this.state.comment}
-                                            selectedCurrency={this.state.selectedCurrency}
                                             onUpdateComment={this.updateComment}
                                         />
                                     )}
diff --git a/src/pages/iou/steps/IOUAmountPage.js b/src/pages/iou/steps/IOUAmountPage.js
index ff94c9b35998..971ca196c788 100755
--- a/src/pages/iou/steps/IOUAmountPage.js
+++ b/src/pages/iou/steps/IOUAmountPage.js
@@ -6,6 +6,7 @@ import {
 } from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
+import lodashGet from 'lodash/get';
 import ONYXKEYS from '../../../ONYXKEYS';
 import styles from '../../../styles/styles';
 import BigNumberPad from '../../../components/BigNumberPad';
@@ -17,29 +18,29 @@ import withLocalize, {withLocalizePropTypes} from '../../../components/withLocal
 import compose from '../../../libs/compose';
 import Button from '../../../components/Button';
 import Text from '../../../components/Text';
+import CONST from '../../../CONST';
 
 const propTypes = {
-    // Whether or not this IOU has multiple participants
+    /** Whether or not this IOU has multiple participants */
     hasMultipleParticipants: PropTypes.bool.isRequired,
 
-    /* The ID of the report this screen should display */
+    /** The ID of the report this screen should display */
     reportID: PropTypes.string.isRequired,
 
-    // Callback to inform parent modal of success
+    /** Callback to inform parent modal of success */
     onStepComplete: PropTypes.func.isRequired,
 
-    /** Currency selection will be implemented later */
-    // eslint-disable-next-line react/no-unused-prop-types
-    currencySelected: PropTypes.func.isRequired,
+    /** The currency list constant object from Onyx */
+    currencyList: PropTypes.objectOf(PropTypes.shape({
+        /** Symbol for the currency */
+        symbol: PropTypes.string,
 
-    // User's currency preference
-    selectedCurrency: PropTypes.shape({
-        // Currency code for the selected currency
-        currencyCode: PropTypes.string,
+        /** Name of the currency */
+        name: PropTypes.string,
 
-        // Currency symbol for the selected currency
-        currencySymbol: PropTypes.string,
-    }).isRequired,
+        /** ISO4217 Code for the currency */
+        ISO4217: PropTypes.string,
+    })).isRequired,
 
     /** Previously selected amount to show if the user comes back to this screen */
     selectedAmount: PropTypes.string.isRequired,
@@ -54,13 +55,18 @@ const propTypes = {
 
         /** Whether or not the IOU step is loading (retrieving users preferred currency) */
         loading: PropTypes.bool,
+
+        /** Selected Currency Code of the current IOU */
+        selectedCurrencyCode: PropTypes.string,
     }),
 
     ...withLocalizePropTypes,
 };
 
 const defaultProps = {
-    iou: {},
+    iou: {
+        selectedCurrencyCode: CONST.CURRENCY.USD,
+    },
 };
 
 class IOUAmountPage extends React.Component {
@@ -147,7 +153,7 @@ class IOUAmountPage extends React.Component {
                         : ROUTES.getIouRequestCurrencyRoute(this.props.reportID))}
                     >
                         <Text style={styles.iouAmountText}>
-                            {this.props.selectedCurrency.currencySymbol}
+                            {lodashGet(this.props.currencyList, [this.props.iou.selectedCurrencyCode, 'symbol'])}
                         </Text>
                     </TouchableOpacity>
                     {this.props.isSmallScreenWidth
@@ -198,6 +204,7 @@ export default compose(
     withWindowDimensions,
     withLocalize,
     withOnyx({
+        currencyList: {key: ONYXKEYS.CURRENCY_LIST},
         iou: {key: ONYXKEYS.IOU},
     }),
 )(IOUAmountPage);
diff --git a/src/pages/iou/steps/IOUConfirmPage.js b/src/pages/iou/steps/IOUConfirmPage.js
index 8e535053fd85..4e1f97142fef 100644
--- a/src/pages/iou/steps/IOUConfirmPage.js
+++ b/src/pages/iou/steps/IOUConfirmPage.js
@@ -18,15 +18,6 @@ const propTypes = {
     /** IOU amount */
     iouAmount: PropTypes.string.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,
-
     /** Selected participants from IOUMOdal with login */
     participants: PropTypes.arrayOf(PropTypes.shape({
         login: PropTypes.string.isRequired,
@@ -55,7 +46,6 @@ const IOUConfirmPage = props => (
         participants={props.participants}
         comment={props.comment}
         onUpdateComment={props.onUpdateComment}
-        selectedCurrency={props.selectedCurrency}
         iouAmount={props.iouAmount}
         onConfirm={props.onConfirm}
     />