Build read-only bill split details page

src/ROUTES.js

@@ -93,6 +93,8 @@ export default {
     getIouRequestCurrencyRoute: (reportID, currency, backTo) => `${IOU_REQUEST_CURRENCY}/${reportID}?currency=${currency}&backTo=${backTo}`,
     getIouBillCurrencyRoute: (reportID, currency, backTo) => `${IOU_BILL_CURRENCY}/${reportID}?currency=${currency}&backTo=${backTo}`,
     getIouSendCurrencyRoute: (reportID, currency, backTo) => `${IOU_SEND_CURRENCY}/${reportID}?currency=${currency}&backTo=${backTo}`,
+    SPLIT_BILL_DETAILS: `r/:reportID/split/:reportActionID`,
+    getSplitBillDetailsRoute: (reportID, reportActionID) => `r/${reportID}/split/${reportActionID}`,
     getNewTaskRoute: (reportID) => `${NEW_TASK}/${reportID}`,
     NEW_TASK_WITH_REPORT_ID: `${NEW_TASK}/:reportID?`,
     TASK_TITLE: 'r/:reportID/title',

src/components/MoneyRequestConfirmationList.js

@@ -23,10 +23,10 @@ import * as CurrencyUtils from '../libs/CurrencyUtils';
 
 const propTypes = {
     /** Callback to inform parent modal of success */
-    onConfirm: PropTypes.func.isRequired,
+    onConfirm: PropTypes.func,
 
     /** Callback to parent modal to send money */
-    onSendMoney: PropTypes.func.isRequired,
+    onSendMoney: PropTypes.func,
 
     /** Should we request a single or multiple participant selection from user */
     hasMultipleParticipants: PropTypes.bool.isRequired,
@@ -40,11 +40,17 @@ const propTypes = {
     /** Selected participants from MoneyRequestModal with login */
     participants: PropTypes.arrayOf(optionPropTypes).isRequired,
 
+    /** Payee of the money request with login */
+    payeePersonalDetails: optionPropTypes,
+
     /** Can the participants be modified or not */
     canModifyParticipants: PropTypes.bool,
 
+    /** Should the list be read only, and not editable? */
+    isReadOnly: PropTypes.bool,
+
     /** Depending on expense report or personal IOU report, respective bank account route */
-    bankAccountRoute: PropTypes.string.isRequired,
+    bankAccountRoute: PropTypes.string,
 
     ...windowDimensionsPropTypes,
 
@@ -69,18 +75,24 @@ const propTypes = {
     }),
 
     /** Callback function to navigate to a provided step in the MoneyRequestModal flow */
-    navigateToStep: PropTypes.func.isRequired,
+    navigateToStep: PropTypes.func,
 
     /** The policyID of the request */
     policyID: PropTypes.string,
 };
 
 const defaultProps = {
+    onConfirm: () => {},
+    onSendMoney: () => {},
+    navigateToStep: () => {},
     iou: {
         selectedCurrencyCode: CONST.CURRENCY.USD,
     },
     iouType: CONST.IOU.MONEY_REQUEST_TYPE.REQUEST,
+    payeePersonalDetails: null,
     canModifyParticipants: false,
+    isReadOnly: false,
+    bankAccountRoute: '',
     session: {
         email: null,
     },
@@ -158,6 +170,15 @@ class MoneyRequestConfirmationList extends Component {
         return _.map(participants, (option) => _.omit(option, 'descriptiveText'));
     }
 
+    /**
+     * Returns the personalDetails object for the payee. Use the payee prop if passed, else fallback to current user
+     *
+     * @returns {Object} personalDetails
+     */
+    getPayeePersonalDetails() {
+        return this.props.payeePersonalDetails || this.props.currentUserPersonalDetails;
+    }
+
     /**
      * Returns the sections needed for the OptionsSelector
      *
@@ -174,15 +195,15 @@ class MoneyRequestConfirmationList extends Component {
             const formattedParticipants = _.union(formattedSelectedParticipants, formattedUnselectedParticipants);
 
             const myIOUAmount = IOUUtils.calculateAmount(selectedParticipants.length, this.props.iouAmount, true);
-            const formattedMyPersonalDetails = OptionsListUtils.getIOUConfirmationOptionsFromMyPersonalDetail(
-                this.props.currentUserPersonalDetails,
+            const formattedPayeePersonalDetails = OptionsListUtils.getIOUConfirmationOptionsFromPayeePersonalDetail(
+                this.getPayeePersonalDetails(),
                 CurrencyUtils.convertToDisplayString(myIOUAmount, this.props.iou.selectedCurrencyCode),
             );
 
             sections.push(
                 {
                     title: this.props.translate('moneyRequestConfirmationList.whoPaid'),
-                    data: [formattedMyPersonalDetails],
+                    data: [formattedPayeePersonalDetails],
                     shouldShow: true,
                     indexOffset: 0,
                     isDisabled: true,
@@ -206,6 +227,36 @@ class MoneyRequestConfirmationList extends Component {
         return sections;
     }
 
+    getFooterContent() {
+        if (this.props.isReadOnly) {
+            return;
+        }
+
+        const selectedParticipants = this.getSelectedParticipants();
+        const shouldShowSettlementButton = this.props.iouType === CONST.IOU.MONEY_REQUEST_TYPE.SEND;
+        const shouldDisableButton = selectedParticipants.length === 0;
+        const recipient = this.state.participants[0];
+
+        return shouldShowSettlementButton ? (
+            <SettlementButton
+                isDisabled={shouldDisableButton}
+                onPress={this.confirm}
+                shouldShowPaypal={Boolean(recipient.payPalMeAddress)}
+                enablePaymentsRoute={ROUTES.IOU_SEND_ENABLE_PAYMENTS}
+                addBankAccountRoute={this.props.bankAccountRoute}
+                addDebitCardRoute={ROUTES.IOU_SEND_ADD_DEBIT_CARD}
+                currency={this.props.iou.selectedCurrencyCode}
+                policyID={this.props.policyID}
+            />
+        ) : (
+            <ButtonWithDropdownMenu
+                isDisabled={shouldDisableButton}
+                onPress={(_event, value) => this.confirm(value)}
+                options={this.getSplitOrRequestOptions()}
+            />
+        );
+    }
+
     /**
      * Returns selected options -- there is checkmark for every row in List for split flow
      * @returns {Array}
@@ -215,7 +266,7 @@ class MoneyRequestConfirmationList extends Component {
             return [];
         }
         const selectedParticipants = this.getSelectedParticipants();
-        return [...selectedParticipants, OptionsListUtils.getIOUConfirmationOptionsFromMyPersonalDetail(this.props.currentUserPersonalDetails)];
+        return [...selectedParticipants, OptionsListUtils.getIOUConfirmationOptionsFromPayeePersonalDetail(this.getPayeePersonalDetails())];
     }
 
     /**
@@ -263,11 +314,7 @@ class MoneyRequestConfirmationList extends Component {
     }
 
     render() {
-        const selectedParticipants = this.getSelectedParticipants();
-        const shouldShowSettlementButton = this.props.iouType === CONST.IOU.MONEY_REQUEST_TYPE.SEND;
-        const shouldDisableButton = selectedParticipants.length === 0;
-        const recipient = this.state.participants[0];
-        const canModifyParticipants = this.props.canModifyParticipants && this.props.hasMultipleParticipants;
+        const canModifyParticipants = !this.props.isReadOnly && this.props.canModifyParticipants && this.props.hasMultipleParticipants;
         const formattedAmount = CurrencyUtils.convertToDisplayString(this.props.iouAmount, this.props.iou.selectedCurrencyCode);
 
         return (
@@ -285,43 +332,24 @@ class MoneyRequestConfirmationList extends Component {
                 shouldShowTextInput={false}
                 shouldUseStyleForChildren={false}
                 optionHoveredStyle={canModifyParticipants ? styles.hoveredComponentBG : {}}
-                footerContent={
-                    shouldShowSettlementButton ? (
-                        <SettlementButton
-                            isDisabled={shouldDisableButton}
-                            onPress={this.confirm}
-                            shouldShowPaypal={Boolean(recipient.payPalMeAddress)}
-                            enablePaymentsRoute={ROUTES.IOU_SEND_ENABLE_PAYMENTS}
-                            addBankAccountRoute={this.props.bankAccountRoute}
-                            addDebitCardRoute={ROUTES.IOU_SEND_ADD_DEBIT_CARD}
-                            currency={this.props.iou.selectedCurrencyCode}
-                            policyID={this.props.policyID}
-                        />
-                    ) : (
-                        <ButtonWithDropdownMenu
-                            isDisabled={shouldDisableButton}
-                            onPress={(_event, value) => this.confirm(value)}
-                            options={this.getSplitOrRequestOptions()}
-                        />
-                    )
-                }
+                footerContent={this.getFooterContent()}
             >
                 <MenuItemWithTopDescription
-                    shouldShowRightIcon
+                    shouldShowRightIcon={!this.props.isReadOnly}
                     title={formattedAmount}
                     description={this.props.translate('iou.amount')}
                     onPress={() => this.props.navigateToStep(0)}
                     style={[styles.moneyRequestMenuItem, styles.mt2]}
                     titleStyle={styles.moneyRequestConfirmationAmount}
-                    disabled={this.state.didConfirm}
+                    disabled={this.state.didConfirm || this.props.isReadOnly}
                 />
                 <MenuItemWithTopDescription
-                    shouldShowRightIcon
+                    shouldShowRightIcon={!this.props.isReadOnly}
                     title={this.props.iou.comment}
                     description={this.props.translate('common.description')}
                     onPress={() => Navigation.navigate(ROUTES.MONEY_REQUEST_DESCRIPTION)}
                     style={[styles.moneyRequestMenuItem, styles.mb2]}
-                    disabled={this.state.didConfirm}
+                    disabled={this.state.didConfirm || this.props.isReadOnly}
                 />
             </OptionsSelector>
         );

src/components/OptionsSelector/BaseOptionsSelector.js

@@ -275,7 +275,8 @@ class BaseOptionsSelector extends Component {
     }
 
     render() {
-        const shouldShowFooter = (this.props.shouldShowConfirmButton || this.props.footerContent) && !(this.props.canSelectMultipleOptions && _.isEmpty(this.props.selectedOptions));
+        const shouldShowFooter =
+            !this.props.isReadOnly && (this.props.shouldShowConfirmButton || this.props.footerContent) && !(this.props.canSelectMultipleOptions && _.isEmpty(this.props.selectedOptions));
         const defaultConfirmButtonText = _.isUndefined(this.props.confirmButtonText) ? this.props.translate('common.confirm') : this.props.confirmButtonText;
         const shouldShowDefaultConfirmButton = !this.props.footerContent && defaultConfirmButtonText;
         const textInput = (

src/components/ReportActionItem/MoneyRequestAction.js

@@ -91,12 +91,12 @@ const defaultProps = {
 };
 
 const MoneyRequestAction = (props) => {
-    const hasMultipleParticipants = lodashGet(props.chatReport, 'participants', []).length > 1;
     const isSplitBillAction = lodashGet(props.action, 'originalMessage.type', '') === CONST.IOU.REPORT_ACTION_TYPE.SPLIT;
 
     const onIOUPreviewPressed = () => {
-        if (isSplitBillAction && hasMultipleParticipants) {
-            Navigation.navigate(ROUTES.getReportParticipantsRoute(props.chatReportID));
+        if (isSplitBillAction) {
+            const reportActionID = lodashGet(props.action, 'reportActionID', '0');
+            Navigation.navigate(ROUTES.getSplitBillDetailsRoute(props.chatReportID, reportActionID));
             return;
         }
 

src/libs/Navigation/AppNavigator/AuthScreens.js

@@ -340,6 +340,12 @@ class AuthScreens extends React.Component {
                     component={ModalStackNavigators.EnablePaymentsStackNavigator}
                     listeners={modalScreenListeners}
                 />
+                <RootStack.Screen
+                    name="SplitDetails"
+                    options={modalScreenOptions}
+                    component={ModalStackNavigators.SplitDetailsModalStackNavigator}
+                    listeners={modalScreenListeners}
+                />
                 <RootStack.Screen
                     name="AddPersonalBankAccount"
                     options={modalScreenOptions}

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -111,6 +111,16 @@ const IOUSendModalStackNavigator = createModalStackNavigator([
     },
 ]);
 
+const SplitDetailsModalStackNavigator = createModalStackNavigator([
+    {
+        getComponent: () => {
+            const SplitBillDetailsPage = require('../../../pages/iou/SplitBillDetailsPage').default;
+            return SplitBillDetailsPage;
+        },
+        name: 'SplitDetails_Root',
+    },
+]);
+
 const DetailsModalStackNavigator = createModalStackNavigator([
     {
         getComponent: () => {
@@ -696,6 +706,7 @@ export {
     IOUBillStackNavigator,
     IOURequestModalStackNavigator,
     IOUSendModalStackNavigator,
+    SplitDetailsModalStackNavigator,
     DetailsModalStackNavigator,
     ReportDetailsModalStackNavigator,
     TaskModalStackNavigator,

src/libs/Navigation/linkingConfig.js

@@ -295,6 +295,11 @@ export default {
                     IOU_Send_Add_Debit_Card: ROUTES.IOU_SEND_ADD_DEBIT_CARD,
                 },
             },
+            SplitDetails: {
+                screens: {
+                    SplitDetails_Root: ROUTES.SPLIT_BILL_DETAILS,
+                },
+            },
             Task_Details: {
                 screens: {
                     Task_Title: ROUTES.TASK_TITLE,

src/libs/OptionsListUtils.js

@@ -794,25 +794,25 @@ function getSearchOptions(reports, personalDetails, searchValue = '', betas) {
 }
 
 /**
- * Build the IOUConfirmation options for showing MyPersonalDetail
+ * Build the IOUConfirmation options for showing the payee personalDetail
  *
- * @param {Object} myPersonalDetail
+ * @param {Object} personalDetail
  * @param {String} amountText
  * @returns {Object}
  */
-function getIOUConfirmationOptionsFromMyPersonalDetail(myPersonalDetail, amountText) {
+function getIOUConfirmationOptionsFromPayeePersonalDetail(personalDetail, amountText) {
     return {
-        text: myPersonalDetail.displayName,
-        alternateText: myPersonalDetail.login,
+        text: personalDetail.displayName ? personalDetail.displayName : personalDetail.login,
+        alternateText: personalDetail.login,
         icons: [
             {
-                source: ReportUtils.getAvatar(myPersonalDetail.avatar, myPersonalDetail.login),
-                name: myPersonalDetail.login,
+                source: ReportUtils.getAvatar(personalDetail.avatar, personalDetail.login),
+                name: personalDetail.login,
                 type: CONST.ICON_TYPE_AVATAR,
             },
         ],
         descriptiveText: amountText,
-        login: myPersonalDetail.login,
+        login: personalDetail.login,
     };
 }
 
@@ -953,7 +953,7 @@ export {
     getMemberInviteOptions,
     getHeaderMessage,
     getPersonalDetailsForLogins,
-    getIOUConfirmationOptionsFromMyPersonalDetail,
+    getIOUConfirmationOptionsFromPayeePersonalDetail,
     getIOUConfirmationOptionsFromParticipants,
     getSearchText,
     getAllReportErrors,