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

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

@@ -0,0 +1,144 @@
+/*
+ * 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 {
+    Text,
+    Stack,
+    Divider,
+    Accordion,
+    AccordionItem,
+    AccordionButton,
+    AccordionPanel,
+    AccordionIcon
+} from '@chakra-ui/react'
+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'
+import RadioRefinements from '@salesforce/retail-react-app/app/pages/product-list/partials/radio-refinements'
+import CheckboxRefinements from '@salesforce/retail-react-app/app/pages/product-list/partials/checkbox-refinements'
+import LinkRefinements from '@salesforce/retail-react-app/app/pages/product-list/partials/link-refinements'
+import {isServer} from '@salesforce/retail-react-app/app/utils/utils'
+import {FILTER_ACCORDION_SATE} from '@salesforce/retail-react-app/app/constants'
+
+const componentMap = {
+    cgid: LinkRefinements,
+    c_refinementColor: ColorRefinements,
+    c_size: SizeRefinements,
+    price: RadioRefinements
+}
+
+const Refinements = ({filters, toggleFilter, selectedFilters, isLoading}) => {
+    // Getting the indices of filters to open accordions by default
+    let filtersIndexes = filters?.map((filter, idx) => idx)
+
+    // Use saved state for accordions
+    if (!isServer) {
+        const savedExpandedAccordionIndexes =
+            window.localStorage.getItem(FILTER_ACCORDION_SATE) &&
+            JSON.parse(window.localStorage.getItem(FILTER_ACCORDION_SATE))
+
+        if (savedExpandedAccordionIndexes) {
+            filtersIndexes = filters
+                ?.map((filter, index) => {
+                    if (savedExpandedAccordionIndexes.includes(filter.attributeId)) {
+                        return index
+                    }
+                })
+                .filter((index) => index !== undefined)
+        }
+    }
+
+    // Handle saving acccordion state
+    const updateAccordionState = (expandedIndex) => {
+        const filterState = filters
+            ?.filter((filter, index) => expandedIndex.includes(index))
+            .map((filter) => filter.attributeId)
+        window.localStorage.setItem(FILTER_ACCORDION_SATE, JSON.stringify(filterState))
+    }
+
+    return (
+        <Stack spacing={8}>
+            {/* Wait to have filters before rendering the Accordion to allow the deafult indexes to be accurate */}
+            {filtersIndexes && (
+                <Accordion
+                    pointerEvents={isLoading ? 'none' : 'auto'}
+                    onChange={updateAccordionState}
+                    opacity={isLoading ? 0.2 : 1}
+                    allowMultiple={true}
+                    defaultIndex={filtersIndexes}
+                    reduceMotion={true}
+                >
+                    {filters?.map((filter, idx) => {
+                        // Render the appropriate component for the refinement type, fallback to checkboxes
+                        const Values = componentMap[filter.attributeId] || CheckboxRefinements
+                        let selectedFiltersArray = selectedFilters?.[filter.attributeId] ?? []
+
+                        // Catch any non-array values and wrap them in an array
+                        if (!Array.isArray(selectedFiltersArray)) {
+                            selectedFiltersArray = [selectedFiltersArray]
+                        }
+
+                        if (filter.values) {
+                            return (
+                                <Stack key={filter.attributeId} divider={<Divider />}>
+                                    <AccordionItem
+                                        paddingTop={idx !== 0 ? 6 : 0}
+                                        borderBottom={
+                                            idx === filters.length - 1
+                                                ? '1px solid gray.200'
+                                                : 'none'
+                                        }
+                                        paddingBottom={6}
+                                        borderTop={idx === 0 && 'none'}
+                                    >
+                                        {({isExpanded}) => (
+                                            <>
+                                                <AccordionButton
+                                                    paddingTop={0}
+                                                    paddingBottom={isExpanded ? 2 : 0}
+                                                >
+                                                    <Text
+                                                        flex="1"
+                                                        textAlign="left"
+                                                        fontSize="md"
+                                                        fontWeight={600}
+                                                    >
+                                                        {filter.label}
+                                                    </Text>
+                                                    <AccordionIcon />
+                                                </AccordionButton>
+                                                <AccordionPanel paddingLeft={0}>
+                                                    <Values
+                                                        selectedFilters={selectedFiltersArray}
+                                                        filter={filter}
+                                                        toggleFilter={toggleFilter}
+                                                    />
+                                                </AccordionPanel>
+                                            </>
+                                        )}
+                                    </AccordionItem>
+                                </Stack>
+                            )
+                        } else {
+                            return null
+                        }
+                    })}
+                </Accordion>
+            )}
+        </Stack>
+    )
+}
+
+Refinements.propTypes = {
+    filters: PropTypes.array,
+    toggleFilter: PropTypes.func,
+    selectedFilters: PropTypes.object,
+    isLoading: PropTypes.bool
+}
+
+export default Refinements

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

