[Payment due @truph01] fix: Add Contains / Equal to match type for the Merchant filter [80823]

src/components/Search/FilterComponents/AdvancedFilters/MerchantFilterContent.tsx

@@ -0,0 +1,108 @@
+/**
+ * Renders the advanced Merchant filter input, match type, and negation controls.
+ */
+import MerchantMatchTypeSelector from '@components/Search/FilterComponents/MerchantMatchTypeSelector';
+
+import useThemeStyles from '@hooks/useThemeStyles';
+
+import CONST from '@src/CONST';
+import FILTER_KEYS from '@src/types/form/SearchAdvancedFiltersForm';
+import type {MerchantMatchType, SearchAdvancedFiltersForm} from '@src/types/form/SearchAdvancedFiltersForm';
+
+import type {StyleProp, ViewStyle} from 'react-native';
+import type {ValueOf} from 'type-fest';
+
+import React, {useState} from 'react';
+import {View} from 'react-native';
+
+import TextInputFilterContent from './TextInputFilterContent';
+
+type MerchantFilterContentProps = {
+    /** The Merchant filter key. */
+    baseFilterKey: typeof CONST.SEARCH.SYNTAX_FILTER_KEYS.MERCHANT;
+
+    /** The current Merchant value. */
+    value: string | undefined;
+
+    /** Whether the filter currently uses the negated value. */
+    isNegated: boolean;
+
+    /** The current Merchant match type. */
+    merchantOperator?: MerchantMatchType;
+
+    /** The button size used for confirmation. */
+    buttonSize?: Exclude<ValueOf<typeof CONST.BUTTON_SIZE>, typeof CONST.BUTTON_SIZE.SMALL>;
+
+    /** The label used when the filter applies immediately. */
+    buttonText?: string;
+
+    /** The Sentry label for the confirmation button. */
+    sentryLabel?: string;
+
+    /** Whether the input should receive focus automatically. */
+    autoFocus?: boolean;
+
+    /** Additional styles for the filter content. */
+    style?: StyleProp<ViewStyle>;
+
+    /** Additional styles for the confirmation button. */
+    buttonStyles?: StyleProp<ViewStyle>;
+
+    /** Called with the updated Merchant filter form values. */
+    onChange: (values: Partial<SearchAdvancedFiltersForm>) => void;
+};
+
+function MerchantFilterContent({
+    baseFilterKey,
+    value,
+    isNegated,
+    merchantOperator: initialMerchantOperator,
+    buttonSize,
+    buttonText,
+    sentryLabel,
+    autoFocus,
+    style,
+    buttonStyles,
+    onChange,
+}: MerchantFilterContentProps) {
+    const styles = useThemeStyles();
+    const [merchantOperator, setMerchantOperator] = useState<MerchantMatchType>(initialMerchantOperator ?? CONST.SEARCH.SYNTAX_OPERATORS.CONTAINS);
+
+    const updateMerchantFilter = (newValue: string | undefined, newIsNegated: boolean) => {
+        onChange({
+            [FILTER_KEYS.MERCHANT]: newIsNegated ? undefined : newValue,
+            [FILTER_KEYS.MERCHANT_NOT]: newIsNegated ? newValue : undefined,
+            [FILTER_KEYS.MERCHANT_OPERATOR]: newIsNegated ? undefined : merchantOperator,
+        });
+    };
+
+    // A negated Merchant filter always uses the not-equal operator, so the match type is hidden.
+    const renderMatchTypeSelector = (isFilterNegated: boolean) =>
+        isFilterNegated ? null : (
+            <View style={[styles.flex1, styles.mt2]}>
+                <MerchantMatchTypeSelector
+                    value={merchantOperator}
+                    onChange={setMerchantOperator}
+                />
+            </View>
+        );
+
+    return (
+        <TextInputFilterContent
+            baseFilterKey={baseFilterKey}
+            value={value}
+            isNegated={isNegated}
+            size={buttonSize}
+            autoFocus={autoFocus}
+            style={style}
+            buttonText={buttonText}
+            buttonStyles={buttonStyles}
+            sentryLabel={sentryLabel}
+            renderBelowInput={renderMatchTypeSelector}
+            onChange={updateMerchantFilter}
+        />
+    );
+}
+
+export default MerchantFilterContent;
+export type {MerchantFilterContentProps};

src/components/Search/FilterComponents/AdvancedFilters/SearchAdvancedFiltersContent.tsx

