[Due for payment 2026-05-18] [$250] Add support for a `withdrawal-status` filter in search

[JS00001]

As a part of this issue, we need to add support for filtering by withdrawal status. To do this, we will add three values: Pending, Cleared, and Failed. Make sure to add:

• Search syntax for withdrawal-status:pending,cleared,failed
• A multi-select list within a new Withdrawal Status filter row in the search filters RHP
• Auto complete for the available options in the search bar

Issue Owner

Current Issue Owner: @mallenexpensify

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022044383838262027090
• Upwork Job ID: 2044383838262027090
• Last Price Increase: 2026-04-15
• Automatic offers:
• wildan-m | Contributor | 111145775

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @dmkt9 (External)

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @dannymcclain (NewFeature)

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022044383838262027090

[Ltbltbltbltb]

Proposal

Please re-state the problem that we are trying to solve in this issue.

There is no way to filter search results by withdrawal status (Pending, Cleared, Failed), neither via search bar syntax nor the filters RHP, making it impossible to quickly isolate transactions by their settlement state.

What is the root cause of that problem?

withdrawal-status is not registered as a known filter key in CONST.SEARCH.SYNTAX_FILTER_KEYS, not handled in SearchUtils query-building logic, not wired into the filters RHP row list, and has no autocomplete entries — so the entire pipeline (parser → UI → query builder) simply ignores it.

What changes do you think we should make in order to solve the problem?

Four additive changes, no existing logic removed:

1. Register the filter key and values in CONST

// In CONST.SEARCH.SYNTAX_FILTER_KEYS
WITHDRAWAL_STATUS: 'withdrawal-status',

// New constant
SEARCH_WITHDRAWAL_STATUS_OPTIONS: {
    PENDING: 'pending',
    CLEARED: 'cleared',
    FAILED: 'failed',
} as const,

2. Extend SearchUtils query builder — in buildQueryStringFromFilters / buildFiltersFromQueryString, add a branch for withdrawal-status that maps to/from the three values, following the same pattern as the existing card-type multi-value filter.

3. Add the RHP filter row — in the search filters screen, add a FilterRow entry with label "Withdrawal Status" pointing to a new SearchFiltersWithdrawalStatusPage (multi-select, same pattern as SearchFiltersCardPage). Register the route in ROUTES and NAVIGATORS.

4. Wire autocomplete — in the search bar autocomplete suggestions handler, when the current token prefix is withdrawal-status:, return ['pending', 'cleared', 'failed'] as candidates, mirroring how type: and status: autocomplete are handled today.

No Onyx schema changes needed — the filter lives entirely in the URL query string, consistent with all other search filters.

Contributor Details

Field	Value
Contributor email	lucastrba@gmail.com
Upwork Profile	https://www.upwork.com/freelancers/~01d016059c6701ebaa

[samranahm]

Proposal

What is the root cause of that problem?

New feature > Adding support for filtering by withdrawal status.

What changes do you think we should make in order to solve the problem?

Please list the solution in simple numbered steps.

1. Create SearchFiltersWithdrawalStatusPage and use SearchMultipleSelectionPicker so that user can select multipe options from failed, cleared and pending state

SearchFiltersWithdrawalStatusPage

