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

package/app/pages/home/index.jsx

@@ -0,0 +1,301 @@
+/*
+ * Copyright (c) 2022, 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
+ */
+
+import React, {useEffect} from 'react'
+import {useIntl, FormattedMessage} from 'react-intl'
+import {useLocation} from 'react-router-dom'
+
+// Components
+import {
+    Box,
+    Button,
+    SimpleGrid,
+    HStack,
+    VStack,
+    Text,
+    Flex,
+    Stack,
+    Container,
+    Link
+} from '@chakra-ui/react'
+
+// Project Components
+import Hero from '@salesforce/retail-react-app/app/components/hero'
+import Seo from '@salesforce/retail-react-app/app/components/seo'
+import Section from '@salesforce/retail-react-app/app/components/section'
+import ProductScroller from '@salesforce/retail-react-app/app/components/product-scroller'
+
+// Others
+import {getAssetUrl} from '@salesforce/pwa-kit-react-sdk/ssr/universal/utils'
+import {heroFeatures, features} from '@salesforce/retail-react-app/app/pages/home/data'
+
+//Hooks
+import useEinstein from '@salesforce/retail-react-app/app/hooks/use-einstein'
+
+// Constants
+import {
+    MAX_CACHE_AGE,
+    HOME_SHOP_PRODUCTS_CATEGORY_ID,
+    HOME_SHOP_PRODUCTS_LIMIT
+} from '@salesforce/retail-react-app/app/constants'
+import {useServerContext} from '@salesforce/pwa-kit-react-sdk/ssr/universal/hooks'
+import {useProductSearch} from '@salesforce/commerce-sdk-react'
+
+/**
+ * This is the home page for Retail React App.
+ * The page is created for demonstration purposes.
+ * The page renders SEO metadata and a few promotion
+ * categories and products, data is from local file.
+ */
+const Home = () => {
+    const intl = useIntl()
+    const einstein = useEinstein()
+    const {pathname} = useLocation()
+
+    const {res} = useServerContext()
+    if (res) {
+        res.set('Cache-Control', `max-age=${MAX_CACHE_AGE}`)
+    }
+
+    const {data: productSearchResult, isLoading} = useProductSearch({
+        parameters: {
+            refine: [`cgid=${HOME_SHOP_PRODUCTS_CATEGORY_ID}`, 'htype=master'],
+            limit: HOME_SHOP_PRODUCTS_LIMIT
+        }
+    })
+
+    /**************** Einstein ****************/
+    useEffect(() => {
+        einstein.sendViewPage(pathname)
+    }, [])
+
+    return (
+        <Box data-testid="home-page" layerStyle="page">
+            <Seo
+                title="Home Page"
+                description="Commerce Cloud Retail React App"
+                keywords="Commerce Cloud, Retail React App, React Storefront"
+            />
+
+            <Hero
+                title={intl.formatMessage({
+                    defaultMessage: 'The React PWA Starter Store for Retail',
+                    id: 'home.title.react_starter_store'
+                })}
+                img={{
+                    src: getAssetUrl('static/img/hero.png'),
+                    alt: 'npx pwa-kit-create-app'
+                }}
+                actions={
+                    <Stack spacing={{base: 4, sm: 6}} direction={{base: 'column', sm: 'row'}}>
+                        <Button
+                            as={Link}
+                            href="https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/getting-started.html"
+                            target="_blank"
+                            width={{base: 'full', md: 'inherit'}}
+                            paddingX={7}
+                            _hover={{textDecoration: 'none'}}
+                        >
+                            <FormattedMessage
+                                defaultMessage="Get started"
+                                id="home.link.get_started"
+                            />
+                        </Button>
+                    </Stack>
+                }
+            />
+
+            <Section
+                background={'gray.50'}
+                marginX="auto"
+                paddingY={{base: 8, md: 16}}
+                paddingX={{base: 4, md: 8}}
+                borderRadius="base"
+                width={{base: '100vw', md: 'inherit'}}
+                position={{base: 'relative', md: 'inherit'}}
+                left={{base: '50%', md: 'inherit'}}
+                right={{base: '50%', md: 'inherit'}}
+                marginLeft={{base: '-50vw', md: 'auto'}}
+                marginRight={{base: '-50vw', md: 'auto'}}
+            >
+                <SimpleGrid
+                    columns={{base: 1, md: 1, lg: 3}}
+                    spacingX={{base: 1, md: 4}}
+                    spacingY={{base: 4, md: 14}}
+                >
+                    {heroFeatures.map((feature, index) => {
+                        const featureMessage = feature.message
+                        return (
+                            <Box
+                                key={index}
+                                background={'white'}
+                                boxShadow={'0px 2px 2px rgba(0, 0, 0, 0.1)'}
+                                borderRadius={'4px'}
+                            >
+                                <Link target="_blank" href={feature.href}>
+                                    <HStack>
+                                        <Flex
+                                            paddingLeft={6}
+                                            height={24}
+                                            align={'center'}
+                                            justify={'center'}
+                                        >
+                                            {feature.icon}
+                                        </Flex>
+                                        <Text fontWeight="700">
+                                            {intl.formatMessage(featureMessage.title)}
+                                        </Text>
+                                    </HStack>
+                                </Link>
+                            </Box>
+                        )
+                    })}
+                </SimpleGrid>
+            </Section>
+
+            {productSearchResult && (
+                <Section
+                    padding={4}
+                    paddingTop={16}
+                    title={intl.formatMessage({
+                        defaultMessage: 'Shop Products',
+                        id: 'home.heading.shop_products'
+                    })}
+                    subtitle={intl.formatMessage(
+                        {
+                            defaultMessage:
+                                'This section contains content from the catalog. {docLink} on how to replace it.',
+                            id: 'home.description.shop_products',
+                            description:
+                                '{docLink} is a html button that links the user to https://sfdc.co/business-manager-manage-catalogs'
+                        },
+                        {
+                            docLink: (
+                                <Link
+                                    target="_blank"
+                                    href={'https://sfdc.co/business-manager-manage-catalogs'}
+                                    textDecoration={'none'}
+                                    position={'relative'}
+                                    _after={{
+                                        position: 'absolute',
+                                        content: `""`,
+                                        height: '2px',
+                                        bottom: '-2px',
+                                        margin: '0 auto',
+                                        left: 0,
+                                        right: 0,
+                                        background: 'gray.700'
+                                    }}
+                                    _hover={{textDecoration: 'none'}}
+                                >
+                                    {intl.formatMessage({
+                                        defaultMessage: 'Read docs',
+                                        id: 'home.link.read_docs'
+                                    })}
+                                </Link>
+                            )
+                        }
+                    )}
+                >
+                    <Stack pt={8} spacing={16}>
+                        <ProductScroller
+                            products={productSearchResult?.hits}
+                            isLoading={isLoading}
+                        />
+                    </Stack>
+                </Section>
+            )}
+
+            <Section
+                padding={4}
+                paddingTop={32}
+                title={intl.formatMessage({
+                    defaultMessage: 'Features',
+                    id: 'home.heading.features'
+                })}
+                subtitle={intl.formatMessage({
+                    defaultMessage:
+                        'Out-of-the-box features so that you focus only on adding enhancements.',
+                    id: 'home.description.features'
+                })}
+            >
+                <Container maxW={'6xl'} marginTop={10}>
+                    <SimpleGrid columns={{base: 1, md: 2, lg: 3}} spacing={10}>
+                        {features.map((feature, index) => {
+                            const featureMessage = feature.message
+                            return (
+                                <HStack key={index} align={'top'}>
+                                    <VStack align={'start'}>
+                                        <Flex
+                                            width={16}
+                                            height={16}
+                                            align={'center'}
+                                            justify={'left'}
+                                            color={'gray.900'}
+                                            paddingX={2}
+                                        >
+                                            {feature.icon}
+                                        </Flex>
+                                        <Text color={'black'} fontWeight={700} fontSize={20}>
+                                            {intl.formatMessage(featureMessage.title)}
+                                        </Text>
+                                        <Text color={'black'}>
+                                            {intl.formatMessage(featureMessage.text)}
+                                        </Text>
+                                    </VStack>
+                                </HStack>
+                            )
+                        })}
+                    </SimpleGrid>
+                </Container>
+            </Section>
+
+            <Section
+                padding={4}
+                paddingTop={32}
+                title={intl.formatMessage({
+                    defaultMessage: "We're here to help",
+                    id: 'home.heading.here_to_help'
+                })}
+                subtitle={
+                    <>
+                        <>
+                            {intl.formatMessage({
+                                defaultMessage: 'Contact our support staff.',
+                                id: 'home.description.here_to_help'
+                            })}
+                        </>
+                        <br />
+                        <>
+                            {intl.formatMessage({
+                                defaultMessage: 'They will get you to the right place.',
+                                id: 'home.description.here_to_help_line_2'
+                            })}
+                        </>
+                    </>
+                }
+                actions={
+                    <Button
+                        as={Link}
+                        href="https://help.salesforce.com/s/?language=en_US"
+                        target="_blank"
+                        width={'auto'}
+                        paddingX={7}
+                        _hover={{textDecoration: 'none'}}
+                    >
+                        <FormattedMessage defaultMessage="Contact Us" id="home.link.contact_us" />
+                    </Button>
+                }
+                maxWidth={'xl'}
+            />
+        </Box>
+    )
+}
+
+Home.getTemplateName = () => 'home'
+
+export default Home

