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

package/app/pages/account/order-detail.jsx

@@ -0,0 +1,397 @@
+/*
+ * 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 {FormattedMessage, useIntl} from 'react-intl'
+import {useHistory, useRouteMatch} from 'react-router'
+import {
+    Box,
+    Heading,
+    Text,
+    Stack,
+    Badge,
+    Flex,
+    Button,
+    Divider,
+    Grid,
+    SimpleGrid,
+    Skeleton
+} from '@chakra-ui/react'
+import {getCreditCardIcon} from '@salesforce/retail-react-app/app/utils/cc-utils'
+import {useOrder, useProducts} from '@salesforce/commerce-sdk-react'
+import Link from '@salesforce/retail-react-app/app/components/link'
+import {ChevronLeftIcon} from '@salesforce/retail-react-app/app/components/icons'
+import OrderSummary from '@salesforce/retail-react-app/app/components/order-summary'
+import ItemVariantProvider from '@salesforce/retail-react-app/app/components/item-variant'
+import CartItemVariantImage from '@salesforce/retail-react-app/app/components/item-variant/item-image'
+import CartItemVariantName from '@salesforce/retail-react-app/app/components/item-variant/item-name'
+import CartItemVariantAttributes from '@salesforce/retail-react-app/app/components/item-variant/item-attributes'
+import CartItemVariantPrice from '@salesforce/retail-react-app/app/components/item-variant/item-price'
+import PropTypes from 'prop-types'
+const onClient = typeof window !== 'undefined'
+
+const OrderProducts = ({productItems, currency}) => {
+    const productItemsMap = productItems.reduce(
+        (map, item) => ({...map, [item.productId]: item}),
+        {}
+    )
+    const ids = Object.keys(productItemsMap).join(',') ?? ''
+    const {data: {data: products} = {}, isLoading} = useProducts(
+        {
+            parameters: {
+                ids: ids
+            }
+        },
+        {
+            enabled: !!ids && onClient
+        }
+    )
+
+    const variants = products?.map((product) => {
+        const productItem = productItemsMap[product.id]
+        return {
+            ...productItem,
+            ...product,
+            price: productItem.price
+        }
+    })
+
+    return (
+        <>
+            {!isLoading &&
+                variants?.map((variant, index) => {
+                    return (
+                        <Box
+                            p={[4, 6]}
+                            key={index}
+                            border="1px solid"
+                            borderColor="gray.100"
+                            borderRadius="base"
+                        >
+                            <ItemVariantProvider variant={variant} currency={currency}>
+                                <Flex width="full" alignItems="flex-start">
+                                    <CartItemVariantImage width={['88px', 36]} mr={4} />
+                                    <Stack spacing={1} marginTop="-3px" flex={1}>
+                                        <CartItemVariantName />
+                                        <Flex
+                                            width="full"
+                                            justifyContent="space-between"
+                                            alignItems="flex-end"
+                                        >
+                                            <CartItemVariantAttributes
+                                                includeQuantity
+                                                currency={currency}
+                                            />
+                                            <CartItemVariantPrice currency={currency} />
+                                        </Flex>
+                                    </Stack>
+                                </Flex>
+                            </ItemVariantProvider>
+                        </Box>
+                    )
+                })}
+        </>
+    )
+}
+
+OrderProducts.propTypes = {
+    productItems: PropTypes.array.isRequired,
+    currency: PropTypes.string
+}
+
+const AccountOrderDetail = () => {
+    const {params} = useRouteMatch()
+    const history = useHistory()
+    const {formatMessage, formatDate} = useIntl()
+
+    const {data: order, isLoading: isOrderLoading} = useOrder(
+        {
+            parameters: {orderNo: params.orderNo}
+        },
+        {
+            enabled: onClient && !!params.orderNo
+        }
+    )
+    const isLoading = isOrderLoading || !order
+    const shipment = order?.shipments[0]
+    const {shippingAddress, shippingMethod, shippingStatus, trackingNumber} = shipment || {}
+    const paymentCard = order?.paymentInstruments[0]?.paymentCard
+    const CardIcon = getCreditCardIcon(paymentCard?.cardType)
+    const itemCount = order?.productItems.reduce((count, item) => item.quantity + count, 0) || 0
+
+    return (
+        <Stack spacing={6} data-testid="account-order-details-page">
+            <Stack>
+                <Box>
+                    <Button
+                        as={Link}
+                        to={'/account/orders'}
+                        variant="link"
+                        leftIcon={<ChevronLeftIcon />}
+                        size="sm"
+                        onClick={(e) => {
+                            if (history.action === 'PUSH') {
+                                e.preventDefault()
+                                history.goBack()
+                            }
+                        }}
+                    >
+                        <FormattedMessage
+                            defaultMessage="Back to Order History"
+                            id="account_order_detail.link.back_to_history"
+                        />
+                    </Button>
+                </Box>
+
+                <Stack spacing={[1, 2]}>
+                    <Heading as="h1" fontSize={['lg', '2xl']}>
+                        <FormattedMessage
+                            defaultMessage="Order Details"
+                            id="account_order_detail.title.order_details"
+                        />
+                    </Heading>
+
+                    {!isLoading ? (
+                        <Stack
+                            direction={['column', 'row']}
+                            alignItems={['flex-start', 'center']}
+                            spacing={[0, 3]}
+                            divider={
+                                <Divider
+                                    visibility={{base: 'hidden', lg: 'visible'}}
+                                    orientation={{lg: 'vertical'}}
+                                    h={[0, 4]}
+                                />
+                            }
+                        >
+                            <Text fontSize={['sm', 'md']}>
+                                <FormattedMessage
+                                    defaultMessage="Ordered: {date}"
+                                    id="account_order_detail.label.ordered_date"
+                                    values={{
+                                        date: formatDate(new Date(order.creationDate), {
+                                            year: 'numeric',
+                                            day: 'numeric',
+                                            month: 'short'
+                                        })
+                                    }}
+                                />
+                            </Text>
+                            <Stack direction="row" alignItems="center">
+                                <Text fontSize={['sm', 'md']}>
+                                    <FormattedMessage
+                                        defaultMessage="Order Number: {orderNumber}"
+                                        id="account_order_detail.label.order_number"
+                                        values={{orderNumber: order.orderNo}}
+                                    />
+                                </Text>
+                                <Badge colorScheme="green">{order.status}</Badge>
+                            </Stack>
+                        </Stack>
+                    ) : (
+                        <Skeleton h="20px" w="192px" />
+                    )}
+                </Stack>
+            </Stack>
+
+            <Box layerStyle="cardBordered">
+                <Grid templateColumns={{base: '1fr', xl: '60% 1fr'}} gap={{base: 6, xl: 2}}>
+                    <SimpleGrid columns={{base: 1, sm: 2}} columnGap={4} rowGap={5} py={{xl: 6}}>
+                        {isLoading ? (
+                            <>
+                                <Stack>
+                                    <Skeleton h="20px" w="84px" />
+                                    <Skeleton h="20px" w="112px" />
+                                    <Skeleton h="20px" w="56px" />
+                                </Stack>
+                                <Stack>
+                                    <Skeleton h="20px" w="84px" />
+                                    <Skeleton h="20px" w="56px" />
+                                </Stack>
+                                <Stack>
+                                    <Skeleton h="20px" w="112px" />
+                                    <Skeleton h="20px" w="84px" />
+                                    <Skeleton h="20px" w="56px" />
+                                </Stack>
+                                <Stack>
+                                    <Skeleton h="20px" w="60px" />
+                                    <Skeleton h="20px" w="84px" />
+                                    <Skeleton h="20px" w="56px" />
+                                </Stack>
+                            </>
+                        ) : (
+                            <>
+                                <Stack spacing={1}>
+                                    <Text fontWeight="bold" fontSize="sm">
+                                        <FormattedMessage
+                                            defaultMessage="Shipping Method"
+                                            id="account_order_detail.heading.shipping_method"
+                                        />
+                                    </Text>
+                                    <Box>
+                                        <Text fontSize="sm" textTransform="titlecase">
+                                            {
+                                                {
+                                                    not_shipped: formatMessage({
+                                                        defaultMessage: 'Not shipped',
+                                                        id: 'account_order_detail.shipping_status.not_shipped'
+                                                    }),
+
+                                                    part_shipped: formatMessage({
+                                                        defaultMessage: 'Partially shipped',
+                                                        id: 'account_order_detail.shipping_status.part_shipped'
+                                                    }),
+                                                    shipped: formatMessage({
+                                                        defaultMessage: 'Shipped',
+                                                        id: 'account_order_detail.shipping_status.shipped'
+                                                    })
+                                                }[shippingStatus]
+                                            }
+                                        </Text>
+                                        <Text fontSize="sm">{shippingMethod.name}</Text>
+                                        <Text fontSize="sm">
+                                            <FormattedMessage
+                                                defaultMessage="Tracking Number"
+                                                id="account_order_detail.label.tracking_number"
+                                            />
+                                            :{' '}
+                                            {trackingNumber ||
+                                                formatMessage({
+                                                    defaultMessage: 'Pending',
+                                                    id: 'account_order_detail.label.pending_tracking_number'
+                                                })}
+                                        </Text>
+                                    </Box>
+                                </Stack>
+                                <Stack spacing={1}>
+                                    <Text fontWeight="bold" fontSize="sm">
+                                        <FormattedMessage
+                                            defaultMessage="Payment Method"
+                                            id="account_order_detail.heading.payment_method"
+                                        />
+                                    </Text>
+                                    <Stack direction="row">
+                                        {CardIcon && <CardIcon layerStyle="ccIcon" />}
+                                        <Box>
+                                            <Text fontSize="sm">{paymentCard?.cardType}</Text>
+                                            <Stack direction="row">
+                                                <Text fontSize="sm">
+                                                    &bull;&bull;&bull;&bull;{' '}
+                                                    {paymentCard?.numberLastDigits}
+                                                </Text>
+                                                <Text fontSize="sm">
+                                                    {paymentCard?.expirationMonth}/
+                                                    {paymentCard?.expirationYear}
+                                                </Text>
+                                            </Stack>
+                                        </Box>
+                                    </Stack>
+                                </Stack>
+                                <Stack spacing={1}>
+                                    <Text fontWeight="bold" fontSize="sm">
+                                        <FormattedMessage
+                                            defaultMessage="Shipping Address"
+                                            id="account_order_detail.heading.shipping_address"
+                                        />
+                                    </Text>
+                                    <Box>
+                                        <Text fontSize="sm">
+                                            {shippingAddress.firstName} {shippingAddress.lastName}
+                                        </Text>
+                                        <Text fontSize="sm">{shippingAddress.address1}</Text>
+                                        <Text fontSize="sm">
+                                            {shippingAddress.city}, {shippingAddress.stateCode}{' '}
+                                            {shippingAddress.postalCode}
+                                        </Text>
+                                    </Box>
+                                </Stack>
+                                <Stack spacing={1}>
+                                    <Text fontWeight="bold" fontSize="sm">
+                                        <FormattedMessage
+                                            defaultMessage="Billing Address"
+                                            id="account_order_detail.heading.billing_address"
+                                        />
+                                    </Text>
+                                    <Box>
+                                        <Text fontSize="sm">
+                                            {order.billingAddress.firstName}{' '}
+                                            {order.billingAddress.lastName}
+                                        </Text>
+                                        <Text fontSize="sm">{order.billingAddress.address1}</Text>
+                                        <Text fontSize="sm">
+                                            {order.billingAddress.city},{' '}
+                                            {order.billingAddress.stateCode}{' '}
+                                            {order.billingAddress.postalCode}
+                                        </Text>
+                                    </Box>
+                                </Stack>
+                            </>
+                        )}
+                    </SimpleGrid>
+
+                    {!isLoading ? (
+                        <Box
+                            py={{base: 6}}
+                            px={{base: 6, xl: 8}}
+                            background="gray.50"
+                            borderRadius="base"
+                        >
+                            <OrderSummary basket={order} fontSize="sm" />
+                        </Box>
+                    ) : (
+                        <Skeleton h="full" />
+                    )}
+                </Grid>
+            </Box>
+
+            <Stack spacing={4}>
+                {!isLoading && (
+                    <Text>
+                        <FormattedMessage
+                            defaultMessage="{count} items"
+                            values={{count: itemCount}}
+                            id="account_order_detail.heading.num_of_items"
+                        />
+                    </Text>
+                )}
+
+                <Stack spacing={4}>
+                    {isLoading ? (
+                        [1, 2, 3].map((i) => (
+                            <Box
+                                key={i}
+                                p={[4, 6]}
+                                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>
+                        ))
+                    ) : (
+                        <OrderProducts
+                            productItems={order.productItems}
+                            currency={order.currency}
+                        />
+                    )}
+                </Stack>
+            </Stack>
+        </Stack>
+    )
+}
+
+AccountOrderDetail.getTemplateName = () => 'account-order-history'
+
+export default AccountOrderDetail

package/app/pages/account/order-history.jsx

@@ -0,0 +1,264 @@
+/*
+ * 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, {useEffect} from 'react'
+import {FormattedMessage, FormattedNumber, useIntl} from 'react-intl'
+import {useLocation} from 'react-router'
+import {
+    Box,
+    Heading,
+    Text,
+    Stack,
+    Badge,
+    Flex,
+    Button,
+    Divider,
+    Grid,
+    AspectRatio,
+    Img,
+    Skeleton
+} from '@chakra-ui/react'
+import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
+import {useCustomerOrders, useProducts} from '@salesforce/commerce-sdk-react'
+import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'
+import {usePageUrls, useSearchParams} from '@salesforce/retail-react-app/app/hooks'
+import PageActionPlaceHolder from '@salesforce/retail-react-app/app/components/page-action-placeholder'
+import Link from '@salesforce/retail-react-app/app/components/link'
+import {ChevronRightIcon, ReceiptIcon} from '@salesforce/retail-react-app/app/components/icons'
+import Pagination from '@salesforce/retail-react-app/app/components/pagination'
+import PropTypes from 'prop-types'
+import {DEFAULT_ORDERS_SEARCH_PARAMS} from '@salesforce/retail-react-app/app/constants'
+
+const OrderProductImages = ({productItems}) => {
+    const ids = productItems.map((item) => item.productId).join(',') ?? ''
+    const {data: {data: products} = {}, isLoading} = useProducts({
+        parameters: {
+            ids: ids
+        }
+    })
+
+    const images = products?.map((product) => {
+        return product?.imageGroups?.find((group) => group.viewType === 'small').images[0]
+    })
+
+    return (
+        <>
+            {!isLoading && products
+                ? images.map((image, index) => {
+                      return (
+                          <AspectRatio
+                              key={index}
+                              ratio={1}
+                              width="88px"
+                              w="88px"
+                              borderRadius="base"
+                              overflow="hidden"
+                          >
+                              <Img
+                                  alt={image?.alt}
+                                  src={image?.disBaseLink || image?.link}
+                                  fallback={<Box background="gray.100" boxSize="full" />}
+                              />
+                          </AspectRatio>
+                      )
+                  })
+                : productItems.map((item, index) => {
+                      return <Skeleton key={index} h="88px" w="88px" />
+                  })}
+        </>
+    )
+}
+OrderProductImages.propTypes = {
+    productItems: PropTypes.array
+}
+
+const onClient = typeof window !== 'undefined'
+const AccountOrderHistory = () => {
+    const location = useLocation()
+    const {formatMessage, formatDate} = useIntl()
+    const navigate = useNavigation()
+
+    const {data: customer} = useCurrentCustomer()
+    const {customerId} = customer
+
+    const searchParams = useSearchParams(DEFAULT_ORDERS_SEARCH_PARAMS)
+    const {limit, offset} = searchParams[0]
+
+    const {data: {data: orders, ...paging} = {}, isLoading} = useCustomerOrders(
+        {
+            parameters: {customerId, limit, offset}
+        },
+        {enabled: onClient && !!customerId}
+    )
+
+    const hasOrders = orders?.length > 0
+
+    const pageUrls = usePageUrls({total: paging.total, limit})
+
+    useEffect(() => {
+        window.scrollTo(0, 0)
+    }, [customer, searchParams.offset])
+
+    return (
+        <Stack spacing={4} data-testid="account-order-history-page">
+            <Stack>
+                <Heading as="h1" fontSize="2xl">
+                    <FormattedMessage
+                        defaultMessage="Order History"
+                        id="account_order_history.title.order_history"
+                    />
+                </Heading>
+            </Stack>
+
+            {isLoading ? (
+                [1, 2, 3].map((i) => (
+                    <Stack key={i} spacing={4} layerStyle="cardBordered">
+                        <Stack spacing={2}>
+                            <Skeleton h="20px" w="112px" />
+                            <Skeleton h="20px" w="200px" />
+                        </Stack>
+                        <Grid templateColumns={{base: 'repeat(auto-fit, 88px)'}} gap={4}>
+                            {Array.from(Array(4).keys()).map((i) => (
+                                <Skeleton key={i} w="88px" h="88px" />
+                            ))}
+                        </Grid>
+                        <Skeleton h="20px" w="200px" />
+                    </Stack>
+                ))
+            ) : (
+                <Stack spacing={4}>
+                    {orders?.map((order) => {
+                        return (
+                            <Stack key={order.orderNo} spacing={4} layerStyle="cardBordered">
+                                <Box>
+                                    <Flex justifyContent="space-between">
+                                        <Text fontWeight="bold" fontSize="lg">
+                                            <FormattedMessage
+                                                defaultMessage="Ordered: {date}"
+                                                id="account_order_history.label.ordered_date"
+                                                values={{
+                                                    date: formatDate(new Date(order.creationDate), {
+                                                        year: 'numeric',
+                                                        day: 'numeric',
+                                                        month: 'short'
+                                                    })
+                                                }}
+                                            />
+                                        </Text>
+                                        <Box>
+                                            <Button
+                                                as={Link}
+                                                to={`/account/orders/${order.orderNo}`}
+                                                variant="link"
+                                                rightIcon={
+                                                    <ChevronRightIcon boxSize={5} mx={-1.5} />
+                                                }
+                                                fontSize={{base: 'sm', lg: 'md'}}
+                                            >
+                                                <FormattedMessage
+                                                    defaultMessage="View details"
+                                                    id="account_order_history.link.view_details"
+                                                />
+                                            </Button>
+                                        </Box>
+                                    </Flex>
+                                    <Stack direction="row" alignItems="center">
+                                        <Text>
+                                            <FormattedMessage
+                                                defaultMessage="Order Number: {orderNumber}"
+                                                id="account_order_history.label.order_number"
+                                                values={{orderNumber: order.orderNo}}
+                                            />
+                                        </Text>
+                                        <Badge colorScheme="green">{order.status}</Badge>
+                                    </Stack>
+                                </Box>
+                                <Grid templateColumns={{base: 'repeat(auto-fit, 88px)'}} gap={4}>
+                                    <OrderProductImages productItems={order.productItems} />
+                                </Grid>
+
+                                <Stack
+                                    direction={{base: 'column', lg: 'row'}}
+                                    alignItems={{base: 'flex-start', lg: 'center'}}
+                                    spacing={{base: '2px', lg: 3}}
+                                    divider={
+                                        <Divider
+                                            visibility={{base: 'hidden', lg: 'visible'}}
+                                            orientation={{lg: 'vertical'}}
+                                            h={{base: 0, lg: 4}}
+                                        />
+                                    }
+                                >
+                                    <Text>
+                                        <FormattedMessage
+                                            defaultMessage="{count} items"
+                                            id="account_order_history.label.num_of_items"
+                                            description="Number of items in order"
+                                            values={{count: order.productItems.length}}
+                                        />
+                                    </Text>
+                                    <Text>
+                                        <FormattedNumber
+                                            style="currency"
+                                            currency={order.currency}
+                                            value={order.orderTotal}
+                                        />
+                                    </Text>
+                                    <Text>
+                                        <FormattedMessage
+                                            defaultMessage="Shipped to: {name}"
+                                            id="account_order_history.label.shipped_to"
+                                            values={{
+                                                name: `${order.shipments[0].shippingAddress.firstName} ${order.shipments[0].shippingAddress.lastName}`
+                                            }}
+                                        />
+                                    </Text>
+                                </Stack>
+                            </Stack>
+                        )
+                    })}
+
+                    {hasOrders && orders?.length < paging.total && (
+                        <Box pt={4}>
+                            <Pagination
+                                currentURL={`${location.pathname}${location.search}`}
+                                urls={pageUrls}
+                            />
+                        </Box>
+                    )}
+                </Stack>
+            )}
+
+            {!hasOrders && !isLoading && (
+                <Stack data-testid="account-order-history-place-holder">
+                    <PageActionPlaceHolder
+                        icon={<ReceiptIcon boxSize={8} />}
+                        heading={formatMessage({
+                            defaultMessage: "You haven't placed an order yet.",
+                            id: 'account_order_history.heading.no_order_yet'
+                        })}
+                        text={formatMessage({
+                            defaultMessage:
+                                'Once you place an order the details will show up here.',
+                            id: 'account_order_history.description.once_you_place_order'
+                        })}
+                        buttonText={formatMessage({
+                            defaultMessage: 'Continue Shopping',
+                            id: 'account_order_history.button.continue_shopping'
+                        })}
+                        buttonProps={{leftIcon: undefined}}
+                        onButtonClick={() => navigate('/')}
+                    />
+                </Stack>
+            )}
+        </Stack>
+    )
+}
+
+AccountOrderHistory.getTemplateName = () => 'account-order-history'
+
+export default AccountOrderHistory