function SearchFiltersWithdrawalStatusPage() {
    const styles = useThemeStyles();
    const {translate} = useLocalize();

    const [searchAdvancedFiltersForm, searchAdvancedFiltersFormResult] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
    const initiallySelectedItems = searchAdvancedFiltersForm?.withdrawalStatus
        ?.filter((withdrawalStatus) => Object.values(CONST.SEARCH.SETTLEMENT_STATUS).includes(withdrawalStatus as ValueOf<typeof CONST.SEARCH.SETTLEMENT_STATUS>))
        .map((withdrawalStatus) => ({
            name: translate(`search.filters.withdrawalStatus.${withdrawalStatus}`),
            value: withdrawalStatus,
        }));

    const withdrawalStatusItems = getWithdrawalStatusOptions(translate).map((withdrawalStatusOption) => ({
        name: withdrawalStatusOption.text,
        value: withdrawalStatusOption.value,
    }));

    const updateWithdrawalStatusFilter = (values: SearchAdvancedFiltersForm['withdrawalStatus']) => updateAdvancedFilters({withdrawalStatus: values});

    return (
        <ScreenWrapper
            testID="SearchFiltersWithdrawalStatusPage"
            shouldShowOfflineIndicatorInWideScreen
            offlineIndicatorStyle={styles.mtAuto}
            includeSafeAreaPaddingBottom={false}
            shouldEnableMaxHeight
        >
            <HeaderWithBackButton
                title={translate('search.withdrawalStatus')}
                onBackButtonPress={() => {
                    Navigation.goBack(ROUTES.SEARCH_ADVANCED_FILTERS.getRoute());
                }}
            />
            <View style={[styles.flex1]}>
                {!isLoadingOnyxValue(searchAdvancedFiltersFormResult) && (
                    <SearchMultipleSelectionPicker<SearchWithdrawalStatus>
                        items={withdrawalStatusItems}
                        initiallySelectedItems={initiallySelectedItems}
                        onSaveSelection={updateWithdrawalStatusFilter}
                        shouldShowTextInput={false}
                    />
                )}
            </View>
        </ScreenWrapper>
    );
}

• Add translation in all locals

withdrawalStatus: {
    [CONST.SEARCH.SETTLEMENT_STATUS.PENDING]: 'Pending',
    [CONST.SEARCH.SETTLEMENT_STATUS.CLEARED]: 'Cleared',
    [CONST.SEARCH.SETTLEMENT_STATUS.FAILED]: 'Failed',
},

• Add ADVANCED_FILTERS_WITHDRAWAL_STATUS_RHP in SCREENS, and update ModalStackNavigators, linkingConfig/config.ts, and SEARCH_TO_RHP.ts

[SCREENS.SEARCH.ADVANCED_FILTERS_WITHDRAWAL_STATUS_RHP]: () => require<ReactComponentModule>('../../../../pages/Search/SearchAdvancedFiltersPage/SearchFiltersWithdrawalStatusPage').default,

• Add SETTLEMENT_STATUS values in CONST/index

SETTLEMENT_STATUS: {
    PENDING: 'pending',
    CLEARED: 'cleared',
    FAILED: 'failed',
},

2. Add withdrawalStatus in AdvancedSearchFilters.tsx next to withdrawalType

withdrawalStatus: {
    getTitle: getFilterDisplayTitle,
    description: 'search.withdrawalStatus' as const,
    route: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS.WITHDRAWAL_STATUS),
},

3. In useAdvancedSearchFilters hook add withdrawalStatus in EXPENSE, EXPENSE_REPORT, and INVOICE to keep the same behaviour as WITHDRAWAL_TYPE.

• In useAutocompleteSuggestions hook add case for WITHDRAWAL_STATUS

const WITHDRAWAL_STATUS_VALUES = Object.values(CONST.SEARCH.SETTLEMENT_STATUS);

case CONST.SEARCH.SYNTAX_FILTER_KEYS.WITHDRAWAL_STATUS: {
    const filteredWithdrawalStatuses = WITHDRAWAL_STATUS_VALUES.filter(
        (withdrawalStatus) => withdrawalStatus.includes(autocompleteValue.toLowerCase()) && !alreadyAutocompletedKeys.has(withdrawalStatus),
    ).sort();

    return filteredWithdrawalStatuses.map((withdrawalStatus) => ({
        filterKey: CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS.WITHDRAWAL_STATUS,
        text: withdrawalStatus,
    }));
}

• In SearchAdvancedFiltersForm.ts add

    WITHDRAWAL_STATUS_NOT: 'withdrawalStatusNot',
    WITHDRAWAL_STATUS: 'withdrawalStatus',

in FILTER_KEYS and update EXPENSE, EXPENSE_REPORT, and INVOICE to include these values

4. Update the filterOutRangesWithCorrectValue to highlight correct value of SETTLEMENT_STATUS

const withdrawalStatusList = Object.values(CONST.SEARCH.SETTLEMENT_STATUS) as string[];
    case CONST.SEARCH.SYNTAX_FILTER_KEYS.WITHDRAWAL_STATUS:
        return withdrawalStatusList.includes(range.value);

