W 17819854/fix link hreflang (#2269)

* Fix hreflang links

Author: alexvuong

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

@@ -1,6 +1,7 @@
 ## v6.0.0
 - DNT Consent Banner: [#2203](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2203)
 - Implemented opt-in Social & Passwordless Login features and fixed the Reset Password flow which now leverages SLAS APIs [#2079] (https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2079)
+- Fix hreflang alternate links [#2269](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2269)
 
 ## v5.1.0-dev (TBD)
 

packages/template-retail-react-app/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,15 +337,25 @@ 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}
                                 />
                             ))}
                             {/* A general locale as fallback. For example: "en" if default locale is "en-GB" */}
                             <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}/`} />

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

@@ -16,37 +16,18 @@ 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', () => ({
     useUpdateShopperContext: jest.fn()
 }))
 
 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)
 

packages/template-retail-react-app/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>