feat: update files and permissions

Author: sf-tejas-nadkarni

packages/pwa-kit-create-app/assets/bootstrap/js/config/default.js.hbs

@@ -36,7 +36,8 @@ module.exports = {
             enableConversationContext: 'false',
             conversationContext: [],
             enableAgentFromHeader: 'false',
-            enableAgentFromFloatingButton: 'false'
+            enableAgentFromFloatingButton: 'false',
+            enableAgentFromSearchSuggestions: 'false'
         },
         // Customize how your 'site' and 'locale' are displayed in the url.
         url: {

packages/pwa-kit-create-app/assets/templates/@salesforce/retail-react-app/config/default.js.hbs

@@ -36,7 +36,8 @@ module.exports = {
             enableConversationContext: 'false',
             conversationContext: [],
             enableAgentFromHeader: 'false',
-            enableAgentFromFloatingButton: 'false'
+            enableAgentFromFloatingButton: 'false',
+            enableAgentFromSearchSuggestions: 'false'
         },
         // Customize settings for your url
         url: {

packages/template-retail-react-app/app/components/search/index.jsx

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: BSD-3-Clause
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
-import React, {useEffect, useMemo, useRef, useState} from 'react'
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {useSearchSuggestions} from '@salesforce/commerce-sdk-react'
 import {
     Input,
@@ -225,7 +225,7 @@ const Search = (props) => {
     }
 
     const clearInput = () => {
-        searchInputRef.current.blur()
+        searchInputRef.current?.blur()
         setIsOpen(false)
     }
 
@@ -340,10 +340,10 @@ const Search = (props) => {
         }
     }
 
-    const onAskAssistantClick = () => {
+    const onAskAssistantClick = useCallback(() => {
         launchChat()
         clearInput()
-    }
+    }, [launchChat, clearInput])
 
     const shouldOpenPopover = () => {
         // As per design we only want to show the popover if the input is focused and we have recent searches saved

packages/template-retail-react-app/app/components/search/partials/ask-assistant-banner.jsx

@@ -45,7 +45,7 @@ const AskAssistantBanner = ({onClick, styles}) => {
 
 AskAssistantBanner.propTypes = {
     onClick: PropTypes.func.isRequired,
-    styles: PropTypes.object
+    styles: PropTypes.object.isRequired
 }
 
 export default AskAssistantBanner

packages/template-retail-react-app/app/components/search/partials/search-suggestions-section.jsx

@@ -28,6 +28,11 @@ const SuggestionSection = ({
     const hasPopularSearches = searchSuggestions?.popularSearchSuggestions?.length
     const hasRecentSearches = searchSuggestions?.recentSearchSuggestions?.length
 
+    const askAssistantBanner =
+        showAskAssistantBanner && onAskAssistantClick ? (
+            <AskAssistantBanner onClick={onAskAssistantClick} styles={styles} />
+        ) : null
+
     return (
         <Fragment>
             {/* Mobile - Vertical alignment */}
@@ -102,9 +107,7 @@ const SuggestionSection = ({
                         />
                     </Fragment>
                 )}
-                {showAskAssistantBanner && onAskAssistantClick && (
-                    <AskAssistantBanner onClick={onAskAssistantClick} styles={styles} />
-                )}
+                {askAssistantBanner}
             </HideOnDesktop>
             {/* Desktop - Vertical and Horizontal alignment */}
             <HideOnMobile>
@@ -199,9 +202,7 @@ const SuggestionSection = ({
                         )}
                     </Box>
                 </Box>
-                {showAskAssistantBanner && onAskAssistantClick && (
-                    <AskAssistantBanner onClick={onAskAssistantClick} styles={styles} />
-                )}
+                {askAssistantBanner}
             </HideOnMobile>
         </Fragment>
     )

packages/template-retail-react-app/app/utils/config-utils.js

@@ -21,7 +21,8 @@ export const getCommerceAgentConfig = () => {
         enableConversationContext: 'false',
         conversationContext: [],
         enableAgentFromHeader: 'false',
-        enableAgentFromFloatingButton: 'false'
+        enableAgentFromFloatingButton: 'false',
+        enableAgentFromSearchSuggestions: 'false'
     }
     return getConfig().app.commerceAgent ?? defaults
 }