@salesforce/retail-react-app 1.0.0 → 1.1.0-dev.1

package/app/pages/checkout/partials/cc-radio-group.jsx

@@ -7,7 +7,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {FormattedMessage} from 'react-intl'
-import {Box, Button, Stack, Text, SimpleGrid, FormControl, FormErrorMessage} from '@chakra-ui/react'
+import {
+    Box,
+    Button,
+    Stack,
+    Text,
+    SimpleGrid,
+    FormControl,
+    FormErrorMessage
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {PlusIcon} from '@salesforce/retail-react-app/app/components/icons'
 import {RadioCard, RadioCardGroup} from '@salesforce/retail-react-app/app/components/radio-card'
 import {getCreditCardIcon} from '@salesforce/retail-react-app/app/utils/cc-utils'

package/app/pages/checkout/partials/checkout-footer.jsx

@@ -17,7 +17,7 @@ import {
     Flex,
     Spacer,
     useStyles
-} from '@chakra-ui/react'
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import LinksList from '@salesforce/retail-react-app/app/components/links-list'
 import {
     VisaIcon,

package/app/pages/checkout/partials/checkout-header.jsx

@@ -6,7 +6,13 @@
  */
 import React from 'react'
 import {FormattedMessage} from 'react-intl'
-import {Badge, Box, Button, Flex, Center} from '@chakra-ui/react'
+import {
+    Badge,
+    Box,
+    Button,
+    Flex,
+    Center
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import Link from '@salesforce/retail-react-app/app/components/link'
 import {BasketIcon, BrandLogo} from '@salesforce/retail-react-app/app/components/icons'
 import {HOME_HREF} from '@salesforce/retail-react-app/app/constants'

package/app/pages/checkout/partials/checkout-skeleton.jsx

@@ -5,7 +5,14 @@
  * 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 {Box, Container, Grid, GridItem, Skeleton, Stack} from '@chakra-ui/react'
+import {
+    Box,
+    Container,
+    Grid,
+    GridItem,
+    Skeleton,
+    Stack
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 
 const CheckoutSkeleton = () => {
     return (

package/app/pages/checkout/partials/contact-info.jsx

@@ -4,7 +4,7 @@
  * 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, {useRef, useState} from 'react'
+import React, {useEffect, useRef, useState} from 'react'
 import PropTypes from 'prop-types'
 import {
     Alert,
@@ -20,7 +20,7 @@ import {
     Container,
     Stack,
     Text
-} from '@chakra-ui/react'
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {useForm} from 'react-hook-form'
 import {FormattedMessage, useIntl} from 'react-intl'
 import {useCheckout} from '@salesforce/retail-react-app/app/pages/checkout/util/checkout-context'
@@ -96,6 +96,12 @@ const ContactInfo = () => {
         authModal.onOpen()
     }
 
+    useEffect(() => {
+        if (!showPasswordField) {
+            form.unregister('password')
+        }
+    }, [showPasswordField])
+
     return (
         <ToggleCard
             id="step-0"

package/app/pages/checkout/partials/payment-form.jsx

@@ -7,7 +7,15 @@
 import React from 'react'
 import {FormattedMessage, FormattedNumber, useIntl} from 'react-intl'
 import PropTypes from 'prop-types'
-import {Box, Flex, Radio, RadioGroup, Stack, Text, Tooltip} from '@chakra-ui/react'
+import {
+    Box,
+    Flex,
+    Radio,
+    RadioGroup,
+    Stack,
+    Text,
+    Tooltip
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
 import {LockIcon, PaypalIcon} from '@salesforce/retail-react-app/app/components/icons'
 import CreditCardFields from '@salesforce/retail-react-app/app/components/forms/credit-card-fields'

package/app/pages/checkout/partials/payment.jsx

@@ -7,7 +7,16 @@
 import React, {useState} from 'react'
 import PropTypes from 'prop-types'
 import {FormattedMessage, useIntl} from 'react-intl'
-import {Box, Button, Checkbox, Container, Heading, Stack, Text, Divider} from '@chakra-ui/react'
+import {
+    Box,
+    Button,
+    Checkbox,
+    Container,
+    Heading,
+    Stack,
+    Text,
+    Divider
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {useForm} from 'react-hook-form'
 import {useToast} from '@salesforce/retail-react-app/app/hooks/use-toast'
 import {useShopperBasketsMutation} from '@salesforce/commerce-sdk-react'

package/app/pages/checkout/partials/shipping-address-selection.jsx

@@ -7,7 +7,14 @@
 import React, {useState, useEffect} from 'react'
 import PropTypes from 'prop-types'
 import {defineMessage, FormattedMessage, useIntl} from 'react-intl'
-import {Box, Button, Container, Heading, SimpleGrid, Stack} from '@chakra-ui/react'
+import {
+    Box,
+    Button,
+    Container,
+    Heading,
+    SimpleGrid,
+    Stack
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {useForm, Controller} from 'react-hook-form'
 import {shallowEquals} from '@salesforce/retail-react-app/app/utils/utils'
 import {RadioCard, RadioCardGroup} from '@salesforce/retail-react-app/app/components/radio-card'

package/app/pages/checkout/partials/shipping-options.jsx

@@ -6,7 +6,16 @@
  */
 import React, {useEffect} from 'react'
 import {FormattedMessage, FormattedNumber, useIntl} from 'react-intl'
-import {Box, Button, Container, Flex, Radio, RadioGroup, Stack, Text} from '@chakra-ui/react'
+import {
+    Box,
+    Button,
+    Container,
+    Flex,
+    Radio,
+    RadioGroup,
+    Stack,
+    Text
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {useForm, Controller} from 'react-hook-form'
 import {useCheckout} from '@salesforce/retail-react-app/app/pages/checkout/util/checkout-context'
 import {ChevronDownIcon} from '@salesforce/retail-react-app/app/components/icons'

package/app/pages/home/index.jsx

@@ -21,7 +21,7 @@ import {
     Stack,
     Container,
     Link
-} from '@chakra-ui/react'
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 
 // Project Components
 import Hero from '@salesforce/retail-react-app/app/components/hero'

package/app/pages/login/index.jsx

@@ -8,7 +8,7 @@
 import React, {useEffect} from 'react'
 import PropTypes from 'prop-types'
 import {useIntl, defineMessage} from 'react-intl'
-import {Box, Container} from '@chakra-ui/react'
+import {Box, Container} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {
     AuthHelpers,
     useAuthHelper,

package/app/pages/page-not-found/index.jsx

@@ -6,7 +6,14 @@
  */
 
 import React from 'react'
-import {Box, Heading, Flex, Button, Stack, Text} from '@chakra-ui/react'
+import {
+    Box,
+    Heading,
+    Flex,
+    Button,
+    Stack,
+    Text
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {Helmet} from 'react-helmet'
 import {useIntl} from 'react-intl'
 import {useServerContext} from '@salesforce/pwa-kit-react-sdk/ssr/universal/hooks'

package/app/pages/product-detail/index.jsx

@@ -11,7 +11,7 @@ import {Helmet} from 'react-helmet'
 import {FormattedMessage, useIntl} from 'react-intl'
 
 // Components
-import {Box, Button, Stack} from '@chakra-ui/react'
+import {Box, Button, Stack} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {
     useProduct,
     useCategory,
@@ -61,6 +61,7 @@ const ProductDetail = () => {
     if (res) {
         res.set('Cache-Control', `max-age=${MAX_CACHE_AGE}`)
     }
+    const isBasketLoading = !basket?.basketId
 
     /*************************** Product Detail and Category ********************/
     const {productId} = useParams()
@@ -264,6 +265,7 @@ const ProductDetail = () => {
                             addToCart={handleProductSetAddToCart}
                             addToWishlist={handleAddToWishlist}
                             isProductLoading={isProductLoading}
+                            isBasketLoading={isBasketLoading}
                             isWishlistLoading={isWishlistLoading}
                             validateOrderability={handleProductSetValidation}
                         />
@@ -310,6 +312,7 @@ const ProductDetail = () => {
                                             }
                                         }}
                                         isProductLoading={isProductLoading}
+                                        isBasketLoading={isBasketLoading}
                                         isWishlistLoading={isWishlistLoading}
                                     />
                                     <InformationAccordion product={childProduct} />
@@ -331,6 +334,7 @@ const ProductDetail = () => {
                             }
                             addToWishlist={handleAddToWishlist}
                             isProductLoading={isProductLoading}
+                            isBasketLoading={isBasketLoading}
                             isWishlistLoading={isWishlistLoading}
                         />
                         <InformationAccordion product={product} />
@@ -367,6 +371,9 @@ const ProductDetail = () => {
                     />
 
                     <RecommendedProducts
+                        // The Recently Viewed recommender doesn't use `products`, so instead we
+                        // provide a key to update the recommendations on navigation.
+                        key={location.key}
                         title={
                             <FormattedMessage
                                 defaultMessage="Recently Viewed"

package/app/pages/product-detail/index.mock.js

@@ -195,3 +195,17 @@ export const basketWithProductSet = {
     taxation: 'gross',
     tax_total: null
 }
+
+export const einsteinRecommendation = {
+    recs: [
+        {
+            id: '11736753M',
+            product_name: 'Summer Bomber Jacket',
+            image_url:
+                'https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZCU_007/on/demandware.static/-/Sites-apparel-m-catalog/default/dw5e894c3a/images/large/B0574182_001_L1.jpg',
+            product_url:
+                'https://zzcu-007.sandbox.us01.dx.commercecloud.salesforce.com/mens-summer-bomber-jacket/11736753M.html?lang=en_US'
+        }
+    ],
+    recoUUID: '79e9f44e-c4d3-405a-ae4c-eba7b4bfdd4a'
+}

package/app/pages/product-detail/index.test.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021, salesforce.com, inc.
+ * 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
@@ -15,8 +15,12 @@ import {Route, Switch} from 'react-router-dom'
 import {rest} from 'msw'
 import ProductDetail from '.'
 import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
-import {basketWithProductSet} from '@salesforce/retail-react-app/app/pages/product-detail/index.mock'
+import {
+    basketWithProductSet,
+    einsteinRecommendation
+} from '@salesforce/retail-react-app/app/pages/product-detail/index.mock'
 import mockedProductSet from '@salesforce/retail-react-app/app/mocks/product-set-winter-lookM'
+import userEvent from '@testing-library/user-event'
 
 jest.setTimeout(60000)
 
@@ -26,7 +30,7 @@ const MockedComponent = () => {
     return (
         <Switch>
             <Route
-                path="/en-GB/product/:productId"
+                path="/uk/en-GB/product/:productId"
                 render={(props) => <ProductDetail {...props} />}
             />
         </Switch>
@@ -51,7 +55,7 @@ beforeEach(() => {
 
     // Since we're testing some navigation logic, we are using a simple Router
     // around our component. We need to initialize the default route/path here.
-    window.history.pushState({}, 'ProductDetail', '/en-GB/product/test-product')
+    window.history.pushState({}, 'ProductDetail', '/uk/en-GB/product/test-product')
 })
 
 afterEach(() => {
@@ -100,8 +104,13 @@ describe('product set', () => {
     })
 
     test('add the set to cart successfully', async () => {
-        const urlPathAfterSelectingAllVariants =
-            '/en-GB/product/winter-lookM?25518447M=color%3DJJ5FUXX%26size%3D9MD&25518704M=color%3DJJ2XNXX%26size%3D9MD&25772717M=color%3DTAUPETX%26size%3D070%26width%3DM'
+        const urlPathAfterSelectingAllVariants = `/uk/en-GB/product/winter-lookM?${new URLSearchParams(
+            {
+                '25518447M': 'color=JJ5FUXX&size=9MD',
+                '25518704M': 'color=JJ2XNXX&size=9MD',
+                '25772717M': 'color=TAUPETX&size=070&width=M'
+            }
+        )}`
         window.history.pushState({}, 'ProductDetail', urlPathAfterSelectingAllVariants)
 
         // Initial basket is necessary to add items to it
@@ -160,3 +169,57 @@ describe('product set', () => {
         })
     })
 })
+
+describe('Recommended Products', () => {
+    let fetchMock
+    beforeAll(() => {
+        // This is probably more complex than it needs to be? I tried using jest-fetch-mock and msw,
+        // but I couldn't get those working...
+        fetchMock = jest.spyOn(global, 'fetch').mockImplementation(async (url) => {
+            const json = url.endsWith('viewed-recently-einstein') ? einsteinRecommendation : {}
+            return new Response(JSON.stringify(json))
+        })
+    })
+    beforeEach(() => {
+        fetchMock.mockClear()
+    })
+    afterAll(() => {
+        fetchMock.mockRestore()
+    })
+    test('Recently Viewed gets updated when navigating between products', async () => {
+        global.server.use(
+            // Use a single product (and not a product set)
+            rest.get('*/products/:productId', (req, res, ctx) => {
+                return res(ctx.json(productsResponse.data[0]))
+            }),
+            rest.get('*/products', (req, res, ctx) => {
+                return res(ctx.json({}))
+            })
+        )
+        const user = userEvent.setup({advanceTimers: jest.advanceTimersByTime})
+        renderWithProviders(<MockedComponent />)
+
+        // If we poll for updates immediately, the test output is flooded with errors:
+        // "Warning: An update to WrappedComponent inside a test was not wrapped in act(...)."
+        // If we wait to poll until the component is updated, then the errors disappear. Using a
+        // timeout is clearly a suboptimal solution, but I don't know the "correct" way to fix it.
+        let done = false
+        setTimeout(() => (done = true), 200)
+        await waitFor(() => expect(done).toBeTruthy())
+
+        expect(await screen.findAllByText(/Long Sleeve Crew Neck/)).toHaveLength(2)
+        expect(await screen.findByText(/Summer Bomber Jacket/)).toBeInTheDocument()
+
+        // We requested Recently Viewed products on the first page load, but we
+        // only want to check against the second page load
+        fetchMock.mockClear()
+        await user.click(screen.getByText(/Summer Bomber Jacket/))
+
+        // The scope of this test means we just care about the Recently Viewed component being
+        // updated - we don't need to wait for the rest of the page loading
+        expect(fetchMock).toHaveBeenCalledWith(
+            expect.stringMatching(/viewed-recently-einstein$/),
+            expect.any(Object)
+        )
+    })
+})

package/app/pages/product-detail/partials/information-accordion.jsx

@@ -15,7 +15,7 @@ import {
     AccordionIcon,
     Box,
     Stack
-} from '@chakra-ui/react'
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {useIntl} from 'react-intl'
 
 const InformationAccordion = ({product}) => {

package/app/pages/product-list/index.jsx

@@ -43,7 +43,7 @@ import {
     DrawerOverlay,
     DrawerContent,
     DrawerCloseButton
-} from '@chakra-ui/react'
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 
 // Project Components
 import Pagination from '@salesforce/retail-react-app/app/components/pagination'

package/app/pages/product-list/partials/checkbox-refinements.jsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react'
-import {Box, Checkbox, Stack} from '@chakra-ui/react'
+import {Box, Checkbox, Stack} from '@salesforce/retail-react-app/app/components/shared/ui'
 import PropTypes from 'prop-types'
 
 const CheckboxRefinements = ({filter, toggleFilter, selectedFilters}) => {

package/app/pages/product-list/partials/color-refinements.jsx

@@ -6,7 +6,15 @@
  */
 
 import React from 'react'
-import {Box, SimpleGrid, HStack, Text, Button, Center, useMultiStyleConfig} from '@chakra-ui/react'
+import {
+    Box,
+    SimpleGrid,
+    HStack,
+    Text,
+    Button,
+    Center,
+    useMultiStyleConfig
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import PropTypes from 'prop-types'
 import {cssColorGroups} from '@salesforce/retail-react-app/app/constants'
 

package/app/pages/product-list/partials/empty-results.jsx

@@ -6,7 +6,13 @@
  */
 
 import React, {Fragment} from 'react'
-import {Button, Text, Flex, Stack, Link} from '@chakra-ui/react'
+import {
+    Button,
+    Text,
+    Flex,
+    Stack,
+    Link
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import PropTypes from 'prop-types'
 import {Link as RouteLink} from 'react-router-dom'
 import {defineMessage, FormattedMessage, useIntl} from 'react-intl'

package/app/pages/product-list/partials/link-refinements.jsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react'
-import {Stack, Text} from '@chakra-ui/react'
+import {Stack, Text} from '@salesforce/retail-react-app/app/components/shared/ui'
 import PropTypes from 'prop-types'
 import Link from '@salesforce/retail-react-app/app/components/link'
 

package/app/pages/product-list/partials/page-header.jsx

@@ -8,7 +8,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 // Components
-import {Box, Heading, Flex, Text, Fade} from '@chakra-ui/react'
+import {Box, Heading, Flex, Text, Fade} from '@salesforce/retail-react-app/app/components/shared/ui'
 
 // Project Components
 import Breadcrumb from '@salesforce/retail-react-app/app/components/breadcrumb'

package/app/pages/product-list/partials/radio-refinements.jsx

@@ -6,7 +6,13 @@
  */
 
 import React from 'react'
-import {Box, Text, Radio, RadioGroup, Stack} from '@chakra-ui/react'
+import {
+    Box,
+    Text,
+    Radio,
+    RadioGroup,
+    Stack
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import PropTypes from 'prop-types'
 
 const RadioRefinements = ({filter, toggleFilter, selectedFilters}) => {

package/app/pages/product-list/partials/refinements.jsx

@@ -15,7 +15,7 @@ import {
     AccordionButton,
     AccordionPanel,
     AccordionIcon
-} from '@chakra-ui/react'
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import PropTypes from 'prop-types'
 import ColorRefinements from '@salesforce/retail-react-app/app/pages/product-list/partials/color-refinements'
 import SizeRefinements from '@salesforce/retail-react-app/app/pages/product-list/partials/size-refinements'

package/app/pages/product-list/partials/selected-refinements.jsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react'
-import {Box, Button, Wrap, WrapItem} from '@chakra-ui/react'
+import {Box, Button, Wrap, WrapItem} from '@salesforce/retail-react-app/app/components/shared/ui'
 import PropTypes from 'prop-types'
 import {CloseIcon} from '@salesforce/retail-react-app/app/components/icons'
 

package/app/pages/product-list/partials/size-refinements.jsx

@@ -6,7 +6,12 @@
  */
 
 import React from 'react'
-import {SimpleGrid, Button, Center, useMultiStyleConfig} from '@chakra-ui/react'
+import {
+    SimpleGrid,
+    Button,
+    Center,
+    useMultiStyleConfig
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import PropTypes from 'prop-types'
 
 const SizeRefinements = ({filter, toggleFilter, selectedFilters}) => {

package/app/pages/registration/index.jsx

@@ -8,7 +8,7 @@
 import React, {useEffect} from 'react'
 import PropTypes from 'prop-types'
 import {useIntl} from 'react-intl'
-import {Box, Container} from '@chakra-ui/react'
+import {Box, Container} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {AuthHelpers, useAuthHelper, useCustomerType} from '@salesforce/commerce-sdk-react'
 import {useForm} from 'react-hook-form'
 import {useLocation} from 'react-router-dom'

package/app/pages/reset-password/index.jsx

@@ -8,7 +8,13 @@
 import React, {useState, useEffect} from 'react'
 import PropTypes from 'prop-types'
 import {FormattedMessage} from 'react-intl'
-import {Box, Button, Container, Stack, Text} from '@chakra-ui/react'
+import {
+    Box,
+    Button,
+    Container,
+    Stack,
+    Text
+} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {useForm} from 'react-hook-form'
 import {
     useShopperCustomersMutation,

package/app/routes.jsx

@@ -17,7 +17,7 @@ import loadable from '@loadable/component'
 import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
 
 // Components
-import {Skeleton} from '@chakra-ui/react'
+import {Skeleton} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {configureRoutes} from '@salesforce/retail-react-app/app/utils/routes-utils'
 
 const fallback = <Skeleton height="75vh" width="100%" />

package/app/ssr.js

@@ -4,14 +4,14 @@
  * 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
  */
-/* eslint-disable @typescript-eslint/no-var-requires */
+
 'use strict'
 
-const path = require('path')
-const {getRuntime} = require('@salesforce/pwa-kit-runtime/ssr/server/express')
-const {isRemote} = require('@salesforce/pwa-kit-runtime/utils/ssr-server')
-const {getConfig} = require('@salesforce/pwa-kit-runtime/utils/ssr-config')
-const helmet = require('helmet')
+import path from 'path'
+import {getRuntime} from '@salesforce/pwa-kit-runtime/ssr/server/express'
+import {isRemote} from '@salesforce/pwa-kit-runtime/utils/ssr-server'
+import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
+import helmet from 'helmet'
 
 const options = {
     // The build directory (an absolute path)
@@ -27,7 +27,8 @@ const options = {
     port: 3000,
 
     // The protocol on which the development Express app listens.
-    // Note that http://localhost is treated as a secure context for development.
+    // Note that http://localhost is treated as a secure context for development,
+    // except by Safari.
     protocol: 'http'
 }
 
@@ -67,4 +68,4 @@ const {handler} = runtime.createHandler(options, (app) => {
 })
 // SSR requires that we export a single handler function called 'get', that
 // supports AWS use of the server that we created above.
-exports.get = handler
+export const get = handler

package/app/theme/components/project/_app.js

@@ -4,7 +4,7 @@
  * 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 theme from '@chakra-ui/theme'
+import theme from '@salesforce/retail-react-app/app/components/shared/theme'
 
 export default {
     baseStyle: {

package/app/theme/index.js

@@ -4,7 +4,7 @@
  * 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 {extendTheme} from '@chakra-ui/react'
+import {extendTheme} from '@salesforce/retail-react-app/app/components/shared/ui'
 
 // Foundational style overrides
 import styles from '@salesforce/retail-react-app/app/theme/foundations/styles'

package/app/utils/responsive-image.js

@@ -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 theme from '@chakra-ui/theme'
+import theme from '@salesforce/retail-react-app/app/components/shared/theme'
 
 /**
  * @param {Object} breakpoints

package/app/utils/test-utils.js

@@ -7,7 +7,7 @@
 import React, {useEffect, useRef} from 'react'
 import {render} from '@testing-library/react'
 import {BrowserRouter as Router} from 'react-router-dom'
-import {ChakraProvider} from '@chakra-ui/react'
+import {ChakraProvider} from '@salesforce/retail-react-app/app/components/shared/ui'
 import PropTypes from 'prop-types'
 
 import theme from '@salesforce/retail-react-app/app/theme'

package/config/default.js

@@ -49,7 +49,7 @@ module.exports = {
         '**/*.json'
     ],
     ssrParameters: {
-        ssrFunctionNodeVersion: '16.x',
+        ssrFunctionNodeVersion: '18.x',
         proxyConfigs: [
             {
                 host: 'kv7kzm78.api.commercecloud.salesforce.com',