package/app/pages/home/index.test.js

@@ -0,0 +1,23 @@
+/*
+ * 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 {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+import HomePage from '@salesforce/retail-react-app/app/pages/home'
+import {rest} from 'msw'
+import {mockProductSearch} from '@salesforce/retail-react-app/app/mocks/mock-data'
+
+test('Home Page renders without errors', async () => {
+    global.server.use(
+        rest.get('*/product-search', (req, res, ctx) => {
+            return res(ctx.delay(0), ctx.status(200), ctx.json(mockProductSearch))
+        })
+    )
+    const {getByTestId} = renderWithProviders(<HomePage />)
+
+    expect(getByTestId('home-page')).toBeInTheDocument()
+    expect(typeof HomePage.getTemplateName()).toBe('string')
+})

package/app/pages/login/index.jsx

@@ -0,0 +1,123 @@
+/*
+ * 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, {useEffect} from 'react'
+import PropTypes from 'prop-types'
+import {useIntl, defineMessage} from 'react-intl'
+import {Box, Container} from '@chakra-ui/react'
+import {
+    AuthHelpers,
+    useAuthHelper,
+    useCustomerBaskets,
+    useCustomerId,
+    useCustomerType,
+    useShopperBasketsMutation
+} from '@salesforce/commerce-sdk-react'
+import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'
+import Seo from '@salesforce/retail-react-app/app/components/seo'
+import {useForm} from 'react-hook-form'
+import {useLocation} from 'react-router-dom'
+import useEinstein from '@salesforce/retail-react-app/app/hooks/use-einstein'
+import LoginForm from '@salesforce/retail-react-app/app/components/login'
+import {API_ERROR_MESSAGE} from '@salesforce/retail-react-app/app/constants'
+import {usePrevious} from '@salesforce/retail-react-app/app/hooks/use-previous'
+import {isServer} from '@salesforce/retail-react-app/app/utils/utils'
+const LOGIN_ERROR_MESSAGE = defineMessage({
+    defaultMessage: 'Incorrect username or password, please try again.',
+    id: 'login_page.error.incorrect_username_or_password'
+})
+const Login = () => {
+    const {formatMessage} = useIntl()
+    const navigate = useNavigation()
+    const form = useForm()
+    const location = useLocation()
+    const einstein = useEinstein()
+    const {isRegistered, customerType} = useCustomerType()
+    const login = useAuthHelper(AuthHelpers.LoginRegisteredUserB2C)
+
+    const customerId = useCustomerId()
+    const prevAuthType = usePrevious(customerType)
+    const {data: baskets} = useCustomerBaskets(
+        {parameters: {customerId}},
+        {enabled: !!customerId && !isServer, keepPreviousData: true}
+    )
+    const mergeBasket = useShopperBasketsMutation('mergeBasket')
+
+    const submitForm = async (data) => {
+        try {
+            await login.mutateAsync({username: data.email, password: data.password})
+            const hasBasketItem = baskets?.baskets?.[0]?.productItems?.length > 0
+            // we only want to merge basket when the user is logged in as a recurring user
+            // only recurring users trigger the login mutation, new user triggers register mutation
+            // this logic needs to stay in this block because this is the only place that tells if a user is a recurring user
+            // if you change logic here, also change it in login page
+            const shouldMergeBasket = hasBasketItem && prevAuthType === 'guest'
+            if (shouldMergeBasket) {
+                mergeBasket.mutate({
+                    headers: {
+                        // This is not required since the request has no body
+                        // but CommerceAPI throws a '419 - Unsupported Media Type' error if this header is removed.
+                        'Content-Type': 'application/json'
+                    },
+                    parameters: {
+                        createDestinationBasket: true
+                    }
+                })
+            }
+        } catch (error) {
+            const message = /Unauthorized/i.test(error.message)
+                ? formatMessage(LOGIN_ERROR_MESSAGE)
+                : formatMessage(API_ERROR_MESSAGE)
+            form.setError('global', {type: 'manual', message})
+        }
+    }
+
+    // If customer is registered push to account page
+    useEffect(() => {
+        if (isRegistered) {
+            if (location?.state?.directedFrom) {
+                navigate(location.state.directedFrom)
+            } else {
+                navigate('/account')
+            }
+        }
+    }, [isRegistered])
+
+    /**************** Einstein ****************/
+    useEffect(() => {
+        einstein.sendViewPage(location.pathname)
+    }, [])
+    return (
+        <Box data-testid="login-page" bg="gray.50" py={[8, 16]}>
+            <Seo title="Sign in" description="Customer sign in" />
+            <Container
+                paddingTop={16}
+                width={['100%', '407px']}
+                bg="white"
+                paddingBottom={14}
+                marginTop={8}
+                marginBottom={8}
+                borderRadius="base"
+            >
+                <LoginForm
+                    form={form}
+                    submitForm={submitForm}
+                    clickCreateAccount={() => navigate('/registration')}
+                    clickForgotPassword={() => navigate('/reset-password')}
+                />
+            </Container>
+        </Box>
+    )
+}
+
+Login.getTemplateName = () => 'login'
+
+Login.propTypes = {
+    match: PropTypes.object
+}
+
+export default Login