@@ -0,0 +1,100 @@
+/*
+ * 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 {Box, Button, Wrap, WrapItem} from '@chakra-ui/react'
+import PropTypes from 'prop-types'
+import {CloseIcon} from '@salesforce/retail-react-app/app/components/icons'
+
+import {FormattedMessage} from 'react-intl'
+
+const SelectedRefinements = ({toggleFilter, selectedFilterValues, filters, handleReset}) => {
+    const priceFilterValues = filters?.find((filter) => filter.attributeId === 'price')
+
+    let selectedFilters = []
+    for (const key in selectedFilterValues) {
+        const filters = selectedFilterValues[key].split('|')
+        filters?.forEach((filter) => {
+            const selected = {
+                uiLabel:
+                    key === 'price'
+                        ? priceFilterValues?.values?.find(
+                              (priceFilter) => priceFilter.value === filter
+                          )?.label
+                        : filter,
+                value: key,
+                apiLabel: filter
+            }
+
+            if (selected.value !== 'htype' && selected.value !== 'cgid') {
+                selectedFilters.push(selected)
+            }
+        })
+    }
+
+    return (
+        <Wrap
+            direction="row"
+            align="center"
+            display="flex"
+            flexWrap="wrap"
+            data-testid="sf-selected-refinements"
+        >
+            {selectedFilters?.map((filter, idx) => {
+                return (
+                    <WrapItem key={idx}>
+                        <Box marginLeft={0} marginRight={1}>
+                            <Button
+                                marginTop={1}
+                                padding={5}
+                                color="black"
+                                colorScheme="gray"
+                                size="sm"
+                                iconSpacing={1}
+                                rightIcon={
+                                    <CloseIcon color="black" boxSize={4} mr="-7px" mb="-6px" />
+                                }
+                                onClick={() =>
+                                    toggleFilter({value: filter.apiLabel}, filter.value, true)
+                                }
+                            >
+                                {filter.uiLabel}
+                            </Button>
+                        </Box>
+                    </WrapItem>
+                )
+            })}
+
+            {selectedFilters?.length > 0 && (
+                <WrapItem>
+                    <Box>
+                        <Button
+                            padding={{sm: 0, base: 2}}
+                            variant="link"
+                            size="sm"
+                            onClick={handleReset}
+                        >
+                            <FormattedMessage
+                                defaultMessage="Clear All"
+                                id="selected_refinements.action.clear_all"
+                            />
+                        </Button>
+                    </Box>
+                </WrapItem>
+            )}
+        </Wrap>
+    )
+}
+
+SelectedRefinements.propTypes = {
+    filters: PropTypes.array,
+    selectedFilterValues: PropTypes.object,
+    toggleFilter: PropTypes.func,
+    handleReset: PropTypes.func
+}
+
+export default SelectedRefinements

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

@@ -0,0 +1,55 @@
+/*
+ * 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 {SimpleGrid, Button, Center, useMultiStyleConfig} from '@chakra-ui/react'
+import PropTypes from 'prop-types'
+
+const SizeRefinements = ({filter, toggleFilter, selectedFilters}) => {
+    const styles = useMultiStyleConfig('SwatchGroup', {
+        variant: 'square',
+        disabled: false
+    })
+
+    return (
+        <SimpleGrid templateColumns="repeat(auto-fit, 44px)" spacing={4} mt={1}>
+            {filter.values
+                ?.filter((refinementValue) => refinementValue.hitCount > 0)
+                .map((value, idx) => {
+                    // Note the loose comparison, for "string == number" checks.
+                    const isSelected = selectedFilters.some(
+                        (filterValue) => filterValue == value.value
+                    )
+
+                    return (
+                        <Button
+                            key={idx}
+                            {...styles.swatch}
+                            borderColor={isSelected ? 'black' : 'gray.200'}
+                            backgroundColor={isSelected ? 'black' : 'white'}
+                            color={isSelected ? 'white' : 'gray.900'}
+                            onClick={() => toggleFilter(value, filter.attributeId, isSelected)}
+                            aria-checked={isSelected}
+                            variant="outline"
+                            marginBottom={0}
+                            marginRight={0}
+                        >
+                            <Center {...styles.swatchButton}>{value.label}</Center>
+                        </Button>
+                    )
+                })}
+        </SimpleGrid>
+    )
+}
+
+SizeRefinements.propTypes = {
+    filter: PropTypes.object,
+    selectedFilters: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.string]),
+    toggleFilter: PropTypes.func
+}
+
+export default SizeRefinements

package/app/pages/registration/index.jsx

@@ -0,0 +1,87 @@
+/*
+ * 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} from 'react-intl'
+import {Box, Container} from '@chakra-ui/react'
+import {AuthHelpers, useAuthHelper, useCustomerType} from '@salesforce/commerce-sdk-react'
+import {useForm} from 'react-hook-form'
+import {useLocation} from 'react-router-dom'
+import Seo from '@salesforce/retail-react-app/app/components/seo'
+import RegisterForm from '@salesforce/retail-react-app/app/components/register'
+import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'
+import useEinstein from '@salesforce/retail-react-app/app/hooks/use-einstein'
+import {API_ERROR_MESSAGE} from '@salesforce/retail-react-app/app/constants'
+
+const Registration = () => {
+    const {formatMessage} = useIntl()
+    const navigate = useNavigation()
+    const {isRegistered} = useCustomerType()
+    const form = useForm()
+    const einstein = useEinstein()
+    const {pathname} = useLocation()
+    const register = useAuthHelper(AuthHelpers.Register)
+
+    const submitForm = async (data) => {
+        const body = {
+            customer: {
+                firstName: data.firstName,
+                lastName: data.lastName,
+                email: data.email,
+                login: data.email
+            },
+            password: data.password
+        }
+
+        try {
+            await register.mutateAsync(body, {})
+        } catch (e) {
+            form.setError('global', {type: 'manual', message: formatMessage(API_ERROR_MESSAGE)})
+        }
+    }
+
+    useEffect(() => {
+        if (isRegistered) {
+            navigate('/account')
+        }
+    }, [isRegistered])
+
+    /**************** Einstein ****************/
+    useEffect(() => {
+        einstein.sendViewPage(pathname)
+    }, [])
+
+    return (
+        <Box data-testid="registration-page" bg="gray.50" py={[8, 16]}>
+            <Seo title="Registration" description="Customer sign up" />
+            <Container
+                paddingTop={16}
+                width={['100%', '407px']}
+                bg="white"
+                paddingBottom={14}
+                marginTop={8}
+                marginBottom={8}
+                borderRadius="base"
+            >
+                <RegisterForm
+                    submitForm={submitForm}
+                    form={form}
+                    clickSignIn={() => navigate('/login')}
+                />
+            </Container>
+        </Box>
+    )
+}
+
+Registration.getTemplateName = () => 'registration'
+
+Registration.propTypes = {
+    match: PropTypes.object
+}
+
+export default Registration

