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

package/app/components/order-summary/index.jsx

@@ -0,0 +1,331 @@
+/*
+ * 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 PropTypes from 'prop-types'
+import {FormattedMessage, FormattedNumber} from 'react-intl'
+import {Box, Flex, Button, Stack, Text, Heading, Divider} from '@chakra-ui/react'
+import {
+    BasketIcon,
+    ChevronDownIcon,
+    ChevronUpIcon
+} from '@salesforce/retail-react-app/app/components/icons'
+import Link from '@salesforce/retail-react-app/app/components/link'
+import {PromoCode, usePromoCode} from '@salesforce/retail-react-app/app/components/promo-code'
+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 PromoPopover from '@salesforce/retail-react-app/app/components/promo-popover'
+import {useProducts} from '@salesforce/commerce-sdk-react'
+
+const CartItems = ({basket}) => {
+    const totalItems = basket?.productItems?.reduce((acc, item) => acc + item.quantity, 0) || 0
+    const productIds = basket?.productItems?.map(({productId}) => productId).join(',') ?? ''
+    const {data: products} = useProducts(
+        {
+            parameters: {
+                ids: productIds,
+                allImages: true
+            }
+        },
+        {
+            enabled: Boolean(productIds),
+            select: (result) => {
+                // Convert array into key/value object with key is the product id
+                return result?.data?.reduce((result, item) => {
+                    const key = item.id
+                    result[key] = item
+                    return result
+                }, {})
+            }
+        }
+    )
+
+    const [cartItemsExpanded, setCartItemsExpanded] = useState(false)
+
+    return (
+        <Stack spacing={5} width="full">
+            <Box>
+                <Button
+                    variant="link"
+                    leftIcon={<BasketIcon boxSize="22px" />}
+                    rightIcon={cartItemsExpanded ? <ChevronUpIcon /> : <ChevronDownIcon />}
+                    onClick={() => setCartItemsExpanded(!cartItemsExpanded)}
+                >
+                    <FormattedMessage
+                        id="order_summary.cart_items.action.num_of_items_in_cart"
+                        description="clicking it would expand/show the items in cart"
+                        defaultMessage="{itemCount, plural, =0 {0 items} one {# item} other {# items}} in cart"
+                        values={{itemCount: totalItems}}
+                    />
+                </Button>
+            </Box>
+
+            {cartItemsExpanded && (
+                <Stack spacing={5} align="flex-start" divider={<Divider />}>
+                    {basket.productItems?.map((product, idx) => {
+                        const variant = {
+                            ...product,
+                            ...(products && products[product.productId]),
+                            price: product.price
+                        }
+                        return (
+                            <ItemVariantProvider
+                                key={product.productId}
+                                index={idx}
+                                variant={variant}
+                            >
+                                <Flex width="full" alignItems="flex-start">
+                                    <CartItemVariantImage width="80px" mr={2} />
+                                    <Stack width="full" spacing={1} marginTop="-3px">
+                                        <CartItemVariantName />
+                                        <CartItemVariantAttributes includeQuantity />
+                                        <CartItemVariantPrice baseDirection="row" />
+                                    </Stack>
+                                </Flex>
+                            </ItemVariantProvider>
+                        )
+                    })}
+
+                    <Button as={Link} to="/cart" variant="link" width="full">
+                        <FormattedMessage
+                            defaultMessage="Edit cart"
+                            id="order_summary.cart_items.link.edit_cart"
+                        />
+                    </Button>
+                </Stack>
+            )}
+        </Stack>
+    )
+}
+
+CartItems.propTypes = {
+    basket: PropTypes.object
+}
+
+const OrderSummary = ({
+    basket,
+    showPromoCodeForm = false,
+    showCartItems = false,
+    isEstimate = false,
+    fontSize = 'md'
+}) => {
+    const {removePromoCode, ...promoCodeProps} = usePromoCode()
+
+    if (!basket?.basketId && !basket?.orderNo) {
+        return null
+    }
+    const shippingItem = basket.shippingItems?.[0]
+    const hasShippingPromos = shippingItem?.priceAdjustments?.length > 0
+
+    return (
+        <Stack data-testid="sf-order-summary" spacing={5}>
+            <Heading fontSize={fontSize} pt={1}>
+                <FormattedMessage
+                    defaultMessage="Order Summary"
+                    id="order_summary.heading.order_summary"
+                />
+            </Heading>
+
+            <Stack spacing={4} align="flex-start">
+                {showCartItems && <CartItems basket={basket} />}
+
+                <Stack w="full">
+                    <Flex justify="space-between">
+                        <Text fontWeight="bold" fontSize={fontSize}>
+                            <FormattedMessage
+                                defaultMessage="Subtotal"
+                                id="order_summary.label.subtotal"
+                            />
+                        </Text>
+                        <Text fontWeight="bold" fontSize={fontSize}>
+                            <FormattedNumber
+                                style="currency"
+                                currency={basket?.currency}
+                                value={basket?.productSubTotal}
+                            />
+                        </Text>
+                    </Flex>
+
+                    {basket.orderPriceAdjustments?.map((adjustment) => (
+                        <Flex justify="space-between" key={adjustment.priceAdjustmentId}>
+                            <Text fontSize={fontSize}>{adjustment.itemText}</Text>
+                            <Text color="green.500" fontSize={fontSize}>
+                                <FormattedNumber
+                                    style="currency"
+                                    currency={basket?.currency}
+                                    value={adjustment.price}
+                                />
+                            </Text>
+                        </Flex>
+                    ))}
+
+                    <Flex justify="space-between">
+                        <Flex alignItems="center">
+                            <Text lineHeight={1} fontSize={fontSize}>
+                                <FormattedMessage
+                                    defaultMessage="Shipping"
+                                    id="order_summary.label.shipping"
+                                />
+                                {hasShippingPromos && (
+                                    <Text as="span" ml={1}>
+                                        (
+                                        <FormattedMessage
+                                            defaultMessage="Promotion applied"
+                                            id="order_summary.label.promo_applied"
+                                        />
+                                        )
+                                    </Text>
+                                )}
+                            </Text>
+                            {hasShippingPromos && (
+                                <PromoPopover ml={1}>
+                                    <Stack>
+                                        {shippingItem?.priceAdjustments?.map((adjustment) => (
+                                            <Text key={adjustment.priceAdjustmentId} fontSize="sm">
+                                                {adjustment.itemText}
+                                            </Text>
+                                        ))}
+                                    </Stack>
+                                </PromoPopover>
+                            )}
+                        </Flex>
+
+                        {shippingItem?.priceAdjustments?.some(
+                            ({appliedDiscount}) => appliedDiscount?.type === 'free'
+                        ) ? (
+                            <Text
+                                as="span"
+                                color="green.500"
+                                textTransform="uppercase"
+                                fontSize={fontSize}
+                            >
+                                <FormattedMessage
+                                    defaultMessage="Free"
+                                    id="order_summary.label.free"
+                                />
+                            </Text>
+                        ) : (
+                            <Text fontSize={fontSize}>
+                                <FormattedNumber
+                                    value={basket.shippingTotal}
+                                    style="currency"
+                                    currency={basket.currency}
+                                />
+                            </Text>
+                        )}
+                    </Flex>
+
+                    <Flex justify="space-between">
+                        <Text fontSize={fontSize}>
+                            <FormattedMessage defaultMessage="Tax" id="order_summary.label.tax" />
+                        </Text>
+                        {basket.taxTotal != null ? (
+                            <Text fontSize={fontSize}>
+                                <FormattedNumber
+                                    value={basket.taxTotal}
+                                    style="currency"
+                                    currency={basket.currency}
+                                />
+                            </Text>
+                        ) : (
+                            <Text fontSize={fontSize} color="gray.700">
+                                TBD
+                            </Text>
+                        )}
+                    </Flex>
+                </Stack>
+
+                {showPromoCodeForm ? (
+                    <Box w="full">
+                        <PromoCode {...promoCodeProps} />
+                    </Box>
+                ) : (
+                    <Divider />
+                )}
+
+                <Stack spacing={4} w="full">
+                    <Flex w="full" justify="space-between">
+                        {isEstimate ? (
+                            <Text fontWeight="bold" fontSize={fontSize}>
+                                <FormattedMessage
+                                    defaultMessage="Estimated Total"
+                                    id="order_summary.label.estimated_total"
+                                />
+                            </Text>
+                        ) : (
+                            <Text fontWeight="bold" fontSize={fontSize}>
+                                <FormattedMessage
+                                    defaultMessage="Order Total"
+                                    id="order_summary.label.order_total"
+                                />
+                            </Text>
+                        )}
+                        <Text fontWeight="bold" fontSize={fontSize}>
+                            <FormattedNumber
+                                style="currency"
+                                currency={basket?.currency}
+                                value={basket?.orderTotal || basket?.productTotal}
+                            />
+                        </Text>
+                    </Flex>
+
+                    {basket.couponItems?.length > 0 && (
+                        <Stack
+                            p={4}
+                            border="1px solid"
+                            borderColor="gray.100"
+                            borderRadius="base"
+                            bg="white"
+                        >
+                            <Text fontWeight="medium" fontSize={fontSize}>
+                                <FormattedMessage
+                                    defaultMessage="Promotions applied"
+                                    id="order_summary.label.promotions_applied"
+                                />
+                                :
+                            </Text>
+                            <Stack>
+                                {basket.couponItems.map((item) => (
+                                    <Flex key={item.couponItemId} alignItems="center">
+                                        <Text flex="1" fontSize="sm" color="gray.800">
+                                            {item.code}
+                                        </Text>
+                                        {!basket.orderNo && (
+                                            <Button
+                                                variant="link"
+                                                size="sm"
+                                                colorScheme="red"
+                                                onClick={() => removePromoCode(item.couponItemId)}
+                                            >
+                                                <FormattedMessage
+                                                    defaultMessage="Remove"
+                                                    id="order_summary.action.remove_promo"
+                                                />
+                                            </Button>
+                                        )}
+                                    </Flex>
+                                ))}
+                            </Stack>
+                        </Stack>
+                    )}
+                </Stack>
+            </Stack>
+        </Stack>
+    )
+}
+
+OrderSummary.propTypes = {
+    basket: PropTypes.object,
+    showPromoCodeForm: PropTypes.bool,
+    showCartItems: PropTypes.bool,
+    isEstimate: PropTypes.bool,
+    fontSize: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl'])
+}
+
+export default OrderSummary

package/app/components/page-action-placeholder/index.jsx

@@ -0,0 +1,50 @@
+/*
+ * 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, Button, Stack, Text} from '@chakra-ui/react'
+import {PlusIcon} from '@salesforce/retail-react-app/app/components/icons'
+
+const PageActionPlaceHolder = ({heading, text, icon, buttonText, buttonProps, onButtonClick}) => {
+    return (
+        <Stack
+            spacing={2}
+            py={12}
+            px={4}
+            alignItems="center"
+            borderRadius="base"
+            background="gray.50"
+        >
+            <Box>{icon}</Box>
+            <Stack spacing={6} alignItems="center">
+                <Box>
+                    <Text align="center" fontSize="lg" fontWeight="bold">
+                        {heading}
+                    </Text>
+                    <Text align="center" fontSize="md" color="gray.700">
+                        {text}
+                    </Text>
+                </Box>
+                <Button onClick={onButtonClick} leftIcon={<PlusIcon />} {...buttonProps}>
+                    {buttonText}
+                </Button>
+            </Stack>
+        </Stack>
+    )
+}
+
+PageActionPlaceHolder.propTypes = {
+    heading: PropTypes.string,
+    text: PropTypes.string,
+    buttonText: PropTypes.string,
+    icon: PropTypes.any,
+    buttonProps: PropTypes.object,
+    onButtonClick: PropTypes.func
+}
+
+export default PageActionPlaceHolder

package/app/components/pagination/index.jsx

@@ -0,0 +1,134 @@
+/*
+ * 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 {useIntl} from 'react-intl'
+import {Link as RouteLink, useHistory} from 'react-router-dom'
+
+// Components
+import {
+    Button,
+    Flex,
+    Select,
+    Text,
+
+    // Hooks
+    useStyleConfig
+} from '@chakra-ui/react'
+
+// Icons
+import {ChevronLeftIcon, ChevronRightIcon} from '@salesforce/retail-react-app/app/components/icons'
+
+// Constants
+const SELECT_ID = 'pagination'
+
+/**
+ * The pagination component is a simple component allowing you to navigate
+ * from one page  to the next by means of previous or next buttons, or directly
+ * using a select drop down.
+ */
+const Pagination = (props) => {
+    const intl = useIntl()
+    const styles = useStyleConfig('Pagination')
+    const history = useHistory()
+    const {urls, currentURL, ...rest} = props
+
+    const currentIndex = urls.indexOf(currentURL) > 0 ? urls.indexOf(currentURL) : 0
+    const prev = urls[currentIndex - 1]
+    const next = urls[currentIndex + 1]
+
+    // Determine the current page index.
+    return (
+        <Flex data-testid="sf-pagination" className="sf-pagination" {...styles.container} {...rest}>
+            {/* Previous Button */}
+            <Button
+                {...styles.button}
+                as={RouteLink}
+                // Because we are using a button component as a link, the isDisabled flag isn't working
+                // as intended, the workaround is to use the current url when its disabled.
+                href={prev || currentURL}
+                to={prev || currentURL}
+                aria-label="Previous Page"
+                isDisabled={!prev}
+                variant="link"
+            >
+                <ChevronLeftIcon />
+                <Text>
+                    {intl.formatMessage({
+                        id: 'pagination.link.prev',
+                        defaultMessage: 'Prev'
+                    })}
+                </Text>
+            </Button>
+
+            {/* Direct Page Selection */}
+            <Flex paddingLeft={4} paddingRight={4}>
+                <Select
+                    id={SELECT_ID}
+                    onChange={(e) => {
+                        history.push(e.target.value)
+                    }}
+                    value={currentURL}
+                    height={11}
+                >
+                    {urls.map((href, index) => (
+                        <option key={index} value={href}>
+                            {index + 1}
+                        </option>
+                    ))}
+                </Select>
+
+                <Text {...styles.text}>
+                    {intl.formatMessage(
+                        {
+                            id: 'pagination.field.num_of_pages',
+                            defaultMessage: 'of {numOfPages}'
+                        },
+                        {numOfPages: urls.length}
+                    )}
+                </Text>
+            </Flex>
+
+            {/* Next Button */}
+            <Button
+                {...styles.button}
+                as={RouteLink}
+                // Because we are using a button component as a link, the isDisabled flag isn't working
+                // as intended, the workaround is to use the current url when its disabled.
+                href={next || currentURL}
+                to={next || currentURL}
+                aria-label="Next Page"
+                isDisabled={!next}
+                variant="link"
+            >
+                <Text>
+                    {intl.formatMessage({
+                        id: 'pagination.link.next',
+                        defaultMessage: 'Next'
+                    })}
+                </Text>
+                <ChevronRightIcon />
+            </Button>
+        </Flex>
+    )
+}
+
+Pagination.displayName = 'Pagination'
+
+Pagination.propTypes = {
+    /**
+     * A list of URL's representing the pages that can be navigated to.
+     */
+    urls: PropTypes.array.isRequired,
+    /**
+     * The URL representing the current page
+     */
+    currentURL: PropTypes.string
+}
+
+export default Pagination

package/app/components/pagination/index.test.js

@@ -0,0 +1,25 @@
+/*
+ * 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 Pagination from '@salesforce/retail-react-app/app/components/pagination/index'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+
+const mockUrls = ['/test?offset=0', '/test?offset=25', '/test?offset=50', '/test?offset=75']
+const mockCurrentUrl = '/test?offset=25'
+
+test('Renders Breadcrum', () => {
+    const {getAllByRole} = renderWithProviders(
+        <Pagination urls={mockUrls} currentUrl={mockCurrentUrl} />
+    )
+
+    const [prev, next] = getAllByRole('link')
+    const option = getAllByRole('option')
+
+    expect(prev).toBeDefined()
+    expect(next).toBeDefined()
+    expect(option).toHaveLength(mockUrls.length)
+})