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 {AppConfigProvider} from '../../contexts'
 import {resolveSiteFromUrl} from '../../utils/site-utils'
 import {resolveLocaleFromUrl} from '../../utils/utils'
 import {getConfig} from 'pwa-kit-runtime/utils/ssr-config'
+import {getUrlTemplateLiteral} from '../../utils/url'
 
 /**
  * Use the AppConfig component to inject extra arguments into the getProps
@@ -36,15 +38,17 @@ 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>
+        <AppConfigProvider urlTemplateLiteral={locals.urlTemplateLiteral}>
+            <CommerceAPIProvider value={locals.api}>
+                <CustomerProvider value={{customer, setCustomer}}>
+                    <BasketProvider value={{basket, setBasket}}>
+                        <CustomerProductListsProvider>
+                            <ChakraProvider theme={theme}>{children}</ChakraProvider>
+                        </CustomerProductListsProvider>
+                    </BasketProvider>
+                </CustomerProvider>
+            </CommerceAPIProvider>
+        </AppConfigProvider>
     )
 }
 
@@ -66,13 +70,15 @@ AppConfig.restore = (locals = {}) => {
     apiConfig.parameters.siteId = site.id
 
     locals.api = new CommerceAPI({...apiConfig, locale: locale.id, currency})
+    locals.urlTemplateLiteral = getUrlTemplateLiteral(appConfig, site, locale)
 }
 
 AppConfig.freeze = () => undefined
 
 AppConfig.extraGetPropsArgs = (locals = {}) => {
     return {
-        api: locals.api
+        api: locals.api,
+        urlTemplateLiteral: locals.urlTemplateLiteral
     }
 }
 

@@ -11,7 +11,7 @@ import {Helmet} from 'react-helmet'
 import App from './index.jsx'
 import {renderWithProviders} from '../../utils/test-utils'
 import {DEFAULT_LOCALE} from '../../utils/test-utils'
-import useSite from '../../hooks/use-site'
+import {useSite} from '../../hooks/use-site'
 import messages from '../../translations/compiled/en-GB.json'
 import mockConfig from '../../../config/mocks/default'
 jest.mock('../../hooks/use-site', () => jest.fn())

@@ -52,7 +52,7 @@ import useCustomer from '../../commerce-api/hooks/useCustomer'
 import LoadingSpinner from '../loading-spinner'
 
 import useNavigation from '../../hooks/use-navigation'
-import useSite from '../../hooks/use-site'
+import {useSite} from '../../hooks/use-site'
 
 // 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

@@ -29,14 +29,14 @@ import SocialIcons from '../social-icons'
 import {HideOnDesktop, HideOnMobile} from '../responsive'
 import {getPathWithLocale} from '../../utils/url'
 import LocaleText from '../locale-text'
-import useSite from '../../hooks/use-site'
+import {useSite} from '../../hooks/use-site'
 
 const Footer = ({...otherProps}) => {
     const styles = useMultiStyleConfig('Footer')
     const intl = useIntl()
     const [locale, setLocale] = useState(intl.locale)
     const site = useSite()
-    const {l10n} = site
+    const {l10n} = site?.site
     const supportedLocaleIds = l10n?.supportedLocales.map((locale) => locale.id)
     const showLocaleSelector = supportedLocaleIds?.length > 1
 

@@ -8,26 +8,26 @@ 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 {useSite} from '../../hooks/use-site'
+import {useLocale} from '../../hooks/use-locale'
+import {useAppConfig} from '../../hooks/use-app-config'
 
 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 appConfig = useAppConfig()
+    const pathWithUrlConfig = appConfig.urlTemplateLiteral(
+        _href,
+        site.site.alias || site.site.id,
+        locale.locale.id
+    )
     return (
         <ChakraLink
             as={useNavLink ? NavSPALink : SPALink}
             {...(useNavLink && {exact: true})}
             {...props}
-            to={_href === '/' ? '/' : updatedHref}
+            to={_href === '/' ? '/' : pathWithUrlConfig}
             ref={ref}
         />
     )

@@ -46,6 +46,51 @@ CategoriesProvider.propTypes = {
     categories: PropTypes.object
 }
 
+export const LocaleContext = React.createContext()
+export const LocaleProvider = ({locale: initialLocale = {}, children}) => {
+    const [locale, setLocale] = useState(initialLocale)
+
+    return <LocaleContext.Provider value={{locale, setLocale}}>{children}</LocaleContext.Provider>
+}
+
+LocaleProvider.propTypes = {
+    children: PropTypes.node.isRequired,
+    locale: PropTypes.object
+}
+
+export const SiteContext = React.createContext()
+export const SiteProvider = ({site: initialSite = {}, children}) => {
+    const [site, setSite] = useState(initialSite)
+
+    return <SiteContext.Provider value={{site, setSite}}>{children}</SiteContext.Provider>
+}
+
+SiteProvider.propTypes = {
+    children: PropTypes.node.isRequired,
+    site: PropTypes.object
+}
+
+export const AppConfigContext = React.createContext()
+export const AppConfigProvider = ({
+    appConfig: initialAppConfig = {},
+    urlTemplateLiteral,
+    children
+}) => {
+    const [appConfig, setAppConfig] = useState(initialAppConfig)
+
+    return (
+        <AppConfigContext.Provider value={{appConfig, setAppConfig, urlTemplateLiteral}}>
+            {children}
+        </AppConfigContext.Provider>
+    )
+}
+
+AppConfigProvider.propTypes = {
+    children: PropTypes.node.isRequired,
+    appConfig: PropTypes.object,
+    urlTemplateLiteral: PropTypes.func
+}
+
 /**
  * This is the global state for currency, we use this throughout the site. For example, on
  * the product-list, product-detail and cart and basket pages..

diff --git a/packages/template-retail-react-app/app/hooks/use-app-config.js b/packages/template-retail-react-app/app/hooks/use-app-config.js
@@ -0,0 +1,15 @@
+/*
+ * 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 {useContext} from 'react'
+import {AppConfigContext} from '../contexts'
+
+/**
+ * Custom React hook to get the current site
+ * @returns {site: Object, setSite: function}
+ */
+export const useAppConfig = () => useContext(AppConfigContext)
@@ -5,23 +5,11 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 
-import useSite from './use-site'
-import {useMemo} from 'react'
-import {resolveLocaleFromUrl} from '../utils/utils'
-import {useLocation} from 'react-router-dom'
+import {useContext} from 'react'
+import {LocaleContext} from '../contexts'
 
 /**
- * This hook returns the locale object based on current location
- * @return {object} locale
+ * Custom React hook to get the locale
+ * @returns {locale: Object, setLocale: function}
  */
