SalesforceCommerceCloud · adamraya · Aug 4, 2022 · Jul 5, 2022 · Jul 5, 2022 · Jul 11, 2022
@@ -19,9 +19,11 @@ import {
     CustomerProductListsProvider,
     CustomerProvider
 } from '../../commerce-api/contexts'
+import {LocaleProvider, SiteProvider, UrlTemplateProvider} from '../../contexts'
 import {resolveSiteFromUrl} from '../../utils/site-utils'
 import {resolveLocaleFromUrl} from '../../utils/utils'
 import {getConfig} from 'pwa-kit-runtime/utils/ssr-config'
+import {createUrlTemplate} from '../../utils/url'
 
 /**
  * Use the AppConfig component to inject extra arguments into the getProps
@@ -36,15 +38,21 @@ const AppConfig = ({children, locals = {}}) => {
     const [customer, setCustomer] = useState(null)
 
     return (
-        <CommerceAPIProvider value={locals.api}>
-            <CustomerProvider value={{customer, setCustomer}}>
-                <BasketProvider value={{basket, setBasket}}>
-                    <CustomerProductListsProvider>
-                        <ChakraProvider theme={theme}>{children}</ChakraProvider>
-                    </CustomerProductListsProvider>
-                </BasketProvider>
-            </CustomerProvider>
-        </CommerceAPIProvider>
+        <SiteProvider site={locals.site}>
+            <LocaleProvider locale={locals.locale}>
+                <UrlTemplateProvider fillUrlTemplate={locals.fillUrlTemplate}>
+                    <CommerceAPIProvider value={locals.api}>
+                        <CustomerProvider value={{customer, setCustomer}}>
+                            <BasketProvider value={{basket, setBasket}}>
+                                <CustomerProductListsProvider>
+                                    <ChakraProvider theme={theme}>{children}</ChakraProvider>
+                                </CustomerProductListsProvider>
+                            </BasketProvider>
+                        </CustomerProvider>
+                    </CommerceAPIProvider>
+                </UrlTemplateProvider>
+            </LocaleProvider>
+        </SiteProvider>
     )
 }
 
@@ -66,13 +74,23 @@ AppConfig.restore = (locals = {}) => {
     apiConfig.parameters.siteId = site.id
 
     locals.api = new CommerceAPI({...apiConfig, locale: locale.id, currency})
+    locals.fillUrlTemplate = createUrlTemplate(
+        appConfig,
+        site.alias || site.id,
+        locale.id || locale
+    )
+    locals.site = site
+    locals.locale = locale.id
 }
 
 AppConfig.freeze = () => undefined
 
 AppConfig.extraGetPropsArgs = (locals = {}) => {
     return {
-        api: locals.api
+        api: locals.api,
+        fillUrlTemplate: locals.fillUrlTemplate,
+        site: locals.site,
+        locale: locals.locale
     }
 }
 

@@ -5,7 +5,7 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 
-import React, {useState, useEffect} from 'react'
+import React, {useState, useEffect, useMemo} from 'react'
 import PropTypes from 'prop-types'
 import {useHistory, useLocation} from 'react-router-dom'
 import {getAssetUrl} from 'pwa-kit-react-sdk/ssr/universal/utils'
@@ -35,21 +35,20 @@ import useShopper from '../../commerce-api/hooks/useShopper'
 import useCustomer from '../../commerce-api/hooks/useCustomer'
 import {AuthModal, useAuthModal} from '../../hooks/use-auth-modal'
 import {AddToCartModalProvider} from '../../hooks/use-add-to-cart-modal'
-import useSite from '../../hooks/use-site'
-import useLocale from '../../hooks/use-locale'
 import useWishlist from '../../hooks/use-wishlist'
 
 // Localization
 import {IntlProvider} from 'react-intl'
 
 // Others
 import {watchOnlineStatus, flatten} from '../../utils/utils'
-import {homeUrlBuilder, getPathWithLocale, buildPathWithUrlConfig} from '../../utils/url'
 import {getTargetLocale, fetchTranslations} from '../../utils/locale'
 import {DEFAULT_SITE_TITLE, HOME_HREF, THEME_COLOR} from '../../constants'
+import {resolveLocaleFromUrl} from '../../utils/utils'
 
 import Seo from '../seo'
 import {resolveSiteFromUrl} from '../../utils/site-utils'
+import useUrlTemplate from '../../hooks/use-url-template'
 
 const DEFAULT_NAV_DEPTH = 3
 const DEFAULT_ROOT_CATEGORY = 'root'
@@ -63,18 +62,19 @@ const App = (props) => {
     const location = useLocation()
     const authModal = useAuthModal()
     const customer = useCustomer()
+    const {fillUrlTemplate} = useUrlTemplate()
 
-    const site = useSite()
-    const locale = useLocale()
+    const {pathname, search} = useLocation()
+    const site = useMemo(() => {
+        return resolveSiteFromUrl(`${pathname}${search}`)
+    }, [pathname, search])
+    const locale = useMemo(() => {
+        return resolveLocaleFromUrl(`${pathname}${search}`)
+    }, [pathname, search, site])
 
     const [isOnline, setIsOnline] = useState(true)
     const styles = useStyleConfig('App')
 
-    const configValues = {
-        locale: locale.alias || locale.id,
-        site: site.alias || site.id
-    }
-
     const {isOpen, onOpen, onClose} = useDisclosure()
 
     // Used to conditionally render header/footer for checkout page
@@ -115,15 +115,16 @@ const App = (props) => {
 
     const onLogoClick = () => {
         // Goto the home page.
-        const path = homeUrlBuilder(HOME_HREF, {locale, site})
+        const path = fillUrlTemplate(HOME_HREF)
+
         history.push(path)
 
         // Close the drawer.
         onClose()
     }
 
     const onCartClick = () => {
-        const path = buildPathWithUrlConfig('/cart', configValues)
+        const path = fillUrlTemplate('/cart')
         history.push(path)
 
         // Close the drawer.
@@ -133,7 +134,7 @@ const App = (props) => {
     const onAccountClick = () => {
         // Link to account page for registered customer, open auth modal otherwise
         if (customer.isRegistered) {
-            const path = buildPathWithUrlConfig('/account', configValues)
+            const path = fillUrlTemplate('/account')
             history.push(path)
         } else {
             // if they already are at the login page, do not show login modal
@@ -143,7 +144,7 @@ const App = (props) => {
     }
 
     const onWishlistClick = () => {
-        const path = buildPathWithUrlConfig('/account/wishlist', configValues)
+        const path = fillUrlTemplate('/account/wishlist')
         history.push(path)
     }
 
@@ -184,19 +185,15 @@ const App = (props) => {
                                 <link
                                     rel="alternate"
                                     hrefLang={locale.id.toLowerCase()}
-                                    href={`${appOrigin}${getPathWithLocale(locale.id, {
-                                        location
-                                    })}`}
+                                    href={`${appOrigin}${fillUrlTemplate(location.pathname)}`}
                                     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}${getPathWithLocale(site.l10n.defaultLocale, {
-                                    location
-                                })}`}
+                                href={`${appOrigin}${fillUrlTemplate(location.pathname)}`}
                             />
                             {/* A wider fallback for user locales that the app does not support */}
                             <link rel="alternate" hrefLang="x-default" href={`${appOrigin}/`} />
