diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx index eb376db35418..b55ba0651b3a 100644 --- a/src/components/Search/SearchRouter/SearchRouter.tsx +++ b/src/components/Search/SearchRouter/SearchRouter.tsx @@ -74,7 +74,7 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla const {shouldUseNarrowLayout} = useResponsiveLayout(); const listRef = useRef(null); const expensifyIcons = useMemoizedLazyExpensifyIcons(['MagnifyingGlass', 'ConciergeAvatar']); - const askConcierge = useAskConcierge(); + const {askConcierge, shouldShowAskConcierge} = useAskConcierge(); // The actual input text that the user sees const [textInputValue, , setTextInputValue] = useDebouncedState('', 500); @@ -210,15 +210,19 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla keyForList: CONST.SEARCH.SEARCH_ROUTER_ITEM_TYPE.FIND_ITEM, searchItemType: CONST.SEARCH.SEARCH_ROUTER_ITEM_TYPE.SEARCH, }, - { - text: translate('search.askConcierge', textInputValue), - singleIcon: expensifyIcons.ConciergeAvatar, - shouldIconApplyFill: false, - searchQuery: textInputValue, - itemStyle: styles.activeComponentBG, - keyForList: CONST.SEARCH.SEARCH_ROUTER_ITEM_TYPE.ASK_CONCIERGE, - searchItemType: CONST.SEARCH.SEARCH_ROUTER_ITEM_TYPE.ASK_CONCIERGE, - }, + ...(shouldShowAskConcierge + ? [ + { + text: translate('search.askConcierge', textInputValue), + singleIcon: expensifyIcons.ConciergeAvatar, + shouldIconApplyFill: false, + searchQuery: textInputValue, + itemStyle: styles.activeComponentBG, + keyForList: CONST.SEARCH.SEARCH_ROUTER_ITEM_TYPE.ASK_CONCIERGE, + searchItemType: CONST.SEARCH.SEARCH_ROUTER_ITEM_TYPE.ASK_CONCIERGE, + }, + ] + : []), ] : undefined; diff --git a/src/components/Search/SearchRouter/useAskConcierge.tsx b/src/components/Search/SearchRouter/useAskConcierge.tsx index 176409de70f5..ee1ccb0ff0c2 100644 --- a/src/components/Search/SearchRouter/useAskConcierge.tsx +++ b/src/components/Search/SearchRouter/useAskConcierge.tsx @@ -11,6 +11,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; /** * Returns a callback that opens the side panel (or Concierge chat on native) * and sends the provided search query as a message. + * Also returns a flag indicating whether the Ask Concierge item is ready to be displayed. */ function useAskConcierge() { const sidePanelReportID = useSidePanelReportID(); @@ -20,13 +21,14 @@ function useAskConcierge() { const [targetReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(targetReportID)}`); const {timezone, accountID: currentUserAccountID} = useCurrentUserPersonalDetails(); const delegateAccountID = useDelegateAccountID(); + const shouldShowAskConcierge = !!targetReportID && !!targetReport; - return (searchQuery: string) => { - openConciergeAnywhere(); + const askConcierge = (searchQuery: string) => { const trimmedQuery = searchQuery.trim(); - if (!trimmedQuery || !targetReport || !targetReportID) { + if (!trimmedQuery || !shouldShowAskConcierge) { return; } + openConciergeAnywhere(); addComment({ report: targetReport, notifyReportID: targetReportID, @@ -39,6 +41,8 @@ function useAskConcierge() { delegateAccountID, }); }; + + return {askConcierge, shouldShowAskConcierge}; } export default useAskConcierge;