diff --git a/src/CONST.ts b/src/CONST.ts
index dc8fb1040a76..bdf181fe12da 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -941,20 +941,6 @@ const CONST = {
RESIZE_DEBOUNCE_TIME: 100,
UNREAD_UPDATE_DEBOUNCE_TIME: 300,
},
- SEARCH_TABLE_COLUMNS: {
- RECEIPT: 'receipt',
- DATE: 'date',
- MERCHANT: 'merchant',
- DESCRIPTION: 'description',
- FROM: 'from',
- TO: 'to',
- CATEGORY: 'category',
- TAG: 'tag',
- TOTAL_AMOUNT: 'amount',
- TYPE: 'type',
- ACTION: 'action',
- TAX_AMOUNT: 'taxAmount',
- },
PRIORITY_MODE: {
GSD: 'gsd',
DEFAULT: 'default',
@@ -3540,12 +3526,7 @@ const CONST = {
SCAN: 'scan',
DISTANCE: 'distance',
},
- TAB_SEARCH: {
- ALL: 'all',
- SHARED: 'shared',
- DRAFTS: 'drafts',
- FINISHED: 'finished',
- },
+
STATUS_TEXT_MAX_LENGTH: 100,
DROPDOWN_BUTTON_SIZE: {
@@ -4846,28 +4827,52 @@ const CONST = {
ADHOC: ' AdHoc',
},
- SEARCH_TRANSACTION_TYPE: {
- CASH: 'cash',
- CARD: 'card',
- DISTANCE: 'distance',
- },
-
- SEARCH_RESULTS_PAGE_SIZE: 50,
-
- SEARCH_DATA_TYPES: {
- TRANSACTION: 'transaction',
- REPORT: 'report',
+ SEARCH: {
+ RESULTS_PAGE_SIZE: 50,
+ DATA_TYPES: {
+ TRANSACTION: 'transaction',
+ REPORT: 'report',
+ },
+ ACTION_TYPES: {
+ DONE: 'done',
+ PAID: 'paid',
+ VIEW: 'view',
+ },
+ TRANSACTION_TYPE: {
+ CASH: 'cash',
+ CARD: 'card',
+ DISTANCE: 'distance',
+ },
+ SORT_ORDER: {
+ ASC: 'asc',
+ DESC: 'desc',
+ },
+ TAB: {
+ ALL: 'all',
+ SHARED: 'shared',
+ DRAFTS: 'drafts',
+ FINISHED: 'finished',
+ },
+ TABLE_COLUMNS: {
+ RECEIPT: 'receipt',
+ DATE: 'date',
+ MERCHANT: 'merchant',
+ DESCRIPTION: 'description',
+ FROM: 'from',
+ TO: 'to',
+ CATEGORY: 'category',
+ TAG: 'tag',
+ TOTAL_AMOUNT: 'amount',
+ TYPE: 'type',
+ ACTION: 'action',
+ TAX_AMOUNT: 'taxAmount',
+ },
},
REFERRER: {
NOTIFICATION: 'notification',
},
- SORT_ORDER: {
- ASC: 'asc',
- DESC: 'desc',
- },
-
SUBSCRIPTION_SIZE_LIMIT: 20000,
PAYMENT_CARD_CURRENCY: {
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index 93792120fe99..cfb0192669d1 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -35,7 +35,7 @@ type SearchProps = {
sortOrder?: SortOrder;
};
-const sortableSearchTabs: SearchQuery[] = [CONST.TAB_SEARCH.ALL];
+const sortableSearchTabs: SearchQuery[] = [CONST.SEARCH.TAB.ALL];
const transactionItemMobileHeight = 100;
const reportItemTransactionHeight = 52;
const listItemPadding = 12; // this is equivalent to 'mb3' on every transaction/report list item
@@ -125,7 +125,7 @@ function Search({query, policyIDs, sortBy, sortOrder}: SearchProps) {
return;
}
const currentOffset = searchResults?.search?.offset ?? 0;
- SearchActions.search({hash, query, offset: currentOffset + CONST.SEARCH_RESULTS_PAGE_SIZE, sortBy, sortOrder});
+ SearchActions.search({hash, query, offset: currentOffset + CONST.SEARCH.RESULTS_PAGE_SIZE, sortBy, sortOrder});
};
const type = SearchUtils.getSearchType(searchResults?.search);
diff --git a/src/components/SelectionList/Search/ActionCell.tsx b/src/components/SelectionList/Search/ActionCell.tsx
new file mode 100644
index 000000000000..6aabfebf0da9
--- /dev/null
+++ b/src/components/SelectionList/Search/ActionCell.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import {View} from 'react-native';
+import Badge from '@components/Badge';
+import Button from '@components/Button';
+import * as Expensicons from '@components/Icon/Expensicons';
+import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
+
+type ActionCellProps = {
+ onButtonPress: () => void;
+ action?: string;
+ isLargeScreenWidth?: boolean;
+};
+
+function ActionCell({onButtonPress, action = CONST.SEARCH.ACTION_TYPES.VIEW, isLargeScreenWidth = true}: ActionCellProps) {
+ const {translate} = useLocalize();
+ const styles = useThemeStyles();
+ const theme = useTheme();
+ const StyleUtils = useStyleUtils();
+
+ if (action === CONST.SEARCH.ACTION_TYPES.PAID || action === CONST.SEARCH.ACTION_TYPES.DONE) {
+ const buttonTextKey = action === CONST.SEARCH.ACTION_TYPES.PAID ? 'iou.settledExpensify' : 'common.done';
+ return (
+
+
+
+ );
+ }
+
+ return (
+
+ );
+}
+
+ActionCell.displayName = 'ActionCell';
+
+export default ActionCell;
diff --git a/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx b/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
index c3f2529b04e8..8f46a5388da8 100644
--- a/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
+++ b/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
@@ -1,6 +1,5 @@
import React, {memo} from 'react';
import {View} from 'react-native';
-import Button from '@components/Button';
import Icon from '@components/Icon';
import * as Expensicons from '@components/Icon/Expensicons';
import useStyleUtils from '@hooks/useStyleUtils';
@@ -8,6 +7,7 @@ import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import variables from '@styles/variables';
import type {SearchAccountDetails} from '@src/types/onyx/SearchResults';
+import ActionCell from './ActionCell';
import UserInfoCell from './UserInfoCell';
type ExpenseItemHeaderNarrowProps = {
@@ -15,11 +15,11 @@ type ExpenseItemHeaderNarrowProps = {
participantTo: SearchAccountDetails;
participantFromDisplayName: string;
participantToDisplayName: string;
- buttonText: string;
onButtonPress: () => void;
+ action?: string;
};
-function ExpenseItemHeaderNarrow({participantFrom, participantFromDisplayName, participantTo, participantToDisplayName, buttonText, onButtonPress}: ExpenseItemHeaderNarrowProps) {
+function ExpenseItemHeaderNarrow({participantFrom, participantFromDisplayName, participantTo, participantToDisplayName, onButtonPress, action}: ExpenseItemHeaderNarrowProps) {
const styles = useThemeStyles();
const StyleUtils = useStyleUtils();
const theme = useTheme();
@@ -47,12 +47,10 @@ function ExpenseItemHeaderNarrow({participantFrom, participantFromDisplayName, p
-
diff --git a/src/components/SelectionList/Search/ReportListItem.tsx b/src/components/SelectionList/Search/ReportListItem.tsx
index 313794eb2064..37bbe66670f9 100644
--- a/src/components/SelectionList/Search/ReportListItem.tsx
+++ b/src/components/SelectionList/Search/ReportListItem.tsx
@@ -1,6 +1,5 @@
import React from 'react';
import {View} from 'react-native';
-import Button from '@components/Button';
import BaseListItem from '@components/SelectionList/BaseListItem';
import type {ListItem, ReportListItemProps, ReportListItemType, TransactionListItemType} from '@components/SelectionList/types';
import Text from '@components/Text';
@@ -14,6 +13,7 @@ import Navigation from '@libs/Navigation/Navigation';
import {getSearchParams} from '@libs/SearchUtils';
import CONST from '@src/CONST';
import ROUTES from '@src/ROUTES';
+import ActionCell from './ActionCell';
import ExpenseItemHeaderNarrow from './ExpenseItemHeaderNarrow';
import TransactionListItem from './TransactionListItem';
import TransactionListItemRow from './TransactionListItemRow';
@@ -29,10 +29,6 @@ type ReportCellProps = {
reportItem: ReportListItemType;
} & CellProps;
-type ActionCellProps = {
- onButtonPress: () => void;
-} & CellProps;
-
function TotalCell({showTooltip, isLargeScreenWidth, reportItem}: ReportCellProps) {
const styles = useThemeStyles();
@@ -45,21 +41,6 @@ function TotalCell({showTooltip, isLargeScreenWidth, reportItem}: ReportCellProp
);
}
-function ActionCell({onButtonPress}: ActionCellProps) {
- const {translate} = useLocalize();
- const styles = useThemeStyles();
-
- return (
-
- );
-}
-
function ReportListItem({
item,
isFocused,
@@ -90,7 +71,7 @@ function ReportListItem({
const openReportInRHP = (transactionItem: TransactionListItemType) => {
const searchParams = getSearchParams();
- const currentQuery = searchParams?.query ?? CONST.TAB_SEARCH.ALL;
+ const currentQuery = searchParams?.query ?? CONST.SEARCH.TAB.ALL;
Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute(currentQuery, transactionItem.transactionThreadReportID));
};
@@ -150,7 +131,7 @@ function ReportListItem({
participantFromDisplayName={participantFromDisplayName}
participantTo={participantTo}
participantToDisplayName={participantToDisplayName}
- buttonText={translate('common.view')}
+ action={reportItem.action}
onButtonPress={handleOnButtonPress}
/>
)}
@@ -173,12 +154,12 @@ function ReportListItem({
{isLargeScreenWidth && (
<>
{/** We add an empty view with type style to align the total with the table header */}
-
-
+
+
>
diff --git a/src/components/SelectionList/Search/TransactionListItemRow.tsx b/src/components/SelectionList/Search/TransactionListItemRow.tsx
index 0099aaf64625..001bd6eeae1b 100644
--- a/src/components/SelectionList/Search/TransactionListItemRow.tsx
+++ b/src/components/SelectionList/Search/TransactionListItemRow.tsx
@@ -1,13 +1,11 @@
import React from 'react';
import type {StyleProp, ViewStyle} from 'react-native';
import {View} from 'react-native';
-import Button from '@components/Button';
import Icon from '@components/Icon';
import * as Expensicons from '@components/Icon/Expensicons';
import ReceiptImage from '@components/ReceiptImage';
import type {TransactionListItemType} from '@components/SelectionList/types';
import TextWithTooltip from '@components/TextWithTooltip';
-import useLocalize from '@hooks/useLocalize';
import useStyleUtils from '@hooks/useStyleUtils';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
@@ -19,6 +17,7 @@ import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
import variables from '@styles/variables';
import CONST from '@src/CONST';
import type {SearchTransactionType} from '@src/types/onyx/SearchResults';
+import ActionCell from './ActionCell';
import ExpenseItemHeaderNarrow from './ExpenseItemHeaderNarrow';
import TextWithIconCell from './TextWithIconCell';
import UserInfoCell from './UserInfoCell';
@@ -34,10 +33,6 @@ type TransactionCellProps = {
transactionItem: TransactionListItemType;
} & CellProps;
-type ActionCellProps = {
- onButtonPress: () => void;
-} & CellProps;
-
type TotalCellProps = {
// eslint-disable-next-line react/no-unused-prop-types
isChildListItem: boolean;
@@ -54,11 +49,11 @@ type TransactionListItemRowProps = {
const getTypeIcon = (type?: SearchTransactionType) => {
switch (type) {
- case CONST.SEARCH_TRANSACTION_TYPE.CASH:
+ case CONST.SEARCH.TRANSACTION_TYPE.CASH:
return Expensicons.Cash;
- case CONST.SEARCH_TRANSACTION_TYPE.CARD:
+ case CONST.SEARCH.TRANSACTION_TYPE.CARD:
return Expensicons.CreditCard;
- case CONST.SEARCH_TRANSACTION_TYPE.DISTANCE:
+ case CONST.SEARCH.TRANSACTION_TYPE.DISTANCE:
return Expensicons.Car;
default:
return Expensicons.Cash;
@@ -148,21 +143,6 @@ function TypeCell({transactionItem, isLargeScreenWidth}: TransactionCellProps) {
);
}
-function ActionCell({onButtonPress}: ActionCellProps) {
- const {translate} = useLocalize();
- const styles = useThemeStyles();
-
- return (
-
- );
-}
-
function CategoryCell({isLargeScreenWidth, showTooltip, transactionItem}: TransactionCellProps) {
const styles = useThemeStyles();
return isLargeScreenWidth ? (
@@ -217,7 +197,6 @@ function TaxCell({transactionItem, showTooltip}: TransactionCellProps) {
function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeaderOnNarrowLayout = true, containerStyle, isChildListItem = false}: TransactionListItemRowProps) {
const styles = useThemeStyles();
- const {translate} = useLocalize();
const {isLargeScreenWidth} = useWindowDimensions();
const StyleUtils = useStyleUtils();
@@ -230,8 +209,8 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
participantFromDisplayName={item.formattedFrom}
participantTo={item.to}
participantToDisplayName={item.formattedTo}
- buttonText={translate('common.view')}
onButtonPress={onButtonPress}
+ action={item.action}
/>
)}
@@ -288,41 +267,41 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
return (
-
+
-
+
-
+
-
+
-
+
{item.shouldShowCategory && (
-
+
)}
{item.shouldShowTag && (
-
+
)}
{item.shouldShowTax && (
-
+
)}
-
+
-
+
-
+
diff --git a/src/components/SelectionList/SearchTableHeader.tsx b/src/components/SelectionList/SearchTableHeader.tsx
index 9cb7bb940bd5..6ba753273e8c 100644
--- a/src/components/SelectionList/SearchTableHeader.tsx
+++ b/src/components/SelectionList/SearchTableHeader.tsx
@@ -20,65 +20,65 @@ type SearchColumnConfig = {
const SearchColumns: SearchColumnConfig[] = [
{
- columnName: CONST.SEARCH_TABLE_COLUMNS.RECEIPT,
+ columnName: CONST.SEARCH.TABLE_COLUMNS.RECEIPT,
translationKey: 'common.receipt',
shouldShow: () => true,
isColumnSortable: false,
},
{
- columnName: CONST.SEARCH_TABLE_COLUMNS.DATE,
+ columnName: CONST.SEARCH.TABLE_COLUMNS.DATE,
translationKey: 'common.date',
shouldShow: () => true,
},
{
- columnName: CONST.SEARCH_TABLE_COLUMNS.MERCHANT,
+ columnName: CONST.SEARCH.TABLE_COLUMNS.MERCHANT,
translationKey: 'common.merchant',
shouldShow: (data: OnyxTypes.SearchResults['data']) => SearchUtils.getShouldShowMerchant(data),
},
{
- columnName: CONST.SEARCH_TABLE_COLUMNS.DESCRIPTION,
+ columnName: CONST.SEARCH.TABLE_COLUMNS.DESCRIPTION,
translationKey: 'common.description',
shouldShow: (data: OnyxTypes.SearchResults['data']) => !SearchUtils.getShouldShowMerchant(data),
},
{
- columnName: CONST.SEARCH_TABLE_COLUMNS.FROM,
+ columnName: CONST.SEARCH.TABLE_COLUMNS.FROM,
translationKey: 'common.from',
shouldShow: () => true,
},
{
- columnName: CONST.SEARCH_TABLE_COLUMNS.TO,
+ columnName: CONST.SEARCH.TABLE_COLUMNS.TO,
translationKey: 'common.to',
shouldShow: () => true,
},
{
- columnName: CONST.SEARCH_TABLE_COLUMNS.CATEGORY,
+ columnName: CONST.SEARCH.TABLE_COLUMNS.CATEGORY,
translationKey: 'common.category',
shouldShow: (data, metadata) => metadata?.columnsToShow.shouldShowCategoryColumn ?? false,
},
{
- columnName: CONST.SEARCH_TABLE_COLUMNS.TAG,
+ columnName: CONST.SEARCH.TABLE_COLUMNS.TAG,
translationKey: 'common.tag',
shouldShow: (data, metadata) => metadata?.columnsToShow.shouldShowTagColumn ?? false,
},
{
- columnName: CONST.SEARCH_TABLE_COLUMNS.TAX_AMOUNT,
+ columnName: CONST.SEARCH.TABLE_COLUMNS.TAX_AMOUNT,
translationKey: 'common.tax',
shouldShow: (data, metadata) => metadata?.columnsToShow.shouldShowTaxColumn ?? false,
isColumnSortable: false,
},
{
- columnName: CONST.SEARCH_TABLE_COLUMNS.TOTAL_AMOUNT,
+ columnName: CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT,
translationKey: 'common.total',
shouldShow: () => true,
},
{
- columnName: CONST.SEARCH_TABLE_COLUMNS.TYPE,
+ columnName: CONST.SEARCH.TABLE_COLUMNS.TYPE,
translationKey: 'common.type',
shouldShow: () => true,
isColumnSortable: false,
},
{
- columnName: CONST.SEARCH_TABLE_COLUMNS.ACTION,
+ columnName: CONST.SEARCH.TABLE_COLUMNS.ACTION,
translationKey: 'common.action',
shouldShow: () => true,
isColumnSortable: false,
@@ -115,7 +115,7 @@ function SearchTableHeader({data, metadata, sortBy, sortOrder, isSortingAllowed,
}
const isActive = sortBy === columnName;
- const textStyle = columnName === CONST.SEARCH_TABLE_COLUMNS.RECEIPT ? StyleUtils.getTextOverflowStyle('clip') : null;
+ const textStyle = columnName === CONST.SEARCH.TABLE_COLUMNS.RECEIPT ? StyleUtils.getTextOverflowStyle('clip') : null;
const isSortable = isSortingAllowed && isColumnSortable;
return (
@@ -123,7 +123,7 @@ function SearchTableHeader({data, metadata, sortBy, sortOrder, isSortingAllowed,
key={translationKey}
text={translate(translationKey)}
textStyle={textStyle}
- sortOrder={sortOrder ?? CONST.SORT_ORDER.ASC}
+ sortOrder={sortOrder ?? CONST.SEARCH.SORT_ORDER.ASC}
isActive={isActive}
containerStyle={[StyleUtils.getSearchTableColumnStyles(columnName, shouldShowYear)]}
isSortable={isSortable}
diff --git a/src/components/SelectionList/SortableHeaderText.tsx b/src/components/SelectionList/SortableHeaderText.tsx
index bd5f4873bbbc..8b0accf45711 100644
--- a/src/components/SelectionList/SortableHeaderText.tsx
+++ b/src/components/SelectionList/SortableHeaderText.tsx
@@ -39,11 +39,11 @@ export default function SortableHeaderText({text, sortOrder, isActive, textStyle
);
}
- const icon = sortOrder === CONST.SORT_ORDER.ASC ? Expensicons.ArrowUpLong : Expensicons.ArrowDownLong;
+ const icon = sortOrder === CONST.SEARCH.SORT_ORDER.ASC ? Expensicons.ArrowUpLong : Expensicons.ArrowDownLong;
const displayIcon = isActive;
const activeColumnStyle = isSortable && isActive && styles.searchTableHeaderActive;
- const nextSortOrder = isActive && sortOrder === CONST.SORT_ORDER.DESC ? CONST.SORT_ORDER.ASC : CONST.SORT_ORDER.DESC;
+ const nextSortOrder = isActive && sortOrder === CONST.SEARCH.SORT_ORDER.DESC ? CONST.SEARCH.SORT_ORDER.ASC : CONST.SEARCH.SORT_ORDER.DESC;
return (
diff --git a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx
index 22e6c6807ee8..8881ce3517c6 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx
+++ b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx
@@ -47,7 +47,7 @@ function BaseCentralPaneNavigator() {
/>
diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.tsx
index 9b2e9449c672..79cb33ef9b39 100644
--- a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.tsx
+++ b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.tsx
@@ -100,7 +100,7 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps
{
- interceptAnonymousUser(() => Navigation.navigate(ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.ALL)));
+ interceptAnonymousUser(() => Navigation.navigate(ROUTES.SEARCH.getRoute(CONST.SEARCH.TAB.ALL)));
}}
role={CONST.ROLE.BUTTON}
accessibilityLabel={translate('common.search')}
diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.website.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.website.tsx
index 4fecfdcb0e3e..699ebebbc66c 100644
--- a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.website.tsx
+++ b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.website.tsx
@@ -101,7 +101,7 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps
{
- interceptAnonymousUser(() => Navigation.navigate(ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.ALL)));
+ interceptAnonymousUser(() => Navigation.navigate(ROUTES.SEARCH.getRoute(CONST.SEARCH.TAB.ALL)));
}}
role={CONST.ROLE.BUTTON}
accessibilityLabel={translate('common.search')}
diff --git a/src/libs/Navigation/switchPolicyID.ts b/src/libs/Navigation/switchPolicyID.ts
index 78d23cb9d53c..ffaaf8daa081 100644
--- a/src/libs/Navigation/switchPolicyID.ts
+++ b/src/libs/Navigation/switchPolicyID.ts
@@ -77,7 +77,7 @@ export default function switchPolicyID(navigation: NavigationContainerRef>;
const action: StackNavigationAction = getActionFromState(stateFromPath, linkingConfig.config);
diff --git a/src/libs/SearchUtils.ts b/src/libs/SearchUtils.ts
index 01b9a61ab73f..5fdd12556d8a 100644
--- a/src/libs/SearchUtils.ts
+++ b/src/libs/SearchUtils.ts
@@ -13,22 +13,22 @@ import type {CentralPaneNavigatorParamList, RootStackParamList, State} from './N
import * as TransactionUtils from './TransactionUtils';
import * as UserUtils from './UserUtils';
-type SortOrder = ValueOf;
-type SearchColumnType = ValueOf;
+type SortOrder = ValueOf;
+type SearchColumnType = ValueOf;
const columnNamesToSortingProperty = {
- [CONST.SEARCH_TABLE_COLUMNS.TO]: 'formattedTo' as const,
- [CONST.SEARCH_TABLE_COLUMNS.FROM]: 'formattedFrom' as const,
- [CONST.SEARCH_TABLE_COLUMNS.DATE]: 'date' as const,
- [CONST.SEARCH_TABLE_COLUMNS.TAG]: 'tag' as const,
- [CONST.SEARCH_TABLE_COLUMNS.MERCHANT]: 'formattedMerchant' as const,
- [CONST.SEARCH_TABLE_COLUMNS.TOTAL_AMOUNT]: 'formattedTotal' as const,
- [CONST.SEARCH_TABLE_COLUMNS.CATEGORY]: 'category' as const,
- [CONST.SEARCH_TABLE_COLUMNS.TYPE]: 'type' as const,
- [CONST.SEARCH_TABLE_COLUMNS.ACTION]: 'action' as const,
- [CONST.SEARCH_TABLE_COLUMNS.DESCRIPTION]: null,
- [CONST.SEARCH_TABLE_COLUMNS.TAX_AMOUNT]: null,
- [CONST.SEARCH_TABLE_COLUMNS.RECEIPT]: null,
+ [CONST.SEARCH.TABLE_COLUMNS.TO]: 'formattedTo' as const,
+ [CONST.SEARCH.TABLE_COLUMNS.FROM]: 'formattedFrom' as const,
+ [CONST.SEARCH.TABLE_COLUMNS.DATE]: 'date' as const,
+ [CONST.SEARCH.TABLE_COLUMNS.TAG]: 'tag' as const,
+ [CONST.SEARCH.TABLE_COLUMNS.MERCHANT]: 'formattedMerchant' as const,
+ [CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT]: 'formattedTotal' as const,
+ [CONST.SEARCH.TABLE_COLUMNS.CATEGORY]: 'category' as const,
+ [CONST.SEARCH.TABLE_COLUMNS.TYPE]: 'type' as const,
+ [CONST.SEARCH.TABLE_COLUMNS.ACTION]: 'action' as const,
+ [CONST.SEARCH.TABLE_COLUMNS.DESCRIPTION]: null,
+ [CONST.SEARCH.TABLE_COLUMNS.TAX_AMOUNT]: null,
+ [CONST.SEARCH.TABLE_COLUMNS.RECEIPT]: null,
};
/**
@@ -58,7 +58,7 @@ function getTransactionItemCommonFormattedProperties(
}
function isSearchDataType(type: string): type is SearchDataTypes {
- const searchDataTypes: string[] = Object.values(CONST.SEARCH_DATA_TYPES);
+ const searchDataTypes: string[] = Object.values(CONST.SEARCH.DATA_TYPES);
return searchDataTypes.includes(type);
}
@@ -203,12 +203,12 @@ function getReportSections(data: OnyxTypes.SearchResults['data'], metadata: Onyx
}
const searchTypeToItemMap: SearchTypeToItemMap = {
- [CONST.SEARCH_DATA_TYPES.TRANSACTION]: {
+ [CONST.SEARCH.DATA_TYPES.TRANSACTION]: {
listItem: TransactionListItem,
getSections: getTransactionsSections,
getSortedSections: getSortedTransactionData,
},
- [CONST.SEARCH_DATA_TYPES.REPORT]: {
+ [CONST.SEARCH.DATA_TYPES.REPORT]: {
listItem: ReportListItem,
getSections: getReportSections,
// sorting for ReportItems not yet implemented
@@ -263,13 +263,13 @@ function getSortedTransactionData(data: TransactionListItemType[], sortBy?: Sear
// We are guaranteed that both a and b will be string or number at the same time
if (typeof aValue === 'string' && typeof bValue === 'string') {
- return sortOrder === CONST.SORT_ORDER.ASC ? aValue.toLowerCase().localeCompare(bValue) : bValue.toLowerCase().localeCompare(aValue);
+ return sortOrder === CONST.SEARCH.SORT_ORDER.ASC ? aValue.toLowerCase().localeCompare(bValue) : bValue.toLowerCase().localeCompare(aValue);
}
const aNum = aValue as number;
const bNum = bValue as number;
- return sortOrder === CONST.SORT_ORDER.ASC ? aNum - bNum : bNum - aNum;
+ return sortOrder === CONST.SEARCH.SORT_ORDER.ASC ? aNum - bNum : bNum - aNum;
});
}
diff --git a/src/pages/Search/SearchFilters.tsx b/src/pages/Search/SearchFilters.tsx
index 6026a4570a91..bbb861364f00 100644
--- a/src/pages/Search/SearchFilters.tsx
+++ b/src/pages/Search/SearchFilters.tsx
@@ -34,27 +34,27 @@ function SearchFilters({query}: SearchFiltersProps) {
const filterItems: SearchMenuFilterItem[] = [
{
title: translate('common.expenses'),
- query: CONST.TAB_SEARCH.ALL,
+ query: CONST.SEARCH.TAB.ALL,
icon: Expensicons.Receipt,
- route: ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.ALL),
+ route: ROUTES.SEARCH.getRoute(CONST.SEARCH.TAB.ALL),
},
{
title: translate('common.shared'),
- query: CONST.TAB_SEARCH.SHARED,
+ query: CONST.SEARCH.TAB.SHARED,
icon: Expensicons.Send,
- route: ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.SHARED),
+ route: ROUTES.SEARCH.getRoute(CONST.SEARCH.TAB.SHARED),
},
{
title: translate('common.drafts'),
- query: CONST.TAB_SEARCH.DRAFTS,
+ query: CONST.SEARCH.TAB.DRAFTS,
icon: Expensicons.Pencil,
- route: ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.DRAFTS),
+ route: ROUTES.SEARCH.getRoute(CONST.SEARCH.TAB.DRAFTS),
},
{
title: translate('common.finished'),
- query: CONST.TAB_SEARCH.FINISHED,
+ query: CONST.SEARCH.TAB.FINISHED,
icon: Expensicons.CheckCircle,
- route: ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.FINISHED),
+ route: ROUTES.SEARCH.getRoute(CONST.SEARCH.TAB.FINISHED),
},
];
const activeItemIndex = filterItems.findIndex((item) => item.query === query);
diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx
index 1f7db3eeb2c5..771bb85d327c 100644
--- a/src/pages/Search/SearchPage.tsx
+++ b/src/pages/Search/SearchPage.tsx
@@ -26,7 +26,7 @@ function SearchPage({route}: SearchPageProps) {
const {query: rawQuery, policyIDs, sortBy, sortOrder} = route?.params ?? {};
const query = rawQuery as SearchQuery;
- const isValidQuery = Object.values(CONST.TAB_SEARCH).includes(query);
+ const isValidQuery = Object.values(CONST.SEARCH.TAB).includes(query);
const headerContent: {[key in SearchQuery]: {icon: IconAsset; title: string}} = {
all: {icon: Illustrations.MoneyReceipts, title: translate('common.expenses')},
@@ -35,7 +35,7 @@ function SearchPage({route}: SearchPageProps) {
finished: {icon: Illustrations.CheckmarkCircle, title: translate('common.finished')},
};
- const handleOnBackButtonPress = () => Navigation.goBack(ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.ALL));
+ const handleOnBackButtonPress = () => Navigation.goBack(ROUTES.SEARCH.getRoute(CONST.SEARCH.TAB.ALL));
// On small screens this page is not displayed, the configuration is in the file: src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx
// To avoid calling hooks in the Search component when this page isn't visible, we return null here.
diff --git a/src/pages/Search/SearchPageBottomTab.tsx b/src/pages/Search/SearchPageBottomTab.tsx
index c6baf7c5b008..a0a3c9969247 100644
--- a/src/pages/Search/SearchPageBottomTab.tsx
+++ b/src/pages/Search/SearchPageBottomTab.tsx
@@ -21,8 +21,8 @@ type SearchPageProps = StackScreenProps Navigation.goBack(ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.ALL));
+ const handleOnBackButtonPress = () => Navigation.goBack(ROUTES.SEARCH.getRoute(CONST.SEARCH.TAB.ALL));
return (
({
getSearchTableColumnStyles: (columnName: string, shouldExtendDateColumn = false): ViewStyle => {
let columnWidth;
switch (columnName) {
- case CONST.SEARCH_TABLE_COLUMNS.RECEIPT:
+ case CONST.SEARCH.TABLE_COLUMNS.RECEIPT:
columnWidth = {...getWidthStyle(variables.w36), ...styles.alignItemsCenter};
break;
- case CONST.SEARCH_TABLE_COLUMNS.DATE:
+ case CONST.SEARCH.TABLE_COLUMNS.DATE:
columnWidth = getWidthStyle(shouldExtendDateColumn ? variables.w84 : variables.w52);
break;
- case CONST.SEARCH_TABLE_COLUMNS.MERCHANT:
- case CONST.SEARCH_TABLE_COLUMNS.FROM:
- case CONST.SEARCH_TABLE_COLUMNS.TO:
+ case CONST.SEARCH.TABLE_COLUMNS.MERCHANT:
+ case CONST.SEARCH.TABLE_COLUMNS.FROM:
+ case CONST.SEARCH.TABLE_COLUMNS.TO:
columnWidth = styles.flex1;
break;
- case CONST.SEARCH_TABLE_COLUMNS.CATEGORY:
- case CONST.SEARCH_TABLE_COLUMNS.TAG:
+ case CONST.SEARCH.TABLE_COLUMNS.CATEGORY:
+ case CONST.SEARCH.TABLE_COLUMNS.TAG:
columnWidth = {...getWidthStyle(variables.w36), ...styles.flex1};
break;
- case CONST.SEARCH_TABLE_COLUMNS.TAX_AMOUNT:
- case CONST.SEARCH_TABLE_COLUMNS.TOTAL_AMOUNT:
+ case CONST.SEARCH.TABLE_COLUMNS.TAX_AMOUNT:
+ case CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT:
columnWidth = {...getWidthStyle(variables.w96), ...styles.alignItemsEnd};
break;
- case CONST.SEARCH_TABLE_COLUMNS.TYPE:
+ case CONST.SEARCH.TABLE_COLUMNS.TYPE:
columnWidth = {...getWidthStyle(variables.w20), ...styles.alignItemsCenter};
break;
- case CONST.SEARCH_TABLE_COLUMNS.ACTION:
+ case CONST.SEARCH.TABLE_COLUMNS.ACTION:
columnWidth = {...getWidthStyle(variables.w80), ...styles.alignItemsCenter};
break;
default:
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 4bf981437135..c3a384f49fc3 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -239,8 +239,11 @@ export default {
eReceiptBackgroundImageMinWidth: 217,
searchTypeColumnWidth: 52,
- w20: 20,
+
+ h20: 20,
+ h28: 28,
h36: 36,
+ w20: 20,
w28: 28,
w36: 36,
w40: 40,
diff --git a/src/types/onyx/SearchResults.ts b/src/types/onyx/SearchResults.ts
index 676a1d3873d9..c13cd89a0619 100644
--- a/src/types/onyx/SearchResults.ts
+++ b/src/types/onyx/SearchResults.ts
@@ -6,19 +6,19 @@ import type {SearchColumnType, SortOrder} from '@libs/SearchUtils';
import type CONST from '@src/CONST';
/** Types of search data */
-type SearchDataTypes = ValueOf;
+type SearchDataTypes = ValueOf;
/** Model of search result list item */
-type ListItemType = T extends typeof CONST.SEARCH_DATA_TYPES.TRANSACTION
+type ListItemType = T extends typeof CONST.SEARCH.DATA_TYPES.TRANSACTION
? typeof TransactionListItem
- : T extends typeof CONST.SEARCH_DATA_TYPES.REPORT
+ : T extends typeof CONST.SEARCH.DATA_TYPES.REPORT
? typeof ReportListItem
: never;
/** Model of search result section */
-type SectionsType = T extends typeof CONST.SEARCH_DATA_TYPES.TRANSACTION
+type SectionsType = T extends typeof CONST.SEARCH.DATA_TYPES.TRANSACTION
? TransactionListItemType[]
- : T extends typeof CONST.SEARCH_DATA_TYPES.REPORT
+ : T extends typeof CONST.SEARCH.DATA_TYPES.REPORT
? ReportListItemType[]
: never;
@@ -162,7 +162,7 @@ type SearchTransaction = {
category: string;
/** The type of request */
- type: ValueOf;
+ type: ValueOf;
/** The type of report the transaction is associated with */
reportType: string;
@@ -214,10 +214,10 @@ type SearchTransaction = {
type SearchAccountDetails = Partial;
/** Types of searchable transactions */
-type SearchTransactionType = ValueOf;
+type SearchTransactionType = ValueOf;
/** Types of search queries */
-type SearchQuery = ValueOf;
+type SearchQuery = ValueOf;
/** Model of search results */
type SearchResults = {