feat: add new search banner in the search suggestions

Author: sf-tejas-nadkarni

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

@@ -140,10 +140,19 @@ const Search = (props) => {
     const appOrigin = useAppOrigin()
     const sfLanguage = normalizeLocaleToSalesforce(locale.id)
 
-    const askAgentOnSearchEnabled = useMemo(() => {
-        const {enabled, askAgentOnSearch} = getCommerceAgentConfig()
-        return isAskAgentOnSearchEnabled(enabled, askAgentOnSearch)
-    }, [config.app.commerceAgent])
+    const commerceAgentConfig = useMemo(
+        () => getCommerceAgentConfig(),
+        [config.app?.commerceAgent, config.app?.commerceAgentSettings]
+    )
+    const askAgentOnSearchEnabled = useMemo(
+        () =>
+            isAskAgentOnSearchEnabled(
+                commerceAgentConfig?.enabled,
+                commerceAgentConfig?.askAgentOnSearch
+            ),
+        [commerceAgentConfig]
+    )
+    const enableAgentFromSearchSuggestions = commerceAgentConfig?.enableAgentFromSearchSuggestions
 
     const [isOpen, setIsOpen] = useState(false)
     const [searchQuery, setSearchQuery] = useState('')
@@ -331,6 +340,11 @@ const Search = (props) => {
         }
     }
 
+    const onAskAssistantClick = () => {
+        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
         // or we have search suggestions available and have inputed some text (empty text in this scenario should show recent searches)
@@ -402,6 +416,8 @@ const Search = (props) => {
                             closeAndNavigate={closeAndNavigate}
                             recentSearches={recentSearches}
                             searchSuggestions={searchSuggestions}
+                            enableAgentFromSearchSuggestions={enableAgentFromSearchSuggestions}
+                            onAskAssistantClick={onAskAssistantClick}
                         />
                     </PopoverContent>
                 </HideOnMobile>
@@ -430,6 +446,8 @@ const Search = (props) => {
                             closeAndNavigate={closeAndNavigate}
                             recentSearches={recentSearches}
                             searchSuggestions={searchSuggestions}
+                            enableAgentFromSearchSuggestions={enableAgentFromSearchSuggestions}
+                            onAskAssistantClick={onAskAssistantClick}
                         />
                     )}
                 </Flex>

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

@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * 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 from 'react'
+import PropTypes from 'prop-types'
+import {Box, Text} from '@salesforce/retail-react-app/app/components/shared/ui'
+import {FormattedMessage} from 'react-intl'
+import {SparkleIcon, ChevronRightIcon} from '@salesforce/retail-react-app/app/components/icons'
+
+const AskAssistantBanner = ({onClick, styles}) => {
+    return (
+        <Box
+            {...styles.askAssistantBanner}
+            as="button"
+            type="button"
+            width="full"
+            textAlign="left"
+            onClick={onClick}
+            aria-label="Ask Assistant - Discover, compare and shop smarter with your personal shopping assistant"
+        >
+            <Box {...styles.askAssistantBannerContent}>
+                <Box {...styles.askAssistantBannerIcon} as={SparkleIcon} boxSize={6} />
+                <Box>
+                    <Text {...styles.askAssistantBannerTitle}>
+                        <FormattedMessage
+                            defaultMessage="Ask Shopping Agent"
+                            id="search.suggestions.askAssistant.title"
+                        />
+                    </Text>
+                    <Text {...styles.askAssistantBannerDescription}>
+                        <FormattedMessage
+                            defaultMessage="Discover, compare, and shop smarter with your personal Shopping Agent."
+                            id="search.suggestions.askAssistant.description"
+                        />
+                    </Text>
+                </Box>
+            </Box>
+            <Box {...styles.askAssistantBannerArrow} as={ChevronRightIcon} boxSize={5} />
+        </Box>
+    )
+}
+
+AskAssistantBanner.propTypes = {
+    onClick: PropTypes.func.isRequired,
+    styles: PropTypes.object
+}
+
+export default AskAssistantBanner

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

@@ -9,12 +9,19 @@ import PropTypes from 'prop-types'
 import {Box} from '@salesforce/retail-react-app/app/components/shared/ui'
 import Suggestions from '@salesforce/retail-react-app/app/components/search/partials/suggestions'
 import HorizontalSuggestions from '@salesforce/retail-react-app/app/components/search/partials/horizontal-suggestions'
+import AskAssistantBanner from '@salesforce/retail-react-app/app/components/search/partials/ask-assistant-banner'
 import {FormattedMessage} from 'react-intl'
 import {HideOnDesktop, HideOnMobile} from '@salesforce/retail-react-app/app/components/responsive'
 import Link from '@salesforce/retail-react-app/app/components/link'
 import {searchUrlBuilder} from '@salesforce/retail-react-app/app/utils/url'
 
-const SuggestionSection = ({searchSuggestions, closeAndNavigate, styles}) => {
+const SuggestionSection = ({
+    searchSuggestions,
+    closeAndNavigate,
+    styles,
+    showAskAssistantBanner,
+    onAskAssistantClick
+}) => {
     const hasCategories = searchSuggestions?.categorySuggestions?.length
     const hasProducts = searchSuggestions?.productSuggestions?.length
     const hasPhraseSuggestions = searchSuggestions?.phraseSuggestions?.length
@@ -95,6 +102,9 @@ const SuggestionSection = ({searchSuggestions, closeAndNavigate, styles}) => {
                         />
                     </Fragment>
                 )}
+                {showAskAssistantBanner && onAskAssistantClick && (
+                    <AskAssistantBanner onClick={onAskAssistantClick} styles={styles} />
+                )}
             </HideOnDesktop>
             {/* Desktop - Vertical and Horizontal alignment */}
             <HideOnMobile>
@@ -189,6 +199,9 @@ const SuggestionSection = ({searchSuggestions, closeAndNavigate, styles}) => {
                         )}
                     </Box>
                 </Box>
+                {showAskAssistantBanner && onAskAssistantClick && (
+                    <AskAssistantBanner onClick={onAskAssistantClick} styles={styles} />
+                )}
             </HideOnMobile>
         </Fragment>
     )