-const useLocale = () => {
-    const {pathname, search} = useLocation()
-    const site = useSite()
-    const locale = useMemo(() => {
-        return resolveLocaleFromUrl(`${pathname}${search}`)
-    }, [pathname, search, site])
-
-    return locale
-}
-
-export default useLocale
+export const useLocale = () => useContext(LocaleContext)
@@ -7,9 +7,9 @@
 import {useCallback} from 'react'
 import {useHistory} from 'react-router'
 import {useIntl} from 'react-intl'
-import {buildPathWithUrlConfig} from '../utils/url'
-import useSite from './use-site'
+import {useSite} from './use-site'
 import {getLocaleByReference} from '../utils/utils'
+import {useAppConfig} from './use-app-config'
 
 /**
  * A convenience hook for programmatic navigation uses history's `push` or `replace`. The proper locale
@@ -21,6 +21,7 @@ const useNavigation = () => {
 
     const {locale: localeShortCode} = useIntl()
     const site = useSite()
+    const appConfig = useAppConfig()
     return useCallback(
         /**
          *
@@ -30,11 +31,11 @@ const useNavigation = () => {
          */
         (path, action = 'push', ...args) => {
             const locale = getLocaleByReference(site, localeShortCode)
-
-            const updatedHref = buildPathWithUrlConfig(path, {
-                locale: locale.alias || locale.id,
-                site: site.alias || site.id
-            })
+            const updatedHref = appConfig.urlTemplateLiteral(
+                path,
+                site.site.alias || site.site.id,
+                locale
+            )
             history[action](path === '/' ? '/' : updatedHref, ...args)
         },
         [localeShortCode, site]

@@ -5,21 +5,11 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 
-import {useLocation} from 'react-router-dom'
-import {resolveSiteFromUrl} from '../utils/site-utils'
-import {useMemo} from 'react'
+import {useContext} from 'react'
+import {SiteContext} from '../contexts'
 
 /**
- * This hook returns the current site based on current location
- *
- * @returns {Object} - current site
+ * Custom React hook to get the current site
+ * @returns {site: Object, setSite: function}
  */
-const useSite = () => {
-    const {pathname, search} = useLocation()
-    const site = useMemo(() => {
-        return resolveSiteFromUrl(`${pathname}${search}`)
-    }, [pathname, search])
-    return site
-}
-
-export default useSite
+export const useSite = () => useContext(SiteContext)
@@ -9,7 +9,7 @@ import {createMemoryHistory} from 'history'
 import {render, screen} from '@testing-library/react'
 import {Router} from 'react-router'
 import React from 'react'
-import useSite from './use-site'
+import {useSite} from './use-site'
 
 afterEach(() => {
     jest.clearAllMocks()

@@ -37,9 +37,9 @@ import {useLocation} from 'react-router-dom'
 import {messages, navLinks} from './constant'
 import useNavigation from '../../hooks/use-navigation'
 import LoadingSpinner from '../../components/loading-spinner'
-import {buildPathWithUrlConfig} from '../../utils/url'
-import useLocale from '../../hooks/use-locale'
-import useSite from '../../hooks/use-site'
+import {useLocale} from '../../hooks/use-locale'
+import {useSite} from '../../hooks/use-site'
+import {useAppConfig} from '../../hooks/use-app-config'
 
 const Account = () => {
     const {path} = useRouteMatch()
@@ -53,6 +53,8 @@ const Account = () => {
     const [mobileNavIndex, setMobileNavIndex] = useState(-1)
     const [showLoading, setShowLoading] = useState(false)
 
+    const appConfig = useAppConfig()
+
     const onSignoutClick = async () => {
         setShowLoading(true)
         await customer.logout()
@@ -91,10 +93,11 @@ const Account = () => {
     // Using Redirect allows us to store the directed page to location
     // so we can direct users back after they are successfully log in
     if (customer.authType != null && !customer.isRegistered) {
-        const path = buildPathWithUrlConfig('/login', {
-            locale: locale.alias || locale.id,
-            site: site.alias || site.id
-        })
+        const path = appConfig.urlTemplateLiteral(
+            '/login',
+            site.site.alias || site.site.id,
+            locale.locale.id
+        )
         return <Redirect to={{pathname: path, state: {directedFrom: location.pathname}}} />
     }