package/app/pages/login/index.test.js

@@ -0,0 +1,229 @@
+/*
+ * 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, waitFor} from '@testing-library/react'
+import {rest} from 'msw'
+import {
+    renderWithProviders,
+    createPathWithDefaults,
+    guestToken
+} from '@salesforce/retail-react-app/app/utils/test-utils'
+import Login from '.'
+import {BrowserRouter as Router, Route} from 'react-router-dom'
+import Account from '@salesforce/retail-react-app/app/pages/account'
+import Registration from '@salesforce/retail-react-app/app/pages/registration'
+import ResetPassword from '@salesforce/retail-react-app/app/pages/reset-password'
+import mockConfig from '@salesforce/retail-react-app/config/mocks/default'
+import {mockedRegisteredCustomer} from '@salesforce/retail-react-app/app/mocks/mock-data'
+const mockMergedBasket = {
+    basketId: 'a10ff320829cb0eef93ca5310a',
+    currency: 'USD',
+    customerInfo: {
+        customerId: 'registeredCustomerId',
+        email: 'customer@test.com'
+    }
+}
+
+const MockedComponent = () => {
+    const match = {
+        params: {pageName: 'profile'}
+    }
+    return (
+        <Router>
+            <Login />
+            <Route path={createPathWithDefaults('/registration')}>
+                <Registration />
+            </Route>
+            <Route path={createPathWithDefaults('/reset-password')}>
+                <ResetPassword />
+            </Route>
+            <Route path={createPathWithDefaults('/account')}>
+                <Account match={match} />
+            </Route>
+        </Router>
+    )
+}
+
+// Set up and clean up
+beforeEach(() => {
+    jest.resetModules()
+    global.server.use(
+        rest.post('*/customers', (req, res, ctx) => {
+            return res(ctx.delay(0), ctx.status(200), ctx.json(mockedRegisteredCustomer))
+        }),
+        rest.get('*/customers/:customerId', (req, res, ctx) => {
+            const {customerId} = req.params
+            if (customerId === 'customerId') {
+                return res(
+                    ctx.delay(0),
+                    ctx.status(200),
+                    ctx.json({
+                        authType: 'guest',
+                        customerId: 'customerid'
+                    })
+                )
+            }
+            return res(ctx.delay(0), ctx.status(200), ctx.json(mockedRegisteredCustomer))
+        })
+    )
+})
+afterEach(() => {
+    jest.resetModules()
+    localStorage.clear()
+})
+
+describe('Logging in tests', function () {
+    beforeEach(() => {
+        global.server.use(
+            rest.post('*/oauth2/token', (req, res, ctx) =>
+                res(
+                    ctx.delay(0),
+                    ctx.json({
+                        customer_id: 'customerid',
+                        access_token: guestToken,
+                        refresh_token: 'testrefeshtoken',
+                        usid: 'testusid',
+                        enc_user_id: 'testEncUserId',
+                        id_token: 'testIdToken'
+                    })
+                )
+            ),
+            rest.post('*/baskets/actions/merge', (req, res, ctx) => {
+                return res(ctx.delay(0), ctx.json(mockMergedBasket))
+            })
+        )
+    })
+    test('Allows customer to sign in to their account', async () => {
+        const {user} = renderWithProviders(<MockedComponent />, {
+            wrapperProps: {
+                siteAlias: 'uk',
+                locale: {id: 'en-GB'},
+                appConfig: mockConfig.app,
+                bypassAuth: false
+            }
+        })
+
+        // enter credentials and submit
+        await user.type(screen.getByLabelText('Email'), 'customer@test.com')
+        await user.type(screen.getByLabelText('Password'), 'Password!1')
+        // login with credentials
+        global.server.use(
+            rest.post('*/oauth2/token', (req, res, ctx) =>
+                res(
+                    ctx.delay(0),
+                    ctx.json({
+                        customer_id: 'customerid_1',
+                        access_token:
+                            'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdXQiOiJHVUlEIiwic2NwIjoic2ZjYy5zaG9wcGVyLW15YWNjb3VudC5iYXNrZXRzIHNmY2Muc2hvcHBlci1teWFjY291bnQuYWRkcmVzc2VzIHNmY2Muc2hvcHBlci1wcm9kdWN0cyBzZmNjLnNob3BwZXItZGlzY292ZXJ5LXNlYXJjaCBzZmNjLnNob3BwZXItbXlhY2NvdW50LnJ3IHNmY2Muc2hvcHBlci1teWFjY291bnQucGF5bWVudGluc3RydW1lbnRzIHNmY2Muc2hvcHBlci1jdXN0b21lcnMubG9naW4gc2ZjYy5zaG9wcGVyLWV4cGVyaWVuY2Ugc2ZjYy5zaG9wcGVyLW15YWNjb3VudC5vcmRlcnMgc2ZjYy5zaG9wcGVyLWN1c3RvbWVycy5yZWdpc3RlciBzZmNjLnNob3BwZXItYmFza2V0cy1vcmRlcnMgc2ZjYy5zaG9wcGVyLW15YWNjb3VudC5hZGRyZXNzZXMucncgc2ZjYy5zaG9wcGVyLW15YWNjb3VudC5wcm9kdWN0bGlzdHMucncgc2ZjYy5zaG9wcGVyLXByb2R1Y3RsaXN0cyBzZmNjLnNob3BwZXItcHJvbW90aW9ucyBzZmNjLnNob3BwZXItYmFza2V0cy1vcmRlcnMucncgc2ZjYy5zaG9wcGVyLW15YWNjb3VudC5wYXltZW50aW5zdHJ1bWVudHMucncgc2ZjYy5zaG9wcGVyLWdpZnQtY2VydGlmaWNhdGVzIHNmY2Muc2hvcHBlci1wcm9kdWN0LXNlYXJjaCBzZmNjLnNob3BwZXItbXlhY2NvdW50LnByb2R1Y3RsaXN0cyBzZmNjLnNob3BwZXItY2F0ZWdvcmllcyBzZmNjLnNob3BwZXItbXlhY2NvdW50Iiwic3ViIjoiY2Mtc2xhczo6enpyZl8wMDE6OnNjaWQ6YzljNDViZmQtMGVkMy00YWEyLTk5NzEtNDBmODg5NjJiODM2Ojp1c2lkOjhlODgzOTczLTY4ZWItNDFmZS1hM2M1LTc1NjIzMjY1MmZmNSIsImN0eCI6InNsYXMiLCJpc3MiOiJzbGFzL3Byb2QvenpyZl8wMDEiLCJpc3QiOjEsImF1ZCI6ImNvbW1lcmNlY2xvdWQvcHJvZC96enJmXzAwMSIsIm5iZiI6MTY3ODgzNDI3MSwic3R5IjoiVXNlciIsImlzYiI6InVpZG86ZWNvbTo6dXBuOmtldjVAdGVzdC5jb206OnVpZG46a2V2aW4gaGU6OmdjaWQ6YWJtZXMybWJrM2xYa1JsSEZKd0dZWWt1eEo6OnJjaWQ6YWJVTXNhdnBEOVk2alcwMGRpMlNqeEdDTVU6OmNoaWQ6UmVmQXJjaEdsb2JhbCIsImV4cCI6MjY3ODgzNjEwMSwiaWF0IjoxNjc4ODM0MzAxLCJqdGkiOiJDMkM0ODU2MjAxODYwLTE4OTA2Nzg5MDM0ODA1ODMyNTcwNjY2NTQyIn0._tUrxeXdFYPj6ZoY-GILFRd3-aD1RGPkZX6TqHeS494',
+                        refresh_token: 'testrefeshtoken_1',
+                        usid: 'testusid_1',
+                        enc_user_id: 'testEncUserId_1',
+                        id_token: 'testIdToken_1'
+                    })
+                )
+            )
+        )
+
+        await user.click(screen.getByText(/sign in/i))
+        await waitFor(() => {
+            expect(window.location.pathname).toBe('/uk/en-GB/account')
+            expect(screen.getByText(/My Profile/i)).toBeInTheDocument()
+        })
+    })
+})
+
+describe('Error while logging in', function () {
+    beforeEach(() => {
+        global.server.use(
+            rest.post('*/oauth2/token', (req, res, ctx) =>
+                res(
+                    ctx.delay(0),
+                    ctx.json({
+                        customer_id: 'customerid',
+                        access_token: guestToken,
+                        refresh_token: 'testrefeshtoken',
+                        usid: 'testusid',
+                        enc_user_id: 'testEncUserId',
+                        id_token: 'testIdToken'
+                    })
+                )
+            ),
+            rest.post('*/baskets/actions/merge', (req, res, ctx) => {
+                return res(ctx.delay(0), ctx.json(mockMergedBasket))
+            })
+        )
+    })
+
+    // TODO: Fix flaky/broken test
+    // eslint-disable-next-line jest/no-disabled-tests
+    test.skip('Renders error when given incorrect log in credentials', async () => {
+        const {user} = renderWithProviders(<MockedComponent />, {
+            wrapperProps: {
+                siteAlias: 'uk',
+                locale: {id: 'en-GB'},
+                appConfig: mockConfig.app,
+                bypassAuth: false
+            }
+        })
+
+        // enter credentials and submit
+        await user.type(screen.getByLabelText('Email'), 'foo@test.com')
+        await user.type(screen.getByLabelText('Password'), 'SomeFakePassword1!')
+
+        // mock failed auth request
+        global.server.use(
+            rest.post('*/oauth2/login', (req, res, ctx) =>
+                res(ctx.delay(0), ctx.status(401), ctx.json({message: 'Unauthorized Credentials.'}))
+            ),
+            rest.post('*/customers', (req, res, ctx) => {
+                return res(ctx.delay(0), ctx.status(404), ctx.json({message: 'Not Found.'}))
+            })
+        )
+
+        await user.click(screen.getByText(/sign in/i))
+        // wait for login error alert to appear
+        expect(
+            await screen.findByText(/Incorrect username or password, please try again./i)
+        ).toBeInTheDocument()
+    })
+})
+describe('Navigate away from login page tests', function () {
+    test('should navigate to sign up page when the user clicks Create Account', async () => {
+        const {user} = renderWithProviders(<MockedComponent />, {
+            wrapperProps: {
+                siteAlias: 'uk',
+                locale: {id: 'en-GB'},
+                appConfig: mockConfig.app,
+                isGuest: true
+            }
+        })
+        await user.click(await screen.findByText(/Create Account/i))
+
+        await waitFor(async () => {
+            // wait for sign up page to appear
+            expect(await screen.findByText(/Let's get started/i)).toBeInTheDocument()
+        })
+    })
+    test('should navigate to reset password page when the user clicks Forgot Password', async () => {
+        const {user} = renderWithProviders(<MockedComponent />, {
+            wrapperProps: {
+                siteAlias: 'uk',
+                locale: {id: 'en-GB'},
+                appConfig: mockConfig.app,
+                isGuest: true
+            }
+        })
+        await user.click(screen.getByText(/forgot password/i))
+
+        // wait for sign up page to appear
+        expect(
+            await screen.findByText(
+                /Enter your email to receive instructions on how to reset your password/i
+            )
+        ).toBeInTheDocument()
+    })
+})