From 141cff88a2c6d05d6df5a5b76f7bc2232b341aab Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Tue, 20 Aug 2024 16:36:42 -0400 Subject: [PATCH] Revert "Create status bar" --- .../simple-illustration__envelopereceipt.svg | 49 ------ src/CONST.ts | 15 +- src/components/Button/index.tsx | 20 +-- src/components/Icon/Illustrations.ts | 2 - src/components/Search/SearchPageHeader.tsx | 30 ++-- src/components/Search/SearchStatusBar.tsx | 166 ------------------ src/components/Search/index.tsx | 31 ++-- src/components/Search/types.ts | 10 +- .../SelectionList/SearchTableHeader.tsx | 19 +- src/languages/en.ts | 2 - src/languages/es.ts | 2 - .../BottomTabBar.tsx | 6 +- src/libs/Navigation/switchPolicyID.ts | 3 +- src/libs/SearchUtils.ts | 64 +++++-- src/pages/Search/EmptySearchView.tsx | 2 + src/pages/Search/SearchPage.tsx | 8 +- src/pages/Search/SearchPageBottomTab.tsx | 11 +- ...earchTypeMenu.tsx => SearchStatusMenu.tsx} | 58 +++--- ...uNarrow.tsx => SearchStatusMenuNarrow.tsx} | 14 +- .../Subscription/CardSection/CardSection.tsx | 3 +- src/styles/index.ts | 2 +- src/types/onyx/SearchResults.ts | 14 +- 22 files changed, 176 insertions(+), 355 deletions(-) delete mode 100644 assets/images/simple-illustrations/simple-illustration__envelopereceipt.svg delete mode 100644 src/components/Search/SearchStatusBar.tsx rename src/pages/Search/{SearchTypeMenu.tsx => SearchStatusMenu.tsx} (57%) rename src/pages/Search/{SearchTypeMenuNarrow.tsx => SearchStatusMenuNarrow.tsx} (91%) diff --git a/assets/images/simple-illustrations/simple-illustration__envelopereceipt.svg b/assets/images/simple-illustrations/simple-illustration__envelopereceipt.svg deleted file mode 100644 index eb2bad31620d..000000000000 --- a/assets/images/simple-illustrations/simple-illustration__envelopereceipt.svg +++ /dev/null @@ -1,49 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/CONST.ts b/src/CONST.ts index 0becab6d3483..db29c1195e48 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -5251,6 +5251,8 @@ const CONST = { SEARCH: { RESULTS_PAGE_SIZE: 50, DATA_TYPES: { + TRANSACTION: 'transaction', + REPORT: 'report', EXPENSE: 'expense', INVOICE: 'invoice', TRIP: 'trip', @@ -5279,10 +5281,9 @@ const CONST = { STATUS: { EXPENSE: { ALL: 'all', + SHARED: 'shared', DRAFTS: 'drafts', - OUTSTANDING: 'outstanding', - APPROVED: 'approved', - PAID: 'paid', + FINISHED: 'finished', }, INVOICE: { ALL: 'all', @@ -5297,6 +5298,14 @@ const CONST = { PAID: 'paid', }, }, + TAB: { + EXPENSE: { + ALL: 'type:expense status:all', + SHARED: 'type:expense status:shared', + DRAFTS: 'type:expense status:drafts', + FINISHED: 'type:expense status:finished', + }, + }, TABLE_COLUMNS: { RECEIPT: 'receipt', DATE: 'date', diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 1441266c76de..126c81961cee 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -29,9 +29,6 @@ type ButtonProps = Partial & { /** The fill color to pass into the icon. */ iconFill?: string; - /** The fill color to pass into the icon when the button is hovered. */ - iconHoverFill?: string; - /** Any additional styles to pass to the left icon container. */ iconStyles?: StyleProp; @@ -83,15 +80,9 @@ type ButtonProps = Partial & { /** Additional text styles */ textStyles?: StyleProp; - /** Additional text styles when the button is hovered */ - textHoverStyles?: StyleProp; - /** Whether we should use the default hover style */ shouldUseDefaultHover?: boolean; - /** Additional hover styles */ - hoverStyles?: StyleProp; - /** Whether we should use the success theme color */ success?: boolean; @@ -179,7 +170,6 @@ function Button( iconRight = Expensicons.ArrowRight, iconFill, - iconHoverFill, icon = null, iconStyles = [], iconRightStyles = [], @@ -204,10 +194,8 @@ function Button( style = [], innerStyles = [], textStyles = [], - textHoverStyles = [], shouldUseDefaultHover = true, - hoverStyles = undefined, success = false, danger = false, @@ -250,7 +238,6 @@ function Button( danger && styles.buttonDangerText, !!icon && styles.textAlignLeft, textStyles, - isHovered && textHoverStyles, link && styles.link, link && isHovered && StyleUtils.getColorStyle(theme.linkHover), link && styles.fontWeightNormal, @@ -272,7 +259,7 @@ function Button( ) : ( & { subtitleStyles?: StyleProp; @@ -100,23 +100,13 @@ type SearchPageHeaderProps = { type SearchHeaderOptionValue = DeepValueOf | undefined; -type HeaderContent = { - icon: IconAsset; - titleText: TranslationPaths; +const headerContent: {[key in SearchStatus]: {icon: IconAsset; titleText: TranslationPaths}} = { + all: {icon: Illustrations.MoneyReceipts, titleText: 'common.expenses'}, + shared: {icon: Illustrations.SendMoney, titleText: 'common.shared'}, + drafts: {icon: Illustrations.Pencil, titleText: 'common.drafts'}, + finished: {icon: Illustrations.CheckmarkCircle, titleText: 'common.finished'}, }; -function getHeaderContent(type: SearchDataTypes): HeaderContent { - switch (type) { - case CONST.SEARCH.DATA_TYPES.INVOICE: - return {icon: Illustrations.EnvelopeReceipt, titleText: 'workspace.common.invoices'}; - case CONST.SEARCH.DATA_TYPES.TRIP: - return {icon: Illustrations.Luggage, titleText: 'travel.trips'}; - case CONST.SEARCH.DATA_TYPES.EXPENSE: - default: - return {icon: Illustrations.MoneyReceipts, titleText: 'common.expenses'}; - } -} - function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModalOpen, setDownloadErrorModalOpen, isCustomQuery, data}: SearchPageHeaderProps) { const {translate} = useLocalize(); const theme = useTheme(); @@ -141,10 +131,10 @@ function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModa .map((item) => item.reportID), [data, selectedTransactions], ); - const {status, type} = queryJSON; - const headerSubtitle = isCustomQuery ? SearchUtils.getSearchHeaderTitle(queryJSON) : translate(getHeaderContent(type).titleText); + const {status} = queryJSON; + const headerSubtitle = isCustomQuery ? SearchUtils.getSearchHeaderTitle(queryJSON) : translate(headerContent[status]?.titleText); const headerTitle = isCustomQuery ? translate('search.filtersHeader') : ''; - const headerIcon = isCustomQuery ? Illustrations.Filters : getHeaderContent(type).icon; + const headerIcon = isCustomQuery ? Illustrations.Filters : headerContent[status]?.icon; const subtitleStyles = isCustomQuery ? {} : styles.textHeadlineH2; diff --git a/src/components/Search/SearchStatusBar.tsx b/src/components/Search/SearchStatusBar.tsx deleted file mode 100644 index 7c1ffeff1818..000000000000 --- a/src/components/Search/SearchStatusBar.tsx +++ /dev/null @@ -1,166 +0,0 @@ -import React from 'react'; -import Button from '@components/Button'; -import * as Expensicons from '@components/Icon/Expensicons'; -import ScrollView from '@components/ScrollView'; -import useLocalize from '@hooks/useLocalize'; -import useSingleExecution from '@hooks/useSingleExecution'; -import useStyleUtils from '@hooks/useStyleUtils'; -import useTheme from '@hooks/useTheme'; -import useThemeStyles from '@hooks/useThemeStyles'; -import Navigation from '@libs/Navigation/Navigation'; -import * as SearchUtils from '@libs/SearchUtils'; -import CONST from '@src/CONST'; -import type {TranslationPaths} from '@src/languages/types'; -import type {SearchDataTypes} from '@src/types/onyx/SearchResults'; -import type IconAsset from '@src/types/utils/IconAsset'; -import type {ExpenseSearchStatus, InvoiceSearchStatus, SearchQueryString, SearchStatus, TripSearchStatus} from './types'; - -type SearchStatusBarProps = { - type: SearchDataTypes; - status: SearchStatus; -}; - -const expenseOptions: Array<{key: ExpenseSearchStatus; icon: IconAsset; text: TranslationPaths; query: SearchQueryString}> = [ - { - key: CONST.SEARCH.STATUS.EXPENSE.ALL, - icon: Expensicons.All, - text: 'common.all', - query: SearchUtils.buildCannedSearchQuery(CONST.SEARCH.DATA_TYPES.EXPENSE, CONST.SEARCH.STATUS.EXPENSE.ALL), - }, - { - key: CONST.SEARCH.STATUS.EXPENSE.DRAFTS, - icon: Expensicons.Pencil, - text: 'common.drafts', - query: SearchUtils.buildCannedSearchQuery(CONST.SEARCH.DATA_TYPES.EXPENSE, CONST.SEARCH.STATUS.EXPENSE.DRAFTS), - }, - { - key: CONST.SEARCH.STATUS.EXPENSE.OUTSTANDING, - icon: Expensicons.Hourglass, - text: 'common.outstanding', - query: SearchUtils.buildCannedSearchQuery(CONST.SEARCH.DATA_TYPES.EXPENSE, CONST.SEARCH.STATUS.EXPENSE.OUTSTANDING), - }, - { - key: CONST.SEARCH.STATUS.EXPENSE.APPROVED, - icon: Expensicons.ThumbsUp, - text: 'iou.approved', - query: SearchUtils.buildCannedSearchQuery(CONST.SEARCH.DATA_TYPES.EXPENSE, CONST.SEARCH.STATUS.EXPENSE.APPROVED), - }, - { - key: CONST.SEARCH.STATUS.EXPENSE.PAID, - icon: Expensicons.MoneyBag, - text: 'iou.settledExpensify', - query: SearchUtils.buildCannedSearchQuery(CONST.SEARCH.DATA_TYPES.EXPENSE, CONST.SEARCH.STATUS.EXPENSE.PAID), - }, -]; - -const invoiceOptions: Array<{key: InvoiceSearchStatus; icon: IconAsset; text: TranslationPaths; query: SearchQueryString}> = [ - { - key: CONST.SEARCH.STATUS.INVOICE.ALL, - icon: Expensicons.All, - text: 'common.all', - query: SearchUtils.buildCannedSearchQuery(CONST.SEARCH.DATA_TYPES.INVOICE, CONST.SEARCH.STATUS.INVOICE.ALL), - }, - { - key: CONST.SEARCH.STATUS.INVOICE.OUTSTANDING, - icon: Expensicons.Hourglass, - text: 'common.outstanding', - query: SearchUtils.buildCannedSearchQuery(CONST.SEARCH.DATA_TYPES.INVOICE, CONST.SEARCH.STATUS.INVOICE.OUTSTANDING), - }, - { - key: CONST.SEARCH.STATUS.INVOICE.PAID, - icon: Expensicons.MoneyBag, - text: 'iou.settledExpensify', - query: SearchUtils.buildCannedSearchQuery(CONST.SEARCH.DATA_TYPES.INVOICE, CONST.SEARCH.STATUS.INVOICE.PAID), - }, -]; - -const tripOptions: Array<{key: TripSearchStatus; icon: IconAsset; text: TranslationPaths; query: SearchQueryString}> = [ - { - key: CONST.SEARCH.STATUS.TRIP.ALL, - icon: Expensicons.All, - text: 'common.all', - query: SearchUtils.buildCannedSearchQuery(CONST.SEARCH.DATA_TYPES.TRIP, CONST.SEARCH.STATUS.TRIP.ALL), - }, - { - key: CONST.SEARCH.STATUS.TRIP.DRAFTS, - icon: Expensicons.Pencil, - text: 'common.drafts', - query: SearchUtils.buildCannedSearchQuery(CONST.SEARCH.DATA_TYPES.TRIP, CONST.SEARCH.STATUS.TRIP.DRAFTS), - }, - { - key: CONST.SEARCH.STATUS.TRIP.OUTSTANDING, - icon: Expensicons.Hourglass, - text: 'common.outstanding', - query: SearchUtils.buildCannedSearchQuery(CONST.SEARCH.DATA_TYPES.TRIP, CONST.SEARCH.STATUS.TRIP.OUTSTANDING), - }, - { - key: CONST.SEARCH.STATUS.TRIP.APPROVED, - icon: Expensicons.ThumbsUp, - text: 'iou.approved', - query: SearchUtils.buildCannedSearchQuery(CONST.SEARCH.DATA_TYPES.TRIP, CONST.SEARCH.STATUS.TRIP.APPROVED), - }, - { - key: CONST.SEARCH.STATUS.TRIP.PAID, - icon: Expensicons.MoneyBag, - text: 'iou.settledExpensify', - query: SearchUtils.buildCannedSearchQuery(CONST.SEARCH.DATA_TYPES.TRIP, CONST.SEARCH.STATUS.TRIP.PAID), - }, -]; - -function getOptions(type: SearchDataTypes) { - switch (type) { - case CONST.SEARCH.DATA_TYPES.INVOICE: - return invoiceOptions; - case CONST.SEARCH.DATA_TYPES.TRIP: - return tripOptions; - case CONST.SEARCH.DATA_TYPES.EXPENSE: - default: - return expenseOptions; - } -} - -function SearchStatusBar({type, status}: SearchStatusBarProps) { - const {singleExecution} = useSingleExecution(); - const styles = useThemeStyles(); - const StyleUtils = useStyleUtils(); - const theme = useTheme(); - const {translate} = useLocalize(); - const options = getOptions(type); - - return ( - - {options.map((item, index) => { - const onPress = singleExecution(() => Navigation.setParams({q: item.query})); - const isActive = status === item.key; - const isFirstItem = index === 0; - const isLastItem = index === options.length - 1; - - return ( -