package/app/pages/registration/index.test.jsx

@@ -0,0 +1,132 @@
+/*
+ * 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, within, waitFor} from '@testing-library/react'
+import {
+    guestToken,
+    registerUserToken,
+    renderWithProviders
+} from '@salesforce/retail-react-app/app/utils/test-utils'
+import Registration from '.'
+import {BrowserRouter as Router, Route} from 'react-router-dom'
+import Account from '@salesforce/retail-react-app/app/pages/account'
+import mockConfig from '@salesforce/retail-react-app/config/mocks/default'
+import {rest} from 'msw'
+import {mockedRegisteredCustomer} from '@salesforce/retail-react-app/app/mocks/mock-data'
+
+const MockedComponent = () => {
+    const match = {
+        params: {pageName: 'profile'}
+    }
+    return (
+        <Router>
+            <Registration />
+            <Route path={'/uk/en-GB/account'}>
+                <Account match={match} />
+            </Route>
+        </Router>
+    )
+}
+const mockMergedBasket = {
+    basketId: 'a10ff320829cb0eef93ca5310a',
+    currency: 'USD',
+    customerInfo: {
+        customerId: 'registeredCustomerId',
+        email: 'customer@test.com'
+    }
+}
+
+// Set up and clean up
+beforeEach(() => {
+    global.server.use(
+        rest.post('*/customers', (req, res, ctx) => {
+            return res(ctx.delay(0), ctx.status(200), ctx.json(mockedRegisteredCustomer))
+        }),
+
+        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))
+        })
+    )
+})
+afterEach(() => {
+    jest.resetModules()
+    localStorage.clear()
+})
+
+test('Allows customer to create an account', async () => {
+    // render our test component
+    const {user} = renderWithProviders(<MockedComponent />, {
+        wrapperProps: {
+            siteAlias: 'uk',
+            locale: {id: 'en-GB'},
+            appConfig: mockConfig.app,
+            bypassAuth: false
+        }
+    })
+
+    const form = await screen.findByTestId('sf-auth-modal-form-register')
+    expect(form).toBeInTheDocument()
+
+    // fill out form and submit
+    const withinForm = within(form)
+
+    await user.type(withinForm.getByLabelText('First Name'), 'Tester')
+    await user.type(withinForm.getByLabelText('Last Name'), 'Tester')
+    await user.type(withinForm.getByPlaceholderText(/you@email.com/i), 'customer@test.com')
+    await user.type(withinForm.getAllByLabelText(/password/i)[0], 'Password!1')
+    screen.logTestingPlaygroundURL()
+
+    // login with credentials
+    global.server.use(
+        rest.post('*/oauth2/token', (req, res, ctx) => {
+            return res(
+                ctx.delay(0),
+                ctx.json({
+                    customer_id: 'customerid_1',
+                    access_token: registerUserToken,
+                    refresh_token: 'testrefeshtoken_1',
+                    usid: 'testusid_1',
+                    enc_user_id: 'testEncUserId_1',
+                    id_token: 'testIdToken_1'
+                })
+            )
+        }),
+        rest.post('*/oauth2/login', (req, res, ctx) => {
+            return res(ctx.delay(0), ctx.status(200), ctx.json(mockedRegisteredCustomer))
+        }),
+        rest.get('*/customers/:customerId', (req, res, ctx) => {
+            return res(ctx.delay(0), ctx.status(200), ctx.json(mockedRegisteredCustomer))
+        })
+    )
+
+    await user.click(withinForm.getByText(/create account/i))
+
+    // wait for success state to appear
+    const myAccount = await screen.findAllByText(/My Account/)
+
+    await waitFor(
+        () => {
+            expect(myAccount).toHaveLength(2)
+        },
+        {
+            timeout: 5000
+        }
+    )
+})

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

