Allow Viewing/Editing a category on a Money Request

src/CONST.ts

@@ -1350,6 +1350,7 @@ const CONST = {
         DATE: 'date',
         DESCRIPTION: 'description',
         MERCHANT: 'merchant',
+        CATEGORY: 'category',
     },
     FOOTER: {
         EXPENSE_MANAGEMENT_URL: `${USE_EXPENSIFY_URL}/expense-management`,

src/components/CategoryPicker/categoryPickerPropTypes.js

@@ -2,14 +2,11 @@ import PropTypes from 'prop-types';
 import categoryPropTypes from '../categoryPropTypes';
 
 const propTypes = {
-    /** The report ID of the IOU */
-    reportID: PropTypes.string.isRequired,
-
     /** The policyID we are getting categories for */
     policyID: PropTypes.string,
 
-    /** The type of IOU report, i.e. bill, request, send */
-    iouType: PropTypes.string.isRequired,
+    /** The selected category of an expense */
+    selectedCategory: PropTypes.string,
 
     /* Onyx Props */
     /** Collection of categories attached to a policy */
@@ -19,18 +16,15 @@ const propTypes = {
     /** Collection of recently used categories attached to a policy */
     policyRecentlyUsedCategories: PropTypes.arrayOf(PropTypes.string),
 
-    /* Onyx Props */
-    /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
-    iou: PropTypes.shape({
-        category: PropTypes.string.isRequired,
-    }),
+    /** Callback to fire when a category is pressed */
+    onSubmit: PropTypes.func.isRequired,
 };
 
 const defaultProps = {
     policyID: '',
+    selectedCategory: '',
     policyCategories: {},
     policyRecentlyUsedCategories: [],
-    iou: {},
 };
 
 export {propTypes, defaultProps};

src/components/CategoryPicker/index.js

@@ -5,34 +5,31 @@ import lodashGet from 'lodash/get';
 import ONYXKEYS from '../../ONYXKEYS';
 import {propTypes, defaultProps} from './categoryPickerPropTypes';
 import styles from '../../styles/styles';
-import Navigation from '../../libs/Navigation/Navigation';
-import ROUTES from '../../ROUTES';
 import CONST from '../../CONST';
-import * as IOU from '../../libs/actions/IOU';
 import * as OptionsListUtils from '../../libs/OptionsListUtils';
 import OptionsSelector from '../OptionsSelector';
 import useLocalize from '../../hooks/useLocalize';
 
-function CategoryPicker({policyCategories, reportID, iouType, iou, policyRecentlyUsedCategories}) {
+function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedCategories, onSubmit}) {
     const {translate} = useLocalize();
     const [searchValue, setSearchValue] = useState('');
 
     const policyCategoriesCount = _.size(policyCategories);
     const isCategoriesCountBelowThreshold = policyCategoriesCount < CONST.CATEGORY_LIST_THRESHOLD;
 
     const selectedOptions = useMemo(() => {
-        if (!iou.category) {
+        if (!selectedCategory) {
             return [];
         }
 
         return [
             {
-                name: iou.category,
+                name: selectedCategory,
                 enabled: true,
                 accountID: null,
             },
         ];
-    }, [iou.category]);
+    }, [selectedCategory]);
 
     const initialFocusedIndex = useMemo(() => {
         if (isCategoriesCountBelowThreshold && selectedOptions.length > 0) {
@@ -53,20 +50,6 @@ function CategoryPicker({policyCategories, reportID, iouType, iou, policyRecentl
     const headerMessage = OptionsListUtils.getHeaderMessage(lodashGet(sections, '[0].data.length', 0) > 0, false, searchValue);
     const shouldShowTextInput = !isCategoriesCountBelowThreshold;
 
-    const navigateBack = () => {
-        Navigation.goBack(ROUTES.getMoneyRequestConfirmationRoute(iouType, reportID));
-    };
-
-    const updateCategory = (category) => {
-        if (category.searchText === iou.category) {
-            IOU.resetMoneyRequestCategory();
-        } else {
-            IOU.setMoneyRequestCategory(category.searchText);
-        }
-
-        navigateBack();
-    };
-
     return (
         <OptionsSelector
             optionHoveredStyle={styles.hoveredComponentBG}
@@ -81,7 +64,7 @@ function CategoryPicker({policyCategories, reportID, iouType, iou, policyRecentl
             highlightSelectedOptions
             isRowMultilineSupported
             onChangeText={setSearchValue}
-            onSelectRow={updateCategory}
+            onSelectRow={onSubmit}
         />
     );
 }
@@ -97,7 +80,4 @@ export default withOnyx({
     policyRecentlyUsedCategories: {
         key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES}${policyID}`,
     },
-    iou: {
-        key: ONYXKEYS.IOU,
-    },
 })(CategoryPicker);

src/components/ReportActionItem/MoneyRequestView.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
+import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import reportPropTypes from '../../pages/reportPropTypes';
@@ -27,6 +28,7 @@ import Image from '../Image';
 import ReportActionItemImage from './ReportActionItemImage';
 import * as TransactionUtils from '../../libs/TransactionUtils';
 import OfflineWithFeedback from '../OfflineWithFeedback';
+import categoryPropTypes from '../categoryPropTypes';
 
 const propTypes = {
     /** The report currently being looked at */
@@ -35,6 +37,10 @@ const propTypes = {
     /** The expense report or iou report (only will have a value if this is a transaction thread) */
     parentReport: iouReportPropTypes,
 
+    /* Onyx Props */
+    /** Collection of categories attached to a policy */
+    policyCategories: PropTypes.objectOf(categoryPropTypes),
+
     /** The transaction associated with the transactionThread */
     transaction: transactionPropTypes,
 
@@ -46,14 +52,15 @@ const propTypes = {
 
 const defaultProps = {
     parentReport: {},
+    policyCategories: {},
     transaction: {
         amount: 0,
         currency: CONST.CURRENCY.USD,
         comment: {comment: ''},
     },
 };
 
-function MoneyRequestView({report, parentReport, shouldShowHorizontalRule, transaction}) {
+function MoneyRequestView({report, parentReport, policyCategories, shouldShowHorizontalRule, transaction}) {
     const {isSmallScreenWidth} = useWindowDimensions();
     const {translate} = useLocalize();
 
@@ -65,13 +72,15 @@ function MoneyRequestView({report, parentReport, shouldShowHorizontalRule, trans
         currency: transactionCurrency,
         comment: transactionDescription,
         merchant: transactionMerchant,
+        category: transactionCategory,
     } = ReportUtils.getTransactionDetails(transaction);
     const isEmptyMerchant =
         transactionMerchant === '' || transactionMerchant === CONST.TRANSACTION.UNKNOWN_MERCHANT || transactionMerchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT;
     const formattedTransactionAmount = transactionAmount && transactionCurrency && CurrencyUtils.convertToDisplayString(transactionAmount, transactionCurrency);
 
     const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID);
     const canEdit = ReportUtils.canEditMoneyRequest(parentReportAction);
+    const shouldShowCategory = !_.isEmpty(policyCategories) || !_.isEmpty(transactionCategory);
 
     let description = `${translate('iou.amount')} • ${translate('iou.cash')}`;
     if (isSettled) {
@@ -165,6 +174,18 @@ function MoneyRequestView({report, parentReport, shouldShowHorizontalRule, trans
                     subtitleTextStyle={styles.textLabelError}
                 />
             </OfflineWithFeedback>
+            {shouldShowCategory && (
+                <OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.category') || lodashGet(transaction, 'pendingAction')}>
+                    <MenuItemWithTopDescription
+                        description={translate('common.category')}
+                        title={transactionCategory}
+                        interactive={canEdit}
+                        shouldShowRightIcon={canEdit}
+                        titleStyle={styles.flex1}
+                        onPress={() => Navigation.navigate(ROUTES.getEditRequestRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.CATEGORY))}
+                    />
+                </OfflineWithFeedback>
+            )}
             {shouldShowHorizontalRule && <View style={styles.reportHorizontalRule} />}
         </View>
     );
@@ -183,6 +204,9 @@ export default compose(
         policy: {
             key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`,
         },
+        policyCategories: {
+            key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${report.policyID}`,
+        },
         session: {
             key: ONYXKEYS.SESSION,
         },

src/libs/OptionsListUtils.js

@@ -666,6 +666,18 @@ function getCategoryListSections(categories, recentlyUsedCategories, selectedOpt
     const numberOfCategories = _.size(categoriesValues);
     let indexOffset = 0;
 
+    if (numberOfCategories === 0 && selectedOptions.length > 0) {
+        categorySections.push({
+            // "Selected" section
+            title: '',
+            shouldShow: false,
+            indexOffset,
+            data: getCategoryOptionTree(selectedOptions, true),
+        });
+
+        return categorySections;
+    }
+
     if (!_.isEmpty(searchInputValue)) {
         const searchCategories = _.filter(categoriesValues, (category) => category.name.toLowerCase().includes(searchInputValue.toLowerCase()));
 

src/libs/TransactionUtils.js

@@ -141,6 +141,11 @@ function getUpdatedTransaction(transaction, transactionChanges, isFromExpenseRep
         shouldStopSmartscan = true;
     }
 
+    if (_.has(transactionChanges, 'category')) {
+        updatedTransaction.modifiedCategory = transactionChanges.category;
+        shouldStopSmartscan = false;
+    }
+
     if (shouldStopSmartscan && _.has(transaction, 'receipt') && !_.isEmpty(transaction.receipt) && lodashGet(transaction, 'receipt.state') !== CONST.IOU.RECEIPT_STATE.OPEN) {
         updatedTransaction.receipt.state = CONST.IOU.RECEIPT_STATE.OPEN;
     }
@@ -151,6 +156,7 @@ function getUpdatedTransaction(transaction, transactionChanges, isFromExpenseRep
         ...(_.has(transactionChanges, 'amount') && {amount: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE}),
         ...(_.has(transactionChanges, 'currency') && {currency: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE}),
         ...(_.has(transactionChanges, 'merchant') && {merchant: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE}),
+        ...(_.has(transactionChanges, 'category') && {category: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE}),
     };
 
     return updatedTransaction;
@@ -232,12 +238,18 @@ function getMerchant(transaction) {
 }
 
 /**
- * Return the category from the transaction. This "category" field has no "modified" complement.
+ * Return the category from the transaction, return the modifiedCategory if present.
  *
  * @param {Object} transaction
  * @return {String}
  */
 function getCategory(transaction) {
+    const modifiedCategory = lodashGet(transaction, 'modifiedCategory', null);
+
+    if (!_.isNull(modifiedCategory)) {
+        return modifiedCategory;
+    }
+
     return lodashGet(transaction, 'category', '');
 }
 

src/libs/actions/IOU.js

@@ -1122,6 +1122,7 @@ function editMoneyRequest(transactionID, transactionThreadReportID, transactionC
                     created: null,
                     currency: null,
                     merchant: null,
+                    category: null,
                 },
             },
         },
@@ -1157,6 +1158,18 @@ function editMoneyRequest(transactionID, transactionThreadReportID, transactionC
         },
     ];
 
+    // STEP 5: Use the modifiedCategory as a category on success
+    if (!_.isUndefined(updatedTransaction.modifiedCategory)) {
+        successData.push({
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
+            value: {
+                category: updatedTransaction.modifiedCategory,
+                modifiedCategory: null,
+            },
+        });
+    }
+
     // STEP 6: Call the API endpoint
     const {created, amount, currency, comment, merchant, category} = ReportUtils.getTransactionDetails(updatedTransaction);
     API.write(

src/pages/EditRequestCategoryPage.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ScreenWrapper from '../components/ScreenWrapper';
+import HeaderWithBackButton from '../components/HeaderWithBackButton';
+import Navigation from '../libs/Navigation/Navigation';
+import useLocalize from '../hooks/useLocalize';
+import CategoryPicker from '../components/CategoryPicker';
+
+const propTypes = {
+    /** Transaction default category value */
+    defaultCategory: PropTypes.string.isRequired,
+
+    /** The policyID we are getting categories for */
+    policyID: PropTypes.string.isRequired,
+
+    /** Callback to fire when the Save button is pressed  */
+    onSubmit: PropTypes.func.isRequired,
+};
+
+function EditRequestCategoryPage({defaultCategory, policyID, onSubmit}) {
+    const {translate} = useLocalize();
+
+    return (
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            shouldEnableMaxHeight
+        >
+            <HeaderWithBackButton
+                title={translate('common.category')}
+                onBackButtonPress={Navigation.goBack}
+            />
+
+            <CategoryPicker
+                selectedCategory={defaultCategory}
+                policyID={policyID}
+                onSubmit={(category) =>
+                    onSubmit({
+                        category: category.searchText,
+                    })
+                }
+            />
+        </ScreenWrapper>
+    );
+}
+
+EditRequestCategoryPage.propTypes = propTypes;
+EditRequestCategoryPage.displayName = 'EditRequestCategoryPage';
+
+export default EditRequestCategoryPage;

src/pages/EditRequestPage.js

@@ -19,6 +19,7 @@ import reportPropTypes from './reportPropTypes';
 import * as IOU from '../libs/actions/IOU';
 import * as CurrencyUtils from '../libs/CurrencyUtils';
 import FullPageNotFoundView from '../components/BlockingViews/FullPageNotFoundView';
+import EditRequestCategoryPage from './EditRequestCategoryPage';
 
 const propTypes = {
     /** Route from navigation */
@@ -69,7 +70,13 @@ const defaultProps = {
 function EditRequestPage({report, route, parentReport, policy, session}) {
     const parentReportAction = ReportActionsUtils.getParentReportAction(report);
     const transaction = TransactionUtils.getLinkedTransaction(parentReportAction);
-    const {amount: transactionAmount, currency: transactionCurrency, comment: transactionDescription, merchant: transactionMerchant} = ReportUtils.getTransactionDetails(transaction);
+    const {
+        amount: transactionAmount,
+        currency: transactionCurrency,
+        comment: transactionDescription,
+        merchant: transactionMerchant,
+        category: transactionCategory,
+    } = ReportUtils.getTransactionDetails(transaction);
 
     const defaultCurrency = lodashGet(route, 'params.currency', '') || transactionCurrency;
 
@@ -171,6 +178,23 @@ function EditRequestPage({report, route, parentReport, policy, session}) {
         );
     }
 
+    if (fieldToEdit === CONST.EDIT_REQUEST_FIELD.CATEGORY) {
+        return (
+            <EditRequestCategoryPage
+                defaultCategory={transactionCategory}
+                policyID={lodashGet(report, 'policyID', '')}
+                onSubmit={(transactionChanges) => {
+                    let updatedCategory = transactionChanges.category;
+                    // In case the same category has been selected, do reset of the category.
+                    if (transactionCategory === updatedCategory) {
+                        updatedCategory = '';
+                    }
+                    editMoneyRequest({category: updatedCategory});
+                }}
+            />
+        );
+    }
+
     return <FullPageNotFoundView shouldShow />;
 }