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

package/app/pages/account/orders.jsx

@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2023, 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 {Route, Switch, useRouteMatch} from 'react-router'
+import OrderHistory from '@salesforce/retail-react-app/app/pages/account/order-history'
+import OrderDetail from '@salesforce/retail-react-app/app/pages/account/order-detail'
+
+const AccountOrders = () => {
+    const {path} = useRouteMatch()
+
+    return (
+        <Switch>
+            <Route exact path={path}>
+                <OrderHistory />
+            </Route>
+            <Route exact path={`${path}/:orderNo`}>
+                <OrderDetail />
+            </Route>
+        </Switch>
+    )
+}
+
+AccountOrders.getTemplateName = () => 'account-order-history'
+
+export default AccountOrders

package/app/pages/account/orders.test.js

@@ -0,0 +1,95 @@
+/*
+ * Copyright (c) 2023, 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 {Route, Switch} from 'react-router-dom'
+import {screen} from '@testing-library/react'
+import {rest} from 'msw'
+import {
+    renderWithProviders,
+    createPathWithDefaults
+} from '@salesforce/retail-react-app/app/utils/test-utils'
+import {
+    mockCustomerBaskets,
+    mockOrderHistory,
+    mockOrderProducts
+} from '@salesforce/retail-react-app/app/mocks/mock-data'
+import Orders from '@salesforce/retail-react-app/app/pages/account/orders'
+import mockConfig from '@salesforce/retail-react-app/config/mocks/default'
+
+const MockedComponent = () => {
+    return (
+        <Switch>
+            <Route path={createPathWithDefaults('/account/orders')}>
+                <Orders />
+            </Route>
+        </Switch>
+    )
+}
+
+// Set up and clean up
+beforeEach(() => {
+    global.server.use(
+        rest.get('*/customers/:customerId/baskets', (req, res, ctx) =>
+            res(ctx.delay(0), ctx.json(mockCustomerBaskets))
+        )
+    )
+
+    window.history.pushState({}, 'Account', createPathWithDefaults('/account/orders'))
+})
+afterEach(() => {
+    jest.resetModules()
+    localStorage.clear()
+})
+
+test('Renders order history and details', async () => {
+    global.server.use(
+        rest.get('*/orders/:orderNo', (req, res, ctx) => {
+            return res(ctx.delay(0), ctx.json(mockOrderHistory.data[0]))
+        }),
+        rest.get('*/customers/:customerId/orders', (req, res, ctx) => {
+            return res(ctx.delay(0), ctx.json(mockOrderHistory))
+        }),
+        rest.get('*/products', (req, res, ctx) => {
+            return res(ctx.delay(0), ctx.json(mockOrderProducts))
+        })
+    )
+    const {user} = renderWithProviders(<MockedComponent history={history} />, {
+        wrapperProps: {siteAlias: 'uk', appConfig: mockConfig.app}
+    })
+    expect(await screen.findByTestId('account-order-history-page')).toBeInTheDocument()
+    expect(await screen.findAllByText(/Ordered: /i)).toHaveLength(3)
+    expect(
+        await screen.findAllByAltText(
+            'Pleated Bib Long Sleeve Shirt, Silver Grey, small',
+            {},
+            {timeout: 15000}
+        )
+    ).toHaveLength(3)
+
+    await user.click((await screen.findAllByText(/view details/i))[0])
+    expect(await screen.findByTestId('account-order-details-page')).toBeInTheDocument()
+    expect(await screen.findByText(/order number: 00028011/i)).toBeInTheDocument()
+    expect(
+        await screen.findByAltText(/Pleated Bib Long Sleeve Shirt, Silver Grey, small/i)
+    ).toBeInTheDocument()
+    expect(
+        await screen.findByAltText(/Long Sleeve Crew Neck, Fire Red, small/i)
+    ).toBeInTheDocument()
+})
+
+test('Renders order history place holder when no orders', async () => {
+    global.server.use(
+        rest.get('*/customers/:customerId/orders', (req, res, ctx) => {
+            return res(ctx.delay(0), ctx.json({limit: 0, offset: 0, total: 0}))
+        })
+    )
+    await renderWithProviders(<MockedComponent history={history} />, {
+        wrapperProps: {siteAlias: 'uk', appConfig: mockConfig.app}
+    })
+
+    expect(await screen.findByTestId('account-order-history-place-holder')).toBeInTheDocument()
+})

