From 22bd4b4d41d8752d706f7251beb65bc1c080aa8d Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Thu, 17 Aug 2023 17:16:29 +0200
Subject: [PATCH 01/14] add strings

---
 src/languages/en.js | 1 +
 src/languages/es.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/languages/en.js b/src/languages/en.js
index 4ce07f7e00ca..e3878fdd8517 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -151,6 +151,7 @@ export default {
         edit: 'Edit',
         showMore: 'Show more',
         merchant: 'Merchant',
+        category: 'Category',
     },
     anonymousReportFooter: {
         logoTagline: 'Join in on the discussion.',
diff --git a/src/languages/es.js b/src/languages/es.js
index 7cee163470f3..c3cab2702d6d 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -150,6 +150,7 @@ export default {
         edit: 'Editar',
         showMore: 'Mostrar más',
         merchant: 'Comerciante',
+        category: 'Categoría',
     },
     anonymousReportFooter: {
         logoTagline: 'Únete a la discussion.',

From ab6a7ec2a7a2cbf7f182989b82b8f9fcae932309 Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Thu, 17 Aug 2023 17:17:06 +0200
Subject: [PATCH 02/14] add MoneyRequestCategoryPage

---
 src/ROUTES.js                                 |  2 +
 .../AppNavigator/ModalStackNavigators.js      |  7 +++
 src/libs/Navigation/linkingConfig.js          |  1 +
 src/pages/iou/MoneyRequestCategoryPage.js     | 49 +++++++++++++++++++
 4 files changed, 59 insertions(+)
 create mode 100644 src/pages/iou/MoneyRequestCategoryPage.js

diff --git a/src/ROUTES.js b/src/ROUTES.js
index 90d08e5b13c8..bcee5d488405 100644
--- a/src/ROUTES.js
+++ b/src/ROUTES.js
@@ -92,6 +92,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_CATEGORY: ':iouType/new/category/: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',
@@ -104,6 +105,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}`,
+    getMoneyRequestCategoryRoute: (iouType, reportID = '') => `${iouType}/new/category/${reportID}`,
     SPLIT_BILL_DETAILS: `r/:reportID/split/:reportActionID`,
     getSplitBillDetailsRoute: (reportID, reportActionID) => `r/${reportID}/split/${reportActionID}`,
     getNewTaskRoute: (reportID) => `${NEW_TASK}/${reportID}`,
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
index 8a489afb035e..9fcc89dd2950 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 MoneyRequestCategoryPage = require('../../../pages/iou/MoneyRequestCategoryPage').default;
+            return MoneyRequestCategoryPage;
+        },
+        name: 'Money_Request_Category',
+    },
     {
         getComponent: () => {
             const AddPersonalBankAccountPage = require('../../../pages/AddPersonalBankAccountPage').default;
diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js
index dcc4f77fde73..4814955325df 100644
--- a/src/libs/Navigation/linkingConfig.js
+++ b/src/libs/Navigation/linkingConfig.js
@@ -321,6 +321,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_Category: ROUTES.MONEY_REQUEST_CATEGORY,
                             IOU_Send_Enable_Payments: ROUTES.IOU_SEND_ENABLE_PAYMENTS,
                             IOU_Send_Add_Bank_Account: ROUTES.IOU_SEND_ADD_BANK_ACCOUNT,
                             IOU_Send_Add_Debit_Card: ROUTES.IOU_SEND_ADD_DEBIT_CARD,
diff --git a/src/pages/iou/MoneyRequestCategoryPage.js b/src/pages/iou/MoneyRequestCategoryPage.js
new file mode 100644
index 000000000000..b69d9c683e06
--- /dev/null
+++ b/src/pages/iou/MoneyRequestCategoryPage.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import lodashGet from 'lodash/get';
+import ROUTES from '../../ROUTES';
+import Navigation from '../../libs/Navigation/Navigation';
+import useLocalize from '../../hooks/useLocalize';
+import ScreenWrapper from '../../components/ScreenWrapper';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
+
+const propTypes = {
+    route: PropTypes.shape({
+        /** Each parameter passed via the URL */
+        params: PropTypes.shape({
+            /** TODO: Comment */
+            iouType: PropTypes.string,
+
+            /** TODO: Comment */
+            reportID: PropTypes.string,
+        }),
+    }).isRequired,
+};
+
+function MoneyRequestCategoryPage({route}) {
+    const {translate} = useLocalize();
+
+    const navigateBack = () => {
+        const iouType = lodashGet(route, 'params.iouType', '');
+        const reportID = lodashGet(route, 'params.reportID', '');
+
+        Navigation.goBack(ROUTES.getMoneyRequestConfirmationRoute(iouType, reportID));
+    };
+
+    return (
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            shouldEnableMaxHeight
+        >
+            <HeaderWithBackButton
+                title={translate('common.category')}
+                onBackButtonPress={navigateBack}
+            />
+        </ScreenWrapper>
+    );
+}
+
+MoneyRequestCategoryPage.displayName = 'MoneyRequestCategoryPage';
+MoneyRequestCategoryPage.propTypes = propTypes;
+
+export default MoneyRequestCategoryPage;

From f95d8bb421929b6d210f497563753a11f4f57e80 Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Thu, 17 Aug 2023 17:17:37 +0200
Subject: [PATCH 03/14] add category to MoneyRequestConfirmationList

---
 .../MoneyRequestConfirmationList.js           | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index 2cc458d0e4ad..88e78fa820e5 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -63,6 +63,9 @@ const propTypes = {
     /** IOU merchant */
     iouMerchant: PropTypes.string,
 
+    /** TODO: Comment */
+    iouCategory: PropTypes.string,
+
     /** Selected participants from MoneyRequestModal with login / accountID */
     selectedParticipants: PropTypes.arrayOf(optionPropTypes).isRequired,
 
@@ -96,6 +99,14 @@ const propTypes = {
 
     /** File source of the receipt */
     receiptSource: PropTypes.string,
+
+    /** TODO: Comment */
+    policyCategories: PropTypes.objectOf(
+        PropTypes.shape({
+            enabled: PropTypes.bool.isRequired,
+            name: PropTypes.string.isRequired,
+        }),
+    ),
 };
 
 const defaultProps = {
@@ -103,6 +114,7 @@ const defaultProps = {
     onSendMoney: () => {},
     onSelectParticipant: () => {},
     iouType: CONST.IOU.MONEY_REQUEST_TYPE.REQUEST,
+    iouCategory: '',
     payeePersonalDetails: null,
     canModifyParticipants: false,
     isReadOnly: false,
@@ -115,6 +127,7 @@ const defaultProps = {
     ...withCurrentUserPersonalDetailsDefaultProps,
     receiptPath: '',
     receiptSource: '',
+    policyCategories: null,
 };
 
 function MoneyRequestConfirmationList(props) {
@@ -419,6 +432,16 @@ function MoneyRequestConfirmationList(props) {
                         // Note: This component is disabled until this field is editable in next PR
                         disabled
                     />
+                    {props.policyCategories !== null && (
+                        <MenuItemWithTopDescription
+                            shouldShowRightIcon={!props.isReadOnly}
+                            title={props.iouCategory}
+                            description={translate('common.category')}
+                            onPress={() => Navigation.navigate(ROUTES.getMoneyRequestCategoryRoute(props.iouType, props.reportID))}
+                            style={[styles.moneyRequestMenuItem, styles.mb2]}
+                            disabled={didConfirm || props.isReadOnly}
+                        />
+                    )}
                 </>
             )}
         </OptionsSelector>
@@ -434,5 +457,8 @@ export default compose(
         session: {
             key: ONYXKEYS.SESSION,
         },
+        policyCategories: {
+            key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`,
+        },
     }),
 )(MoneyRequestConfirmationList);

