Add Push-to-Page support for IOUConfirmationList

src/ONYXKEYS.js

@@ -187,6 +187,7 @@ export default {
         HOME_ADDRESS_FORM: 'homeAddressForm',
         NEW_ROOM_FORM: 'newRoomForm',
         ROOM_SETTINGS_FORM: 'roomSettingsForm',
+        MONEY_REQUEST_DESCRIPTION_FORM: 'moneyRequestDescriptionForm',
     },
 
     // Whether we should show the compose input or not

src/ROUTES.js

@@ -75,6 +75,7 @@ export default {
     getIOUSendRoute: reportID => `${IOU_SEND}/${reportID}`,
     IOU_BILL_CURRENCY: `${IOU_BILL_CURRENCY}/:reportID?`,
     IOU_REQUEST_CURRENCY: `${IOU_REQUEST_CURRENCY}/:reportID?`,
+    MONEY_REQUEST_DESCRIPTION: `${IOU_REQUEST}/description`,
     IOU_SEND_CURRENCY: `${IOU_SEND_CURRENCY}/:reportID?`,
     IOU_SEND_ADD_BANK_ACCOUNT: `${IOU_SEND}/add-bank-account`,
     IOU_SEND_ADD_DEBIT_CARD: `${IOU_SEND}/add-debit-card`,

src/components/MenuItem.js

@@ -30,7 +30,8 @@ const defaultProps = {
     shouldShowBasicTitle: false,
     shouldShowDescriptionOnTop: false,
     wrapperStyle: [],
-    style: {},
+    style: styles.popoverMenuItem,
+    titleStyle: {},
     success: false,
     icon: undefined,
     iconWidth: undefined,
@@ -59,15 +60,15 @@ const MenuItem = (props) => {
         (props.shouldShowBasicTitle ? undefined : styles.textStrong),
         (props.interactive && props.disabled ? {...styles.disabledText, ...styles.userSelectNone} : undefined),
         styles.pre,
-    ], props.style);
+    ], props.titleStyle);
     const descriptionVerticalMargin = props.shouldShowDescriptionOnTop ? styles.mb1 : styles.mt1;
     const descriptionTextStyle = StyleUtils.combineStyles([
         styles.textLabelSupporting,
         (props.icon ? styles.ml3 : undefined),
         styles.breakWord,
         styles.lineHeightNormal,
         props.title ? descriptionVerticalMargin : undefined,
-    ], props.style);
+    ]);
 
     return (
         <Pressable
@@ -83,7 +84,7 @@ const MenuItem = (props) => {
                 props.onPress(e);
             }}
             style={({hovered, pressed}) => ([
-                styles.popoverMenuItem,
+                props.style,
                 StyleUtils.getButtonBackgroundColorStyle(getButtonState(props.focused || hovered, pressed, props.success, props.disabled, props.interactive), true),
                 ..._.isArray(props.wrapperStyle) ? props.wrapperStyle : [props.wrapperStyle],
             ])}

src/components/MoneyRequestConfirmationList.js

@@ -16,6 +16,8 @@ import SettlementButton from './SettlementButton';
 import ROUTES from '../ROUTES';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from './withCurrentUserPersonalDetails';
 import * as IOUUtils from '../libs/IOUUtils';
