@salesforce/retail-react-app 1.0.0-preview.0

package/app/components/_app/index.jsx

@@ -0,0 +1,401 @@
+/*
+ * 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, {useState, useEffect} from 'react'
+import PropTypes from 'prop-types'
+import {useHistory, useLocation} from 'react-router-dom'
+import {getAssetUrl} from '@salesforce/pwa-kit-react-sdk/ssr/universal/utils'
+import {getAppOrigin} from '@salesforce/pwa-kit-react-sdk/utils/url'
+import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
+import {useQuery, useQueries} from '@tanstack/react-query'
+import {
+    useAccessToken,
+    useCategory,
+    useCommerceApi,
+    useCustomerType,
+    useCustomerBaskets,
+    useShopperBasketsMutation
+} from '@salesforce/commerce-sdk-react'
+import * as queryKeyHelpers from '@salesforce/commerce-sdk-react/hooks/ShopperProducts/queryKeyHelpers'
+// Chakra
+import {Box, useDisclosure, useStyleConfig} from '@chakra-ui/react'
+import {SkipNavLink, SkipNavContent} from '@chakra-ui/skip-nav'
+
+// Contexts
+import {CurrencyProvider} from '@salesforce/retail-react-app/app/contexts'
+
+// Local Project Components
+import Header from '@salesforce/retail-react-app/app/components/header'
+import OfflineBanner from '@salesforce/retail-react-app/app/components/offline-banner'
+import OfflineBoundary from '@salesforce/retail-react-app/app/components/offline-boundary'
+import ScrollToTop from '@salesforce/retail-react-app/app/components/scroll-to-top'
+import Footer from '@salesforce/retail-react-app/app/components/footer'
+import CheckoutHeader from '@salesforce/retail-react-app/app/pages/checkout/partials/checkout-header'
+import CheckoutFooter from '@salesforce/retail-react-app/app/pages/checkout/partials/checkout-footer'
+import DrawerMenu from '@salesforce/retail-react-app/app/components/drawer-menu'
+import ListMenu from '@salesforce/retail-react-app/app/components/list-menu'
+import {HideOnDesktop, HideOnMobile} from '@salesforce/retail-react-app/app/components/responsive'
+import AboveHeader from '@salesforce/retail-react-app/app/components/_app/partials/above-header'
+
+// Hooks
+import {AuthModal, useAuthModal} from '@salesforce/retail-react-app/app/hooks/use-auth-modal'
+import {AddToCartModalProvider} from '@salesforce/retail-react-app/app/hooks/use-add-to-cart-modal'
+import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site'
+import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
+
+// Localization
+import {IntlProvider} from 'react-intl'
+
+// Others
+import {
+    watchOnlineStatus,
+    flatten,
+    mergeMatchedItems,
+    isServer
+} from '@salesforce/retail-react-app/app/utils/utils'
+import {getTargetLocale, fetchTranslations} from '@salesforce/retail-react-app/app/utils/locale'
+import {
+    DEFAULT_SITE_TITLE,
+    HOME_HREF,
+    THEME_COLOR,
+    CAT_MENU_DEFAULT_NAV_SSR_DEPTH,
+    CAT_MENU_DEFAULT_ROOT_CATEGORY,
+    DEFAULT_LOCALE
+} from '@salesforce/retail-react-app/app/constants'
+
+import Seo from '@salesforce/retail-react-app/app/components/seo'
+
+const onClient = typeof window !== 'undefined'
+
+/* 
+The categories tree can be really large! For performance reasons,
+we only load the level 0 categories on server side, and load the rest
+on client side to reduce SSR page size.
+*/
+const useLazyLoadCategories = () => {
+    const itemsKey = 'categories'
+
+    const levelZeroCategoriesQuery = useCategory({
+        parameters: {id: CAT_MENU_DEFAULT_ROOT_CATEGORY, levels: CAT_MENU_DEFAULT_NAV_SSR_DEPTH}
+    })
+
+    const ids = levelZeroCategoriesQuery.data?.[itemsKey].map((category) => category.id)
+    const queries = useCategoryBulk(ids, {
+        enabled: onClient && ids?.length > 0
+    })
+    const dataArray = queries.map((query) => query.data).filter(Boolean)
+    const isLoading = queries.some((query) => query.isLoading)
+    const isError = queries.some((query) => query.isError)
+    return {
+        isLoading,
+        isError,
+        data: {
+            ...levelZeroCategoriesQuery.data,
+            [itemsKey]: mergeMatchedItems(
+                levelZeroCategoriesQuery.data?.categories || [],
+                dataArray
+            )
+        }
+    }
+}
+
+const App = (props) => {
+    const {children} = props
+    const {data: categoriesTree} = useLazyLoadCategories()
+    const categories = flatten(categoriesTree || {}, 'categories')
+
+    const appOrigin = getAppOrigin()
+
+    const history = useHistory()
+    const location = useLocation()
+    const authModal = useAuthModal()
+    const {isRegistered} = useCustomerType()
+    const {site, locale, buildUrl} = useMultiSite()
+
+    const [isOnline, setIsOnline] = useState(true)
+    const styles = useStyleConfig('App')
+
+    const {isOpen, onOpen, onClose} = useDisclosure()
+
+    const targetLocale = getTargetLocale({
+        getUserPreferredLocales: () => {
+            // CONFIG: This function should return an array of preferred locales. They can be
+            // derived from various sources. Below are some examples of those:
+            //
+            // - client side: window.navigator.languages
+            // - the page URL they're on (example.com/en-GB/home)
+            // - cookie (if their previous preference is saved there)
+            //
+            // If this function returns an empty array (e.g. there isn't locale in the page url),
+            // then the app would use the default locale as the fallback.
+
+            // NOTE: Your implementation may differ, this is just what we did.
+            return [locale?.id || DEFAULT_LOCALE]
+        },
+        l10nConfig: site.l10n
+    })
+
+    // Fetch the translation message data using the target locale.
+    const {data: messages} = useQuery({
+        queryKey: ['app', 'translationas', 'messages', targetLocale],
+        queryFn: () => fetchTranslations(targetLocale),
+        enabled: isServer
+    })
+
+    // Used to conditionally render header/footer for checkout page
+    const isCheckout = /\/checkout$/.test(location?.pathname)
+
+    const {l10n} = site
+    // Get the current currency to be used through out the app
+    const currency = locale.preferredCurrency || l10n.defaultCurrency
+
+    // Handle creating a new basket if there isn't one already assigned to the current
+    // customer.
+    const {data: customer} = useCurrentCustomer()
+    const {data: baskets} = useCustomerBaskets(
+        {parameters: {customerId: customer.customerId}},
+        {enabled: !!customer.customerId && !isServer}
+    )
+    const createBasket = useShopperBasketsMutation('createBasket')
+    const updateBasket = useShopperBasketsMutation('updateBasket')
+
+    useEffect(() => {
+        // Create a new basket if the current customer doesn't have one.
+        if (baskets?.total === 0) {
+            createBasket.mutate({
+                body: {}
+            })
+        }
+        // update the basket currency if it doesn't match the current locale currency
+        if (baskets?.baskets?.[0]?.currency && baskets.baskets[0].currency !== currency) {
+            updateBasket.mutate({
+                parameters: {basketId: baskets.baskets[0].basketId},
+                body: {currency}
+            })
+        }
+    }, [baskets])
+
+    useEffect(() => {
+        // Listen for online status changes.
+        watchOnlineStatus((isOnline) => {
+            setIsOnline(isOnline)
+        })
+    }, [])
+
+    useEffect(() => {
+        // Lets automatically close the mobile navigation when the
+        // location path is changed.
+        onClose()
+    }, [location])
+
+    const onLogoClick = () => {
+        // Goto the home page.
+        const path = buildUrl(HOME_HREF)
+
+        history.push(path)
+
+        // Close the drawer.
+        onClose()
+    }
+
+    const onCartClick = () => {
+        const path = buildUrl('/cart')
+        history.push(path)
+
+        // Close the drawer.
+        onClose()
+    }
+
+    const onAccountClick = () => {
+        // Link to account page for registered customer, open auth modal otherwise
+        if (isRegistered) {
+            const path = buildUrl('/account')
+            history.push(path)
+        } else {
+            // if they already are at the login page, do not show login modal
+            if (new RegExp(`^/login$`).test(location.pathname)) return
+            authModal.onOpen()
+        }
+    }
+
+    const onWishlistClick = () => {
+        const path = buildUrl('/account/wishlist')
+        history.push(path)
+    }
+
+    return (
+        <Box className="sf-app" {...styles.container}>
+            <IntlProvider
+                onError={(err) => {
+                    if (!messages) {
+                        // During the ssr prepass phase the messages object has not loaded, so we can suppress
+                        // errors during this time.
+                        return
+                    }
+                    if (err.code === 'MISSING_TRANSLATION') {
+                        // NOTE: Remove the console error for missing translations during development,
+                        // as we knew translations would be added later.
+                        console.warn('Missing translation', err.message)
+                        return
+                    }
+                    throw err
+                }}
+                locale={targetLocale}
+                messages={messages}
+                // For react-intl, the _default locale_ refers to the locale that the inline `defaultMessage`s are written for.
+                // NOTE: if you update this value, please also update the following npm scripts in `template-retail-react-app/package.json`:
+                // - "extract-default-translations"
+                // - "compile-translations:pseudo"
+                defaultLocale={DEFAULT_LOCALE}
+            >
+                <CurrencyProvider currency={currency}>
+                    <Seo>
+                        <meta name="theme-color" content={THEME_COLOR} />
+                        <meta name="apple-mobile-web-app-title" content={DEFAULT_SITE_TITLE} />
+                        <link
+                            rel="apple-touch-icon"
+                            href={getAssetUrl('static/img/global/apple-touch-icon.png')}
+                        />
+                        <link rel="manifest" href={getAssetUrl('static/manifest.json')} />
+
+                        {/* Urls for all localized versions of this page (including current page)
+                            For more details on hrefLang, see https://developers.google.com/search/docs/advanced/crawling/localized-versions */}
+                        {site.l10n?.supportedLocales.map((locale) => (
+                            <link
+                                rel="alternate"
+                                hrefLang={locale.id.toLowerCase()}
+                                href={`${appOrigin}${buildUrl(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}${buildUrl(location.pathname)}`}
+                        />
+                        {/* A wider fallback for user locales that the app does not support */}
+                        <link rel="alternate" hrefLang="x-default" href={`${appOrigin}/`} />
+                    </Seo>
+
+                    <ScrollToTop />
+
+                    <Box id="app" display="flex" flexDirection="column" flex={1}>
+                        <SkipNavLink zIndex="skipLink">Skip to Content</SkipNavLink>
+
+                        <Box {...styles.headerWrapper}>
+                            {!isCheckout ? (
+                                <>
+                                    <AboveHeader />
+                                    <Header
+                                        onMenuClick={onOpen}
+                                        onLogoClick={onLogoClick}
+                                        onMyCartClick={onCartClick}
+                                        onMyAccountClick={onAccountClick}
+                                        onWishlistClick={onWishlistClick}
+                                    >
+                                        <HideOnDesktop>
+                                            <DrawerMenu
+                                                isOpen={isOpen}
+                                                onClose={onClose}
+                                                onLogoClick={onLogoClick}
+                                                root={categories?.[CAT_MENU_DEFAULT_ROOT_CATEGORY]}
+                                            />
+                                        </HideOnDesktop>
+
+                                        <HideOnMobile>
+                                            <ListMenu
+                                                root={categories?.[CAT_MENU_DEFAULT_ROOT_CATEGORY]}
+                                            />
+                                        </HideOnMobile>
+                                    </Header>
+                                </>
+                            ) : (
+                                <CheckoutHeader />
+                            )}
+                        </Box>
+                        {!isOnline && <OfflineBanner />}
+                        <AddToCartModalProvider>
+                            <SkipNavContent
+                                style={{
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    flex: 1,
+                                    outline: 0
+                                }}
+                            >
+                                <Box
+                                    as="main"
+                                    id="app-main"
+                                    role="main"
+                                    display="flex"
+                                    flexDirection="column"
+                                    flex="1"
+                                >
+                                    <OfflineBoundary isOnline={false}>{children}</OfflineBoundary>
+                                </Box>
+                            </SkipNavContent>
+
+                            {!isCheckout ? <Footer /> : <CheckoutFooter />}
+
+                            <AuthModal {...authModal} />
+                        </AddToCartModalProvider>
+                    </Box>
+                </CurrencyProvider>
+            </IntlProvider>
+        </Box>
+    )
+}
+
+App.propTypes = {
+    children: PropTypes.node
+}
+
+/**
+ * a hook that parallelly and individually fetches category based on the given ids
+ * @param ids - list of categories ids to fetch
+ * @param queryOptions -  react query options
+ * @return list of react query results
+ */
+export const useCategoryBulk = (ids = [], queryOptions) => {
+    const api = useCommerceApi()
+    const {getTokenWhenReady} = useAccessToken()
+    const {
+        app: {commerceAPI}
+    } = getConfig()
+    const {
+        parameters: {organizationId}
+    } = commerceAPI
+    const {site} = useMultiSite()
+
+    const queries = ids.map((id) => {
+        return {
+            queryKey: queryKeyHelpers.getCategory.queryKey({
+                id,
+                levels: 2,
+                organizationId,
+                siteId: site.id
+            }),
+            queryFn: async () => {
+                const token = await getTokenWhenReady()
+                const res = await api.shopperProducts.getCategory({
+                    parameters: {id, levels: 2},
+                    headers: {
+                        authorization: `Bearer ${token}`
+                    }
+                })
+                return res
+            },
+            ...queryOptions,
+            enabled: queryOptions.enabled !== false && Boolean(id)
+        }
+    })
+    const res = useQueries({queries})
+    return res
+}
+
+export default App

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

@@ -0,0 +1,85 @@
+/*
+ * 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 {screen} from '@testing-library/react'
+import {Helmet} from 'react-helmet'
+
+import App from '@salesforce/retail-react-app/app/components/_app/index.jsx'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+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/translations/compiled/en-GB.json'
+import mockConfig from '@salesforce/retail-react-app/config/mocks/default'
+jest.mock('../../hooks/use-multi-site', () => jest.fn())
+let windowSpy
+beforeAll(() => {
+    jest.spyOn(console, 'log').mockImplementation(jest.fn())
+    jest.spyOn(console, 'groupCollapsed').mockImplementation(jest.fn())
+})
+
+afterAll(() => {
+    console.log.mockRestore()
+    console.groupCollapsed.mockRestore()
+})
+beforeEach(() => {
+    windowSpy = jest.spyOn(window, 'window', 'get')
+})
+
+afterEach(() => {
+    console.log.mockClear()
+    console.groupCollapsed.mockClear()
+    windowSpy.mockRestore()
+})
+
+describe('App', () => {
+    const site = {
+        ...mockConfig.app.sites[0],
+        alias: 'uk'
+    }
+
+    const locale = DEFAULT_LOCALE
+
+    const buildUrl = jest.fn().mockImplementation((href, site, locale) => {
+        return `${site ? `/${site}` : ''}${locale ? `/${locale}` : ''}${href}`
+    })
+
+    const resultUseMultiSite = {
+        site,
+        locale,
+        buildUrl
+    }
+
+    test('App component is rendered appropriately', () => {
+        useMultiSite.mockImplementation(() => resultUseMultiSite)
+        renderWithProviders(
+            <App targetLocale={DEFAULT_LOCALE} defaultLocale={DEFAULT_LOCALE} messages={messages}>
+                <p>Any children here</p>
+            </App>
+        )
+        screen.debug()
+        expect(screen.getByRole('main')).toBeInTheDocument()
+        expect(screen.getByText('Any children here')).toBeInTheDocument()
+    })
+
+    test('The localized hreflang links exist in the html head', () => {
+        useMultiSite.mockImplementation(() => resultUseMultiSite)
+        renderWithProviders(
+            <App targetLocale={DEFAULT_LOCALE} defaultLocale={DEFAULT_LOCALE} messages={messages} />
+        )
+
+        const helmet = Helmet.peek()
+        const hreflangLinks = helmet.linkTags.filter((link) => link.rel === 'alternate')
+
+        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).toHaveLength(resultUseMultiSite.site.l10n.supportedLocales.length + 2)
+
+        expect(hreflangLinks.some((link) => hasGeneralLocale(link))).toBe(true)
+        expect(hreflangLinks.some((link) => link.hrefLang === 'x-default')).toBe(true)
+    })
+})

package/app/components/_app/partials/above-header.jsx

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2023, Salesforce, 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
+ */
+
+const AboveHeader = () => null
+
+export default AboveHeader

package/app/components/_app-config/index.jsx

@@ -0,0 +1,125 @@
+/*
+ * 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 {ChakraProvider} from '@chakra-ui/react'
+
+// Removes focus for non-keyboard interactions for the whole application
+import 'focus-visible/dist/focus-visible'
+
+import theme from '@salesforce/retail-react-app/app/theme'
+import {MultiSiteProvider} from '@salesforce/retail-react-app/app/contexts'
+import {
+    resolveSiteFromUrl,
+    resolveLocaleFromUrl
+} from '@salesforce/retail-react-app/app/utils/site-utils'
+import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
+import {createUrlTemplate} from '@salesforce/retail-react-app/app/utils/url'
+
+import {CommerceApiProvider} from '@salesforce/commerce-sdk-react'
+import {withReactQuery} from '@salesforce/pwa-kit-react-sdk/ssr/universal/components/with-react-query'
+import {useCorrelationId} from '@salesforce/pwa-kit-react-sdk/ssr/universal/hooks'
+import {getAppOrigin} from '@salesforce/pwa-kit-react-sdk/utils/url'
+import {ReactQueryDevtools} from '@tanstack/react-query-devtools'
+
+/**
+ * Use the AppConfig component to inject extra arguments into the getProps
+ * methods for all Route Components in the app – typically you'd want to do this
+ * to inject a connector instance that can be used in all Pages.
+ *
+ * You can also use the AppConfig to configure a state-management library such
+ * as Redux, or Mobx, if you like.
+ */
+const AppConfig = ({children, locals = {}}) => {
+    const {correlationId} = useCorrelationId()
+    const headers = {
+        'correlation-id': correlationId
+    }
+
+    const commerceApiConfig = locals.appConfig.commerceAPI
+
+    const appOrigin = getAppOrigin()
+
+    return (
+        <CommerceApiProvider
+            shortCode={commerceApiConfig.parameters.shortCode}
+            clientId={commerceApiConfig.parameters.clientId}
+            organizationId={commerceApiConfig.parameters.organizationId}
+            siteId={locals.site?.id}
+            locale={locals.locale?.id}
+            currency={locals.locale?.preferredCurrency}
+            redirectURI={`${appOrigin}/callback`}
+            proxy={`${appOrigin}${commerceApiConfig.proxyPath}`}
+            headers={headers}
+            OCAPISessionsURL={`${appOrigin}/mobify/proxy/ocapi/s/${locals.site?.id}/dw/shop/v22_8/sessions`}
+        >
+            <MultiSiteProvider site={locals.site} locale={locals.locale} buildUrl={locals.buildUrl}>
+                <ChakraProvider theme={theme}>{children}</ChakraProvider>
+            </MultiSiteProvider>
+            <ReactQueryDevtools />
+        </CommerceApiProvider>
+    )
+}
+
+AppConfig.restore = (locals = {}) => {
+    const path =
+        typeof window === 'undefined'
+            ? locals.originalUrl
+            : `${window.location.pathname}${window.location.search}`
+    const site = resolveSiteFromUrl(path)
+    const locale = resolveLocaleFromUrl(path)
+
+    const {app: appConfig} = getConfig()
+    const apiConfig = {
+        ...appConfig.commerceAPI,
+        einsteinConfig: appConfig.einsteinAPI
+    }
+
+    apiConfig.parameters.siteId = site.id
+
+    locals.buildUrl = createUrlTemplate(appConfig, site.alias || site.id, locale.id)
+    locals.site = site
+    locals.locale = locale
+    locals.appConfig = appConfig
+}
+
+AppConfig.freeze = () => undefined
+
+AppConfig.extraGetPropsArgs = (locals = {}) => {
+    return {
+        buildUrl: locals.buildUrl,
+        site: locals.site,
+        locale: locals.locale
+    }
+}
+
+AppConfig.propTypes = {
+    children: PropTypes.node,
+    locals: PropTypes.object
+}
+
+const isServerSide = typeof window === 'undefined'
+
+// Recommended settings for PWA-Kit usages.
+// NOTE: they will be applied on both server and client side.
+const options = {
+    queryClientConfig: {
+        defaultOptions: {
+            queries: {
+                retry: false,
+                refetchOnWindowFocus: false,
+                staleTime: 10 * 1000,
+                ...(isServerSide ? {retryOnMount: false} : {})
+            },
+            mutations: {
+                retry: false
+            }
+        }
+    }
+}
+
+export default withReactQuery(AppConfig, options)