From 602aa40fcff636e01e894bbafe09b985d3e7d740 Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Thu, 17 Aug 2023 19:02:30 +0200
Subject: [PATCH 04/14] create general category prop types

---
 src/components/categoryPropTypes.js | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 src/components/categoryPropTypes.js

diff --git a/src/components/categoryPropTypes.js b/src/components/categoryPropTypes.js
new file mode 100644
index 000000000000..ac9e7a564c1c
--- /dev/null
+++ b/src/components/categoryPropTypes.js
@@ -0,0 +1,9 @@
+import PropTypes from 'prop-types';
+
+export default PropTypes.shape({
+    /** TODO: Comment */
+    name: PropTypes.string.isRequired,
+
+    /** TODO: Comment */
+    enabled: PropTypes.bool.isRequired,
+});

From efe21ba7e343d0050635d2dde52c47e3f1c899ff Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Thu, 17 Aug 2023 19:02:40 +0200
Subject: [PATCH 05/14] create page category picker

---
 .../CategoryPicker/categoryPickerPropTypes.js | 17 +++++++++
 src/components/CategoryPicker/index.js        | 35 +++++++++++++++++++
 2 files changed, 52 insertions(+)
 create mode 100644 src/components/CategoryPicker/categoryPickerPropTypes.js
 create mode 100644 src/components/CategoryPicker/index.js

