Merge pull request #3312 from SalesforceCommerceCloud/develop

Update feature branch `feature/manual-bonus-products-v3` with latest changes in `develop` branch

Author: sf-shikhar-prasoon

e2e/scripts/pageHelpers.js

@@ -439,6 +439,7 @@ export const searchProduct = async ({page, query, isMobile = false}) => {
 
     let searchInput = isMobile ? searchInputs.nth(1) : searchInputs.nth(0)
     await searchInput.fill(query)
+    await page.waitForTimeout(1000)
     await searchInput.press('Enter')
 
     await page.waitForLoadState()

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

@@ -1,4 +1,5 @@
 ## v8.1.0-dev (Sep 04, 2025)
+- Updated search UX - prices, images, suggestions new layout [#3271](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3271)
 - Updated the UI for StoreDisplay component which displays pickup in-store information on different pages. [#3248](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3248)
 - Added warning modal for guest users when toggling between multi ship and ship to one address. [3280] (https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3280) [3302] (https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3302)
 - Added support for Choice of Bonus Products feature. Users can now select from available bonus products when they qualify for the associated promotion. The bonus product selection flow can be entered from either the "Item Added to Cart" modal (when adding the qualifying product to the cart) or from the cart page. [#3292] (https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3292)

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

@@ -23,7 +23,6 @@ import SearchSuggestions from '@salesforce/retail-react-app/app/components/searc
 import {SearchIcon} from '@salesforce/retail-react-app/app/components/icons'
 import {
     capitalize,
-    boldString,
     getSessionJSONItem,
     setSessionJSONItem
 } from '@salesforce/retail-react-app/app/utils/utils'
@@ -50,15 +49,17 @@ function isAskAgentOnSearchEnabled(enabled, askAgentOnSearch) {
     return enabled === 'true' && askAgentOnSearch === 'true' && onClient
 }
 
-const formatSuggestions = (searchSuggestions, input) => {
+const formatSuggestions = (searchSuggestions) => {
     return {
         categorySuggestions: searchSuggestions?.categorySuggestions?.categories?.map(
             (suggestion) => {
                 return {
                     type: 'category',
                     id: suggestion.id,
                     link: categoryUrlBuilder({id: suggestion.id}),
-                    name: boldString(suggestion.name, capitalize(input))
+                    name: capitalize(suggestion.name),
+                    image: suggestion.image?.disBaseLink,
+                    parentCategoryName: suggestion.parentCategoryName
                 }
             }
         ),
@@ -68,19 +69,30 @@ const formatSuggestions = (searchSuggestions, input) => {
                 currency: product.currency,
                 price: product.price,
                 productId: product.productId,
-                name: boldString(product.productName, capitalize(input)),
-                link: productUrlBuilder({id: product.productId})
+                name: capitalize(product.productName),
+                link: productUrlBuilder({id: product.productId}),
+                image: product.image?.disBaseLink
             }
         }),
-        phraseSuggestions: searchSuggestions?.categorySuggestions?.suggestedPhrases?.map(
+        brandSuggestions: searchSuggestions?.brandSuggestions?.suggestedPhrases?.map((brand) => {
+            // Init cap the brand name
+            return {
+                type: 'brand',
+                name: capitalize(brand.phrase),
+                link: searchUrlBuilder(brand.phrase)
+            }
+        }),
+        phraseSuggestions: searchSuggestions?.productSuggestions?.suggestedPhrases?.map(
             (phrase) => {
                 return {
                     type: 'phrase',
-                    name: boldString(phrase.phrase, capitalize(input)),
-                    link: searchUrlBuilder(phrase.phrase)
+                    name: phrase.phrase,
+                    link: searchUrlBuilder(phrase.phrase),
+                    exactMatch: phrase.exactMatch
                 }
             }
-        )
+        ),
+        searchPhrase: searchSuggestions?.searchPhrase
     }
 }
 
@@ -102,10 +114,12 @@ const Search = (props) => {
     const [isOpen, setIsOpen] = useState(false)
     const [searchQuery, setSearchQuery] = useState('')
     const navigate = useNavigation()
+
     const searchSuggestion = useSearchSuggestions(
         {
             parameters: {
-                q: searchQuery
+                q: searchQuery,
+                expand: 'images,prices'
             }
         },
         {
@@ -119,7 +133,7 @@ const Search = (props) => {
     })
     const recentSearches = getSessionJSONItem(RECENT_SEARCH_KEY)
     const searchSuggestions = useMemo(
-        () => formatSuggestions(searchSuggestion.data, searchInputRef?.current?.value),
+        () => formatSuggestions(searchSuggestion.data),
         [searchSuggestion]
     )
 
@@ -257,7 +271,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 {
@@ -310,7 +324,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

@@ -140,8 +140,12 @@ test('suggestions render when there are some', async () => {
     const suggestionPopoverEl = await screen.getByTestId('sf-suggestion-popover')
 
     await waitFor(() => {
-        const suggestionsEl = within(suggestionPopoverEl).getByTestId('sf-suggestion')
-        expect(suggestionsEl.querySelector('button').textContent).toBe('Dresses')
+        const suggestionsEls = within(suggestionPopoverEl).getAllByTestId('sf-suggestion')
+        expect(suggestionsEls.length).toBeGreaterThan(0)
+        const hasDressesSuggestion = suggestionsEls.some((el) =>
+            el.querySelector('button')?.textContent?.includes('Dresses')
+        )
+        expect(hasDressesSuggestion).toBe(true)
     })
 })
 
@@ -423,3 +427,96 @@ test('when sendTextMessage and launchChat both fail, no additional send text is
     // Verify sendTextMessage was only called once
     expect(sendTextMessageSpy).toHaveBeenCalledTimes(1)
 })
+
+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()
+    })
+})

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

@@ -0,0 +1,68 @@
+/*
+ * 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, AspectRatio} 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'
+import {useStyleConfig} from '@chakra-ui/react'
+
+const HorizontalSuggestions = ({suggestions, closeAndNavigate, dynamicImageProps}) => {
+    const styles = useStyleConfig('HorizontalSuggestions')
+
+    if (!suggestions) {
+        return null
+    }
+
+    return (
+        <Box data-testid="sf-horizontal-product-suggestions" sx={styles.container}>
+            <Flex sx={styles.flexContainer}>
+                {suggestions.map((suggestion, idx) => (
+                    <Link
+                        data-testid="product-tile"
+                        to={suggestion.link}
+                        key={idx}
+                        onClick={() => closeAndNavigate(suggestion.link)}
+                    >
+                        <Box sx={styles.suggestionItem}>
+                            {/* Product Image */}
+                            <Box sx={styles.imageContainer}>
+                                {suggestion.image ? (
+                                    <AspectRatio sx={styles.aspectRatio}>
+                                        <DynamicImage
+                                            src={`${suggestion.image}[?sw={width}&q=60]`}
+                                            widths={dynamicImageProps?.widths}
+                                            sx={styles.dynamicImage}
+                                            imageProps={{
+                                                alt: '',
+                                                loading: 'eager'
+                                            }}
+                                        />
+                                    </AspectRatio>
+                                ) : null}
+                            </Box>
+
+                            <Text sx={styles.productName}>{suggestion.name}</Text>
+
+                            {suggestion.price && (
+                                <Text sx={styles.productPrice}>${suggestion.price}</Text>
+                            )}
+                        </Box>
+                    </Link>
+                ))}
+            </Flex>
+        </Box>
+    )
+}
+
+HorizontalSuggestions.propTypes = {
+    suggestions: PropTypes.array,
+    closeAndNavigate: PropTypes.func,
+    dynamicImageProps: PropTypes.object
+}
+
+export default HorizontalSuggestions