@@ -197,7 +210,9 @@ const SuggestionSection = ({searchSuggestions, closeAndNavigate, styles}) => {
 SuggestionSection.propTypes = {
     searchSuggestions: PropTypes.object.isRequired,
     closeAndNavigate: PropTypes.func.isRequired,
-    styles: PropTypes.object.isRequired
+    styles: PropTypes.object.isRequired,
+    showAskAssistantBanner: PropTypes.bool,
+    onAskAssistantClick: PropTypes.func
 }
 
 export default SuggestionSection

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

@@ -9,8 +9,15 @@ import PropTypes from 'prop-types'
 import {Stack, useMultiStyleConfig} from '@salesforce/retail-react-app/app/components/shared/ui'
 import RecentSearches from '@salesforce/retail-react-app/app/components/search/partials/recent-searches'
 import SuggestionSection from '@salesforce/retail-react-app/app/components/search/partials/search-suggestions-section'
+import AskAssistantBanner from '@salesforce/retail-react-app/app/components/search/partials/ask-assistant-banner'
 
-const SearchSuggestions = ({recentSearches, searchSuggestions, closeAndNavigate}) => {
+const SearchSuggestions = ({
+    recentSearches,
+    searchSuggestions,
+    closeAndNavigate,
+    enableAgentFromSearchSuggestions,
+    onAskAssistantClick
+}) => {
     const styles = useMultiStyleConfig('SearchSuggestions')
     const hasCategories = searchSuggestions?.categorySuggestions?.length
     const hasProducts = searchSuggestions?.productSuggestions?.length
@@ -19,6 +26,8 @@ const SearchSuggestions = ({recentSearches, searchSuggestions, closeAndNavigate}
     const hasRecentSearches = searchSuggestions?.recentSearchSuggestions?.length
     const hasSuggestions =
         hasCategories || hasProducts || hasBrands || hasPopularSearches || hasRecentSearches
+    const showAskAssistantBanner =
+        enableAgentFromSearchSuggestions === 'true' || enableAgentFromSearchSuggestions === true
 
     return (
         <Stack {...styles.container}>
@@ -27,12 +36,19 @@ const SearchSuggestions = ({recentSearches, searchSuggestions, closeAndNavigate}
                     searchSuggestions={searchSuggestions}
                     closeAndNavigate={closeAndNavigate}
                     styles={styles}
+                    showAskAssistantBanner={showAskAssistantBanner}
+                    onAskAssistantClick={onAskAssistantClick}
                 />
             ) : (
-                <RecentSearches
-                    recentSearches={recentSearches}
-                    closeAndNavigate={closeAndNavigate}
-                />
+                <>
+                    <RecentSearches
+                        recentSearches={recentSearches}
+                        closeAndNavigate={closeAndNavigate}
+                    />
+                    {showAskAssistantBanner && onAskAssistantClick && (
+                        <AskAssistantBanner onClick={onAskAssistantClick} styles={styles} />
+                    )}
+                </>
             )}
         </Stack>
     )
@@ -41,7 +57,9 @@ const SearchSuggestions = ({recentSearches, searchSuggestions, closeAndNavigate}
 SearchSuggestions.propTypes = {
     recentSearches: PropTypes.array,
     searchSuggestions: PropTypes.object,
-    closeAndNavigate: PropTypes.func
+    closeAndNavigate: PropTypes.func,
+    enableAgentFromSearchSuggestions: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+    onAskAssistantClick: PropTypes.func
 }
 
 export default SearchSuggestions

packages/template-retail-react-app/app/static/translations/compiled/en-GB.json

@@ -3633,6 +3633,18 @@
       "value": "Cancel"
     }
   ],
+  "search.suggestions.askAssistant.description": [
+    {
+      "type": 0,
+      "value": "Discover, compare, and shop smarter with your personal Shopping Agent."
+    }
+  ],
+  "search.suggestions.askAssistant.title": [
+    {
+      "type": 0,
+      "value": "Ask Shopping Agent"
+    }
+  ],
   "search.suggestions.categories": [
     {
       "type": 0,

packages/template-retail-react-app/app/static/translations/compiled/en-US.json

@@ -3633,6 +3633,18 @@
       "value": "Cancel"
     }
   ],
+  "search.suggestions.askAssistant.description": [
+    {
+      "type": 0,
+      "value": "Discover, compare, and shop smarter with your personal Shopping Agent."
+    }
+  ],
+  "search.suggestions.askAssistant.title": [
+    {
+      "type": 0,
+      "value": "Ask Shopping Agent"
+    }
+  ],
   "search.suggestions.categories": [
     {
       "type": 0,

packages/template-retail-react-app/app/static/translations/compiled/en-XA.json

@@ -7649,6 +7649,34 @@
       "value": "]"
     }
   ],
+  "search.suggestions.askAssistant.description": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Ḓīşƈǿǿṽḗḗř, ƈǿǿḿƥȧȧřḗḗ, ȧȧƞḓ şħǿǿƥ şḿȧȧřŧḗḗř ẇīŧħ ẏǿǿŭŭř ƥḗḗřşǿǿƞȧȧŀ Şħǿǿƥƥīƞɠ Ȧɠḗḗƞŧ."
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
+  "search.suggestions.askAssistant.title": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Ȧşķ Şħǿǿƥƥīƞɠ Ȧɠḗḗƞŧ"
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
   "search.suggestions.categories": [
     {
       "type": 0,

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

@@ -77,6 +77,42 @@ export default {
             position: 'absolute',
             top: 2,
             left: 2
+        },
+        askAssistantBanner: {
+            borderRadius: 'md',
+            padding: 4,
+            marginTop: 3,
+            backgroundColor: 'blue.50',
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: 3,
+            _hover: {
+                backgroundColor: 'blue.100'
+            }
+        },
+        askAssistantBannerContent: {
+            display: 'flex',
+            alignItems: 'flex-start',
+            gap: 3,
+            flex: 1,
+            minWidth: 0
+        },
+        askAssistantBannerTitle: {
+            fontWeight: 'bold',
+            fontSize: 'md'
+        },
+        askAssistantBannerDescription: {
+            fontSize: 'sm',
+            color: 'gray.600',
+            marginTop: 1
+        },
+        askAssistantBannerIcon: {
+            flexShrink: 0
+        },
+        askAssistantBannerArrow: {
+            flexShrink: 0
         }
     }
 }

packages/template-retail-react-app/app/utils/shopper-agent-utils.js

@@ -27,10 +27,7 @@ export function launchChat() {
         // so the chat window opens correctly (Salesforce Embedded Messaging requirement)
         const hideChatButtonOnLoad =
             window.embeddedservice_bootstrap?.settings?.hideChatButtonOnLoad === true
-        if (
-            hideChatButtonOnLoad &&
-            typeof utilAPI.showChatButton === 'function'
-        ) {
+        if (hideChatButtonOnLoad && typeof utilAPI.showChatButton === 'function') {
             utilAPI.showChatButton()
         }
 

packages/template-retail-react-app/translations/en-GB.json

@@ -1520,6 +1520,12 @@
   "search.action.cancel": {
     "defaultMessage": "Cancel"
   },
+  "search.suggestions.askAssistant.description": {
+    "defaultMessage": "Discover, compare, and shop smarter with your personal Shopping Agent."
+  },
+  "search.suggestions.askAssistant.title": {
+    "defaultMessage": "Ask Shopping Agent"
+  },
   "search.suggestions.categories": {
     "defaultMessage": "Categories"
   },