@18981837 search suggestions enhancements v2 (#2901)

* @W-18981837 UX search changes

* @W-18981837 search suggestion

* @W-18981837 view all button

* W-18981837 search suggestions badges impl

* W-18981837 new tests and lint

* W-18981837 changelog

* @W-18981837 translations

* W-18981837 bundlesize ci error

* @W-18981837 only support string and boolean

* W-18981837 remove badges

* W-18981837 dynamic image

* @W-18981744 adjust widths

* @W-18981837 lint fix

* @W-18981837 expand required for images

Author: sf-kyle-wright

packages/template-retail-react-app/CHANGELOG.md

@@ -25,7 +25,7 @@
 - Use `<picture>` element for responsive images [#2724](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2724)
 - Add Data Cloud partyIdentification events and improve error handling [#2811](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2811)
 - Introduce the cursor rules to assist project developers [#2820](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2820)
-- Search Suggestion Enhancements [#2816](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2890)
+- Search Suggestion Enhancements [#2901](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2901)
 
 
 ## v6.1.0 (May 22, 2025)

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

@@ -33,8 +33,7 @@ import debounce from 'lodash/debounce'
 import {
     RECENT_SEARCH_KEY,
     RECENT_SEARCH_LIMIT,
-    RECENT_SEARCH_MIN_LENGTH,
-    PRODUCT_BADGE_CUSTOM_FIELD_NAME
+    RECENT_SEARCH_MIN_LENGTH
 } from '@salesforce/retail-react-app/app/constants'
 import {
     productUrlBuilder,
@@ -82,15 +81,17 @@ const formatSuggestions = (searchSuggestions) => {
                 link: searchUrlBuilder(brand.phrase)
             }
         }),
-        phraseSuggestions: searchSuggestions?.categorySuggestions?.suggestedPhrases?.map(
+        phraseSuggestions: searchSuggestions?.productSuggestions?.suggestedPhrases?.map(
             (phrase) => {
                 return {
                     type: 'phrase',
-                    name: capitalize(phrase.phrase),
-                    link: searchUrlBuilder(phrase.phrase)
+                    name: phrase.phrase,
+                    link: searchUrlBuilder(phrase.phrase),
+                    exactMatch: phrase.exactMatch
                 }
             }
-        )
+        ),
+        searchPhrase: searchSuggestions?.searchPhrase
     }
 }
 
@@ -109,12 +110,12 @@ const Search = (props) => {
     const [isOpen, setIsOpen] = useState(false)
     const [searchQuery, setSearchQuery] = useState('')
     const navigate = useNavigation()
+
     const searchSuggestion = useSearchSuggestions(
         {
             parameters: {
                 q: searchQuery,
-                expand: 'images,prices,custom_product_properties',
-                includedCustomProductProperties: PRODUCT_BADGE_CUSTOM_FIELD_NAME
+                expand: 'images,prices'
             }
         },
         {
@@ -266,7 +267,7 @@ const Search = (props) => {
         // or we have search suggestions available and have inputed some text (empty text in this scenario should show recent searches)
         if (
             (document.activeElement.id === 'search-input' && recentSearches?.length > 0) ||
-            (searchSuggestionsAvailable && searchInputRef.current.value.length > 0)
+            (searchSuggestionsAvailable && searchInputRef.current?.value?.length > 0)
         ) {
             setIsOpen(true)
         } else {
@@ -319,7 +320,15 @@ const Search = (props) => {
                 </PopoverTrigger>
 
                 <HideOnMobile>
-                    <PopoverContent data-testid="sf-suggestion-popover">
+                    <PopoverContent
+                        data-testid="sf-suggestion-popover"
+                        width="100vw"
+                        maxWidth="100vw"
+                        left={0}
+                        right={0}
+                        marginLeft={0}
+                        marginRight={0}
+                    >
                         <SearchSuggestions
                             closeAndNavigate={closeAndNavigate}
                             recentSearches={recentSearches}

packages/template-retail-react-app/app/components/search/index.test.js

@@ -167,6 +167,99 @@ test('passing undefined to Suggestions returns undefined', async () => {
     expect(suggestions.innerHTML).toBeUndefined()
 })
 
+test('handles search phrase in formatSuggestions', async () => {
+    const user = setupUserEvent()
+
+    const mockResultsWithPhrase = {
+        ...mockSearchResults,
+        searchPhrase: 'test search phrase'
+    }
+
+    global.server.use(
+        rest.get('*/search-suggestions', (req, res, ctx) => {
+            return res(ctx.delay(0), ctx.status(200), ctx.json(mockResultsWithPhrase))
+        })
+    )
+
+    renderWithProviders(<SearchInput />)
+    const searchInput = document.querySelector('input[type="search"]')
+
+    await user.type(searchInput, 'test')
+
+    // Wait for suggestions to load with search phrase
+    await waitFor(() => {
+        expect(screen.getByTestId('sf-suggestion-popover')).toBeInTheDocument()
+    })
+})
+
+test('handles phrase suggestions in formatSuggestions', async () => {
+    const user = setupUserEvent()
+
+    // Mock search results with phrase suggestions
+    const mockResultsWithPhrases = {
+        ...mockSearchResults,
+        productSuggestions: {
+            ...mockSearchResults.productSuggestions,
+            suggestedPhrases: [
+                {phrase: 'running shoes', exactMatch: true},
+                {phrase: 'athletic wear', exactMatch: false}
+            ]
+        }
+    }
+
+    global.server.use(
+        rest.get('*/search-suggestions', (req, res, ctx) => {
+            return res(ctx.delay(0), ctx.status(200), ctx.json(mockResultsWithPhrases))
+        })
+    )
+
+    renderWithProviders(<SearchInput />)
+    const searchInput = document.querySelector('input[type="search"]')
+
+    await user.type(searchInput, 'running')
+
+    // Wait for suggestions to load with phrase suggestions
+    await waitFor(() => {
+        expect(screen.getByTestId('sf-suggestion-popover')).toBeInTheDocument()
+    })
+})
+
+test('handles product suggestions with images', async () => {
+    const user = setupUserEvent()
+
+    // Mock search results with product suggestions that have images
+    const mockResultsWithProductImages = {
+        ...mockSearchResults,
+        productSuggestions: {
+            ...mockSearchResults.productSuggestions,
+            products: [
+                {
+                    ...mockSearchResults.productSuggestions.products[0],
+                    image: {
+                        disBaseLink: 'https://example.com/product-image.jpg'
+                    }
+                }
+            ]
+        }
+    }
+
+    global.server.use(
+        rest.get('*/search-suggestions', (req, res, ctx) => {
+            return res(ctx.delay(0), ctx.status(200), ctx.json(mockResultsWithProductImages))
+        })
+    )
+
+    renderWithProviders(<SearchInput />)
+    const searchInput = document.querySelector('input[type="search"]')
+
+    await user.type(searchInput, 'Dress')
+
+    // Wait for suggestions to load with product images
+    await waitFor(() => {
+        expect(screen.getByTestId('sf-suggestion-popover')).toBeInTheDocument()
+    })
+})
+
 test('when commerceAgent is disabled, chat functions are not called', async () => {
     const user = setupUserEvent()
 

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

@@ -0,0 +1,72 @@
+/*
+ * 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 {Text, Box, Flex} from '@salesforce/retail-react-app/app/components/shared/ui'
+import DynamicImage from '@salesforce/retail-react-app/app/components/dynamic-image'
+import Link from '@salesforce/retail-react-app/app/components/link'
+
+const HorizontalSuggestions = ({suggestions, closeAndNavigate, dynamicImageProps}) => {
+    if (!suggestions) {
+        return null
+    }
+
+    return (
+        <Box data-testid="sf-horizontal-product-suggestions">
+            <Flex gap="4" overflowX="auto" pb="2">
+                {suggestions.map((suggestion, idx) => (
+                    <Link
+                        data-testid="product-tile"
+                        to={suggestion.link}
+                        key={idx}
+                        onClick={() => closeAndNavigate(suggestion.link)}
+                    >
+                        <Box>
+                            {/* Product Image */}
+                            <Box position="relative" mb="2" minH="200px">
+                                {suggestion.image && (
+                                    <DynamicImage
+                                        src={`${suggestion.image}[?sw={width}&q=60]`}
+                                        widths={dynamicImageProps?.widths}
+                                        imageProps={{
+                                            alt: '',
+                                            loading: 'eager'
+                                        }}
+                                    />
+                                )}
+                            </Box>
+
+                            <Text
+                                fontSize="sm"
+                                fontWeight="medium"
+                                color="gray.900"
+                                mb="1"
+                                noOfLines={2}
+                            >
+                                {suggestion.name}
+                            </Text>
+
+                            {suggestion.price && (
+                                <Text fontSize="sm" color="gray.900" fontWeight="medium">
+                                    ${suggestion.price}
+                                </Text>
+                            )}
+                        </Box>
+                    </Link>
+                ))}
+            </Flex>
+        </Box>
+    )
+}
+
+HorizontalSuggestions.propTypes = {
+    suggestions: PropTypes.array,
+    closeAndNavigate: PropTypes.func,
+    dynamicImageProps: PropTypes.object
+}
+
+export default HorizontalSuggestions