@@ -222,11 +219,15 @@ const App = (props) => {
                                                 onClose={onClose}
                                                 onLogoClick={onLogoClick}
                                                 root={allCategories[DEFAULT_ROOT_CATEGORY]}
+                                                locale={locale}
                                             />
                                         </HideOnDesktop>
 
                                         <HideOnMobile>
-                                            <ListMenu root={allCategories[DEFAULT_ROOT_CATEGORY]} />
+                                            <ListMenu
+                                                root={allCategories[DEFAULT_ROOT_CATEGORY]}
+                                                locale={locale}
+                                            />
                                         </HideOnMobile>
                                     </Header>
                                 ) : (

@@ -37,8 +37,10 @@ afterEach(() => {
 
 describe('App', () => {
     const site = {
-        ...mockConfig.app.sites[0],
-        alias: 'uk'
+        site: {
+            ...mockConfig.app.sites[0],
+            alias: 'uk'
+        }
     }
     test('App component is rendered appropriately', () => {
         useSite.mockImplementation(() => site)
@@ -77,7 +79,7 @@ describe('App', () => {
         const hasGeneralLocale = ({hrefLang}) => hrefLang === DEFAULT_LOCALE.slice(0, 2)
 
         // `length + 2` because one for a general locale and the other with x-default value
-        expect(hreflangLinks.length).toBe(site.l10n.supportedLocales.length + 2)
+        expect(hreflangLinks.length).toBe(site.site.l10n.supportedLocales.length + 2)
 
         expect(hreflangLinks.some((link) => hasGeneralLocale(link))).toBe(true)
         expect(hreflangLinks.some((link) => link.hrefLang === 'x-default')).toBe(true)

@@ -53,6 +53,7 @@ import LoadingSpinner from '../loading-spinner'
 
 import useNavigation from '../../hooks/use-navigation'
 import useSite from '../../hooks/use-site'
+import useUrlTemplate from '../../hooks/use-url-template'
 
 // The FONT_SIZES and FONT_WEIGHTS constants are used to control the styling for
 // the accordion buttons as their current depth. In the below definition we assign
@@ -84,8 +85,9 @@ const DrawerMenu = ({isOpen, onClose = noop, onLogoClick = noop, root}) => {
     const styles = useMultiStyleConfig('DrawerMenu')
     const drawerSize = useBreakpointValue({sm: PHONE_DRAWER_SIZE, md: TABLET_DRAWER_SIZE})
     const socialIconVariant = useBreakpointValue({base: 'flex', md: 'flex-start'})
-    const site = useSite()
+    const {site} = useSite()
     const {l10n} = site
+    const {fillUrlTemplate} = useUrlTemplate()
     const [showLoading, setShowLoading] = useState(false)
     const onSignoutClick = async () => {
         setShowLoading(true)
@@ -272,9 +274,13 @@ const DrawerMenu = ({isOpen, onClose = noop, onLogoClick = noop, root}) => {
                                         locales={supportedLocaleIds}
                                         onSelect={(newLocale) => {
                                             // Update the `locale` in the URL.
-                                            const newUrl = getPathWithLocale(newLocale, {
-                                                disallowParams: ['refine']
-                                            })
+                                            const newUrl = getPathWithLocale(
+                                                newLocale,
+                                                fillUrlTemplate,
+                                                {
+                                                    disallowParams: ['refine']
+                                                }
+                                            )
                                             window.location = newUrl
                                         }}
                                     />

@@ -30,13 +30,15 @@ import {HideOnDesktop, HideOnMobile} from '../responsive'
 import {getPathWithLocale} from '../../utils/url'
 import LocaleText from '../locale-text'
 import useSite from '../../hooks/use-site'
+import useUrlTemplate from '../../hooks/use-url-template'
 
 const Footer = ({...otherProps}) => {
     const styles = useMultiStyleConfig('Footer')
     const intl = useIntl()
     const [locale, setLocale] = useState(intl.locale)
-    const site = useSite()
+    const {site} = useSite()
     const {l10n} = site
+    const {fillUrlTemplate} = useUrlTemplate()
     const supportedLocaleIds = l10n?.supportedLocales.map((locale) => locale.id)
     const showLocaleSelector = supportedLocaleIds?.length > 1
 
@@ -136,9 +138,13 @@ const Footer = ({...otherProps}) => {
                                         setLocale(target.value)
 
                                         // Update the `locale` in the URL.
-                                        const newUrl = getPathWithLocale(target.value, {
-                                            disallowParams: ['refine']
-                                        })
+                                        const newUrl = getPathWithLocale(
+                                            target.value,
+                                            fillUrlTemplate,
+                                            {
+                                                disallowParams: ['refine']
+                                            }
+                                        )
 
                                         window.location = newUrl
                                     }}

@@ -8,20 +8,12 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import {Link as ChakraLink} from '@chakra-ui/react'
 import {Link as SPALink, NavLink as NavSPALink} from 'react-router-dom'
-import {buildPathWithUrlConfig} from '../../utils/url'
-import useSite from '../../hooks/use-site'
-import useLocale from '../../hooks/use-locale'
+import useUrlTemplate from '../../hooks/use-url-template'
 
 const Link = React.forwardRef(({href, to, useNavLink = false, ...props}, ref) => {
     const _href = to || href
-    const site = useSite()
-    const locale = useLocale()
-
-    // if alias is not defined, use site id
-    const updatedHref = buildPathWithUrlConfig(_href, {
-        locale: locale.alias || locale.id,
-        site: site.alias || site.id
-    })
+    const {fillUrlTemplate} = useUrlTemplate()
+    const updatedHref = fillUrlTemplate(_href)
     return (
         <ChakraLink
             as={useNavLink ? NavSPALink : SPALink}

@@ -28,7 +28,7 @@ test('renders a link with locale prepended', () => {
     delete window.location
     window.location = new URL('/us/en-US', 'https://www.example.com')
     const {getByText} = renderWithProviders(<Link href="/mypage">My Page</Link>, {
-        wrapperProps: {locale: 'en-US'}
+        wrapperProps: {locale: 'en-US', siteAlias: 'us', appConfig: mockConfig.app}
     })
     expect(getByText(/My Page/i)).toHaveAttribute('href', '/us/en-US/mypage')
 })
@@ -49,7 +49,7 @@ test('renders a link with locale and site as query param', () => {
     delete window.location
     window.location = new URL('https://www.example.com/women/dresses?site=us&locale=en-US')
     const {getByText} = renderWithProviders(<Link href="/mypage">My Page</Link>, {
-        wrapperProps: {locale: 'en-US'}
+        wrapperProps: {locale: 'en-US', siteAlias: 'us', appConfig: newConfig.app}
     })
 
     expect(getByText(/My Page/i)).toHaveAttribute('href', `/mypage?site=us&locale=en-US`)
@@ -60,7 +60,7 @@ test('accepts `to` prop as well', () => {
     delete window.location
     window.location = new URL('us/en-US', 'https://www.example.com')
     const {getByText} = renderWithProviders(<Link to="/mypage">My Page</Link>, {
-        wrapperProps: {locale: 'en-US'}
+        wrapperProps: {locale: 'en-US', siteAlias: 'us', appConfig: mockConfig.app}
     })
     expect(getByText(/My Page/i)).toHaveAttribute('href', '/us/en-US/mypage')
 })

@@ -12,6 +12,7 @@ import SearchInput from './index'
 import Suggestions from './partials/suggestions'
 import {noop} from '../../utils/utils'
 import mockSearchResults from '../../commerce-api/mocks/searchResults'
+import mockConfig from '../../../config/mocks/default'
 
 jest.mock('../../commerce-api/utils', () => {
     const originalModule = jest.requireActual('../../commerce-api/utils')
@@ -53,7 +54,9 @@ test('renders Popover if recent searches populated', async () => {
 })
 
 test('changes url when enter is pressed', async () => {
-    renderWithProviders(<SearchInput />)
+    renderWithProviders(<SearchInput />, {
+        wrapperProps: {siteAlias: 'uk', appConfig: mockConfig.app}
+    })
     const searchInput = document.querySelector('input[type="search"]')
     await user.type(searchInput, 'Dresses{enter}')
     await waitFor(() => expect(window.location.pathname).toEqual(createPathWithDefaults('/search')))