[No QA] Create new filter popups

src/CONST/index.ts

@@ -8787,8 +8787,10 @@ const CONST = {
             FILTER_FROM: 'Search-FilterFrom',
             FILTER_WORKSPACE: 'Search-FilterWorkspace',
             FILTER_GROUP_BY: 'Search-FilterGroupBy',
+            FILTER_SORT_BY: 'Search-FilterSortBy',
             FILTER_GROUP_CURRENCY: 'Search-FilterGroupCurrency',
             FILTER_VIEW: 'Search-FilterView',
+            FILTER_LIMIT: 'Search-FilterLimit',
             FILTER_FEED: 'Search-FilterFeed',
             FILTER_POSTED: 'Search-FilterPosted',
             FILTER_WITHDRAWN: 'Search-FilterWithdrawn',
@@ -8811,10 +8813,19 @@ const CONST = {
             FILTER_POPUP_APPLY_MULTI_SELECT: 'Search-FilterPopupApplyMultiSelect',
             FILTER_POPUP_RESET_TEXT_INPUT: 'Search-FilterPopupResetTextInput',
             FILTER_POPUP_APPLY_TEXT_INPUT: 'Search-FilterPopupApplyTextInput',
+            FILTER_POPUP_RESET_AMOUNT: 'Search-FilterPopupResetAmount',
+            FILTER_POPUP_APPLY_AMOUNT: 'Search-FilterPopupApplyAmount',
+            FILTER_POPUP_SAVE_AMOUNT: 'Search-FilterPopupSaveAmount',
             FILTER_POPUP_RESET_DATE: 'Search-FilterPopupResetDate',
             FILTER_POPUP_APPLY_DATE: 'Search-FilterPopupApplyDate',
             FILTER_POPUP_RESET_USER: 'Search-FilterPopupResetUser',
             FILTER_POPUP_APPLY_USER: 'Search-FilterPopupApplyUser',
+            FILTER_POPUP_RESET_REPORT: 'Search-FilterPopupResetReport',
+            FILTER_POPUP_APPLY_REPORT: 'Search-FilterPopupApplyReport',
+            FILTER_POPUP_RESET_REPORT_FIELD: 'Search-FilterPopupResetReportField',
+            FILTER_POPUP_APPLY_REPORT_FIELD: 'Search-FilterPopupApplyReportField',
+            FILTER_POPUP_RESET_CARD: 'Search-FilterPopupResetCard',
+            FILTER_POPUP_APPLY_CARD: 'Search-FilterPopupApplyCard',
             TRANSACTION_LIST_ITEM_CHECKBOX: 'Search-TransactionListItemCheckbox',
             EXPANDED_TRANSACTION_ROW: 'Search-ExpandedTransactionRow',
             EXPANDED_TRANSACTION_ROW_CHECKBOX: 'Search-ExpandedTransactionRowCheckbox',

src/components/Search/FilterDropdowns/AmountPopup.tsx

@@ -0,0 +1,153 @@
+import React, {useState} from 'react';
+import type {ValueOf} from 'type-fest';
+import AmountWithoutCurrencyInput from '@components/AmountWithoutCurrencyInput';
+import MenuItem from '@components/MenuItem';
+import type {SearchAmountFilterKeys} from '@components/Search/types';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {convertToBackendAmount, convertToFrontendAmountAsString} from '@libs/CurrencyUtils';
+import CONST from '@src/CONST';
+import type {SearchAdvancedFiltersForm} from '@src/types/form';
+import BasePopup from './BasePopup';
+
+type AmountPopupProps = {
+    filterKey: SearchAmountFilterKeys;
+    label: string;
+    value: Record<ValueOf<typeof CONST.SEARCH.AMOUNT_MODIFIERS>, string | undefined>;
+    updateFilterForm: (value: Partial<SearchAdvancedFiltersForm>) => void;
+    closeOverlay: () => void;
+};
+
+type AmountInputProps = {
+    title: string;
+    value: string;
+    name: string;
+    onSave: (value: string) => void;
+    onBackButtonPress: () => void;
+};
+
+function AmountInput({title, value, name, onSave, onBackButtonPress}: AmountInputProps) {
+    const styles = useThemeStyles();
+    const [amount, setAmount] = useState(value);
+
+    return (
+        <BasePopup
+            label={title}
+            onReset={() => onSave('')}
+            onApply={() => onSave(amount)}
+            resetSentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_AMOUNT}
+            applySentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_AMOUNT}
+            onBackButtonPress={onBackButtonPress}
+        >
+            <AmountWithoutCurrencyInput
+                containerStyles={[styles.ph4, styles.mb2]}
+                defaultValue={amount}
+                onInputChange={setAmount}
+                label={title}
+                accessibilityLabel={title}
+                name={name}
+                role={CONST.ROLE.PRESENTATION}
+                inputMode={CONST.INPUT_MODE.DECIMAL}
+                shouldAllowNegative
+                autoFocus
+            />
+        </BasePopup>
+    );
+}
+
+function AmountPopup({filterKey, label, value, closeOverlay, updateFilterForm}: AmountPopupProps) {
+    const {translate} = useLocalize();
+    const [selectedModifier, setSelectedModifier] = useState<ValueOf<typeof CONST.SEARCH.AMOUNT_MODIFIERS> | null>(null);
+    const [amountValues, setAmountValues] = useState(value);
+
+    const title = {
+        [CONST.SEARCH.AMOUNT_MODIFIERS.EQUAL_TO]: translate('search.filters.amount.equalTo'),
+        [CONST.SEARCH.AMOUNT_MODIFIERS.GREATER_THAN]: translate('search.filters.amount.greaterThan'),
+        [CONST.SEARCH.AMOUNT_MODIFIERS.LESS_THAN]: translate('search.filters.amount.lessThan'),
+    };
+
+    const modifierConfig = [CONST.SEARCH.AMOUNT_MODIFIERS.EQUAL_TO, CONST.SEARCH.AMOUNT_MODIFIERS.GREATER_THAN, CONST.SEARCH.AMOUNT_MODIFIERS.LESS_THAN];
+
+    const formatAmount = (amount: string | undefined) => {
+        return amount ? convertToFrontendAmountAsString(Number(amount), CONST.DEFAULT_CURRENCY_DECIMALS) : '';
+    };
+
+    if (selectedModifier) {
+        const goBack = () => {
+            setSelectedModifier(null);
+        };
+
+        const save = (rawAmount: string) => {
+            if (rawAmount.trim() === '') {
+                setAmountValues((prevAmountValues) => ({...prevAmountValues, [selectedModifier]: undefined}));
+                goBack();
+                return;
+            }
+
+            const newAmount = convertToBackendAmount(Number(rawAmount)).toString();
+
+            // When setting an Equal To value, clear Greater Than and Less Than to avoid conflicting filters.
+            if (selectedModifier === CONST.SEARCH.AMOUNT_MODIFIERS.EQUAL_TO) {
+                setAmountValues({[CONST.SEARCH.AMOUNT_MODIFIERS.GREATER_THAN]: '', [CONST.SEARCH.AMOUNT_MODIFIERS.LESS_THAN]: '', [selectedModifier]: newAmount});
+            }
+
+            // When setting Greater Than or Less Than, clear Equal To to avoid conflicting filters.
+            if (selectedModifier === CONST.SEARCH.AMOUNT_MODIFIERS.GREATER_THAN || selectedModifier === CONST.SEARCH.AMOUNT_MODIFIERS.LESS_THAN) {
+                setAmountValues((prevAmountValues) => ({...prevAmountValues, [CONST.SEARCH.AMOUNT_MODIFIERS.EQUAL_TO]: '', [selectedModifier]: newAmount}));
+            }
+            goBack();
+        };
+
+        return (
+            <AmountInput
+                title={title[selectedModifier]}
+                value={formatAmount(amountValues[selectedModifier])}
+                name={`${filterKey}${selectedModifier}`}
+                onBackButtonPress={goBack}
+                onSave={save}
+            />
+        );
+    }
+
+    const onChange = (values: Record<ValueOf<typeof CONST.SEARCH.AMOUNT_MODIFIERS>, string | undefined>) => {
+        const formValues: Record<string, string | undefined> = {};
+        formValues[`${filterKey}${CONST.SEARCH.AMOUNT_MODIFIERS.EQUAL_TO}`] = values[CONST.SEARCH.AMOUNT_MODIFIERS.EQUAL_TO];
+        formValues[`${filterKey}${CONST.SEARCH.AMOUNT_MODIFIERS.GREATER_THAN}`] = values[CONST.SEARCH.AMOUNT_MODIFIERS.GREATER_THAN];
+        formValues[`${filterKey}${CONST.SEARCH.AMOUNT_MODIFIERS.LESS_THAN}`] = values[CONST.SEARCH.AMOUNT_MODIFIERS.LESS_THAN];
+        updateFilterForm(formValues);
+        closeOverlay();
+    };
+
+    const applyChanges = () => onChange(amountValues);
+
+    const resetChanges = () => {
+        onChange({
+            [CONST.SEARCH.AMOUNT_MODIFIERS.EQUAL_TO]: undefined,
+            [CONST.SEARCH.AMOUNT_MODIFIERS.GREATER_THAN]: undefined,
+            [CONST.SEARCH.AMOUNT_MODIFIERS.LESS_THAN]: undefined,
+        });
+    };
+
+    return (
+        <BasePopup
+            label={label}
+            onReset={resetChanges}
+            onApply={applyChanges}
+            resetSentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_AMOUNT}
+            applySentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_AMOUNT}
+        >
+            {modifierConfig.map((modifier) => (
+                <MenuItem
+                    key={modifier}
+                    title={title[modifier]}
+                    description={formatAmount(amountValues[modifier])}
+                    onPress={() => setSelectedModifier(modifier)}
+                    shouldShowRightIcon
+                    viewMode={CONST.OPTION_MODE.COMPACT}
+                />
+            ))}
+        </BasePopup>
+    );
+}
+
+export default AmountPopup;

