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

package/app/components/item-variant/item-image.jsx

@@ -0,0 +1,73 @@
+/*
+ * 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 {AspectRatio, Box, Badge, Image} from '@chakra-ui/react'
+import {useItemVariant} from '.'
+import {FormattedMessage} from 'react-intl'
+import {findImageGroupBy} from '@salesforce/retail-react-app/app/utils/image-groups-utils'
+
+/**
+ * In the context of a cart product item variant, this component renders the item's
+ * main image.
+ *
+ * @todo = This component will render a `SALE` badge when the qualifier is available
+ * on the custom property `c_isSale`. This will need to be expanded upon to handle
+ * different badge/qualifiers and property names.
+ */
+const ItemImage = ({imageProps, ratio = 1, ...props}) => {
+    const variant = useItemVariant()
+
+    // We find the 'small' images in the variant's image groups based on variationValues and pick the first one
+    const image = findImageGroupBy(variant?.imageGroups, {
+        viewType: 'small',
+        selectedVariationAttributes: variant?.variationValues
+    })?.images?.[0]
+
+    return (
+        <Box width="84px" backgroundColor="gray.100" {...props}>
+            <AspectRatio ratio={ratio}>
+                <Box position="relative">
+                    {variant.c_isSale && (
+                        <Badge
+                            position="absolute"
+                            top={0}
+                            left={0}
+                            marginLeft={2}
+                            marginTop={2}
+                            fontSize="10px"
+                            variant="solid"
+                            colorScheme="blue"
+                        >
+                            <FormattedMessage
+                                defaultMessage="Sale"
+                                id="item_image.label.sale"
+                                description="A sale badge placed on top of a product image"
+                            />
+                        </Badge>
+                    )}
+
+                    {image && (
+                        <Image
+                            alt={image.alt}
+                            src={`${image.disBaseLink || image.link}`}
+                            ignoreFallback={true}
+                            {...imageProps}
+                        />
+                    )}
+                </Box>
+            </AspectRatio>
+        </Box>
+    )
+}
+
+ItemImage.propTypes = {
+    imageProps: PropTypes.object,
+    ratio: PropTypes.number
+}
+
+export default ItemImage

package/app/components/item-variant/item-name.jsx

@@ -0,0 +1,28 @@
+/*
+ * 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 {useItemVariant} from '.'
+import Link from '@salesforce/retail-react-app/app/components/link'
+
+/**
+ * In the context of a cart product item variant, this components simply renders
+ * the item's name using the cart item field `productName`. We use this field
+ * rather than variant `name` field as the variant detail may not yet be
+ * available upon rendering.
+ */
+const ItemName = (props) => {
+    const variant = useItemVariant()
+    const productId = variant?.master?.masterId || variant.id
+
+    return (
+        <Link fontWeight="bold" {...props} color="black.600" to={`/product/${productId}`}>
+            {variant.productName || variant.name}
+        </Link>
+    )
+}
+
+export default ItemName

package/app/components/item-variant/item-price.jsx

@@ -0,0 +1,117 @@
+/*
+ * 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 {FormattedMessage, FormattedNumber, useIntl} from 'react-intl'
+import {Stack, Text} from '@chakra-ui/react'
+import {useItemVariant} from '.'
+import {HideOnDesktop, HideOnMobile} from '@salesforce/retail-react-app/app/components/responsive'
+import {useCurrency} from '@salesforce/retail-react-app/app/hooks'
+import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
+
+const PricePerItem = ({currency, basket, basePrice}) => {
+    const {currency: activeCurrency} = useCurrency()
+    return (
+        <Text fontSize={{base: '12px', lg: '14px'}}>
+            <FormattedNumber
+                style="currency"
+                currency={currency || basket?.currency || activeCurrency}
+                value={basePrice}
+            />
+            <FormattedMessage
+                defaultMessage="ea"
+                id="price_per_item.label.each"
+                description="Abbreviated 'each', follows price per item, like $10/ea"
+            />
+        </Text>
+    )
+}
+
+PricePerItem.propTypes = {
+    currency: PropTypes.string,
+    basket: PropTypes.object,
+    basePrice: PropTypes.string
+}
+
+/**
+ * In the context of a cart product item variant, this component renders the item's
+ * pricing, taking into account applied discounts as well as base item prices.
+ */
+const ItemPrice = ({currency, align = 'right', baseDirection = 'column', ...props}) => {
+    const variant = useItemVariant()
+    const {data: basket} = useCurrentBasket()
+    const {currency: activeCurrency} = useCurrency()
+    const intl = useIntl()
+
+    const {price, basePrice, priceAfterItemDiscount} = variant
+    const isProductASet = variant?.type?.set
+
+    const displayPrice = priceAfterItemDiscount ? Math.min(price, priceAfterItemDiscount) : price
+
+    const hasDiscount = displayPrice !== price
+
+    return (
+        <Stack
+            textAlign={align}
+            direction={hasDiscount ? 'column' : {base: baseDirection, lg: 'row'}}
+            justifyContent={align === 'left' ? 'flex-start' : 'flex-end'}
+            alignItems="baseline"
+            spacing={hasDiscount ? 0 : 1}
+            wrap="nowrap"
+            {...props}
+        >
+            {basePrice && price !== basePrice && (
+                <HideOnDesktop>
+                    <PricePerItem currency={currency} basePrice={basePrice} basket={basket} />
+                </HideOnDesktop>
+            )}
+            <Text fontWeight="bold" lineHeight={{base: '0.5', lg: '24px'}}>
+                {isProductASet &&
+                    `${intl.formatMessage({
+                        defaultMessage: 'Starting at',
+                        id: 'item_price.label.starting_at'
+                    })} `}
+
+                <FormattedNumber
+                    style="currency"
+                    currency={currency || basket?.currency || activeCurrency}
+                    value={displayPrice}
+                />
+                {hasDiscount && (
+                    <Text
+                        as="span"
+                        fontSize="sm"
+                        fontWeight="normal"
+                        textDecoration="line-through"
+                        color="gray.500"
+                        marginLeft={1}
+                    >
+                        <FormattedNumber
+                            style="currency"
+                            currency={currency || basket?.currency || activeCurrency}
+                            value={price}
+                        />
+                    </Text>
+                )}
+            </Text>
+
+            {basePrice && price !== basePrice && (
+                <HideOnMobile>
+                    <PricePerItem currency={currency} basePrice={basePrice} basket={basket} />
+                </HideOnMobile>
+            )}
+        </Stack>
+    )
+}
+
+ItemPrice.propTypes = {
+    currency: PropTypes.string,
+    align: PropTypes.string,
+    baseDirection: PropTypes.string
+}
+
+export default ItemPrice

