diff --git a/assets/images/check-circle.svg b/assets/images/check-circle.svg new file mode 100644 index 000000000000..c13b83cbf281 --- /dev/null +++ b/assets/images/check-circle.svg @@ -0,0 +1,13 @@ + + + + + + \ No newline at end of file diff --git a/assets/images/simple-illustrations/simple-illustration__checkmarkcircle.svg b/assets/images/simple-illustrations/simple-illustration__checkmarkcircle.svg new file mode 100644 index 000000000000..a96a7e5dc0af --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__checkmarkcircle.svg @@ -0,0 +1,21 @@ + + + + + + + + + \ No newline at end of file diff --git a/assets/images/simple-illustrations/simple-illustration__sendmoney.svg b/assets/images/simple-illustrations/simple-illustration__sendmoney.svg new file mode 100644 index 000000000000..80393e3c30cf --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__sendmoney.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/CONST.ts b/src/CONST.ts index 601258890e33..fc95f05080a3 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -3476,6 +3476,9 @@ const CONST = { }, TAB_SEARCH: { ALL: 'all', + SHARED: 'shared', + DRAFTS: 'drafts', + FINISHED: 'finished', }, STATUS_TEXT_MAX_LENGTH: 100, diff --git a/src/components/Icon/Expensicons.ts b/src/components/Icon/Expensicons.ts index cadf0f01e225..bc677f91514e 100644 --- a/src/components/Icon/Expensicons.ts +++ b/src/components/Icon/Expensicons.ts @@ -35,6 +35,7 @@ import ChatBubbleReply from '@assets/images/chatbubble-reply.svg'; import ChatBubbleUnread from '@assets/images/chatbubble-unread.svg'; import ChatBubble from '@assets/images/chatbubble.svg'; import ChatBubbles from '@assets/images/chatbubbles.svg'; +import CheckCircle from '@assets/images/check-circle.svg'; import Checkmark from '@assets/images/checkmark.svg'; import Close from '@assets/images/close.svg'; import ClosedSign from '@assets/images/closed-sign.svg'; @@ -340,4 +341,5 @@ export { Lightbulb, DocumentPlus, Clear, + CheckCircle, }; diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts index 8d3f53be9396..e59d73aee192 100644 --- a/src/components/Icon/Illustrations.ts +++ b/src/components/Icon/Illustrations.ts @@ -40,6 +40,7 @@ import Binoculars from '@assets/images/simple-illustrations/simple-illustration_ import CarIce from '@assets/images/simple-illustrations/simple-illustration__car-ice.svg'; import Car from '@assets/images/simple-illustrations/simple-illustration__car.svg'; import ChatBubbles from '@assets/images/simple-illustrations/simple-illustration__chatbubbles.svg'; +import CheckmarkCircle from '@assets/images/simple-illustrations/simple-illustration__checkmarkcircle.svg'; import CoffeeMug from '@assets/images/simple-illustrations/simple-illustration__coffeemug.svg'; import Coins from '@assets/images/simple-illustrations/simple-illustration__coins.svg'; import CommentBubbles from '@assets/images/simple-illustrations/simple-illustration__commentbubbles.svg'; @@ -75,6 +76,7 @@ import ReceiptEnvelope from '@assets/images/simple-illustrations/simple-illustra import ReceiptWrangler from '@assets/images/simple-illustrations/simple-illustration__receipt-wrangler.svg'; import ReceiptUpload from '@assets/images/simple-illustrations/simple-illustration__receiptupload.svg'; import SanFrancisco from '@assets/images/simple-illustrations/simple-illustration__sanfrancisco.svg'; +import SendMoney from '@assets/images/simple-illustrations/simple-illustration__sendmoney.svg'; import ShieldYellow from '@assets/images/simple-illustrations/simple-illustration__shield.svg'; import SmallRocket from '@assets/images/simple-illustrations/simple-illustration__smallrocket.svg'; import SplitBill from '@assets/images/simple-illustrations/simple-illustration__splitbill.svg'; @@ -176,4 +178,6 @@ export { Tag, CarIce, Lightbulb, + SendMoney, + CheckmarkCircle, }; diff --git a/src/languages/en.ts b/src/languages/en.ts index 0f5822b9f411..cfb32ab3c242 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -334,6 +334,9 @@ export default { action: 'Action', expenses: 'Expenses', tax: 'Tax', + shared: 'Shared', + drafts: 'Drafts', + finished: 'Finished', }, location: { useCurrent: 'Use current location', diff --git a/src/languages/es.ts b/src/languages/es.ts index 4c636fa1ddf1..39fd2e41e7e8 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -324,6 +324,9 @@ export default { action: 'Acción', expenses: 'Gastos', tax: 'Impuesto', + shared: 'Compartido', + drafts: 'Borradores', + finished: 'Finalizado', }, connectionComplete: { title: 'Conexión Completa', diff --git a/src/pages/Search/SearchFilters.tsx b/src/pages/Search/SearchFilters.tsx index 06611db61824..6026a4570a91 100644 --- a/src/pages/Search/SearchFilters.tsx +++ b/src/pages/Search/SearchFilters.tsx @@ -12,6 +12,7 @@ import CONST from '@src/CONST'; import type {Route} from '@src/ROUTES'; import ROUTES from '@src/ROUTES'; import type IconAsset from '@src/types/utils/IconAsset'; +import SearchFiltersNarrow from './SearchFiltersNarrow'; type SearchFiltersProps = { query: string; @@ -37,13 +38,34 @@ function SearchFilters({query}: SearchFiltersProps) { icon: Expensicons.Receipt, route: ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.ALL), }, + { + title: translate('common.shared'), + query: CONST.TAB_SEARCH.SHARED, + icon: Expensicons.Send, + route: ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.SHARED), + }, + { + title: translate('common.drafts'), + query: CONST.TAB_SEARCH.DRAFTS, + icon: Expensicons.Pencil, + route: ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.DRAFTS), + }, + { + title: translate('common.finished'), + query: CONST.TAB_SEARCH.FINISHED, + icon: Expensicons.CheckCircle, + route: ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.FINISHED), + }, ]; const activeItemIndex = filterItems.findIndex((item) => item.query === query); - // We're not showing the filters on mobile yet since there's only one search option. - // We'll introduce the filters as part of https://github.com/Expensify/App/issues/39878 if (isSmallScreenWidth) { - return; + return ( + + ); } return ( @@ -58,8 +80,8 @@ function SearchFilters({query}: SearchFiltersProps) { interactive title={item.title} icon={item.icon} - iconWidth={variables.iconSizeLarge} - iconHeight={variables.iconSizeLarge} + iconWidth={variables.iconSizeNormal} + iconHeight={variables.iconSizeNormal} wrapperStyle={styles.sectionMenuItem} focused={index === activeItemIndex} hoverAndPressStyle={styles.hoveredComponentBG} diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx index f08a4057f3aa..ec8bc8090b2a 100644 --- a/src/pages/Search/SearchPage.tsx +++ b/src/pages/Search/SearchPage.tsx @@ -28,6 +28,9 @@ function SearchPage({route}: SearchPageProps) { const headerContent: {[key in SearchQuery]: {icon: IconAsset; title: string}} = { all: {icon: Illustrations.MoneyReceipts, title: translate('common.expenses')}, + shared: {icon: Illustrations.SendMoney, title: translate('common.shared')}, + drafts: {icon: Illustrations.Pencil, title: translate('common.drafts')}, + finished: {icon: Illustrations.CheckmarkCircle, title: translate('common.finished')}, }; const handleOnBackButtonPress = () => Navigation.goBack(ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.ALL));