Update buildFilterFormValuesFromQuery

if (filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.WITHDRAWAL_STATUS) {
    filtersForm[key as typeof filterKey] = filterValues.filter((withdrawalStatus): withdrawalStatus is SearchWithdrawalStatus =>
        VALID_WITHDRAWAL_STATUSES.has(withdrawalStatus as ValueOf<typeof CONST.SEARCH.SETTLEMENT_STATUS>),
    );
}

• In AdvancedSearchFilters.tsx add withdrawalStatus in baseFilterConfig

withdrawalStatus: {
    getTitle: getFilterDisplayTitle,
    description: 'search.withdrawalStatus' as const,
    route: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS.WITHDRAWAL_STATUS),
},

and check key WITHDRAWAL_STATUS in getFilterDisplayTitle.

if (key === CONST.SEARCH.SYNTAX_FILTER_KEYS.WITHDRAWAL_STATUS) {
    const filterValue = filters[key];
    return filterValue ? (Array.isArray(filterValue) ? filterValue : [filterValue]).map((value) => translate(`search.filters.withdrawalStatus.${value}`)).join(', ') : undefined;
}

5. Update autocompleteParser.peggy and searchParser.peggy to include

/ withdrawalStatus

• Update baseRules.peggy

withdrawalStatus
= "withdrawalStatus"
/ "withdrawal-status"i { return "withdrawalStatus"; }

and generate the updated parser with

npm run generate-autocomplete-parser
npm run generate-search-parser

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

POC

macOS.Desktop.mp4

[wildan-m]

Proposal

Please re-state the problem that we are trying to solve in this issue.

We need to add a new withdrawal-status filter to search, with three predefined values (pending, cleared, failed). The feature has three parts: (1) parse withdrawal-status:pending,cleared,failed in the search bar grammar, (2) render a new multi-select "Withdrawal Status" row in the advanced search filters right-hand panel, and (3) surface the three options as autocomplete suggestions when the user types withdrawal-status: in the search bar.

What is the root cause of that problem?

This is a new feature. The search subsystem has no knowledge of a withdrawal-status key — it is not present in the Peggy grammar, not in the SYNTAX_FILTER_KEYS / SEARCH_USER_FRIENDLY_KEYS maps, not in the advanced filters form type, not in the RHP filter list, and not in the autocomplete code paths. We need to introduce it end-to-end.