package/app/components/link/index.jsx

@@ -0,0 +1,32 @@
+/*
+ * 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 {Link as ChakraLink} from '@chakra-ui/react'
+import {Link as SPALink, NavLink as NavSPALink} from 'react-router-dom'
+import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site'
+
+const Link = React.forwardRef(({href, to, useNavLink = false, ...props}, ref) => {
+    const _href = to || href
+    const {buildUrl} = useMultiSite()
+    const updatedHref = buildUrl(_href)
+    return (
+        <ChakraLink
+            as={useNavLink ? NavSPALink : SPALink}
+            {...(useNavLink && {exact: true})}
+            {...props}
+            to={updatedHref}
+            ref={ref}
+        />
+    )
+})
+
+Link.displayName = 'Link'
+
+Link.propTypes = {href: PropTypes.string, to: PropTypes.string, useNavLink: PropTypes.bool}
+
+export default React.memo(Link)

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

@@ -0,0 +1,72 @@
+/*
+ * 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 {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+import Link from '@salesforce/retail-react-app/app/components/link/index'
+import mockConfig from '@salesforce/retail-react-app/config/mocks/default'
+import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
+const originalLocation = window.location
+jest.mock('@salesforce/pwa-kit-runtime/utils/ssr-config', () => {
+    return {
+        getConfig: jest.fn()
+    }
+})
+
+afterEach(() => {
+    // Restore `window.location` to the `jsdom` `Location` object
+    window.location = originalLocation
+
+    jest.resetModules()
+})
+
+test('renders a link with locale prepended', () => {
+    getConfig.mockImplementation(() => mockConfig)
+    delete window.location
+    window.location = new URL('/us/en-US', 'https://www.example.com')
+    const {getByText} = renderWithProviders(<Link href="/mypage">My Page</Link>, {
+        wrapperProps: {locale: {id: 'en-US'}, siteAlias: 'us', appConfig: mockConfig.app}
+    })
+    expect(getByText(/My Page/i)).toHaveAttribute('href', '/us/en-US/mypage')
+})
+
+test('renders a link with locale and site as query param', () => {
+    const newConfig = {
+        ...mockConfig,
+        app: {
+            ...mockConfig.app,
+            url: {
+                site: 'query_param',
+                locale: 'query_param',
+                showDefaults: true
+            }
+        }
+    }
+    getConfig.mockImplementation(() => newConfig)
+    delete window.location
+    window.location = new URL('https://www.example.com/women/dresses?site=us&locale=en-US')
+    const {getByText} = renderWithProviders(<Link href="/mypage">My Page</Link>, {
+        wrapperProps: {locale: {id: 'en-US'}, siteAlias: 'us', appConfig: newConfig.app}
+    })
+
+    expect(getByText(/My Page/i)).toHaveAttribute('href', `/mypage?site=us&locale=en-US`)
+})
+
+test('accepts `to` prop as well', () => {
+    getConfig.mockImplementation(() => mockConfig)
+    delete window.location
+    window.location = new URL('us/en-US', 'https://www.example.com')
+    const {getByText} = renderWithProviders(<Link to="/mypage">My Page</Link>, {
+        wrapperProps: {locale: {id: 'en-US'}, siteAlias: 'us', appConfig: mockConfig.app}
+    })
+    expect(getByText(/My Page/i)).toHaveAttribute('href', '/us/en-US/mypage')
+})
+
+test('does not modify root url', () => {
+    getConfig.mockImplementation(() => mockConfig)
+    const {getByText} = renderWithProviders(<Link href="/">My Page</Link>)
+    expect(getByText(/My Page/i)).toHaveAttribute('href', '/')
+})

package/app/components/links-list/index.jsx

@@ -0,0 +1,89 @@
+/*
+ * 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, List, ListItem, Heading, HStack, useMultiStyleConfig} from '@chakra-ui/react'
+import Link from '@salesforce/retail-react-app/app/components/link'
+
+const LinksList = ({
+    links = [],
+    heading = '',
+    variant,
+    color,
+    onLinkClick,
+    headingLinkRef,
+    ...otherProps
+}) => {
+    const styles = useMultiStyleConfig('LinksList', {variant})
+    return (
+        <Box {...styles.container} {...(color ? {color: color} : {})} {...otherProps}>
+            {heading &&
+                (heading.href ? (
+                    <Link
+                        to={heading.href}
+                        onClick={onLinkClick}
+                        ref={headingLinkRef}
+                        {...styles.headingLink}
+                    >
+                        <Heading {...styles.heading} {...(heading.styles ? heading.styles : {})}>
+                            {heading.text}
+                        </Heading>
+                    </Link>
+                ) : (
+                    <Heading {...styles.heading}>{heading}</Heading>
+                ))}
+
+            {links && (
+                <List spacing={5} {...styles.list}>
+                    {variant === 'horizontal' ? (
+                        <HStack>
+                            {links.map((link, i) => (
+                                <ListItem key={i} {...styles.listItem} sx={styles.listItemSx}>
+                                    <Link
+                                        to={link.href}
+                                        onClick={onLinkClick}
+                                        {...(link.styles ? link.styles : {})}
+                                    >
+                                        {link.text}
+                                    </Link>
+                                </ListItem>
+                            ))}
+                        </HStack>
+                    ) : (
+                        links.map((link, i) => (
+                            <ListItem key={i}>
+                                <Link
+                                    to={link.href}
+                                    onClick={onLinkClick}
+                                    {...(link.styles ? link.styles : {})}
+                                >
+                                    {link.text}
+                                </Link>
+                            </ListItem>
+                        ))
+                    )}
+                </List>
+            )}
+        </Box>
+    )
+}
+
+LinksList.propTypes = {
+    links: PropTypes.arrayOf(
+        PropTypes.shape({
+            href: PropTypes.string,
+            text: PropTypes.string
+        })
+    ).isRequired,
+    heading: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    variant: PropTypes.oneOf(['vertical', 'horizontal']),
+    color: PropTypes.string,
+    onLinkClick: PropTypes.func,
+    headingLinkRef: PropTypes.object
+}
+
+export default LinksList

package/app/components/links-list/index.test.js

@@ -0,0 +1,62 @@
+/*
+ * 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 {StylesProvider, useMultiStyleConfig} from '@chakra-ui/react'
+import {screen} from '@testing-library/react'
+
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+import LinksList from '@salesforce/retail-react-app/app/components/links-list/index'
+
+const links = [
+    {
+        href: '/',
+        text: 'Privacy Policy'
+    }
+]
+const horizontalVariantSelector = 'ul > .chakra-stack > li'
+
+const FooterStylesProvider = ({children}) => {
+    const styles = useMultiStyleConfig('Footer')
+    return <StylesProvider value={styles}>{children}</StylesProvider>
+}
+FooterStylesProvider.propTypes = {
+    children: PropTypes.node
+}
+
+test('renders LinksList with default arguments', () => {
+    renderWithProviders(
+        <FooterStylesProvider>
+            <LinksList links={links} />
+        </FooterStylesProvider>
+    )
+
+    expect(screen.getAllByRole('listitem')).toHaveLength(1)
+    expect(screen.getByRole('link', {name: links[0].text})).toBeInTheDocument()
+    expect(screen.queryByRole('heading')).toBeNull()
+    expect(document.querySelector(horizontalVariantSelector)).toBeNull()
+})
+
+test('renders LinksList with heading', () => {
+    renderWithProviders(
+        <FooterStylesProvider>
+            <LinksList links={links} heading="Customer Support" />
+        </FooterStylesProvider>
+    )
+
+    expect(screen.getByRole('heading')).toBeInTheDocument()
+})
+
+test('renders LinksList with horizontal variant', () => {
+    renderWithProviders(
+        <FooterStylesProvider>
+            <LinksList links={links} variant="horizontal" />
+        </FooterStylesProvider>
+    )
+
+    expect(document.querySelector(horizontalVariantSelector)).toBeInTheDocument()
+})