@@ -0,0 +1,112 @@
+/*
+ * 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 {FormattedMessage} from 'react-intl'
+import {Box, Button, Container, Stack, Text} from '@chakra-ui/react'
+import {useForm} from 'react-hook-form'
+import {
+    useShopperCustomersMutation,
+    ShopperCustomersMutations
+} from '@salesforce/commerce-sdk-react'
+import Seo from '@salesforce/retail-react-app/app/components/seo'
+import ResetPasswordForm from '@salesforce/retail-react-app/app/components/reset-password'
+import {BrandLogo} from '@salesforce/retail-react-app/app/components/icons'
+import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'
+import useEinstein from '@salesforce/retail-react-app/app/hooks/use-einstein'
+import {useLocation} from 'react-router-dom'
+
+const ResetPassword = () => {
+    const form = useForm()
+    const navigate = useNavigation()
+    const [submittedEmail, setSubmittedEmail] = useState('')
+    const [showSubmittedSuccess, setShowSubmittedSuccess] = useState(false)
+    const einstein = useEinstein()
+    const {pathname} = useLocation()
+    const getResetPasswordToken = useShopperCustomersMutation(
+        ShopperCustomersMutations.GetResetPasswordToken
+    )
+
+    const submitForm = async ({email}) => {
+        const body = {
+            login: email
+        }
+        try {
+            await getResetPasswordToken.mutateAsync({body})
+            setSubmittedEmail(email)
+            setShowSubmittedSuccess(!showSubmittedSuccess)
+        } catch (error) {
+            form.setError('global', {type: 'manual', message: error.message})
+        }
+    }
+
+    /**************** Einstein ****************/
+    useEffect(() => {
+        einstein.sendViewPage(pathname)
+    }, [])
+
+    return (
+        <Box data-testid="reset-password-page" bg="gray.50" py={[8, 16]}>
+            <Seo title="Reset password" description="Reset customer password" />
+            <Container
+                paddingTop={16}
+                width={['100%', '407px']}
+                bg="white"
+                paddingBottom={14}
+                marginTop={8}
+                marginBottom={8}
+                borderRadius="base"
+            >
+                {!showSubmittedSuccess ? (
+                    <ResetPasswordForm
+                        form={form}
+                        submitForm={submitForm}
+                        clickSignIn={() => navigate('/login')}
+                    />
+                ) : (
+                    <Stack justify="center" align="center" spacing={6}>
+                        <BrandLogo width="60px" height="auto" />
+                        <Text align="center" fontSize="md">
+                            <FormattedMessage
+                                defaultMessage={'Password Reset'}
+                                id="reset_password.title.password_reset"
+                            />
+                        </Text>
+                        <Stack spacing={6} pt={4}>
+                            <Text align="center" fontSize="sm">
+                                <FormattedMessage
+                                    defaultMessage="You will receive an email at <b>{email}</b> with a link to reset your password shortly."
+                                    id="reset_password.info.receive_email_shortly"
+                                    values={{
+                                        email: submittedEmail,
+
+                                        b: (chunks) => <b>{chunks}</b>
+                                    }}
+                                />
+                            </Text>
+                            <Button onClick={() => navigate('/login')}>
+                                <FormattedMessage
+                                    defaultMessage="Back to Sign In"
+                                    id="reset_password.button.back_to_sign_in"
+                                />
+                            </Button>
+                        </Stack>
+                    </Stack>
+                )}
+            </Container>
+        </Box>
+    )
+}
+
+ResetPassword.getTemplateName = () => 'reset-password'
+
+ResetPassword.propTypes = {
+    match: PropTypes.object
+}
+
+export default ResetPassword