Convert Search footer totals via GetTransactionsConvertedAmount command

src/ONYXKEYS.ts

@@ -665,6 +665,9 @@ const ONYXKEYS = {
     /** Stores the current search page context (e.g., whether to show the search query) */
     SEARCH_CONTEXT: 'searchContext',
 
+    /** Caches converted footer-total amounts (by transaction and by whole-search query, nested by currency) for the Search footer currency picker */
+    SEARCH_FOOTER_CONVERSION: 'searchFooterConversion',
+
     /** Maps each loaded search snapshot's hash to its original query string, used to fan optimistic IOU updates to every matching snapshot */
     SEARCH_QUERY_BY_HASH: 'searchQueryByHash',
 
@@ -1496,6 +1499,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.RECENT_SEARCHES]: Record<string, OnyxTypes.RecentSearchItem>;
     [ONYXKEYS.SAVED_SEARCHES]: OnyxTypes.SaveSearch;
     [ONYXKEYS.SEARCH_CONTEXT]: OnyxTypes.SearchContext;
+    [ONYXKEYS.SEARCH_FOOTER_CONVERSION]: OnyxTypes.SearchFooterConversion;
     [ONYXKEYS.SEARCH_QUERY_BY_HASH]: Record<string, string>;
     [ONYXKEYS.RECENTLY_USED_CURRENCIES]: string[];
     [ONYXKEYS.ACTIVE_CLIENTS]: string[];

src/components/Button/index.tsx

@@ -24,7 +24,7 @@ import type IconAsset from '@src/types/utils/IconAsset';
 import type WithSentryLabel from '@src/types/utils/SentryLabel';
 
 import type {ForwardedRef} from 'react';
-import type {AccessibilityState, GestureResponderEvent, LayoutChangeEvent, StyleProp, TextStyle, ViewStyle} from 'react-native';
+import type {AccessibilityState, GestureResponderEvent, LayoutChangeEvent, NativeSyntheticEvent, StyleProp, TargetedEvent, TextStyle, ViewStyle} from 'react-native';
 
 import {useIsFocused} from '@react-navigation/native';
 import React, {useState} from 'react';
@@ -104,6 +104,12 @@ type ButtonProps = Partial<ChildrenProps> &
         /** Callback that is called when mousedown is triggered. */
         onMouseDown?: (e: React.MouseEvent<Element, MouseEvent>) => void;
 
+        /** A function that is called when the button receives focus */
+        onFocus?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
+
+        /** A function that is called when the button loses focus */
+        onBlur?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
+
         /** Call the onPress function when Enter key is pressed */
         pressOnEnter?: boolean;
 