+import MenuItemWithTopDescription from './MenuItemWithTopDescription';
+import Navigation from '../libs/Navigation/Navigation';
 import optionPropTypes from './optionPropTypes';
 
 const propTypes = {
@@ -25,12 +27,6 @@ const propTypes = {
     /** Callback to parent modal to send money */
     onSendMoney: PropTypes.func.isRequired,
 
-    /** Callback to update comment from MoneyRequestModal */
-    onUpdateComment: PropTypes.func,
-
-    /** Comment value from MoneyRequestModal */
-    comment: PropTypes.string,
-
     /** Should we request a single or multiple participant selection from user */
     hasMultipleParticipants: PropTypes.bool.isRequired,
 
@@ -68,14 +64,15 @@ const propTypes = {
     session: PropTypes.shape({
         email: PropTypes.string.isRequired,
     }),
+
+    /** Callback function to navigate to a provided step in the MoneyRequestModal flow */
+    navigateToStep: PropTypes.func.isRequired,
 };
 
 const defaultProps = {
     iou: {
         selectedCurrencyCode: CONST.CURRENCY.USD,
     },
-    onUpdateComment: null,
-    comment: '',
     iouType: CONST.IOU.MONEY_REQUEST_TYPE.REQUEST,
     canModifyParticipants: false,
     session: {
@@ -193,12 +190,7 @@ class MoneyRequestConfirmationList extends Component {
                 indexOffset: 1,
             });
         } else {
-            const formattedParticipants = OptionsListUtils.getIOUConfirmationOptionsFromParticipants(this.props.participants,
-                this.props.numberFormat(this.props.iouAmount, {
-                    style: 'currency',
-                    currency: this.props.iou.selectedCurrencyCode,
-                }));
-
+            const formattedParticipants = this.getParticipantsWithoutAmount(this.props.participants);
             sections.push({
                 title: this.props.translate('common.to'),
                 data: formattedParticipants,
@@ -272,24 +264,25 @@ class MoneyRequestConfirmationList extends Component {
         const shouldDisableButton = selectedParticipants.length === 0;
         const recipient = this.state.participants[0];
         const canModifyParticipants = this.props.canModifyParticipants && this.props.hasMultipleParticipants;
+        const formattedAmount = this.props.numberFormat(this.props.iouAmount, {
+            style: 'currency',
+            currency: this.props.iou.selectedCurrencyCode,
+        });
 
         return (
             <OptionsSelector
                 sections={this.getSections()}
-                value={this.props.comment}
+                value=""
                 onSelectRow={canModifyParticipants ? this.toggleOption : undefined}
                 onConfirmSelection={this.confirm}
                 onChangeText={this.props.onUpdateComment}
-                textInputLabel={this.props.translate('moneyRequestConfirmationList.whatsItFor')}
-                placeholderText={this.props.translate('common.optional')}
                 selectedOptions={this.getSelectedOptions()}
                 canSelectMultipleOptions={canModifyParticipants}
                 disableArrowKeysActions={!canModifyParticipants}
                 isDisabled={!canModifyParticipants}
                 boldStyle
-                autoFocus
-                shouldDelayFocus
                 shouldTextInputAppearBelowOptions
+                shouldShowTextInput={false}
                 optionHoveredStyle={canModifyParticipants ? styles.hoveredComponentBG : {}}
                 footerContent={shouldShowSettlementButton
                     ? (
@@ -309,7 +302,25 @@ class MoneyRequestConfirmationList extends Component {
                             options={this.getSplitOrRequestOptions()}
                         />
                     )}
-            />
+            >
+                <MenuItemWithTopDescription
+                    shouldShowRightIcon
+                    title={formattedAmount}
+                    description={this.props.translate('iou.amount')}
+                    interactive={false} // This is so the menu item's background doesn't change color on hover
+                    onPress={() => this.props.navigateToStep(0)}
+                    style={styles.moneyRequestMenuItem}
+                    titleStyle={styles.moneyRequestConfirmationAmount}
+                />
+                <MenuItemWithTopDescription
+                    shouldShowRightIcon
+                    title={this.props.iou.comment}
+                    description={this.props.translate('common.description')}
+                    interactive={false} // This is so the menu item's background doesn't change color on hover
+                    onPress={() => Navigation.navigate(ROUTES.MONEY_REQUEST_DESCRIPTION)}
+                    style={styles.moneyRequestMenuItem}
+                />
+            </OptionsSelector>
         );
     }
 }

src/components/OptionsSelector/BaseOptionsSelector.js

@@ -99,10 +99,12 @@ class BaseOptionsSelector extends Component {
             return;
         }
 
-        if (this.props.shouldDelayFocus) {
-            this.focusTimeout = setTimeout(() => this.textInput.focus(), CONST.ANIMATED_TRANSITION);
-        } else {
-            this.textInput.focus();
+        if (this.props.shouldShowTextInput) {
+            if (this.props.shouldDelayFocus) {
+                this.focusTimeout = setTimeout(() => this.textInput.focus(), CONST.ANIMATED_TRANSITION);
+            } else {
+                this.textInput.focus();
+            }
         }
     }
 
@@ -238,7 +240,7 @@ class BaseOptionsSelector extends Component {
      */
     selectRow(option, ref) {
         return new Promise((resolve) => {
-            if (this.props.shouldFocusOnSelectRow) {
+            if (this.props.shouldShowTextInput && this.props.shouldFocusOnSelectRow) {
                 if (this.relatedTarget && ref === this.relatedTarget) {
                     this.textInput.focus();
                     this.relatedTarget = null;
@@ -328,13 +330,15 @@ class BaseOptionsSelector extends Component {
                                         {optionsList}
                                     </View>
                                     <View style={[styles.ph5, styles.pv5, styles.flexGrow1, styles.flexShrink0]}>
-                                        {textInput}
+                                        {this.props.children}
+                                        {this.props.shouldShowTextInput && textInput}
                                     </View>
                                 </>
                             ) : (
                                 <>
                                     <View style={[styles.ph5, styles.pv3]}>
-                                        {textInput}
+                                        {this.props.children}
+                                        {this.props.shouldShowTextInput && textInput}
                                     </View>
                                     {optionsList}
                                 </>

src/components/OptionsSelector/optionsSelectorPropTypes.js

@@ -28,7 +28,7 @@ const propTypes = {
     value: PropTypes.string.isRequired,
 
     /** Callback fired when text changes */
-    onChangeText: PropTypes.func.isRequired,
+    onChangeText: PropTypes.func,
 
     /** Limits the maximum number of characters that can be entered in input field */
     maxLength: PropTypes.number,
@@ -84,6 +84,9 @@ const propTypes = {
     /** If true, the text input will be below the options in the selector, not above. */
     shouldTextInputAppearBelowOptions: PropTypes.bool,
 
+    /** If false, the text input will not be shown at all. Defaults to true */
+    shouldShowTextInput: PropTypes.bool,
+
     /** Custom content to display in the footer instead of the default button. */
     footerContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
 
@@ -125,6 +128,8 @@ const defaultProps = {
     shouldHaveOptionSeparator: false,
     initiallyFocusedOptionKey: undefined,
     maxLength: undefined,
+    shouldShowTextInput: true,
+    onChangeText: () => {},
 };
 
 export {propTypes, defaultProps};

src/components/menuItemPropTypes.js

@@ -14,6 +14,9 @@ const propTypes = {
     /** Used to apply offline styles to child text components */
     style: stylePropTypes,
 
+    /** Used to apply styles specifically to the title */
+    titleStyle: stylePropTypes,
+
     /** Function to fire when component is pressed */
     onPress: PropTypes.func,
 

src/languages/en.js

@@ -131,6 +131,7 @@ export default {
         yesContinue: 'Yes, continue',
         websiteExample: 'e.g. https://www.expensify.com',
         zipCodeExampleFormat: ({zipSampleFormat}) => (zipSampleFormat ? `e.g. ${zipSampleFormat}` : ''),
+        description: 'Description',
     },
     attachmentPicker: {
         cameraPermissionRequired: 'Camera access',

src/languages/es.js

@@ -130,6 +130,7 @@ export default {
         yesContinue: 'Sí, Continuar',
         websiteExample: 'p. ej. https://www.expensify.com',
         zipCodeExampleFormat: ({zipSampleFormat}) => (zipSampleFormat ? `p. ej. ${zipSampleFormat}` : ''),
+        description: 'Descripción',
     },
     attachmentPicker: {
         cameraPermissionRequired: 'Permiso para acceder a la cámara',

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -63,6 +63,13 @@ const IOURequestModalStackNavigator = createModalStackNavigator([{
         return IOUCurrencySelection;
     },
     name: 'IOU_Request_Currency',
+},
+{
+    getComponent: () => {
+        const MoneyRequestDescriptionPage = require('../../../pages/iou/MoneyRequestDescriptionPage').default;
+        return MoneyRequestDescriptionPage;
+    },
+    name: 'Money_Request_Description',
 }]);
 
 const IOUSendModalStackNavigator = createModalStackNavigator([{

src/libs/Navigation/linkingConfig.js

@@ -226,6 +226,7 @@ export default {
                 screens: {
                     IOU_Request_Root: ROUTES.IOU_REQUEST_WITH_REPORT_ID,
                     IOU_Request_Currency: ROUTES.IOU_REQUEST_CURRENCY,
+                    Money_Request_Description: ROUTES.MONEY_REQUEST_DESCRIPTION,
                 },
             },
             IOU_Bill: {

src/libs/actions/IOU.js

@@ -636,6 +636,15 @@ function setIOUSelectedCurrency(selectedCurrencyCode) {
     Onyx.merge(ONYXKEYS.IOU, {selectedCurrencyCode});
 }
 
+/**
+ * Sets Money Request description
+ *
+ * @param {String} comment
+ */
+function setMoneyRequestDescription(comment) {
+    Onyx.merge(ONYXKEYS.IOU, {comment});
+}
+
 /**
  * @param {Number} amount
  * @param {String} submitterPayPalMeAddress
@@ -1002,6 +1011,7 @@ export {
     payMoneyRequestElsewhere,
     payMoneyRequestViaPaypal,
     setIOUSelectedCurrency,
+    setMoneyRequestDescription,
     sendMoneyWithWallet,
     payMoneyRequestWithWallet,
 };