diff --git a/src/CONST.ts b/src/CONST.ts index dcd5ac1a8db7..eed1b98ae551 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -1358,6 +1358,7 @@ const CONST = { DATE: 'date', DESCRIPTION: 'description', MERCHANT: 'merchant', + CATEGORY: 'category', RECEIPT: 'receipt', }, FOOTER: { diff --git a/src/components/CategoryPicker/categoryPickerPropTypes.js b/src/components/CategoryPicker/categoryPickerPropTypes.js index b8e24c199a73..6f2800a5d98f 100644 --- a/src/components/CategoryPicker/categoryPickerPropTypes.js +++ b/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}; diff --git a/src/components/CategoryPicker/index.js b/src/components/CategoryPicker/index.js index 9d4e0747cc18..90f72f183815 100644 --- a/src/components/CategoryPicker/index.js +++ b/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 policyCategoriesCount = OptionsListUtils.getEnabledCategoriesCount(_.values(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 ( ); } @@ -97,7 +80,4 @@ export default withOnyx({ policyRecentlyUsedCategories: { key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES}${policyID}`, }, - iou: { - key: ONYXKEYS.IOU, - }, })(CategoryPicker); diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index 4703ca099c7c..13471407914f 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -194,14 +194,23 @@ function MoneyRequestConfirmationList(props) { const {unit, rate, currency} = props.mileageRate; const distance = lodashGet(transaction, 'routes.route0.distance', 0); const shouldCalculateDistanceAmount = props.isDistanceRequest && props.iouAmount === 0; - const shouldCategoryBeEditable = !_.isEmpty(props.policyCategories) && Permissions.canUseCategories(props.betas); + + // A flag for verifying that the current report is a sub-report of a workspace chat + const isPolicyExpenseChat = useMemo(() => ReportUtils.isPolicyExpenseChat(ReportUtils.getRootParentReport(ReportUtils.getReport(props.reportID))), [props.reportID]); + + // A flag for showing the categories field + const shouldShowCategories = isPolicyExpenseChat && Permissions.canUseCategories(props.betas) && OptionsListUtils.hasEnabledOptions(_.values(props.policyCategories)); // Fetches the first tag list of the policy const tagListKey = _.first(_.keys(props.policyTags)); const tagList = lodashGet(props.policyTags, [tagListKey, 'tags'], []); const tagListName = lodashGet(props.policyTags, [tagListKey, 'name'], ''); const canUseTags = Permissions.canUseTags(props.betas); - const shouldShowTags = canUseTags && _.any(tagList, (tag) => tag.enabled); + // A flag for showing the tags field + const shouldShowTags = isPolicyExpenseChat && canUseTags && _.any(tagList, (tag) => tag.enabled); + + // A flag for showing the billable field + const shouldShowBillable = canUseTags && !lodashGet(props.policy, 'disabledFields.defaultBillable', true); const hasRoute = TransactionUtils.hasRoute(transaction); const isDistanceRequestWithoutRoute = props.isDistanceRequest && !hasRoute; @@ -518,7 +527,7 @@ function MoneyRequestConfirmationList(props) { disabled={didConfirm || props.isReadOnly || !isTypeRequest} /> )} - {shouldCategoryBeEditable && ( + {shouldShowCategories && ( )} - {canUseTags && !lodashGet(props.policy, 'disabledFields.defaultBillable', true) && ( + {shouldShowBillable && ( {translate('common.billable')} ReportUtils.isPolicyExpenseChat(ReportUtils.getRootParentReport(report)), [report]); + // A flag for showing categories + const shouldShowCategory = isPolicyExpenseChat && Permissions.canUseCategories(betas) && (transactionCategory || OptionsListUtils.hasEnabledOptions(lodashValues(policyCategories))); let description = `${translate('iou.amount')} • ${translate('iou.cash')}`; if (isSettled) { @@ -170,6 +188,18 @@ function MoneyRequestView({report, parentReport, shouldShowHorizontalRule, trans subtitleTextStyle={styles.textLabelError} /> + {shouldShowCategory && ( + + Navigation.navigate(ROUTES.getEditRequestRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.CATEGORY))} + /> + + )} `${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`, }, policy: { key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`, }, + policyCategories: { + key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${report.policyID}`, + }, session: { key: ONYXKEYS.SESSION, }, diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js index 3c6e879bd423..3bdf77745432 100644 --- a/src/libs/OptionsListUtils.js +++ b/src/libs/OptionsListUtils.js @@ -593,6 +593,30 @@ function isCurrentUser(userDetails) { return _.some(_.keys(loginList), (login) => login.toLowerCase() === userDetailsLogin.toLowerCase()); } +/** + * Calculates count of all enabled options + * + * @param {Object[]} options - an initial strings array + * @param {Boolean} options[].enabled - a flag to enable/disable option in a list + * @param {String} options[].name - a name of an option + * @returns {Number} + */ +function getEnabledCategoriesCount(options) { + return _.filter(options, (option) => option.enabled).length; +} + +/** + * Verifies that there is at least one enabled option + * + * @param {Object[]} options - an initial strings array + * @param {Boolean} options[].enabled - a flag to enable/disable option in a list + * @param {String} options[].name - a name of an option + * @returns {Boolean} + */ +function hasEnabledOptions(options) { + return _.some(options, (option) => option.enabled); +} + /** * Build the options for the category tree hierarchy via indents * @@ -606,6 +630,10 @@ function getCategoryOptionTree(options, isOneLine = false) { const optionCollection = {}; _.each(options, (option) => { + if (!option.enabled) { + return; + } + if (isOneLine) { if (_.has(optionCollection, option.name)) { return; @@ -656,10 +684,26 @@ function getCategoryOptionTree(options, isOneLine = false) { */ function getCategoryListSections(categories, recentlyUsedCategories, selectedOptions, searchInputValue, maxRecentReportsToShow) { const categorySections = []; - const categoriesValues = _.values(categories); + const categoriesValues = _.chain(categories) + .values() + .filter((category) => category.enabled) + .value(); + 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())); @@ -1474,6 +1518,8 @@ export { isSearchStringMatch, shouldOptionShowTooltip, getLastMessageTextForReport, + getEnabledCategoriesCount, + hasEnabledOptions, getCategoryOptionTree, formatMemberForList, }; diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index edf646d0266b..a5af66f08460 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -1641,6 +1641,29 @@ function getParentReport(report) { return lodashGet(allReports, `${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`, {}); } +/** + * Returns the root parentReport if the given report is nested. + * Uses recursion to iterate any depth of nested reports. + * + * @param {Object} report + * @returns {Object} + */ +function getRootParentReport(report) { + if (!report) { + return {}; + } + + // Returns the current report as the root report, because it does not have a parentReportID + if (!report.parentReportID) { + return report; + } + + const parentReport = getReport(report.parentReportID); + + // Runs recursion to iterate a parent report + return getRootParentReport(parentReport); +} + /** * Get the title for a report. * @@ -3676,6 +3699,7 @@ export { isAllowedToComment, getBankAccountRoute, getParentReport, + getRootParentReport, getTaskParentReportActionIDInAssigneeReport, getReportPreviewMessage, getModifiedExpenseMessage, diff --git a/src/libs/TransactionUtils.js b/src/libs/TransactionUtils.js index cea530f6f47a..5dcfbc467c20 100644 --- a/src/libs/TransactionUtils.js +++ b/src/libs/TransactionUtils.js @@ -147,6 +147,10 @@ function getUpdatedTransaction(transaction, transactionChanges, isFromExpenseRep shouldStopSmartscan = true; } + if (_.has(transactionChanges, 'category')) { + updatedTransaction.category = transactionChanges.category; + } + 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; } @@ -157,6 +161,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; diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js index 08b032e383b8..36d512c8d843 100644 --- a/src/libs/actions/IOU.js +++ b/src/libs/actions/IOU.js @@ -1191,6 +1191,7 @@ function editMoneyRequest(transactionID, transactionThreadReportID, transactionC created: null, currency: null, merchant: null, + category: null, }, }, }, diff --git a/src/pages/EditRequestCategoryPage.js b/src/pages/EditRequestCategoryPage.js new file mode 100644 index 000000000000..b1ee6f3384f6 --- /dev/null +++ b/src/pages/EditRequestCategoryPage.js @@ -0,0 +1,51 @@ +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(); + + const selectCategory = (category) => { + onSubmit({ + category: category.searchText, + }); + }; + + return ( + + + + + + ); +} + +EditRequestCategoryPage.propTypes = propTypes; +EditRequestCategoryPage.displayName = 'EditRequestCategoryPage'; + +export default EditRequestCategoryPage; diff --git a/src/pages/EditRequestPage.js b/src/pages/EditRequestPage.js index 2123f1bf10da..fedbc61a6e15 100644 --- a/src/pages/EditRequestPage.js +++ b/src/pages/EditRequestPage.js @@ -20,6 +20,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 */ @@ -70,7 +71,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; @@ -172,6 +179,23 @@ function EditRequestPage({report, route, parentReport, policy, session}) { ); } + if (fieldToEdit === CONST.EDIT_REQUEST_FIELD.CATEGORY) { + return ( + { + let updatedCategory = transactionChanges.category; + // In case the same category has been selected, do reset of the category. + if (transactionCategory === updatedCategory) { + updatedCategory = ''; + } + editMoneyRequest({category: updatedCategory}); + }} + /> + ); + } + if (fieldToEdit === CONST.EDIT_REQUEST_FIELD.RECEIPT) { return ( { + if (category.searchText === iou.category) { + IOU.resetMoneyRequestCategory(); + } else { + IOU.setMoneyRequestCategory(category.searchText); + } + + Navigation.goBack(ROUTES.getMoneyRequestConfirmationRoute(iouType, reportID)); + }; + return ( ); @@ -69,4 +86,7 @@ export default withOnyx({ report: { key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${lodashGet(route, 'params.reportID', '')}`, }, + iou: { + key: ONYXKEYS.IOU, + }, })(MoneyRequestCategoryPage); diff --git a/src/pages/iou/propTypes/index.js b/src/pages/iou/propTypes/index.js index 5ecd00d11876..586f8424a2c2 100644 --- a/src/pages/iou/propTypes/index.js +++ b/src/pages/iou/propTypes/index.js @@ -18,6 +18,9 @@ const iouPropTypes = PropTypes.shape({ /** The merchant name */ merchant: PropTypes.string, + /** The category name */ + category: PropTypes.string, + /** The tag */ tag: PropTypes.string, @@ -37,6 +40,7 @@ const iouDefaultProps = { currency: CONST.CURRENCY.USD, comment: '', merchant: '', + category: '', tag: '', created: '', participants: [], diff --git a/tests/unit/OptionsListUtilsTest.js b/tests/unit/OptionsListUtilsTest.js index 637dc1e18376..6f20e48835fd 100644 --- a/tests/unit/OptionsListUtilsTest.js +++ b/tests/unit/OptionsListUtilsTest.js @@ -660,6 +660,7 @@ describe('OptionsListUtils', () => { const selectedOptions = [ { name: 'Medical', + enabled: true, }, ]; const smallCategoriesList = { @@ -686,13 +687,6 @@ describe('OptionsListUtils', () => { shouldShow: false, indexOffset: 0, data: [ - { - text: 'Taxi', - keyForList: 'Taxi', - searchText: 'Taxi', - tooltipText: 'Taxi', - isDisabled: true, - }, { text: 'Restaurant', keyForList: 'Restaurant', @@ -817,7 +811,7 @@ describe('OptionsListUtils', () => { keyForList: 'Medical', searchText: 'Medical', tooltipText: 'Medical', - isDisabled: true, + isDisabled: false, }, ], }, @@ -826,13 +820,6 @@ describe('OptionsListUtils', () => { shouldShow: true, indexOffset: 1, data: [ - { - text: 'Taxi', - keyForList: 'Taxi', - searchText: 'Taxi', - tooltipText: 'Taxi', - isDisabled: true, - }, { text: 'Restaurant', keyForList: 'Restaurant', @@ -847,13 +834,6 @@ describe('OptionsListUtils', () => { shouldShow: true, indexOffset: 3, data: [ - { - text: 'Taxi', - keyForList: 'Taxi', - searchText: 'Taxi', - tooltipText: 'Taxi', - isDisabled: true, - }, { text: 'Restaurant', keyForList: 'Restaurant', @@ -882,13 +862,6 @@ describe('OptionsListUtils', () => { tooltipText: 'Milk', isDisabled: false, }, - { - text: ' Vegetables', - keyForList: 'Vegetables', - searchText: 'Food: Vegetables', - tooltipText: 'Vegetables', - isDisabled: true, - }, { text: 'Cars', keyForList: 'Cars', @@ -903,13 +876,6 @@ describe('OptionsListUtils', () => { tooltipText: 'Audi', isDisabled: false, }, - { - text: ' BMW', - keyForList: 'BMW', - searchText: 'Cars: BMW', - tooltipText: 'BMW', - isDisabled: true, - }, { text: ' Mercedes-Benz', keyForList: 'Mercedes-Benz', @@ -938,13 +904,6 @@ describe('OptionsListUtils', () => { tooltipText: 'Breakfast', isDisabled: false, }, - { - text: ' Dinner', - keyForList: 'Dinner', - searchText: 'Travel: Meals: Dinner', - tooltipText: 'Dinner', - isDisabled: true, - }, { text: ' Lunch', keyForList: 'Lunch', @@ -982,13 +941,6 @@ describe('OptionsListUtils', () => { tooltipText: 'Food: Milk', isDisabled: false, }, - { - text: 'Food: Vegetables', - keyForList: 'Food: Vegetables', - searchText: 'Food: Vegetables', - tooltipText: 'Food: Vegetables', - isDisabled: true, - }, ], }, ]; @@ -1000,6 +952,23 @@ describe('OptionsListUtils', () => { data: [], }, ]; + const emptyCategoriesList = {}; + const emptySelectedResultList = [ + { + title: '', + shouldShow: false, + indexOffset: 0, + data: [ + { + text: 'Medical', + keyForList: 'Medical', + searchText: 'Medical', + tooltipText: 'Medical', + isDisabled: false, + }, + ], + }, + ]; const smallResult = OptionsListUtils.getFilteredOptions(REPORTS, PERSONAL_DETAILS, [], emptySearch, [], [], false, false, true, smallCategoriesList); expect(smallResult.categoryOptions).toStrictEqual(smallResultList); @@ -1054,6 +1023,9 @@ describe('OptionsListUtils', () => { recentlyUsedCategories, ); expect(largeWrongSearchResult.categoryOptions).toStrictEqual(largeWrongSearchResultList); + + const emptyResult = OptionsListUtils.getFilteredOptions(REPORTS, PERSONAL_DETAILS, [], search, selectedOptions, [], false, false, true, emptyCategoriesList); + expect(emptyResult.categoryOptions).toStrictEqual(emptySelectedResultList); }); it('getFilteredOptions() for tags', () => { @@ -1443,13 +1415,6 @@ describe('OptionsListUtils', () => { }, }; const result = [ - { - text: 'Taxi', - keyForList: 'Taxi', - searchText: 'Taxi', - tooltipText: 'Taxi', - isDisabled: true, - }, { text: 'Restaurant', keyForList: 'Restaurant', @@ -1478,13 +1443,6 @@ describe('OptionsListUtils', () => { tooltipText: 'Milk', isDisabled: false, }, - { - text: ' Vegetables', - keyForList: 'Vegetables', - searchText: 'Food: Vegetables', - tooltipText: 'Vegetables', - isDisabled: true, - }, { text: 'Cars', keyForList: 'Cars', @@ -1499,13 +1457,6 @@ describe('OptionsListUtils', () => { tooltipText: 'Audi', isDisabled: false, }, - { - text: ' BMW', - keyForList: 'BMW', - searchText: 'Cars: BMW', - tooltipText: 'BMW', - isDisabled: true, - }, { text: ' Mercedes-Benz', keyForList: 'Mercedes-Benz', @@ -1513,13 +1464,6 @@ describe('OptionsListUtils', () => { tooltipText: 'Mercedes-Benz', isDisabled: false, }, - { - text: 'Medical', - keyForList: 'Medical', - searchText: 'Medical', - tooltipText: 'Medical', - isDisabled: true, - }, { text: 'Travel', keyForList: 'Travel', @@ -1541,13 +1485,6 @@ describe('OptionsListUtils', () => { tooltipText: 'Breakfast', isDisabled: false, }, - { - text: ' Dinner', - keyForList: 'Dinner', - searchText: 'Travel: Meals: Dinner', - tooltipText: 'Dinner', - isDisabled: true, - }, { text: ' Lunch', keyForList: 'Lunch',