The good news: the codebase already has the exact shape we need. The existing withdrawalType filter (src/CONST/index.ts#L7892) is wired through every layer we need to touch, and the existing CONST.SEARCH.SETTLEMENT_STATUS enum (src/CONST/index.ts#L7524-L7528) already defines exactly the three values the issue asks for (pending, cleared, failed). The existing status filter page (src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersStatusPage.tsx) is a clean multi-select template we can mirror for the UI.

So the implementation is a mechanical mirror of withdrawalType across the same wiring points, swapped to use SETTLEMENT_STATUS values and multi-select semantics (since the issue asks for multi-select, not single-select).

What changes do you think we should make in order to solve the problem?

Introduce a new withdrawalStatus filter that reuses CONST.SEARCH.SETTLEMENT_STATUS as its value set, and mirror the withdrawalType wiring end-to-end, adapted to multi-select. Concretely:

1. Grammar — add the new key to the Peggy parser.

In src/libs/SearchParser/searchParser.peggy#L262-L308, add withdrawalStatus to the key alternation list (right next to withdrawalType / withdrawalID). Define a withdrawalStatus rule that matches the user-facing form withdrawal-status and normalizes it to the internal key withdrawalStatus, following the same pattern the existing withdrawalType rule uses. Regenerate the parser (the repo's generated parser file needs to be rebuilt alongside the grammar).

2. Constants — register the new filter key.

In src/CONST/index.ts:

• Add WITHDRAWAL_STATUS: 'withdrawalStatus' to SYNTAX_FILTER_KEYS (near L7892).
• Add WITHDRAWAL_STATUS: 'withdrawal-status' to SEARCH_USER_FRIENDLY_KEYS (near L7963).
• Add a FILTER_WITHDRAWAL_STATUS Sentry label alongside FILTER_WITHDRAWAL_TYPE (near L8845) so the new filter chip gets its own telemetry span.

No new enum is needed — the existing CONST.SEARCH.SETTLEMENT_STATUS at src/CONST/index.ts#L7524-L7528 already holds { PENDING: 'pending', CLEARED: 'cleared', FAILED: 'failed' }, which is exactly the set the issue asks for. Reusing it keeps us consistent with the rest of the settlement-state code.

3. Form type — add the form keys for the advanced filters panel.

In src/types/form/SearchAdvancedFiltersForm.ts, mirror the WITHDRAWAL_TYPE / WITHDRAWAL_TYPE_NOT entries (L73-L74) with WITHDRAWAL_STATUS / WITHDRAWAL_STATUS_NOT, include them in the supported-filters lists at L230-L231, L308-L309, and L385-L386, and declare their value types at L605-L606. The value type for the multi-select case is Array<ValueOf<typeof CONST.SEARCH.SETTLEMENT_STATUS>> | ValueOf<typeof CONST.SEARCH.SETTLEMENT_STATUS> — same shape the existing status filter uses on the form.

Also add a corresponding SearchWithdrawalStatus exported type next to SearchWithdrawalType in src/components/Search/types.ts.

4. Query utilities — parse and serialize the new key.

In src/libs/SearchQueryUtils.ts:

• Add VALID_WITHDRAWAL_STATUSES as new Set(Object.values(CONST.SEARCH.SETTLEMENT_STATUS)) near the existing VALID_WITHDRAWAL_TYPES at L73.
• Include WITHDRAWAL_STATUS in the similarSearchValueBasedFilters set at L497 so it chips-render the same way.
• In the form→query and query→form builders around L840 and L1040-L1042, add the WITHDRAWAL_STATUS case so values round-trip between the URL query string and the form state. The status filter's multi-select round-trip is the template — values are comma-joined in the query string and split back into an array on parse.

5. UI helper — options for the selector.

In src/libs/SearchUIUtils.ts, add getWithdrawalStatusOptions(translate) next to getWithdrawalTypeOptions at L4837-L4838, returning Object.values(CONST.SEARCH.SETTLEMENT_STATUS) mapped to {text: translate('search.filters.withdrawalStatus.'+value), value}. Export it from the module index at L5602.

Also add the chip-rendering case in the filter-chip renderer near L4747-L4752 so the selected values show up in the filter bar. For multi-select we need to join the translated labels with commas (mirroring how status renders).

6. RHP filter row — register the new row in the advanced filters page.

In src/pages/Search/AdvancedSearchFilters.tsx, add a withdrawalStatus entry to baseFilterConfig next to withdrawalType at L182-L186. The config points at a new route (ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS.WITHDRAWAL_STATUS)) and uses the new translation search.withdrawalStatus. Add the value-resolution branch for the new key near L521-L523 so the row's subtitle shows the currently selected values.

7. New filter page — the multi-select UI.

Create src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersWithdrawalStatusPage.tsx, modeled on the existing SearchFiltersStatusPage.tsx (not SearchFiltersWithdrawalTypePage.tsx, because withdrawalType is single-select). The new page:

• Reads searchAdvancedFiltersForm.withdrawalStatus from Onyx, normalizes it to a string[].
• Renders a SelectionList with MultiSelectListItem, fed by getWithdrawalStatusOptions(translate).
• Uses SearchFilterPageFooterButtons for Reset / Save.
• On save, calls updateAdvancedFilters({withdrawalStatus: selectedItems.length ? selectedItems : null}) and navigates back to the advanced filters page, same pattern as SearchFiltersStatusPage.

8. Navigation wiring — screen + route + linking + modal stack.

