Don't show "Ask Concierge" in search router until the report is loaded

Author: mhawryluk

src/components/Search/SearchRouter/SearchRouter.tsx

@@ -74,7 +74,7 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const listRef = useRef<SelectionListWithSectionsHandle>(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;
 

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;