diff --git a/src/components/CategoryPicker/categoryPickerPropTypes.js b/src/components/CategoryPicker/categoryPickerPropTypes.js
new file mode 100644
index 000000000000..ceb6268bc0b3
--- /dev/null
+++ b/src/components/CategoryPicker/categoryPickerPropTypes.js
@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types';
+import categoryPropTypes from '../categoryPropTypes';
+
+const propTypes = {
+    /** TODO: Comment */
+    policyID: PropTypes.string,
+
+    /** TODO: Comment */
+    policyCategories: PropTypes.objectOf(categoryPropTypes),
+};
+
+const defaultProps = {
+    policyID: '',
+    policyCategories: null,
+};
+
+export {propTypes, defaultProps};
diff --git a/src/components/CategoryPicker/index.js b/src/components/CategoryPicker/index.js
new file mode 100644
index 000000000000..1b37dfca44da
--- /dev/null
+++ b/src/components/CategoryPicker/index.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import _ from 'underscore';
+import {View, Text} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
+import ONYXKEYS from '../../ONYXKEYS';
+import {propTypes, defaultProps} from './categoryPickerPropTypes';
+
+function CategoryPicker({policyCategories}) {
+    if (policyCategories === null) {
+        return null;
+    }
+
+    return (
+        <View>
+            {_.chain(policyCategories)
+                .values()
+                .map((category) => (
+                    <View key={category.name}>
+                        <Text>{category.name}</Text>
+                    </View>
+                ))
+                .value()}
+        </View>
+    );
+}
+
+CategoryPicker.displayName = 'CategoryPicker';
+CategoryPicker.propTypes = propTypes;
+CategoryPicker.defaultProps = defaultProps;
+
+export default withOnyx({
+    policyCategories: {
+        key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`,
+    },
+})(CategoryPicker);

From 2904336eed9be1c0ab83d2f0ad37e55158e36311 Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Thu, 17 Aug 2023 19:03:00 +0200
Subject: [PATCH 06/14] integrate category picker to MoneyRequestCategoryPage

---
 src/pages/iou/MoneyRequestCategoryPage.js | 26 ++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/pages/iou/MoneyRequestCategoryPage.js b/src/pages/iou/MoneyRequestCategoryPage.js
index b69d9c683e06..572e6a5fc2f4 100644
--- a/src/pages/iou/MoneyRequestCategoryPage.js
+++ b/src/pages/iou/MoneyRequestCategoryPage.js
@@ -1,13 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import lodashGet from 'lodash/get';
+import {withOnyx} from 'react-native-onyx';
 import ROUTES from '../../ROUTES';
 import Navigation from '../../libs/Navigation/Navigation';
 import useLocalize from '../../hooks/useLocalize';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import HeaderWithBackButton from '../../components/HeaderWithBackButton';
+import CategoryPicker from '../../components/CategoryPicker';
+import ONYXKEYS from '../../ONYXKEYS';
+import reportPropTypes from '../reportPropTypes';
 
 const propTypes = {
+    /** TODO: Comment */
     route: PropTypes.shape({
         /** Each parameter passed via the URL */
         params: PropTypes.shape({
@@ -18,14 +23,22 @@ const propTypes = {
             reportID: PropTypes.string,
         }),
     }).isRequired,
+
+    /** TODO: Comment */
+    report: reportPropTypes,
+};
+
+const defaultProps = {
+    report: {},
 };
 
-function MoneyRequestCategoryPage({route}) {
+function MoneyRequestCategoryPage({route, report}) {
     const {translate} = useLocalize();
 
+    const reportID = lodashGet(route, 'params.reportID', '');
+
     const navigateBack = () => {
         const iouType = lodashGet(route, 'params.iouType', '');
-        const reportID = lodashGet(route, 'params.reportID', '');
 
         Navigation.goBack(ROUTES.getMoneyRequestConfirmationRoute(iouType, reportID));
     };
@@ -39,11 +52,18 @@ function MoneyRequestCategoryPage({route}) {
                 title={translate('common.category')}
                 onBackButtonPress={navigateBack}
             />
+
+            <CategoryPicker policyID={report.policyID} />
         </ScreenWrapper>
     );
 }
 
 MoneyRequestCategoryPage.displayName = 'MoneyRequestCategoryPage';
 MoneyRequestCategoryPage.propTypes = propTypes;
+MoneyRequestCategoryPage.defaultProps = defaultProps;
 
-export default MoneyRequestCategoryPage;
+export default withOnyx({
+    report: {
+        key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${lodashGet(route, 'params.reportID', '')}`,
+    },
+})(MoneyRequestCategoryPage);

