diff --git a/src/components/IOUConfirmationList.js b/src/components/IOUConfirmationList.js index 234fa2b5fc5f..3c6ffb3551a4 100755 --- a/src/components/IOUConfirmationList.js +++ b/src/components/IOUConfirmationList.js @@ -18,6 +18,7 @@ import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, import * as IOUUtils from '../libs/IOUUtils'; import avatarPropTypes from './avatarPropTypes'; import MenuItemWithTopDescription from './MenuItemWithTopDescription'; +import Navigation from '../libs/Navigation/Navigation'; const propTypes = { /** Callback to inform parent modal of success */ @@ -82,6 +83,8 @@ const propTypes = { session: PropTypes.shape({ email: PropTypes.string.isRequired, }), + + navigateToStep: PropTypes.func, }; const defaultProps = { @@ -303,6 +306,7 @@ class IOUConfirmationList extends Component { autoFocus shouldDelayFocus shouldTextInputAppearBelowOptions + shouldShowTextInput={false} optionHoveredStyle={canModifyParticipants ? styles.hoveredComponentBG : {}} footerContent={shouldShowSettlementButton ? ( @@ -328,10 +332,18 @@ class IOUConfirmationList extends Component { title={formattedAmount} description={this.props.translate('iou.amount')} interactive={false} - onPress={() => {}} // TODO: Make this go to edit amount! + onPress={() => this.props.navigateToStep(0)} // TODO: Make this go to edit amount! style={styles.iouMenuItem} titleStyle={styles.iouConfirmationAmount} /> + Navigation.navigate(ROUTES.IOU_REQUEST_DESCRIPTION)} + style={styles.iouMenuItem} + /> ); } diff --git a/src/pages/iou/IOUDescriptionPage.js b/src/pages/iou/IOUDescriptionPage.js new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/src/pages/iou/MoneyRequestModal.js b/src/pages/iou/MoneyRequestModal.js index 27139f3e2bcf..73ecfc0a7827 100644 --- a/src/pages/iou/MoneyRequestModal.js +++ b/src/pages/iou/MoneyRequestModal.js @@ -224,6 +224,24 @@ const MoneyRequestModal = (props) => { // eslint-disable-next-line react-hooks/exhaustive-deps -- props does not need to be a dependency as it will always exist }, [amount, currentStepIndex, props.hasMultipleParticipants, props.iou.selectedCurrencyCode, props.iouType, props.numberFormat, steps]); + /** + * Navigate to a provided step. + * + * @type {(function(*): void)|*} + */ + const navigateToStep = useCallback((stepIndex) => { + if (stepIndex < 0 || stepIndex > steps.length) { + return; + } + + if (currentStepIndex === stepIndex) { + return; + } + + setPreviousStepIndex(currentStepIndex); + setCurrentStepIndex(stepIndex); + }, [currentStepIndex, steps.length]); + /** * Navigate to the previous request step if possible */ @@ -244,6 +262,13 @@ const MoneyRequestModal = (props) => { return; } + // If we're coming from the confirm step, it means we were editing something so go back to the confirm step. + const confirmIndex = _.indexOf(steps, Steps.IOUConfirm); + if (previousStepIndex === confirmIndex) { + navigateToStep(confirmIndex); + return; + } + setPreviousStepIndex(currentStepIndex); setCurrentStepIndex(currentStepIndex + 1); }, [currentStepIndex, steps.length]); @@ -416,6 +441,7 @@ const MoneyRequestModal = (props) => { // split rather than forcing the user to create a new group, just for that expense. The reportID is empty, when the action was initiated from // the floating-action-button (since it is something that exists outside the context of a report). canModifyParticipants={!_.isEmpty(reportID)} + navigateToStep={navigateToStep} /> )} diff --git a/src/pages/iou/steps/IOUConfirmPage.js b/src/pages/iou/steps/IOUConfirmPage.js index a409daf9479a..e1443a2fca4c 100644 --- a/src/pages/iou/steps/IOUConfirmPage.js +++ b/src/pages/iou/steps/IOUConfirmPage.js @@ -45,6 +45,8 @@ const propTypes = { /** Can the participants be modified or not */ canModifyParticipants: PropTypes.bool, + + navigateToStep: PropTypes.func.isRequired, }; const defaultProps = { @@ -65,6 +67,7 @@ const IOUConfirmPage = props => ( onSendMoney={props.onSendMoney} iouType={props.iouType} canModifyParticipants={props.canModifyParticipants} + navigateToStep={props.navigateToStep} /> );