diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js index b44b956ac547..84ea24f4da6b 100644 --- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js +++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js @@ -10,14 +10,13 @@ import MoneyRequestParticipantsSplitSelector from './MoneyRequestParticipantsSpl import MoneyRequestParticipantsSelector from './MoneyRequestParticipantsSelector'; import styles from '../../../../styles/styles'; import ScreenWrapper from '../../../../components/ScreenWrapper'; -import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize'; import Navigation from '../../../../libs/Navigation/Navigation'; -import compose from '../../../../libs/compose'; import * as DeviceCapabilities from '../../../../libs/DeviceCapabilities'; import HeaderWithBackButton from '../../../../components/HeaderWithBackButton'; import * as IOU from '../../../../libs/actions/IOU'; import * as MoneyRequestUtils from '../../../../libs/MoneyRequestUtils'; import {iouPropTypes, iouDefaultProps} from '../../propTypes'; +import useLocalize from '../../../../hooks/useLocalize'; const propTypes = { /** React Navigation route */ @@ -37,8 +36,6 @@ const propTypes = { /** The current tab we have navigated to in the request modal. String that corresponds to the request type. */ selectedTab: PropTypes.oneOf([CONST.TAB.DISTANCE, CONST.TAB.MANUAL, CONST.TAB.SCAN]).isRequired, - - ...withLocalizePropTypes, }; const defaultProps = { @@ -46,16 +43,32 @@ const defaultProps = { }; function MoneyRequestParticipantsPage(props) { + const {translate} = useLocalize(); const prevMoneyRequestId = useRef(props.iou.id); const iouType = useRef(lodashGet(props.route, 'params.iouType', '')); const reportID = useRef(lodashGet(props.route, 'params.reportID', '')); + const isNewReportIDSelectedLocally = useRef(false); const optionsSelectorRef = useRef(); const isDistanceRequest = MoneyRequestUtils.isDistanceRequest(iouType.current, props.selectedTab); - const navigateToNextStep = () => { + const splitNavigateToNextStep = () => { Navigation.navigate(ROUTES.getMoneyRequestConfirmationRoute(iouType.current, reportID.current)); }; + const moneyRequestNavigateToNextStep = (option) => { + isNewReportIDSelectedLocally.current = true; + + if (!option.reportID) { + IOU.setMoneyRequestId(iouType.current); + Navigation.navigate(ROUTES.getMoneyRequestConfirmationRoute(iouType.current, reportID.current)); + + return; + } + + IOU.setMoneyRequestId(`${iouType.current}${option.reportID}`); + Navigation.navigate(ROUTES.getMoneyRequestConfirmationRoute(iouType.current, option.reportID)); + }; + const navigateBack = (forceFallback = false) => { Navigation.goBack(ROUTES.getMoneyRequestRoute(iouType.current, reportID.current), forceFallback); }; @@ -64,7 +77,7 @@ function MoneyRequestParticipantsPage(props) { // ID in Onyx could change by initiating a new request in a separate browser tab or completing a request if (prevMoneyRequestId.current !== props.iou.id) { // The ID is cleared on completing a request. In that case, we will do nothing - if (!isDistanceRequest && props.iou.id) { + if (!isNewReportIDSelectedLocally.current && !isDistanceRequest && props.iou.id) { navigateBack(true); } return; @@ -72,7 +85,7 @@ function MoneyRequestParticipantsPage(props) { // Reset the money request Onyx if the ID in Onyx does not match the ID from params const moneyRequestId = `${iouType.current}${reportID.current}`; - const shouldReset = props.iou.id !== moneyRequestId; + const shouldReset = props.iou.id !== moneyRequestId && !isNewReportIDSelectedLocally.current; if (shouldReset) { IOU.resetMoneyRequestInfo(moneyRequestId); } @@ -94,12 +107,12 @@ function MoneyRequestParticipantsPage(props) { {({safeAreaPaddingBottomStyle}) => ( {iouType.current === CONST.IOU.MONEY_REQUEST_TYPE.SPLIT ? ( (optionsSelectorRef.current = el)} - onStepComplete={navigateToNextStep} + onStepComplete={moneyRequestNavigateToNextStep} onAddParticipants={IOU.setMoneyRequestParticipants} safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle} iouType={iouType.current} @@ -124,12 +137,11 @@ MoneyRequestParticipantsPage.displayName = 'IOUParticipantsPage'; MoneyRequestParticipantsPage.propTypes = propTypes; MoneyRequestParticipantsPage.defaultProps = defaultProps; -export default compose( - withLocalize, - withOnyx({ - iou: {key: ONYXKEYS.IOU}, - selectedTab: { - key: `${ONYXKEYS.COLLECTION.SELECTED_TAB}${CONST.TAB.RECEIPT_TAB_ID}`, - }, - }), -)(MoneyRequestParticipantsPage); +export default withOnyx({ + iou: { + key: ONYXKEYS.IOU, + }, + selectedTab: { + key: `${ONYXKEYS.COLLECTION.SELECTED_TAB}${CONST.TAB.RECEIPT_TAB_ID}`, + }, +})(MoneyRequestParticipantsPage); diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js index 693a55b14e07..e12672650a54 100755 --- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js +++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js @@ -153,7 +153,7 @@ class MoneyRequestParticipantsSelector extends Component { */ addSingleParticipant(option) { this.props.onAddParticipants([{accountID: option.accountID, login: option.login, isPolicyExpenseChat: option.isPolicyExpenseChat, reportID: option.reportID, selected: true}]); - this.props.onStepComplete(); + this.props.onStepComplete(option); } render() {