• In src/SCREENS.ts near L79, add ADVANCED_FILTERS_WITHDRAWAL_STATUS_RHP: 'Search_Advanced_Filters_Withdrawal_Status_RHP'.
• In src/libs/Navigation/linkingConfig/config.ts#L1988, map the new screen to its route via SEARCH_USER_FRIENDLY_KEYS.WITHDRAWAL_STATUS.
• In src/libs/Navigation/linkingConfig/RELATIONS/SEARCH_TO_RHP.ts#L38, add the new screen to the allowed RHP list.
• In src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx#L1064, register the lazy require() for the new page component.

9. useAdvancedSearchFilters — include the new key in filter ordering.

In src/hooks/useAdvancedSearchFilters.ts, add CONST.SEARCH.SYNTAX_FILTER_KEYS.WITHDRAWAL_STATUS to the three filter-key lists at L59, L84, and L121, placing it adjacent to WITHDRAWAL_TYPE so it groups with the other withdrawal-related filters in the RHP.

10. Autocomplete — suggest pending, cleared, failed when the user types withdrawal-status:.

In src/hooks/useAutocompleteSuggestions.ts:

• Near L62, add WITHDRAWAL_STATUS_VALUES = Object.values(CONST.SEARCH.SETTLEMENT_STATUS).
• Add a new case CONST.SEARCH.SYNTAX_FILTER_KEYS.WITHDRAWAL_STATUS: branch near L356-L363 that filters the three values by the current autocomplete prefix, excludes values the user has already committed (using the same alreadyAutocompletedKeys check the withdrawalType branch uses), and returns suggestions with filterKey: CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS.WITHDRAWAL_STATUS.

In src/libs/SearchAutocompleteUtils.ts:

• Add a withdrawalStatusList alongside withdrawalTypeList at L162.
• Add a case CONST.SEARCH.SYNTAX_FILTER_KEYS.WITHDRAWAL_STATUS: in the range-validation switch near L199-L200 so typed values are only accepted when they match one of the three allowed enum values.

11. Filter bar — surface the active filter as a removable chip.

In src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx, mirror the existing withdrawalType chip code at L267-L268, L408-L414, and L495-L558 for withdrawalStatus, adapting the popover for a multi-select (same shape the status chip uses elsewhere in the file). Same treatment in useSearchActionsBar.tsx#L329-L339.

12. Translations — add search.withdrawalStatus block and row title.

In src/languages/en.ts, add a withdrawalStatus block next to withdrawalType at L7660-L7663:

"Withdrawal status" row title (search.withdrawalStatus) plus one value label per SETTLEMENT_STATUS entry: Pending, Cleared, Failed.

Add the same withdrawalStatus / search.withdrawalStatus keys to every other locale file under src/languages/ (es.ts, fr.ts, de.ts, it.ts, ja.ts, nl.ts, pl.ts, pt-BR.ts, zh-hans.ts) — they all currently carry a withdrawalType block, and en.ts is the source of truth for any untranslated fallback.

13. Round-trip test coverage.

The search parser has existing unit-test fixtures that cover every filter key. Add new fixtures for withdrawal-status:pending, withdrawal-status:pending,cleared,failed, and -withdrawal-status:failed (the negated form) so the grammar, the form→query serializer, and the query→form parser are all exercised. Same pattern the withdrawalType tests use — this guards the round-trip and catches regressions when other filter keys change.

With these changes in place, the user can type withdrawal-status:pending,failed in the search bar and get autocomplete suggestions, open the advanced filters RHP and see a new "Withdrawal Status" row, multi-select Pending/Cleared/Failed, and have the selection round-trip through the URL query string like every other filter.

What alternative solutions did you explore? (Optional)

Two alternatives considered and rejected:

1. Introduce a new CONST.SEARCH.WITHDRAWAL_STATUS enum instead of reusing SETTLEMENT_STATUS. Rejected — SETTLEMENT_STATUS already contains exactly the three values (pending, cleared, failed), and its name describes the same domain concept. Creating a duplicate enum would split the source of truth and invite drift.

2. Mirror SearchFiltersWithdrawalTypePage (single-select) for the new page instead of SearchFiltersStatusPage (multi-select). Rejected — the issue explicitly asks for a "multi-select list", and status is the existing multi-select enum template. withdrawalType is single-select only because its enum has two values; copying its shape would violate the issue requirement and force a rewrite when the reviewer catches it.