Add merchant and date fields to manual requests

src/components/MoneyRequestConfirmationList.js

@@ -1,7 +1,8 @@
-import React, {useState, useCallback, useMemo} from 'react';
+import React, {useCallback, useMemo, useReducer, useState} from 'react';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
+import {View} from 'react-native';
 import Str from 'expensify-common/lib/str';
 import styles from '../styles/styles';
 import * as ReportUtils from '../libs/ReportUtils';
@@ -14,12 +15,15 @@ import ButtonWithDropdownMenu from './ButtonWithDropdownMenu';
 import Log from '../libs/Log';
 import SettlementButton from './SettlementButton';
 import ROUTES from '../ROUTES';
-import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from './withCurrentUserPersonalDetails';
+import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from './withCurrentUserPersonalDetails';
 import * as IOUUtils from '../libs/IOUUtils';
 import MenuItemWithTopDescription from './MenuItemWithTopDescription';
 import Navigation from '../libs/Navigation/Navigation';
 import optionPropTypes from './optionPropTypes';
 import * as CurrencyUtils from '../libs/CurrencyUtils';
+import Button from './Button';
+import * as Expensicons from './Icon/Expensicons';
+import themeColors from '../styles/themes/default';
 import Image from './Image';
 import ReceiptHTML from '../../assets/images/receipt-html.png';
 import ReceiptDoc from '../../assets/images/receipt-doc.png';
@@ -53,6 +57,12 @@ const propTypes = {
     /** IOU type */
     iouType: PropTypes.string,
 
+    /** IOU date */
+    iouDate: PropTypes.string,
+
+    /** IOU merchant */
+    iouMerchant: PropTypes.string,
+
     /** Selected participants from MoneyRequestModal with login / accountID */
     selectedParticipants: PropTypes.arrayOf(optionPropTypes).isRequired,
 
@@ -113,6 +123,9 @@ function MoneyRequestConfirmationList(props) {
     const {onSendMoney, onConfirm, onSelectParticipant} = props;
     const {translate} = useLocalize();
 
+    // A flag and a toggler for showing the rest of the form fields
+    const [showAllFields, toggleShowAllFields] = useReducer((state) => !state, false);
+
     /**
      * Returns the participants with amount
      * @param {Array} participants
@@ -371,6 +384,39 @@ function MoneyRequestConfirmationList(props) {
                 style={[styles.moneyRequestMenuItem, styles.mb2]}
                 disabled={didConfirm || props.isReadOnly}
             />
+            {!showAllFields && (
+                <View style={[styles.flexRow, styles.justifyContentBetween, styles.mh3, styles.alignItemsCenter]}>
+                    <View style={[styles.shortTermsHorizontalRule, styles.flex1, styles.mr0]} />
+                    <Button
+                        small
+                        onPress={toggleShowAllFields}
+                        text={translate('common.showMore')}
+                        shouldShowRightIcon
+                        iconRight={Expensicons.DownArrow}
+                        iconFill={themeColors.icon}
+                        style={styles.mh0}
+                    />
+                    <View style={[styles.shortTermsHorizontalRule, styles.flex1, styles.ml0]} />
+                </View>
+            )}
+            {showAllFields && (
+                <>
+                    <MenuItemWithTopDescription
+                        title={props.iouDate}
+                        description={translate('common.date')}
+                        style={[styles.moneyRequestMenuItem, styles.mb2]}
+                        // Note: This component is disabled until this field is editable in next PR
+                        disabled
+                    />
+                    <MenuItemWithTopDescription
+                        title={props.iouMerchant}
+                        description={translate('common.merchant')}
+                        style={[styles.moneyRequestMenuItem, styles.mb2]}
+                        // Note: This component is disabled until this field is editable in next PR
+                        disabled
+                    />
+                </>
+            )}
         </OptionsSelector>
     );
 }

src/languages/en.js

@@ -149,6 +149,8 @@ export default {
         someone: 'Someone',
         total: 'Total',
         edit: 'Edit',
+        showMore: 'Show more',
+        merchant: 'Merchant',
     },
     anonymousReportFooter: {
         logoTagline: 'Join in on the discussion.',

src/languages/es.js

@@ -148,6 +148,8 @@ export default {
         someone: 'Alguien',
         total: 'Total',
         edit: 'Editar',
+        showMore: 'Mostrar más',
+        merchant: 'Comerciante',
     },
     anonymousReportFooter: {
         logoTagline: 'Únete a la discussion.',

src/libs/actions/IOU.js

@@ -2,6 +2,7 @@ import Onyx from 'react-native-onyx';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import Str from 'expensify-common/lib/str';
+import moment from 'moment';
 import CONST from '../../CONST';
 import ROUTES from '../../ROUTES';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -57,17 +58,28 @@ Onyx.connect({
     },
 });
 
+let currentDate = '';
+Onyx.connect({
+    key: ONYXKEYS.CURRENT_DATE,
+    callback: (val) => {
+        currentDate = val;
+    },
+});
+
 /**
  * Reset money request info from the store with its initial value
  * @param {String} id
  */
 function resetMoneyRequestInfo(id = '') {
+    const date = currentDate || moment().format('YYYY-MM-DD');
     Onyx.merge(ONYXKEYS.IOU, {
         id,
         amount: 0,
         currency: lodashGet(currentUserPersonalDetails, 'localCurrencyCode', CONST.CURRENCY.USD),
         comment: '',
         participants: [],
+        merchant: '',
+        date,
         receiptPath: '',
         receiptSource: '',
     });

src/pages/iou/steps/MoneyRequestConfirmPage.js

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useRef, useMemo} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
@@ -219,6 +219,9 @@ function MoneyRequestConfirmPage(props) {
                         canModifyParticipants={!_.isEmpty(reportID.current)}
                         policyID={props.report.policyID}
                         bankAccountRoute={ReportUtils.getBankAccountRoute(props.report)}
+                        iouMerchant={props.iou.merchant}
+                        iouModifiedMerchant={props.iou.modifiedMerchant}
+                        iouDate={props.iou.date}
                     />
                 </View>
             )}

src/styles/utilities/spacing.js

@@ -113,6 +113,10 @@ export default {
         marginLeft: 'auto',
     },
 
+    ml0: {
+        marginLeft: 0,
+    },
+
     ml1: {
         marginLeft: 4,
     },