@@ -6,18 +6,21 @@ import type {SearchFilter} from '@libs/SearchUIUtils';
 
 import CONST from '@src/CONST';
 import type {SearchAdvancedFiltersForm} from '@src/types/form';
+import FILTER_KEYS from '@src/types/form/SearchAdvancedFiltersForm';
 
 import React from 'react';
 
 import type {AmountFilterContentProps} from './AmountFilterContent';
 import type {DateFilterContentProps} from './DateFilterContent';
+import type {MerchantFilterContentProps} from './MerchantFilterContent';
 import type {ReportFieldFilterContentProps} from './ReportFieldFilterContent';
 import type {TextInputFilterContentProps} from './TextInputFilterContent';
 
 type TextInputFilterContentWrapperProps = Pick<TextInputFilterContentProps, 'baseFilterKey' | 'value' | 'isNegated' | 'onChange' | 'buttonText'>;
 type AmountFilterContentWrapperProps = Pick<AmountFilterContentProps, 'baseFilterKey' | 'value' | 'onChange' | 'buttonText'>;
 type DateFilterContentWrapperProps = Pick<DateFilterContentProps, 'baseFilterKey' | 'value' | 'hasFeed' | 'onChange'> & {buttonText?: string};
 type ReportFieldFilterContentWrapperProps = Pick<ReportFieldFilterContentProps, 'values' | 'onChange'> & {buttonText?: string};