src/components/Search/FilterDropdowns/BasePopup.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import {View} from 'react-native';
+import type {StyleProp, ViewStyle} from 'react-native';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import Text from '@components/Text';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useThemeStyles from '@hooks/useThemeStyles';
+import ActionButtons from './ActionButtons';
+
+type BasePopupProps = React.PropsWithChildren & {
+    label?: string;
+    applySentryLabel: string;
+    resetSentryLabel: string;
+    style?: StyleProp<ViewStyle>;
+    onApply: () => void;
+    onReset: () => void;
+    onBackButtonPress?: () => void;
+};
+
+function BasePopup({children, label, applySentryLabel, resetSentryLabel, style, onApply, onReset, onBackButtonPress}: BasePopupProps) {
+    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
+    const {isSmallScreenWidth} = useResponsiveLayout();
+    const styles = useThemeStyles();
+
+    return (
+        <View style={[!isSmallScreenWidth && styles.pv4, style]}>
+            {onBackButtonPress ? (
+                <HeaderWithBackButton
+                    shouldDisplayHelpButton={false}
+                    style={[styles.h10, styles.pv1, styles.mb2]}
+                    subtitle={label}
+                    onBackButtonPress={onBackButtonPress}
+                />
+            ) : (
+                isSmallScreenWidth && !!label && <Text style={[styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1, styles.mb2]}>{label}</Text>
+            )}
+            {children}
+            <ActionButtons
+                containerStyle={[styles.flexRow, styles.gap2, styles.ph5, styles.mt2]}
+                onReset={onReset}
+                onApply={onApply}
+                applySentryLabel={applySentryLabel}
+                resetSentryLabel={resetSentryLabel}
+            />
+        </View>
+    );
+}
+
+export default BasePopup;