diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index e0a590940cbc..e421dae4e37e 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/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 && (
+
+
+
+
+
+ )}
+ {showAllFields && (
+ <>
+
+
+ >
+ )}
);
}
diff --git a/src/languages/en.js b/src/languages/en.js
index 563e1f9de0c0..a53f47df28e6 100755
--- a/src/languages/en.js
+++ b/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.',
diff --git a/src/languages/es.js b/src/languages/es.js
index 91076346a5e7..f7c23a483196 100644
--- a/src/languages/es.js
+++ b/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.',
diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index 9cd28bccc6c7..ab0b76ee2208 100644
--- a/src/libs/actions/IOU.js
+++ b/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: '',
});
diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index 3703a342d00e..4dd9587828f5 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/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}
/>
)}
diff --git a/src/styles/utilities/spacing.js b/src/styles/utilities/spacing.js
index 71c5afb6a65e..a77ede807794 100644
--- a/src/styles/utilities/spacing.js
+++ b/src/styles/utilities/spacing.js
@@ -113,6 +113,10 @@ export default {
marginLeft: 'auto',
},
+ ml0: {
+ marginLeft: 0,
+ },
+
ml1: {
marginLeft: 4,
},