+type MerchantFilterContentWrapperProps = Pick<MerchantFilterContentProps, 'baseFilterKey' | 'value' | 'isNegated' | 'merchantOperator' | 'onChange' | 'buttonText'>;
 type ListFilterContentWrapperProps = Omit<ListFilterContentProps, 'onChange' | 'onNegationChange' | 'selectionListTextInputStyle' | 'selectionListStyle' | 'autoFocus' | 'footer'> & {
     onChange: (value: ListFilterContentProps['value'], isNegated: boolean) => void;
     buttonText?: string;
@@ -29,6 +32,7 @@ type SearchAdvancedFiltersContentProps = {
     ready?: boolean;
     buttonText?: string;
     components: {
+        Merchant: React.ComponentType<MerchantFilterContentWrapperProps>;
         Text: React.ComponentType<TextInputFilterContentWrapperProps>;
         Amount: React.ComponentType<AmountFilterContentWrapperProps>;
         Date: React.ComponentType<DateFilterContentWrapperProps>;
@@ -98,6 +102,22 @@ function SearchAdvancedFiltersContent({baseFilterKey, values, ready, components,
         );
     }
 
+    if (baseFilterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.MERCHANT) {
+        const {isNegated, value} = getFilterNegatableValue(baseFilterKey, values);
+        const MerchantFilter = components.Merchant;
+        return (
+            <MerchantFilter
+                key={baseFilterKey}
+                baseFilterKey={baseFilterKey}
+                value={value}
+                isNegated={isNegated}
+                merchantOperator={values?.[FILTER_KEYS.MERCHANT_OPERATOR]}
+                buttonText={buttonText}
+                onChange={onChange}
+            />
+        );
+    }
+
     if (isTextFilterKey(baseFilterKey)) {
         const {isNegated, value} = getFilterNegatableValue(baseFilterKey, values);
         const TextFilter = components.Text;
@@ -131,4 +151,11 @@ function SearchAdvancedFiltersContent({baseFilterKey, values, ready, components,
 }
 
 export default SearchAdvancedFiltersContent;
-export type {TextInputFilterContentWrapperProps, AmountFilterContentWrapperProps, DateFilterContentWrapperProps, ReportFieldFilterContentWrapperProps, ListFilterContentWrapperProps};
+export type {
+    TextInputFilterContentWrapperProps,
+    MerchantFilterContentWrapperProps,
+    AmountFilterContentWrapperProps,
+    DateFilterContentWrapperProps,
+    ReportFieldFilterContentWrapperProps,
+    ListFilterContentWrapperProps,
+};

src/components/Search/FilterComponents/AdvancedFilters/TextInputFilterContent.tsx

@@ -15,7 +15,7 @@ import {FILTER_VIEW_MAP} from '@libs/SearchUIUtils';
 
 import CONST from '@src/CONST';
 
-import type {ComponentRef} from 'react';
+import type {ComponentRef, ReactNode} from 'react';
 import type {TextInput as RNTextInput, StyleProp, ViewStyle} from 'react-native';
 import type {ValueOf} from 'type-fest';
 
@@ -30,14 +30,32 @@ type TextInputFilterContentProps = {
     autoFocus?: boolean;
     style?: StyleProp<ViewStyle>;
     buttonText?: string;
+    buttonStyles?: StyleProp<ViewStyle>;
+    sentryLabel?: string;
+
+    /** Renders extra controls under the input, inside the scrollable area. Receives the current negation state, so the content can change when the user negates the filter. */
+    renderBelowInput?: (isNegated: boolean) => ReactNode;
+
     onChange: (value: string | undefined, isNegated: boolean) => void;
 };
 
 function isTextInput(element: BaseTextInputRef | ComponentRef<typeof RNTextInput> | null): element is ComponentRef<typeof RNTextInput> {
     return !!element && 'isFocused' in element;
 }
 
-function TextInputFilterContent({baseFilterKey, value: initialValue, isNegated: initialIsNegated, autoFocus, size, style, buttonText, onChange}: TextInputFilterContentProps) {
+function TextInputFilterContent({
+    baseFilterKey,
+    value: initialValue,
+    isNegated: initialIsNegated,
+    autoFocus,
+    size,
+    style,
+    buttonText,
+    buttonStyles,
+    sentryLabel,
+    renderBelowInput,
+    onChange,
+}: TextInputFilterContentProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const [value, setValue] = useState(initialValue);
@@ -50,7 +68,7 @@ function TextInputFilterContent({baseFilterKey, value: initialValue, isNegated:
 
     const button = (
         <Button
-            style={[styles.ph5, styles.pb5]}
+            style={[styles.ph5, styles.pb5, buttonStyles]}
             variant={CONST.BUTTON_VARIANT.SUCCESS}
             size={size}
             onPress={() => {
@@ -59,6 +77,7 @@ function TextInputFilterContent({baseFilterKey, value: initialValue, isNegated:
                 }
                 onChange(value, isNegated);
             }}
+            sentryLabel={sentryLabel}
         >
             <Button.KeyboardShortcut />
             <Button.Text>{buttonText ?? translate('common.confirm')}</Button.Text>
@@ -93,6 +112,7 @@ function TextInputFilterContent({baseFilterKey, value: initialValue, isNegated:
                         containerStyles={[styles.ph5]}
                     />
                 </NegatableFilter>
+                {renderBelowInput?.(isNegated)}
                 {shouldButtonBeInScrollView && button}
             </ScrollView>
             {!shouldButtonBeInScrollView && button}

src/components/Search/FilterComponents/MerchantMatchTypeSelector.tsx

@@ -0,0 +1,62 @@
+/**
+ * Shared Merchant match type selector for search filter surfaces.
+ */
+import SelectionList from '@components/SelectionList';
+import SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
+import type {ListItem} from '@components/SelectionList/ListItem/types';
+import Text from '@components/Text';
+
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+import variables from '@styles/variables';
+
+import CONST from '@src/CONST';
+import type {MerchantMatchType} from '@src/types/form/SearchAdvancedFiltersForm';
+
+import React from 'react';
+import {View} from 'react-native';
+
+type MerchantMatchTypeSelectorProps = {
+    /** Currently selected Merchant match type. */
+    value: MerchantMatchType;
+
+    /** Updates the selected Merchant match type. */
+    onChange: (value: MerchantMatchType) => void;
+};
+
+function MerchantMatchTypeSelector({value, onChange}: MerchantMatchTypeSelectorProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const items: Array<ListItem<MerchantMatchType>> = [
+        {
+            keyForList: CONST.SEARCH.SYNTAX_OPERATORS.CONTAINS,
+            text: translate('search.filters.merchant.contains'),
+            isSelected: value === CONST.SEARCH.SYNTAX_OPERATORS.CONTAINS,
+        },
+        {
+            keyForList: CONST.SEARCH.SYNTAX_OPERATORS.EQUAL_TO,
+            text: translate('search.filters.merchant.equalTo'),
+            isSelected: value === CONST.SEARCH.SYNTAX_OPERATORS.EQUAL_TO,
+        },
+    ];
+
+    return (
+        <>
+            <View style={[styles.pb2, styles.ph5]}>
+                <Text style={[styles.textLabelSupporting]}>{translate('search.filters.merchant.matchType')}</Text>
+            </View>
+            {/* Inside a ScrollView a flex list can shrink to zero height when the keyboard is open, so reserve room for every row */}
+            <View style={[styles.flex1, {minHeight: items.length * variables.optionRowHeight}]}>
+                <SelectionList
+                    data={items}
+                    ListItem={SingleSelectListItem}
+                    onSelectRow={(item) => onChange(item.keyForList)}
+                    shouldSingleExecuteRowSelect
+                />
+            </View>
+        </>
+    );
+}
+
+export default MerchantMatchTypeSelector;

src/components/Search/FilterDropdowns/MerchantFilterPopup.tsx

@@ -0,0 +1,68 @@
+/**
+ * Edits the Merchant filter value and match type from its search filter chip.
+ */
+import MerchantFilterContent from '@components/Search/FilterComponents/AdvancedFilters/MerchantFilterContent';
+
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+import {getFilterNegatableValue} from '@libs/SearchUIUtils';
+
+import type CONST from '@src/CONST';
+import FILTER_KEYS from '@src/types/form/SearchAdvancedFiltersForm';
+import type {SearchAdvancedFiltersForm} from '@src/types/form/SearchAdvancedFiltersForm';
+
+import React from 'react';
+
+import type {PopoverComponentProps} from './FilterPopupButton';
+
+import BasePopup from './BasePopup';
+
+type MerchantFilterPopupProps = {
+    /** The Merchant filter key. */
+    baseFilterKey: typeof CONST.SEARCH.SYNTAX_FILTER_KEYS.MERCHANT;
+    /** The current search filter form values. */
+    values: Partial<SearchAdvancedFiltersForm> | undefined;
+    /** The translated filter label. */
+    label: string;
+    /** Closes the filter popup. */
+    closeOverlay: PopoverComponentProps['closeOverlay'];
+    /** Applies the updated Merchant filter values. */
+    updateFilterForm: (value: Partial<SearchAdvancedFiltersForm>) => void;
+};
+
+function MerchantFilterPopup({baseFilterKey, values, label, updateFilterForm, closeOverlay}: MerchantFilterPopupProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const {isNegated, value} = getFilterNegatableValue(baseFilterKey, values);
+    const applySentryLabel = `Search-FilterPopupApply-${baseFilterKey}`;
+
+    const applyChanges = (newValues: Partial<SearchAdvancedFiltersForm>) => {
+        updateFilterForm(newValues);
+        closeOverlay();
+    };
+
+    // The content renders its own padded Apply button, so the popup only provides the label and the spacing ActionButtons would add.
+    return (
+        <BasePopup
+            label={label}
+            shouldShowActionButtons={false}
+            style={styles.pb0}
+            onApply={closeOverlay}
+            applySentryLabel={applySentryLabel}
+        >
+            <MerchantFilterContent
+                baseFilterKey={baseFilterKey}
+                value={value}
+                isNegated={isNegated}
+                merchantOperator={values?.[FILTER_KEYS.MERCHANT_OPERATOR]}
+                buttonText={translate('common.apply')}
+                sentryLabel={applySentryLabel}
+                buttonStyles={styles.mt2}
+                onChange={applyChanges}
+            />
+        </BasePopup>
+    );
+}
+
+export default MerchantFilterPopup;

src/components/Search/FilterDropdowns/SearchAdvancedFiltersPopup/MerchantFilterContentPopupWrapper.tsx

@@ -0,0 +1,24 @@
+import MerchantFilterContent from '@components/Search/FilterComponents/AdvancedFilters/MerchantFilterContent';
+import type {MerchantFilterContentWrapperProps} from '@components/Search/FilterComponents/AdvancedFilters/SearchAdvancedFiltersContent';
+
+import useThemeStyles from '@hooks/useThemeStyles';
+
+import React from 'react';
+
+function MerchantFilterContentPopupWrapper({baseFilterKey, value, isNegated, merchantOperator, buttonText, onChange}: MerchantFilterContentWrapperProps) {
+    const styles = useThemeStyles();
+
+    return (
+        <MerchantFilterContent
+            baseFilterKey={baseFilterKey}
+            value={value}
+            isNegated={isNegated}
+            merchantOperator={merchantOperator}
+            buttonText={buttonText}
+            style={[styles.pt6]}
+            onChange={onChange}
+        />
+    );
+}
+
+export default MerchantFilterContentPopupWrapper;