feat: update click event and styles

Author: sf-tejas-nadkarni

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

@@ -224,13 +224,13 @@ const Search = (props) => {
         }
     }
 
-    const clearInput = () => {
+    const clearInput = useCallback(() => {
         searchInputRef.current?.blur()
         setIsOpen(false)
-    }
+    }, [])
 
     // Function to set pre-chat fields only when launching a new chat session
-    const setPrechatFieldsForNewSession = () => {
+    const setPrechatFieldsForNewSession = useCallback(() => {
         // Only set pre-chat fields if this is a new chat launch (not already launched)
         if (!miawChatRef.current.newChatLaunched) {
             if (window.embeddedservice_bootstrap?.prechatAPI) {
@@ -247,7 +247,17 @@ const Search = (props) => {
                 })
             }
         }
-    }
+    }, [
+        siteId,
+        locale,
+        commerceOrgId,
+        usid,
+        refreshToken,
+        sfLanguage,
+        appOrigin,
+        buildUrl,
+        location
+    ])
 
     useEffect(() => {
         const handleEmbeddedMessageSent = (e) => {
@@ -274,7 +284,7 @@ const Search = (props) => {
             window.removeEventListener('onEmbeddedMessageSent', handleEmbeddedMessageSent)
         }
     }, [])
-    const launchChat = () => {
+    const launchChat = useCallback(() => {
         // Set pre-chat fields only for new sessions
         setPrechatFieldsForNewSession()
 
@@ -295,7 +305,7 @@ const Search = (props) => {
             ?.catch((err) => {
                 console.error('launchChat error', err)
             })
-    }
+    }, [setPrechatFieldsForNewSession])
 
     const onSubmitSearch = (e) => {
         e.preventDefault()

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

@@ -7,7 +7,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {Box, Text} from '@salesforce/retail-react-app/app/components/shared/ui'
-import {FormattedMessage, useIntl} from 'react-intl'
+import {useIntl} from 'react-intl'
 import {SparkleIcon, ChevronRightIcon} from '@salesforce/retail-react-app/app/components/icons'
 
 const AskAssistantBanner = ({onClick, styles}) => {
@@ -24,7 +24,6 @@ const AskAssistantBanner = ({onClick, styles}) => {
 
     const handleInteraction = (e) => {
         e.preventDefault()
-        e.stopPropagation()
         onClick?.()
     }
 
@@ -34,7 +33,6 @@ const AskAssistantBanner = ({onClick, styles}) => {
             as="button"
             type="button"
             textAlign="left"
-            onMouseDown={handleInteraction}
             onClick={handleInteraction}
             aria-label={ariaLabel}
         >
@@ -43,22 +41,12 @@ const AskAssistantBanner = ({onClick, styles}) => {
             </Box>
             <Box {...styles.askAssistantBannerContent}>
                 <Box {...styles.askAssistantBannerTitleRow}>
-                    <Text {...styles.askAssistantBannerTitle}>
-                        <FormattedMessage
-                            defaultMessage="Ask Shopping Agent"
-                            id="search.suggestions.askAssistant.title"
-                        />
-                    </Text>
+                    <Text {...styles.askAssistantBannerTitle}>{title}</Text>
                     <Box {...styles.askAssistantBannerArrow}>
                         <ChevronRightIcon boxSize={5} color="gray.800" />
                     </Box>
                 </Box>
-                <Text {...styles.askAssistantBannerDescription}>
-                    <FormattedMessage
-                        defaultMessage="Discover, compare, and shop smarter with your personal Shopping Agent."
-                        id="search.suggestions.askAssistant.description"
-                    />
-                </Text>
+                <Text {...styles.askAssistantBannerDescription}>{description}</Text>
             </Box>
         </Box>
     )

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

@@ -45,5 +45,5 @@ test('calls onClick when banner is clicked', async () => {
     })
     await user.click(button)
 
-    expect(onClick).toHaveBeenCalledTimes(2)
+    expect(onClick).toHaveBeenCalledTimes(1)
 })

packages/template-retail-react-app/app/theme/components/project/search-suggestions.js

@@ -80,8 +80,6 @@ export default {
         },
         askAssistantBanner: {
             borderRadius: {base: 'md', md: 0},
-            borderTopLeftRadius: {base: 'md', md: 0},
-            borderTopRightRadius: {base: 'md', md: 0},
             padding: {base: '14px 24px', md: '14px 30%'},
             margin: 0,
             marginBottom: {base: 0, md: -6},