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

package/app/components/radio-card/index.jsx

@@ -0,0 +1,75 @@
+/*
+ * 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 {Box, useRadio, useRadioGroup} from '@chakra-ui/react'
+import {CheckIcon} from '@salesforce/retail-react-app/app/components/icons'
+
+const RadioCardGroupContext = React.createContext()
+
+export const RadioCard = (props) => {
+    const getRadioProps = React.useContext(RadioCardGroupContext)
+    const {getInputProps, getCheckboxProps} = useRadio(getRadioProps(props))
+
+    const input = getInputProps()
+    const checkbox = getCheckboxProps()
+    return (
+        <Box as="label">
+            <input {...input} />
+            <Box
+                {...checkbox}
+                aria-hidden={false}
+                position="relative"
+                cursor="pointer"
+                border="1px solid"
+                borderColor="gray.200"
+                borderRadius="base"
+                height="full"
+                _checked={{
+                    borderColor: 'blue.600'
+                }}
+                _focus={{
+                    boxShadow: 'outline'
+                }}
+                px={4}
+                py={4}
+            >
+                {input.checked && (
+                    <Box
+                        position="absolute"
+                        top={0}
+                        right={0}
+                        w={0}
+                        h={0}
+                        borderStyle="solid"
+                        borderWidth="0 38px 38px 0"
+                        borderColor="transparent"
+                        borderRightColor="blue.600"
+                    >
+                        <CheckIcon color="white" position="absolute" right="-40px" top="1px" />
+                    </Box>
+                )}
+
+                {props.children}
+            </Box>
+        </Box>
+    )
+}
+
+export const RadioCardGroup = (props) => {
+    const {getRootProps, getRadioProps} = useRadioGroup(props)
+    const group = getRootProps()
+
+    return (
+        <RadioCardGroupContext.Provider value={getRadioProps}>
+            <Box {...group}>{props.children}</Box>
+        </RadioCardGroupContext.Provider>
+    )
+}
+
+RadioCard.propTypes = {children: PropTypes.any}
+RadioCardGroup.propTypes = {children: PropTypes.any}

package/app/components/recommended-products/index.jsx

@@ -0,0 +1,227 @@
+/*
+ * 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, useRef, useState} from 'react'
+import PropTypes from 'prop-types'
+import {useIntl} from 'react-intl'
+import {Button} from '@chakra-ui/react'
+import ProductScroller from '@salesforce/retail-react-app/app/components/product-scroller'
+import useEinstein from '@salesforce/retail-react-app/app/hooks/use-einstein'
+import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
+import useIntersectionObserver from '@salesforce/retail-react-app/app/hooks/use-intersection-observer'
+import {useWishList} from '@salesforce/retail-react-app/app/hooks/use-wish-list'
+
+import {useToast} from '@salesforce/retail-react-app/app/hooks/use-toast'
+import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'
+import {
+    API_ERROR_MESSAGE,
+    TOAST_ACTION_VIEW_WISHLIST,
+    TOAST_MESSAGE_ADDED_TO_WISHLIST,
+    TOAST_MESSAGE_REMOVED_FROM_WISHLIST
+} from '@salesforce/retail-react-app/app/constants'
+import {useShopperCustomersMutation} from '@salesforce/commerce-sdk-react'
+
+/**
+ * A component for fetching and rendering product recommendations from the Einstein API
+ * by a zone or a recommender name.
+ */
+const RecommendedProducts = ({zone, recommender, products, title, shouldFetch, ...props}) => {
+    const {
+        isLoading,
+        recommendations,
+        getZoneRecommendations,
+        getRecommendations,
+        sendClickReco,
+        sendViewReco
+    } = useEinstein()
+    const {data: customer} = useCurrentCustomer()
+    const {customerId} = customer
+    const {data: wishlist} = useWishList()
+
+    const createCustomerProductListItem = useShopperCustomersMutation(
+        'createCustomerProductListItem'
+    )
+    const deleteCustomerProductListItem = useShopperCustomersMutation(
+        'deleteCustomerProductListItem'
+    )
+    const toast = useToast()
+    const navigate = useNavigation()
+    const {formatMessage} = useIntl()
+
+    const ref = useRef()
+    const isOnScreen = useIntersectionObserver(ref, {useOnce: true})
+    const [_products, setProducts] = useState(products)
+
+    useEffect(() => {
+        // Check if the component should fetch results or not. This is useful
+        // when you are still waiting on additional data, like `products`.
+        if (typeof shouldFetch === 'function' && !shouldFetch()) {
+            return
+        }
+
+        // Fetch either zone or recommender, but not both. If a zone and recommender
+        // name are both provided, `zone` takes precendence.
+        if (zone) {
+            getZoneRecommendations(zone, _products)
+            return
+        }
+        if (recommender) {
+            getRecommendations(recommender, _products)
+            return
+        }
+    }, [zone, recommender, _products])
+
+    useEffect(() => {
+        // This is an optimization that eliminates superfluous rerenders/fetching by
+        // keeping a copy of the `products` array prop in state for shallow comparison.
+        if (!Array.isArray(products)) {
+            return
+        }
+        if (
+            products.length !== _products?.length ||
+            !products.every((val, index) => val === _products?.[index])
+        ) {
+            setProducts(products)
+        }
+    }, [products])
+
+    useEffect(() => {
+        if (isOnScreen && recommendations?.recs) {
+            sendViewReco(
+                {
+                    recommenderName: recommendations.recommenderName,
+                    __recoUUID: recommendations.recoUUID
+                },
+                recommendations.recs.map((rec) => ({id: rec.id}))
+            )
+        }
+    }, [isOnScreen, recommendations])
+
+    // The component should remove itself altogether if it has no recommendations
+    // and we aren't loading any.
+    if (!isLoading && (!recommendations || recommendations.length < 1)) {
+        return null
+    }
+
+    // TODO: DRY this handler when intl provider is available globally
+    const addItemToWishlist = async (product) => {
+        try {
+            if (!wishlist || !customerId) {
+                return
+            }
+            await createCustomerProductListItem.mutateAsync({
+                parameters: {
+                    listId: wishlist.id,
+                    customerId
+                },
+                body: {
+                    quantity: 1,
+                    productId: product.productId,
+                    public: false,
+                    priority: 1,
+                    type: 'product'
+                }
+            })
+
+            toast({
+                title: formatMessage(TOAST_MESSAGE_ADDED_TO_WISHLIST, {quantity: 1}),
+                status: 'success',
+                action: (
+                    // it would be better if we could use <Button as={Link}>
+                    // but unfortunately the Link component is not compatible
+                    // with Chakra Toast, since the ToastManager is rendered via portal
+                    // and the toast doesn't have access to intl provider, which is a
+                    // requirement of the Link component.
+                    <Button variant="link" onClick={() => navigate('/account/wishlist')}>
+                        {formatMessage(TOAST_ACTION_VIEW_WISHLIST)}
+                    </Button>
+                )
+            })
+        } catch {
+            toast({
+                title: formatMessage(API_ERROR_MESSAGE),
+                status: 'error'
+            })
+        }
+    }
+
+    const removeItemFromWishlist = async (product) => {
+        try {
+            const wishlistItem = wishlist?.customerProductListItems?.find(
+                (item) => item.productId === product.productId
+            )
+            if (!wishlistItem || !wishlist || !customerId) {
+                return
+            }
+            await deleteCustomerProductListItem.mutateAsync({
+                parameters: {
+                    customerId,
+                    itemId: wishlistItem.id,
+                    listId: wishlist.id
+                }
+            })
+            toast({
+                title: formatMessage(TOAST_MESSAGE_REMOVED_FROM_WISHLIST),
+                status: 'success',
+                id: product.productId
+            })
+        } catch {
+            toast({
+                title: formatMessage(API_ERROR_MESSAGE),
+                status: 'error'
+            })
+        }
+    }
+
+    return (
+        <ProductScroller
+            ref={ref}
+            title={title || recommendations?.displayMessage}
+            products={recommendations.recs}
+            isLoading={isLoading}
+            productTileProps={(product) => ({
+                onClick: () => {
+                    sendClickReco(
+                        {
+                            recommenderName: recommendations.recommenderName,
+                            __recoUUID: recommendations.recoUUID
+                        },
+                        product
+                    )
+                },
+                enableFavourite: true,
+                isFavourite: wishlist?.customerProductListItems?.some(
+                    (item) => item.productId === product?.productId
+                ),
+                onFavouriteToggle: (isFavourite) => {
+                    const action = isFavourite ? removeItemFromWishlist : addItemToWishlist
+                    return action(product)
+                }
+            })}
+            {...props}
+        />
+    )
+}
+
+RecommendedProducts.propTypes = {
+    /* The title to appear above the product scroller */
+    title: PropTypes.any,
+
+    /* The zone to request */
+    zone: PropTypes.string,
+
+    /* The recommender to request */
+    recommender: PropTypes.string,
+
+    /* The products to use for recommendation context */
+    products: PropTypes.arrayOf(PropTypes.object),
+
+    /* Callback to determine if the component should fetch results */
+    shouldFetch: PropTypes.func
+}
+
+export default RecommendedProducts

