From c590fe6bf433b9df61c24be67ffd9e9d11f93397 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Thu, 18 May 2023 09:28:46 -0600 Subject: [PATCH 01/43] add split details route --- src/ROUTES.js | 1 + src/libs/Navigation/AppNavigator/ModalStackNavigators.js | 7 +++++++ src/libs/Navigation/linkingConfig.js | 1 + 3 files changed, 9 insertions(+) diff --git a/src/ROUTES.js b/src/ROUTES.js index 36af96003425..7db664386555 100644 --- a/src/ROUTES.js +++ b/src/ROUTES.js @@ -97,6 +97,7 @@ export default { IOU_DETAILS, IOU_DETAILS_ADD_BANK_ACCOUNT: `${IOU_DETAILS}/add-bank-account`, IOU_DETAILS_ADD_DEBIT_CARD: `${IOU_DETAILS}/add-debit-card`, + IOU_DETAILS_SPLIT_BILL: `${IOU_DETAILS}/split`, IOU_DETAILS_ENABLE_PAYMENTS: `${IOU_DETAILS}/enable-payments`, IOU_DETAILS_WITH_IOU_REPORT_ID: `${IOU_DETAILS}/:chatReportID/:iouReportID/`, getIouDetailsRoute: (chatReportID, iouReportID) => `iou/details/${chatReportID}/${iouReportID}`, diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index de821060b832..c6c5e1f895ff 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -140,6 +140,13 @@ const IOUDetailsModalStackNavigator = createModalStackNavigator([ }, name: 'IOU_Details_Enable_Payments', }, + { + getComponent: () => { + const MoneyRequestConfirmPage = require('../../../pages/iou/steps/MoneyRequestConfirmPage').default; + return MoneyRequestConfirmPage; + }, + name: 'IOU_Details_Split_Bill', + }, ]); const DetailsModalStackNavigator = createModalStackNavigator([ diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js index 1535880e8997..371552e8c7ae 100644 --- a/src/libs/Navigation/linkingConfig.js +++ b/src/libs/Navigation/linkingConfig.js @@ -290,6 +290,7 @@ export default { IOU_Details_Enable_Payments: ROUTES.IOU_DETAILS_ENABLE_PAYMENTS, IOU_Details_Add_Bank_Account: ROUTES.IOU_DETAILS_ADD_BANK_ACCOUNT, IOU_Details_Add_Debit_Card: ROUTES.IOU_DETAILS_ADD_DEBIT_CARD, + IOU_Details_Split_Bill: ROUTES.IOU_DETAILS_SPLIT_BILL, }, }, Task_Details: { From b84cb09006db80a9c149706da7abe444c245bd7b Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Thu, 18 May 2023 09:32:20 -0600 Subject: [PATCH 02/43] create details page --- .../ReportActionItem/MoneyRequestAction.js | 2 +- src/pages/iou/SplitBillDetailsPage.js | 59 +++++++++++++++++++ 2 files changed, 60 insertions(+), 1 deletion(-) create mode 100644 src/pages/iou/SplitBillDetailsPage.js diff --git a/src/components/ReportActionItem/MoneyRequestAction.js b/src/components/ReportActionItem/MoneyRequestAction.js index 85fa92267405..a0f4de96f75e 100644 --- a/src/components/ReportActionItem/MoneyRequestAction.js +++ b/src/components/ReportActionItem/MoneyRequestAction.js @@ -88,7 +88,7 @@ const MoneyRequestAction = (props) => { const hasMultipleParticipants = lodashGet(props.chatReport, 'participants', []).length > 1; const onIOUPreviewPressed = () => { if (lodashGet(props.action, 'originalMessage.type', '') === CONST.IOU.REPORT_ACTION_TYPE.SPLIT && hasMultipleParticipants) { - Navigation.navigate(ROUTES.getReportParticipantsRoute(props.chatReportID)); + Navigation.navigate(ROUTES.IOU_DETAILS_SPLIT_BILL); return; } diff --git a/src/pages/iou/SplitBillDetailsPage.js b/src/pages/iou/SplitBillDetailsPage.js new file mode 100644 index 000000000000..430cf83d6ffa --- /dev/null +++ b/src/pages/iou/SplitBillDetailsPage.js @@ -0,0 +1,59 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import MoneyRequestConfirmationList from '../../components/MoneyRequestConfirmationList'; +import CONST from '../../CONST'; +import optionPropTypes from '../../components/optionPropTypes'; + +const propTypes = { + /** Callback to inform parent modal of success */ + onConfirm: PropTypes.func.isRequired, + + /** Callback to parent modal to send money */ + onSendMoney: PropTypes.func.isRequired, + + /** Should we request a single or multiple participant selection from user */ + hasMultipleParticipants: PropTypes.bool.isRequired, + + /** IOU amount */ + iouAmount: PropTypes.number.isRequired, + + /** Selected participants from MoneyRequestModal with login */ + participants: PropTypes.arrayOf(optionPropTypes).isRequired, + + /** IOU type */ + iouType: PropTypes.string, + + /** Can the participants be modified or not */ + canModifyParticipants: PropTypes.bool, + + /** Function to navigate to a given step in the parent MoneyRequestModal */ + navigateToStep: PropTypes.func.isRequired, + + /** The policyID of the request */ + policyID: PropTypes.string.isRequired, +}; + +const defaultProps = { + iouType: CONST.IOU.MONEY_REQUEST_TYPE.REQUEST, + canModifyParticipants: false, +}; + +const SplitBillDetailsPage = (props) => ( + +); + +SplitBillDetailsPage.displayName = 'SplitBillDetailsPage'; +SplitBillDetailsPage.propTypes = propTypes; +SplitBillDetailsPage.defaultProps = defaultProps; + +export default SplitBillDetailsPage; From 08e5ec113b300e715db3096de2f3f72f168f9f57 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Thu, 18 May 2023 09:40:30 -0600 Subject: [PATCH 03/43] update route --- src/ROUTES.js | 3 ++- src/components/ReportActionItem/MoneyRequestAction.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/ROUTES.js b/src/ROUTES.js index 7db664386555..d129676b6053 100644 --- a/src/ROUTES.js +++ b/src/ROUTES.js @@ -97,7 +97,8 @@ export default { IOU_DETAILS, IOU_DETAILS_ADD_BANK_ACCOUNT: `${IOU_DETAILS}/add-bank-account`, IOU_DETAILS_ADD_DEBIT_CARD: `${IOU_DETAILS}/add-debit-card`, - IOU_DETAILS_SPLIT_BILL: `${IOU_DETAILS}/split`, + IOU_DETAILS_SPLIT_BILL: `${IOU_DETAILS}/split/:reportActionID`, + getSplitBillDetailsRoute: (reportActionID) => `${IOU_DETAILS}/split/${reportActionID}`, IOU_DETAILS_ENABLE_PAYMENTS: `${IOU_DETAILS}/enable-payments`, IOU_DETAILS_WITH_IOU_REPORT_ID: `${IOU_DETAILS}/:chatReportID/:iouReportID/`, getIouDetailsRoute: (chatReportID, iouReportID) => `iou/details/${chatReportID}/${iouReportID}`, diff --git a/src/components/ReportActionItem/MoneyRequestAction.js b/src/components/ReportActionItem/MoneyRequestAction.js index a0f4de96f75e..54084183c841 100644 --- a/src/components/ReportActionItem/MoneyRequestAction.js +++ b/src/components/ReportActionItem/MoneyRequestAction.js @@ -88,7 +88,7 @@ const MoneyRequestAction = (props) => { const hasMultipleParticipants = lodashGet(props.chatReport, 'participants', []).length > 1; const onIOUPreviewPressed = () => { if (lodashGet(props.action, 'originalMessage.type', '') === CONST.IOU.REPORT_ACTION_TYPE.SPLIT && hasMultipleParticipants) { - Navigation.navigate(ROUTES.IOU_DETAILS_SPLIT_BILL); + Navigation.navigate(ROUTES.getSplitBillDetailsRoute(props.action.reportActionID)); return; } From bf8f3d8bdaa0b5e897667f8ac4093a4cbe8fe734 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Thu, 18 May 2023 09:43:02 -0600 Subject: [PATCH 04/43] pass chatReportID to route --- src/ROUTES.js | 4 ++-- src/components/ReportActionItem/MoneyRequestAction.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/ROUTES.js b/src/ROUTES.js index d129676b6053..19f6c798b7c5 100644 --- a/src/ROUTES.js +++ b/src/ROUTES.js @@ -97,8 +97,8 @@ export default { IOU_DETAILS, IOU_DETAILS_ADD_BANK_ACCOUNT: `${IOU_DETAILS}/add-bank-account`, IOU_DETAILS_ADD_DEBIT_CARD: `${IOU_DETAILS}/add-debit-card`, - IOU_DETAILS_SPLIT_BILL: `${IOU_DETAILS}/split/:reportActionID`, - getSplitBillDetailsRoute: (reportActionID) => `${IOU_DETAILS}/split/${reportActionID}`, + IOU_DETAILS_SPLIT_BILL: `${IOU_DETAILS}/split/:chatReportID/:reportActionID`, + getSplitBillDetailsRoute: (chatReportID, reportActionID) => `${IOU_DETAILS}/split/${chatReportID}/${reportActionID}`, IOU_DETAILS_ENABLE_PAYMENTS: `${IOU_DETAILS}/enable-payments`, IOU_DETAILS_WITH_IOU_REPORT_ID: `${IOU_DETAILS}/:chatReportID/:iouReportID/`, getIouDetailsRoute: (chatReportID, iouReportID) => `iou/details/${chatReportID}/${iouReportID}`, diff --git a/src/components/ReportActionItem/MoneyRequestAction.js b/src/components/ReportActionItem/MoneyRequestAction.js index 54084183c841..d78b06672db4 100644 --- a/src/components/ReportActionItem/MoneyRequestAction.js +++ b/src/components/ReportActionItem/MoneyRequestAction.js @@ -88,7 +88,7 @@ const MoneyRequestAction = (props) => { const hasMultipleParticipants = lodashGet(props.chatReport, 'participants', []).length > 1; const onIOUPreviewPressed = () => { if (lodashGet(props.action, 'originalMessage.type', '') === CONST.IOU.REPORT_ACTION_TYPE.SPLIT && hasMultipleParticipants) { - Navigation.navigate(ROUTES.getSplitBillDetailsRoute(props.action.reportActionID)); + Navigation.navigate(ROUTES.getSplitBillDetailsRoute(props.requestReportID, props.action.reportActionID)); return; } From bd6a0dc31b849cb9a45f0f1de481c0fb4ec3ce15 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Thu, 18 May 2023 09:57:02 -0600 Subject: [PATCH 05/43] add SplitBillDetailsPage --- src/pages/iou/SplitBillDetailsPage.js | 69 +++++++++++---------------- 1 file changed, 27 insertions(+), 42 deletions(-) diff --git a/src/pages/iou/SplitBillDetailsPage.js b/src/pages/iou/SplitBillDetailsPage.js index 430cf83d6ffa..02cf583e1ae4 100644 --- a/src/pages/iou/SplitBillDetailsPage.js +++ b/src/pages/iou/SplitBillDetailsPage.js @@ -1,59 +1,44 @@ import React from 'react'; import PropTypes from 'prop-types'; +import {withOnyx} from 'react-native-onyx'; +import lodashGet from 'lodash/get'; import MoneyRequestConfirmationList from '../../components/MoneyRequestConfirmationList'; import CONST from '../../CONST'; -import optionPropTypes from '../../components/optionPropTypes'; const propTypes = { /** Callback to inform parent modal of success */ - onConfirm: PropTypes.func.isRequired, - - /** Callback to parent modal to send money */ - onSendMoney: PropTypes.func.isRequired, - - /** Should we request a single or multiple participant selection from user */ - hasMultipleParticipants: PropTypes.bool.isRequired, - - /** IOU amount */ - iouAmount: PropTypes.number.isRequired, - - /** Selected participants from MoneyRequestModal with login */ - participants: PropTypes.arrayOf(optionPropTypes).isRequired, - - /** IOU type */ - iouType: PropTypes.string, - - /** Can the participants be modified or not */ - canModifyParticipants: PropTypes.bool, - - /** Function to navigate to a given step in the parent MoneyRequestModal */ - navigateToStep: PropTypes.func.isRequired, - - /** The policyID of the request */ - policyID: PropTypes.string.isRequired, + // eslint-disable-next-line react/forbid-prop-types + reportActions: PropTypes.objectOf(PropTypes.object), }; const defaultProps = { - iouType: CONST.IOU.MONEY_REQUEST_TYPE.REQUEST, - canModifyParticipants: false, + reportActions: {}, }; -const SplitBillDetailsPage = (props) => ( - -); +const SplitBillDetailsPage = (props) => { + const reportActionID = lodashGet(props, 'route.params.reportActionID', ''); + const reportAction = props.reportActions[reportActionID]; + + return ( + {}} + onSendMoney={() => {}} + iouType={CONST.IOU.REPORT_ACTION_TYPE.SPLIT} + canModifyParticipants={false} + navigateToStep={() => {}} + /> + ); +}; SplitBillDetailsPage.displayName = 'SplitBillDetailsPage'; SplitBillDetailsPage.propTypes = propTypes; SplitBillDetailsPage.defaultProps = defaultProps; -export default SplitBillDetailsPage; +export default withOnyx({ + reportActions: { + key: ({chatReportID}) => `ONYXKEYS.COLLECTION.REPORT_ACTIONS${chatReportID}`, + } +})(SplitBillDetailsPage); From c5900ac84bf3e4b58ad62483a2ba24ea65510e42 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Thu, 18 May 2023 10:27:22 -0600 Subject: [PATCH 06/43] update page --- src/ROUTES.js | 4 ++-- .../ReportActionItem/MoneyRequestAction.js | 2 +- .../AppNavigator/ModalStackNavigators.js | 4 ++-- src/pages/iou/SplitBillDetailsPage.js | 21 ++++++++++++++++--- 4 files changed, 23 insertions(+), 8 deletions(-) diff --git a/src/ROUTES.js b/src/ROUTES.js index 19f6c798b7c5..b66b9bb4f35d 100644 --- a/src/ROUTES.js +++ b/src/ROUTES.js @@ -97,8 +97,8 @@ export default { IOU_DETAILS, IOU_DETAILS_ADD_BANK_ACCOUNT: `${IOU_DETAILS}/add-bank-account`, IOU_DETAILS_ADD_DEBIT_CARD: `${IOU_DETAILS}/add-debit-card`, - IOU_DETAILS_SPLIT_BILL: `${IOU_DETAILS}/split/:chatReportID/:reportActionID`, - getSplitBillDetailsRoute: (chatReportID, reportActionID) => `${IOU_DETAILS}/split/${chatReportID}/${reportActionID}`, + IOU_DETAILS_SPLIT_BILL: `${IOU_DETAILS}/split/:reportID/:reportActionID`, + getSplitBillDetailsRoute: (reportID, reportActionID) => `${IOU_DETAILS}/split/${reportID}/${reportActionID}`, IOU_DETAILS_ENABLE_PAYMENTS: `${IOU_DETAILS}/enable-payments`, IOU_DETAILS_WITH_IOU_REPORT_ID: `${IOU_DETAILS}/:chatReportID/:iouReportID/`, getIouDetailsRoute: (chatReportID, iouReportID) => `iou/details/${chatReportID}/${iouReportID}`, diff --git a/src/components/ReportActionItem/MoneyRequestAction.js b/src/components/ReportActionItem/MoneyRequestAction.js index d78b06672db4..fe55291a659d 100644 --- a/src/components/ReportActionItem/MoneyRequestAction.js +++ b/src/components/ReportActionItem/MoneyRequestAction.js @@ -88,7 +88,7 @@ const MoneyRequestAction = (props) => { const hasMultipleParticipants = lodashGet(props.chatReport, 'participants', []).length > 1; const onIOUPreviewPressed = () => { if (lodashGet(props.action, 'originalMessage.type', '') === CONST.IOU.REPORT_ACTION_TYPE.SPLIT && hasMultipleParticipants) { - Navigation.navigate(ROUTES.getSplitBillDetailsRoute(props.requestReportID, props.action.reportActionID)); + Navigation.navigate(ROUTES.getSplitBillDetailsRoute(props.chatReportID, props.action.reportActionID)); return; } diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index c6c5e1f895ff..254a5a404a82 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -142,8 +142,8 @@ const IOUDetailsModalStackNavigator = createModalStackNavigator([ }, { getComponent: () => { - const MoneyRequestConfirmPage = require('../../../pages/iou/steps/MoneyRequestConfirmPage').default; - return MoneyRequestConfirmPage; + const SplitBillDetailsPage = require('../../../pages/iou/SplitBillDetailsPage').default; + return SplitBillDetailsPage; }, name: 'IOU_Details_Split_Bill', }, diff --git a/src/pages/iou/SplitBillDetailsPage.js b/src/pages/iou/SplitBillDetailsPage.js index 02cf583e1ae4..e2993ddd32fe 100644 --- a/src/pages/iou/SplitBillDetailsPage.js +++ b/src/pages/iou/SplitBillDetailsPage.js @@ -3,26 +3,37 @@ import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; import lodashGet from 'lodash/get'; import MoneyRequestConfirmationList from '../../components/MoneyRequestConfirmationList'; +import * as OptionsListUtils from '../../libs/OptionsListUtils'; import CONST from '../../CONST'; +import ONYXKEYS from '../../ONYXKEYS'; const propTypes = { - /** Callback to inform parent modal of success */ + // eslint-disable-next-line react/forbid-prop-types + chatReport: PropTypes.objectOf(PropTypes.object), + // eslint-disable-next-line react/forbid-prop-types reportActions: PropTypes.objectOf(PropTypes.object), }; const defaultProps = { + chatReport: {}, reportActions: {}, }; +function getReportID(route) { + return route.params.reportID.toString(); +} + const SplitBillDetailsPage = (props) => { const reportActionID = lodashGet(props, 'route.params.reportActionID', ''); const reportAction = props.reportActions[reportActionID]; + const personalDetails = OptionsListUtils.getPersonalDetailsForLogins(reportAction.originalMessage.participants); + const participants = OptionsListUtils.getParticipantsOptions(props.chatReport, personalDetails); return ( {}} onSendMoney={() => {}} @@ -38,7 +49,11 @@ SplitBillDetailsPage.propTypes = propTypes; SplitBillDetailsPage.defaultProps = defaultProps; export default withOnyx({ + chatReport: { + key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${getReportID(route)}`, + }, reportActions: { - key: ({chatReportID}) => `ONYXKEYS.COLLECTION.REPORT_ACTIONS${chatReportID}`, + key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getReportID(route)}`, + canEvict: false, } })(SplitBillDetailsPage); From c1b2becbc8d21cc1ecd73ca05b4e7308875a6165 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Thu, 18 May 2023 10:31:37 -0600 Subject: [PATCH 07/43] use right participants --- src/pages/iou/SplitBillDetailsPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/iou/SplitBillDetailsPage.js b/src/pages/iou/SplitBillDetailsPage.js index e2993ddd32fe..0e2757a5705a 100644 --- a/src/pages/iou/SplitBillDetailsPage.js +++ b/src/pages/iou/SplitBillDetailsPage.js @@ -28,7 +28,7 @@ const SplitBillDetailsPage = (props) => { const reportActionID = lodashGet(props, 'route.params.reportActionID', ''); const reportAction = props.reportActions[reportActionID]; const personalDetails = OptionsListUtils.getPersonalDetailsForLogins(reportAction.originalMessage.participants); - const participants = OptionsListUtils.getParticipantsOptions(props.chatReport, personalDetails); + const participants = OptionsListUtils.getParticipantsOptions(reportAction.originalMessage, personalDetails); return ( Date: Thu, 18 May 2023 10:32:24 -0600 Subject: [PATCH 08/43] rm unused prop --- src/pages/iou/SplitBillDetailsPage.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/pages/iou/SplitBillDetailsPage.js b/src/pages/iou/SplitBillDetailsPage.js index 0e2757a5705a..f8948b4bfb21 100644 --- a/src/pages/iou/SplitBillDetailsPage.js +++ b/src/pages/iou/SplitBillDetailsPage.js @@ -8,15 +8,11 @@ import CONST from '../../CONST'; import ONYXKEYS from '../../ONYXKEYS'; const propTypes = { - // eslint-disable-next-line react/forbid-prop-types - chatReport: PropTypes.objectOf(PropTypes.object), - // eslint-disable-next-line react/forbid-prop-types reportActions: PropTypes.objectOf(PropTypes.object), }; const defaultProps = { - chatReport: {}, reportActions: {}, }; @@ -49,9 +45,6 @@ SplitBillDetailsPage.propTypes = propTypes; SplitBillDetailsPage.defaultProps = defaultProps; export default withOnyx({ - chatReport: { - key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${getReportID(route)}`, - }, reportActions: { key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getReportID(route)}`, canEvict: false, From 9210b3e54fb8ae86ed79b18ec393feab50216d7f Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Fri, 19 May 2023 15:17:08 -0600 Subject: [PATCH 09/43] add modal header --- src/pages/iou/SplitBillDetailsPage.js | 46 +++++++++++++++++---------- 1 file changed, 30 insertions(+), 16 deletions(-) diff --git a/src/pages/iou/SplitBillDetailsPage.js b/src/pages/iou/SplitBillDetailsPage.js index f8948b4bfb21..5cda7fd3651d 100644 --- a/src/pages/iou/SplitBillDetailsPage.js +++ b/src/pages/iou/SplitBillDetailsPage.js @@ -6,10 +6,15 @@ import MoneyRequestConfirmationList from '../../components/MoneyRequestConfirmat import * as OptionsListUtils from '../../libs/OptionsListUtils'; import CONST from '../../CONST'; import ONYXKEYS from '../../ONYXKEYS'; +import ModalHeader from './ModalHeader'; +import compose from '../../libs/compose'; +import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; const propTypes = { // eslint-disable-next-line react/forbid-prop-types reportActions: PropTypes.objectOf(PropTypes.object), + + ...withLocalizePropTypes, }; const defaultProps = { @@ -27,16 +32,22 @@ const SplitBillDetailsPage = (props) => { const participants = OptionsListUtils.getParticipantsOptions(reportAction.originalMessage, personalDetails); return ( - {}} - onSendMoney={() => {}} - iouType={CONST.IOU.REPORT_ACTION_TYPE.SPLIT} - canModifyParticipants={false} - navigateToStep={() => {}} - /> + <> + + {}} + onSendMoney={() => {}} + iouType={CONST.IOU.REPORT_ACTION_TYPE.SPLIT} + canModifyParticipants={false} + navigateToStep={() => {}} + /> + ); }; @@ -44,9 +55,12 @@ SplitBillDetailsPage.displayName = 'SplitBillDetailsPage'; SplitBillDetailsPage.propTypes = propTypes; SplitBillDetailsPage.defaultProps = defaultProps; -export default withOnyx({ - reportActions: { - key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getReportID(route)}`, - canEvict: false, - } -})(SplitBillDetailsPage); +export default compose( + withLocalize, + withOnyx({ + reportActions: { + key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getReportID(route)}`, + canEvict: false, + }, + }), +)(SplitBillDetailsPage); From 561e1ef002587c5bdd7d874ac95ec743e9be8672 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Fri, 19 May 2023 15:26:19 -0600 Subject: [PATCH 10/43] disable editing in details page --- .../MoneyRequestConfirmationList.js | 21 ++++++++++++------- src/pages/iou/SplitBillDetailsPage.js | 4 +--- 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index 8b6a43f47215..eeff22a92a14 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/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, @@ -66,13 +66,19 @@ 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.isRequired, + + /** Whether we can edit the amount and description details */ + canEditDetails: PropTypes.bool, }; const defaultProps = { + onConfirm: () => {}, + onSendMoney: () => {}, + navigateToStep: () => {}, iou: { selectedCurrencyCode: CONST.CURRENCY.USD, }, @@ -81,6 +87,7 @@ const defaultProps = { session: { email: null, }, + canEditDetails: true, ...withCurrentUserPersonalDetailsDefaultProps, }; @@ -303,21 +310,21 @@ class MoneyRequestConfirmationList extends Component { } > this.props.navigateToStep(0)} style={[styles.moneyRequestMenuItem, styles.mt2]} titleStyle={styles.moneyRequestConfirmationAmount} - disabled={this.state.didConfirm} + disabled={this.state.didConfirm || !this.props.canEditDetails} /> Navigation.navigate(ROUTES.MONEY_REQUEST_DESCRIPTION)} style={[styles.moneyRequestMenuItem, styles.mb2]} - disabled={this.state.didConfirm} + disabled={this.state.didConfirm || !this.props.canEditDetails} /> ); diff --git a/src/pages/iou/SplitBillDetailsPage.js b/src/pages/iou/SplitBillDetailsPage.js index 5cda7fd3651d..047746986663 100644 --- a/src/pages/iou/SplitBillDetailsPage.js +++ b/src/pages/iou/SplitBillDetailsPage.js @@ -41,11 +41,9 @@ const SplitBillDetailsPage = (props) => { hasMultipleParticipants participants={participants} iouAmount={reportAction.originalMessage.amount} - onConfirm={() => {}} - onSendMoney={() => {}} iouType={CONST.IOU.REPORT_ACTION_TYPE.SPLIT} canModifyParticipants={false} - navigateToStep={() => {}} + canEditDetails={false} /> ); From 5a33228ae1b202b3a68c778e1f9423782ed376ec Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Fri, 19 May 2023 15:33:32 -0600 Subject: [PATCH 11/43] rm button from details page --- .../MoneyRequestConfirmationList.js | 59 +++++++++++-------- src/pages/iou/SplitBillDetailsPage.js | 1 + 2 files changed, 36 insertions(+), 24 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index eeff22a92a14..41ef6cada744 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -73,6 +73,9 @@ const propTypes = { /** Whether we can edit the amount and description details */ canEditDetails: PropTypes.bool, + + /** Whether we should show the footer button */ + shouldShowFooter: PropTypes.bool, }; const defaultProps = { @@ -88,6 +91,7 @@ const defaultProps = { email: null, }, canEditDetails: true, + shouldShowFooter: true, ...withCurrentUserPersonalDetailsDefaultProps, }; @@ -221,6 +225,36 @@ class MoneyRequestConfirmationList extends Component { return [...selectedParticipants, OptionsListUtils.getIOUConfirmationOptionsFromMyPersonalDetail(this.props.currentUserPersonalDetails)]; } + getFooterContent() { + if (!this.props.shouldShowFooter) { + 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 ? ( + + ) : ( + this.confirm(value)} + options={this.getSplitOrRequestOptions()} + /> + ); + } + /** * Toggle selected option's selected prop. * @param {Object} option @@ -266,10 +300,6 @@ 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 formattedAmount = CurrencyUtils.convertToDisplayString(this.props.iouAmount, this.props.iou.selectedCurrencyCode); @@ -288,26 +318,7 @@ class MoneyRequestConfirmationList extends Component { shouldShowTextInput={false} shouldUseStyleForChildren={false} optionHoveredStyle={canModifyParticipants ? styles.hoveredComponentBG : {}} - footerContent={ - shouldShowSettlementButton ? ( - - ) : ( - this.confirm(value)} - options={this.getSplitOrRequestOptions()} - /> - ) - } + footerContent={this.getFooterContent()} > { iouType={CONST.IOU.REPORT_ACTION_TYPE.SPLIT} canModifyParticipants={false} canEditDetails={false} + shouldShowFooter={false} /> ); From 8585770f73681b8ca3cd8b372576bbd3aec6f16e Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Fri, 19 May 2023 16:07:13 -0600 Subject: [PATCH 12/43] fix prop type, add screenwrapper --- src/components/MoneyRequestConfirmationList.js | 2 +- src/pages/iou/SplitBillDetailsPage.js | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index 41ef6cada744..354b5ca6ff21 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -331,7 +331,7 @@ class MoneyRequestConfirmationList extends Component { /> Navigation.navigate(ROUTES.MONEY_REQUEST_DESCRIPTION)} style={[styles.moneyRequestMenuItem, styles.mb2]} diff --git a/src/pages/iou/SplitBillDetailsPage.js b/src/pages/iou/SplitBillDetailsPage.js index 9e263a008c3c..7c8373413964 100644 --- a/src/pages/iou/SplitBillDetailsPage.js +++ b/src/pages/iou/SplitBillDetailsPage.js @@ -9,6 +9,7 @@ import ONYXKEYS from '../../ONYXKEYS'; import ModalHeader from './ModalHeader'; import compose from '../../libs/compose'; import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; +import ScreenWrapper from '../../components/ScreenWrapper'; const propTypes = { // eslint-disable-next-line react/forbid-prop-types @@ -32,7 +33,7 @@ const SplitBillDetailsPage = (props) => { const participants = OptionsListUtils.getParticipantsOptions(reportAction.originalMessage, personalDetails); return ( - <> + { canEditDetails={false} shouldShowFooter={false} /> - + ); }; From 36826ab9d4145a94f16edbe04aa2382f0327f8d0 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Fri, 19 May 2023 16:09:48 -0600 Subject: [PATCH 13/43] fix style --- src/components/MoneyRequestConfirmationList.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index 354b5ca6ff21..739b018bb307 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -69,7 +69,7 @@ const propTypes = { navigateToStep: PropTypes.func, /** The policyID of the request */ - policyID: PropTypes.string.isRequired, + policyID: PropTypes.string, /** Whether we can edit the amount and description details */ canEditDetails: PropTypes.bool, @@ -92,6 +92,7 @@ const defaultProps = { }, canEditDetails: true, shouldShowFooter: true, + policyID: '', ...withCurrentUserPersonalDetailsDefaultProps, }; From 5a9848914bac4a9f062ce0e9a2ba99eca523997b Mon Sep 17 00:00:00 2001 From: Jules Rosser Date: Mon, 22 May 2023 13:43:49 +0100 Subject: [PATCH 14/43] update incorrect component name --- src/pages/iou/steps/MoneyRequestConfirmPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js index 025d22b33b37..37480caa7c10 100644 --- a/src/pages/iou/steps/MoneyRequestConfirmPage.js +++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js @@ -52,7 +52,7 @@ const MoneyRequestConfirmPage = (props) => ( /> ); -MoneyRequestConfirmPage.displayName = 'IOUConfirmPage'; +MoneyRequestConfirmPage.displayName = 'MoneyRequestConfirmPage'; MoneyRequestConfirmPage.propTypes = propTypes; MoneyRequestConfirmPage.defaultProps = defaultProps; From e4442e1b89074a1fcf6b05f63c6ed0537e16de6f Mon Sep 17 00:00:00 2001 From: Jules Rosser Date: Mon, 22 May 2023 13:44:11 +0100 Subject: [PATCH 15/43] create split details navigation route --- src/ROUTES.js | 2 ++ src/libs/Navigation/AppNavigator/AuthScreens.js | 6 ++++++ .../Navigation/AppNavigator/ModalStackNavigators.js | 11 +++++++++++ src/libs/Navigation/linkingConfig.js | 5 +++++ 4 files changed, 24 insertions(+) diff --git a/src/ROUTES.js b/src/ROUTES.js index 2dc2338f2e05..61c5f186a472 100644 --- a/src/ROUTES.js +++ b/src/ROUTES.js @@ -117,6 +117,8 @@ export default { SET_PASSWORD_WITH_VALIDATE_CODE: 'setpassword/:accountID/:validateCode', DETAILS: 'details', getDetailsRoute: (login) => `details?login=${encodeURIComponent(login)}`, + SPLIT_DETAILS: 'r/:reportID/split/details', + getSplitDetailsRoute: (reportID) => `r/${reportID}/details`, REPORT_PARTICIPANTS: 'r/:reportID/participants', getReportParticipantsRoute: (reportID) => `r/${reportID}/participants`, REPORT_PARTICIPANT: 'r/:reportID/participants/details', diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index 04bd397d5f64..57ec7a7179f4 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -286,6 +286,12 @@ class AuthScreens extends React.Component { component={ModalStackNavigators.DetailsModalStackNavigator} listeners={modalScreenListeners} /> + { + const DetailsPage = require('../../../pages/DetailsPage').default; + return DetailsPage; + }, + name: 'Split_Details_Root', + }, +]); + const DetailsModalStackNavigator = createModalStackNavigator([ { getComponent: () => { @@ -704,6 +714,7 @@ export { IOURequestModalStackNavigator, IOUSendModalStackNavigator, IOUDetailsModalStackNavigator, + SplitDetailsModalStackNavigator, DetailsModalStackNavigator, ReportDetailsModalStackNavigator, TaskModalStackNavigator, diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js index 1535880e8997..620a1466dfaf 100644 --- a/src/libs/Navigation/linkingConfig.js +++ b/src/libs/Navigation/linkingConfig.js @@ -256,6 +256,11 @@ export default { Details_Root: ROUTES.DETAILS, }, }, + SplitDetails: { + screens: { + Details_Root: ROUTES.SPLIT_DETAILS, + }, + }, Participants: { screens: { ReportParticipants_Root: ROUTES.REPORT_PARTICIPANTS, From 5c12e00ea130c599f9b514f6efdb05716ca66180 Mon Sep 17 00:00:00 2001 From: Jules Rosser Date: Mon, 22 May 2023 13:44:34 +0100 Subject: [PATCH 16/43] launch new route when bill split IOUPreview is tapped --- src/components/ReportActionItem/MoneyRequestAction.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/MoneyRequestAction.js b/src/components/ReportActionItem/MoneyRequestAction.js index 85fa92267405..8eeab34d02be 100644 --- a/src/components/ReportActionItem/MoneyRequestAction.js +++ b/src/components/ReportActionItem/MoneyRequestAction.js @@ -88,7 +88,7 @@ const MoneyRequestAction = (props) => { const hasMultipleParticipants = lodashGet(props.chatReport, 'participants', []).length > 1; const onIOUPreviewPressed = () => { if (lodashGet(props.action, 'originalMessage.type', '') === CONST.IOU.REPORT_ACTION_TYPE.SPLIT && hasMultipleParticipants) { - Navigation.navigate(ROUTES.getReportParticipantsRoute(props.chatReportID)); + Navigation.navigate(ROUTES.getSplitDetailsRoute(props.chatReportID)) return; } From 31c4efb7cac1f4efe62972734f67f0fe58b11895 Mon Sep 17 00:00:00 2001 From: Jules Rosser Date: Mon, 22 May 2023 14:06:01 +0100 Subject: [PATCH 17/43] fix split details routing --- src/ROUTES.js | 2 +- src/libs/Navigation/AppNavigator/ModalStackNavigators.js | 5 +++-- src/libs/Navigation/linkingConfig.js | 4 ++-- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/ROUTES.js b/src/ROUTES.js index 61c5f186a472..04c0b31df5c1 100644 --- a/src/ROUTES.js +++ b/src/ROUTES.js @@ -118,7 +118,7 @@ export default { DETAILS: 'details', getDetailsRoute: (login) => `details?login=${encodeURIComponent(login)}`, SPLIT_DETAILS: 'r/:reportID/split/details', - getSplitDetailsRoute: (reportID) => `r/${reportID}/details`, + getSplitDetailsRoute: (reportID) => `r/${reportID}/split/details`, REPORT_PARTICIPANTS: 'r/:reportID/participants', getReportParticipantsRoute: (reportID) => `r/${reportID}/participants`, REPORT_PARTICIPANT: 'r/:reportID/participants/details', diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index 423212420bf0..9e5d0e6c5280 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -145,8 +145,9 @@ const IOUDetailsModalStackNavigator = createModalStackNavigator([ const SplitDetailsModalStackNavigator = createModalStackNavigator([ { getComponent: () => { - const DetailsPage = require('../../../pages/DetailsPage').default; - return DetailsPage; + console.log('julessss'); + const ReportParticipantsPage = require('../../../pages/ReportParticipantsPage').default; + return ReportParticipantsPage; }, name: 'Split_Details_Root', }, diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js index 620a1466dfaf..604ce7124165 100644 --- a/src/libs/Navigation/linkingConfig.js +++ b/src/libs/Navigation/linkingConfig.js @@ -256,9 +256,9 @@ export default { Details_Root: ROUTES.DETAILS, }, }, - SplitDetails: { + Split_Details: { screens: { - Details_Root: ROUTES.SPLIT_DETAILS, + Split_Details_Root: ROUTES.SPLIT_DETAILS, }, }, Participants: { From 89c8c3bd935e15be368571f195ec691a50784919 Mon Sep 17 00:00:00 2001 From: Jules Rosser Date: Mon, 22 May 2023 14:27:53 +0100 Subject: [PATCH 18/43] display new split details page instead of participants --- .../AppNavigator/ModalStackNavigators.js | 5 +- src/pages/SplitDetailsPage.js | 143 ++++++++++++++++++ 2 files changed, 145 insertions(+), 3 deletions(-) create mode 100755 src/pages/SplitDetailsPage.js diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index 9e5d0e6c5280..feb803dba8b4 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -145,9 +145,8 @@ const IOUDetailsModalStackNavigator = createModalStackNavigator([ const SplitDetailsModalStackNavigator = createModalStackNavigator([ { getComponent: () => { - console.log('julessss'); - const ReportParticipantsPage = require('../../../pages/ReportParticipantsPage').default; - return ReportParticipantsPage; + const SplitDetailsPage = require('../../../pages/SplitDetailsPage').default; + return SplitDetailsPage; }, name: 'Split_Details_Root', }, diff --git a/src/pages/SplitDetailsPage.js b/src/pages/SplitDetailsPage.js new file mode 100755 index 000000000000..1694a9fc63bf --- /dev/null +++ b/src/pages/SplitDetailsPage.js @@ -0,0 +1,143 @@ +import React from 'react'; +import _ from 'underscore'; +import {View} from 'react-native'; +import PropTypes from 'prop-types'; +import {withOnyx} from 'react-native-onyx'; +import Str from 'expensify-common/lib/str'; +import lodashGet from 'lodash/get'; +import styles from '../styles/styles'; +import ONYXKEYS from '../ONYXKEYS'; +import HeaderWithCloseButton from '../components/HeaderWithCloseButton'; +import Navigation from '../libs/Navigation/Navigation'; +import ScreenWrapper from '../components/ScreenWrapper'; +import OptionsList from '../components/OptionsList'; +import ROUTES from '../ROUTES'; +import personalDetailsPropType from './personalDetailsPropType'; +import withLocalize, {withLocalizePropTypes} from '../components/withLocalize'; +import compose from '../libs/compose'; +import * as ReportUtils from '../libs/ReportUtils'; +import reportPropTypes from './reportPropTypes'; +import withReportOrNotFound from './home/report/withReportOrNotFound'; +import FullPageNotFoundView from '../components/BlockingViews/FullPageNotFoundView'; +import CONST from '../CONST'; + +const propTypes = { + /* Onyx Props */ + + /** The personal details of the person who is logged in */ + personalDetails: personalDetailsPropType, + + /** The active report */ + report: reportPropTypes.isRequired, + + /** Route params */ + route: PropTypes.shape({ + params: PropTypes.shape({ + /** Report ID passed via route r/:reportID/participants */ + reportID: PropTypes.string, + }), + }).isRequired, + + ...withLocalizePropTypes, +}; + +const defaultProps = { + personalDetails: {}, +}; + +/** + * Returns all the participants in the active report + * + * @param {Object} report The active report object + * @param {Object} personalDetails The personal details of the users + * @return {Array} + */ +const getAllParticipants = (report, personalDetails) => { + const {participants} = report; + + return _.chain(participants) + .map((login) => { + const userLogin = Str.removeSMSDomain(login); + const userPersonalDetail = lodashGet(personalDetails, login, {displayName: userLogin, avatar: ''}); + + return { + alternateText: userLogin, + displayName: userPersonalDetail.displayName, + icons: [ + { + source: ReportUtils.getAvatar(userPersonalDetail.avatar, login), + name: login, + type: CONST.ICON_TYPE_AVATAR, + }, + ], + keyForList: userLogin, + login, + text: userPersonalDetail.displayName, + tooltipText: userLogin, + participantsList: [{login, displayName: userPersonalDetail.displayName}], + }; + }) + .sortBy((participant) => participant.displayName.toLowerCase()) + .value(); +}; + +const SplitDetailsPage = (props) => { + const participants = getAllParticipants(props.report, props.personalDetails); + + return ( + + {({safeAreaPaddingBottomStyle}) => ( + + + + {Boolean(participants.length) && ( + { + Navigation.navigate(ROUTES.getReportParticipantRoute(props.route.params.reportID, option.login)); + }} + hideSectionHeaders + showTitleTooltip + disableFocusOptions + boldStyle + optionHoveredStyle={styles.hoveredComponentBG} + contentContainerStyles={[safeAreaPaddingBottomStyle]} + /> + )} + + + )} + + ); +}; + +SplitDetailsPage.propTypes = propTypes; +SplitDetailsPage.defaultProps = defaultProps; +SplitDetailsPage.displayName = 'SplitDetailsPage'; + +export default compose( + withLocalize, + withReportOrNotFound, + withOnyx({ + personalDetails: { + key: ONYXKEYS.PERSONAL_DETAILS, + }, + }), +)(SplitDetailsPage); From 5f7f5a860321dcc3e0d67a08e3d25125c41cc3cf Mon Sep 17 00:00:00 2001 From: Jules Rosser Date: Mon, 22 May 2023 15:15:15 +0100 Subject: [PATCH 19/43] reuse IOUConfirmationList component within SplitDetailsPage --- src/pages/SplitDetailsPage.js | 61 +++++++++++++++++++++-------------- 1 file changed, 37 insertions(+), 24 deletions(-) diff --git a/src/pages/SplitDetailsPage.js b/src/pages/SplitDetailsPage.js index 1694a9fc63bf..014fe6f1f657 100755 --- a/src/pages/SplitDetailsPage.js +++ b/src/pages/SplitDetailsPage.js @@ -10,12 +10,12 @@ import ONYXKEYS from '../ONYXKEYS'; import HeaderWithCloseButton from '../components/HeaderWithCloseButton'; import Navigation from '../libs/Navigation/Navigation'; import ScreenWrapper from '../components/ScreenWrapper'; -import OptionsList from '../components/OptionsList'; -import ROUTES from '../ROUTES'; +import MoneyRequestConfirmationList from '../components/MoneyRequestConfirmationList'; import personalDetailsPropType from './personalDetailsPropType'; import withLocalize, {withLocalizePropTypes} from '../components/withLocalize'; import compose from '../libs/compose'; import * as ReportUtils from '../libs/ReportUtils'; +import reportActionPropTypes from '../pages/home/report/reportActionPropTypes'; import reportPropTypes from './reportPropTypes'; import withReportOrNotFound from './home/report/withReportOrNotFound'; import FullPageNotFoundView from '../components/BlockingViews/FullPageNotFoundView'; @@ -30,10 +30,13 @@ const propTypes = { /** The active report */ report: reportPropTypes.isRequired, + /** The report action which we are displaying */ + action: PropTypes.shape(reportActionPropTypes), + /** Route params */ route: PropTypes.shape({ params: PropTypes.shape({ - /** Report ID passed via route r/:reportID/participants */ + /** Report ID passed via route r/:reportID/split/details */ reportID: PropTypes.string, }), }).isRequired, @@ -43,6 +46,7 @@ const propTypes = { const defaultProps = { personalDetails: {}, + action: {}, }; /** @@ -89,9 +93,7 @@ const SplitDetailsPage = (props) => { {({safeAreaPaddingBottomStyle}) => ( { style={[styles.containerWithSpaceBetween]} > {Boolean(participants.length) && ( - { - Navigation.navigate(ROUTES.getReportParticipantRoute(props.route.params.reportID, option.login)); - }} - hideSectionHeaders - showTitleTooltip - disableFocusOptions - boldStyle - optionHoveredStyle={styles.hoveredComponentBG} - contentContainerStyles={[safeAreaPaddingBottomStyle]} + + // { + // Navigation.navigate(ROUTES.getReportParticipantRoute(props.route.params.reportID, option.login)); + // }} + // hideSectionHeaders + // showTitleTooltip + // disableFocusOptions + // boldStyle + // optionHoveredStyle={styles.hoveredComponentBG} + // contentContainerStyles={[safeAreaPaddingBottomStyle]} + // /> )} From f2dbf5410a620e5c66a4461b99706cba5459e127 Mon Sep 17 00:00:00 2001 From: Jules Rosser Date: Mon, 22 May 2023 15:29:08 +0100 Subject: [PATCH 20/43] remove props from read-only request confirmation comp --- src/pages/SplitDetailsPage.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/pages/SplitDetailsPage.js b/src/pages/SplitDetailsPage.js index 014fe6f1f657..96d0192c4794 100755 --- a/src/pages/SplitDetailsPage.js +++ b/src/pages/SplitDetailsPage.js @@ -106,13 +106,8 @@ const SplitDetailsPage = (props) => { // Date: Mon, 22 May 2023 15:29:50 +0100 Subject: [PATCH 21/43] add readOnly mode to RequestConfirmationList --- .../MoneyRequestConfirmationList.js | 44 +++++++++++-------- src/pages/SplitDetailsPage.js | 1 + 2 files changed, 26 insertions(+), 19 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index 8b6a43f47215..d117e8393125 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -43,6 +43,9 @@ const propTypes = { /** Can the participants be modified or not */ canModifyParticipants: PropTypes.bool, + /** Should the list be read only, and not editable? */ + isReadOnly: PropTypes.bool, + ...windowDimensionsPropTypes, ...withLocalizePropTypes, @@ -78,6 +81,7 @@ const defaultProps = { }, iouType: CONST.IOU.MONEY_REQUEST_TYPE.REQUEST, canModifyParticipants: false, + isReadOnly: false, session: { email: null, }, @@ -263,7 +267,7 @@ class MoneyRequestConfirmationList extends Component { 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 ( @@ -282,24 +286,26 @@ class MoneyRequestConfirmationList extends Component { shouldUseStyleForChildren={false} optionHoveredStyle={canModifyParticipants ? styles.hoveredComponentBG : {}} footerContent={ - shouldShowSettlementButton ? ( - - ) : ( - this.confirm(value)} - options={this.getSplitOrRequestOptions()} - /> - ) + !this.props.isReadOnly ? ( + shouldShowSettlementButton ? ( + + ) : ( + this.confirm(value)} + options={this.getSplitOrRequestOptions()} + /> + ) + ) : null } > { participants={participants} iouAmount={9999} // todo iouType={CONST.IOU.MONEY_REQUEST_TYPE.SPLIT} + isReadOnly /> // Date: Mon, 22 May 2023 15:36:14 +0100 Subject: [PATCH 22/43] completely remove participants list from split details page --- src/pages/SplitDetailsPage.js | 21 +-------------------- 1 file changed, 1 insertion(+), 20 deletions(-) diff --git a/src/pages/SplitDetailsPage.js b/src/pages/SplitDetailsPage.js index d3c2dfce59fe..a8aa72a8c1b9 100755 --- a/src/pages/SplitDetailsPage.js +++ b/src/pages/SplitDetailsPage.js @@ -90,7 +90,7 @@ const SplitDetailsPage = (props) => { return ( - {({safeAreaPaddingBottomStyle}) => ( + {( { iouType={CONST.IOU.MONEY_REQUEST_TYPE.SPLIT} isReadOnly /> - // { - // Navigation.navigate(ROUTES.getReportParticipantRoute(props.route.params.reportID, option.login)); - // }} - // hideSectionHeaders - // showTitleTooltip - // disableFocusOptions - // boldStyle - // optionHoveredStyle={styles.hoveredComponentBG} - // contentContainerStyles={[safeAreaPaddingBottomStyle]} - // /> )} From 0e74bd7bf467dd74a7c26c0d1a88c4826b8e3632 Mon Sep 17 00:00:00 2001 From: Jules Rosser Date: Mon, 22 May 2023 15:40:57 +0100 Subject: [PATCH 23/43] fix outstanding lint issues --- src/components/MoneyRequestConfirmationList.js | 4 ++-- src/pages/SplitDetailsPage.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index d117e8393125..2e5eddc3582d 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -286,7 +286,7 @@ class MoneyRequestConfirmationList extends Component { shouldUseStyleForChildren={false} optionHoveredStyle={canModifyParticipants ? styles.hoveredComponentBG : {}} footerContent={ - !this.props.isReadOnly ? ( + !this.props.isReadOnly && ( shouldShowSettlementButton ? ( ) - ) : null + ) } > Date: Tue, 23 May 2023 14:22:28 +0100 Subject: [PATCH 24/43] disable the editable fields when in read-only mode --- src/components/MoneyRequestConfirmationList.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index 49837f7d58a7..f3cef8f3214f 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -316,7 +316,7 @@ class MoneyRequestConfirmationList extends Component { onPress={() => this.props.navigateToStep(0)} style={[styles.moneyRequestMenuItem, styles.mt2]} titleStyle={styles.moneyRequestConfirmationAmount} - disabled={this.state.didConfirm} + disabled={this.state.didConfirm || this.props.isReadOnly} /> Navigation.navigate(ROUTES.MONEY_REQUEST_DESCRIPTION)} style={[styles.moneyRequestMenuItem, styles.mb2]} - disabled={this.state.didConfirm} + disabled={this.state.didConfirm|| this.props.isReadOnly} /> ); From 8413236264c8c798eb4eaa9b3afa70706cda23a5 Mon Sep 17 00:00:00 2001 From: Jules Rosser Date: Tue, 23 May 2023 14:45:28 +0100 Subject: [PATCH 25/43] prevent exception by rending 404 page when action missing --- src/pages/SplitDetailsPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/SplitDetailsPage.js b/src/pages/SplitDetailsPage.js index f7088299ee78..b7b900db7fbd 100755 --- a/src/pages/SplitDetailsPage.js +++ b/src/pages/SplitDetailsPage.js @@ -91,7 +91,7 @@ const SplitDetailsPage = (props) => { return ( {( - + Date: Tue, 23 May 2023 15:22:40 +0100 Subject: [PATCH 26/43] pass the reportActionID to the SplitDetailsPage component via URL route --- src/ROUTES.js | 4 ++-- src/components/ReportActionItem/MoneyRequestAction.js | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/ROUTES.js b/src/ROUTES.js index 04c0b31df5c1..30ebb5c047e1 100644 --- a/src/ROUTES.js +++ b/src/ROUTES.js @@ -117,8 +117,8 @@ export default { SET_PASSWORD_WITH_VALIDATE_CODE: 'setpassword/:accountID/:validateCode', DETAILS: 'details', getDetailsRoute: (login) => `details?login=${encodeURIComponent(login)}`, - SPLIT_DETAILS: 'r/:reportID/split/details', - getSplitDetailsRoute: (reportID) => `r/${reportID}/split/details`, + SPLIT_DETAILS: 'r/:reportID/split/:splitActionID/', + getSplitDetailsRoute: (reportID, splitActionID) => `r/${reportID}/split/${splitActionID}/`, REPORT_PARTICIPANTS: 'r/:reportID/participants', getReportParticipantsRoute: (reportID) => `r/${reportID}/participants`, REPORT_PARTICIPANT: 'r/:reportID/participants/details', diff --git a/src/components/ReportActionItem/MoneyRequestAction.js b/src/components/ReportActionItem/MoneyRequestAction.js index f26669584bf2..02ef8d87d13a 100644 --- a/src/components/ReportActionItem/MoneyRequestAction.js +++ b/src/components/ReportActionItem/MoneyRequestAction.js @@ -94,7 +94,8 @@ const MoneyRequestAction = (props) => { const hasMultipleParticipants = lodashGet(props.chatReport, 'participants', []).length > 1; const onIOUPreviewPressed = () => { if (lodashGet(props.action, 'originalMessage.type', '') === CONST.IOU.REPORT_ACTION_TYPE.SPLIT && hasMultipleParticipants) { - Navigation.navigate(ROUTES.getSplitDetailsRoute(props.chatReportID)) + const reportActionID = lodashGet(props.action, 'reportActionID', '0'); + Navigation.navigate(ROUTES.getSplitDetailsRoute(props.chatReportID, reportActionID)) return; } From f6be7e6ea664457ca92e15676cec9179009bfdfd Mon Sep 17 00:00:00 2001 From: Jules Rosser Date: Tue, 23 May 2023 15:23:04 +0100 Subject: [PATCH 27/43] retrieve reportActions within SplitDetailsPage using chatReportID --- src/pages/SplitDetailsPage.js | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/src/pages/SplitDetailsPage.js b/src/pages/SplitDetailsPage.js index b7b900db7fbd..b7a3e4060a20 100755 --- a/src/pages/SplitDetailsPage.js +++ b/src/pages/SplitDetailsPage.js @@ -38,6 +38,9 @@ const propTypes = { params: PropTypes.shape({ /** Report ID passed via route r/:reportID/split/details */ reportID: PropTypes.string, + + /** ReportActionID passed via route r/split/:reportActionID */ + reportActionID: PropTypes.string, }), }).isRequired, @@ -49,6 +52,18 @@ const defaultProps = { action: {}, }; +/** + * Get the reportID for the associated chatReport + * + * @param {Object} route + * @param {Object} route.params + * @param {String} route.params.chatReportID + * @returns {String} + */ +function getChatReportID(route) { + return route.params.reportID.toString(); +} + /** * Returns all the participants in the active report * @@ -87,6 +102,7 @@ const getAllParticipants = (report, personalDetails) => { const SplitDetailsPage = (props) => { const participants = getAllParticipants(props.report, props.personalDetails); + const splitAmount = lodashGet(props.action, 'originalMessage.IOUDetails.amount', 0); return ( @@ -106,7 +122,7 @@ const SplitDetailsPage = (props) => { @@ -129,5 +145,9 @@ export default compose( personalDetails: { key: ONYXKEYS.PERSONAL_DETAILS, }, + reportActions: { + key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getChatReportID(route)}`, + canEvict: false, + }, }), )(SplitDetailsPage); From 6ca85da257631f139226138860ac0f60b582efad Mon Sep 17 00:00:00 2001 From: Jules Rosser Date: Tue, 23 May 2023 15:33:23 +0100 Subject: [PATCH 28/43] retrieve split reportAction from Onyx using route param --- src/pages/SplitDetailsPage.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/pages/SplitDetailsPage.js b/src/pages/SplitDetailsPage.js index b7a3e4060a20..4eeab1bd5f9b 100755 --- a/src/pages/SplitDetailsPage.js +++ b/src/pages/SplitDetailsPage.js @@ -30,8 +30,8 @@ const propTypes = { /** The active report */ report: reportPropTypes.isRequired, - /** The report action which we are displaying */ - action: PropTypes.shape(reportActionPropTypes), + /** Array of report actions for this report */ + reportActions: PropTypes.shape(reportActionPropTypes), /** Route params */ route: PropTypes.shape({ @@ -40,7 +40,7 @@ const propTypes = { reportID: PropTypes.string, /** ReportActionID passed via route r/split/:reportActionID */ - reportActionID: PropTypes.string, + splitActionID: PropTypes.string, }), }).isRequired, @@ -57,10 +57,10 @@ const defaultProps = { * * @param {Object} route * @param {Object} route.params - * @param {String} route.params.chatReportID + * @param {String} route.params.reportID * @returns {String} */ -function getChatReportID(route) { +function getReportID(route) { return route.params.reportID.toString(); } @@ -101,6 +101,7 @@ const getAllParticipants = (report, personalDetails) => { }; const SplitDetailsPage = (props) => { + const reportAction = props.reportActions[`${props.route.params.splitActionID.toString()}`]; const participants = getAllParticipants(props.report, props.personalDetails); const splitAmount = lodashGet(props.action, 'originalMessage.IOUDetails.amount', 0); @@ -146,7 +147,7 @@ export default compose( key: ONYXKEYS.PERSONAL_DETAILS, }, reportActions: { - key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getChatReportID(route)}`, + key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getReportID(route)}`, canEvict: false, }, }), From a1002b6c520ed4bb130783784bd5068807444575 Mon Sep 17 00:00:00 2001 From: Jules Rosser Date: Tue, 23 May 2023 15:38:11 +0100 Subject: [PATCH 29/43] when showing split details, get amount from the reportAction --- src/pages/SplitDetailsPage.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/SplitDetailsPage.js b/src/pages/SplitDetailsPage.js index 4eeab1bd5f9b..edbc372d8380 100755 --- a/src/pages/SplitDetailsPage.js +++ b/src/pages/SplitDetailsPage.js @@ -103,12 +103,12 @@ const getAllParticipants = (report, personalDetails) => { const SplitDetailsPage = (props) => { const reportAction = props.reportActions[`${props.route.params.splitActionID.toString()}`]; const participants = getAllParticipants(props.report, props.personalDetails); - const splitAmount = lodashGet(props.action, 'originalMessage.IOUDetails.amount', 0); + const splitAmount = lodashGet(reportAction, 'originalMessage.amount', 0); return ( {( - + Date: Tue, 23 May 2023 16:01:53 +0100 Subject: [PATCH 30/43] remove split creator from the participants array to avoid invalid list data --- src/pages/SplitDetailsPage.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/pages/SplitDetailsPage.js b/src/pages/SplitDetailsPage.js index edbc372d8380..4b6e7bd17682 100755 --- a/src/pages/SplitDetailsPage.js +++ b/src/pages/SplitDetailsPage.js @@ -67,14 +67,15 @@ function getReportID(route) { /** * Returns all the participants in the active report * - * @param {Object} report The active report object + * @param {Object} reportAction The IOU split reportAction, which contains the participants * @param {Object} personalDetails The personal details of the users * @return {Array} */ -const getAllParticipants = (report, personalDetails) => { - const {participants} = report; +const getAllParticipants = (reportAction, personalDetails) => { + const participants = lodashGet(reportAction, 'originalMessage.participants', []); + const participantsExcludingOwner = _.filter(participants, (participant) => participant !== reportAction.actorEmail); - return _.chain(participants) + return _.chain(participantsExcludingOwner) .map((login) => { const userLogin = Str.removeSMSDomain(login); const userPersonalDetail = lodashGet(personalDetails, login, {displayName: userLogin, avatar: ''}); @@ -102,7 +103,7 @@ const getAllParticipants = (report, personalDetails) => { const SplitDetailsPage = (props) => { const reportAction = props.reportActions[`${props.route.params.splitActionID.toString()}`]; - const participants = getAllParticipants(props.report, props.personalDetails); + const participants = getAllParticipants(reportAction, props.personalDetails); const splitAmount = lodashGet(reportAction, 'originalMessage.amount', 0); return ( From 091019a637cd1efe5c087dfa3586c9e5acbb262c Mon Sep 17 00:00:00 2001 From: Jules Rosser Date: Tue, 23 May 2023 16:22:16 +0100 Subject: [PATCH 31/43] hide chevron from split details when in read-only mode --- src/components/MoneyRequestConfirmationList.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index f3cef8f3214f..4834ba089a98 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -310,7 +310,7 @@ class MoneyRequestConfirmationList extends Component { } > this.props.navigateToStep(0)} @@ -319,7 +319,7 @@ class MoneyRequestConfirmationList extends Component { disabled={this.state.didConfirm || this.props.isReadOnly} /> Navigation.navigate(ROUTES.MONEY_REQUEST_DESCRIPTION)} From 125798d9ae2d5ec61c7d740edbd63858f0302fc5 Mon Sep 17 00:00:00 2001 From: Jules Rosser Date: Tue, 23 May 2023 16:25:07 +0100 Subject: [PATCH 32/43] move SplitDetailsPage to iou pages folder --- .../AppNavigator/ModalStackNavigators.js | 4 +- .../SplitBillDetailsPage.js} | 40 +++++++++---------- 2 files changed, 22 insertions(+), 22 deletions(-) rename src/pages/{SplitDetailsPage.js => iou/SplitBillDetailsPage.js} (80%) diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index feb803dba8b4..2df81f22813a 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -145,8 +145,8 @@ const IOUDetailsModalStackNavigator = createModalStackNavigator([ const SplitDetailsModalStackNavigator = createModalStackNavigator([ { getComponent: () => { - const SplitDetailsPage = require('../../../pages/SplitDetailsPage').default; - return SplitDetailsPage; + const SplitBillDetailsPage = require('../../../pages/iou/SplitBillDetailsPage').default; + return SplitBillDetailsPage; }, name: 'Split_Details_Root', }, diff --git a/src/pages/SplitDetailsPage.js b/src/pages/iou/SplitBillDetailsPage.js similarity index 80% rename from src/pages/SplitDetailsPage.js rename to src/pages/iou/SplitBillDetailsPage.js index 4b6e7bd17682..d8ebbd566eab 100755 --- a/src/pages/SplitDetailsPage.js +++ b/src/pages/iou/SplitBillDetailsPage.js @@ -5,21 +5,21 @@ import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; import Str from 'expensify-common/lib/str'; import lodashGet from 'lodash/get'; -import styles from '../styles/styles'; -import ONYXKEYS from '../ONYXKEYS'; -import HeaderWithCloseButton from '../components/HeaderWithCloseButton'; -import Navigation from '../libs/Navigation/Navigation'; -import ScreenWrapper from '../components/ScreenWrapper'; -import MoneyRequestConfirmationList from '../components/MoneyRequestConfirmationList'; -import personalDetailsPropType from './personalDetailsPropType'; -import withLocalize, {withLocalizePropTypes} from '../components/withLocalize'; -import compose from '../libs/compose'; -import * as ReportUtils from '../libs/ReportUtils'; -import reportActionPropTypes from './home/report/reportActionPropTypes'; -import reportPropTypes from './reportPropTypes'; -import withReportOrNotFound from './home/report/withReportOrNotFound'; -import FullPageNotFoundView from '../components/BlockingViews/FullPageNotFoundView'; -import CONST from '../CONST'; +import styles from '../../styles/styles'; +import ONYXKEYS from '../../ONYXKEYS'; +import HeaderWithCloseButton from '../../components/HeaderWithCloseButton'; +import Navigation from '../../libs/Navigation/Navigation'; +import ScreenWrapper from '../../components/ScreenWrapper'; +import MoneyRequestConfirmationList from '../../components/MoneyRequestConfirmationList'; +import personalDetailsPropType from '../personalDetailsPropType'; +import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; +import compose from '../../libs/compose'; +import * as ReportUtils from '../../libs/ReportUtils'; +import reportActionPropTypes from '../home/report/reportActionPropTypes'; +import reportPropTypes from '../reportPropTypes'; +import withReportOrNotFound from '../home/report/withReportOrNotFound'; +import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView'; +import CONST from '../../CONST'; const propTypes = { /* Onyx Props */ @@ -101,7 +101,7 @@ const getAllParticipants = (reportAction, personalDetails) => { .value(); }; -const SplitDetailsPage = (props) => { +const SplitBillDetailsPage = (props) => { const reportAction = props.reportActions[`${props.route.params.splitActionID.toString()}`]; const participants = getAllParticipants(reportAction, props.personalDetails); const splitAmount = lodashGet(reportAction, 'originalMessage.amount', 0); @@ -136,9 +136,9 @@ const SplitDetailsPage = (props) => { ); }; -SplitDetailsPage.propTypes = propTypes; -SplitDetailsPage.defaultProps = defaultProps; -SplitDetailsPage.displayName = 'SplitDetailsPage'; +SplitBillDetailsPage.propTypes = propTypes; +SplitBillDetailsPage.defaultProps = defaultProps; +SplitBillDetailsPage.displayName = 'SplitBillDetailsPage'; export default compose( withLocalize, @@ -152,4 +152,4 @@ export default compose( canEvict: false, }, }), -)(SplitDetailsPage); +)(SplitBillDetailsPage); From 58d1d7537ccfd6cd8ab507b8509f197a4759bb1f Mon Sep 17 00:00:00 2001 From: Jules Rosser Date: Tue, 23 May 2023 16:36:47 +0100 Subject: [PATCH 33/43] fix lint issues --- src/pages/iou/SplitBillDetailsPage.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/iou/SplitBillDetailsPage.js b/src/pages/iou/SplitBillDetailsPage.js index d8ebbd566eab..e8a4cb0a04b1 100755 --- a/src/pages/iou/SplitBillDetailsPage.js +++ b/src/pages/iou/SplitBillDetailsPage.js @@ -49,7 +49,7 @@ const propTypes = { const defaultProps = { personalDetails: {}, - action: {}, + reportActions: {}, }; /** @@ -108,7 +108,7 @@ const SplitBillDetailsPage = (props) => { return ( - {( + ( { )} - )} + ) ); }; From b1e3d8ffdbdb8fb8585934300fbb2e962ebd0cd4 Mon Sep 17 00:00:00 2001 From: Jules Rosser Date: Tue, 23 May 2023 17:12:14 +0100 Subject: [PATCH 34/43] switch to Carlos' stack navigator --- src/ROUTES.js | 2 -- .../MoneyRequestConfirmationList.js | 34 ------------------- .../ReportActionItem/MoneyRequestAction.js | 2 +- .../Navigation/AppNavigator/AuthScreens.js | 6 ---- .../AppNavigator/ModalStackNavigators.js | 11 ------ 5 files changed, 1 insertion(+), 54 deletions(-) diff --git a/src/ROUTES.js b/src/ROUTES.js index 11b3fbde1c59..c57e16743c3c 100644 --- a/src/ROUTES.js +++ b/src/ROUTES.js @@ -119,8 +119,6 @@ export default { SET_PASSWORD_WITH_VALIDATE_CODE: 'setpassword/:accountID/:validateCode', DETAILS: 'details', getDetailsRoute: (login) => `details?login=${encodeURIComponent(login)}`, - SPLIT_DETAILS: 'r/:reportID/split/:splitActionID/', - getSplitDetailsRoute: (reportID, splitActionID) => `r/${reportID}/split/${splitActionID}/`, REPORT_PARTICIPANTS: 'r/:reportID/participants', getReportParticipantsRoute: (reportID) => `r/${reportID}/participants`, REPORT_PARTICIPANT: 'r/:reportID/participants/details', diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index f155a8405e98..c7b2f56a4f33 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -73,9 +73,6 @@ const propTypes = { /** The policyID of the request */ policyID: PropTypes.string, - - /** Whether we should show the footer button */ - shouldShowFooter: PropTypes.bool, }; const defaultProps = { @@ -91,7 +88,6 @@ const defaultProps = { session: { email: null, }, - shouldShowFooter: true, policyID: '', ...withCurrentUserPersonalDetailsDefaultProps, }; @@ -226,36 +222,6 @@ class MoneyRequestConfirmationList extends Component { return [...selectedParticipants, OptionsListUtils.getIOUConfirmationOptionsFromMyPersonalDetail(this.props.currentUserPersonalDetails)]; } - getFooterContent() { - if (!this.props.shouldShowFooter) { - 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 ? ( - - ) : ( - this.confirm(value)} - options={this.getSplitOrRequestOptions()} - /> - ); - } - /** * Toggle selected option's selected prop. * @param {Object} option diff --git a/src/components/ReportActionItem/MoneyRequestAction.js b/src/components/ReportActionItem/MoneyRequestAction.js index 02ef8d87d13a..e13de9e8e7c7 100644 --- a/src/components/ReportActionItem/MoneyRequestAction.js +++ b/src/components/ReportActionItem/MoneyRequestAction.js @@ -95,7 +95,7 @@ const MoneyRequestAction = (props) => { const onIOUPreviewPressed = () => { if (lodashGet(props.action, 'originalMessage.type', '') === CONST.IOU.REPORT_ACTION_TYPE.SPLIT && hasMultipleParticipants) { const reportActionID = lodashGet(props.action, 'reportActionID', '0'); - Navigation.navigate(ROUTES.getSplitDetailsRoute(props.chatReportID, reportActionID)) + Navigation.navigate(ROUTES.getSplitBillDetailsRoute(props.chatReportID, reportActionID)) return; } diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index 57ec7a7179f4..04bd397d5f64 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -286,12 +286,6 @@ class AuthScreens extends React.Component { component={ModalStackNavigators.DetailsModalStackNavigator} listeners={modalScreenListeners} /> - { - const SplitBillDetailsPage = require('../../../pages/iou/SplitBillDetailsPage').default; - return SplitBillDetailsPage; - }, - name: 'Split_Details_Root', - }, -]); - const DetailsModalStackNavigator = createModalStackNavigator([ { getComponent: () => { @@ -721,7 +711,6 @@ export { IOURequestModalStackNavigator, IOUSendModalStackNavigator, IOUDetailsModalStackNavigator, - SplitDetailsModalStackNavigator, DetailsModalStackNavigator, ReportDetailsModalStackNavigator, TaskModalStackNavigator, From 9c567180611a721ffa0ad7d007d0fc7409516417 Mon Sep 17 00:00:00 2001 From: Jules Rosser Date: Tue, 23 May 2023 17:18:04 +0100 Subject: [PATCH 35/43] further formatting and prettier fixes --- .../MoneyRequestConfirmationList.js | 43 ++++++++--------- .../ReportActionItem/MoneyRequestAction.js | 2 +- src/libs/Navigation/linkingConfig.js | 5 -- src/pages/iou/SplitBillDetailsPage.js | 48 +++++++++---------- 4 files changed, 46 insertions(+), 52 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index c7b2f56a4f33..86663d1fbeca 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -271,7 +271,7 @@ class MoneyRequestConfirmationList extends Component { 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.isReadOnly && (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 ( @@ -290,26 +290,25 @@ class MoneyRequestConfirmationList extends Component { shouldUseStyleForChildren={false} optionHoveredStyle={canModifyParticipants ? styles.hoveredComponentBG : {}} footerContent={ - !this.props.isReadOnly && ( - shouldShowSettlementButton ? ( - - ) : ( - this.confirm(value)} - options={this.getSplitOrRequestOptions()} - /> - ) - ) + !this.props.isReadOnly && + (shouldShowSettlementButton ? ( + + ) : ( + this.confirm(value)} + options={this.getSplitOrRequestOptions()} + /> + )) } > Navigation.navigate(ROUTES.MONEY_REQUEST_DESCRIPTION)} style={[styles.moneyRequestMenuItem, styles.mb2]} - disabled={this.state.didConfirm|| this.props.isReadOnly} + disabled={this.state.didConfirm || this.props.isReadOnly} /> ); diff --git a/src/components/ReportActionItem/MoneyRequestAction.js b/src/components/ReportActionItem/MoneyRequestAction.js index e13de9e8e7c7..460fe73a6742 100644 --- a/src/components/ReportActionItem/MoneyRequestAction.js +++ b/src/components/ReportActionItem/MoneyRequestAction.js @@ -95,7 +95,7 @@ const MoneyRequestAction = (props) => { const onIOUPreviewPressed = () => { if (lodashGet(props.action, 'originalMessage.type', '') === CONST.IOU.REPORT_ACTION_TYPE.SPLIT && hasMultipleParticipants) { const reportActionID = lodashGet(props.action, 'reportActionID', '0'); - Navigation.navigate(ROUTES.getSplitBillDetailsRoute(props.chatReportID, reportActionID)) + Navigation.navigate(ROUTES.getSplitBillDetailsRoute(props.chatReportID, reportActionID)); return; } diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js index e780765f48ca..371552e8c7ae 100644 --- a/src/libs/Navigation/linkingConfig.js +++ b/src/libs/Navigation/linkingConfig.js @@ -256,11 +256,6 @@ export default { Details_Root: ROUTES.DETAILS, }, }, - Split_Details: { - screens: { - Split_Details_Root: ROUTES.SPLIT_DETAILS, - }, - }, Participants: { screens: { ReportParticipants_Root: ROUTES.REPORT_PARTICIPANTS, diff --git a/src/pages/iou/SplitBillDetailsPage.js b/src/pages/iou/SplitBillDetailsPage.js index e8a4cb0a04b1..01b3959a0974 100644 --- a/src/pages/iou/SplitBillDetailsPage.js +++ b/src/pages/iou/SplitBillDetailsPage.js @@ -40,7 +40,7 @@ const propTypes = { reportID: PropTypes.string, /** ReportActionID passed via route r/split/:reportActionID */ - splitActionID: PropTypes.string, + reportActionID: PropTypes.string, }), }).isRequired, @@ -102,35 +102,35 @@ const getAllParticipants = (reportAction, personalDetails) => { }; const SplitBillDetailsPage = (props) => { - const reportAction = props.reportActions[`${props.route.params.splitActionID.toString()}`]; + const reportAction = props.reportActions[`${props.route.params.reportActionID.toString()}`]; const participants = getAllParticipants(reportAction, props.personalDetails); const splitAmount = lodashGet(reportAction, 'originalMessage.amount', 0); return ( ( - - - - {Boolean(participants.length) && ( - - )} - - + + + + {Boolean(participants.length) && ( + + )} + + ) ); From 8444113127f0e2dd11b20ef74f7a91cb191abcce Mon Sep 17 00:00:00 2001 From: Jules Rosser Date: Wed, 24 May 2023 14:00:28 +0100 Subject: [PATCH 36/43] improve navigation routing --- src/ROUTES.js | 2 +- src/libs/Navigation/AppNavigator/AuthScreens.js | 2 +- src/libs/Navigation/AppNavigator/ModalStackNavigators.js | 2 +- src/libs/Navigation/linkingConfig.js | 4 ++-- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/ROUTES.js b/src/ROUTES.js index 0e3682f6929f..fd25be82aff5 100644 --- a/src/ROUTES.js +++ b/src/ROUTES.js @@ -93,7 +93,7 @@ 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}`, - IOU_DETAILS_SPLIT_BILL: `/:reportID/split/:reportActionID`, + SPLIT_BILL_DETAILS: `/:reportID/split/:reportActionID`, getSplitBillDetailsRoute: (reportID, reportActionID) => `/${reportID}/split/${reportActionID}`, getNewTaskRoute: (reportID) => `${NEW_TASK}/${reportID}`, NEW_TASK_WITH_REPORT_ID: `${NEW_TASK}/:reportID?`, diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index 63017c0600c8..8a691da47647 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -335,7 +335,7 @@ class AuthScreens extends React.Component { listeners={modalScreenListeners} /> Date: Wed, 24 May 2023 15:50:32 +0100 Subject: [PATCH 37/43] apply review feedback, refactor participants and footer logic --- .../MoneyRequestConfirmationList.js | 57 ++++++++++-------- src/pages/iou/SplitBillDetailsPage.js | 60 ++++--------------- 2 files changed, 42 insertions(+), 75 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index d5b4e281ccdf..562066dba6fd 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -87,6 +87,7 @@ const defaultProps = { }, iouType: CONST.IOU.MONEY_REQUEST_TYPE.REQUEST, canModifyParticipants: false, + shouldShowFooter: false, isReadOnly: false, session: { email: null, @@ -213,6 +214,36 @@ class MoneyRequestConfirmationList extends Component { return sections; } + getFooterContent() { + if (!this.props.shouldShowFooter) { + 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 ? ( + + ) : ( + this.confirm(value)} + options={this.getSplitOrRequestOptions()} + /> + ); + } + /** * Returns selected options -- there is checkmark for every row in List for split flow * @returns {Array} @@ -270,10 +301,6 @@ 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.isReadOnly && this.props.canModifyParticipants && this.props.hasMultipleParticipants; const formattedAmount = CurrencyUtils.convertToDisplayString(this.props.iouAmount, this.props.iou.selectedCurrencyCode); @@ -292,27 +319,7 @@ class MoneyRequestConfirmationList extends Component { shouldShowTextInput={false} shouldUseStyleForChildren={false} optionHoveredStyle={canModifyParticipants ? styles.hoveredComponentBG : {}} - footerContent={ - !this.props.isReadOnly && - (shouldShowSettlementButton ? ( - - ) : ( - this.confirm(value)} - options={this.getSplitOrRequestOptions()} - /> - )) - } + footerContent={this.getFooterContent()} > { - const participants = lodashGet(reportAction, 'originalMessage.participants', []); - const participantsExcludingOwner = _.filter(participants, (participant) => participant !== reportAction.actorEmail); - - return _.chain(participantsExcludingOwner) - .map((login) => { - const userLogin = Str.removeSMSDomain(login); - const userPersonalDetail = lodashGet(personalDetails, login, {displayName: userLogin, avatar: ''}); - - return { - alternateText: userLogin, - displayName: userPersonalDetail.displayName, - icons: [ - { - source: ReportUtils.getAvatar(userPersonalDetail.avatar, login), - name: login, - type: CONST.ICON_TYPE_AVATAR, - }, - ], - keyForList: userLogin, - login, - text: userPersonalDetail.displayName, - tooltipText: userLogin, - participantsList: [{login, displayName: userPersonalDetail.displayName}], - }; - }) - .sortBy((participant) => participant.displayName.toLowerCase()) - .value(); -}; - const SplitBillDetailsPage = (props) => { const reportAction = props.reportActions[`${props.route.params.reportActionID.toString()}`]; - const participants = getAllParticipants(reportAction, props.personalDetails); + const personalDetails = OptionsListUtils.getPersonalDetailsForLogins(reportAction.originalMessage.participants, props.personalDetails); + const participants = OptionsListUtils.getParticipantsOptions(reportAction.originalMessage, personalDetails); + const participantsExcludingOwner = _.filter(participants, (participant) => participant.login !== reportAction.actorEmail); const splitAmount = lodashGet(reportAction, 'originalMessage.amount', 0); return ( - - ( + - { {Boolean(participants.length) && ( )} - ) ); }; From 81909f097269d88edbe6d7771a82e9bf744b0a49 Mon Sep 17 00:00:00 2001 From: Jules Rosser Date: Wed, 24 May 2023 16:28:07 +0100 Subject: [PATCH 38/43] show payee instead of authenticated user, plus other formatting fixes --- src/components/MoneyRequestConfirmationList.js | 15 ++++++++++----- src/libs/OptionsListUtils.js | 16 ++++++++-------- src/pages/iou/SplitBillDetailsPage.js | 8 +++++--- src/pages/iou/steps/MoneyRequestConfirmPage.js | 1 + 4 files changed, 24 insertions(+), 16 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index 562066dba6fd..93f3ae5f2033 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -40,6 +40,9 @@ const propTypes = { /** Selected participants from MoneyRequestModal with login */ participants: PropTypes.arrayOf(optionPropTypes).isRequired, + /** Payee of the money request with login */ + payee: optionPropTypes.isRequired, + /** Can the participants be modified or not */ canModifyParticipants: PropTypes.bool, @@ -47,7 +50,7 @@ const propTypes = { isReadOnly: PropTypes.bool, /** Depending on expense report or personal IOU report, respective bank account route */ - bankAccountRoute: PropTypes.string.isRequired, + bankAccountRoute: PropTypes.string, ...windowDimensionsPropTypes, @@ -89,6 +92,7 @@ const defaultProps = { canModifyParticipants: false, shouldShowFooter: false, isReadOnly: false, + bankAccountRoute: '', session: { email: null, }, @@ -182,15 +186,16 @@ 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.props.payee, CurrencyUtils.convertToDisplayString(myIOUAmount, this.props.iou.selectedCurrencyCode), ); + const payeeWithAmount = this.props.payee['descriptiveText'] = myIOUAmount; sections.push( { title: this.props.translate('moneyRequestConfirmationList.whoPaid'), - data: [formattedMyPersonalDetails], + data: [formattedPayeePersonalDetails], shouldShow: true, indexOffset: 0, isDisabled: true, @@ -253,7 +258,7 @@ class MoneyRequestConfirmationList extends Component { return []; } const selectedParticipants = this.getSelectedParticipants(); - return [...selectedParticipants, OptionsListUtils.getIOUConfirmationOptionsFromMyPersonalDetail(this.props.currentUserPersonalDetails)]; + return [...selectedParticipants, OptionsListUtils.getIOUConfirmationOptionsFromPayeePersonalDetail(this.props.payee)]; } /** diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js index 0b3c4bd35b51..a81584e6ff7a 100644 --- a/src/libs/OptionsListUtils.js +++ b/src/libs/OptionsListUtils.js @@ -785,25 +785,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 {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, }; } @@ -944,7 +944,7 @@ export { getMemberInviteOptions, getHeaderMessage, getPersonalDetailsForLogins, - getIOUConfirmationOptionsFromMyPersonalDetail, + getIOUConfirmationOptionsFromPayeePersonalDetail, getIOUConfirmationOptionsFromParticipants, getSearchText, getAllReportErrors, diff --git a/src/pages/iou/SplitBillDetailsPage.js b/src/pages/iou/SplitBillDetailsPage.js index 261bba17839d..eb71f1064458 100644 --- a/src/pages/iou/SplitBillDetailsPage.js +++ b/src/pages/iou/SplitBillDetailsPage.js @@ -66,8 +66,9 @@ const SplitBillDetailsPage = (props) => { const reportAction = props.reportActions[`${props.route.params.reportActionID.toString()}`]; const personalDetails = OptionsListUtils.getPersonalDetailsForLogins(reportAction.originalMessage.participants, props.personalDetails); const participants = OptionsListUtils.getParticipantsOptions(reportAction.originalMessage, personalDetails); - const participantsExcludingOwner = _.filter(participants, (participant) => participant.login !== reportAction.actorEmail); - const splitAmount = lodashGet(reportAction, 'originalMessage.amount', 0); + 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); return ( @@ -83,7 +84,8 @@ const SplitBillDetailsPage = (props) => { {Boolean(participants.length) && ( ( Date: Wed, 24 May 2023 16:45:41 +0100 Subject: [PATCH 39/43] make the request confirmation payee dynamic --- .../MoneyRequestConfirmationList.js | 22 ++++++++++++++----- .../iou/steps/MoneyRequestConfirmPage.js | 1 - 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index 93f3ae5f2033..b3fbd03ee50a 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -41,7 +41,7 @@ const propTypes = { participants: PropTypes.arrayOf(optionPropTypes).isRequired, /** Payee of the money request with login */ - payee: optionPropTypes.isRequired, + payeePersonalDetails: optionPropTypes, /** Can the participants be modified or not */ canModifyParticipants: PropTypes.bool, @@ -89,8 +89,9 @@ const defaultProps = { selectedCurrencyCode: CONST.CURRENCY.USD, }, iouType: CONST.IOU.MONEY_REQUEST_TYPE.REQUEST, + payee: null, canModifyParticipants: false, - shouldShowFooter: false, + shouldShowFooter: true, isReadOnly: false, bankAccountRoute: '', session: { @@ -170,6 +171,18 @@ class MoneyRequestConfirmationList extends Component { return _.map(participants, (option) => _.omit(option, 'descriptiveText')); } + /** + * Returns the payee personalDetails object + * + * @returns {Object} personalDetails + */ + getRequestPayee() { + if (this.props.payeePersonalDetails) { + return this.props.payeePersonalDetails; + } + return this.props.currentUserPersonalDetails; + } + /** * Returns the sections needed for the OptionsSelector * @@ -187,10 +200,9 @@ class MoneyRequestConfirmationList extends Component { const myIOUAmount = IOUUtils.calculateAmount(selectedParticipants.length, this.props.iouAmount, true); const formattedPayeePersonalDetails = OptionsListUtils.getIOUConfirmationOptionsFromPayeePersonalDetail( - this.props.payee, + this.getRequestPayee(), CurrencyUtils.convertToDisplayString(myIOUAmount, this.props.iou.selectedCurrencyCode), ); - const payeeWithAmount = this.props.payee['descriptiveText'] = myIOUAmount; sections.push( { @@ -258,7 +270,7 @@ class MoneyRequestConfirmationList extends Component { return []; } const selectedParticipants = this.getSelectedParticipants(); - return [...selectedParticipants, OptionsListUtils.getIOUConfirmationOptionsFromPayeePersonalDetail(this.props.payee)]; + return [...selectedParticipants, OptionsListUtils.getIOUConfirmationOptionsFromPayeePersonalDetail(this.getRequestPayee())]; } /** diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js index e42515432b06..e86edadf5223 100644 --- a/src/pages/iou/steps/MoneyRequestConfirmPage.js +++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js @@ -45,7 +45,6 @@ const defaultProps = { const MoneyRequestConfirmPage = (props) => ( Date: Thu, 25 May 2023 13:53:29 +0100 Subject: [PATCH 40/43] further read-only split details page improvements based on feedback --- src/components/MoneyRequestConfirmationList.js | 11 +++++------ src/components/OptionsSelector/BaseOptionsSelector.js | 2 +- src/libs/OptionsListUtils.js | 2 +- src/pages/iou/SplitBillDetailsPage.js | 2 +- 4 files changed, 8 insertions(+), 9 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index b3fbd03ee50a..a76c728d0b8a 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -91,7 +91,6 @@ const defaultProps = { iouType: CONST.IOU.MONEY_REQUEST_TYPE.REQUEST, payee: null, canModifyParticipants: false, - shouldShowFooter: true, isReadOnly: false, bankAccountRoute: '', session: { @@ -172,11 +171,11 @@ class MoneyRequestConfirmationList extends Component { } /** - * Returns the payee personalDetails object + * Returns the personalDetails object for the requester * * @returns {Object} personalDetails */ - getRequestPayee() { + getRequestorPersonalDetails() { if (this.props.payeePersonalDetails) { return this.props.payeePersonalDetails; } @@ -200,7 +199,7 @@ class MoneyRequestConfirmationList extends Component { const myIOUAmount = IOUUtils.calculateAmount(selectedParticipants.length, this.props.iouAmount, true); const formattedPayeePersonalDetails = OptionsListUtils.getIOUConfirmationOptionsFromPayeePersonalDetail( - this.getRequestPayee(), + this.getRequestorPersonalDetails(), CurrencyUtils.convertToDisplayString(myIOUAmount, this.props.iou.selectedCurrencyCode), ); @@ -232,7 +231,7 @@ class MoneyRequestConfirmationList extends Component { } getFooterContent() { - if (!this.props.shouldShowFooter) { + if (this.props.isReadOnly) { return; } @@ -270,7 +269,7 @@ class MoneyRequestConfirmationList extends Component { return []; } const selectedParticipants = this.getSelectedParticipants(); - return [...selectedParticipants, OptionsListUtils.getIOUConfirmationOptionsFromPayeePersonalDetail(this.getRequestPayee())]; + return [...selectedParticipants, OptionsListUtils.getIOUConfirmationOptionsFromPayeePersonalDetail(this.getRequestorPersonalDetails())]; } /** diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js index f2ae4ee96718..5eb88ef5f5a0 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -275,7 +275,7 @@ 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 = ( diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js index a81584e6ff7a..75252e459010 100644 --- a/src/libs/OptionsListUtils.js +++ b/src/libs/OptionsListUtils.js @@ -787,7 +787,7 @@ function getSearchOptions(reports, personalDetails, searchValue = '', betas) { /** * Build the IOUConfirmation options for showing the payee personalDetail * - * @param {Object} myPersonalDetail + * @param {Object} personalDetail * @param {String} amountText * @returns {Object} */ diff --git a/src/pages/iou/SplitBillDetailsPage.js b/src/pages/iou/SplitBillDetailsPage.js index eb71f1064458..19178582b6ba 100644 --- a/src/pages/iou/SplitBillDetailsPage.js +++ b/src/pages/iou/SplitBillDetailsPage.js @@ -84,7 +84,7 @@ const SplitBillDetailsPage = (props) => { {Boolean(participants.length) && ( Date: Thu, 25 May 2023 14:00:59 +0100 Subject: [PATCH 41/43] apply prettier change --- src/components/OptionsSelector/BaseOptionsSelector.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js index 5eb88ef5f5a0..312f5d386b61 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -275,7 +275,8 @@ class BaseOptionsSelector extends Component { } render() { - const shouldShowFooter = !this.props.isReadOnly && (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 = ( From 693ebe3d58d0f2bb7a5b2b9b82b26ace0fa92b8e Mon Sep 17 00:00:00 2001 From: Jules Rosser Date: Fri, 26 May 2023 10:48:49 +0100 Subject: [PATCH 42/43] further improvements to split bill details page --- src/ROUTES.js | 2 +- src/components/MoneyRequestConfirmationList.js | 15 ++++++--------- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/src/ROUTES.js b/src/ROUTES.js index d22bb9400fc3..406a183d1f39 100644 --- a/src/ROUTES.js +++ b/src/ROUTES.js @@ -94,7 +94,7 @@ export default { 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: `/:reportID/split/:reportActionID`, - getSplitBillDetailsRoute: (reportID, reportActionID) => `/${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', diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index a76c728d0b8a..4e53f6967df0 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -89,7 +89,7 @@ const defaultProps = { selectedCurrencyCode: CONST.CURRENCY.USD, }, iouType: CONST.IOU.MONEY_REQUEST_TYPE.REQUEST, - payee: null, + payeePersonalDetails: null, canModifyParticipants: false, isReadOnly: false, bankAccountRoute: '', @@ -171,15 +171,12 @@ class MoneyRequestConfirmationList extends Component { } /** - * Returns the personalDetails object for the requester + * Returns the personalDetails object for the payee. Use the payee prop if passed, else fallback to current user * * @returns {Object} personalDetails */ - getRequestorPersonalDetails() { - if (this.props.payeePersonalDetails) { - return this.props.payeePersonalDetails; - } - return this.props.currentUserPersonalDetails; + getPayeePersonalDetails() { + return this.props.payeePersonalDetails || this.props.currentUserPersonalDetails; } /** @@ -199,7 +196,7 @@ class MoneyRequestConfirmationList extends Component { const myIOUAmount = IOUUtils.calculateAmount(selectedParticipants.length, this.props.iouAmount, true); const formattedPayeePersonalDetails = OptionsListUtils.getIOUConfirmationOptionsFromPayeePersonalDetail( - this.getRequestorPersonalDetails(), + this.getPayeePersonalDetails(), CurrencyUtils.convertToDisplayString(myIOUAmount, this.props.iou.selectedCurrencyCode), ); @@ -269,7 +266,7 @@ class MoneyRequestConfirmationList extends Component { return []; } const selectedParticipants = this.getSelectedParticipants(); - return [...selectedParticipants, OptionsListUtils.getIOUConfirmationOptionsFromPayeePersonalDetail(this.getRequestorPersonalDetails())]; + return [...selectedParticipants, OptionsListUtils.getIOUConfirmationOptionsFromPayeePersonalDetail(this.getPayeePersonalDetails())]; } /** From f2024d09f40094105c681482766a13b0db60a3b9 Mon Sep 17 00:00:00 2001 From: Jules Rosser Date: Fri, 26 May 2023 10:50:56 +0100 Subject: [PATCH 43/43] fix secondary route for split bill page --- src/ROUTES.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ROUTES.js b/src/ROUTES.js index 406a183d1f39..7e20bb7523f0 100644 --- a/src/ROUTES.js +++ b/src/ROUTES.js @@ -93,7 +93,7 @@ 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: `/:reportID/split/:reportActionID`, + 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?`,