Add card advanced filter for Search

src/ROUTES.ts

@@ -54,6 +54,7 @@ const ROUTES = {
     SEARCH_ADVANCED_FILTERS_REPORT_ID: 'search/filters/reportID',
 
     SEARCH_ADVANCED_FILTERS_CATEGORY: 'search/filters/category',
+    SEARCH_ADVANCED_FILTERS_CARD: 'search/filters/card',
 
     SEARCH_REPORT: {
         route: 'search/view/:reportID',

src/SCREENS.ts

@@ -39,6 +39,7 @@ const SCREENS = {
         ADVANCED_FILTERS_MERCHANT_RHP: 'Search_Advanced_Filters_Merchant_RHP',
         ADVANCED_FILTERS_REPORT_ID_RHP: 'Search_Advanced_Filters_ReportID_RHP',
         ADVANCED_FILTERS_CATEGORY_RHP: 'Search_Advanced_Filters_Category_RHP',
+        ADVANCED_FILTERS_CARD_RHP: 'Search_Advanced_Filters_Card_RHP',
         TRANSACTION_HOLD_REASON_RHP: 'Search_Transaction_Hold_Reason_RHP',
         BOTTOM_TAB: 'Search_Bottom_Tab',
     },

src/components/SelectionList/CardListItem.tsx

@@ -0,0 +1,103 @@
+import {Str} from 'expensify-common';
+import React, {useCallback} from 'react';
+import {View} from 'react-native';
+import Icon from '@components/Icon';
+import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
+import SelectCircle from '@components/SelectCircle';
+import TextWithTooltip from '@components/TextWithTooltip';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+import type {BankIcon} from '@src/types/onyx/Bank';
+import BaseListItem from './BaseListItem';
+import type {BaseListItemProps, ListItem} from './types';
+
+type CardListItemProps<TItem extends ListItem> = BaseListItemProps<TItem & {bankIcon?: BankIcon}>;
+
+function CardListItem<TItem extends ListItem>({
+    item,
+    isFocused,
+    showTooltip,
+    isDisabled,
+    canSelectMultiple,
+    onSelectRow,
+    onCheckboxPress,
+    onDismissError,
+    rightHandSideComponent,
+    onFocus,
+    shouldSyncFocus,
+}: CardListItemProps<TItem>) {
+    const styles = useThemeStyles();
+
+    const handleCheckboxPress = useCallback(() => {
+        if (onCheckboxPress) {
+            onCheckboxPress(item);
+        } else {
+            onSelectRow(item);
+        }
+    }, [item, onCheckboxPress, onSelectRow]);
+
+    return (
+        <BaseListItem
+            item={item}
+            wrapperStyle={[styles.flex1, styles.justifyContentBetween, styles.sidebarLinkInner, styles.userSelectNone, styles.peopleRow, isFocused && styles.sidebarLinkActive]}
+            isFocused={isFocused}
+            isDisabled={isDisabled}
+            showTooltip={showTooltip}
+            canSelectMultiple={canSelectMultiple}
+            onSelectRow={onSelectRow}
+            onDismissError={onDismissError}
+            rightHandSideComponent={rightHandSideComponent}
+            errors={item.errors}
+            pendingAction={item.pendingAction}
+            keyForList={item.keyForList}
+            onFocus={onFocus}
+            shouldSyncFocus={shouldSyncFocus}
+        >
+            <>
+                {item.bankIcon && (
+                    <View style={[styles.mr3]}>
+                        <Icon
+                            src={item.bankIcon.icon}
+                            width={item.bankIcon.iconWidth}
+                            height={item.bankIcon.iconHeight}
+                            additionalStyles={item.bankIcon.iconStyles}
+                        />
+                    </View>
+                )}
+                <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch, styles.optionRow]}>
+                    <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                        <TextWithTooltip
+                            shouldShowTooltip={showTooltip}
+                            text={Str.removeSMSDomain(item.text ?? '')}
+                            style={[
+                                styles.optionDisplayName,
+                                isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
+                                item.isBold !== false && styles.sidebarLinkTextBold,
+                                styles.pre,
+                                item.alternateText ? styles.mb1 : null,
+                            ]}
+                        />
+                    </View>
+                </View>
+                {canSelectMultiple && !item.isDisabled && (
+                    <PressableWithFeedback
+                        onPress={handleCheckboxPress}
+                        disabled={isDisabled}
+                        role={CONST.ROLE.BUTTON}
+                        accessibilityLabel={item.text ?? ''}
+                        style={[styles.ml2, styles.optionSelectCircle]}
+                    >
+                        <SelectCircle
+                            isChecked={item.isSelected ?? false}
+                            selectCircleStyles={styles.ml0}
+                        />
+                    </PressableWithFeedback>
+                )}
+            </>
+        </BaseListItem>
+    );
+}
+
+CardListItem.displayName = 'CardListItem';
+
+export default CardListItem;