@@ -279,6 +285,8 @@ function Button({
     onPressIn = () => {},
     onPressOut = () => {},
     onMouseDown = undefined,
+    onFocus = undefined,
+    onBlur = undefined,
 
     pressOnEnter = false,
     enterKeyEventListenerPriority = 0,
@@ -516,6 +524,8 @@ function Button({
                 onPressIn={onPressIn}
                 onPressOut={onPressOut}
                 onMouseDown={onMouseDown}
+                onFocus={onFocus}
+                onBlur={onBlur}
                 shouldBlendOpacity={shouldBlendOpacity}
                 disabled={isLoading || isDisabled}
                 wrapperStyle={[

src/components/ButtonComposed/Button.tsx

@@ -34,6 +34,8 @@ function Button({
     onPressIn = () => {},
     onPressOut = () => {},
     onMouseDown = undefined,
+    onFocus = undefined,
+    onBlur = undefined,
     style = [],
     disabledStyle,
     innerStyles = [],
@@ -170,6 +172,8 @@ function Button({
             onPressIn={onPressIn}
             onPressOut={onPressOut}
             onMouseDown={onMouseDown}
+            onFocus={onFocus}
+            onBlur={onBlur}
             onHoverIn={!isDisabled || !stayNormalOnDisable ? () => setIsHovered(true) : undefined}
             onHoverOut={!isDisabled || !stayNormalOnDisable ? () => setIsHovered(false) : undefined}
             onPress={(event) => {

src/components/ButtonComposed/types.ts

@@ -5,7 +5,7 @@ import type WithSentryLabel from '@src/types/utils/SentryLabel';
 
 import type {ForwardedRef} from 'react';
 import type React from 'react';
-import type {AccessibilityState, GestureResponderEvent, LayoutChangeEvent, StyleProp, View, ViewStyle} from 'react-native';
+import type {AccessibilityState, GestureResponderEvent, LayoutChangeEvent, NativeSyntheticEvent, StyleProp, TargetedEvent, View, ViewStyle} from 'react-native';
 import type {ValueOf} from 'type-fest';
 
 type ButtonEventsProps = {
@@ -26,6 +26,12 @@ type ButtonEventsProps = {
 
     /** Invoked on mount and layout changes */
     onLayout?: (event: LayoutChangeEvent) => void;
+
+    /** A function that is called when the button receives focus */
+    onFocus?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
+
+    /** A function that is called when the button loses focus */
+    onBlur?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
 };
 
 type ButtonBehaviorProps = {

src/components/Search/FilterComponents/ListFilterViewWrapper.tsx

@@ -15,19 +15,21 @@ type ListFilterWrapperProps = {
     hasHeader?: boolean;
     isSearchable?: boolean;
     extraHeight?: number;
+    shouldUseFixedPopoverHeight?: boolean;
 };
 
-function ListFilterView({children, itemCount, itemHeight, hasTitle = true, hasHeader, isSearchable, extraHeight}: ListFilterWrapperProps) {
+function ListFilterView({children, itemCount, itemHeight, hasTitle = true, hasHeader, isSearchable, extraHeight, shouldUseFixedPopoverHeight}: ListFilterWrapperProps) {
     const styles = useThemeStyles();
     const {windowHeight} = useWindowDimensions();
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth, isInLandscapeMode} = useResponsiveLayout();
+    const heightItemCount = shouldUseFixedPopoverHeight ? Number.MAX_SAFE_INTEGER : itemCount || 1;
 
     return (
         <View
             style={[
                 styles.getSelectionListPopoverHeight({
-                    itemCount: itemCount || 1,
+                    itemCount: heightItemCount,
                     itemHeight,
                     windowHeight,
                     isInLandscapeMode,

src/components/Search/FilterComponents/SingleSelect.tsx

@@ -38,6 +38,8 @@ type SingleSelectProps<T> = SearchFilterCommonProps<SingleSelectItem<T> | undefi
     /** Custom height for each item in the list */
     itemHeight?: number;
 
+    /** Whether the popover keeps a fixed height instead of growing with its content */
+    shouldUseFixedPopoverHeight?: boolean;
     allowDeselect?: boolean;
     hasTitle?: boolean;
     hasHeader?: boolean;
@@ -58,6 +60,7 @@ function SingleSelectImpl({
     hasTitle,
     hasHeader,
     itemHeight,
+    shouldUseFixedPopoverHeight,
     footer,
     allowDeselect,
     onChange,
@@ -132,6 +135,7 @@ function SingleSelectImpl({
             hasTitle={hasTitle}
             isSearchable={isSearchable}
             itemHeight={itemHeight ?? variables.optionRowHeightCompact}
+            shouldUseFixedPopoverHeight={shouldUseFixedPopoverHeight}
         >
             <Activity mode={shouldShowList ? 'visible' : 'hidden'}>
                 <SelectionList

src/components/Search/FilterDropdowns/CurrencyPopup.tsx

@@ -0,0 +1,63 @@
+import {useCurrencyListActions, useCurrencyListState} from '@components/CurrencyListContextProvider';
+import type {SingleSelectItem} from '@components/Search/FilterComponents/SingleSelect';
+
+import {getCurrencyOptions} from '@libs/SearchUIUtils';
+
+import React from 'react';
+
+import SingleSelectPopup from './SingleSelectPopup';
+
+type CurrencyPopupProps = {
+    /** The label to show when in an overlay on mobile */
+    label?: string;
+
+    /** Function to call when the back button is pressed */
+    onBackButtonPress?: () => void;
+
+    /** Function to call to close the overlay */
+    closeOverlay: () => void;
+
+    /** Function to call when a currency is selected */
+    onChange: (item: SingleSelectItem<string> | undefined) => void;
+
+    /** The currently selected currency code */
+    value?: string;
+
+    /** The currency code to select when reset is clicked */
+    defaultValue?: string;
+
+    /** Search input placeholder */
+    searchPlaceholder?: string;
+
+    /** Whether the currency list should be visible */
+    shouldShowList?: boolean;
+};
+
+/**
+ * Searchable single-select currency picker popup, used by the Search footer's total-spend currency selector.
+ */
+function CurrencyPopup({label, onBackButtonPress, onChange, closeOverlay, value, defaultValue, searchPlaceholder, shouldShowList}: CurrencyPopupProps) {
+    const {currencyList} = useCurrencyListState();
+    const {getCurrencySymbol} = useCurrencyListActions();
+
+    const currencyOptions = getCurrencyOptions(currencyList, getCurrencySymbol);
+    const currencyValue = currencyOptions.find((option) => option.value === value);
+
+    return (
+        <SingleSelectPopup
+            items={currencyOptions}
+            value={currencyValue}
+            label={label}
+            onBackButtonPress={onBackButtonPress}
+            closeOverlay={closeOverlay}
+            onChange={onChange}
+            isSearchable
+            searchPlaceholder={searchPlaceholder}
+            defaultValue={defaultValue}
+            shouldShowList={shouldShowList}
+            shouldUseFixedPopoverHeight
+        />
+    );
+}
+
+export default CurrencyPopup;

src/components/Search/FilterDropdowns/DisplayPopup.tsx

@@ -26,8 +26,8 @@ import type {OnyxEntry} from 'react-native-onyx';
 
 import React, {useState} from 'react';
 
+import CurrencyPopup from './CurrencyPopup';
 import GroupByPopup from './GroupByPopup';
-import GroupCurrencyPopup from './GroupCurrencyPopup';
 import SingleSelectPopup from './SingleSelectPopup';
 import SortByPopup from './SortByPopup';
 import SortOrderPopup from './SortOrderPopup';
@@ -193,10 +193,13 @@ function DisplayPopup({queryJSON, searchResults, closeOverlay, onSort}: DisplayP
             );
         case CONST.SEARCH.SYNTAX_FILTER_KEYS.GROUP_CURRENCY:
             return (
-                <GroupCurrencyPopup
+                <CurrencyPopup
+                    value={searchAdvancedFilters[CONST.SEARCH.SYNTAX_FILTER_KEYS.GROUP_CURRENCY]}
                     onChange={(item) => updateFilterForm({groupCurrency: item?.value})}
+                    label={translate('common.groupCurrency')}
                     onBackButtonPress={goBack}
                     closeOverlay={closeOverlay}
+                    searchPlaceholder={translate('common.groupCurrency')}
                 />
             );
         case CONST.SEARCH.SYNTAX_ROOT_KEYS.VIEW:

src/components/Search/FilterDropdowns/SingleSelectPopup.tsx

@@ -51,6 +51,9 @@ type SingleSelectPopupProps<T> = {
 
     /** Whether SelectionList of popup should stay mounted when popup is not visible. */
     shouldShowList?: boolean;
+
+    /** Whether the popover should keep a fixed height while filtering results. */
+    shouldUseFixedPopoverHeight?: boolean;
 };
 
 function SingleSelectPopup<T extends string>({
@@ -68,6 +71,7 @@ function SingleSelectPopup<T extends string>({
     itemHeight,
     showLabel,
     shouldShowList = true,
+    shouldUseFixedPopoverHeight,
 }: SingleSelectPopupProps<T>) {
     const [selectedItem, setSelectedItem] = useState(value);
 
@@ -104,6 +108,7 @@ function SingleSelectPopup<T extends string>({
                     selectionListStyle={selectionListStyle}
                     shouldShowList={shouldShowList}
                     itemHeight={itemHeight}
+                    shouldUseFixedPopoverHeight={shouldUseFixedPopoverHeight}
                 />
             </ListFilterHeightContextProvider>
         </BasePopup>