package/app/pages/account/profile.jsx

@@ -0,0 +1,357 @@
+/*
+ * 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, useState} from 'react'
+import {FormattedMessage, useIntl} from 'react-intl'
+import {
+    Alert,
+    Box,
+    Container,
+    Heading,
+    SimpleGrid,
+    Skeleton as ChakraSkeleton,
+    Stack,
+    Text,
+    useToast
+} from '@chakra-ui/react'
+import {useForm} from 'react-hook-form'
+import {AlertIcon} from '@salesforce/retail-react-app/app/components/icons'
+import {
+    ToggleCard,
+    ToggleCardEdit,
+    ToggleCardSummary
+} from '@salesforce/retail-react-app/app/components/toggle-card'
+import ProfileFields from '@salesforce/retail-react-app/app/components/forms/profile-fields'
+import UpdatePasswordFields from '@salesforce/retail-react-app/app/components/forms/update-password-fields'
+import FormActionButtons from '@salesforce/retail-react-app/app/components/forms/form-action-buttons'
+import {
+    useShopperCustomersMutation,
+    useAuthHelper,
+    AuthHelpers
+} from '@salesforce/commerce-sdk-react'
+import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
+
+/**
+ * This is a specialized Skeleton component that which uses the customers authtype as the
+ * `isLoaded` state. It also will revert it's provided size (height, width) when the loaded
+ * state changes. This allows you to have skeletons of a specific size, but onece loaded
+ * the bounding element will affect the contents size.
+ */
+// eslint-disable-next-line react/prop-types
+const Skeleton = ({children, height, width, ...rest}) => {
+    const {data: customer} = useCurrentCustomer()
+    const {isRegistered} = customer
+    const size = !isRegistered
+        ? {
+              height,
+              width
+          }
+        : {}
+    return (
+        <ChakraSkeleton isLoaded={!customer.isLoading} {...rest} {...size}>
+            {children}
+        </ChakraSkeleton>
+    )
+}
+
+const ProfileCard = () => {
+    const {formatMessage} = useIntl()
+
+    const {data: customer} = useCurrentCustomer()
+    const {isRegistered, customerId} = customer
+
+    const updateCustomerMutation = useShopperCustomersMutation('updateCustomer')
+
+    const toast = useToast()
+    const [isEditing, setIsEditing] = useState(false)
+
+    const form = useForm({
+        defaultValues: {
+            firstName: customer?.firstName,
+            lastName: customer?.lastName,
+            email: customer?.email,
+            phone: customer?.phoneHome
+        }
+    })
+
+    useEffect(() => {
+        form.reset({
+            firstName: customer.firstName,
+            lastName: customer.lastName,
+            email: customer.email,
+            phone: customer.phoneHome
+        })
+    }, [customer?.firstName, customer?.lastName, customer?.email, customer?.phoneHome])
+
+    const submit = async (values) => {
+        try {
+            form.clearErrors()
+            updateCustomerMutation.mutate(
+                {
+                    parameters: {customerId},
+                    body: {
+                        firstName: values.firstName,
+                        lastName: values.lastName,
+                        phoneHome: values.phone,
+                        // NOTE/ISSUE
+                        // The sdk is allowing you to change your email to an already-existing email.
+                        // I would expect an error. We also want to keep the email and login the same
+                        // for the customer, but the sdk isn't changing the login when we submit an
+                        // updated email. This will lead to issues where you change your email but end
+                        // up not being able to login since 'login' will no longer match the email.
+                        email: values.email,
+                        login: values.email
+                    }
+                },
+                {
+                    onSuccess: () => {
+                        setIsEditing(false)
+                        toast({
+                            title: formatMessage({
+                                defaultMessage: 'Profile updated',
+                                id: 'profile_card.info.profile_updated'
+                            }),
+                            status: 'success',
+                            isClosable: true
+                        })
+                    }
+                }
+            )
+        } catch (error) {
+            form.setError('global', {type: 'manual', message: error.message})
+        }
+    }
+
+    return (
+        <ToggleCard
+            id="my-profile"
+            title={
+                <Skeleton height="30px" width="120px">
+                    {formatMessage({
+                        defaultMessage: 'My Profile',
+                        id: 'profile_card.title.my_profile'
+                    })}
+                </Skeleton>
+            }
+            editing={isEditing}
+            isLoading={form.formState.isSubmitting}
+            onEdit={isRegistered ? () => setIsEditing(true) : undefined}
+            layerStyle="cardBordered"
+        >
+            <ToggleCardEdit>
+                <Container variant="form">
+                    <form onSubmit={form.handleSubmit(submit)}>
+                        <Stack spacing={6}>
+                            {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>
+                            )}
+                            <ProfileFields form={form} />
+                            <FormActionButtons onCancel={() => setIsEditing(false)} />
+                        </Stack>
+                    </form>
+                </Container>
+            </ToggleCardEdit>
+            <ToggleCardSummary>
+                <SimpleGrid columns={{base: 1, lg: 3}} spacing={4}>
+                    <Box>
+                        <Skeleton height="21px" width="84px" marginBottom={2}>
+                            <Text fontSize="sm" fontWeight="bold">
+                                <FormattedMessage
+                                    defaultMessage="Full Name"
+                                    id="profile_card.label.full_name"
+                                />
+                            </Text>
+                        </Skeleton>
+
+                        <Skeleton height="21px" width="140px">
+                            <Text fontSize="sm">
+                                {customer?.firstName} {customer?.lastName}
+                            </Text>
+                        </Skeleton>
+                    </Box>
+                    <Box>
+                        <Skeleton height="21px" width="120px" marginBottom={2}>
+                            <Text fontSize="sm" fontWeight="bold">
+                                <FormattedMessage
+                                    defaultMessage="Email"
+                                    id="profile_card.label.email"
+                                />
+                            </Text>
+                        </Skeleton>
+
+                        <Skeleton height="21px" width="64px">
+                            <Text fontSize="sm">{customer?.email}</Text>
+                        </Skeleton>
+                    </Box>
+                    <Box>
+                        <Skeleton height="21px" width="80px" marginBottom={2}>
+                            <Text fontSize="sm" fontWeight="bold">
+                                <FormattedMessage
+                                    defaultMessage="Phone Number"
+                                    id="profile_card.label.phone"
+                                />
+                            </Text>
+                        </Skeleton>
+
+                        <Skeleton height="21px" width="120px">
+                            <Text fontSize="sm">
+                                {customer?.phoneHome || (
+                                    <FormattedMessage
+                                        defaultMessage="Not provided"
+                                        id="profile_card.message.not_provided"
+                                    />
+                                )}
+                            </Text>
+                        </Skeleton>
+                    </Box>
+                </SimpleGrid>
+            </ToggleCardSummary>
+        </ToggleCard>
+    )
+}
+
+const PasswordCard = () => {
+    const {formatMessage} = useIntl()
+
+    const {data: customer} = useCurrentCustomer()
+    const {isRegistered, customerId} = customer
+
+    const login = useAuthHelper(AuthHelpers.LoginRegisteredUserB2C)
+
+    const updateCustomerPassword = useShopperCustomersMutation('updateCustomerPassword')
+    const toast = useToast()
+    const [isEditing, setIsEditing] = useState(false)
+
+    const form = useForm()
+
+    const submit = async (values) => {
+        try {
+            form.clearErrors()
+            updateCustomerPassword.mutate(
+                {
+                    parameters: {customerId},
+                    body: {
+                        password: values.password,
+                        currentPassword: values.currentPassword
+                    }
+                },
+                {
+                    onSuccess: () => {
+                        setIsEditing(false)
+                        toast({
+                            title: formatMessage({
+                                defaultMessage: 'Password updated',
+                                id: 'password_card.info.password_updated'
+                            }),
+                            status: 'success',
+                            isClosable: true
+                        })
+                        login.mutate({
+                            email: values.email,
+                            password: values.password
+                        })
+                    }
+                }
+            )
+            setIsEditing(false)
+            toast({
+                title: formatMessage({
+                    defaultMessage: 'Password updated',
+                    id: 'password_card.info.password_updated'
+                }),
+                status: 'success',
+                isClosable: true
+            })
+        } catch (error) {
+            form.setError('global', {type: 'manual', message: error.message})
+        }
+    }
+
+    return (
+        <ToggleCard
+            id="password"
+            title={
+                <Skeleton height="30px" width="120px">
+                    {formatMessage({
+                        defaultMessage: 'Password',
+                        id: 'password_card.title.password'
+                    })}
+                </Skeleton>
+            }
+            editing={isEditing}
+            isLoading={form.formState.isSubmitting}
+            onEdit={isRegistered ? () => setIsEditing(true) : undefined}
+            layerStyle="cardBordered"
+        >
+            <ToggleCardEdit>
+                <Container variant="form">
+                    <form onSubmit={form.handleSubmit(submit)}>
+                        <Stack spacing={6}>
+                            {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>
+                            )}
+                            <UpdatePasswordFields form={form} />
+                            <FormActionButtons onCancel={() => setIsEditing(false)} />
+                        </Stack>
+                    </form>
+                </Container>
+            </ToggleCardEdit>
+            <ToggleCardSummary>
+                <SimpleGrid columns={{base: 1, lg: 3}} spacing={4}>
+                    <Box>
+                        <Skeleton height="21px" width="84px" marginBottom={2}>
+                            <Text fontSize="sm" fontWeight="bold">
+                                <FormattedMessage
+                                    defaultMessage="Password"
+                                    id="password_card.label.password"
+                                />
+                            </Text>
+                        </Skeleton>
+
+                        <Skeleton height="21px" width="140px">
+                            <Text fontSize="sm">
+                                &bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;
+                            </Text>
+                        </Skeleton>
+                    </Box>
+                </SimpleGrid>
+            </ToggleCardSummary>
+        </ToggleCard>
+    )
+}
+
+const AccountDetail = () => {
+    return (
+        <Stack data-testid="account-detail-page" spacing={6}>
+            <Heading as="h1" fontSize="24px">
+                <FormattedMessage
+                    defaultMessage="Account Details"
+                    id="account_detail.title.account_details"
+                />
+            </Heading>
+
+            <Stack spacing={4}>
+                <ProfileCard />
+                <PasswordCard />
+            </Stack>
+        </Stack>
+    )
+}
+
+AccountDetail.getTemplateName = () => 'account-detail'
+
+export default AccountDetail

