Categories UI/UX

src/ONYXKEYS.ts

@@ -236,6 +236,9 @@ const ONYXKEYS = {
     // Max width supported for HTML <canvas> element
     MAX_CANVAS_WIDTH: 'maxCanvasWidth',
 
+    // A list of recently used categories of a policy
+    RECENTLY_USED_POLICY_CATEGORIES: 'recentlyUsedPolicyCategories_',
+
     /** Collection Keys */
     COLLECTION: {
         DOWNLOAD: 'download_',
@@ -371,11 +374,12 @@ type OnyxValues = {
     [ONYXKEYS.MAX_CANVAS_AREA]: number;
     [ONYXKEYS.MAX_CANVAS_HEIGHT]: number;
     [ONYXKEYS.MAX_CANVAS_WIDTH]: number;
+    [ONYXKEYS.RECENTLY_USED_POLICY_CATEGORIES]: OnyxTypes.PolicyCategory[];
 
     // Collections
     [ONYXKEYS.COLLECTION.DOWNLOAD]: OnyxTypes.Download;
     [ONYXKEYS.COLLECTION.POLICY]: OnyxTypes.Policy;
-    [ONYXKEYS.COLLECTION.POLICY_CATEGORIES]: unknown;
+    [ONYXKEYS.COLLECTION.POLICY_CATEGORIES]: OnyxTypes.PolicyCategory;
     [ONYXKEYS.COLLECTION.POLICY_MEMBERS]: OnyxTypes.PolicyMember;
     [ONYXKEYS.COLLECTION.DEPRECATED_POLICY_MEMBER_LIST]: OnyxTypes.PolicyMember;
     [ONYXKEYS.COLLECTION.WORKSPACE_INVITE_MEMBERS_DRAFT]: Record<string, number>;

src/components/CategoryPicker/categoryPickerPropTypes.js

@@ -14,11 +14,23 @@ const propTypes = {
     /* Onyx Props */
     /** Collection of categories attached to a policy */
     policyCategories: PropTypes.objectOf(categoryPropTypes),
+
+    /* Onyx Props */
+    /** Collection of categories attached to a policy */
+    recentlyUsedPolicyCategories: PropTypes.arrayOf(categoryPropTypes),
+
+    /* Onyx Props */
+    /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
+    iou: PropTypes.shape({
+        category: PropTypes.string.isRequired,
+    }),
 };
 
 const defaultProps = {
     policyID: '',
-    policyCategories: null,
+    policyCategories: {},
+    recentlyUsedPolicyCategories: [],
+    iou: {},
 };
 
 export {propTypes, defaultProps};

src/components/CategoryPicker/index.js

@@ -1,47 +1,94 @@
-import React, {useMemo} from 'react';
-import _ from 'underscore';
+import React, {useMemo, useState} from 'react';
 import {withOnyx} from 'react-native-onyx';
+import _ from 'underscore';
+import lodashGet from 'lodash/get';
 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';
+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, policyID, iouType, iou, recentlyUsedPolicyCategories}) {
+    const {translate} = useLocalize();
+    const [searchValue, setSearchValue] = useState('');
+
+    const policyCategoriesAmount = _.size(policyCategories);
 
-function CategoryPicker({policyCategories, reportID, iouType}) {
-    const sections = useMemo(() => {
-        const categoryList = _.chain(policyCategories)
-            .values()
-            .map((category) => ({
-                text: category.name,
-                keyForList: category.name,
-                tooltipText: category.name,
-            }))
-            .value();
+    const selectedOptions = useMemo(() => {
+        if (!iou.category) {
+            return [];
+        }
 
         return [
             {
-                data: categoryList,
+                name: iou.category,
+                enabled: true,
+                accountID: null,
             },
         ];
-    }, [policyCategories]);
+    }, [iou.category]);
+
+    const initialFocusedIndex = useMemo(() => {
+        if (policyCategoriesAmount < CONST.CATEGORY_LIST_THRESHOLD && selectedOptions.length > 0) {
+            return _.chain(policyCategories)
+                .values()
+                .findIndex((category) => category.name === selectedOptions[0].name, true)
+                .value();
+        }
+
+        return 0;
+    }, [policyCategories, policyCategoriesAmount, selectedOptions]);
+
+    const sections = useMemo(
+        () => OptionsListUtils.getNewChatOptions({}, {}, [], searchValue, selectedOptions, [], false, false, true, policyCategories, recentlyUsedPolicyCategories, false).categoryOptions,
+        [policyCategories, recentlyUsedPolicyCategories, searchValue, selectedOptions],
+    );
+
+    const headerMessage = OptionsListUtils.getHeaderMessage(lodashGet(sections, '[0].data.length', 0) > 0, false, searchValue);
+    const shouldShowTextInput = policyCategoriesAmount >= CONST.CATEGORY_LIST_THRESHOLD;
 
     const navigateBack = () => {
         Navigation.goBack(ROUTES.getMoneyRequestConfirmationRoute(iouType, reportID));
     };
 
+    const updateCategory = (category) => {
+        if (category.searchText === iou.category) {
+            IOU.resetMoneyRequestCategory();
+        } else {
+            IOU.setMoneyRequestCategory(
+                {
+                    name: category.searchText,
+                    enabled: true,
+                },
+                policyID,
+                recentlyUsedPolicyCategories,
+            );
+        }
+
+        navigateBack();
+    };
+
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
-            {({safeAreaPaddingBottomStyle}) => (
-                <OptionsList
-                    optionHoveredStyle={styles.hoveredComponentBG}
-                    contentContainerStyles={[safeAreaPaddingBottomStyle]}
-                    sections={sections}
-                    onSelectRow={navigateBack}
-                />
-            )}
-        </ScreenWrapper>
+        <OptionsSelector
+            optionHoveredStyle={styles.hoveredComponentBG}
+            sections={sections}
+            selectedOptions={selectedOptions}
+            value={searchValue}
+            initialFocusedIndex={initialFocusedIndex}
+            headerMessage={headerMessage}
+            shouldShowTextInput={shouldShowTextInput}
+            textInputLabel={translate('common.search')}
+            boldStyle
+            highlightSelectedOptions
+            isRowMultilineSupported
+            onChangeText={setSearchValue}
+            onSelectRow={updateCategory}
+        />
     );
 }
 
@@ -53,4 +100,10 @@ export default withOnyx({
     policyCategories: {
         key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`,
     },
+    recentlyUsedPolicyCategories: {
+        key: ({policyID}) => `${ONYXKEYS.RECENTLY_USED_POLICY_CATEGORIES}${policyID}`,
+    },
+    iou: {
+        key: ONYXKEYS.IOU,
+    },
 })(CategoryPicker);

src/components/MoneyRequestConfirmationList.js

@@ -171,7 +171,7 @@ 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 shouldCategoryEditable = !_.isEmpty(props.policyCategories) && !props.isDistanceRequest;
+    const shouldCategoryBeEditable = !_.isEmpty(props.policyCategories);
 
     const formattedAmount = CurrencyUtils.convertToDisplayString(
         shouldCalculateDistanceAmount ? DistanceRequestUtils.getDistanceRequestAmount(distance, unit, rate) : props.iouAmount,
@@ -484,7 +484,7 @@ function MoneyRequestConfirmationList(props) {
                             disabled={didConfirm || props.isReadOnly || !isTypeRequest}
                         />
                     )}
-                    {shouldCategoryEditable && (
+                    {shouldCategoryBeEditable && (
                         <MenuItemWithTopDescription
                             shouldShowRightIcon={!props.isReadOnly}
                             title={props.iouCategory}

src/components/OptionRow.js

@@ -39,6 +39,9 @@ const propTypes = {
     /** Whether we should show the selected state */
     showSelectedState: PropTypes.bool,
 
+    /** Whether we highlight selected option */
+    highlightSelected: PropTypes.bool,
+
     /** Whether this item is selected */
     isSelected: PropTypes.bool,
 
@@ -57,6 +60,9 @@ const propTypes = {
     /** Whether to remove the lateral padding and align the content with the margins */
     shouldDisableRowInnerPadding: PropTypes.bool,
 
+    /** Whether to wrap large text up to 2 lines */
+    isMultilineSupported: PropTypes.bool,
+
     style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
 
     ...withLocalizePropTypes,
@@ -65,12 +71,14 @@ const propTypes = {
 const defaultProps = {
     hoverStyle: styles.sidebarLinkHover,
     showSelectedState: false,
+    highlightSelected: false,
     isSelected: false,
     boldStyle: false,
     showTitleTooltip: false,
     onSelectRow: undefined,
     isDisabled: false,
     optionIsFocused: false,
+    isMultilineSupported: false,
     style: null,
     shouldHaveOptionSeparator: false,
     shouldDisableRowInnerPadding: false,
@@ -89,9 +97,11 @@ class OptionRow extends Component {
         return (
             this.state.isDisabled !== nextState.isDisabled ||
             this.props.isDisabled !== nextProps.isDisabled ||
+            this.props.isMultilineSupported !== nextProps.isMultilineSupported ||
             this.props.isSelected !== nextProps.isSelected ||
             this.props.shouldHaveOptionSeparator !== nextProps.shouldHaveOptionSeparator ||
             this.props.showSelectedState !== nextProps.showSelectedState ||
+            this.props.highlightSelected !== nextProps.highlightSelected ||
             this.props.showTitleTooltip !== nextProps.showTitleTooltip ||
             !_.isEqual(this.props.option.icons, nextProps.option.icons) ||
             this.props.optionIsFocused !== nextProps.optionIsFocused ||
@@ -119,7 +129,7 @@ class OptionRow extends Component {
         let pressableRef = null;
         const textStyle = this.props.optionIsFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText;
         const textUnreadStyle = this.props.boldStyle || this.props.option.boldStyle ? [textStyle, styles.sidebarLinkTextBold] : [textStyle];
-        const displayNameStyle = StyleUtils.combineStyles(styles.optionDisplayName, textUnreadStyle, this.props.style, styles.pre);
+        const displayNameStyle = StyleUtils.combineStyles(styles.optionDisplayName, textUnreadStyle, this.props.style, styles.pre, this.state.isDisabled ? styles.optionRowDisabled : {});
         const alternateTextStyle = StyleUtils.combineStyles(
             textStyle,
             styles.optionAlternateText,
@@ -182,6 +192,7 @@ class OptionRow extends Component {
                                 this.props.optionIsFocused ? styles.sidebarLinkActive : null,
                                 this.props.shouldHaveOptionSeparator && styles.borderTop,
                                 !this.props.onSelectRow && !this.props.isDisabled ? styles.cursorDefault : null,
+                                this.props.isSelected && this.props.highlightSelected && styles.optionRowSelected,
                             ]}
                             accessibilityLabel={this.props.option.text}
                             accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
@@ -216,7 +227,7 @@ class OptionRow extends Component {
                                             fullTitle={this.props.option.text}
                                             displayNamesWithTooltips={displayNamesWithTooltips}
                                             tooltipEnabled={this.props.showTitleTooltip}
-                                            numberOfLines={1}
+                                            numberOfLines={this.props.isMultilineSupported ? 2 : 1}
                                             textStyles={displayNameStyle}
                                             shouldUseFullTitle={
                                                 this.props.option.isChatRoom ||
@@ -249,6 +260,14 @@ class OptionRow extends Component {
                                         </View>
                                     )}
                                     {this.props.showSelectedState && <SelectCircle isChecked={this.props.isSelected} />}
+                                    {this.props.isSelected && this.props.highlightSelected && (
+                                        <View style={styles.defaultCheckmarkWrapper}>
+                                            <Icon
+                                                src={Expensicons.Checkmark}
+                                                fill={themeColors.iconSuccessFill}
+                                            />
+                                        </View>
+                                    )}
                                 </View>
                             </View>
                             {Boolean(this.props.option.customIcon) && (

src/components/OptionsList/BaseOptionsList.js

@@ -56,10 +56,12 @@ function BaseOptionsList({
     shouldDisableRowInnerPadding,
     disableFocusOptions,
     canSelectMultipleOptions,
+    highlightSelectedOptions,
     onSelectRow,
     boldStyle,
     isDisabled,
     innerRef,
+    isRowMultilineSupported,
 }) {
     const flattenedData = useRef();
     const previousSections = usePrevious(sections);
@@ -175,12 +177,14 @@ function BaseOptionsList({
                 hoverStyle={optionHoveredStyle}
                 optionIsFocused={!disableFocusOptions && !isItemDisabled && focusedIndex === index + section.indexOffset}
                 onSelectRow={onSelectRow}
-                isSelected={Boolean(_.find(selectedOptions, (option) => option.accountID === item.accountID))}
+                isSelected={Boolean(_.find(selectedOptions, (option) => option.accountID === item.accountID || option.name === item.searchText))}
                 showSelectedState={canSelectMultipleOptions}
+                highlightSelected={highlightSelectedOptions}
                 boldStyle={boldStyle}
                 isDisabled={isItemDisabled}
                 shouldHaveOptionSeparator={index > 0 && shouldHaveOptionSeparator}
                 shouldDisableRowInnerPadding={shouldDisableRowInnerPadding}
+                isMultilineSupported={isRowMultilineSupported}
             />
         );
     };

src/components/OptionsList/optionsListPropTypes.js

@@ -40,6 +40,9 @@ const propTypes = {
     /** Whether we can select multiple options or not */
     canSelectMultipleOptions: PropTypes.bool,
 
+    /** Whether we highlight selected options */
+    highlightSelectedOptions: PropTypes.bool,
+
     /** Whether to show headers above each section or not */
     hideSectionHeaders: PropTypes.bool,
 
@@ -78,6 +81,9 @@ const propTypes = {
 
     /** Whether to show the scroll bar */
     showScrollIndicator: PropTypes.bool,
+
+    /** Whether to wrap large text up to 2 lines */
+    isRowMultilineSupported: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -88,6 +94,7 @@ const defaultProps = {
     focusedIndex: 0,
     selectedOptions: [],
     canSelectMultipleOptions: false,
+    highlightSelectedOptions: false,
     hideSectionHeaders: false,
     disableFocusOptions: false,
     boldStyle: false,
@@ -101,6 +108,7 @@ const defaultProps = {
     shouldHaveOptionSeparator: false,
     shouldDisableRowInnerPadding: false,
     showScrollIndicator: false,
+    isRowMultilineSupported: false,
 };
 
 export {propTypes, defaultProps};

src/components/OptionsSelector/BaseOptionsSelector.js

@@ -139,6 +139,10 @@ class BaseOptionsSelector extends Component {
      * @returns {Number}
      */
     getInitiallyFocusedIndex(allOptions) {
+        if (_.isNumber(this.props.initialFocusedIndex)) {
+            return this.props.initialFocusedIndex;
+        }
+
         if (this.props.selectedOptions.length > 0) {
             return this.props.selectedOptions.length;
         }
@@ -366,6 +370,7 @@ class BaseOptionsSelector extends Component {
                 showTitleTooltip={this.props.showTitleTooltip}
                 isDisabled={this.props.isDisabled}
                 shouldHaveOptionSeparator={this.props.shouldHaveOptionSeparator}
+                highlightSelectedOptions={this.props.highlightSelectedOptions}
                 onLayout={() => {
                     if (this.props.selectedOptions.length === 0) {
                         this.scrollToIndex(this.state.focusedIndex, false);
@@ -380,6 +385,7 @@ class BaseOptionsSelector extends Component {
                 listStyles={this.props.listStyles}
                 isLoading={!this.props.shouldShowOptions}
                 showScrollIndicator={this.props.showScrollIndicator}
+                isRowMultilineSupported={this.props.isRowMultilineSupported}
             />
         );
         return (