package/app/components/register/index.jsx

@@ -0,0 +1,114 @@
+/*
+ * 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, {Fragment} from 'react'
+import PropTypes from 'prop-types'
+import {FormattedMessage} from 'react-intl'
+import {Alert, Button, Stack, Text, Link as ChakraLink} from '@chakra-ui/react'
+import {AlertIcon, BrandLogo} from '@salesforce/retail-react-app/app/components/icons'
+import {noop} from '@salesforce/retail-react-app/app/utils/utils'
+import RegistrationFields from '@salesforce/retail-react-app/app/components/forms/registration-fields'
+import Link from '@salesforce/retail-react-app/app/components/link'
+
+const RegisterForm = ({submitForm, clickSignIn = noop, form}) => {
+    return (
+        <Fragment>
+            <Stack justify="center" align="center" spacing={8}>
+                <BrandLogo width="60px" height="auto" />
+                <Stack spacing={2}>
+                    <Text align="center" fontSize="xl" fontWeight="semibold">
+                        <FormattedMessage
+                            defaultMessage="Let's get started!"
+                            id="register_form.heading.lets_get_started"
+                        />
+                    </Text>
+                    <Text fontSize="sm" align="center" color="gray.700">
+                        <FormattedMessage
+                            defaultMessage="Create an account and get first access to the very best products, inspiration and community."
+                            id="register_form.message.create_an_account"
+                        />
+                    </Text>
+                </Stack>
+            </Stack>
+            <form
+                onSubmit={form.handleSubmit(submitForm)}
+                data-testid="sf-auth-modal-form-register"
+            >
+                <Stack paddingTop={8} spacing={8} paddingLeft={4} paddingRight={4}>
+                    {form.formState.errors?.global && (
+                        <Alert status="error">
+                            <AlertIcon color="red.500" boxSize={4} />
+                            <Text fontSize="sm" ml={3}>
+                                {form.formState.errors.global.message}
+                            </Text>
+                        </Alert>
+                    )}
+                    <RegistrationFields form={form} />
+                    <Stack spacing={6}>
+                        <Button
+                            type="submit"
+                            onClick={() => form.clearErrors('global')}
+                            isLoading={form.formState.isSubmitting}
+                        >
+                            <FormattedMessage
+                                defaultMessage="Create Account"
+                                id="register_form.button.create_account"
+                            />
+                        </Button>
+
+                        <Stack direction="row" spacing={1} justify="center">
+                            <Text fontSize="sm">
+                                <FormattedMessage
+                                    defaultMessage="Already have an account?"
+                                    id="register_form.message.already_have_account"
+                                />
+                            </Text>
+                            <Button variant="link" size="sm" onClick={clickSignIn}>
+                                <FormattedMessage
+                                    defaultMessage="Sign in"
+                                    id="register_form.action.sign_in"
+                                />
+                            </Button>
+                        </Stack>
+
+                        <Text fontSize="sm" align="center">
+                            <FormattedMessage
+                                id="register_form.message.agree_to_policy_terms"
+                                defaultMessage="By creating an account, you agree to Salesforce <policy>Privacy Policy</policy> and <terms>Terms & Conditions</terms>"
+                                values={{
+                                    policy: (chunks) => (
+                                        <ChakraLink as={Link} to="/privacy-policy" color="blue.600">
+                                            {chunks}
+                                        </ChakraLink>
+                                    ),
+
+                                    terms: (chunks) => (
+                                        <ChakraLink
+                                            as={Link}
+                                            to="/terms-conditions"
+                                            color="blue.600"
+                                        >
+                                            {chunks}
+                                        </ChakraLink>
+                                    )
+                                }}
+                            />
+                        </Text>
+                    </Stack>
+                </Stack>
+            </form>
+        </Fragment>
+    )
+}
+
+RegisterForm.propTypes = {
+    submitForm: PropTypes.func,
+    clickSignIn: PropTypes.func,
+    form: PropTypes.object
+}
+
+export default RegisterForm

package/app/components/reset-password/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, {Fragment} from 'react'
+import PropTypes from 'prop-types'
+import {FormattedMessage} from 'react-intl'
+import {Alert, Button, Stack, Text} from '@chakra-ui/react'
+import {AlertIcon, BrandLogo} from '@salesforce/retail-react-app/app/components/icons'
+import {noop} from '@salesforce/retail-react-app/app/utils/utils'
+import ResetPasswordFields from '@salesforce/retail-react-app/app/components/forms/reset-password-fields'
+
+const ResetPasswordForm = ({submitForm, clickSignIn = noop, form}) => {
+    return (
+        <Fragment>
+            <Stack justify="center" align="center" spacing={8}>
+                <BrandLogo width="60px" height="auto" />
+                <Stack spacing={2}>
+                    <Text align="center" fontSize="xl" fontWeight="semibold">
+                        <FormattedMessage
+                            defaultMessage="Reset Password"
+                            id="reset_password_form.title.reset_password"
+                        />
+                    </Text>
+                    <Text fontSize="sm" align="center" color="gray.700">
+                        <FormattedMessage
+                            defaultMessage="Enter your email to receive instructions on how to reset your password"
+                            id="reset_password_form.message.enter_your_email"
+                        />
+                    </Text>
+                </Stack>
+            </Stack>
+            <form onSubmit={form.handleSubmit(submitForm)} data-testid="sf-auth-modal-form">
+                <Stack paddingTop={8} spacing={8} paddingLeft={4} paddingRight={4}>
+                    {form.formState.errors?.global && (
+                        <Alert status="error">
+                            <AlertIcon color="red.500" boxSize={4} />
+                            <Text fontSize="sm" ml={3}>
+                                {form.formState.errors.global.message}
+                            </Text>
+                        </Alert>
+                    )}
+                    <ResetPasswordFields form={form} />
+                    <Stack spacing={6}>
+                        <Button
+                            type="submit"
+                            onClick={() => form.clearErrors('global')}
+                            isLoading={form.formState.isSubmitting}
+                        >
+                            <FormattedMessage
+                                defaultMessage="Reset Password"
+                                id="reset_password_form.button.reset_password"
+                            />
+                        </Button>
+
+                        <Stack direction="row" spacing={1} justify="center">
+                            <Text fontSize="sm">
+                                <FormattedMessage
+                                    defaultMessage="Or return to"
+                                    id="reset_password_form.message.return_to_sign_in"
+                                    description="Precedes link to return to sign in"
+                                />
+                            </Text>
+                            <Button variant="link" size="sm" onClick={clickSignIn}>
+                                <FormattedMessage
+                                    defaultMessage="Sign in"
+                                    id="reset_password_form.action.sign_in"
+                                />
+                            </Button>
+                        </Stack>
+                    </Stack>
+                </Stack>
+            </form>
+        </Fragment>
+    )
+}
+
+ResetPasswordForm.propTypes = {
+    submitForm: PropTypes.func,
+    clickSignIn: PropTypes.func,
+    form: PropTypes.object
+}
+
+export default ResetPasswordForm

package/app/components/responsive/index.jsx

@@ -0,0 +1,29 @@
+/*
+ * 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 {Box} from '@chakra-ui/react'
+
+/**
+ * Render the children in the DOM but visually hide them on desktop
+ * @param children - isomorphic components used within a responsive design
+ */
+export const HideOnDesktop = ({children}) => (
+    <Box display={{base: 'block', lg: 'none'}}>{children}</Box>
+)
+HideOnDesktop.propTypes = {children: PropTypes.node}
+
+/**
+ * Render the children in the DOM but visually hide them on mobile
+ * @param children - isomorphic components used within a responsive design
+ */
+export const HideOnMobile = ({children}) => (
+    <Box display={{base: 'none', lg: 'block'}}>{children}</Box>
+)
+HideOnMobile.propTypes = {children: PropTypes.node}
+
+export default {HideOnMobile, HideOnDesktop}

