feat: Add count and spend total selectors to the Spend footer

src/CONST/index.ts

@@ -1189,6 +1189,7 @@ const CONST = {
         INSIGHTS_PAGE: 'insightsPage',
         INSIGHTS_COMPARE: 'insightsCompare',
         PAYMENT_HISTORY: 'paymentHistory',
+        SPEND_FOOTER_SELECTORS: 'spendFooterSelectors',
         SUPPORT_TICKET: 'supportTicket',
         ANCHORED_FIELD_DROPDOWNS: 'anchoredFieldDropdowns',
         RESIZABLE_TABLE_COLUMNS: 'resizableTableColumns',
@@ -8243,6 +8244,19 @@ const CONST = {
             LINE: 'line',
             PIE: 'pie',
         },
+        /** Which of the counts every search returns the Spend footer displays. Applied client-side, so it never retriggers a search. */
+        FOOTER_COUNT: {
+            EXPENSES: 'expenses',
+            REPORTS: 'reports',
+        },
+        /** Which aggregate the Spend footer displays as its total. Changing it retriggers the search, since the backend computes the aggregate. */
+        FOOTER_TOTAL: {
+            TOTAL: 'total',
+            REIMBURSABLE: 'reimbursable',
+            NON_REIMBURSABLE: 'non-reimbursable',
+            BILLABLE: 'billable',
+            NON_BILLABLE: 'non-billable',
+        },
         // Comparison modes for Insights queries, defined by the API.
         COMPARE: {
             PREVIOUS_PERIOD: 'previousPeriod',
@@ -8305,6 +8319,12 @@ const CONST = {
             SUBMITTER_USER_ID: 'submitterUserID',
             SUBMITTER_PAYROLL_ID: 'submitterPayrollID',
             ORDER_DEAL_NUMBERS: 'orderDealNumbers',
+            // The Spend footer's display selections. They travel as filters because that is where the backend reads
+            // them from, but they never narrow the result set: only `footerTotal` changes the response, by swapping
+            // which aggregate comes back as the search total.
+            FOOTER_COUNT: 'footerCount',
+            FOOTER_TOTAL: 'footerTotal',
+            FOOTER_CURRENCY: 'footerCurrency',
         },
         REPORT_FIELD: {
             // All report fields start with this, so use this to check if a search key is a report field
@@ -8390,6 +8410,9 @@ const CONST = {
             ORDER_DEAL_NUMBERS: 'order-deal-numbers',
             COLUMNS: 'columns',
             LIMIT: 'limit',
+            FOOTER_COUNT: 'footer-count',
+            FOOTER_TOTAL: 'footer-total',
+            FOOTER_CURRENCY: 'footer-currency',
             COMPARE: 'compare',
         },
         get SEARCH_USER_FRIENDLY_VALUES_MAP() {
@@ -9657,6 +9680,9 @@ const CONST = {
             FILTER_GROUP_CURRENCY: 'Search-FilterGroupCurrency',
             FILTER_VIEW: 'Search-FilterView',
             FILTER_LIMIT: 'Search-FilterLimit',
+            FOOTER_COUNT: 'Search-FooterCount',
+            FOOTER_TOTAL: 'Search-FooterTotal',
+            FOOTER_CURRENCY: 'Search-FooterCurrency',
             ADVANCED_FILTERS_BUTTON: 'Search-AdvancedFiltersButton',
             COLUMNS_BUTTON: 'Search-ColumnsButton',
             SELECT_ALL_CHECKBOX: 'Search-SelectAllCheckbox',

src/components/Search/FilterDropdowns/SearchFooterPopup.tsx

@@ -0,0 +1,176 @@
+import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import ScrollView from '@components/ScrollView';
+import type {SingleSelectItem} from '@components/Search/FilterComponents/SingleSelect';
+import type {SearchFooterCount, SearchFooterTotal} from '@components/Search/types';
+
+import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+import {getFooterTotalItems} from '@libs/SearchUIUtils';
+
+import CONST from '@src/CONST';
+
+import React, {useState} from 'react';
+
+import CurrencyPopup from './CurrencyPopup';
+import SingleSelectPopup from './SingleSelectPopup';
+
+/** Which selector the menu has drilled into, or null while it is showing its list of rows */
+type SelectedFooterFilter =
+    | typeof CONST.SEARCH.SYNTAX_FILTER_KEYS.FOOTER_COUNT
+    | typeof CONST.SEARCH.SYNTAX_FILTER_KEYS.FOOTER_TOTAL
+    | typeof CONST.SEARCH.SYNTAX_FILTER_KEYS.FOOTER_CURRENCY
+    | null;
+
+type SearchFooterPopupProps = {
+    /** The count the footer is currently displaying. Undefined hides the count row, e.g. while the footer describes a selection. */
+    countType: SearchFooterCount | undefined;
+
+    /** The count to fall back to when the count selector is reset */
+    defaultCountType: SearchFooterCount;
+
+    /** The total the footer is currently displaying. Undefined hides the total row, e.g. on an empty result set. */
+    totalType: SearchFooterTotal | undefined;
+
+    /** Whether the Total row is offered. A whole-group selection has no breakdown to pick, but still names its figure. */
+    shouldShowTotalSelector: boolean;
+
+    /** Whether the total and currency rows are waiting on a search, which recomputes both server-side */
+    isTotalLoading: boolean;
+
+    /** The currency the footer's total is currently displayed in */
+    currency: string | undefined;
+
+    /** The currency to fall back to when the currency selector is reset */
+    defaultCurrency: string | undefined;
+
+    /** Whether the popover is open. Keeps the currency list mounted only while it can be seen. */
+    isExpanded: boolean;
+
+    /** Function to call to close the popover */
+    closeOverlay: () => void;
+
+    /** Function to call when the displayed count changes */
+    onCountChange: (countType: SearchFooterCount) => void;
+
+    /** Function to call when the displayed total changes */
+    onTotalChange: (totalType: SearchFooterTotal) => void;
+
+    /** Function to call when the displayed currency changes */
+    onCurrencyChange: (item: SingleSelectItem<string> | undefined) => void;
+};
+
+/**
+ * The Spend footer's display menu: a row per selector, each opening its own sub-popup with Apply and Reset. Mirrors
+ * the Display menu in the search header, so the two behave the same way.
+ */
+function SearchFooterPopup({
+    countType,
+    defaultCountType,
+    totalType,
+    shouldShowTotalSelector,
+    isTotalLoading,
+    currency,
+    defaultCurrency,
+    isExpanded,
+    closeOverlay,
+    onCountChange,
+    onTotalChange,
+    onCurrencyChange,
+}: SearchFooterPopupProps) {
+    const {translate} = useLocalize();
+    const {isOffline} = useNetwork();
+    const styles = useThemeStyles();
+    const [selectedFooterFilter, setSelectedFooterFilter] = useState<SelectedFooterFilter>(null);
+
+    const countItems: Array<SingleSelectItem<SearchFooterCount>> = [
+        {text: translate('common.expenses'), value: CONST.SEARCH.FOOTER_COUNT.EXPENSES},
+        {text: translate('common.reports'), value: CONST.SEARCH.FOOTER_COUNT.REPORTS},
+    ];
+    const totalItems = getFooterTotalItems(translate);
+
+    if (!selectedFooterFilter) {
+        return (
+            <ScrollView contentContainerStyle={[styles.pv4]}>
+                {!!countType && (
+                    <MenuItemWithTopDescription
+                        shouldShowRightIcon
+                        description={translate('common.count')}
+                        title={countItems.find((item) => item.value === countType)?.text}
+                        onPress={() => setSelectedFooterFilter(CONST.SEARCH.SYNTAX_FILTER_KEYS.FOOTER_COUNT)}
+                        sentryLabel={CONST.SENTRY_LABEL.SEARCH.FOOTER_COUNT}
+                    />
+                )}
+                {shouldShowTotalSelector && !!totalType && (
+                    <MenuItemWithTopDescription
+                        shouldShowRightIcon
+                        // Both rows re-run the search, so they are inert until the one in flight lands. The count row
+                        // stays interactive, since switching it needs no request.
+                        interactive={!isTotalLoading}
+                        description={translate('common.total')}
+                        title={totalItems.find((item) => item.value === totalType)?.text}
+                        onPress={() => setSelectedFooterFilter(CONST.SEARCH.SYNTAX_FILTER_KEYS.FOOTER_TOTAL)}
+                        sentryLabel={CONST.SENTRY_LABEL.SEARCH.FOOTER_TOTAL}
+                    />
+                )}
+                <MenuItemWithTopDescription
+                    shouldShowRightIcon
+                    interactive={!isTotalLoading && !isOffline}
+                    description={translate('common.currency')}
+                    title={currency ?? defaultCurrency}
+                    onPress={() => setSelectedFooterFilter(CONST.SEARCH.SYNTAX_FILTER_KEYS.FOOTER_CURRENCY)}
+                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FOOTER_CURRENCY}
+                />
+            </ScrollView>
+        );
+    }
+
+    const goBack = () => setSelectedFooterFilter(null);
+
+    if (selectedFooterFilter === CONST.SEARCH.SYNTAX_FILTER_KEYS.FOOTER_COUNT) {
+        return (
+            <SingleSelectPopup
+                items={countItems}
+                value={countItems.find((item) => item.value === countType)}
+                label={translate('common.count')}
+                onBackButtonPress={goBack}
+                closeOverlay={closeOverlay}
+                // Reset falls back to the count that matches the search type, which is also what an unset selection shows.
+                onChange={(item) => onCountChange(item?.value ?? defaultCountType)}
+                defaultValue={defaultCountType}
+            />
+        );
+    }
+
+    if (selectedFooterFilter === CONST.SEARCH.SYNTAX_FILTER_KEYS.FOOTER_TOTAL) {
+        return (
+            <SingleSelectPopup
+                items={totalItems}
+                value={totalItems.find((item) => item.value === totalType)}
+                label={translate('common.total')}
+                onBackButtonPress={goBack}
+                closeOverlay={closeOverlay}
+                onChange={(item) => onTotalChange(item?.value ?? CONST.SEARCH.FOOTER_TOTAL.TOTAL)}
+                defaultValue={CONST.SEARCH.FOOTER_TOTAL.TOTAL}
+            />
+        );
+    }
+
+    return (
+        <CurrencyPopup
+            key={currency ?? defaultCurrency}
+            value={currency}
+            label={translate('common.currency')}
+            onBackButtonPress={goBack}
+            closeOverlay={closeOverlay}
+            onChange={onCurrencyChange}
+            searchPlaceholder={translate('common.search')}
+            defaultValue={defaultCurrency}
+            shouldShowList={isExpanded}
+            shouldUseFixedPopoverHeight
+        />
+    );
+}
+
+export default SearchFooterPopup;