package/app/pages/account/wishlist/index.jsx

@@ -0,0 +1,195 @@
+/*
+ * 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} from 'react'
+import {Stack, Heading} from '@chakra-ui/layout'
+import {FormattedMessage, useIntl} from 'react-intl'
+import {Box, Flex, Skeleton} from '@chakra-ui/react'
+import {useProducts, useShopperCustomersMutation} from '@salesforce/commerce-sdk-react'
+
+import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'
+import {useToast} from '@salesforce/retail-react-app/app/hooks/use-toast'
+import {useWishList} from '@salesforce/retail-react-app/app/hooks/use-wish-list'
+
+import PageActionPlaceHolder from '@salesforce/retail-react-app/app/components/page-action-placeholder'
+import {HeartIcon} from '@salesforce/retail-react-app/app/components/icons'
+import ProductItem from '@salesforce/retail-react-app/app/components/product-item/index'
+import WishlistPrimaryAction from '@salesforce/retail-react-app/app/pages/account/wishlist/partials/wishlist-primary-action'
+import WishlistSecondaryButtonGroup from '@salesforce/retail-react-app/app/pages/account/wishlist/partials/wishlist-secondary-button-group'
+
+import {API_ERROR_MESSAGE} from '@salesforce/retail-react-app/app/constants'
+import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
+
+const numberOfSkeletonItems = 3
+
+const AccountWishlist = () => {
+    const navigate = useNavigation()
+    const {formatMessage} = useIntl()
+    const toast = useToast()
+
+    const [selectedItem, setSelectedItem] = useState(undefined)
+    const [isWishlistItemLoading, setWishlistItemLoading] = useState(false)
+
+    const {data: wishListData, isLoading: isWishListLoading} = useWishList()
+    const productIds = wishListData?.customerProductListItems?.map((item) => item.productId)
+
+    const {data: productsData, isLoading: isProductsLoading} = useProducts(
+        {parameters: {ids: productIds?.join(','), allImages: true}},
+        {enabled: productIds?.length > 0}
+    )
+
+    const wishListItems = wishListData?.customerProductListItems?.map((item, i) => {
+        return {
+            ...item,
+            product: productsData?.data?.[i]
+        }
+    })
+
+    const updateCustomerProductListItem = useShopperCustomersMutation(
+        'updateCustomerProductListItem'
+    )
+    const deleteCustomerProductListItem = useShopperCustomersMutation(
+        'deleteCustomerProductListItem'
+    )
+    const {data: customer} = useCurrentCustomer()
+
+    const handleSecondaryAction = async (itemId, promise) => {
+        setWishlistItemLoading(true)
+        setSelectedItem(itemId)
+
+        try {
+            await promise
+            // No need to handle error here, as the inner component will take care of it
+        } finally {
+            setWishlistItemLoading(false)
+            setSelectedItem(undefined)
+        }
+    }
+
+    const handleItemQuantityChanged = async (quantity, item) => {
+        let isValidChange = false
+        setSelectedItem(item.productId)
+
+        const body = {
+            ...item,
+            quantity: parseInt(quantity)
+        }
+        // To meet expected schema, remove the custom `product` we added
+        delete body.product
+
+        const parameters = {
+            customerId: customer.customerId,
+            itemId: item.id,
+            listId: wishListData?.id
+        }
+
+        const mutation =
+            parseInt(quantity) > 0
+                ? updateCustomerProductListItem.mutateAsync({body, parameters})
+                : deleteCustomerProductListItem.mutateAsync({parameters})
+
+        try {
+            await mutation
+            isValidChange = true
+            setSelectedItem(undefined)
+        } catch (err) {
+            toast({
+                title: formatMessage(API_ERROR_MESSAGE),
+                status: 'error'
+            })
+        }
+
+        // If true, the quantity picker would immediately update its number
+        // without waiting for the invalidated lists data to finish refetching
+        return isValidChange
+    }
+
+    const isPageLoading = wishListItems ? isProductsLoading : isWishListLoading
+
+    return (
+        <Stack spacing={4} data-testid="account-wishlist-page">
+            <Heading as="h1" fontSize="2xl">
+                <FormattedMessage defaultMessage="Wishlist" id="account_wishlist.title.wishlist" />
+            </Heading>
+
+            {isPageLoading && (
+                <Box data-testid="sf-wishlist-skeleton">
+                    {new Array(numberOfSkeletonItems).fill(0).map((i, idx) => (
+                        <Box
+                            key={idx}
+                            p={[4, 6]}
+                            my={4}
+                            border="1px solid"
+                            borderColor="gray.100"
+                            borderRadius="base"
+                        >
+                            <Flex width="full" align="flex-start">
+                                <Skeleton boxSize={['88px', 36]} mr={4} />
+
+                                <Stack spacing={2}>
+                                    <Skeleton h="20px" w="112px" />
+                                    <Skeleton h="20px" w="84px" />
+                                    <Skeleton h="20px" w="140px" />
+                                </Stack>
+                            </Flex>
+                        </Box>
+                    ))}
+                </Box>
+            )}
+
+            {!isPageLoading && !wishListItems && (
+                <PageActionPlaceHolder
+                    data-testid="empty-wishlist"
+                    icon={<HeartIcon boxSize={8} />}
+                    heading={formatMessage({
+                        defaultMessage: 'No Wishlist Items',
+                        id: 'account_wishlist.heading.no_wishlist'
+                    })}
+                    text={formatMessage({
+                        defaultMessage: 'Continue shopping and add items to your wishlist.',
+                        id: 'account_wishlist.description.continue_shopping'
+                    })}
+                    buttonText={formatMessage({
+                        defaultMessage: 'Continue Shopping',
+                        id: 'account_wishlist.button.continue_shopping'
+                    })}
+                    buttonProps={{leftIcon: undefined}}
+                    onButtonClick={() => navigate('/')}
+                />
+            )}
+
+            {!isPageLoading &&
+                wishListItems &&
+                wishListItems.map((item) => (
+                    <ProductItem
+                        key={item.id}
+                        product={{
+                            ...item.product,
+                            quantity: item.quantity
+                        }}
+                        showLoading={
+                            (updateCustomerProductListItem.isLoading ||
+                                deleteCustomerProductListItem.isLoading ||
+                                isWishlistItemLoading) &&
+                            selectedItem === item.productId
+                        }
+                        primaryAction={<WishlistPrimaryAction />}
+                        onItemQuantityChange={(quantity) =>
+                            handleItemQuantityChanged(quantity, item)
+                        }
+                        secondaryActions={
+                            <WishlistSecondaryButtonGroup
+                                productListItemId={item.id}
+                                onClick={handleSecondaryAction}
+                            />
+                        }
+                    />
+                ))}
+        </Stack>
+    )
+}
+
+export default AccountWishlist