package/app/components/scroll-to-top/index.jsx

@@ -0,0 +1,24 @@
+/*
+ * 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 {useEffect} from 'react'
+import {useLocation} from 'react-router-dom'
+
+/**
+ * ScrollToTop will scroll the viewport to the top whenever the current URL
+ * changes. If this component doesn't meet the needs of your layout, take a look
+ * at this [guide]{@link https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/guides/scroll-restoration.md}.
+ *
+ */
+export default function ScrollToTop() {
+    const {pathname} = useLocation()
+
+    useEffect(() => {
+        window.scrollTo(0, 0)
+    }, [pathname])
+
+    return null
+}

package/app/components/scroll-to-top/index.test.js

@@ -0,0 +1,46 @@
+/*
+ * 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 {render, waitFor} from '@testing-library/react'
+import ScrollToTop from '@salesforce/retail-react-app/app/components/scroll-to-top/index'
+import {Router} from 'react-router-dom'
+import {createMemoryHistory} from 'history'
+
+global.scrollTo = jest.fn()
+
+describe('ScrollToTop', () => {
+    let history = createMemoryHistory({initialEntries: ['/']})
+
+    beforeEach(() => {
+        render(
+            <Router history={history}>
+                <ScrollToTop />
+            </Router>
+        )
+    })
+
+    afterEach(() => {
+        jest.clearAllMocks()
+    })
+
+    test('calls window.scrollTo when route changes', async () => {
+        expect(global.scrollTo).toHaveBeenCalledTimes(1)
+        expect(global.scrollTo).toHaveBeenCalledWith(0, 0)
+
+        history.push('/new-url')
+        await waitFor(() => {
+            expect(global.scrollTo).toHaveBeenCalledTimes(2)
+        })
+        expect(global.scrollTo).toHaveBeenCalledWith(0, 0)
+
+        history.push('/new-url2')
+        await waitFor(() => {
+            expect(global.scrollTo).toHaveBeenCalledTimes(3)
+        })
+        expect(global.scrollTo).toHaveBeenCalledWith(0, 0)
+    })
+})