From 92ecc77b86f7c9831b33cabb42cecbcb8692b333 Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Fri, 18 Aug 2023 00:32:15 +0100
Subject: [PATCH 01/22] Add getMerchant method

---
 src/libs/TransactionUtils.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/libs/TransactionUtils.js b/src/libs/TransactionUtils.js
index 90b6ca72bd4a..a4c0b1b554e6 100644
--- a/src/libs/TransactionUtils.js
+++ b/src/libs/TransactionUtils.js
@@ -167,6 +167,16 @@ function getCurrency(transaction) {
     return lodashGet(transaction, 'currency', CONST.CURRENCY.USD);
 }
 
+/**
+ * Return the merchant field from the transaction, return the modifiedMerchant if present.
+ *
+ * @param {Object} transaction
+ * @returns {String}
+ */
+function getMerchant(transaction) {
+    return lodashGet(transaction, 'modifiedMerchant', null) || lodashGet(transaction, 'merchant', '');
+}
+
 /**
  * Return the created field from the transaction, return the modifiedCreated if present.
  *
@@ -196,4 +206,4 @@ function getAllReportTransactions(reportID) {
     return _.filter(allTransactions, (transaction) => transaction.reportID === reportID);
 }
 
-export {buildOptimisticTransaction, getUpdatedTransaction, getTransaction, getDescription, getAmount, getCurrency, getCreated, getLinkedTransaction, getAllReportTransactions};
+export {buildOptimisticTransaction, getUpdatedTransaction, getTransaction, getDescription, getAmount, getCurrency, getMerchant, getCreated, getLinkedTransaction, getAllReportTransactions};

From 4fc0e513ae096d0c01ef968af1667823cc99b04d Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Fri, 18 Aug 2023 00:34:58 +0100
Subject: [PATCH 02/22] Set up money request merchant routes

---
 src/ONYXKEYS.js                                          | 1 +
 src/ROUTES.js                                            | 2 ++
 src/libs/Navigation/AppNavigator/ModalStackNavigators.js | 7 +++++++
 src/libs/Navigation/linkingConfig.js                     | 1 +
 4 files changed, 11 insertions(+)

diff --git a/src/ONYXKEYS.js b/src/ONYXKEYS.js
index 7ef5c68c3850..96e77347face 100755
--- a/src/ONYXKEYS.js
+++ b/src/ONYXKEYS.js
@@ -221,6 +221,7 @@ export default {
         NEW_TASK_FORM: 'newTaskForm',
         EDIT_TASK_FORM: 'editTaskForm',
         MONEY_REQUEST_DESCRIPTION_FORM: 'moneyRequestDescriptionForm',
+        MONEY_REQUEST_MERCHANT_FORM: 'moneyRequestMerchantForm',
         MONEY_REQUEST_AMOUNT_FORM: 'moneyRequestAmountForm',
         MONEY_REQUEST_CREATED_FORM: 'moneyRequestCreatedForm',
         NEW_CONTACT_METHOD_FORM: 'newContactMethodForm',
diff --git a/src/ROUTES.js b/src/ROUTES.js
index 6541bdfc2dab..7292839a8d1e 100644
--- a/src/ROUTES.js
+++ b/src/ROUTES.js
@@ -95,6 +95,7 @@ export default {
     MONEY_REQUEST_CONFIRMATION: ':iouType/new/confirmation/:reportID?',
     MONEY_REQUEST_CURRENCY: ':iouType/new/currency/:reportID?',
     MONEY_REQUEST_DESCRIPTION: ':iouType/new/description/:reportID?',
+    MONEY_REQUEST_MERCHANT: ':iouType/new/merchant/:reportID?',
     MONEY_REQUEST_MANUAL_TAB: ':iouType/new/:reportID?/manual',
     MONEY_REQUEST_SCAN_TAB: ':iouType/new/:reportID?/scan',
     MONEY_REQUEST_DISTANCE_TAB: ':iouType/new/:reportID?/distance',
@@ -108,6 +109,7 @@ export default {
     getMoneyRequestConfirmationRoute: (iouType, reportID = '') => `${iouType}/new/confirmation/${reportID}`,
     getMoneyRequestCurrencyRoute: (iouType, reportID = '', currency, backTo) => `${iouType}/new/currency/${reportID}?currency=${currency}&backTo=${backTo}`,
     getMoneyRequestDescriptionRoute: (iouType, reportID = '') => `${iouType}/new/description/${reportID}`,
+    getMoneyRequestMerchantRoute: (iouType, reportID = '') => `${iouType}/new/merchant/${reportID}`,
     getMoneyRequestDistanceTabRoute: (iouType, reportID = '') => `${iouType}/new/${reportID}/distance`,
     getMoneyRequestWaypointRoute: (iouType, waypointIndex) => `${iouType}/new/waypoint/${waypointIndex}`,
     SPLIT_BILL_DETAILS: `r/:reportID/split/:reportActionID`,
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
index 03d1a9196a4e..a8765f43dbe7 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
@@ -76,6 +76,13 @@ const MoneyRequestModalStackNavigator = createModalStackNavigator([
         },
         name: 'Money_Request_Description',
     },
+    {
+        getComponent: () => {
+            const MoneyRequestMerchantPage = require('../../../pages/iou/MoneyRequestMerchantPage').default;
+            return MoneyRequestMerchantPage;
+        },
+        name: 'Money_Request_Merchant',
+    },
     {
         getComponent: () => {
             const AddPersonalBankAccountPage = require('../../../pages/AddPersonalBankAccountPage').default;
diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js
index ae85699b844d..e80c9f4b9d9d 100644
--- a/src/libs/Navigation/linkingConfig.js
+++ b/src/libs/Navigation/linkingConfig.js
@@ -325,6 +325,7 @@ export default {
                             Money_Request_Confirmation: ROUTES.MONEY_REQUEST_CONFIRMATION,
                             Money_Request_Currency: ROUTES.MONEY_REQUEST_CURRENCY,
                             Money_Request_Description: ROUTES.MONEY_REQUEST_DESCRIPTION,
+                            Money_Request_Merchant: ROUTES.MONEY_REQUEST_MERCHANT,
                             Money_Request_Waypoint: ROUTES.MONEY_REQUEST_WAYPOINT,
                             IOU_Send_Enable_Payments: ROUTES.IOU_SEND_ENABLE_PAYMENTS,
                             IOU_Send_Add_Bank_Account: ROUTES.IOU_SEND_ADD_BANK_ACCOUNT,

From 86c2be13ddf148ea4b8edc514372a699c7e05567 Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Fri, 18 Aug 2023 00:44:05 +0100
Subject: [PATCH 03/22] Add the MoneyRequestMerchantPage pagge

---
 src/libs/actions/IOU.js                   |   8 ++
 src/pages/iou/MoneyRequestMerchantPage.js | 136 ++++++++++++++++++++++
 2 files changed, 144 insertions(+)
 create mode 100644 src/pages/iou/MoneyRequestMerchantPage.js

diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index 13a9af5b42f6..603091f8705f 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -1705,6 +1705,13 @@ function setMoneyRequestDescription(comment) {
     Onyx.merge(ONYXKEYS.IOU, {comment: comment.trim()});
 }
 
+/**
+ * @param {String} merchant
+ */
+function setMoneyRequestMerchant(merchant) {
+    Onyx.merge(ONYXKEYS.IOU, {merchant: merchant.trim()});
+}
+
 /**
  * @param {Object[]} participants
  */