src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx

@@ -518,6 +518,7 @@ const SearchAdvancedFiltersModalStackNavigator = createModalStackNavigator<Searc
     [SCREENS.SEARCH.ADVANCED_FILTERS_MERCHANT_RHP]: () => require<ReactComponentModule>('../../../../pages/Search/SearchFiltersMerchantPage').default,
     [SCREENS.SEARCH.ADVANCED_FILTERS_REPORT_ID_RHP]: () => require<ReactComponentModule>('../../../../pages/Search/SearchFiltersReportIDPage').default,
     [SCREENS.SEARCH.ADVANCED_FILTERS_CATEGORY_RHP]: () => require<ReactComponentModule>('../../../../pages/Search/SearchFiltersCategoryPage').default,
+    [SCREENS.SEARCH.ADVANCED_FILTERS_CARD_RHP]: () => require<ReactComponentModule>('../../../../pages/Search/SearchFiltersCardPage').default,
 });
 
 const RestrictedActionModalStackNavigator = createModalStackNavigator<SearchReportParamList>({

src/libs/Navigation/linkingConfig/config.ts

@@ -1021,6 +1021,7 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                         [SCREENS.SEARCH.ADVANCED_FILTERS_DESCRIPTION_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_DESCRIPTION,
                         [SCREENS.SEARCH.ADVANCED_FILTERS_REPORT_ID_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_REPORT_ID,
                         [SCREENS.SEARCH.ADVANCED_FILTERS_CATEGORY_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_CATEGORY,
+                        [SCREENS.SEARCH.ADVANCED_FILTERS_CARD_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_CARD,
                     },
                 },
                 [SCREENS.RIGHT_MODAL.RESTRICTED_ACTION]: {

src/libs/SearchParser/searchParser.js

@@ -194,13 +194,12 @@ function peg$parse(input, options) {
   var peg$c16 = "category";
   var peg$c17 = "tag";
   var peg$c18 = "taxRate";
-  var peg$c19 = "card";
+  var peg$c19 = "cardID";
   var peg$c20 = "reportID";
   var peg$c21 = "keyword";
   var peg$c22 = "sortBy";
   var peg$c23 = "sortOrder";
-  var peg$c24 = "offset";
-  var peg$c25 = "\"";
+  var peg$c24 = "\"";
 
   var peg$r0 = /^[:=]/;
   var peg$r1 = /^[^"\r\n]/;
@@ -227,17 +226,16 @@ function peg$parse(input, options) {
   var peg$e17 = peg$literalExpectation("category", false);
   var peg$e18 = peg$literalExpectation("tag", false);
   var peg$e19 = peg$literalExpectation("taxRate", false);
-  var peg$e20 = peg$literalExpectation("card", false);
+  var peg$e20 = peg$literalExpectation("cardID", false);
   var peg$e21 = peg$literalExpectation("reportID", false);
   var peg$e22 = peg$literalExpectation("keyword", false);
   var peg$e23 = peg$literalExpectation("sortBy", false);
   var peg$e24 = peg$literalExpectation("sortOrder", false);
-  var peg$e25 = peg$literalExpectation("offset", false);
-  var peg$e26 = peg$literalExpectation("\"", false);
-  var peg$e27 = peg$classExpectation(["\"", "\r", "\n"], true, false);
-  var peg$e28 = peg$classExpectation([["A", "Z"], ["a", "z"], ["0", "9"], "_", "@", ".", "/", "#", "&", "+", "-", "\\", "'", ","], false, false);
-  var peg$e29 = peg$otherExpectation("whitespace");
-  var peg$e30 = peg$classExpectation([" ", "\t", "\r", "\n"], false, false);
+  var peg$e25 = peg$literalExpectation("\"", false);
+  var peg$e26 = peg$classExpectation(["\"", "\r", "\n"], true, false);
+  var peg$e27 = peg$classExpectation([["A", "Z"], ["a", "z"], ["0", "9"], "_", "@", ".", "/", "#", "&", "+", "-", "\\", "'", ","], false, false);
+  var peg$e28 = peg$otherExpectation("whitespace");
+  var peg$e29 = peg$classExpectation([" ", "\t", "\r", "\n"], false, false);
 
   var peg$f0 = function(filters) { return applyDefaults(filters); };
   var peg$f1 = function(head, tail) {
@@ -282,16 +280,15 @@ function peg$parse(input, options) {
   var peg$f20 = function() { return "category"; };
   var peg$f21 = function() { return "tag"; };
   var peg$f22 = function() { return "taxRate"; };
-  var peg$f23 = function() { return "card"; };
+  var peg$f23 = function() { return "cardID"; };
   var peg$f24 = function() { return "reportID"; };
   var peg$f25 = function() { return "keyword"; };
   var peg$f26 = function() { return "sortBy"; };
   var peg$f27 = function() { return "sortOrder"; };
-  var peg$f28 = function() { return "offset"; };
-  var peg$f29 = function(parts) { return parts.join(''); };
+  var peg$f28 = function(parts) { return parts.join(''); };
+  var peg$f29 = function(chars) { return chars.join(''); };
   var peg$f30 = function(chars) { return chars.join(''); };
-  var peg$f31 = function(chars) { return chars.join(''); };
-  var peg$f32 = function() { return "and"; };
+  var peg$f31 = function() { return "and"; };
   var peg$currPos = options.peg$currPos | 0;
   var peg$savedPos = peg$currPos;
   var peg$posDetailsCache = [{ line: 1, column: 1 }];
@@ -832,9 +829,9 @@ function peg$parse(input, options) {
                               s0 = s1;
                               if (s0 === peg$FAILED) {
                                 s0 = peg$currPos;
-                                if (input.substr(peg$currPos, 4) === peg$c19) {
+                                if (input.substr(peg$currPos, 6) === peg$c19) {
                                   s1 = peg$c19;
-                                  peg$currPos += 4;
+                                  peg$currPos += 6;
                                 } else {
                                   s1 = peg$FAILED;
                                   if (peg$silentFails === 0) { peg$fail(peg$e20); }
@@ -900,21 +897,6 @@ function peg$parse(input, options) {
                                           s1 = peg$f27();
                                         }
                                         s0 = s1;
-                                        if (s0 === peg$FAILED) {
-                                          s0 = peg$currPos;
-                                          if (input.substr(peg$currPos, 6) === peg$c24) {
-                                            s1 = peg$c24;
-                                            peg$currPos += 6;
-                                          } else {
-                                            s1 = peg$FAILED;
-                                            if (peg$silentFails === 0) { peg$fail(peg$e25); }
-                                          }
-                                          if (s1 !== peg$FAILED) {
-                                            peg$savedPos = s0;
-                                            s1 = peg$f28();
-                                          }
-                                          s0 = s1;
-                                        }
                                       }
                                     }
                                   }
@@ -959,7 +941,7 @@ function peg$parse(input, options) {
     }
     if (s1 !== peg$FAILED) {
       peg$savedPos = s0;
-      s1 = peg$f29(s1);
+      s1 = peg$f28(s1);
     }
     s0 = s1;
 
@@ -971,11 +953,11 @@ function peg$parse(input, options) {
 
     s0 = peg$currPos;
     if (input.charCodeAt(peg$currPos) === 34) {
-      s1 = peg$c25;
+      s1 = peg$c24;
       peg$currPos++;
     } else {
       s1 = peg$FAILED;
-      if (peg$silentFails === 0) { peg$fail(peg$e26); }
+      if (peg$silentFails === 0) { peg$fail(peg$e25); }
     }
     if (s1 !== peg$FAILED) {
       s2 = [];
@@ -984,7 +966,7 @@ function peg$parse(input, options) {
         peg$currPos++;
       } else {
         s3 = peg$FAILED;
-        if (peg$silentFails === 0) { peg$fail(peg$e27); }
+        if (peg$silentFails === 0) { peg$fail(peg$e26); }
       }
       while (s3 !== peg$FAILED) {
         s2.push(s3);
@@ -993,19 +975,19 @@ function peg$parse(input, options) {
           peg$currPos++;
         } else {
           s3 = peg$FAILED;
-          if (peg$silentFails === 0) { peg$fail(peg$e27); }
+          if (peg$silentFails === 0) { peg$fail(peg$e26); }
         }
       }
       if (input.charCodeAt(peg$currPos) === 34) {
-        s3 = peg$c25;
+        s3 = peg$c24;
         peg$currPos++;
       } else {
         s3 = peg$FAILED;
-        if (peg$silentFails === 0) { peg$fail(peg$e26); }
+        if (peg$silentFails === 0) { peg$fail(peg$e25); }
       }
       if (s3 !== peg$FAILED) {
         peg$savedPos = s0;
-        s0 = peg$f30(s2);
+        s0 = peg$f29(s2);
       } else {
         peg$currPos = s0;
         s0 = peg$FAILED;
@@ -1028,7 +1010,7 @@ function peg$parse(input, options) {
       peg$currPos++;
     } else {
       s2 = peg$FAILED;
-      if (peg$silentFails === 0) { peg$fail(peg$e28); }
+      if (peg$silentFails === 0) { peg$fail(peg$e27); }
     }
     if (s2 !== peg$FAILED) {
       while (s2 !== peg$FAILED) {
@@ -1038,15 +1020,15 @@ function peg$parse(input, options) {
           peg$currPos++;
         } else {
           s2 = peg$FAILED;
-          if (peg$silentFails === 0) { peg$fail(peg$e28); }
+          if (peg$silentFails === 0) { peg$fail(peg$e27); }
         }
       }
     } else {
       s1 = peg$FAILED;
     }
     if (s1 !== peg$FAILED) {
       peg$savedPos = s0;
-      s1 = peg$f31(s1);
+      s1 = peg$f30(s1);
     }
     s0 = s1;
 
@@ -1059,7 +1041,7 @@ function peg$parse(input, options) {
     s0 = peg$currPos;
     s1 = peg$parse_();
     peg$savedPos = s0;
-    s1 = peg$f32();
+    s1 = peg$f31();
     s0 = s1;
 
     return s0;
@@ -1075,7 +1057,7 @@ function peg$parse(input, options) {
       peg$currPos++;
     } else {
       s1 = peg$FAILED;
-      if (peg$silentFails === 0) { peg$fail(peg$e30); }
+      if (peg$silentFails === 0) { peg$fail(peg$e29); }
     }
     while (s1 !== peg$FAILED) {
       s0.push(s1);
@@ -1084,12 +1066,12 @@ function peg$parse(input, options) {
         peg$currPos++;
       } else {
         s1 = peg$FAILED;
-        if (peg$silentFails === 0) { peg$fail(peg$e30); }
+        if (peg$silentFails === 0) { peg$fail(peg$e29); }
       }
     }
     peg$silentFails--;
     s1 = peg$FAILED;
-    if (peg$silentFails === 0) { peg$fail(peg$e29); }
+    if (peg$silentFails === 0) { peg$fail(peg$e28); }
 
     return s0;
   }
@@ -1100,7 +1082,6 @@ function peg$parse(input, options) {
     "status": "all",
     "sortBy": "date",
     "sortOrder": "desc",
-    "offset": 0
   };
 
   function buildFilter(operator, left, right) {

src/libs/SearchParser/searchParser.peggy

@@ -95,7 +95,7 @@ key
   / "category" { return "category"; }
   / "tag" { return "tag"; }
   / "taxRate" { return "taxRate"; }
-  / "card" { return "card"; }
+  / "cardID" { return "cardID"; }
   / "reportID" { return "reportID"; }
   / "keyword" { return "keyword"; }
   / "sortBy" { return "sortBy"; }

src/libs/SearchUtils.ts

@@ -436,11 +436,16 @@ function buildQueryStringFromFilters(filterValues: Partial<SearchAdvancedFilters
                 return `${CONST.SEARCH.SYNTAX_FILTER_KEYS.REPORT_ID}:${filterValue as string}`;
             }
 
-            if (filterKey === INPUT_IDS.CATEGORY && filterValues[filterKey]) {
+            if (filterKey === INPUT_IDS.CATEGORY && Array.isArray(filterValue) && filterValue.length > 0) {
                 const categories = filterValues[filterKey] ?? [];
                 return `${CONST.SEARCH.SYNTAX_FILTER_KEYS.CATEGORY}:${categories.map(sanitizeString).join(',')}`;
             }
 
+            if (filterKey === INPUT_IDS.CARD_ID && Array.isArray(filterValue) && filterValue.length > 0) {
+                const cardIDs = filterValues[filterKey] ?? [];
+                return `${CONST.SEARCH.SYNTAX_FILTER_KEYS.CARD_ID}:${cardIDs.join(',')}`;
+            }
+
             return undefined;
         })
         .filter(Boolean)