@salesforce/retail-react-app 6.0.1 → 6.1.0-dev

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## v6.1.0-dev (Feb 18, 2025)
+
+- Fix hreflang alternate links [#2269](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2269)
+- PDP / PLP: Add page meta data tags that have been defined in BM [#2232](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2232)
+- Send PWA Kit events to Data Cloud [#318] (https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2229)
+- Fix dependencies vulnerabilities [#2338](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2338)
+
 ## v6.0.1 (Mar 05, 2025)
 - Update PWA-Kit SDKs to v3.9.1 [#2301](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2301)
 

package/app/components/_app/index.jsx

@@ -80,6 +80,7 @@ import {
 
 import Seo from '@salesforce/retail-react-app/app/components/seo'
 import {Helmet} from 'react-helmet'
+import {getPathWithLocale} from '@salesforce/retail-react-app/app/utils/url'
 
 const PlaceholderComponent = () => (
     <Center p="2">
@@ -336,7 +337,12 @@ const App = (props) => {
                                 <link
                                     rel="alternate"
                                     hrefLang={locale.id.toLowerCase()}
-                                    href={`${appOrigin}${buildUrl(location.pathname)}`}
+                                    href={`${appOrigin}${getPathWithLocale(locale.id, buildUrl, {
+                                        location: {
+                                            ...location,
+                                            search: ''
+                                        }
+                                    })}`}
                                     key={locale.id}
                                 />
                             ))}
@@ -344,7 +350,12 @@ const App = (props) => {
                             <link
                                 rel="alternate"
                                 hrefLang={site.l10n.defaultLocale.slice(0, 2)}
-                                href={`${appOrigin}${buildUrl(location.pathname)}`}
+                                href={`${appOrigin}${getPathWithLocale(locale.id, buildUrl, {
+                                    location: {
+                                        ...location,
+                                        search: ''
+                                    }
+                                })}`}
                             />
                             {/* A wider fallback for user locales that the app does not support */}
                             <link rel="alternate" hrefLang="x-default" href={`${appOrigin}/`} />

package/app/components/_app/index.test.js

@@ -16,7 +16,8 @@ import {DEFAULT_LOCALE} from '@salesforce/retail-react-app/app/utils/test-utils'
 import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site'
 import messages from '@salesforce/retail-react-app/app/static/translations/compiled/en-GB.json'
 import mockConfig from '@salesforce/retail-react-app/config/mocks/default'
-import * as constants from '@salesforce/retail-react-app/app/constants'
+import {prependHandlersToServer} from '@salesforce/retail-react-app/jest-setup'
+import {mockCustomerBaskets} from '@salesforce/retail-react-app/app/mocks/mock-data'
 
 jest.mock('../../hooks/use-multi-site', () => jest.fn())
 jest.mock('../../hooks/use-update-shopper-context', () => ({
@@ -24,29 +25,9 @@ jest.mock('../../hooks/use-update-shopper-context', () => ({
 }))
 
 let windowSpy
-let originalValue
-beforeAll(() => {
-    jest.spyOn(console, 'log').mockImplementation(jest.fn())
-    jest.spyOn(console, 'groupCollapsed').mockImplementation(jest.fn())
-    originalValue = constants.ACTIVE_DATA_ENABLED
-})
-
-afterAll(() => {
-    console.log.mockRestore()
-    console.groupCollapsed.mockRestore()
-    constants.ACTIVE_DATA_ENABLED = originalValue
-})
-beforeEach(() => {
-    windowSpy = jest.spyOn(window, 'window', 'get')
-})
-
-afterEach(() => {
-    console.log.mockClear()
-    console.groupCollapsed.mockClear()
-    windowSpy.mockRestore()
-})
 
 const mockUpdateDNT = jest.fn()
+const mockActiveDataFlag = jest.fn()
 jest.mock('@salesforce/commerce-sdk-react', () => {
     const originalModule = jest.requireActual('@salesforce/commerce-sdk-react')
     return {
@@ -55,6 +36,40 @@ jest.mock('@salesforce/commerce-sdk-react', () => {
     }
 })
 
+jest.mock('@salesforce/retail-react-app/app/constants', () => {
+    const originalModule = jest.requireActual('@salesforce/retail-react-app/app/constants')
+    return {
+        ...originalModule,
+        get ACTIVE_DATA_ENABLED() {
+            return mockActiveDataFlag()
+        }
+    }
+})
+beforeEach(() => {
+    windowSpy = jest.spyOn(window, 'window', 'get')
+    mockActiveDataFlag.mockReturnValue(true)
+    prependHandlersToServer([
+        {
+            path: '*/baskets/:basketId/customer',
+            method: 'put',
+            res: () => {
+                return {
+                    ...mockCustomerBaskets.baskets[0],
+                    customerInfo: {
+                        customerId: 'abmuc2wupJxeoRxuo3wqYYmbhI',
+                        email: 'shopperUpdate@salesforce-test.com'
+                    }
+                }
+            }
+        }
+    ])
+})
+
+afterEach(() => {
+    windowSpy.mockRestore()
+    jest.restoreAllMocks()
+    jest.resetModules()
+})
 describe('App', () => {
     const site = {
         ...mockConfig.app.sites[0],
@@ -89,7 +104,7 @@ describe('App', () => {
     })
 
     test('Active Data component is not rendered', async () => {
-        constants.ACTIVE_DATA_ENABLED = false
+        mockActiveDataFlag.mockImplementation(() => false)
         useMultiSite.mockImplementation(() => resultUseMultiSite)
         renderWithProviders(
             <App targetLocale={DEFAULT_LOCALE} defaultLocale={DEFAULT_LOCALE} messages={messages}>
@@ -105,17 +120,18 @@ describe('App', () => {
     })
 
     test('Active Data component is rendered appropriately', async () => {
-        constants.ACTIVE_DATA_ENABLED = true
         useMultiSite.mockImplementation(() => resultUseMultiSite)
         renderWithProviders(
             <App targetLocale={DEFAULT_LOCALE} defaultLocale={DEFAULT_LOCALE} messages={messages}>
                 <p>Any children here</p>
             </App>
         )
-        await waitFor(() => expect(document.getElementById('headActiveData')).toBeInTheDocument())
-        await waitFor(() => expect(document.getElementById('dwanalytics')).toBeInTheDocument())
-        await waitFor(() => expect(document.getElementById('dwac')).toBeInTheDocument())
-        expect(screen.getByText('Any children here')).toBeInTheDocument()
+        await waitFor(() => {
+            expect(document.getElementById('headActiveData')).toBeInTheDocument()
+            expect(document.getElementById('dwanalytics')).toBeInTheDocument()
+            expect(document.getElementById('dwac')).toBeInTheDocument()
+            expect(screen.getByText('Any children here')).toBeInTheDocument()
+        })
     })
 
     test('The localized hreflang links exist in the html head', () => {
@@ -124,11 +140,39 @@ describe('App', () => {
             <App targetLocale={DEFAULT_LOCALE} defaultLocale={DEFAULT_LOCALE} messages={messages} />
         )
 
+        // expected locales for hrefLang
+        const hrefLangLocales = mockConfig.app.sites[0].l10n.supportedLocales.map(
+            (locale) => locale.id
+        )
         const helmet = Helmet.peek()
         const hreflangLinks = helmet.linkTags.filter((link) => link.rel === 'alternate')
-
         const hasGeneralLocale = ({hrefLang}) => hrefLang === DEFAULT_LOCALE.slice(0, 2)
 
+        hrefLangLocales.forEach((supportedLocale) => {
+            expect(
+                hreflangLinks.some(
+                    (link) => link.hrefLang.toLowerCase() === supportedLocale.toLowerCase()
+                )
+            ).toBe(true)
+            expect(hreflangLinks.some((link) => hasGeneralLocale(link))).toBe(true)
+        })
+
+        // localeRefs takes locale alias into consideration
+        const localeRefs = mockConfig.app.sites[0].l10n.supportedLocales.map(
+            (locale) => locale.alias || locale.id
+        )
+
+        localeRefs.forEach((localeRef) => {
+            expect(hreflangLinks.some((link) => link.href.includes(localeRef))).toBe(true)
+            // expecting href does not contain search query params in the href since it is a canonical url
+            expect(
+                hreflangLinks.some((link) => {
+                    const urlObj = new URL(link.href)
+                    return urlObj.search.length > 0
+                })
+            ).toBe(false)
+        })
+
         // `length + 2` because one for a general locale and the other with x-default value
         expect(hreflangLinks).toHaveLength(resultUseMultiSite.site.l10n.supportedLocales.length + 2)
 

package/app/components/breadcrumb/index.jsx

@@ -36,7 +36,7 @@ const Breadcrumb = ({categories, ...rest}) => {
     return (
         <ChakraBreadcrumb
             className="sf-breadcrumb"
-            {...styles.container}
+            sx={styles.container}
             separator={<ChevronRightIcon {...styles.icon} aria-hidden="true" />}
             {...rest}
         >
@@ -45,7 +45,7 @@ const Breadcrumb = ({categories, ...rest}) => {
                     <ChakraBreadcrumbLink
                         as={RouteLink}
                         to={categoryUrlBuilder(category, intl.locale)}
-                        {...styles.link}
+                        sx={styles.link}
                     >
                         {category.name}
                     </ChakraBreadcrumbLink>

package/app/components/links-list/index.test.js

@@ -60,7 +60,5 @@ test('renders LinksList with horizontal variant', () => {
             <LinksList links={links} variant="horizontal" />
         </FooterStylesProvider>
     )
-    screen.logTestingPlaygroundURL()
-
     expect(container.querySelector(horizontalVariantSelector)).toBeInTheDocument()
 })

package/app/components/product-view-modal/bundle.test.js

@@ -63,6 +63,11 @@ beforeEach(() => {
     )
 })
 
+afterEach(() => {
+    jest.resetModules()
+    jest.restoreAllMocks()
+})
+
 test('renders bundle product view modal', async () => {
     renderWithProviders(<MockComponent />)
     await waitFor(() => {
@@ -165,9 +170,9 @@ test('bundle product view modal disables update button when quantity exceeds chi
     })
 
     // Set product bundle quantity selection to 4
-    quantityInput.focus()
     fireEvent.change(quantityInput, {target: {value: '4'}})
     fireEvent.keyDown(quantityInput, {key: 'Enter', code: 'Enter', charCode: 13})
+
     fireEvent.click(sizeSelectBtn)
 
     await waitFor(() => {

package/app/components/recommended-products/index.jsx

@@ -11,6 +11,7 @@ import {useIntl} from 'react-intl'
 import {Button} from '@salesforce/retail-react-app/app/components/shared/ui'
 import ProductScroller from '@salesforce/retail-react-app/app/components/product-scroller'
 import useEinstein from '@salesforce/retail-react-app/app/hooks/use-einstein'
+import useDataCloud from '@salesforce/retail-react-app/app/hooks/use-datacloud'
 import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
 import useIntersectionObserver from '@salesforce/retail-react-app/app/hooks/use-intersection-observer'
 import {useWishList} from '@salesforce/retail-react-app/app/hooks/use-wish-list'
@@ -41,6 +42,7 @@ const RecommendedProducts = ({zone, recommender, products, title, shouldFetch, .
     const {data: customer} = useCurrentCustomer()
     const {customerId} = customer
     const {data: wishlist} = useWishList()
+    const dataCloud = useDataCloud()
 
     const createCustomerProductListItem = useShopperCustomersMutation(
         'createCustomerProductListItem'
@@ -98,6 +100,13 @@ const RecommendedProducts = ({zone, recommender, products, title, shouldFetch, .
                 },
                 recommendations.recs.map((rec) => ({id: rec.id}))
             )
+            dataCloud.sendViewRecommendations(
+                {
+                    recommenderName: recommendations.recommenderName,
+                    __recoUUID: recommendations.recoUUID
+                },
+                recommendations.recs.map((rec) => ({id: rec.id}))
+            )
         }
     }, [isOnScreen, recommendations])
 

package/app/components/store-locator-modal/store-locator-content.test.jsx

@@ -354,7 +354,6 @@ describe('StoreLocatorContent', () => {
                 )
             })
         )
-        screen.debug()
 
         renderWithProviders(
             <WrapperComponent