From 079dde4a634dafe7b495381a726bee4e8b595e6c Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Fri, 18 Aug 2023 12:48:25 +0200
Subject: [PATCH 07/14] add comments

---
 .../CategoryPicker/categoryPickerPropTypes.js          |  4 ++--
 src/components/MoneyRequestConfirmationList.js         |  4 ++--
 src/components/categoryPropTypes.js                    |  4 ++--
 src/pages/iou/MoneyRequestCategoryPage.js              | 10 +++++-----
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/CategoryPicker/categoryPickerPropTypes.js b/src/components/CategoryPicker/categoryPickerPropTypes.js
index ceb6268bc0b3..b5f8a6f2146e 100644
--- a/src/components/CategoryPicker/categoryPickerPropTypes.js
+++ b/src/components/CategoryPicker/categoryPickerPropTypes.js
@@ -2,10 +2,10 @@ import PropTypes from 'prop-types';
 import categoryPropTypes from '../categoryPropTypes';
 
 const propTypes = {
-    /** TODO: Comment */
+    /** The policyID of we are getting categories */
     policyID: PropTypes.string,
 
-    /** TODO: Comment */
+    /** Collection of categories attached to a policy */
     policyCategories: PropTypes.objectOf(categoryPropTypes),
 };
 
diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index 88e78fa820e5..e2f872bd3bfb 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -63,7 +63,7 @@ const propTypes = {
     /** IOU merchant */
     iouMerchant: PropTypes.string,
 
-    /** TODO: Comment */
+    /** IOU Category */
     iouCategory: PropTypes.string,
 
     /** Selected participants from MoneyRequestModal with login / accountID */
@@ -100,7 +100,7 @@ const propTypes = {
     /** File source of the receipt */
     receiptSource: PropTypes.string,
 
-    /** TODO: Comment */
+    /** Collection of categories attached to a policy */
     policyCategories: PropTypes.objectOf(
         PropTypes.shape({
             enabled: PropTypes.bool.isRequired,
diff --git a/src/components/categoryPropTypes.js b/src/components/categoryPropTypes.js
index ac9e7a564c1c..6320791554e4 100644
--- a/src/components/categoryPropTypes.js
+++ b/src/components/categoryPropTypes.js
@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 
 export default PropTypes.shape({
-    /** TODO: Comment */
+    /** Name of a category */
     name: PropTypes.string.isRequired,
 
-    /** TODO: Comment */
+    /** Flag that determine is a category active */
     enabled: PropTypes.bool.isRequired,
 });
diff --git a/src/pages/iou/MoneyRequestCategoryPage.js b/src/pages/iou/MoneyRequestCategoryPage.js
index 572e6a5fc2f4..ad4e475ff765 100644
--- a/src/pages/iou/MoneyRequestCategoryPage.js
+++ b/src/pages/iou/MoneyRequestCategoryPage.js
@@ -12,19 +12,19 @@ import ONYXKEYS from '../../ONYXKEYS';
 import reportPropTypes from '../reportPropTypes';
 
 const propTypes = {
-    /** TODO: Comment */
+    /** Navigation route context info provided by react navigation */
     route: PropTypes.shape({
-        /** Each parameter passed via the URL */
+        /** Route specific parameters used on this screen via route :iouType/new/category/:reportID? */
         params: PropTypes.shape({
-            /** TODO: Comment */
+            /** The type of IOU report, i.e. bill, request, send */
             iouType: PropTypes.string,
 
-            /** TODO: Comment */
+            /** reportID for the transaction thread */
             reportID: PropTypes.string,
         }),
     }).isRequired,
 
-    /** TODO: Comment */
+    /** The report currently being used */
     report: reportPropTypes,
 };
 

From 272dd1b9144eb611080dc42f473aebd3e46a4f73 Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Fri, 18 Aug 2023 13:20:20 +0200
Subject: [PATCH 08/14] implement category list

---
 .../CategoryPicker/categoryPickerPropTypes.js |  6 +++
 src/components/CategoryPicker/index.js        | 47 +++++++++++++------
 src/pages/iou/MoneyRequestCategoryPage.js     | 11 +++--
 3 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/src/components/CategoryPicker/categoryPickerPropTypes.js b/src/components/CategoryPicker/categoryPickerPropTypes.js
index b5f8a6f2146e..596c1c680ae8 100644
--- a/src/components/CategoryPicker/categoryPickerPropTypes.js
+++ b/src/components/CategoryPicker/categoryPickerPropTypes.js
@@ -2,9 +2,15 @@ import PropTypes from 'prop-types';
 import categoryPropTypes from '../categoryPropTypes';
 
 const propTypes = {
+    /** The report ID of the IOU */
+    reportID: PropTypes.string,
+
     /** The policyID of we are getting categories */
     policyID: PropTypes.string,
 
+    /** The type of IOU report, i.e. bill, request, send */
+    iouType: PropTypes.string,
+
     /** Collection of categories attached to a policy */
     policyCategories: PropTypes.objectOf(categoryPropTypes),
 };
diff --git a/src/components/CategoryPicker/index.js b/src/components/CategoryPicker/index.js
index 1b37dfca44da..fc9c1b39b6fb 100644
--- a/src/components/CategoryPicker/index.js
+++ b/src/components/CategoryPicker/index.js
@@ -1,26 +1,43 @@
 import React from 'react';
 import _ from 'underscore';
-import {View, Text} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import ONYXKEYS from '../../ONYXKEYS';
 import {propTypes, defaultProps} from './categoryPickerPropTypes';
+import OptionsList from '../OptionsList';
+import styles from '../../styles/styles';
+import ScreenWrapper from '../ScreenWrapper';
+import Navigation from '../../libs/Navigation/Navigation';
+import ROUTES from '../../ROUTES';
 
-function CategoryPicker({policyCategories}) {
-    if (policyCategories === null) {
-        return null;
-    }
+function CategoryPicker({policyCategories, reportID, iouType}) {
+    const categoryList = _.chain(policyCategories)
+        .values()
+        .map((category) => ({
+            text: category.name,
+            keyForList: category.name,
+            tooltipText: category.name,
+        }))
+        .value();
+
+    const navigateBack = () => {
+        Navigation.goBack(ROUTES.getMoneyRequestConfirmationRoute(iouType, reportID));
+    };
 
     return (
-        <View>
-            {_.chain(policyCategories)
-                .values()
-                .map((category) => (
-                    <View key={category.name}>
-                        <Text>{category.name}</Text>
-                    </View>
-                ))
-                .value()}
-        </View>
+        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+            {({safeAreaPaddingBottomStyle}) => (
+                <OptionsList
+                    optionHoveredStyle={styles.hoveredComponentBG}
+                    contentContainerStyles={[safeAreaPaddingBottomStyle]}
+                    sections={[
+                        {
+                            data: categoryList,
+                        },
+                    ]}
+                    onSelectRow={navigateBack}
+                />
+            )}
+        </ScreenWrapper>
     );
 }
 
diff --git a/src/pages/iou/MoneyRequestCategoryPage.js b/src/pages/iou/MoneyRequestCategoryPage.js
index ad4e475ff765..80b88a762609 100644
--- a/src/pages/iou/MoneyRequestCategoryPage.js
+++ b/src/pages/iou/MoneyRequestCategoryPage.js
@@ -19,7 +19,7 @@ const propTypes = {
             /** The type of IOU report, i.e. bill, request, send */
             iouType: PropTypes.string,
 
-            /** reportID for the transaction thread */
+            /** The report ID of the IOU */
             reportID: PropTypes.string,
         }),
     }).isRequired,
@@ -36,10 +36,9 @@ function MoneyRequestCategoryPage({route, report}) {
     const {translate} = useLocalize();
 
     const reportID = lodashGet(route, 'params.reportID', '');
+    const iouType = lodashGet(route, 'params.iouType', '');
 
     const navigateBack = () => {
-        const iouType = lodashGet(route, 'params.iouType', '');
-
         Navigation.goBack(ROUTES.getMoneyRequestConfirmationRoute(iouType, reportID));
     };
 
@@ -53,7 +52,11 @@ function MoneyRequestCategoryPage({route, report}) {
                 onBackButtonPress={navigateBack}
             />
 
-            <CategoryPicker policyID={report.policyID} />
+            <CategoryPicker
+                policyID={report.policyID}
+                reportID={reportID}
+                iouType={iouType}
+            />
         </ScreenWrapper>
     );
 }

From 9a241c408a22fd577682dddf9595eb95f05578ff Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Fri, 18 Aug 2023 14:08:46 +0200
Subject: [PATCH 09/14] clarify prop types

---
 src/components/CategoryPicker/categoryPickerPropTypes.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/CategoryPicker/categoryPickerPropTypes.js b/src/components/CategoryPicker/categoryPickerPropTypes.js
index 596c1c680ae8..555a1e3356b5 100644
--- a/src/components/CategoryPicker/categoryPickerPropTypes.js
+++ b/src/components/CategoryPicker/categoryPickerPropTypes.js
@@ -3,13 +3,13 @@ import categoryPropTypes from '../categoryPropTypes';
 
 const propTypes = {
     /** The report ID of the IOU */
-    reportID: PropTypes.string,
+    reportID: PropTypes.string.isRequired,
 
     /** The policyID of we are getting categories */
     policyID: PropTypes.string,
 
     /** The type of IOU report, i.e. bill, request, send */
-    iouType: PropTypes.string,
+    iouType: PropTypes.string.isRequired,
 
     /** Collection of categories attached to a policy */
     policyCategories: PropTypes.objectOf(categoryPropTypes),

From 4b1081a2b5fcfc7b9718951a1eed55d965bd10e6 Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Fri, 18 Aug 2023 14:10:42 +0200
Subject: [PATCH 10/14] memorize category list

---
 src/components/CategoryPicker/index.js | 32 +++++++++++++++-----------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/components/CategoryPicker/index.js b/src/components/CategoryPicker/index.js
index fc9c1b39b6fb..163ab6673ca2 100644
--- a/src/components/CategoryPicker/index.js
+++ b/src/components/CategoryPicker/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -10,14 +10,22 @@ import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
 
 function CategoryPicker({policyCategories, reportID, iouType}) {
-    const categoryList = _.chain(policyCategories)
-        .values()
-        .map((category) => ({
-            text: category.name,
-            keyForList: category.name,
-            tooltipText: category.name,
-        }))
-        .value();
+    const sections = useMemo(() => {
+        const categoryList = _.chain(policyCategories)
+            .values()
+            .map((category) => ({
+                text: category.name,
+                keyForList: category.name,
+                tooltipText: category.name,
+            }))
+            .value();
+
+        return [
+            {
+                data: categoryList,
+            },
+        ];
+    }, [policyCategories]);
 
     const navigateBack = () => {
         Navigation.goBack(ROUTES.getMoneyRequestConfirmationRoute(iouType, reportID));
@@ -29,11 +37,7 @@ function CategoryPicker({policyCategories, reportID, iouType}) {
                 <OptionsList
                     optionHoveredStyle={styles.hoveredComponentBG}
                     contentContainerStyles={[safeAreaPaddingBottomStyle]}
-                    sections={[
-                        {
-                            data: categoryList,
-                        },
-                    ]}
+                    sections={sections}
                     onSelectRow={navigateBack}
                 />
             )}

From e0bbb618c37f12e375e520ed106658328cb81a8f Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Mon, 21 Aug 2023 18:35:45 +0200
Subject: [PATCH 11/14] grammar fixes

---
 src/components/CategoryPicker/categoryPickerPropTypes.js | 2 +-
 src/components/categoryPropTypes.js                      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/CategoryPicker/categoryPickerPropTypes.js b/src/components/CategoryPicker/categoryPickerPropTypes.js
index 555a1e3356b5..f59b5d40d5c3 100644
--- a/src/components/CategoryPicker/categoryPickerPropTypes.js
+++ b/src/components/CategoryPicker/categoryPickerPropTypes.js
@@ -5,7 +5,7 @@ const propTypes = {
     /** The report ID of the IOU */
     reportID: PropTypes.string.isRequired,
 
-    /** The policyID of we are getting categories */
+    /** The policyID we are getting categories for */
     policyID: PropTypes.string,
 
     /** The type of IOU report, i.e. bill, request, send */
diff --git a/src/components/categoryPropTypes.js b/src/components/categoryPropTypes.js
index 6320791554e4..4b4b4e547c71 100644
--- a/src/components/categoryPropTypes.js
+++ b/src/components/categoryPropTypes.js
@@ -4,6 +4,6 @@ export default PropTypes.shape({
     /** Name of a category */
     name: PropTypes.string.isRequired,
 
-    /** Flag that determine is a category active */
+    /** Flag that determines if a category is active */
     enabled: PropTypes.bool.isRequired,
 });

From bcf2d431b0f889165477c34acc8ff88d86d5c270 Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Wed, 23 Aug 2023 11:53:39 +0200
Subject: [PATCH 12/14] clarify comments

---
 src/components/CategoryPicker/categoryPickerPropTypes.js | 1 +
 src/components/categoryPropTypes.js                      | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/CategoryPicker/categoryPickerPropTypes.js b/src/components/CategoryPicker/categoryPickerPropTypes.js
index f59b5d40d5c3..ccc1643021ce 100644
--- a/src/components/CategoryPicker/categoryPickerPropTypes.js
+++ b/src/components/CategoryPicker/categoryPickerPropTypes.js
@@ -11,6 +11,7 @@ const propTypes = {
     /** The type of IOU report, i.e. bill, request, send */
     iouType: PropTypes.string.isRequired,
 
+    /* Onyx Props */
     /** Collection of categories attached to a policy */
     policyCategories: PropTypes.objectOf(categoryPropTypes),
 };
diff --git a/src/components/categoryPropTypes.js b/src/components/categoryPropTypes.js
index 4b4b4e547c71..90c3ac368d1c 100644
--- a/src/components/categoryPropTypes.js
+++ b/src/components/categoryPropTypes.js
@@ -4,6 +4,6 @@ export default PropTypes.shape({
     /** Name of a category */
     name: PropTypes.string.isRequired,
 
-    /** Flag that determines if a category is active */
+    /** Flag that determines if a category is active and able to be selected */
     enabled: PropTypes.bool.isRequired,
 });

From b0da998742f4ba73d399dcb62471678ed38151de Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Wed, 23 Aug 2023 11:54:10 +0200
Subject: [PATCH 13/14] improve props of MoneyRequestConfirmationList

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

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index 6c65d4a38d2a..7fc2417d30b3 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -27,6 +27,7 @@ import themeColors from '../styles/themes/default';
 import Image from './Image';
 import useLocalize from '../hooks/useLocalize';
 import * as ReceiptUtils from '../libs/ReceiptUtils';
+import categoryPropTypes from './categoryPropTypes';
 
 const propTypes = {
     /** Callback to inform parent modal of success */
@@ -97,12 +98,7 @@ const propTypes = {
     receiptSource: PropTypes.string,
 
     /** Collection of categories attached to a policy */
-    policyCategories: PropTypes.objectOf(
-        PropTypes.shape({
-            enabled: PropTypes.bool.isRequired,
-            name: PropTypes.string.isRequired,
-        }),
-    ),
+    policyCategories: PropTypes.objectOf(categoryPropTypes),
 };
 
 const defaultProps = {
@@ -123,7 +119,7 @@ const defaultProps = {
     ...withCurrentUserPersonalDetailsDefaultProps,
     receiptPath: '',
     receiptSource: '',
-    policyCategories: null,
+    policyCategories: {},
 };
 
 function MoneyRequestConfirmationList(props) {
@@ -406,7 +402,7 @@ function MoneyRequestConfirmationList(props) {
                         onPress={() => Navigation.navigate(ROUTES.getMoneyRequestMerchantRoute(props.iouType, props.reportID))}
                         disabled={didConfirm || props.isReadOnly || !isTypeRequest}
                     />
-                    {props.policyCategories !== null && (
+                    {!_.isEmpty(props.policyCategories) && (
                         <MenuItemWithTopDescription
                             shouldShowRightIcon={!props.isReadOnly}
                             title={props.iouCategory}

From ffb18caf9a0cb50120c34034567560eef3cff225 Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Wed, 23 Aug 2023 12:04:27 +0200
Subject: [PATCH 14/14] clarify props

---
 src/components/MoneyRequestConfirmationList.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index 7fc2417d30b3..3dc7f06acfad 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -97,6 +97,7 @@ const propTypes = {
     /** File source of the receipt */
     receiptSource: PropTypes.string,
 
+    /* Onyx Props */
     /** Collection of categories attached to a policy */
     policyCategories: PropTypes.objectOf(categoryPropTypes),
 };
