Add push to page support for amount field

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}
                 />
+                <MenuItemWithTopDescription
+                    shouldShowRightIcon
+                    title={this.props.comment}
+                    description={this.props.translate('iOUConfirmationList.whatsItFor')}
+                    interactive={false}
+                    onPress={() => Navigation.navigate(ROUTES.IOU_REQUEST_DESCRIPTION)}
+                    style={styles.iouMenuItem}
+                />
             </OptionsSelector>
         );
     }

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}
                                         />
                                     </AnimatedStep>
                                 )}

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}
     />
 );