@@ -1779,6 +1786,7 @@ export {
     setMoneyRequestAmount,
     setMoneyRequestCurrency,
     setMoneyRequestDescription,
+    setMoneyRequestMerchant,
     setMoneyRequestParticipants,
     setMoneyRequestReceipt,
     createEmptyTransaction,
diff --git a/src/pages/iou/MoneyRequestMerchantPage.js b/src/pages/iou/MoneyRequestMerchantPage.js
new file mode 100644
index 000000000000..c051a935ad83
--- /dev/null
+++ b/src/pages/iou/MoneyRequestMerchantPage.js
@@ -0,0 +1,136 @@
+import React, {Component} from 'react';
+import {View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
+import PropTypes from 'prop-types';
+import _ from 'underscore';
+import lodashGet from 'lodash/get';
+import TextInput from '../../components/TextInput';
+import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
+import ScreenWrapper from '../../components/ScreenWrapper';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
+import Form from '../../components/Form';
+import ONYXKEYS from '../../ONYXKEYS';
+import styles from '../../styles/styles';
+import Navigation from '../../libs/Navigation/Navigation';
+import ROUTES from '../../ROUTES';
+import compose from '../../libs/compose';
+import * as IOU from '../../libs/actions/IOU';
+import optionPropTypes from '../../components/optionPropTypes';
+import CONST from '../../CONST';
+
+const propTypes = {
+    ...withLocalizePropTypes,
+
+    /** Onyx Props */
+    /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
+    iou: PropTypes.shape({
+        id: PropTypes.string,
+        amount: PropTypes.number,
+        comment: PropTypes.string,
+        merchant: PropTypes.string,
+        participants: PropTypes.arrayOf(optionPropTypes),
+    }),
+};
+
+const defaultProps = {
+    iou: {
+        id: '',
+        amount: 0,
+        comment: '',
+        merchant: '',
+        participants: [],
+    },
+};
+
+class MoneyRequestMerchantPage extends Component {
+    constructor(props) {
+        super(props);
+
+        this.updateMerchant = this.updateMerchant.bind(this);
+        this.navigateBack = this.navigateBack.bind(this);
+        this.iouType = lodashGet(props.route, 'params.iouType', '');
+        this.reportID = lodashGet(props.route, 'params.reportID', '');
+    }
+
+    componentDidMount() {
+        const moneyRequestId = `${this.iouType}${this.reportID}`;
+        const shouldReset = this.props.iou.id !== moneyRequestId;
+        if (shouldReset) {
+            IOU.resetMoneyRequestInfo(moneyRequestId);
+        }
+
+        if (_.isEmpty(this.props.iou.participants) || (this.props.iou.amount === 0 && !this.props.iou.receiptPath) || shouldReset) {
+            Navigation.goBack(ROUTES.getMoneyRequestRoute(this.iouType, this.reportID), true);
+        }
+    }
+
+    // eslint-disable-next-line rulesdir/prefer-early-return
+    componentDidUpdate(prevProps) {
+        // ID in Onyx could change by initiating a new request in a separate browser tab or completing a request
+        if (_.isEmpty(this.props.iou.participants) || (this.props.iou.amount === 0 && !this.props.iou.receiptPath) || prevProps.iou.id !== this.props.iou.id) {
+            // The ID is cleared on completing a request. In that case, we will do nothing.
+            if (this.props.iou.id) {
+                Navigation.goBack(ROUTES.getMoneyRequestRoute(this.iouType, this.reportID), true);
+            }
+        }
+    }
+
+    navigateBack() {
+        Navigation.goBack(ROUTES.getMoneyRequestConfirmationRoute(this.iouType, this.reportID));
+    }
+
+    /**
+     * Sets the money request comment by saving it to Onyx.
+     *
+     * @param {Object} value
+     * @param {String} value.moneyRequestMerchant
+     */
+    updateMerchant(value) {
+        IOU.setMoneyRequestMerchant(value.moneyRequestMerchant);
+        this.navigateBack();
+    }
+
+    render() {
+        return (
+            <ScreenWrapper
+                includeSafeAreaPaddingBottom={false}
+                shouldEnableMaxHeight
+                onEntryTransitionEnd={() => this.descriptionInputRef && this.descriptionInputRef.focus()}
+            >
+                <HeaderWithBackButton
+                    title={this.props.translate('common.merchant')}
+                    onBackButtonPress={this.navigateBack}
+                />
+                <Form
+                    style={[styles.flexGrow1, styles.ph5]}
+                    formID={ONYXKEYS.FORMS.MONEY_REQUEST_MERCHANT_FORM}
+                    onSubmit={this.updateMerchant}
+                    submitButtonText={this.props.translate('common.save')}
+                    enabledWhenOffline
+                >
+                    <View style={styles.mb4}>
+                        <TextInput
+                            inputID="moneyRequestMerchant"
+                            name="moneyRequestMerchant"
+                            defaultValue={this.props.iou.comment}
+                            label={this.props.translate('common.merchant')}
+                            accessibilityLabel={this.props.translate('common.merchant')}
+                            accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
+                            ref={(el) => (this.descriptionInputRef = el)}
+                        />
+                    </View>
+                </Form>
+            </ScreenWrapper>
+        );
+    }
+}
+
+MoneyRequestMerchantPage.propTypes = propTypes;
+MoneyRequestMerchantPage.defaultProps = defaultProps;
+
+export default compose(
+    withLocalize,
+    withOnyx({
+        iou: {key: ONYXKEYS.IOU},
+    }),
+)(MoneyRequestMerchantPage);

From ce56753111a2aad71871b3a61f98bef53c633056 Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Fri, 18 Aug 2023 00:53:50 +0100
Subject: [PATCH 04/22] Enable the merchant field

---
 src/components/MoneyRequestConfirmationList.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index 2cc458d0e4ad..fd1a9d8cfbdc 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -413,11 +413,12 @@ function MoneyRequestConfirmationList(props) {
                         disabled
                     />
                     <MenuItemWithTopDescription
+                        shouldShowRightIcon={!props.isReadOnly}
                         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
+                        onPress={() => Navigation.navigate(ROUTES.getMoneyRequestMerchantRoute(props.iouType, props.reportID))}
+                        disabled={didConfirm || props.isReadOnly}
                     />
                 </>
             )}

From 2c5f13eb8c1c574574ed081a0e2ce7fe13e2ea4c Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Fri, 18 Aug 2023 01:09:27 +0100
Subject: [PATCH 05/22] Create MoneyRequestCreatedPage and relevant routes

---
 src/ROUTES.js                                 |   2 +
 .../AppNavigator/ModalStackNavigators.js      |   7 +
 src/libs/Navigation/linkingConfig.js          |   1 +
 src/libs/actions/IOU.js                       |   8 ++
 src/pages/iou/MoneyRequestCreatedPage.js      | 129 ++++++++++++++++++
 5 files changed, 147 insertions(+)
 create mode 100644 src/pages/iou/MoneyRequestCreatedPage.js

diff --git a/src/ROUTES.js b/src/ROUTES.js
index 7292839a8d1e..207790e31d62 100644
--- a/src/ROUTES.js
+++ b/src/ROUTES.js
@@ -93,6 +93,7 @@ export default {
     MONEY_REQUEST_AMOUNT: ':iouType/new/amount/:reportID?',
     MONEY_REQUEST_PARTICIPANTS: ':iouType/new/participants/:reportID?',
     MONEY_REQUEST_CONFIRMATION: ':iouType/new/confirmation/:reportID?',
+    MONEY_REQUEST_CREATED: ':iouType/new/date/:reportID?',
     MONEY_REQUEST_CURRENCY: ':iouType/new/currency/:reportID?',
     MONEY_REQUEST_DESCRIPTION: ':iouType/new/description/:reportID?',
     MONEY_REQUEST_MERCHANT: ':iouType/new/merchant/:reportID?',
@@ -107,6 +108,7 @@ export default {
     getMoneyRequestAmountRoute: (iouType, reportID = '') => `${iouType}/new/amount/${reportID}`,
     getMoneyRequestParticipantsRoute: (iouType, reportID = '') => `${iouType}/new/participants/${reportID}`,
     getMoneyRequestConfirmationRoute: (iouType, reportID = '') => `${iouType}/new/confirmation/${reportID}`,
+    getMoneyRequestCreatedRoute: (iouType, reportID = '') => `${iouType}/new/date/${reportID}`,
     getMoneyRequestCurrencyRoute: (iouType, reportID = '', currency, backTo) => `${iouType}/new/currency/${reportID}?currency=${currency}&backTo=${backTo}`,
     getMoneyRequestDescriptionRoute: (iouType, reportID = '') => `${iouType}/new/description/${reportID}`,
     getMoneyRequestMerchantRoute: (iouType, reportID = '') => `${iouType}/new/merchant/${reportID}`,
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
index a8765f43dbe7..940569464229 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
@@ -69,6 +69,13 @@ const MoneyRequestModalStackNavigator = createModalStackNavigator([
         },
         name: 'Money_Request_Currency',
     },
+    {
+        getComponent: () => {
+            const MoneyRequestCreatedPage = require('../../../pages/iou/MoneyRequestCreatedPage').default;
+            return MoneyRequestCreatedPage;
+        },
+        name: 'Money_Request_Created',
+    },
     {
         getComponent: () => {
             const MoneyRequestDescriptionPage = require('../../../pages/iou/MoneyRequestDescriptionPage').default;
diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js
index e80c9f4b9d9d..3e7ed0b5fff4 100644
--- a/src/libs/Navigation/linkingConfig.js
+++ b/src/libs/Navigation/linkingConfig.js
@@ -323,6 +323,7 @@ export default {
                             Money_Request_Amount: ROUTES.MONEY_REQUEST_AMOUNT,
                             Money_Request_Participants: ROUTES.MONEY_REQUEST_PARTICIPANTS,
                             Money_Request_Confirmation: ROUTES.MONEY_REQUEST_CONFIRMATION,
+                            Money_Request_Created: ROUTES.MONEY_REQUEST_CREATED,
                             Money_Request_Currency: ROUTES.MONEY_REQUEST_CURRENCY,
                             Money_Request_Description: ROUTES.MONEY_REQUEST_DESCRIPTION,
                             Money_Request_Merchant: ROUTES.MONEY_REQUEST_MERCHANT,
diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index 603091f8705f..b8b03ebc1632 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -1691,6 +1691,13 @@ function setMoneyRequestAmount(amount) {
     Onyx.merge(ONYXKEYS.IOU, {amount});
 }
 
+/**
+ * @param {String} created
+ */
+function setMoneyRequestCreated(created) {
+    Onyx.merge(ONYXKEYS.IOU, {created});
+}
+
 /**
  * @param {String} currency
  */
@@ -1784,6 +1791,7 @@ export {
     resetMoneyRequestInfo,
     setMoneyRequestId,
     setMoneyRequestAmount,
+    setMoneyRequestCreated,
     setMoneyRequestCurrency,
     setMoneyRequestDescription,
     setMoneyRequestMerchant,
diff --git a/src/pages/iou/MoneyRequestCreatedPage.js b/src/pages/iou/MoneyRequestCreatedPage.js
new file mode 100644
index 000000000000..1997343a713e
--- /dev/null
+++ b/src/pages/iou/MoneyRequestCreatedPage.js
@@ -0,0 +1,129 @@
+import React, {Component} from 'react';
+import {View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
+import PropTypes from 'prop-types';
+import _ from 'underscore';
+import lodashGet from 'lodash/get';
+import TextInput from '../../components/TextInput';
+import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
+import ScreenWrapper from '../../components/ScreenWrapper';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
+import Form from '../../components/Form';
+import ONYXKEYS from '../../ONYXKEYS';
+import styles from '../../styles/styles';
+import Navigation from '../../libs/Navigation/Navigation';
+import ROUTES from '../../ROUTES';
+import compose from '../../libs/compose';
+import * as IOU from '../../libs/actions/IOU';
+import optionPropTypes from '../../components/optionPropTypes';
+import CONST from '../../CONST';
+import NewDatePicker from '../../components/NewDatePicker';
+
+const propTypes = {
+    ...withLocalizePropTypes,
+
+    /** Onyx Props */
+    /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
+    iou: PropTypes.shape({
+        id: PropTypes.string,
+        amount: PropTypes.number,
+        comment: PropTypes.string,
+        participants: PropTypes.arrayOf(optionPropTypes),
+    }),
+};
+
+const defaultProps = {
+    iou: {
+        id: '',
+        amount: 0,
+        comment: '',
+        participants: [],
+    },
+};
+
+class MoneyRequestCreatedPage extends Component {
+    constructor(props) {
+        super(props);
+
+        this.updateDate = this.updateDate.bind(this);
+        this.navigateBack = this.navigateBack.bind(this);
+        this.iouType = lodashGet(props.route, 'params.iouType', '');
+        this.reportID = lodashGet(props.route, 'params.reportID', '');
+    }
+
+    componentDidMount() {
+        const moneyRequestId = `${this.iouType}${this.reportID}`;
+        const shouldReset = this.props.iou.id !== moneyRequestId;
+        if (shouldReset) {
+            IOU.resetMoneyRequestInfo(moneyRequestId);
+        }
+
+        if (_.isEmpty(this.props.iou.participants) || (this.props.iou.amount === 0 && !this.props.iou.receiptPath) || shouldReset) {
+            Navigation.goBack(ROUTES.getMoneyRequestRoute(this.iouType, this.reportID), true);
+        }
+    }
+
+    // eslint-disable-next-line rulesdir/prefer-early-return
+    componentDidUpdate(prevProps) {
+        // ID in Onyx could change by initiating a new request in a separate browser tab or completing a request
+        if (_.isEmpty(this.props.iou.participants) || (this.props.iou.amount === 0 && !this.props.iou.receiptPath) || prevProps.iou.id !== this.props.iou.id) {
+            // The ID is cleared on completing a request. In that case, we will do nothing.
+            if (this.props.iou.id) {
+                Navigation.goBack(ROUTES.getMoneyRequestRoute(this.iouType, this.reportID), true);
+            }
+        }
+    }
+
+    navigateBack() {
+        Navigation.goBack(ROUTES.getMoneyRequestConfirmationRoute(this.iouType, this.reportID));
+    }
+
+    /**
+     * Sets the money request comment by saving it to Onyx.
+     *
+     * @param {Object} value
+     * @param {String} value.moneyRequestCreated
+     */
+    updateDate(value) {
+        IOU.setMoneyRequestCreated(value.moneyRequestCreated);
+        this.navigateBack();
+    }
+
+    render() {
+        return (
+            <ScreenWrapper
+                includeSafeAreaPaddingBottom={false}
+                shouldEnableMaxHeight
+            >
+                <HeaderWithBackButton
+                    title={this.props.translate('common.date')}
+                    onBackButtonPress={this.navigateBack}
+                />
+                <Form
+                    style={[styles.flexGrow1, styles.ph5]}
+                    formID={ONYXKEYS.FORMS.MONEY_REQUEST_CREATED_FORM}
+                    onSubmit={this.updateComment}
+                    submitButtonText={this.props.translate('common.save')}
+                    enabledWhenOffline
+                >
+                    <NewDatePicker
+                        inputID="moneyRequestCreated"
+                        label={this.props.translate('common.date')}
+                        defaultValue={new Date()}
+                        maxDate={new Date()}
+                    />
+                </Form>
+            </ScreenWrapper>
+        );
+    }
+}
+
+MoneyRequestCreatedPage.propTypes = propTypes;
+MoneyRequestCreatedPage.defaultProps = defaultProps;
+
+export default compose(
+    withLocalize,
+    withOnyx({
+        iou: {key: ONYXKEYS.IOU},
+    }),
+)(MoneyRequestCreatedPage);

From b76949a0f3d2ff8814f01b5d18f3910118abc3dc Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Fri, 18 Aug 2023 01:42:45 +0100
Subject: [PATCH 06/22] Implementing the ability to set date for new request

---
 src/components/MoneyRequestConfirmationList.js |  5 +++--
 src/pages/iou/MoneyRequestCreatedPage.js       | 10 +++++-----
 src/pages/iou/MoneyRequestMerchantPage.js      |  7 ++++---
 src/pages/iou/ReceiptSelector/index.native.js  |  6 +++++-
 src/pages/iou/steps/MoneyRequestConfirmPage.js | 11 ++++++++---
 src/pages/iou/steps/NewRequestAmountPage.js    |  4 ++++
 6 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index fd1a9d8cfbdc..bd05cf613ea0 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -406,11 +406,12 @@ function MoneyRequestConfirmationList(props) {
             {showAllFields && (
                 <>
                     <MenuItemWithTopDescription
+                        shouldShowRightIcon={!props.isReadOnly}
                         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
+                        onPress={() => Navigation.navigate(ROUTES.getMoneyRequestCreatedRoute(props.iouType, props.reportID))}
+                        disabled={didConfirm || props.isReadOnly}
                     />
                     <MenuItemWithTopDescription
                         shouldShowRightIcon={!props.isReadOnly}
diff --git a/src/pages/iou/MoneyRequestCreatedPage.js b/src/pages/iou/MoneyRequestCreatedPage.js
index 1997343a713e..2e75063a539c 100644
--- a/src/pages/iou/MoneyRequestCreatedPage.js
+++ b/src/pages/iou/MoneyRequestCreatedPage.js
@@ -1,10 +1,9 @@
 import React, {Component} from 'react';
-import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
-import TextInput from '../../components/TextInput';
+import CONST from '../../CONST';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import HeaderWithBackButton from '../../components/HeaderWithBackButton';
@@ -16,7 +15,6 @@ import ROUTES from '../../ROUTES';
 import compose from '../../libs/compose';
 import * as IOU from '../../libs/actions/IOU';
 import optionPropTypes from '../../components/optionPropTypes';
-import CONST from '../../CONST';
 import NewDatePicker from '../../components/NewDatePicker';
 
 const propTypes = {
@@ -28,6 +26,7 @@ const propTypes = {
         id: PropTypes.string,
         amount: PropTypes.number,
         comment: PropTypes.string,
+        created: PropTypes.string,
         participants: PropTypes.arrayOf(optionPropTypes),
     }),
 };
@@ -37,6 +36,7 @@ const defaultProps = {
         id: '',
         amount: 0,
         comment: '',
+        created: '',
         participants: [],
     },
 };
@@ -102,14 +102,14 @@ class MoneyRequestCreatedPage extends Component {
                 <Form
                     style={[styles.flexGrow1, styles.ph5]}
                     formID={ONYXKEYS.FORMS.MONEY_REQUEST_CREATED_FORM}
-                    onSubmit={this.updateComment}
+                    onSubmit={this.updateDate}
                     submitButtonText={this.props.translate('common.save')}
                     enabledWhenOffline
                 >
                     <NewDatePicker
                         inputID="moneyRequestCreated"
                         label={this.props.translate('common.date')}
-                        defaultValue={new Date()}
+                        defaultValue={this.props.iou.created}
                         maxDate={new Date()}
                     />
                 </Form>
diff --git a/src/pages/iou/MoneyRequestMerchantPage.js b/src/pages/iou/MoneyRequestMerchantPage.js
index c051a935ad83..5d39c0904f14 100644
--- a/src/pages/iou/MoneyRequestMerchantPage.js
+++ b/src/pages/iou/MoneyRequestMerchantPage.js
@@ -27,6 +27,7 @@ const propTypes = {
         id: PropTypes.string,
         amount: PropTypes.number,
         comment: PropTypes.string,
+        created: PropTypes.string,
         merchant: PropTypes.string,
         participants: PropTypes.arrayOf(optionPropTypes),
     }),
@@ -95,7 +96,7 @@ class MoneyRequestMerchantPage extends Component {
             <ScreenWrapper
                 includeSafeAreaPaddingBottom={false}
                 shouldEnableMaxHeight
-                onEntryTransitionEnd={() => this.descriptionInputRef && this.descriptionInputRef.focus()}
+                onEntryTransitionEnd={() => this.merchantInputRef && this.merchantInputRef.focus()}
             >
                 <HeaderWithBackButton
                     title={this.props.translate('common.merchant')}
@@ -112,11 +113,11 @@ class MoneyRequestMerchantPage extends Component {
                         <TextInput
                             inputID="moneyRequestMerchant"
                             name="moneyRequestMerchant"
-                            defaultValue={this.props.iou.comment}
+                            defaultValue={this.props.iou.merchant}
                             label={this.props.translate('common.merchant')}
                             accessibilityLabel={this.props.translate('common.merchant')}
                             accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
-                            ref={(el) => (this.descriptionInputRef = el)}
+                            ref={(el) => (this.merchantInputRef = el)}
                         />
                     </View>
                 </Form>
diff --git a/src/pages/iou/ReceiptSelector/index.native.js b/src/pages/iou/ReceiptSelector/index.native.js
index 7eeab6e493bd..730e5d1e1dfb 100644
--- a/src/pages/iou/ReceiptSelector/index.native.js
+++ b/src/pages/iou/ReceiptSelector/index.native.js
@@ -38,7 +38,9 @@ const propTypes = {
     iou: PropTypes.shape({
         id: PropTypes.string,
         amount: PropTypes.number,
-        currency: PropTypes.string,
+        comment: PropTypes.string,
+        created: PropTypes.string,
+        merchant: PropTypes.string,
         participants: PropTypes.arrayOf(participantPropTypes),
     }),
 };
@@ -54,6 +56,8 @@ const defaultProps = {
     iou: {
         id: '',
         amount: 0,
+        merchant: '',
+        created: '',
         currency: CONST.CURRENCY.USD,
         participants: [],
     },
diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index a81e3a8bf825..753d03e55d4e 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -2,6 +2,7 @@ import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
+import {format} from 'date-fns';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import MoneyRequestConfirmationList from '../../../components/MoneyRequestConfirmationList';
@@ -30,9 +31,10 @@ const propTypes = {
     iou: PropTypes.shape({
         id: PropTypes.string,
         amount: PropTypes.number,
-        receiptPath: PropTypes.string,
-        currency: PropTypes.string,
         comment: PropTypes.string,
+        created: PropTypes.string,
+        currency: PropTypes.string,
+        merchant: PropTypes.string,
         participants: PropTypes.arrayOf(
             PropTypes.shape({
                 accountID: PropTypes.number,
@@ -42,6 +44,7 @@ const propTypes = {
                 selected: PropTypes.bool,
             }),
         ),
+        receiptPath: PropTypes.string,
     }),
 
     /** Personal details of all users */
@@ -58,6 +61,8 @@ const defaultProps = {
         amount: 0,
         currency: CONST.CURRENCY.USD,
         comment: '',
+        merchant: '',
+        created: format(new Date(), CONST.DATE.FNS_FORMAT_STRING),
         participants: [],
     },
     ...withCurrentUserPersonalDetailsDefaultProps,
@@ -260,7 +265,7 @@ function MoneyRequestConfirmPage(props) {
                         bankAccountRoute={ReportUtils.getBankAccountRoute(props.report)}
                         iouMerchant={props.iou.merchant}
                         iouModifiedMerchant={props.iou.modifiedMerchant}
-                        iouDate={props.iou.date}
+                        iouDate={props.iou.created}
                     />
                 </View>
             )}
diff --git a/src/pages/iou/steps/NewRequestAmountPage.js b/src/pages/iou/steps/NewRequestAmountPage.js
index 6eda79654e77..e0199d72b01a 100644
--- a/src/pages/iou/steps/NewRequestAmountPage.js
+++ b/src/pages/iou/steps/NewRequestAmountPage.js
@@ -37,6 +37,8 @@ const propTypes = {
         id: PropTypes.string,
         amount: PropTypes.number,
         currency: PropTypes.string,
+        merchant: PropTypes.string,
+        created: PropTypes.string,
         participants: PropTypes.arrayOf(
             PropTypes.shape({
                 accountID: PropTypes.number,
@@ -60,6 +62,8 @@ const defaultProps = {
     iou: {
         id: '',
         amount: 0,
+        created: '',
+        merchant: '',
         currency: CONST.CURRENCY.USD,
         participants: [],
     },

From c61a43fd882f1151caa3d04b16149ce113e395f5 Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Fri, 18 Aug 2023 02:04:57 +0100
Subject: [PATCH 07/22] Make sure the created is also reset

---
 src/components/MoneyRequestConfirmationList.js | 3 ++-
 src/libs/actions/IOU.js                        | 4 ++--
 src/pages/iou/MoneyRequestCreatedPage.js       | 5 +++--
 src/pages/iou/steps/MoneyRequestConfirmPage.js | 3 +--
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index bd05cf613ea0..8c9e849b5e36 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -1,6 +1,7 @@
 import React, {useCallback, useMemo, useReducer, useState} from 'react';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
+import {format} from 'date-fns';
 import _ from 'underscore';
 import {View} from 'react-native';
 import Str from 'expensify-common/lib/str';
@@ -407,7 +408,7 @@ function MoneyRequestConfirmationList(props) {
                 <>
                     <MenuItemWithTopDescription
                         shouldShowRightIcon={!props.isReadOnly}
-                        title={props.iouDate}
+                        title={props.iouDate || format(new Date(), CONST.DATE.FNS_FORMAT_STRING)}
                         description={translate('common.date')}
                         style={[styles.moneyRequestMenuItem, styles.mb2]}
                         onPress={() => Navigation.navigate(ROUTES.getMoneyRequestCreatedRoute(props.iouType, props.reportID))}
diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index b8b03ebc1632..3baaedee585d 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -72,7 +72,7 @@ Onyx.connect({
  * @param {String} id
  */
 function resetMoneyRequestInfo(id = '') {
-    const date = currentDate || moment().format('YYYY-MM-DD');
+    const created = currentDate || moment().format('YYYY-MM-DD');
     Onyx.merge(ONYXKEYS.IOU, {
         id,
         amount: 0,
@@ -80,7 +80,7 @@ function resetMoneyRequestInfo(id = '') {
         comment: '',
         participants: [],
         merchant: '',
-        date,
+        created,
         receiptPath: '',
         receiptSource: '',
     });
diff --git a/src/pages/iou/MoneyRequestCreatedPage.js b/src/pages/iou/MoneyRequestCreatedPage.js
index 2e75063a539c..a582299d3128 100644
--- a/src/pages/iou/MoneyRequestCreatedPage.js
+++ b/src/pages/iou/MoneyRequestCreatedPage.js
@@ -1,11 +1,12 @@
 import React, {Component} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
+import {format} from 'date-fns';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
-import CONST from '../../CONST';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import ScreenWrapper from '../../components/ScreenWrapper';
+import CONST from '../../CONST';
 import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import Form from '../../components/Form';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -109,7 +110,7 @@ class MoneyRequestCreatedPage extends Component {
                     <NewDatePicker
                         inputID="moneyRequestCreated"
                         label={this.props.translate('common.date')}
-                        defaultValue={this.props.iou.created}
+                        defaultValue={this.props.iou.created || format(new Date(), CONST.DATE.FNS_FORMAT_STRING)}
                         maxDate={new Date()}
                     />
                 </Form>
diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index 753d03e55d4e..3878aa6d340e 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -2,7 +2,6 @@ import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
-import {format} from 'date-fns';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import MoneyRequestConfirmationList from '../../../components/MoneyRequestConfirmationList';
@@ -62,7 +61,7 @@ const defaultProps = {
         currency: CONST.CURRENCY.USD,
         comment: '',
         merchant: '',
-        created: format(new Date(), CONST.DATE.FNS_FORMAT_STRING),
+        created: '',
         participants: [],
     },
     ...withCurrentUserPersonalDetailsDefaultProps,

From 0bb81e1cf2f8936054df49867f9c493fed29aa77 Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Fri, 18 Aug 2023 13:20:50 +0100
Subject: [PATCH 08/22] Remove unused prop

---
 src/components/MoneyRequestConfirmationList.js | 4 ++--
 src/pages/iou/steps/MoneyRequestConfirmPage.js | 3 +--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index 8c9e849b5e36..59da93aba935 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -59,7 +59,7 @@ const propTypes = {
     iouType: PropTypes.string,
 
     /** IOU date */
-    iouDate: PropTypes.string,
+    iouCreated: PropTypes.string,
 
     /** IOU merchant */
     iouMerchant: PropTypes.string,
@@ -408,7 +408,7 @@ function MoneyRequestConfirmationList(props) {
                 <>
                     <MenuItemWithTopDescription
                         shouldShowRightIcon={!props.isReadOnly}
-                        title={props.iouDate || format(new Date(), CONST.DATE.FNS_FORMAT_STRING)}
+                        title={props.iouCreated || format(new Date(), CONST.DATE.FNS_FORMAT_STRING)}
                         description={translate('common.date')}
                         style={[styles.moneyRequestMenuItem, styles.mb2]}
                         onPress={() => Navigation.navigate(ROUTES.getMoneyRequestCreatedRoute(props.iouType, props.reportID))}
diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index 3878aa6d340e..6b380ec3fa3e 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -263,8 +263,7 @@ function MoneyRequestConfirmPage(props) {
                         policyID={props.report.policyID}
                         bankAccountRoute={ReportUtils.getBankAccountRoute(props.report)}
                         iouMerchant={props.iou.merchant}
-                        iouModifiedMerchant={props.iou.modifiedMerchant}
-                        iouDate={props.iou.created}
+                        iouCreated={props.iou.created}
                     />
                 </View>
             )}

From 74bbf44a51fef5126955e9905bb4190a85fab5b8 Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Fri, 18 Aug 2023 14:21:23 +0100
Subject: [PATCH 09/22] Add mechant and created to the build optimistic
 transaction call

---
 src/libs/TransactionUtils.js                   |  4 +++-
 src/libs/actions/IOU.js                        | 17 ++++++++++++++---
 src/pages/iou/MoneyRequestCreatedPage.js       |  2 +-
 src/pages/iou/steps/MoneyRequestConfirmPage.js |  4 +++-
 tests/actions/IOUTest.js                       | 10 +++++-----
 5 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/libs/TransactionUtils.js b/src/libs/TransactionUtils.js
index a4c0b1b554e6..b8a4fc70c19d 100644
--- a/src/libs/TransactionUtils.js
+++ b/src/libs/TransactionUtils.js
@@ -26,6 +26,7 @@ Onyx.connect({
  * @param {String} currency
  * @param {String} reportID
  * @param {String} [comment]
+ * @param {String} [created]
  * @param {String} [source]
  * @param {String} [originalTransactionID]
  * @param {String} [merchant]
@@ -38,6 +39,7 @@ function buildOptimisticTransaction(
     currency,
     reportID,
     comment = '',
+    created = '',
     source = '',
     originalTransactionID = '',
     merchant = CONST.REPORT.TYPE.IOU,
@@ -63,7 +65,7 @@ function buildOptimisticTransaction(
         reportID,
         comment: commentJSON,
         merchant,
-        created: DateUtils.getDBTime(),
+        created: created || DateUtils.getDBTime(),
         pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
         receipt,
     };
diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index 3baaedee585d..0ad6afd3950f 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -310,6 +310,8 @@ function buildOnyxDataForMoneyRequest(
  * @param {String} comment
  * @param {Number} amount
  * @param {String} currency
+ * @param {String} created
+ * @param {String} merchant
  * @param {Number} payeeAccountID
  * @param {String} payeeEmail
  * @param {Object} [receipt]
@@ -328,7 +330,7 @@ function buildOnyxDataForMoneyRequest(
  * @returns {Object} data.onyxData.failureData
  * @param {String} [existingTransactionID]
  */
-function getMoneyRequestInformation(report, participant, comment, amount, currency, payeeAccountID, payeeEmail, receipt = undefined, existingTransactionID = null) {
+function getMoneyRequestInformation(report, participant, comment, amount, currency, created, merchant, payeeAccountID, payeeEmail, receipt = undefined, existingTransactionID = null) {
     const payerEmail = OptionsListUtils.addSMSDomainIfPhoneNumber(participant.login);
     const payerAccountID = Number(participant.accountID);
     const isPolicyExpenseChat = participant.isPolicyExpenseChat;
@@ -383,9 +385,10 @@ function getMoneyRequestInformation(report, participant, comment, amount, curren
         currency,
         iouReport.reportID,
         comment,
+        created,
         '',
         '',
-        undefined,
+        merchant,
         receiptObject,
         existingTransactionID,
     );
@@ -495,6 +498,8 @@ function createDistanceRequest(report, payeeEmail, payeeAccountID, participant,
         comment,
         0,
         'USD',
+        created,
+        '',
         payeeAccountID,
         payeeEmail,
         null,
@@ -526,19 +531,23 @@ function createDistanceRequest(report, payeeEmail, payeeAccountID, participant,
  * @param {Object} report
  * @param {Number} amount - always in the smallest unit of the currency
  * @param {String} currency
+ * @param {String} created
+ * @param {String} merchant
  * @param {String} payeeEmail
  * @param {Number} payeeAccountID
  * @param {Object} participant
  * @param {String} comment
  * @param {Object} [receipt]
  */
-function requestMoney(report, amount, currency, payeeEmail, payeeAccountID, participant, comment, receipt = undefined) {
+function requestMoney(report, amount, currency, created, merchant, payeeEmail, payeeAccountID, participant, comment, receipt = undefined) {
     const {payerEmail, iouReport, chatReport, transaction, iouAction, createdChatReportActionID, createdIOUReportActionID, reportPreviewAction, onyxData} = getMoneyRequestInformation(
         report,
         participant,
         comment,
         amount,
         currency,
+        created,
+        merchant,
         payeeAccountID,
         payeeEmail,
         receipt,
@@ -609,6 +618,7 @@ function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAcco
         comment,
         '',
         '',
+        '',
         `${Localize.translateLocal('iou.splitBill')} ${Localize.translateLocal('common.with')} ${formattedParticipants} [${DateUtils.getDBTime().slice(0, 10)}]`,
     );
 
@@ -782,6 +792,7 @@ function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAcco
             currency,
             oneOnOneIOUReport.reportID,
             comment,
+            '',
             CONST.IOU.MONEY_REQUEST_TYPE.SPLIT,
             splitTransaction.transactionID,
         );
diff --git a/src/pages/iou/MoneyRequestCreatedPage.js b/src/pages/iou/MoneyRequestCreatedPage.js
index a582299d3128..e7827dc338fb 100644
--- a/src/pages/iou/MoneyRequestCreatedPage.js
+++ b/src/pages/iou/MoneyRequestCreatedPage.js
@@ -110,7 +110,7 @@ class MoneyRequestCreatedPage extends Component {
                     <NewDatePicker
                         inputID="moneyRequestCreated"
                         label={this.props.translate('common.date')}
-                        defaultValue={this.props.iou.created || format(new Date(), CONST.DATE.FNS_FORMAT_STRING)}
+                        defaultValue={this.props.iou.created}
                         maxDate={new Date()}
                     />
                 </Form>
diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index 6b380ec3fa3e..c22a81cd7299 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -134,6 +134,8 @@ function MoneyRequestConfirmPage(props) {
                 props.report,
                 props.iou.amount,
                 props.iou.currency,
+                props.iou.created,
+                props.iou.merchant,
                 props.currentUserPersonalDetails.login,
                 props.currentUserPersonalDetails.accountID,
                 selectedParticipants[0],
@@ -141,7 +143,7 @@ function MoneyRequestConfirmPage(props) {
                 receipt,
             );
         },
-        [props.report, props.iou.amount, props.iou.currency, props.currentUserPersonalDetails.login, props.currentUserPersonalDetails.accountID],
+        [props.report, props.iou.amount, props.iou.currency, props.iou.created, props.iou.merchant, props.currentUserPersonalDetails.login, props.currentUserPersonalDetails.accountID],
     );
 
     const createTransaction = useCallback(
diff --git a/tests/actions/IOUTest.js b/tests/actions/IOUTest.js
index 93648aa8ea74..ce43ce583c11 100644
--- a/tests/actions/IOUTest.js
+++ b/tests/actions/IOUTest.js
@@ -40,7 +40,7 @@ describe('actions/IOU', () => {
             let iouAction;
             let transactionID;
             fetch.pause();
-            IOU.requestMoney({}, amount, CONST.CURRENCY.USD, RORY_EMAIL, RORY_ACCOUNT_ID, {login: CARLOS_EMAIL, accountID: CARLOS_ACCOUNT_ID}, comment);
+            IOU.requestMoney({}, amount, CONST.CURRENCY.USD, '', '', RORY_EMAIL, RORY_ACCOUNT_ID, {login: CARLOS_EMAIL, accountID: CARLOS_ACCOUNT_ID}, comment);
             return waitForPromisesToResolve()
                 .then(
                     () =>
@@ -205,7 +205,7 @@ describe('actions/IOU', () => {
                     }),
                 )
                 .then(() => {
-                    IOU.requestMoney(chatReport, amount, CONST.CURRENCY.USD, RORY_EMAIL, RORY_ACCOUNT_ID, {login: CARLOS_EMAIL, accountID: CARLOS_ACCOUNT_ID}, comment);
+                    IOU.requestMoney(chatReport, amount, CONST.CURRENCY.USD, '', '', RORY_EMAIL, RORY_ACCOUNT_ID, {login: CARLOS_EMAIL, accountID: CARLOS_ACCOUNT_ID}, comment);
                     return waitForPromisesToResolve();
                 })
                 .then(
@@ -396,7 +396,7 @@ describe('actions/IOU', () => {
                 )
                 .then(() => Onyx.set(`${ONYXKEYS.COLLECTION.TRANSACTION}${existingTransaction.transactionID}`, existingTransaction))
                 .then(() => {
-                    IOU.requestMoney(chatReport, amount, CONST.CURRENCY.USD, RORY_EMAIL, RORY_ACCOUNT_ID, {login: CARLOS_EMAIL, accountID: CARLOS_ACCOUNT_ID}, comment);
+                    IOU.requestMoney(chatReport, amount, CONST.CURRENCY.USD, '', '', RORY_EMAIL, RORY_ACCOUNT_ID, {login: CARLOS_EMAIL, accountID: CARLOS_ACCOUNT_ID}, comment);
                     return waitForPromisesToResolve();
                 })
                 .then(
@@ -528,7 +528,7 @@ describe('actions/IOU', () => {
             let iouAction;
             let transactionID;
             fetch.pause();
-            IOU.requestMoney({}, amount, CONST.CURRENCY.USD, RORY_EMAIL, RORY_ACCOUNT_ID, {login: CARLOS_EMAIL, accountID: CARLOS_ACCOUNT_ID}, comment);
+            IOU.requestMoney({}, amount, CONST.CURRENCY.USD, '', '', RORY_EMAIL, RORY_ACCOUNT_ID, {login: CARLOS_EMAIL, accountID: CARLOS_ACCOUNT_ID}, comment);
             return (
                 waitForPromisesToResolve()
                     .then(
@@ -1183,7 +1183,7 @@ describe('actions/IOU', () => {
             let createIOUAction;
             let payIOUAction;
             let transaction;
-            IOU.requestMoney({}, amount, CONST.CURRENCY.USD, RORY_EMAIL, RORY_ACCOUNT_ID, {login: CARLOS_EMAIL, accountID: CARLOS_ACCOUNT_ID}, comment);
+            IOU.requestMoney({}, amount, CONST.CURRENCY.USD, '', '', RORY_EMAIL, RORY_ACCOUNT_ID, {login: CARLOS_EMAIL, accountID: CARLOS_ACCOUNT_ID}, comment);
             return waitForPromisesToResolve()
                 .then(
                     () =>

From 6ed654c0624ea4b0089e592ee76bec155541cc72 Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Fri, 18 Aug 2023 14:26:35 +0100
Subject: [PATCH 10/22] Pass the merchant and created to the api

---
 src/libs/actions/IOU.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index 0ad6afd3950f..f16405cd9613 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -560,6 +560,8 @@ function requestMoney(report, amount, currency, created, merchant, payeeEmail, p
             amount,
             currency,
             comment,
+            created,
+            merchant,
             iouReportID: iouReport.reportID,
             chatReportID: chatReport.reportID,
             transactionID: transaction.transactionID,

From f8d6cab287e3e1e2d4db1585b8b4fda3a59b1c79 Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Fri, 18 Aug 2023 15:58:10 +0100
Subject: [PATCH 11/22] Update tests

---
 src/libs/TransactionUtils.js | 2 +-
 tests/actions/IOUTest.js     | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/libs/TransactionUtils.js b/src/libs/TransactionUtils.js
index b8a4fc70c19d..b689b8e29a3f 100644
--- a/src/libs/TransactionUtils.js
+++ b/src/libs/TransactionUtils.js
@@ -64,7 +64,7 @@ function buildOptimisticTransaction(
         currency,
         reportID,
         comment: commentJSON,
-        merchant,
+        merchant: merchant || CONST.REPORT.TYPE.IOU,
         created: created || DateUtils.getDBTime(),
         pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
         receipt,
diff --git a/tests/actions/IOUTest.js b/tests/actions/IOUTest.js
index ce43ce583c11..bf32c2ef8f9a 100644
--- a/tests/actions/IOUTest.js
+++ b/tests/actions/IOUTest.js
@@ -35,12 +35,13 @@ describe('actions/IOU', () => {
         it('creates new chat if needed', () => {
             const amount = 10000;
             const comment = 'Giv money plz';
+            const merchant = 'KFC';
             let iouReportID;
             let createdAction;
             let iouAction;
             let transactionID;
             fetch.pause();
-            IOU.requestMoney({}, amount, CONST.CURRENCY.USD, '', '', RORY_EMAIL, RORY_ACCOUNT_ID, {login: CARLOS_EMAIL, accountID: CARLOS_ACCOUNT_ID}, comment);
+            IOU.requestMoney({}, amount, CONST.CURRENCY.USD, '', merchant, RORY_EMAIL, RORY_ACCOUNT_ID, {login: CARLOS_EMAIL, accountID: CARLOS_ACCOUNT_ID}, comment);
             return waitForPromisesToResolve()
                 .then(
                     () =>
@@ -141,7 +142,7 @@ describe('actions/IOU', () => {
                                     // The transactionID on the iou action should match the one from the transactions collection
                                     expect(iouAction.originalMessage.IOUTransactionID).toBe(transactionID);
 
-                                    expect(transaction.merchant).toBe(CONST.REPORT.TYPE.IOU);
+                                    expect(transaction.merchant).toBe(merchant);
 
                                     resolve();
                                 },

From 3105cf5dcecb0fa73593d63b9db7a52f51194ec1 Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Fri, 18 Aug 2023 16:20:58 +0100
Subject: [PATCH 12/22] Fix the lint

---
 src/pages/iou/MoneyRequestCreatedPage.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/iou/MoneyRequestCreatedPage.js b/src/pages/iou/MoneyRequestCreatedPage.js
index e7827dc338fb..e3586e315873 100644
--- a/src/pages/iou/MoneyRequestCreatedPage.js
+++ b/src/pages/iou/MoneyRequestCreatedPage.js
@@ -1,12 +1,10 @@
 import React, {Component} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
-import {format} from 'date-fns';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import ScreenWrapper from '../../components/ScreenWrapper';
-import CONST from '../../CONST';
 import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import Form from '../../components/Form';
 import ONYXKEYS from '../../ONYXKEYS';

From ae5ab8d88812f68c42db031d2070eb323d37112e Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Fri, 18 Aug 2023 16:36:09 +0100
Subject: [PATCH 13/22] Add the merchant to transaction header

---
 .../ReportActionItem/MoneyRequestView.js           | 14 +++++++++++++-
 src/libs/ReportUtils.js                            |  1 +
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js
index c05cf14f2fc1..86c150f14b98 100644
--- a/src/components/ReportActionItem/MoneyRequestView.js
+++ b/src/components/ReportActionItem/MoneyRequestView.js
@@ -67,7 +67,13 @@ function MoneyRequestView({report, parentReport, shouldShowHorizontalRule, polic
     const parentReportAction = ReportActionsUtils.getParentReportAction(report);
     const moneyRequestReport = parentReport;
     const transaction = TransactionUtils.getLinkedTransaction(parentReportAction);
-    const {created: transactionDate, amount: transactionAmount, currency: transactionCurrency, comment: transactionDescription} = ReportUtils.getTransactionDetails(transaction);
+    const {
+        created: transactionDate,
+        amount: transactionAmount,
+        currency: transactionCurrency,
+        comment: transactionDescription,
+        merchant: transactionMerchant,
+    } = ReportUtils.getTransactionDetails(transaction);
     const formattedTransactionAmount = transactionAmount && transactionCurrency && CurrencyUtils.convertToDisplayString(transactionAmount, transactionCurrency);
 
     const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID);
@@ -121,6 +127,12 @@ function MoneyRequestView({report, parentReport, shouldShowHorizontalRule, polic
                 shouldShowRightIcon={canEdit}
                 onPress={() => Navigation.navigate(ROUTES.getEditRequestRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DATE))}
             />
+            <MenuItemWithTopDescription
+                description={translate('common.merchant')}
+                title={transactionMerchant}
+                shouldShowRightIcon={false}
+                disabled
+            />
             {shouldShowHorizontalRule && <View style={styles.reportHorizontalRule} />}
         </View>
     );
diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index 77507164fe03..02c022e27816 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -1242,6 +1242,7 @@ function getTransactionDetails(transaction) {
         amount: TransactionUtils.getAmount(transaction, isExpenseReport(report)),
         currency: TransactionUtils.getCurrency(transaction),
         comment: TransactionUtils.getDescription(transaction),
+        merchant: TransactionUtils.getMerchant(transaction),
     };
 }
 

From 6a057be29575e47cb63ea86fd6f7e1e09870bbd6 Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Fri, 18 Aug 2023 20:44:30 +0100
Subject: [PATCH 14/22] Refactoring the MoneyRequestDescriptionPage to
 functional component

---
 src/pages/iou/MoneyRequestDescriptionPage.js | 123 +++++++++----------
 1 file changed, 60 insertions(+), 63 deletions(-)

diff --git a/src/pages/iou/MoneyRequestDescriptionPage.js b/src/pages/iou/MoneyRequestDescriptionPage.js
index 07e4b295f85f..f5e0c431f322 100644
--- a/src/pages/iou/MoneyRequestDescriptionPage.js
+++ b/src/pages/iou/MoneyRequestDescriptionPage.js
@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, {useEffect, useRef} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
@@ -17,6 +17,7 @@ import compose from '../../libs/compose';
 import * as IOU from '../../libs/actions/IOU';
 import optionPropTypes from '../../components/optionPropTypes';
 import CONST from '../../CONST';
+import useLocalize from '../../hooks/useLocalize';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -29,6 +30,18 @@ const propTypes = {
         comment: PropTypes.string,
         participants: PropTypes.arrayOf(optionPropTypes),
     }),
+
+    /** Route from navigation */
+    route: PropTypes.shape({
+        /** Params from the route */
+        params: PropTypes.shape({
+            /** Which field we are editing */
+            field: PropTypes.string,
+
+            /** reportID for the "transaction thread" */
+            threadReportID: PropTypes.string,
+        }),
+    }).isRequired,
 };
 
 const defaultProps = {
@@ -40,41 +53,26 @@ const defaultProps = {
     },
 };
 
-class MoneyRequestDescriptionPage extends Component {
-    constructor(props) {
-        super(props);
+function MoneyRequestDescriptionPage({iou, route}) {
+    const {translate} = useLocalize();
+    const inputRef = useRef(null);
+    const iouType = lodashGet(route, 'params.iouType', '');
+    const reportID = lodashGet(route, 'params.reportID', '');
 
-        this.updateComment = this.updateComment.bind(this);
-        this.navigateBack = this.navigateBack.bind(this);
-        this.iouType = lodashGet(props.route, 'params.iouType', '');
-        this.reportID = lodashGet(props.route, 'params.reportID', '');
-    }
-
-    componentDidMount() {
-        const moneyRequestId = `${this.iouType}${this.reportID}`;
-        const shouldReset = this.props.iou.id !== moneyRequestId;
+    useEffect(() => {
+        const moneyRequestId = `${iouType}${reportID}`;
+        const shouldReset = iou.id !== moneyRequestId;
         if (shouldReset) {
             IOU.resetMoneyRequestInfo(moneyRequestId);
         }
 
-        if (_.isEmpty(this.props.iou.participants) || (this.props.iou.amount === 0 && !this.props.iou.receiptPath) || shouldReset) {
-            Navigation.goBack(ROUTES.getMoneyRequestRoute(this.iouType, this.reportID), true);
-        }
-    }
-
-    // eslint-disable-next-line rulesdir/prefer-early-return
-    componentDidUpdate(prevProps) {
-        // ID in Onyx could change by initiating a new request in a separate browser tab or completing a request
-        if (_.isEmpty(this.props.iou.participants) || (this.props.iou.amount === 0 && !this.props.iou.receiptPath) || prevProps.iou.id !== this.props.iou.id) {
-            // The ID is cleared on completing a request. In that case, we will do nothing.
-            if (this.props.iou.id) {
-                Navigation.goBack(ROUTES.getMoneyRequestRoute(this.iouType, this.reportID), true);
-            }
+        if (_.isEmpty(iou.participants) || (iou.amount === 0 && !iou.receiptPath) || shouldReset) {
+            Navigation.goBack(ROUTES.getMoneyRequestRoute(iouType, reportID), true);
         }
-    }
+    }, [iou.id, iou.participants, iou.amount, iou.receiptPath, iouType, reportID]);
 
-    navigateBack() {
-        Navigation.goBack(ROUTES.getMoneyRequestConfirmationRoute(this.iouType, this.reportID));
+    function navigateBack() {
+        Navigation.goBack(ROUTES.getMoneyRequestConfirmationRoute(iouType, reportID));
     }
 
     /**
@@ -83,44 +81,43 @@ class MoneyRequestDescriptionPage extends Component {
      * @param {Object} value
      * @param {String} value.moneyRequestComment
      */
-    updateComment(value) {
+    function updateComment(value) {
         IOU.setMoneyRequestDescription(value.moneyRequestComment);
-        this.navigateBack();
+        navigateBack();
     }
 
-    render() {
-        return (
-            <ScreenWrapper
-                includeSafeAreaPaddingBottom={false}
-                shouldEnableMaxHeight
-                onEntryTransitionEnd={() => this.descriptionInputRef && this.descriptionInputRef.focus()}
+    return (
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            shouldEnableMaxHeight
+            onEntryTransitionEnd={() => inputRef && inputRef.focus()}
+        >
+            <HeaderWithBackButton
+                title={translate('common.description')}
+                onBackButtonPress={() => navigateBack()}
+            />
+            <Form
+                style={[styles.flexGrow1, styles.ph5]}
+                formID={ONYXKEYS.FORMS.MONEY_REQUEST_DESCRIPTION_FORM}
+                onSubmit={(value) => updateComment(value)}
+                submitButtonText={translate('common.save')}
+                enabledWhenOffline
             >
-                <HeaderWithBackButton
-                    title={this.props.translate('common.description')}
-                    onBackButtonPress={this.navigateBack}
-                />
-                <Form
-                    style={[styles.flexGrow1, styles.ph5]}
-                    formID={ONYXKEYS.FORMS.MONEY_REQUEST_DESCRIPTION_FORM}
-                    onSubmit={this.updateComment}
-                    submitButtonText={this.props.translate('common.save')}
-                    enabledWhenOffline
-                >
-                    <View style={styles.mb4}>
-                        <TextInput
-                            inputID="moneyRequestComment"
-                            name="moneyRequestComment"
-                            defaultValue={this.props.iou.comment}
-                            label={this.props.translate('moneyRequestConfirmationList.whatsItFor')}
-                            accessibilityLabel={this.props.translate('moneyRequestConfirmationList.whatsItFor')}
-                            accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
-                            ref={(el) => (this.descriptionInputRef = el)}
-                        />
-                    </View>
-                </Form>
-            </ScreenWrapper>
-        );
-    }
+                <View style={styles.mb4}>
+                    <TextInput
+                        inputID="moneyRequestComment"
+                        name="moneyRequestComment"
+                        defaultValue={iou.comment}
+                        label={translate('moneyRequestConfirmationList.whatsItFor')}
+                        accessibilityLabel={translate('moneyRequestConfirmationList.whatsItFor')}
+                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
+                        ref={(el) => (inputRef.current = el)}
+                    />
+                </View>
+            </Form>
+        </ScreenWrapper>
+    );
+
 }
 
 MoneyRequestDescriptionPage.propTypes = propTypes;

From 9128ab7d546ae1cf06b1bee1cef5621ea1912291 Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Fri, 18 Aug 2023 20:47:18 +0100
Subject: [PATCH 15/22] Remove use of withLocalize

---
 src/pages/iou/MoneyRequestDescriptionPage.js | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/pages/iou/MoneyRequestDescriptionPage.js b/src/pages/iou/MoneyRequestDescriptionPage.js
index f5e0c431f322..4f53b2af4f65 100644
--- a/src/pages/iou/MoneyRequestDescriptionPage.js
+++ b/src/pages/iou/MoneyRequestDescriptionPage.js
@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import TextInput from '../../components/TextInput';
-import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import Form from '../../components/Form';
@@ -13,15 +12,12 @@ import ONYXKEYS from '../../ONYXKEYS';
 import styles from '../../styles/styles';
 import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
-import compose from '../../libs/compose';
 import * as IOU from '../../libs/actions/IOU';
 import optionPropTypes from '../../components/optionPropTypes';
 import CONST from '../../CONST';
 import useLocalize from '../../hooks/useLocalize';
 
 const propTypes = {
-    ...withLocalizePropTypes,
-
     /** Onyx Props */
     /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
     iou: PropTypes.shape({
@@ -123,9 +119,8 @@ function MoneyRequestDescriptionPage({iou, route}) {
 MoneyRequestDescriptionPage.propTypes = propTypes;
 MoneyRequestDescriptionPage.defaultProps = defaultProps;
 
-export default compose(
-    withLocalize,
-    withOnyx({
-        iou: {key: ONYXKEYS.IOU},
-    }),
-)(MoneyRequestDescriptionPage);
+export default withOnyx({
+    iou: {
+        key: ONYXKEYS.IOU
+    },
+})(MoneyRequestDescriptionPage);

From 0e06cc591be58e0d35873022d4e051ba77946716 Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Fri, 18 Aug 2023 20:53:05 +0100
Subject: [PATCH 16/22] Add missing property to the iou key

---
 src/pages/iou/MoneyRequestDescriptionPage.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/iou/MoneyRequestDescriptionPage.js b/src/pages/iou/MoneyRequestDescriptionPage.js
index 4f53b2af4f65..e23ce77fba46 100644
--- a/src/pages/iou/MoneyRequestDescriptionPage.js
+++ b/src/pages/iou/MoneyRequestDescriptionPage.js
@@ -25,6 +25,7 @@ const propTypes = {
         amount: PropTypes.number,
         comment: PropTypes.string,
         participants: PropTypes.arrayOf(optionPropTypes),
+        receiptPath: PropTypes.string,
     }),
 
     /** Route from navigation */
@@ -46,6 +47,7 @@ const defaultProps = {
         amount: 0,
         comment: '',
         participants: [],
+        receiptPath: '',
     },
 };
 

From 9e897dffd7c1cad0b99a1c0e7b4802fdc5cf5f8c Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Fri, 18 Aug 2023 20:59:18 +0100
Subject: [PATCH 17/22] Refactor the MoneyRequestCreatedPage to functional
 component

---
 src/pages/iou/MoneyRequestCreatedPage.js | 124 +++++++++++------------
 1 file changed, 58 insertions(+), 66 deletions(-)

diff --git a/src/pages/iou/MoneyRequestCreatedPage.js b/src/pages/iou/MoneyRequestCreatedPage.js
index e3586e315873..5a958264be3a 100644
--- a/src/pages/iou/MoneyRequestCreatedPage.js
+++ b/src/pages/iou/MoneyRequestCreatedPage.js
@@ -1,9 +1,8 @@
-import React, {Component} from 'react';
+import React, {useEffect} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
-import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import Form from '../../components/Form';
@@ -11,14 +10,12 @@ import ONYXKEYS from '../../ONYXKEYS';
 import styles from '../../styles/styles';
 import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
-import compose from '../../libs/compose';
 import * as IOU from '../../libs/actions/IOU';
 import optionPropTypes from '../../components/optionPropTypes';
 import NewDatePicker from '../../components/NewDatePicker';
+import useLocalize from '../../hooks/useLocalize';
 
 const propTypes = {
-    ...withLocalizePropTypes,
-
     /** Onyx Props */
     /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
     iou: PropTypes.shape({
@@ -27,7 +24,20 @@ const propTypes = {
         comment: PropTypes.string,
         created: PropTypes.string,
         participants: PropTypes.arrayOf(optionPropTypes),
+        receiptPath: PropTypes.string,
     }),
+
+    /** Route from navigation */
+    route: PropTypes.shape({
+        /** Params from the route */
+        params: PropTypes.shape({
+            /** Which field we are editing */
+            field: PropTypes.string,
+
+            /** reportID for the "transaction thread" */
+            threadReportID: PropTypes.string,
+        }),
+    }).isRequired,
 };
 
 const defaultProps = {
@@ -37,44 +47,29 @@ const defaultProps = {
         comment: '',
         created: '',
         participants: [],
+        receiptPath: '',
     },
 };
 
-class MoneyRequestCreatedPage extends Component {
-    constructor(props) {
-        super(props);
+function MoneyRequestCreatedPage({iou, route}) {
+    const {translate} = useLocalize();
+    const iouType = lodashGet(route, 'params.iouType', '');
+    const reportID = lodashGet(route, 'params.reportID', '');
 
-        this.updateDate = this.updateDate.bind(this);
-        this.navigateBack = this.navigateBack.bind(this);
-        this.iouType = lodashGet(props.route, 'params.iouType', '');
-        this.reportID = lodashGet(props.route, 'params.reportID', '');
-    }
-
-    componentDidMount() {
-        const moneyRequestId = `${this.iouType}${this.reportID}`;
-        const shouldReset = this.props.iou.id !== moneyRequestId;
+    useEffect(() => {
+        const moneyRequestId = `${iouType}${reportID}`;
+        const shouldReset = iou.id !== moneyRequestId;
         if (shouldReset) {
             IOU.resetMoneyRequestInfo(moneyRequestId);
         }
 
-        if (_.isEmpty(this.props.iou.participants) || (this.props.iou.amount === 0 && !this.props.iou.receiptPath) || shouldReset) {
-            Navigation.goBack(ROUTES.getMoneyRequestRoute(this.iouType, this.reportID), true);
+        if (_.isEmpty(iou.participants) || (iou.amount === 0 && !iou.receiptPath) || shouldReset) {
+            Navigation.goBack(ROUTES.getMoneyRequestRoute(iouType, reportID), true);
         }
-    }
+    }, [iou.id, iou.participants, iou.amount, iou.receiptPath, iouType, reportID]);
 
-    // eslint-disable-next-line rulesdir/prefer-early-return
-    componentDidUpdate(prevProps) {
-        // ID in Onyx could change by initiating a new request in a separate browser tab or completing a request
-        if (_.isEmpty(this.props.iou.participants) || (this.props.iou.amount === 0 && !this.props.iou.receiptPath) || prevProps.iou.id !== this.props.iou.id) {
-            // The ID is cleared on completing a request. In that case, we will do nothing.
-            if (this.props.iou.id) {
-                Navigation.goBack(ROUTES.getMoneyRequestRoute(this.iouType, this.reportID), true);
-            }
-        }
-    }
-
-    navigateBack() {
-        Navigation.goBack(ROUTES.getMoneyRequestConfirmationRoute(this.iouType, this.reportID));
+    function navigateBack() {
+        Navigation.goBack(ROUTES.getMoneyRequestConfirmationRoute(iouType, reportID));
     }
 
     /**
@@ -83,46 +78,43 @@ class MoneyRequestCreatedPage extends Component {
      * @param {Object} value
      * @param {String} value.moneyRequestCreated
      */
-    updateDate(value) {
+    function updateDate(value) {
         IOU.setMoneyRequestCreated(value.moneyRequestCreated);
-        this.navigateBack();
+        navigateBack();
     }
 
-    render() {
-        return (
-            <ScreenWrapper
-                includeSafeAreaPaddingBottom={false}
-                shouldEnableMaxHeight
+    return (
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            shouldEnableMaxHeight
+        >
+            <HeaderWithBackButton
+                title={translate('common.date')}
+                onBackButtonPress={() => navigateBack()}
+            />
+            <Form
+                style={[styles.flexGrow1, styles.ph5]}
+                formID={ONYXKEYS.FORMS.MONEY_REQUEST_CREATED_FORM}
+                onSubmit={(value) => updateDate(value)}
+                submitButtonText={translate('common.save')}
+                enabledWhenOffline
             >
-                <HeaderWithBackButton
-                    title={this.props.translate('common.date')}
-                    onBackButtonPress={this.navigateBack}
+                <NewDatePicker
+                    inputID="moneyRequestCreated"
+                    label={translate('common.date')}
+                    defaultValue={iou.created}
+                    maxDate={new Date()}
                 />
-                <Form
-                    style={[styles.flexGrow1, styles.ph5]}
-                    formID={ONYXKEYS.FORMS.MONEY_REQUEST_CREATED_FORM}
-                    onSubmit={this.updateDate}
-                    submitButtonText={this.props.translate('common.save')}
-                    enabledWhenOffline
-                >
-                    <NewDatePicker
-                        inputID="moneyRequestCreated"
-                        label={this.props.translate('common.date')}
-                        defaultValue={this.props.iou.created}
-                        maxDate={new Date()}
-                    />
-                </Form>
-            </ScreenWrapper>
-        );
-    }
+            </Form>
+        </ScreenWrapper>
+    );
 }
 
 MoneyRequestCreatedPage.propTypes = propTypes;
 MoneyRequestCreatedPage.defaultProps = defaultProps;
 
-export default compose(
-    withLocalize,
-    withOnyx({
-        iou: {key: ONYXKEYS.IOU},
-    }),
-)(MoneyRequestCreatedPage);
+export default withOnyx({
+    iou: {
+        key: ONYXKEYS.IOU
+    },
+})(MoneyRequestCreatedPage);

From ee0f400f97331d457e1fe83ffb59cc196aae0c3d Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Fri, 18 Aug 2023 21:00:44 +0100
Subject: [PATCH 18/22] Fix style

---
 src/pages/iou/MoneyRequestCreatedPage.js     | 2 +-
 src/pages/iou/MoneyRequestDescriptionPage.js | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/pages/iou/MoneyRequestCreatedPage.js b/src/pages/iou/MoneyRequestCreatedPage.js
index 5a958264be3a..c1fb0ca00b4f 100644
--- a/src/pages/iou/MoneyRequestCreatedPage.js
+++ b/src/pages/iou/MoneyRequestCreatedPage.js
@@ -115,6 +115,6 @@ MoneyRequestCreatedPage.defaultProps = defaultProps;
 
 export default withOnyx({
     iou: {
-        key: ONYXKEYS.IOU
+        key: ONYXKEYS.IOU,
     },
 })(MoneyRequestCreatedPage);
diff --git a/src/pages/iou/MoneyRequestDescriptionPage.js b/src/pages/iou/MoneyRequestDescriptionPage.js
index e23ce77fba46..17cfa139fe0d 100644
--- a/src/pages/iou/MoneyRequestDescriptionPage.js
+++ b/src/pages/iou/MoneyRequestDescriptionPage.js
@@ -115,7 +115,6 @@ function MoneyRequestDescriptionPage({iou, route}) {
             </Form>
         </ScreenWrapper>
     );
-
 }
 
 MoneyRequestDescriptionPage.propTypes = propTypes;
@@ -123,6 +122,6 @@ MoneyRequestDescriptionPage.defaultProps = defaultProps;
 
 export default withOnyx({
     iou: {
-        key: ONYXKEYS.IOU
+        key: ONYXKEYS.IOU,
     },
 })(MoneyRequestDescriptionPage);

From efd74c88271ded5170241de8d55d23a5cbf56f65 Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Fri, 18 Aug 2023 21:40:11 +0100
Subject: [PATCH 19/22] Change to Date instead of Created in component names

---
 src/ONYXKEYS.js                                        |  2 +-
 src/ROUTES.js                                          |  2 +-
 .../Navigation/AppNavigator/ModalStackNavigators.js    |  6 +++---
 src/libs/Navigation/linkingConfig.js                   |  2 +-
 src/pages/EditRequestCreatedPage.js                    |  2 +-
 ...eyRequestCreatedPage.js => MoneyRequestDatePage.js} | 10 +++++-----
 6 files changed, 12 insertions(+), 12 deletions(-)
 rename src/pages/iou/{MoneyRequestCreatedPage.js => MoneyRequestDatePage.js} (93%)

diff --git a/src/ONYXKEYS.js b/src/ONYXKEYS.js
index 96e77347face..5a00c49db0a0 100755
--- a/src/ONYXKEYS.js
+++ b/src/ONYXKEYS.js
@@ -223,7 +223,7 @@ export default {
         MONEY_REQUEST_DESCRIPTION_FORM: 'moneyRequestDescriptionForm',
         MONEY_REQUEST_MERCHANT_FORM: 'moneyRequestMerchantForm',
         MONEY_REQUEST_AMOUNT_FORM: 'moneyRequestAmountForm',
-        MONEY_REQUEST_CREATED_FORM: 'moneyRequestCreatedForm',
+        MONEY_REQUEST_DATE_FORM: 'moneyRequestCreatedForm',
         NEW_CONTACT_METHOD_FORM: 'newContactMethodForm',
         PAYPAL_FORM: 'payPalForm',
         WAYPOINT_FORM: 'waypointForm',
diff --git a/src/ROUTES.js b/src/ROUTES.js
index 207790e31d62..822e77fc5ba5 100644
--- a/src/ROUTES.js
+++ b/src/ROUTES.js
@@ -93,7 +93,7 @@ export default {
     MONEY_REQUEST_AMOUNT: ':iouType/new/amount/:reportID?',
     MONEY_REQUEST_PARTICIPANTS: ':iouType/new/participants/:reportID?',
     MONEY_REQUEST_CONFIRMATION: ':iouType/new/confirmation/:reportID?',
-    MONEY_REQUEST_CREATED: ':iouType/new/date/:reportID?',
+    MONEY_REQUEST_DATE: ':iouType/new/date/:reportID?',
     MONEY_REQUEST_CURRENCY: ':iouType/new/currency/:reportID?',
     MONEY_REQUEST_DESCRIPTION: ':iouType/new/description/:reportID?',
     MONEY_REQUEST_MERCHANT: ':iouType/new/merchant/:reportID?',
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
index 940569464229..8ee334d458c0 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
@@ -71,10 +71,10 @@ const MoneyRequestModalStackNavigator = createModalStackNavigator([
     },
     {
         getComponent: () => {
-            const MoneyRequestCreatedPage = require('../../../pages/iou/MoneyRequestCreatedPage').default;
-            return MoneyRequestCreatedPage;
+            const MoneyRequestDatePage = require('../../../pages/iou/MoneyRequestDatePage').default;
+            return MoneyRequestDatePage;
         },
-        name: 'Money_Request_Created',
+        name: 'Money_Request_Date',
     },
     {
         getComponent: () => {
diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js
index 3e7ed0b5fff4..a06f1004d566 100644
--- a/src/libs/Navigation/linkingConfig.js
+++ b/src/libs/Navigation/linkingConfig.js
@@ -323,7 +323,7 @@ export default {
                             Money_Request_Amount: ROUTES.MONEY_REQUEST_AMOUNT,
                             Money_Request_Participants: ROUTES.MONEY_REQUEST_PARTICIPANTS,
                             Money_Request_Confirmation: ROUTES.MONEY_REQUEST_CONFIRMATION,
-                            Money_Request_Created: ROUTES.MONEY_REQUEST_CREATED,
+                            Money_Request_Date: ROUTES.MONEY_REQUEST_DATE,
                             Money_Request_Currency: ROUTES.MONEY_REQUEST_CURRENCY,
                             Money_Request_Description: ROUTES.MONEY_REQUEST_DESCRIPTION,
                             Money_Request_Merchant: ROUTES.MONEY_REQUEST_MERCHANT,
diff --git a/src/pages/EditRequestCreatedPage.js b/src/pages/EditRequestCreatedPage.js
index 4e4fce308e5b..79633c214486 100644
--- a/src/pages/EditRequestCreatedPage.js
+++ b/src/pages/EditRequestCreatedPage.js
@@ -31,7 +31,7 @@ function EditRequestCreatedPage({defaultCreated, onSubmit}) {
             />
             <Form
                 style={[styles.flexGrow1, styles.ph5]}
-                formID={ONYXKEYS.FORMS.MONEY_REQUEST_CREATED_FORM}
+                formID={ONYXKEYS.FORMS.MONEY_REQUEST_DATE_FORM}
                 onSubmit={onSubmit}
                 submitButtonText={translate('common.save')}
                 enabledWhenOffline
diff --git a/src/pages/iou/MoneyRequestCreatedPage.js b/src/pages/iou/MoneyRequestDatePage.js
similarity index 93%
rename from src/pages/iou/MoneyRequestCreatedPage.js
rename to src/pages/iou/MoneyRequestDatePage.js
index c1fb0ca00b4f..3fcd3aba263c 100644
--- a/src/pages/iou/MoneyRequestCreatedPage.js
+++ b/src/pages/iou/MoneyRequestDatePage.js
@@ -51,7 +51,7 @@ const defaultProps = {
     },
 };
 
-function MoneyRequestCreatedPage({iou, route}) {
+function MoneyRequestDatePage({iou, route}) {
     const {translate} = useLocalize();
     const iouType = lodashGet(route, 'params.iouType', '');
     const reportID = lodashGet(route, 'params.reportID', '');
@@ -94,7 +94,7 @@ function MoneyRequestCreatedPage({iou, route}) {
             />
             <Form
                 style={[styles.flexGrow1, styles.ph5]}
-                formID={ONYXKEYS.FORMS.MONEY_REQUEST_CREATED_FORM}
+                formID={ONYXKEYS.FORMS.MONEY_REQUEST_DATE_FORM}
                 onSubmit={(value) => updateDate(value)}
                 submitButtonText={translate('common.save')}
                 enabledWhenOffline
@@ -110,11 +110,11 @@ function MoneyRequestCreatedPage({iou, route}) {
     );
 }
 
-MoneyRequestCreatedPage.propTypes = propTypes;
-MoneyRequestCreatedPage.defaultProps = defaultProps;
+MoneyRequestDatePage.propTypes = propTypes;
+MoneyRequestDatePage.defaultProps = defaultProps;
 
 export default withOnyx({
     iou: {
         key: ONYXKEYS.IOU,
     },
-})(MoneyRequestCreatedPage);
+})(MoneyRequestDatePage);

From 0b1830640ec2dcc07932384a454e1194f331e4d7 Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Fri, 18 Aug 2023 21:44:08 +0100
Subject: [PATCH 20/22] Migrate MoneyRequestMerchantPage to function component

---
 src/pages/iou/MoneyRequestDescriptionPage.js |   2 +-
 src/pages/iou/MoneyRequestMerchantPage.js    | 125 ++++++++-----------
 2 files changed, 53 insertions(+), 74 deletions(-)

diff --git a/src/pages/iou/MoneyRequestDescriptionPage.js b/src/pages/iou/MoneyRequestDescriptionPage.js
index 17cfa139fe0d..2e6e459f1d96 100644
--- a/src/pages/iou/MoneyRequestDescriptionPage.js
+++ b/src/pages/iou/MoneyRequestDescriptionPage.js
@@ -88,7 +88,7 @@ function MoneyRequestDescriptionPage({iou, route}) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            onEntryTransitionEnd={() => inputRef && inputRef.focus()}
+            onEntryTransitionEnd={() => inputRef.current && inputRef.current.focus()}
         >
             <HeaderWithBackButton
                 title={translate('common.description')}
diff --git a/src/pages/iou/MoneyRequestMerchantPage.js b/src/pages/iou/MoneyRequestMerchantPage.js
index 5d39c0904f14..4daa161cab35 100644
--- a/src/pages/iou/MoneyRequestMerchantPage.js
+++ b/src/pages/iou/MoneyRequestMerchantPage.js
@@ -1,11 +1,10 @@
-import React, {Component} from 'react';
+import React, {useEffect, useRef} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import TextInput from '../../components/TextInput';
-import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import Form from '../../components/Form';
@@ -13,14 +12,12 @@ import ONYXKEYS from '../../ONYXKEYS';
 import styles from '../../styles/styles';
 import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
-import compose from '../../libs/compose';
 import * as IOU from '../../libs/actions/IOU';
 import optionPropTypes from '../../components/optionPropTypes';
 import CONST from '../../CONST';
+import useLocalize from '../../hooks/useLocalize';
 
 const propTypes = {
-    ...withLocalizePropTypes,
-
     /** Onyx Props */
     /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
     iou: PropTypes.shape({
@@ -43,41 +40,26 @@ const defaultProps = {
     },
 };
 
-class MoneyRequestMerchantPage extends Component {
-    constructor(props) {
-        super(props);
-
-        this.updateMerchant = this.updateMerchant.bind(this);
-        this.navigateBack = this.navigateBack.bind(this);
-        this.iouType = lodashGet(props.route, 'params.iouType', '');
-        this.reportID = lodashGet(props.route, 'params.reportID', '');
-    }
+function MoneyRequestMerchantPage({iou, route}) {
+    const {translate} = useLocalize();
+    const inputRef = useRef(null);
+    const iouType = lodashGet(route, 'params.iouType', '');
+    const reportID = lodashGet(route, 'params.reportID', '');
 
-    componentDidMount() {
-        const moneyRequestId = `${this.iouType}${this.reportID}`;
-        const shouldReset = this.props.iou.id !== moneyRequestId;
+    useEffect(() => {
+        const moneyRequestId = `${iouType}${reportID}`;
+        const shouldReset = iou.id !== moneyRequestId;
         if (shouldReset) {
             IOU.resetMoneyRequestInfo(moneyRequestId);
         }
 
-        if (_.isEmpty(this.props.iou.participants) || (this.props.iou.amount === 0 && !this.props.iou.receiptPath) || shouldReset) {
-            Navigation.goBack(ROUTES.getMoneyRequestRoute(this.iouType, this.reportID), true);
+        if (_.isEmpty(iou.participants) || (iou.amount === 0 && !iou.receiptPath) || shouldReset) {
+            Navigation.goBack(ROUTES.getMoneyRequestRoute(iouType, reportID), true);
         }
-    }
+    }, [iou.id, iou.participants, iou.amount, iou.receiptPath, iouType, reportID]);
 
-    // eslint-disable-next-line rulesdir/prefer-early-return
-    componentDidUpdate(prevProps) {
-        // ID in Onyx could change by initiating a new request in a separate browser tab or completing a request
-        if (_.isEmpty(this.props.iou.participants) || (this.props.iou.amount === 0 && !this.props.iou.receiptPath) || prevProps.iou.id !== this.props.iou.id) {
-            // The ID is cleared on completing a request. In that case, we will do nothing.
-            if (this.props.iou.id) {
-                Navigation.goBack(ROUTES.getMoneyRequestRoute(this.iouType, this.reportID), true);
-            }
-        }
-    }
-
-    navigateBack() {
-        Navigation.goBack(ROUTES.getMoneyRequestConfirmationRoute(this.iouType, this.reportID));
+    function navigateBack() {
+        Navigation.goBack(ROUTES.getMoneyRequestConfirmationRoute(iouType, reportID));
     }
 
     /**
@@ -86,52 +68,49 @@ class MoneyRequestMerchantPage extends Component {
      * @param {Object} value
      * @param {String} value.moneyRequestMerchant
      */
-    updateMerchant(value) {
+    function updateMerchant(value) {
         IOU.setMoneyRequestMerchant(value.moneyRequestMerchant);
-        this.navigateBack();
+        navigateBack();
     }
 
-    render() {
-        return (
-            <ScreenWrapper
-                includeSafeAreaPaddingBottom={false}
-                shouldEnableMaxHeight
-                onEntryTransitionEnd={() => this.merchantInputRef && this.merchantInputRef.focus()}
+    return (
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            shouldEnableMaxHeight
+            onEntryTransitionEnd={() => inputRef.current && inputRef.current.focus()}
+        >
+            <HeaderWithBackButton
+                title={translate('common.merchant')}
+                onBackButtonPress={() => navigateBack()}
+            />
+            <Form
+                style={[styles.flexGrow1, styles.ph5]}
+                formID={ONYXKEYS.FORMS.MONEY_REQUEST_MERCHANT_FORM}
+                onSubmit={(value) => updateMerchant(value)}
+                submitButtonText={translate('common.save')}
+                enabledWhenOffline
             >
-                <HeaderWithBackButton
-                    title={this.props.translate('common.merchant')}
-                    onBackButtonPress={this.navigateBack}
-                />
-                <Form
-                    style={[styles.flexGrow1, styles.ph5]}
-                    formID={ONYXKEYS.FORMS.MONEY_REQUEST_MERCHANT_FORM}
-                    onSubmit={this.updateMerchant}
-                    submitButtonText={this.props.translate('common.save')}
-                    enabledWhenOffline
-                >
-                    <View style={styles.mb4}>
-                        <TextInput
-                            inputID="moneyRequestMerchant"
-                            name="moneyRequestMerchant"
-                            defaultValue={this.props.iou.merchant}
-                            label={this.props.translate('common.merchant')}
-                            accessibilityLabel={this.props.translate('common.merchant')}
-                            accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
-                            ref={(el) => (this.merchantInputRef = el)}
-                        />
-                    </View>
-                </Form>
-            </ScreenWrapper>
-        );
-    }
+                <View style={styles.mb4}>
+                    <TextInput
+                        inputID="moneyRequestMerchant"
+                        name="moneyRequestMerchant"
+                        defaultValue={iou.merchant}
+                        label={translate('common.merchant')}
+                        accessibilityLabel={translate('common.merchant')}
+                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
+                        ref={(el) => (inputRef.current = el)}
+                    />
+                </View>
+            </Form>
+        </ScreenWrapper>
+    );
 }
 
 MoneyRequestMerchantPage.propTypes = propTypes;
 MoneyRequestMerchantPage.defaultProps = defaultProps;
 
-export default compose(
-    withLocalize,
-    withOnyx({
-        iou: {key: ONYXKEYS.IOU},
-    }),
-)(MoneyRequestMerchantPage);
+export default withOnyx({
+    iou: {
+        key: ONYXKEYS.IOU,
+    },
+})(MoneyRequestMerchantPage);

From ede0be7ff579d9cc6efca4d3be918acee22ec3a1 Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Fri, 18 Aug 2023 21:44:51 +0100
Subject: [PATCH 21/22] Props clean up

---
 src/pages/iou/MoneyRequestMerchantPage.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/pages/iou/MoneyRequestMerchantPage.js b/src/pages/iou/MoneyRequestMerchantPage.js
index 4daa161cab35..bec9bcb419f7 100644
--- a/src/pages/iou/MoneyRequestMerchantPage.js
+++ b/src/pages/iou/MoneyRequestMerchantPage.js
@@ -27,7 +27,20 @@ const propTypes = {
         created: PropTypes.string,
         merchant: PropTypes.string,
         participants: PropTypes.arrayOf(optionPropTypes),
+        receiptPath: PropTypes.string,
     }),
+
+    /** Route from navigation */
+    route: PropTypes.shape({
+        /** Params from the route */
+        params: PropTypes.shape({
+            /** Which field we are editing */
+            field: PropTypes.string,
+
+            /** reportID for the "transaction thread" */
+            threadReportID: PropTypes.string,
+        }),
+    }).isRequired,
 };
 
 const defaultProps = {
@@ -37,6 +50,7 @@ const defaultProps = {
         comment: '',
         merchant: '',
         participants: [],
+        receiptPath: '',
     },
 };
 

From 8ad0fc4012603adfadae8384f9f4051cbeef31e2 Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Sat, 19 Aug 2023 01:13:11 +0100
Subject: [PATCH 22/22] Disable changing date and merchant when creating split
 bills

---
 src/components/MoneyRequestConfirmationList.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index 59da93aba935..832be75c1317 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -126,6 +126,7 @@ function MoneyRequestConfirmationList(props) {
 
     // A flag and a toggler for showing the rest of the form fields
     const [showAllFields, toggleShowAllFields] = useReducer((state) => !state, false);
+    const isTypeRequest = props.iouType === CONST.IOU.MONEY_REQUEST_TYPE.REQUEST;
 
     /**
      * Returns the participants with amount
@@ -407,20 +408,20 @@ function MoneyRequestConfirmationList(props) {
             {showAllFields && (
                 <>
                     <MenuItemWithTopDescription
-                        shouldShowRightIcon={!props.isReadOnly}
+                        shouldShowRightIcon={!props.isReadOnly && isTypeRequest}
                         title={props.iouCreated || format(new Date(), CONST.DATE.FNS_FORMAT_STRING)}
                         description={translate('common.date')}
                         style={[styles.moneyRequestMenuItem, styles.mb2]}
                         onPress={() => Navigation.navigate(ROUTES.getMoneyRequestCreatedRoute(props.iouType, props.reportID))}
-                        disabled={didConfirm || props.isReadOnly}
+                        disabled={didConfirm || props.isReadOnly || !isTypeRequest}
                     />
                     <MenuItemWithTopDescription
-                        shouldShowRightIcon={!props.isReadOnly}
+                        shouldShowRightIcon={!props.isReadOnly && isTypeRequest}
                         title={props.iouMerchant}
                         description={translate('common.merchant')}
                         style={[styles.moneyRequestMenuItem, styles.mb2]}
                         onPress={() => Navigation.navigate(ROUTES.getMoneyRequestMerchantRoute(props.iouType, props.reportID))}
-                        disabled={didConfirm || props.isReadOnly}
+                        disabled={didConfirm || props.isReadOnly || !isTypeRequest}
                     />
                 </>
             )}
