19870 - Split bill description and currency is shown wrong

src/components/MoneyRequestConfirmationList.js

@@ -34,6 +34,12 @@ const propTypes = {
     /** IOU amount */
     iouAmount: PropTypes.number.isRequired,
 
+    /** IOU comment */
+    iouComment: PropTypes.string,
+
+    /** IOU currency */
+    iouCurrencyCode: PropTypes.string,
+
     /** IOU type */
     iouType: PropTypes.string,
 
@@ -64,9 +70,6 @@ const propTypes = {
     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,
     }),
 
     /** Current user session */
@@ -86,7 +89,7 @@ const defaultProps = {
     onSendMoney: () => {},
     navigateToStep: () => {},
     iou: {
-        selectedCurrencyCode: CONST.CURRENCY.USD,
+        loading: false,
     },
     iouType: CONST.IOU.MONEY_REQUEST_TYPE.REQUEST,
     payeePersonalDetails: null,
@@ -124,7 +127,7 @@ class MoneyRequestConfirmationList extends Component {
      */
     getSplitOrRequestOptions() {
         const text = this.props.translate(this.props.hasMultipleParticipants ? 'iou.splitAmount' : 'iou.requestAmount', {
-            amount: CurrencyUtils.convertToDisplayString(this.props.iouAmount, this.props.iou.selectedCurrencyCode),
+            amount: CurrencyUtils.convertToDisplayString(this.props.iouAmount, this.props.iouCurrencyCode),
         });
         return [
             {
@@ -157,7 +160,7 @@ class MoneyRequestConfirmationList extends Component {
      */
     getParticipantsWithAmount(participants) {
         const iouAmount = IOUUtils.calculateAmount(participants.length, this.props.iouAmount);
-        return OptionsListUtils.getIOUConfirmationOptionsFromParticipants(participants, CurrencyUtils.convertToDisplayString(iouAmount, this.props.iou.selectedCurrencyCode));
+        return OptionsListUtils.getIOUConfirmationOptionsFromParticipants(participants, CurrencyUtils.convertToDisplayString(iouAmount, this.props.iouCurrencyCode));
     }
 
     /**
@@ -197,7 +200,7 @@ class MoneyRequestConfirmationList extends Component {
             const myIOUAmount = IOUUtils.calculateAmount(selectedParticipants.length, this.props.iouAmount, true);
             const formattedPayeePersonalDetails = OptionsListUtils.getIOUConfirmationOptionsFromPayeePersonalDetail(
                 this.getPayeePersonalDetails(),
-                CurrencyUtils.convertToDisplayString(myIOUAmount, this.props.iou.selectedCurrencyCode),
+                CurrencyUtils.convertToDisplayString(myIOUAmount, this.props.iouCurrencyCode),
             );
 
             sections.push(
@@ -245,7 +248,7 @@ class MoneyRequestConfirmationList extends Component {
                 enablePaymentsRoute={ROUTES.IOU_SEND_ENABLE_PAYMENTS}
                 addBankAccountRoute={this.props.bankAccountRoute}
                 addDebitCardRoute={ROUTES.IOU_SEND_ADD_DEBIT_CARD}
-                currency={this.props.iou.selectedCurrencyCode}
+                currency={this.props.iouCurrencyCode}
                 policyID={this.props.policyID}
             />
         ) : (
@@ -315,7 +318,7 @@ class MoneyRequestConfirmationList extends Component {
 
     render() {
         const canModifyParticipants = !this.props.isReadOnly && this.props.canModifyParticipants && this.props.hasMultipleParticipants;
-        const formattedAmount = CurrencyUtils.convertToDisplayString(this.props.iouAmount, this.props.iou.selectedCurrencyCode);
+        const formattedAmount = CurrencyUtils.convertToDisplayString(this.props.iouAmount, this.props.iouCurrencyCode);
 
         return (
             <OptionsSelector
@@ -345,7 +348,7 @@ class MoneyRequestConfirmationList extends Component {
                 />
                 <MenuItemWithTopDescription
                     shouldShowRightIcon={!this.props.isReadOnly}
-                    title={this.props.iou.comment}
+                    title={this.props.iouComment}
                     description={this.props.translate('common.description')}
                     onPress={() => Navigation.navigate(ROUTES.MONEY_REQUEST_DESCRIPTION)}
                     style={[styles.moneyRequestMenuItem, styles.mb2]}

src/pages/iou/SplitBillDetailsPage.js

@@ -69,6 +69,8 @@ const SplitBillDetailsPage = (props) => {
     const payeePersonalDetails = _.filter(participants, (participant) => participant.login === reportAction.actorEmail)[0];
     const participantsExcludingPayee = _.filter(participants, (participant) => participant.login !== reportAction.actorEmail);
     const splitAmount = parseInt(lodashGet(reportAction, 'originalMessage.amount', 0), 10);
+    const splitComment = lodashGet(reportAction, 'originalMessage.comment');
+    const splitCurrency = lodashGet(reportAction, 'originalMessage.currency');
 
     return (
         <ScreenWrapper>
@@ -87,6 +89,8 @@ const SplitBillDetailsPage = (props) => {
                             payeePersonalDetails={payeePersonalDetails}
                             participants={participantsExcludingPayee}
                             iouAmount={splitAmount}
+                            iouComment={splitComment}
+                            iouCurrencyCode={splitCurrency}
                             iouType={CONST.IOU.MONEY_REQUEST_TYPE.SPLIT}
                             isReadOnly
                             shouldShowFooter={false}

src/pages/iou/steps/MoneyRequestConfirmPage.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import {withOnyx} from 'react-native-onyx';
+import ONYXKEYS from '../../../ONYXKEYS';
 import MoneyRequestConfirmationList from '../../../components/MoneyRequestConfirmationList';
 import CONST from '../../../CONST';
 import optionPropTypes from '../../../components/optionPropTypes';
@@ -23,6 +25,12 @@ const propTypes = {
     /** IOU type */
     iouType: PropTypes.string,
 
+    /** Holds data related to IOU view state, rather than the underlying IOU data. */
+    iou: PropTypes.shape({
+        comment: PropTypes.string,
+        selectedCurrencyCode: PropTypes.string,
+    }),
+
     /** Can the participants be modified or not */
     canModifyParticipants: PropTypes.bool,
 
@@ -40,13 +48,19 @@ const defaultProps = {
     iouType: CONST.IOU.MONEY_REQUEST_TYPE.REQUEST,
     canModifyParticipants: false,
     policyID: '',
+    iou: {
+        comment: '',
+        selectedCurrencyCode: CONST.CURRENCY.USD,
+    },
 };
 
 const MoneyRequestConfirmPage = (props) => (
     <MoneyRequestConfirmationList
         hasMultipleParticipants={props.hasMultipleParticipants}
         participants={props.participants}
         iouAmount={props.iouAmount}
+        iouComment={props.iou.comment}
+        iouCurrencyCode={props.iou.selectedCurrencyCode}
         onConfirm={props.onConfirm}
         onSendMoney={props.onSendMoney}
         iouType={props.iouType}
@@ -61,4 +75,6 @@ MoneyRequestConfirmPage.displayName = 'MoneyRequestConfirmPage';
 MoneyRequestConfirmPage.propTypes = propTypes;
 MoneyRequestConfirmPage.defaultProps = defaultProps;
 
-export default MoneyRequestConfirmPage;
+export default withOnyx({
+    iou: {key: ONYXKEYS.IOU},
+})(MoneyRequestConfirmPage);